* { box-sizing: border-box; }
:root { --teal:#005355; --teal-light:#007a7d; --border:#dce8e8; --text:#183030; --muted:#5d7474; }
html, body { min-height:100%; margin:0; }
body {
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:radial-gradient(circle at 15% 15%,rgba(0,83,85,.14),transparent 28rem),linear-gradient(145deg,#f4f9f9,#eef5f5);
}
.login-page { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card {
  width:min(100%,430px); padding:36px; background:rgba(255,255,255,.96);
  border:1px solid var(--border); border-radius:22px; box-shadow:0 24px 70px rgba(0,83,85,.16);
}
.login-logo { width:190px; height:70px; display:block; object-fit:contain; object-position:left center; margin-bottom:24px; }
.login-heading h1 { margin:0; font-size:25px; }
.login-heading p { margin:7px 0 25px; color:var(--muted); line-height:1.5; }
label { display:block; margin:15px 0 6px; font-size:13px; font-weight:700; }
input {
  width:100%; height:46px; padding:0 13px; border:1.5px solid var(--border);
  border-radius:10px; color:var(--text); font:inherit; outline:none; background:white;
}
input:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(0,83,85,.1); }
.password-field { position:relative; }
.password-field input { padding-right:74px; }
.password-field button {
  position:absolute; right:8px; top:7px; height:32px; padding:0 9px; border:0;
  border-radius:7px; color:var(--teal); background:#edf6f6; font-weight:700; cursor:pointer;
}
.remember-option {
  margin:14px 0 0;
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--muted);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}
.remember-option input {
  width:17px;
  height:17px;
  margin:0;
  padding:0;
  accent-color:var(--teal);
  box-shadow:none;
  cursor:pointer;
}
.login-error { min-height:20px; margin-top:14px; color:#b91c1c; font-size:13px; }
.login-submit {
  width:100%; height:46px; border:0; border-radius:10px; color:white;
  background:var(--teal); font:inherit; font-weight:700; cursor:pointer;
}
.login-submit:hover { background:var(--teal-light); }
.login-submit:disabled { opacity:.65; cursor:wait; }
.login-security { margin:18px 0 0; text-align:center; color:var(--muted); font-size:11px; }
@media (max-width:480px) {
  .login-page { padding:14px; }
  .login-card { padding:26px 20px; border-radius:16px; }
  .login-logo { width:165px; margin-inline:auto; object-position:center; }
}