*{box-sizing:border-box;margin:0;padding:0}
:root{
  --green:#0f5d4a;
  --green-deep:#0b4c3e;
  --green-soft:#2aa77d;
  --gold:#d8bf20;
  --paper:#f4f2ed;
  --text:#0e5448;
  --muted:#7f8a84;
  --line:#dedbd2;
}
html,body{min-height:100%}
body{
  min-height:100vh;
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--paper);
}
.login-page{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1.03fr) minmax(430px,.97fr);
}
.brand-panel{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  padding:46px 64px 52px;
  display:flex;
  flex-direction:column;
  color:#fff;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    radial-gradient(circle at 22% 28%,rgba(255,255,255,.08),transparent 31%),
    radial-gradient(circle at 80% 12%,rgba(42,167,125,.18),transparent 36%),
    linear-gradient(145deg,#0b4c3e 0%,#0f644f 58%,#0d5144 100%);
  background-size:96px 96px,96px 96px,auto,auto,auto;
}
.brand-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.045),transparent 12% 88%,rgba(0,0,0,.05)),
    repeating-linear-gradient(0deg,transparent 0 42px,rgba(255,255,255,.018) 42px 43px);
  pointer-events:none;
}
.brand-panel::after{
  content:"";
  position:absolute;
  width:38%;
  max-width:360px;
  min-width:220px;
  aspect-ratio:1;
  right:-7%;
  bottom:-13%;
  border-radius:50%;
  background:rgba(255,255,255,.045);
  box-shadow:0 0 90px rgba(0,0,0,.08) inset;
  pointer-events:none;
}
.brand-top{
  position:relative;
  z-index:1;
  width:195px;
  height:auto;
  opacity:.88;
}
.brand-content{
  position:relative;
  z-index:1;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-bottom:70px;
}
.ambi-wordmark{
  display:flex;
  align-items:flex-end;
  gap:12px;
  margin-bottom:36px;
  font-weight:900;
  font-size:clamp(48px,5.25vw,82px);
  line-height:.76;
  letter-spacing:0;
}
.ambi-wordmark span{display:block}
.ambi-wordmark i{
  display:block;
  width:.13em;
  height:.79em;
  background:var(--gold);
}
.brand-tagline{
  position:relative;
  padding-left:24px;
  color:rgba(255,255,255,.62);
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(22px,2.1vw,31px);
  font-style:italic;
  font-weight:700;
  line-height:1.35;
}
.brand-tagline::before{
  content:"";
  position:absolute;
  left:0;
  top:2px;
  width:3px;
  height:72px;
  background:var(--gold);
}
.brand-pills{
  position:relative;
  z-index:1;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.brand-pills span{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 20px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.5);
  font-size:11px;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
}
.login-panel{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:56px;
  background:var(--paper);
}
.login-card{
  width:min(100%,470px);
}
.secure-badge{
  display:block;
  margin-bottom:18px;
  color:var(--green-soft);
  font-size:12px;
  font-weight:900;
  letter-spacing:4px;
  text-transform:uppercase;
}
.login-card h1{
  margin-bottom:50px;
  color:var(--text);
  font-size:42px;
  font-weight:900;
  line-height:1.14;
  letter-spacing:0;
}
.form-group{margin-bottom:24px}
.form-label{
  display:block;
  margin-bottom:11px;
  color:#7b8780;
  font-size:12px;
  font-weight:900;
  letter-spacing:2.2px;
  text-transform:uppercase;
}
input{
  width:100%;
  height:62px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  color:#2d3c37;
  font:inherit;
  font-size:14px;
  font-weight:700;
  padding:0 20px;
  outline:none;
  box-shadow:0 8px 24px rgba(26,38,34,.03);
  transition:border-color .16s ease,box-shadow .16s ease;
}
input::placeholder{color:#b8b7b1;font-weight:800}
input:focus{
  border-color:rgba(15,93,74,.45);
  box-shadow:0 0 0 4px rgba(15,93,74,.1),0 8px 24px rgba(26,38,34,.04);
}
.password-field{
  position:relative;
}
.password-field input{
  padding-right:64px;
}
.password-toggle{
  position:absolute;
  top:50%;
  right:14px;
  z-index:2;
  width:40px;
  height:40px;
  border:1px solid rgba(15,93,74,.14);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--green);
  background:#fff;
  cursor:pointer;
  transform:translateY(-50%);
  box-shadow:0 4px 12px rgba(15,93,74,.08);
  transition:background .16s ease,color .16s ease,box-shadow .16s ease;
}
.password-toggle:hover,
.password-toggle:focus-visible{
  color:#fff;
  background:var(--green);
  box-shadow:0 6px 14px rgba(15,93,74,.18);
  outline:none;
}
.password-toggle svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.btn-login{
  width:100%;
  height:64px;
  border-radius:10px;
  font:inherit;
  font-size:16px;
  font-weight:900;
}
.btn-login{
  margin-top:16px;
  border:0;
  color:#fff;
  background:var(--green);
  cursor:pointer;
  box-shadow:0 12px 24px rgba(15,93,74,.16);
  transition:background .16s ease,transform .16s ease,box-shadow .16s ease;
}
.btn-login:hover{
  background:var(--green-deep);
  transform:translateY(-1px);
  box-shadow:0 16px 28px rgba(15,93,74,.2);
}
.alert{
  margin:-26px 0 28px;
  border:1px solid rgba(184,65,50,.24);
  border-radius:8px;
  background:rgba(184,65,50,.08);
  color:#984034;
  padding:12px 14px;
  font-size:14px;
  font-weight:700;
}
.login-footer{
  margin-top:48px;
  padding-top:30px;
  border-top:1px solid #dfddd5;
  display:flex;
  align-items:center;
  gap:12px;
  color:#b0ada6;
  font-size:12px;
  font-weight:900;
  letter-spacing:1.4px;
}
.login-footer span{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--gold);
  flex:0 0 auto;
}
@media(max-width:920px){
  .login-page{grid-template-columns:1fr}
  .brand-panel{
    min-height:46vh;
    padding:34px 28px 30px;
  }
  .brand-content{padding:68px 0 52px}
  .brand-top{width:160px}
  .ambi-wordmark{font-size:clamp(42px,10.5vw,72px)}
  .login-panel{
    min-height:54vh;
    align-items:flex-start;
    padding:44px 28px 52px;
  }
  .login-card{width:min(100%,520px)}
  .login-card h1{font-size:38px;margin-bottom:36px}
}
@media(max-width:520px){
  .brand-panel{min-height:42vh}
  .brand-top{width:138px}
  .brand-content{padding:52px 0 42px}
  .brand-tagline{font-size:21px}
  .brand-pills span{
    min-height:30px;
    padding:0 14px;
    font-size:9px;
    letter-spacing:1.5px;
  }
  .login-panel{padding:38px 22px 44px}
  .secure-badge{font-size:11px;letter-spacing:3px}
  .login-card h1{font-size:34px}
  input,.btn-login{height:58px}
}