:root {
  --ink: #14181a;
  --muted: #5e6366;
  --line: #c4c9cc;
  --surface: #ffffff;
  --canvas: #ffffff;
  --brand: #15a130;
  --brand-text: #108329;
  --brand-light: #e6f5e9;
  --brand-heading: #075410;
  --error: #b42318;
  color: var(--ink);
  background: var(--canvas);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: 0;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--canvas); }
.auth-shell { width: min(390px, calc(100% - 32px)); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 36px; box-shadow: 0 16px 40px rgb(20 24 26 / 8%); }
.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; font-weight: 700; color: var(--brand-heading); }
.brand-mark { width: 30px; height: 30px; display: block; flex: none; }
h1 { margin: 0 0 8px; font-size: 28px; }
.intro { margin: 0 0 24px; color: var(--muted); }
.google-login { min-height: 46px; border: 1px solid var(--line); border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--ink); background: var(--surface); font-weight: 600; text-decoration: none; }
.google-login:hover { background: #f6f8fa; border-color: #9aa0a6; }
.google-login svg { width: 20px; height: 20px; flex: none; }
a:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 3px; }
.error { margin: 0 0 16px; color: var(--error); font-size: 14px; }
.legal { line-height: 1.6; }
.legal h1 { margin-bottom: 20px; }
.legal p { color: var(--muted); }
.legal a { color: var(--brand-text); font-weight: 600; }
@media (max-width: 480px) { .auth-shell { padding: 24px 20px; } }