:root {
  --navy: #0b3a6b;
  --teal: #0a9fb0;
  --slate: #6b7f9c;
  --line: #d9e2ec;
  --bg: #f4f9fc;
  --error: #b42318;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(160deg, #ffffff 0%, var(--bg) 60%, #e8f3f8 100%);
  color: var(--navy);
}
.bg-wave { position: fixed; left: 0; bottom: 0; width: 70vw; max-width: 900px; height: 55vh; z-index: 0; }
.page {
  position: relative; z-index: 1; min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 16px; gap: 32px;
  padding-top: env(safe-area-inset-top, 32px);
}
.logo { width: min(300px, 70vw); height: auto; }
.card {
  width: 100%; max-width: 440px; background: #fff; border-radius: 12px;
  padding: 36px 32px 28px; text-align: center;
  box-shadow: 0 12px 40px rgba(11, 58, 107, .12);
}
h1 { margin: 0 0 8px; font-size: 1.6rem; font-weight: 700; }
.subtitle { margin: 0 0 24px; color: var(--slate); font-size: .9rem; }
.error {
  margin: 0 0 16px; padding: 10px 12px; border-radius: 8px; font-size: .9rem;
  color: var(--error); background: #fdecea; border: 1px solid #f5c2bd;
}
.field {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; background: #fff;
}
.field:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(10, 159, 176, .2); }
.field svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--navy); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.field input {
  flex: 1; border: 0; outline: 0; background: transparent; min-width: 0;
  padding: 14px 0; font: inherit; color: var(--navy);
}
.field input::placeholder { color: var(--slate); }
.toggle { border: 0; background: none; padding: 4px; cursor: pointer; display: flex; }
.toggle:focus-visible, .submit:focus-visible, .forgot:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.submit {
  width: 100%; margin-top: 6px; padding: 14px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--teal); color: #fff; font: inherit; font-weight: 600;
}
.submit:hover { background: #088a99; }
.forgot { display: inline-block; margin-top: 20px; font-size: .9rem; color: var(--teal); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }