:root {
  color-scheme: dark;
  font-family: Georgia, 'Times New Roman', serif;
  background: #090f24;
  color: #f7f1de;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 8%, rgba(200, 159, 72, .16), transparent 34rem),
    linear-gradient(180deg, #111a37, #090f24 68%);
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}

.login-card {
  width: min(100%, 34rem);
  padding: clamp(1.5rem, 5vw, 3rem);
  border: 1px solid rgba(218, 181, 93, .42);
  border-radius: 1.5rem;
  background: rgba(13, 22, 48, .92);
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, .34);
}

.brand-mark {
  width: 4rem;
  height: 4rem;
  margin-bottom: 1.25rem;
  border: 1px solid rgba(218, 181, 93, .55);
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.brand-mark span,
.brand-mark span::after {
  display: block;
  background: #ddb65e;
  content: '';
}

.brand-mark span { width: .3rem; height: 2rem; }
.brand-mark span::after { width: 1.25rem; height: .3rem; transform: translate(-.48rem, .48rem); }

.eyebrow {
  margin: 0 0 .5rem;
  color: #ddb65e;
  font: 700 .78rem/1.4 system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

h1 { margin: 0; font-size: clamp(2rem, 8vw, 3.25rem); line-height: 1.05; }
.lead { color: #d8dcec; font: 1.08rem/1.7 system-ui, sans-serif; }

.login-form { display: grid; gap: .7rem; margin: 2rem 0; }
label, button { font: 700 1rem/1.3 system-ui, sans-serif; }

input {
  min-height: 3.5rem;
  width: 100%;
  border: 2px solid #7882a4;
  border-radius: .8rem;
  padding: .8rem 1rem;
  background: #fff;
  color: #11172a;
  font: 1.05rem/1.3 system-ui, sans-serif;
}

button {
  min-height: 3.5rem;
  margin-top: .35rem;
  border: 0;
  border-radius: .8rem;
  padding: .9rem 1.2rem;
  background: #ddb65e;
  color: #11172a;
  cursor: pointer;
}

input:focus-visible, button:focus-visible { outline: 4px solid #9dd7ff; outline-offset: 3px; }
.help { border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 1rem; font: .98rem/1.6 system-ui, sans-serif; color: #d8dcec; }
.help h2 { color: #f7f1de; font-size: 1.05rem; }
.message { display: block; padding: .9rem 1rem; border-radius: .7rem; font: .98rem/1.5 system-ui, sans-serif; }
.message-error { border: 1px solid #ffbaaa; background: #4a2028; }
.message-signed-out { border: 1px solid #8fd6b1; background: #173a32; }

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

@media print { body { background: #fff; color: #000; } .login-card { box-shadow: none; border-color: #777; } }