:root{
  --green:#007a3d;
  --green-dark:#006330;
  --text:#111827;
  --muted:#566274;
  --line:#e2e8f0;
  --bg:#ffffff;
  --card:#ffffff;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 50% 0%, rgba(0,122,61,.055), transparent 34%),
    linear-gradient(180deg,#fff 0%,#fbfdfc 68%,#fff 100%);
}
body:before,body:after{
  content:"";
  position:fixed;
  z-index:-1;
  pointer-events:none;
  width:720px;
  height:420px;
  border-radius:50%;
  border:1px solid rgba(0,122,61,.10);
  opacity:.58;
}
body:before{
  left:-310px;
  top:330px;
  transform:rotate(18deg);
  box-shadow:0 0 0 12px rgba(0,122,61,.012),0 0 0 24px rgba(0,122,61,.012),0 0 0 36px rgba(0,122,61,.012),0 0 0 48px rgba(0,122,61,.012),0 0 0 60px rgba(0,122,61,.012),0 0 0 72px rgba(0,122,61,.012);
}
body:after{
  right:-300px;
  top:160px;
  transform:rotate(-20deg);
  box-shadow:0 0 0 12px rgba(0,122,61,.012),0 0 0 24px rgba(0,122,61,.012),0 0 0 36px rgba(0,122,61,.012),0 0 0 48px rgba(0,122,61,.012),0 0 0 60px rgba(0,122,61,.012),0 0 0 72px rgba(0,122,61,.012);
}
.page{min-height:100vh;display:flex;flex-direction:column}
.main{
  flex:1;
  width:min(980px,92vw);
  margin:0 auto;
  padding:48px 0 38px;
  text-align:center;
}
.top-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-bottom:34px;
}
.brand-icon{
  width:74px;
  height:74px;
  color:var(--green);
  flex:0 0 auto;
}
.brand-name{
  margin:0;
  font-size:50px;
  line-height:1;
  letter-spacing:-2px;
  font-weight:850;
}
.brand-name .dark{color:#111827}
.brand-name .green{color:var(--green)}
h1{
  margin:0 0 14px;
  font-size:34px;
  line-height:1.15;
  letter-spacing:-.6px;
}
h1 span{color:var(--green)}
.lead{
  margin:0 0 38px;
  color:#4b5563;
  font-size:18px;
}
.login-card{
  width:min(670px,100%);
  margin:0 auto;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(226,232,240,.95);
  border-radius:18px;
  box-shadow:0 24px 70px rgba(15,23,42,.11);
  padding:38px 36px 34px;
}
.card-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  color:var(--green-dark);
  font-size:24px;
  font-weight:850;
  margin:0 0 26px;
}
.card-title svg{width:26px;height:26px;fill:currentColor}
.field{
  position:relative;
  margin:0 0 22px;
}
.field input{
  display:block;
  width:100%;
  height:64px;
  border:1px solid #ccd6e2;
  border-radius:9px;
  background:#fff;
  padding:0 58px;
  font-size:18px;
  color:#111827;
  outline:none;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.field input:focus{
  border-color:var(--green);
  box-shadow:0 0 0 4px rgba(0,122,61,.10);
}
.input-icon{
  position:absolute;
  left:22px;
  top:50%;
  transform:translateY(-50%);
  width:24px;
  height:24px;
  color:#667085;
  pointer-events:none;
}
.eye-btn{
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#667085;
  cursor:pointer;
}
.eye-btn svg{width:24px;height:24px}
.btn{
  width:100%;
  height:64px;
  border:0;
  border-radius:9px;
  background:linear-gradient(135deg,var(--green-dark),#009447);
  color:#fff;
  font-size:20px;
  font-weight:850;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  box-shadow:0 16px 28px rgba(0,122,61,.20);
}
.btn svg{width:24px;height:24px}
.forgot{
  display:inline-block;
  color:var(--green);
  text-decoration:none;
  margin-top:24px;
  font-size:17px;
}
.forgot:hover{text-decoration:underline}
.security-note{
  margin:42px auto 0;
  color:#536174;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  font-size:17px;
}
.security-note svg{width:24px;height:24px;color:var(--green)}
.security-note strong{color:#344054}
.footer{
  width:min(1180px,94vw);
  margin:0 auto;
  border-top:1px solid var(--line);
  padding:28px 0 30px;
  color:#536174;
}
.footer-links{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  margin-bottom:25px;
}
.footer-links a{
  color:#536174;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:16px;
}
.footer-links a:hover{color:var(--green)}
.footer-links svg{width:20px;height:20px}
.dot{color:#9aa4b2}
.copyright{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  font-size:16px;
}
.mwhub{display:inline-flex;align-items:center;text-decoration:none}
.mwhub img{width:98px;height:auto;display:block}
.legal-main{
  flex:1;
  width:min(980px,92vw);
  margin:0 auto;
  padding:36px 0 42px;
}
.legal-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 18px 52px rgba(15,23,42,.07);
  padding:34px;
}
.legal-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  margin-bottom:26px;
}
.legal-top a{
  color:var(--green);
  text-decoration:none;
  font-weight:750;
}
.legal-card h1{
  text-align:left;
  margin:0 0 8px;
  font-size:34px;
}
.legal-card h2{
  margin:28px 0 10px;
  color:#143322;
  font-size:20px;
}
.legal-card p,.legal-card li{
  color:#374151;
  line-height:1.65;
  font-size:16px;
}
.legal-card ul{padding-left:22px}
@media(max-width:760px){
  .main{padding-top:36px}
  .top-brand{gap:10px;margin-bottom:28px}
  .brand-icon{width:58px;height:58px}
  .brand-name{font-size:38px}
  h1{font-size:29px}
  .lead{font-size:16px}
  .login-card{padding:30px 22px}
  .field input{font-size:16px}
  .footer-links{gap:12px}
  .dot{display:none}
}