:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:#172033; background:#e8f1f5; }
* { box-sizing: border-box; }
body { min-height:100vh; margin:0; background:linear-gradient(150deg,#eaf7f8,#dce9f4); }
.app-shell { min-height:100vh; display:grid; place-items:center; padding:max(20px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom)); }
.card { width:min(100%, 620px); min-height:520px; padding:28px; background:#fff; border-radius:24px; box-shadow:0 20px 60px #16415d24; display:flex; flex-direction:column; }
.brand { color:#0c4a6e; font-size:.9rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; margin:0 0 22px; }
.progress-wrap { margin-bottom:30px; } .progress-meta { display:flex; justify-content:space-between; color:#587080; font-size:.82rem; margin-bottom:8px; } .progress { height:7px; border-radius:10px; background:#e3edf2; overflow:hidden; } .progress > div { height:100%; background:#119d9a; transition:width .25s ease; }
.section { color:#087f7c; font-size:.86rem; font-weight:750; margin:0 0 12px; } h1 { font-size:clamp(1.42rem,6vw,2rem); letter-spacing:-.025em; line-height:1.2; margin:0 0 12px; } .help { color:#597080; line-height:1.5; margin:0 0 22px; } .form { display:grid; gap:12px; }
.option { display:flex; align-items:center; gap:13px; min-height:58px; border:1.5px solid #cbd9e0; border-radius:14px; padding:12px 15px; cursor:pointer; font-weight:600; transition:.15s; } .option:has(input:checked) { background:#edfafa; border-color:#0b938f; box-shadow:0 0 0 3px #0b938f1c; } .option input { accent-color:#087f7c; width:20px; height:20px; flex:none; }
input[type=number], input[type=text], textarea { width:100%; border:1.5px solid #b9cad4; border-radius:14px; padding:16px; color:inherit; font:inherit; font-size:1.12rem; outline:none; } textarea { min-height:145px; resize:vertical; } input:focus, textarea:focus { border-color:#087f7c; box-shadow:0 0 0 3px #0b938f25; } .suffix { color:#587080; margin-top:-3px; }
.error { color:#a72929; font-weight:650; margin:2px 0 0; } .actions { display:flex; gap:12px; justify-content:space-between; margin-top:28px; } button { border:0; border-radius:13px; min-height:52px; padding:0 20px; font:inherit; font-weight:750; cursor:pointer; } .back { background:#eef3f6; color:#365060; } .next { background:#087f7c; color:white; margin-left:auto; } .next:disabled { opacity:.55; cursor:wait; } .end { text-align:center; margin:auto 0; } .end h1 { margin-bottom:16px; } .loading { margin:auto; color:#587080; text-align:center; } @media (max-width:480px) { .app-shell { padding:0; } .card { min-height:100vh; border-radius:0; padding:24px 20px; } }