/* login.css — extracted verbatim from loginPage() */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --ink: #0f0e0d; --paper: #f5f0e8; --cream: #ede8de; --rule: #d4cec2; --mid: #8a8278; --ok: #1a7a4a; --err: #c0392b; --serif: 'Instrument Serif', serif; --sans: 'Syne', sans-serif; --mono: 'Azeret Mono', monospace; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; }
.card { background: white; border: 1px solid var(--rule); border-top: 3px solid var(--ink); padding: 2.5rem; max-width: 400px; width: 100%; }
.logo { font-family: var(--serif); font-size: 1.5rem; margin-bottom: 0.25rem; }
.logo em { font-style: italic; color: var(--mid); }
.sub { font-family: var(--mono); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mid); margin-bottom: 2rem; }
.btn-google { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 1px solid var(--rule); border-top: 2px solid var(--ink); background: white; color: var(--ink); font-family: var(--sans); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background 0.15s; }
.btn-google:hover { background: var(--cream); }
.btn-google svg { flex-shrink: 0; }
.error { margin-top: 1rem; font-family: var(--mono); font-size: 14px; color: var(--err); padding: 8px 12px; border: 1px solid var(--err); background: #fff5f5; }
.footer { margin-top: 3rem; font-family: var(--mono); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mid); }