:root { color-scheme: light; --bg: #f4f4f1; --surface: #fff; --ink: #1c1c1a; --muted: #76756f;
  --hair: #e3e2dc; --hair-2: #cfcec7; --focus: #2a78d6; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--bg);
  color: var(--ink); font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; }
.card { width: 100%; max-width: 340px; padding: 32px 28px 28px; background: var(--surface); border: 1px solid var(--hair);
  border-radius: 14px; box-shadow: 0 1px 2px rgba(20, 20, 18, 0.04), 0 10px 28px rgba(20, 20, 18, 0.06); }
.logo { display: block; width: 34px; height: 34px; margin-bottom: 18px; }
h1 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.sub { margin: 4px 0 24px; color: var(--muted); }
label { display: block; margin-bottom: 14px; color: var(--muted); font-size: 12px; font-weight: 500; }
input { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--hair-2); border-radius: 8px; font: inherit; font-size: 16px; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s; }
input:focus { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(42, 120, 214, 0.15); }
button { width: 100%; margin-top: 6px; padding: 11px 14px; color: #fff; background: var(--ink); border: 0;
  border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; }
button:hover { background: #33332f; }
.error { margin: -2px 0 14px; color: #b3261e; font-size: 13px; }