:root {
    --primary: #004a99;
    --bg: #f8f9fa;
    --text: #333;
    --focus: #ff8c00;
}

body { font-family: sans-serif; background: var(--bg); color: var(--text); padding: 20px; line-height: 1.5; }

header { text-align: center; margin-bottom: 30px; border-bottom: 3px solid var(--primary); padding-bottom: 10px; }

fieldset { border: 2px solid #ddd; border-radius: 8px; padding: 20px; background: white; display: grid; gap: 15px; }

/* Grid de 2 colunas para telas maiores */
@media (min-width: 768px) {
    fieldset { grid-template-columns: 1fr 1fr; }
}

.question { display: flex; flex-direction: column; }

label { font-weight: bold; margin-bottom: 5px; font-size: 0.9rem; }

select, button { padding: 12px; border: 2px solid var(--primary); border-radius: 4px; font-size: 1rem; }

select:focus, button:focus { outline: 4px solid var(--focus); outline-offset: 2px; }

button { background: var(--primary); color: white; cursor: pointer; margin-top: 20px; grid-column: span 1; transition: 0.3s; }

button:hover { background: #003366; }

.result-section { margin-top: 30px; padding: 20px; border-radius: 8px; background: white; border: 1px solid #ddd; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

footer { text-align: center; margin-top: 40px; }