:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --primary: #0f766e;
  --primary-dark: #115e59;
  --accent: #0369a1;
  --text: #173331;
  --muted: #526d69;
  --border: #c8ddd9;
  --surface-muted: #eef8f5;
  --danger: #be123c;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #d9efea; }
body { min-height: 100vh; margin: 0; color: var(--text); background: radial-gradient(circle at 20% 12%, rgb(255 255 255 / 88%), transparent 30%), linear-gradient(145deg, #d8f0eb, #edf7f5 58%, #c8e5df); }
button, input { font: inherit; }

.login-shell { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 20px; padding: 28px 16px; }
.login-card { width: min(440px, calc(100vw - 32px)); padding: 34px; border: 1px solid rgb(158 195 188 / 75%); border-radius: 22px; background: rgb(255 255 255 / 94%); box-shadow: 0 24px 70px rgb(15 78 74 / 18%); }
.brand-mark { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 26px; border-radius: 15px; color: white; background: var(--primary); box-shadow: 0 8px 22px rgb(15 118 110 / 25%); }
.brand-mark svg { width: 29px; fill: currentColor; }
.eyebrow { margin: 0 0 7px; color: var(--primary); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }
h1 { margin: 0; color: #102a28; font-size: clamp(27px, 6vw, 34px); line-height: 1.08; letter-spacing: -.04em; }
.intro { margin: 14px 0 26px; color: var(--muted); font-size: 15px; line-height: 1.55; }
form { display: grid; gap: 16px; }
label { display: grid; gap: 7px; font-size: 13px; font-weight: 800; }
input { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #adc9c3; border-radius: 9px; color: #102a28; background: white; transition: border-color 180ms ease, box-shadow 180ms ease; }
input:focus { border-color: var(--primary); outline: 0; box-shadow: 0 0 0 4px rgb(15 118 110 / 14%); }
button { min-height: 48px; margin-top: 4px; border: 0; border-radius: 9px; color: white; background: var(--accent); box-shadow: 0 5px 16px rgb(3 105 161 / 20%); font-weight: 900; cursor: pointer; transition: background-color 180ms ease, box-shadow 180ms ease; }
button:hover { background: #075985; }
button:focus-visible { outline: 3px solid rgb(3 105 161 / 30%); outline-offset: 3px; }
button:disabled { cursor: wait; opacity: .65; box-shadow: none; }
.login-error { margin: -2px 0 0; padding: 10px 12px; border: 1px solid #fecdd3; border-radius: 8px; color: var(--danger); background: #fff1f2; font-size: 13px; font-weight: 700; line-height: 1.4; }
.login-footnote { margin: 0; color: #476762; font-size: 12px; text-align: center; }

@media (max-width: 480px) {
  .login-card { padding: 27px 22px; border-radius: 17px; }
  .brand-mark { margin-bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}