:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #15243a;
  background: #eaf1f7;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(43, 209, 220, 0.18), transparent 28rem),
    linear-gradient(145deg, #061c35 0 36%, #eaf1f7 36% 100%);
}

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

.login-card {
  width: min(470px, 100%);
  padding: 38px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 22px;
  box-shadow: 0 28px 80px rgba(3, 21, 40, 0.28);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}

.brand-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #082b50;
  border: 3px solid #2bd1dc;
  border-radius: 50%;
  font-size: 1.35rem;
}

.brand strong,
.brand small { display: block; letter-spacing: 0.08em; }
.brand strong { color: #082b50; font-size: 1.14rem; }
.brand small { margin-top: 2px; color: #536579; font-size: 0.68rem; font-weight: 750; }

.eyebrow {
  margin: 0 0 7px;
  color: #087b84;
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

h1 { margin: 0; color: #082b50; font-size: clamp(1.65rem, 5vw, 2.15rem); line-height: 1.12; }
.intro { margin: 13px 0 26px; color: #56687b; line-height: 1.55; }

form { display: grid; }
label { margin: 15px 0 7px; font-weight: 760; }
input {
  width: 100%;
  min-height: 49px;
  padding: 0 13px;
  color: #17273c;
  background: #fff;
  border: 1px solid #aebdca;
  border-radius: 10px;
  font: inherit;
}
input:focus { outline: 3px solid rgba(43, 209, 220, 0.27); border-color: #087b84; }
#admin-code { letter-spacing: 0.08em; text-transform: uppercase; }
form small { color: #68798a; }

button {
  min-height: 50px;
  margin-top: 23px;
  padding: 0 20px;
  color: #fff;
  background: #082b50;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
button:hover { background: #0b3c6c; }
button:focus-visible { outline: 3px solid #2bd1dc; outline-offset: 3px; }
button:disabled { opacity: 0.64; cursor: wait; }

.form-error {
  margin: 15px 0 0;
  padding: 10px 12px;
  color: #812827;
  background: #ffeded;
  border-radius: 8px;
  font-size: 0.88rem;
}

.security-note {
  display: grid;
  gap: 3px;
  margin-top: 26px;
  padding: 13px 14px;
  color: #14535a;
  background: #e8f8f8;
  border-radius: 10px;
  font-size: 0.82rem;
  line-height: 1.45;
}

.scope-note { margin: 18px 0 0; color: #718090; font-size: 0.76rem; text-align: center; }

@media (max-width: 540px) {
  body { background: #eaf1f7; }
  .login-card { padding: 28px 21px; border-radius: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}