:root { --text: #202223; --muted: #6d7175; --border: #c9cccf; --brand: #1a1a1a; --ok-bg: #e3f1df; --ok: #0c5132; --err-bg: #fbeae5; --err: #8e1f0b; }
* { box-sizing: border-box; }
body { margin: 0; background: #f6f6f7; color: var(--text); font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
main { max-width: 560px; margin: 0 auto; padding: 24px 16px 48px; }
header { background: #fff; border: 1px solid #e1e3e5; border-radius: 12px; padding: 14px 20px; margin: 0 0 16px; }
header img { display: block; height: 40px; width: auto; }
h2 { font-size: 16px; margin: 28px 0 4px; }
h3 { font-size: 14px; margin: 22px 0 2px; padding-top: 14px; border-top: 1px solid #e1e3e5; }
section { background: #fff; border: 1px solid #e1e3e5; border-radius: 12px; padding: 20px; }
p { margin: 8px 0; }
.muted { color: var(--muted); }
label { display: block; font-weight: 600; margin: 16px 0 4px; }
input, select { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; background: #fff; }
input:disabled { background: #f1f2f3; color: var(--muted); }
button { margin: 20px 8px 0 0; padding: 8px 16px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font: inherit; cursor: pointer; }
button.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
button:disabled { opacity: .6; cursor: default; }
.banner { padding: 10px 12px; border-radius: 8px; }
.banner.ok { background: var(--ok-bg); color: var(--ok); }
.banner.error { background: var(--err-bg); color: var(--err); }
#main section { margin-top: 16px; }
.step-head { display: flex; align-items: center; gap: 10px; }
.step-head h2 { margin: 0; }
.badge { background: var(--brand); color: #fff; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; }
.state { margin: 6px 0 0; font-weight: 600; color: var(--muted); }
.state.ok { color: var(--ok); }
label.check { display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 12px 0 0; }
label.check input { width: auto; }
table { width: 100%; border-collapse: collapse; margin: 8px 0; }
th, td { padding: 8px 0; border-bottom: 1px solid #e1e3e5; text-align: left; font-weight: 400; }
td { text-align: right; font-weight: 600; }
td.warn { color: var(--err); }
progress { width: 100%; height: 10px; margin: 12px 0 0; }
ul { margin: 6px 0 0; padding-left: 18px; }
[hidden] { display: none !important; }