/* Clinical Portal sign-in page (S-118). Self-contained: no third-party styles or fonts. */
:root {
  --si-bg: #f6f7f9;
  --si-surface: #ffffff;
  --si-text: #14181f;
  --si-muted: #5b6472;
  --si-border: #dde1e7;
  --si-accent: #3949ab;
  --si-accent-text: #ffffff;
  --si-error: #a3262a;
  --si-note-bg: #e6f4ea;
  --si-note-text: #1e5b31;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --si-bg: #0f1218;
    --si-surface: #171b23;
    --si-text: #e8ebf0;
    --si-muted: #9aa3b2;
    --si-border: #2a303b;
    --si-accent: #7986cb;
    --si-accent-text: #0f1218;
    --si-error: #f08a8d;
    --si-note-bg: #173323;
    --si-note-text: #8fd3a5;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--si-bg); color: var(--si-text); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body.si-busy { cursor: progress; }
.si-app { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.si-card { width: 100%; max-width: 420px; background: var(--si-surface); border: 1px solid var(--si-border); border-radius: 12px; padding: 24px; display: grid; gap: 14px; }
.si-brand { margin: 0; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--si-muted); }
.si-card h1 { margin: 0; font-size: 1.4rem; }
.si-form { display: grid; gap: 14px; }
.si-field { display: grid; gap: 4px; }
.si-field label { font-size: 0.85rem; color: var(--si-muted); }
.si-input { font: inherit; padding: 9px 10px; border: 1px solid var(--si-border); border-radius: 8px; background: var(--si-surface); color: var(--si-text); width: 100%; }
.si-input:focus { outline: 2px solid var(--si-accent); outline-offset: 1px; }
.si-check { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: 0.9rem; }
.si-check input { margin-top: 3px; width: 18px; height: 18px; }
.si-button { display: inline-block; text-align: center; font: inherit; font-weight: 600; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--si-accent); background: var(--si-accent); color: var(--si-accent-text); text-decoration: none; cursor: pointer; }
.si-button:disabled { opacity: 0.6; cursor: progress; }
.si-muted { margin: 0; color: var(--si-muted); }
.si-small { font-size: 0.85rem; }
.si-error { margin: 0; color: var(--si-error); }
.si-note { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--si-note-bg); color: var(--si-note-text); }
.si-qr { justify-self: center; image-rendering: pixelated; background: #fff; padding: 8px; border-radius: 8px; }
.si-key { overflow-wrap: anywhere; font-size: 0.9rem; }