:root {
  --bg: #F4F6F8; --surface: #FFFFFF; --line: #DDE2E6; --line-strong: #C9D1D8; --text: #16202A; --muted: #55606B;
  --primary: #0B5CAD; --primary-strong: #0B4F94; --amber: #8A5300; --amber-bg: #FFF2DC; --red: #A4271F; --red-bg: #FDECEA;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font: 15px/1.45 "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #7FB0E6; outline-offset: 2px; }
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.login-card {
  width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 32px 28px 28px; box-shadow: 0 8px 28px rgba(22, 32, 42, .06);
}
.login-brand { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0 0 6px; }
.login-brand img { display: block; width: auto; }
.login-brand img:first-child { height: 30px; }
.login-brand img:last-child { height: 19px; }
.login-org { text-align: center; color: var(--muted); margin: 0 0 4px; font-size: 14px; }
.login-env {
  display: table; margin: 4px auto 0; background: var(--amber-bg); color: var(--amber); border: 1px solid #F0C98A;
  border-radius: 999px; padding: 1px 10px; font-size: 12px; font-weight: 700;
}
form { display: flex; flex-direction: column; margin-top: 22px; }
.login-msg { text-align: center; color: var(--muted); margin: 0 0 14px; }
label { font-size: 13px; font-weight: 600; margin: 0 0 4px; }
input {
  font: inherit; color: inherit; height: 40px; padding: 0 12px; margin-bottom: 14px; border: 1px solid var(--line-strong);
  border-radius: 8px; background: #fff;
}
input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(11, 92, 173, .15); }
.login-err { background: var(--red-bg); color: var(--red); border-radius: 8px; padding: 8px 12px; margin: 0 0 14px; font-size: 14px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 8px 16px; border-radius: 8px;
  font: inherit; font-weight: 600; cursor: pointer; border: 1px solid var(--primary); background: var(--primary); color: #fff;
}
.btn:hover { background: var(--primary-strong); }
.btn:disabled { opacity: .55; cursor: default; }