/* BACKGROUND */

.quiz-bg {
background: linear-gradient(180deg,#eef2ff,#ffffff);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: system-ui;
}

/* CONTAINER */

.quiz-container {
width: 100%;
max-width: 420px;
padding: 20px;
}

/* CARD */

.quiz-card {
background: #fff;
padding: 25px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
animation: fadeIn 0.4s ease;
}

/* QUESTION */

.question-text {
font-size: 1.5rem;
font-weight: 600;
line-height: 1.4;
margin-top: 15px;
}

/* OPTIONS */

.options-wrapper {
margin-top: 25px;
}

.answer-card {
display: block;
width: 100%;
background: #f8f9fa;
border-radius: 16px;
padding: 16px;
margin-bottom: 14px;
cursor: pointer;
border: 2px solid transparent;
transition: 0.2s;
}

.answer-card input {
display: none;
}

.answer-content {
display: flex;
align-items: center;
gap: 15px;
}

.option-letter {
background: #e9ecef;
width: 38px;
height: 38px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
}

.option-text {
font-size: 1.1rem;
font-weight: 500;
}

/* HOVER */

.answer-card:hover {
transform: scale(1.02);
background: #eef4ff;
}

/* SELECTED */

.answer-card:has(input:checked) {
border: 2px solid #0d6efd;
background: #eef4ff;
}

.answer-card input:checked + .answer-content .option-letter {
background: #0d6efd;
color: white;
}

.answer-card input:checked + .answer-content .option-text {
font-weight: 600;
color: #0d6efd;
}

/* PROGRESS BAR */

.progress {
height: 10px;
border-radius: 10px;
overflow: hidden;
}

.progress-bar {
background: #0d6efd;
}

/* ANIMATION */

@keyframes fadeIn {
from {opacity:0; transform: translateY(10px);}
to {opacity:1;}
}
/* RESULT PAGE */

.result-bg {
background: linear-gradient(180deg,#eef2ff,#ffffff);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: system-ui;
}

.result-card {
background: white;
padding: 30px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
width: 90%;
max-width: 420px;
}

.score-circle {
width: 140px;
height: 140px;
border-radius: 50%;
background: #0d6efd;
color: white;
font-size: 2rem;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
margin: 20px auto;
}

.result-message {
font-size: 1.1rem;
font-weight: 500;
margin-top: 10px;
}