:root { --bg:#f6f8fa; --surface:#fff; --text:#1c2430; --muted:#5f6f7d; --line:#dfe5eb; --accent:#1f6feb; color-scheme: light dark; }
@media (prefers-color-scheme: dark) { :root { --bg:#0f1419; --surface:#171d24; --text:#e6edf3; --muted:#9aa7b3; --line:#2a333d; --accent:#4c8dff; } }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
.gate { min-height: 100vh; display: grid; place-items: center; }
.gate-card { width: min(400px, calc(100% - 32px)); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px; box-shadow: 0 10px 30px rgba(28,36,48,.06); display: grid; gap: 12px; }
.mark { font-weight: 800; letter-spacing: .02em; color: var(--accent); }
h1 { font-size: 22px; font-weight: 650; margin: 0; }
.muted { color: var(--muted); margin: 0; min-height: 1em; }
.or { color: var(--muted); font-size: 13px; margin: 8px 0 4px; }
#google-btn { min-height: 44px; }
.google-btn, .btn { min-height: 44px; width: 100%; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; display: inline-flex; gap: 10px; align-items: center; justify-content: center; cursor: pointer; }
.btn { background: var(--accent); color: #fff; border-color: var(--accent); margin-top: 8px; }
input { width: 100%; min-height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); padding: 0 12px; font: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }