:root { color-scheme: light; font: 16px/1.5 system-ui, sans-serif; color: #183049; background: #eef3f7; }
body { min-height: 100dvh; display: grid; place-items: center; padding: 24px; margin: 0; box-sizing: border-box; }
main { box-sizing: border-box; width: min(100%, 480px); padding: clamp(24px, 7vw, 44px); background: #fff; border: 1px solid #d4dfe8; border-radius: 16px; box-shadow: 0 20px 55px #18304915; }
.brand { display: flex; align-items: center; gap: 10px; font-size: .75rem; font-weight: 750; letter-spacing: .11em; }
.mark { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 8px; background: #173450; color: white; letter-spacing: 0; }
h1 { margin: 24px 0 8px; font-size: 1.85rem; line-height: 1.15; }
p { margin: 0 0 20px; color: #496079; }
label { display: grid; gap: 5px; font-weight: 650; margin: 13px 0; }
label span { color: #496079; font-weight: 400; font-size: .8rem; }
input, button { box-sizing: border-box; width: 100%; border-radius: 7px; padding: 10px 12px; font: inherit; }
input { border: 1px solid #99aec0; color: #183049; background: #fff; }
button { margin-top: 7px; border: 1px solid #143f61; background: #143f61; color: white; font-weight: 650; cursor: pointer; }
input:focus-visible, button:focus-visible { outline: 3px solid #4c9cdb; outline-offset: 2px; }
.alert { background: #fff1ed; border: 1px solid #f1c6bc; padding: 9px 11px; border-radius: 6px; color: #902d1e; }