:root { font-family: 'Funnel Display', system-ui, sans-serif; color: #212925; background: #f8faf9; font-synthesis: none; }
* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; }
[hidden] { display: none !important; }
header { display: flex; justify-content: space-between; align-items: center; padding: 20px 28px; border-bottom: 1px solid #dfe6e2; background: #fff; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 21px; font-weight: 600; color: inherit; }
header > span { color: #67736b; font-size: 14px; }
main { width: min(100% - 40px, 360px); margin: 72px auto 40px; }
.brand-icon { border-radius: 8px; }
h1 { font-size: 28px; font-weight: 600; margin: 24px 0 28px; }
form, label { display: grid; gap: 9px; }
form { gap: 20px; }
label { font-size: 14px; font-weight: 500; }
input, button { font: inherit; border-radius: 6px; }
input { width: 100%; height: 44px; padding: 10px 12px; background: #fff; border: 1px solid #bac7be; font-weight: 400; }
button { cursor: pointer; }
form > button, #local { width: 100%; min-height: 44px; border: 0; background: #11775b; color: white; font-weight: 500; padding: 10px 14px; }
button:disabled { opacity: .6; cursor: wait; }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid #3274bf; outline-offset: 3px; }
nav { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
nav button { padding: 4px 0; background: none; border: 0; color: #176d57; font-size: 14px; }
#status { color: #52655a; line-height: 1.5; font-size: 14px; overflow-wrap: anywhere; min-height: 21px; }
#status.error { color: #a23624; }
#captcha { min-height: 0; max-width: 100%; }
@media(max-width: 400px) { header { padding: 16px 20px; } main { margin-top: 40px; } }