* { box-sizing: border-box; }
:root { font-family: Inter, "Segoe UI", Arial, sans-serif; color: #244857; color-scheme: light; }
body {
  margin: 0; min-height: 100vh; min-height: 100svh; display: grid; place-items: center;
  padding: 32px 20px;
  background: radial-gradient(ellipse at 0% 0%, #ccebe5 0, transparent 52%),
              radial-gradient(ellipse at 100% 100%, #dbe7e7 0, transparent 58%), #eff5f0;
}
.login-card {
  width: min(488px, 100%); padding: 60px 38px 64px;
  background: #feffff; border: 1px solid #d3e6ee; border-radius: 34px;
  box-shadow: 0 30px 70px rgba(32, 69, 75, .14);
}
.login-brand { text-align:center; margin:0 0 38px; color:#12335f; }
.login-brand > span { display:block; color:#247bd3; font-size:13px; letter-spacing:.2em; font-weight:700; margin-bottom:5px; }
.login-brand > strong { display:block; font-size:24px; }
.login-brand h1 { margin:13px 0 0; font-size:15px; color:#607997; font-weight:400; }
form { margin: 0; }
.field + .field { margin-top: 16px; }
label { display: block; margin: 0 3px 7px; font-size: 17px; line-height: 23px; font-weight: 500; }
input:not([type="hidden"]):not([type="checkbox"]) {
  display: block; width: 100%; height: 65px; padding: 0 19px; border: 1px solid #c5dcdf;
  border-radius: 18px; background: #f7fbfa; color: #244857; font: inherit; font-size: 19px;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
input:focus { border-color: #4297be; box-shadow: 0 0 0 5px #e8f0f4; }
input[aria-invalid="true"] { border-color: #b85757; }
button.submit-button {
  margin-top: 22px; width: 100%; min-height: 65px; padding: 15px 20px; border: 0;
  border-radius: 18px; background: linear-gradient(110deg, #167f79, #276f91);
  color: white; font: inherit; font-weight: 700; font-size: 21px; cursor: pointer;
  box-shadow: 0 16px 30px rgba(54, 123, 144, .18); transition: filter .15s, transform .15s;
}
button.submit-button:hover { filter: brightness(1.04); }
button.submit-button:active { transform: translateY(1px); }
button:focus-visible { outline: 3px solid #327795; outline-offset: 4px; }
button:disabled { opacity: .72; cursor: wait; }
.error { margin: 16px 3px 0; font-size: 15px; line-height: 1.45; color: #9c3838; }
[hidden] { display: none !important; }
@media (max-width: 520px) {
  body { padding: 24px 20px; }
  .login-card { padding: 44px 24px 44px; border-radius: 28px; }
  .login-brand { margin-bottom:32px; }
}
@media (prefers-reduced-motion: reduce) { input, button { transition: none; } }

/* Saved dashboard theme also applies before the login screen appears. */
html[data-theme="dark"] { color-scheme: dark; color: #e7eef7; background: #111923; }
html[data-theme="dark"] body { background: #111923; }
html[data-theme="dark"] .login-card { background: #1b2735; border-color: #374859; box-shadow: 0 30px 70px #0004; }
html[data-theme="dark"] input { color: #e7eef7; background: #111e2c; border-color: #52657a; }
html[data-theme="dark"] input:focus { border-color: #80dbd1; box-shadow: 0 0 0 5px #80dbd122; }
html[data-theme="dark"] input[aria-invalid="true"] { border-color: #ffafa6; }
html[data-theme="dark"] .error { color: #ffafa6; }
html[data-theme="dark"] button { background: #2c6969; color: #fff; }

.password-field{position:relative}.password-field input{padding-right:60px}.password-toggle{position:absolute;right:7px;top:10px;width:44px;height:44px;margin:0;padding:10px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;color:inherit;cursor:pointer;box-shadow:none}.password-toggle:hover{background:#e4eff2}.password-toggle svg{width:23px;height:23px}html[data-theme="dark"] .login-brand{color:#e1ebf7}html[data-theme="dark"] .login-brand>span{color:#8cc0ff}html[data-theme="dark"] .login-brand h1{color:#a8bad0}html[data-theme="dark"] .password-toggle{background:transparent}html[data-theme="dark"] .password-toggle:hover{background:#2d4054}

.remember-option { display:flex; align-items:center; gap:10px; margin:22px 3px 0; cursor:pointer; font-size:16px; }
.remember-option input { width:20px; height:20px; margin:0; flex-shrink:0; accent-color:#167f79; }
.remember-help { margin:7px 3px 0; font-size:13px; line-height:1.5; color:#607997; }
html[data-theme="dark"] .remember-help { color:#a8bad0; }