:root {
    color-scheme: light;
    font-family: "Google Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: linear-gradient(145deg, #edf4ff, #f6f1ff);
    color: #202936;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px; }
main { width: min(520px, 100%); padding: clamp(24px, 6vw, 42px); border: 1px solid #dce4f0; border-radius: 28px; background: rgb(255 255 255 / 94%); box-shadow: 0 24px 70px rgb(40 55 85 / 14%); }
.brand { margin: 0; color: #3579f6; font-size: .86rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 8px 0 12px; font-size: clamp(2rem, 8vw, 3rem); line-height: 1.05; }
h2 { margin: 22px 0 12px; font-size: 1.3rem; }
p { color: #5f6d80; line-height: 1.55; }
section, form { display: grid; gap: 12px; }
label { font-weight: 800; }
input { width: 100%; min-height: 48px; border: 1px solid #c9d3e2; border-radius: 14px; padding: 11px 14px; color: #202936; font: inherit; }
button { min-height: 46px; border: 0; border-radius: 999px; padding: 11px 19px; background: #3579f6; color: #fff; font: inherit; font-weight: 850; cursor: pointer; }
button:disabled { opacity: .58; cursor: wait; }
.button-row { display: flex; gap: 10px; flex-wrap: wrap; }
.button-row button { flex: 1; min-width: 145px; }
#google-button { min-height: 8px; display: flex; justify-content: center; margin-top: 8px; }
.secondary-link { display: inline-block; margin-top: 24px; color: #49576c; font-weight: 750; }
.feedback, .notice { padding: 12px 14px; border-radius: 14px; background: rgb(255 85 94 / 12%); color: #ad2530; font-weight: 750; }
.separator { display: flex; align-items: center; gap: 12px; margin: 14px 0; font-size: .88rem; font-weight: 750; }
.separator::before, .separator::after { content: ""; height: 1px; flex: 1; background: #dce4f0; }
[hidden] { display: none !important; }