/* The sign-in page: one card on the field, the colours of app.css. */
:root { --bg: #ece8e0; --surface: #fff; --ink: #1a1611; --ink-2: #5a5247; --cobalt: #1f4fa3; --coral: #bf3a31;
        --coral-soft: #fbe4e1; --line: #e6e0d6; color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #0c1117; --surface: #18202b; --ink: #e6ebf2; --ink-2: #a9b4c3; --cobalt: #86aaf2; --coral: #f08a80;
          --coral-soft: #3a1c1a; --line: #283342; }
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--bg); color: var(--ink);
       font: 15px/1.5 "Avenir Next", Avenir, "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif; padding: 20px; }
.gate { width: min(400px, 100%); background: var(--surface); border-radius: 10px; padding: 28px 24px;
        box-shadow: 0 1px 2px rgba(26, 22, 17, 0.07), 0 4px 12px -5px rgba(26, 22, 17, 0.16); }
h1 { font-size: 27px; letter-spacing: -0.02em; margin: 0 0 6px; }
p { color: var(--ink-2); margin: 0 0 18px; }
.err { background: var(--coral-soft); color: var(--coral); padding: 10px 12px; border-radius: 8px; }
a.google, a.dev { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 8px;
                  font-weight: 600; text-decoration: none; transition: filter 0.15s, transform 0.15s; }
a.google { background: var(--cobalt); color: #fff; }
a.google:hover { filter: brightness(1.08); }
a.google:active, a.dev:active { transform: scale(0.98); }
a.google:focus-visible, a.dev:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
a.dev { margin-top: 10px; border: 1px solid var(--line); color: var(--ink-2); }
@media (prefers-color-scheme: dark) { a.google { color: #0e1a33; } }