/* Adicione ao FINAL do seu css/styles.css principal */

.bg-primary { background: var(--color-primary); }

.btn-quiz-option {
    background: white;
    color: var(--text-main);
    border: 3px solid #d8e2ed;
    box-shadow: 0 4px 0 #d8e2ed;
    text-align: left;
    padding: 18px 20px;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.disabled-btn {
    pointer-events: none;
    opacity: 0.85;
}

@keyframes shakeWrong {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-8px) rotate(-1deg); }
    50% { transform: translateX(8px) rotate(1deg); }
    75% { transform: translateX(-8px) rotate(-1deg); }
}

.correct-answer {
    background: var(--color-green) !important;
    color: white !important;
    border-color: #049e75 !important;
    box-shadow: 0 4px 0 #049e75 !important;
    transform: scale(1.02);
}

.wrong-answer {
    background: var(--color-primary) !important;
    color: white !important;
    border-color: var(--color-primary-dark) !important;
    box-shadow: 0 4px 0 var(--color-primary-dark) !important;
    animation: shakeWrong 0.4s ease-in-out;
}