*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#1b5e20 0%,#2e7d32 60%,#388e3c 100%);
  font-family:'Hanken Grotesk','Segoe UI',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.login-card{
  background:#fff;border-radius:14px;
  box-shadow:0 8px 40px rgba(0,0,0,.22);
  padding:36px 36px 30px;width:340px;
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-size:20px;font-weight:800;color:#2e7d32;
  margin-bottom:28px;letter-spacing:-.02em;
}
.brandsq{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:9px;background:#2e7d32;flex:none;
}
.brandsq svg{width:17px;height:17px;color:#fff}
label{
  display:block;font-size:12px;font-weight:700;
  color:#555;text-transform:uppercase;letter-spacing:.04em;
  margin:16px 0 5px;
}
input[type="text"],input[type="password"]{
  width:100%;padding:10px 12px;
  border:1px solid #ddd;border-radius:8px;
  font-size:14px;font-family:inherit;
  color:#222;background:#fff;
  transition:border-color .15s,box-shadow .15s;
  outline:none;
}
input[type="text"]:focus,input[type="password"]:focus{
  border-color:#2e7d32;
  box-shadow:0 0 0 3px rgba(46,125,50,.15);
}
.submit-btn{
  display:block;width:100%;margin-top:22px;
  background:#2e7d32;color:#fff;
  border:none;border-radius:8px;
  padding:11px;font-size:15px;font-weight:700;
  font-family:inherit;cursor:pointer;
  transition:background .15s;
}
.submit-btn:hover{background:#1b5e20}
.err{
  margin-top:14px;padding:9px 12px;
  background:#ffebee;border-radius:7px;
  color:#c62828;font-size:13px;font-weight:600;
}
.login-footer{
  margin-top:20px;text-align:center;
  font-size:12px;color:#999;
}