:root { --teal: #00beab; --teal-dark: #009788; --ink: #1a2423; --muted: #5b6765; --bg: #f6f8f8; --card: #ffffff; --line: #e3e8e7; --danger-bg: #fdecec; --danger: #a32121; color-scheme: light; }
@media (prefers-color-scheme: dark) { :root { --ink: #e8efee; --muted: #9aa8a6; --bg: #0f1514; --card: #172120; --line: #263331; --danger-bg: #3a1717; --danger: #ffb4b4; color-scheme: dark; } .wordmark { filter: invert(1); } }
* { 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 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; padding: 24px 16px 72px; }
.card { width: 100%; max-width: 420px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 32px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); text-align: center; }
.mark { width: 48px; height: 48px; border-radius: 12px; margin: 0 auto 12px; background: linear-gradient(135deg, var(--teal), var(--teal-dark)); }
h1 { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: -0.01em; }
.sub { margin: 6px 0 24px; color: var(--muted); }
.error { margin: 0 0 16px; padding: 10px 12px; border-radius: 10px; background: var(--danger-bg); color: var(--danger); font-size: 14px; text-align: left; }
.google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px 16px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 550; background: var(--card); }
.google:hover { border-color: var(--teal); }
.google:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.note { margin: 16px 0 0; color: var(--muted); font-size: 13px; }
footer { position: fixed; bottom: 20px; left: 0; right: 0; display: flex; justify-content: center; }
.wordmark { height: 14px; opacity: 0.7; }