:root { --bg:#0f172a; --card:#ffffff; --ink:#0f172a; --mut:#64748b; --pri:#16a34a; --pri-d:#15803d; --line:#e2e8f0; }
* { box-sizing:border-box; }
body { margin:0; font-family: Segoe UI, Arial, sans-serif; background:#f1f5f9; color:var(--ink); }
.topo { background:var(--bg); color:#fff; padding:18px 16px; text-align:center; }
.topo h1 { margin:0 0 4px; font-size:22px; }
.topo p { margin:0; opacity:.8; font-size:14px; }
.progresso { height:8px; background:#e2e8f0; }
.progresso > div { height:100%; width:0; background:var(--pri); transition:width .3s; }
#app { max-width:680px; margin:24px auto; padding:0 16px 60px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:22px; margin-bottom:16px; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.card h2 { margin:0 0 6px; font-size:19px; }
.sub { color:var(--mut); font-size:14px; margin:0 0 14px; }
label.campo { display:block; font-size:14px; margin:12px 0 4px; font-weight:600; }
input[type=text], input[type=email], input[type=tel] { width:100%; padding:11px; border:1px solid var(--line); border-radius:8px; font-size:15px; }
.opt { display:block; border:1px solid var(--line); border-radius:8px; padding:11px 12px; margin:8px 0; cursor:pointer; font-size:15px; }
.opt:hover { border-color:var(--pri); }
.opt input { margin-right:8px; }
.escala { display:flex; gap:8px; margin:8px 0; }
.escala label { flex:1; text-align:center; border:1px solid var(--line); border-radius:8px; padding:10px 4px; cursor:pointer; font-size:14px; }
.nav { display:flex; gap:10px; margin-top:16px; }
button { font-size:16px; border-radius:8px; padding:12px 18px; cursor:pointer; border:0; }
.btn-pri { background:var(--pri); color:#fff; flex:1; }
.btn-pri:hover { background:var(--pri-d); }
.btn-sec { background:#e2e8f0; color:var(--ink); }
.btn-cta { display:block; text-align:center; background:#22c55e; color:#fff; font-weight:700; text-decoration:none; padding:16px; border-radius:10px; margin-top:14px; font-size:17px; }
.match { display:inline-block; background:#dcfce7; color:#15803d; font-weight:700; border-radius:20px; padding:3px 12px; font-size:13px; margin-bottom:6px; }
.meta { color:var(--mut); font-size:13px; margin:6px 0; }
.porque { background:#f0fdf4; border-left:4px solid var(--pri); padding:10px 12px; font-size:14px; margin:10px 0; }
.atencao { background:#fffbeb; border-left:4px solid #f59e0b; padding:10px 12px; font-size:14px; margin:10px 0; }
.erro { color:#dc2626; font-size:14px; margin-top:8px; }
.lgpd { font-size:13px; color:var(--mut); margin-top:12px; }