:root { color-scheme: light; font-family: system-ui, -apple-system, sans-serif; color: #192531; background: #f4f7fa; }
* { box-sizing: border-box; }
body { margin: 0; padding: 40px 16px; }
main { max-width: 490px; margin: auto; padding: 32px; background: white; border: 1px solid #e1e6ec; border-radius: 24px; box-shadow: 0 12px 40px #19253108; }
.brand { font-weight: 750; color: #154063; }
.brand span { float: right; font-weight: 400; color: #657485; }
h1 { font-size: 28px; margin: 30px 0 12px; letter-spacing: -.6px; }
h2 { font-size: 16px; }
p { color: #536171; font-size: 14px; line-height: 1.6; }
label { display: block; font-size: 14px; margin: 20px 0 8px; }
input:not([type=checkbox]) { width: 100%; border: 1px solid #cdd6df; border-radius: 10px; padding: 12px; font: inherit; }
button { display: block; width: 100%; padding: 13px 18px; border: 0; border-radius: 10px; margin-top: 12px; background: #154063; color: white; font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, input:focus-visible { outline: 3px solid #3779b5; outline-offset: 3px; }
.secondary { background: #edf2f6; color: #154063; }
.apple { background: #151515; }
.danger { background: #b42318; }
.divider { text-align: center; color: #7c8794; font-size: 13px; margin: 22px 0; }
#google-button { display: flex; justify-content: center; min-height: 40px; }
/* GIS supports a 400px maximum and a 40px large rectangular button. Keep
   sign-in controls on that same responsive grid without styling its iframe. */
#signin { max-width: 400px; margin-inline: auto; }
#signin button { min-height: 40px; padding-block: 10px; line-height: 20px; border-radius: 4px; }
.check { display: flex; gap: 10px; line-height: 1.5; align-items: flex-start; }
.details { border-top: 1px solid #e1e6ec; margin-top: 28px; padding-top: 12px; }
.small { font-size: 12px; }
#status[data-error=true] { color: #b42318; }
[hidden] { display: none !important; }