:root{
  --auth-navy:#081a2b;
  --auth-navy-2:#0d2a44;
  --auth-blue:#2f6fed;
  --auth-blue-2:#1f57d6;
  --auth-cyan:#38bdf8;
  --auth-ink:#0f1f33;
  --auth-muted:#66788a;
  --auth-line:#dce6f0;
  --auth-soft:#f5f8fc;
}

html,body{min-height:100%;margin:0}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:#eef4f9;color:var(--auth-ink)}

.auth-page{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(480px,.88fr) minmax(560px,1.12fr);
  background:#f7f9fc;
  color:var(--auth-ink);
}

.auth-showcase{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:64px clamp(44px,5.5vw,92px);
  color:#fff;
  background:
    radial-gradient(circle at 8% 8%,rgba(56,189,248,.22),transparent 30%),
    radial-gradient(circle at 88% 88%,rgba(47,111,237,.26),transparent 34%),
    linear-gradient(145deg,var(--auth-navy) 0%,var(--auth-navy-2) 100%);
}

.auth-showcase::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.18;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(to bottom,black,transparent 88%);
}
.auth-showcase::after{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  right:-190px;
  bottom:-180px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 0 0 58px rgba(255,255,255,.025),0 0 0 116px rgba(255,255,255,.018);
}
.auth-showcase>*{position:relative;z-index:1}

.auth-back-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  min-height:38px;
  padding:0 14px;
  margin:0 0 18px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:10px;
  color:#e8f3ff;
  background:rgba(255,255,255,.07);
  text-decoration:none;
  font-size:13px;
  font-weight:800;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.auth-back-button:hover{
  border-color:rgba(255,255,255,.42);
  background:rgba(255,255,255,.12);
  transform:translateX(-2px);
}
.auth-showcase-logo-link{
  display:block;
  width:max-content;
  max-width:70%;
  margin:0 0 34px;
  text-decoration:none;
}
.auth-showcase-logo{
  display:block;
  width:230px;
  max-width:100%;
  height:72px;
  object-fit:contain;
  object-position:left center;
  padding:10px 14px;
  margin:0;
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;
  background:rgba(255,255,255,.96);
  box-shadow:0 16px 36px rgba(0,0,0,.16);
}

.auth-page .eyebrow{
  display:inline-flex;
  align-items:center;
  width:max-content;
  gap:8px;
  margin:0 0 18px;
  color:#9cdcff!important;
  font-family:inherit;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.auth-page .eyebrow::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--auth-cyan);
  box-shadow:0 0 0 5px rgba(56,189,248,.12);
}

.auth-showcase h1{
  max-width:650px;
  margin:0;
  color:#fff;
  font-family:inherit!important;
  font-size:clamp(42px,4.6vw,66px);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.055em;
}
.auth-showcase h1 span{color:#78c7ff}
.auth-showcase>p{
  max-width:610px;
  margin:24px 0 0;
  color:#b9cbe0;
  font-size:17px;
  line-height:1.72;
}

.auth-benefits{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:34px;
  max-width:590px;
}
.auth-benefit{
  display:flex;
  align-items:center;
  gap:12px;
  color:#e3edf7;
  font-size:14px;
  font-weight:650;
}
.auth-check{
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  flex:0 0 26px;
  border:1px solid rgba(128,207,255,.35);
  border-radius:8px;
  color:#dff6ff;
  background:rgba(56,189,248,.16);
  font-size:13px;
  font-weight:900;
}

.auth-panel{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:54px clamp(30px,5vw,88px);
  background:
    radial-gradient(circle at 100% 0%,rgba(47,111,237,.08),transparent 30%),
    linear-gradient(180deg,#fbfcfe 0%,#f4f7fb 100%);
}
.auth-panel::before{
  content:"";
  position:absolute;
  width:340px;
  height:340px;
  left:8%;
  top:10%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(56,189,248,.09),transparent 68%);
  pointer-events:none;
}

.auth-card{
  position:relative;
  z-index:1;
  width:min(100%,510px);
  padding:38px 40px 34px;
  border:1px solid var(--auth-line);
  border-radius:24px;
  background:rgba(255,255,255,.96);
  box-shadow:0 26px 70px rgba(22,47,76,.12);
}
.auth-brand{
  display:flex!important;
  align-items:center;
  width:max-content;
  margin:0 0 30px!important;
  text-decoration:none;
}
.auth-brand img{
  display:block!important;
  width:176px!important;
  height:52px!important;
  object-fit:contain!important;
  object-position:left center!important;
}

.auth-card h2{
  margin:0 0 8px;
  color:var(--auth-ink);
  font-family:inherit!important;
  font-size:clamp(28px,3vw,36px);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.035em;
}
.auth-card>.lead{
  margin:0 0 28px;
  color:var(--auth-muted);
  font-size:15px;
  line-height:1.6;
}

.auth-form{display:grid;gap:18px}
.auth-form label{
  display:grid;
  gap:8px;
  color:#34475b;
  font-family:inherit;
  font-size:13px;
  font-weight:750;
}
.auth-form input,
.auth-form select{
  width:100%;
  min-height:48px;
  padding:0 14px;
  border:1px solid #d6e1ec;
  border-radius:12px;
  color:var(--auth-ink);
  background:#fbfdff;
  font:inherit;
  font-size:15px;
  box-sizing:border-box;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.auth-form input:hover{border-color:#c4d3e2;background:#fff}
.auth-form input:focus-visible{
  border-color:#7fa7ff;
  outline:0;
  background:#fff;
  box-shadow:0 0 0 4px rgba(47,111,237,.11);
}
.auth-field-help{
  display:block;
  margin-top:-1px;
  color:#718195;
  font-size:12px;
  font-weight:500;
  line-height:1.45;
}

.auth-form-actions{
  display:grid;
  gap:10px;
  margin-top:4px;
}
.auth-submit{
  width:100%;
  min-height:50px;
  margin:0;
  border:0!important;
  border-radius:12px!important;
  color:#fff!important;
  background:linear-gradient(135deg,var(--auth-blue),var(--auth-blue-2))!important;
  box-shadow:0 14px 28px rgba(47,111,237,.22)!important;
  font-family:inherit;
  font-size:15px;
  font-weight:800;
}
.auth-submit:hover{transform:translateY(-1px);box-shadow:0 18px 32px rgba(47,111,237,.27)!important}
.auth-secondary-action{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 16px;
  border:1px solid #cfdbe8;
  border-radius:12px;
  color:#24425f;
  background:#fff;
  text-decoration:none;
  font-size:14px;
  font-weight:800;
  transition:border-color .18s ease,background .18s ease,color .18s ease,transform .18s ease;
}
.auth-secondary-action:hover{
  border-color:#9db6cf;
  color:var(--auth-blue-2);
  background:#f8fbff;
  transform:translateY(-1px);
}

.auth-alert{
  margin:0 0 20px;
  padding:12px 14px;
  border:1px solid #fecaca;
  border-radius:12px;
  color:#991b1b;
  background:#fff7f7;
  font-size:13px;
  line-height:1.5;
}
.auth-switch{
  margin:22px 0 0!important;
  color:#718195!important;
  font-size:13px;
  line-height:1.55;
  text-align:center;
}
.auth-switch a{color:var(--auth-blue-2);font-weight:800;text-decoration:none}
.auth-switch a:hover{text-decoration:underline}
.auth-note{margin-top:14px;color:#718195;font-size:12px;line-height:1.55;text-align:center}

@media(max-width:1050px){
  .auth-page{grid-template-columns:1fr}
  .auth-showcase{min-height:auto;padding:48px 34px}
  .auth-showcase-logo-link{margin-bottom:26px}
  .auth-showcase-logo{width:190px;height:60px}
  .auth-showcase h1{font-size:44px;max-width:720px}
  .auth-showcase>p{font-size:16px}
  .auth-benefits{grid-template-columns:repeat(2,minmax(0,1fr));max-width:800px}
  .auth-panel{padding:44px 22px 60px}
}

@media(max-width:640px){
  .auth-showcase{padding:36px 22px}
  .auth-back-button{margin-bottom:14px}
  .auth-showcase h1{font-size:36px}
  .auth-showcase>p{font-size:15px}
  .auth-benefits{grid-template-columns:1fr}
  .auth-card{padding:28px 22px 26px;border-radius:20px}
  .auth-brand img{width:154px!important;height:46px!important}
  .auth-card h2{font-size:28px}
}