:root {
  color-scheme: light;
  --ink: #132238;
  --muted: #66788c;
  --line: #d9e2ea;
  --navy: #183c59;
  --navy-light: #2c607e;
  --teal: #0a887d;
  --danger: #b63d37;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 14% 18%, rgba(20, 137, 149, .12), transparent 31%),
    linear-gradient(145deg, #edf3f7 0%, #f8fafc 52%, #edf3f7 100%);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

.login-shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 32px 18px;
}

.login-panel {
  width: min(100%, 430px);
  padding: 34px 36px 28px;
  border: 1px solid rgba(91, 117, 139, .22);
  border-radius: 8px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 22px 60px rgba(27, 57, 78, .13);
}

.login-brand { display: flex; align-items: center; gap: 13px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.brand-mark { display: grid; width: 45px; height: 45px; place-items: center; border-radius: 5px; background: linear-gradient(145deg, var(--navy), var(--navy-light)); color: #fff; font-size: 21px; font-weight: 800; }
.login-brand p, .login-brand h1 { margin: 0; }
.login-brand p { color: var(--teal); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.login-brand h1 { margin-top: 4px; font-size: 17px; letter-spacing: .03em; }

.login-copy { margin: 27px 0 23px; }
.login-copy .eyebrow { margin: 0 0 6px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .14em; }
.login-copy h2 { margin: 0; font-size: 25px; }
.login-copy > p:last-child { margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }

.login-alert { display: none; margin: 0 0 17px; padding: 10px 12px; border-left: 3px solid var(--danger); background: #fff2f1; color: #86342f; font-size: 12px; line-height: 1.55; }
.login-alert:target { display: block; }

.login-form { display: grid; gap: 17px; }
.login-form label { display: grid; gap: 7px; }
.login-form label span { color: #44586c; font-size: 11px; font-weight: 700; }
.login-form input { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #c8d4df; border-radius: 4px; background: #fff; color: var(--ink); font: inherit; font-size: 14px; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.login-form input:focus { border-color: #328aa2; box-shadow: 0 0 0 3px rgba(50, 138, 162, .13); }
.login-form button { min-height: 48px; margin-top: 5px; border: 1px solid #173c59; border-radius: 4px; background: linear-gradient(135deg, #183c59 0%, #29617f 100%); color: #fff; font: inherit; font-size: 14px; font-weight: 750; cursor: pointer; transition: filter .15s ease, transform .15s ease; }
.login-form button:hover { filter: brightness(1.07); }
.login-form button:active { transform: translateY(1px); }

.login-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 22px 0 0; color: #77889a; font-size: 10px; }
.login-note span { width: 7px; height: 7px; border-radius: 50%; background: #33b99b; }

@media (max-width: 480px) {
  .login-shell { padding: 0; place-items: stretch; }
  .login-panel { width: 100%; min-height: 100vh; padding: 28px 23px; border: 0; border-radius: 0; box-shadow: none; }
}