* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: #f5f7f9; color: #17202a; }
.page { max-width: 520px; margin: 0 auto; min-height: 100vh; padding: 24px 16px; background: #fff; }
.meter, .result { border: 1px solid #d7dee7; border-radius: 8px; padding: 18px; margin-bottom: 18px; }
.muted { color: #637083; font-size: 14px; }
h1 { font-size: 26px; line-height: 1.15; margin: 6px 0 16px; }
dl { display: grid; grid-template-columns: 1fr 1.2fr; gap: 8px 12px; margin: 0; }
dt { color: #637083; }
dd { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.form { display: grid; gap: 12px; }
label { font-weight: 700; }
input { width: 100%; min-height: 52px; font-size: 28px; padding: 8px 12px; border: 1px solid #b8c2cf; border-radius: 8px; }
input:focus { outline: 3px solid #9fc7f2; outline-offset: 2px; }
.input-error { border-color: #b42318; background: #fff8f7; }
.field-error { margin: 0; color: #8a1f15; font-weight: 700; }
.error-code { margin: -6px 0 0; color: #637083; font-size: 13px; }
button { min-height: 52px; border: 0; border-radius: 8px; background: #1769aa; color: #fff; font-size: 18px; font-weight: 700; }
button:disabled { background: #7d8b99; }
.ok { border-color: #1f8f4d; background: #f0fbf4; }
.err { border-color: #b42318; background: #fff4f2; }