* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif; background: #f6f7f9; color: #222; }
.container { max-width: 720px; margin: 40px auto; padding: 0 16px; }
h1 { margin: 0 0 8px; font-size: 28px; }
.sub { margin: 0 0 16px; color: #555; }
.card { background: #fff; border: 1px solid #e3e6eb; border-radius: 8px; padding: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
label { font-weight: 600; }
select { padding: 10px; border-radius: 6px; border: 1px solid #cfd6e0; background: #fff; }
.btn { appearance: none; border: none; background: #1f6feb; color: #fff; padding: 10px 16px; border-radius: 6px; font-weight: 600; cursor: pointer; }
.btn:hover { background: #165fca; }
.result { margin-top: 16px; }
.alert { padding: 12px; border-radius: 6px; }
.alert-ok { background: #e9f6ec; border: 1px solid #b9e3c4; color: #1b5e20; }
.alert-warn { background: #fff4e5; border: 1px solid #ffe1b3; color: #7a4b00; }
.alert-bad { background: #fdecea; border: 1px solid #f5c6c4; color: #611a15; }
.small { font-size: 13px; color: #666; }