:root{--bg:#f6f7fb;--card:#fff;--accent:#1e88e5;--muted:#666}
*{box-sizing:border-box}
body{font-family:Arial,Helvetica,sans-serif;margin:0;background:var(--bg);color:#111}
.quiz-wrap{max-width:820px;margin:28px auto;padding:16px}
.card{background:var(--card);padding:14px;border-radius:8px;box-shadow:0 6px 18px rgba(16,24,40,.06)}
.progress{color:var(--muted);margin-bottom:10px}
.question{font-weight:700;font-size:1.05rem;margin:10px 0}
.question-image{max-width:100%;height:auto;border-radius:6px;margin-bottom:12px}
.options{display:flex;flex-direction:column;gap:10px}
.options label{display:flex;align-items:center;gap:10px;padding:10px;border-radius:6px;border:1px solid transparent;cursor:pointer}
.options input[type=radio]{transform:scale(1.05)}
.options label:hover{background:#f3f6fb}
.controls{display:flex;gap:8px;margin-top:12px}
.btn{background:var(--accent);color:#fff;border:none;padding:8px 12px;border-radius:6px;cursor:pointer}
.btn.secondary{background:#e6eefc;color:var(--accent)}
.score{font-size:1.2rem;font-weight:700;margin-bottom:8px;padding:12px}
.explanations .card{margin-top:10px}
.explanations .wrong{border:1px solid #ffdede;background:#fff6f6}
.explanations .correct{border:1px solid #ddffea;background:#f6fffb}
@media (max-width:520px){.quiz-wrap{padding:12px;margin:12px}}

/* Answer highlighting for results */
.user-correct{color:#2e7d32;font-weight:700}
.user-wrong{color:#b00020;font-weight:700}


#quiz-container, #results-container {
    font-weight: 700;
    background: white;
    padding: 20px;
    max-width: 700px;
    margin: auto;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

#options label {
    display: block;
    background: #e9e9e9;
    padding: 10px;
    margin: 8px 0;
    border-radius: 6px;
    cursor: pointer;
}

#options input {
    margin-right: 10px;
}

.nav-buttons {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

button {
    padding: 10px 18px;
    border: none;
    background: #0078ff;
    color: white;
    border-radius: 6px;
    cursor: pointer;
}

button:hover {
    background: #005fcc;
}

/* Position Next Quiz button in results bottom-right */
#results-container {
    position: relative;
    padding-bottom: 70px; /* space for the absolute-positioned button */
}

#results-container #nextQuizBtn {
    position: absolute;
    right: 20px;
    bottom: 20px;
}

/* Position Restart Quiz button in results bottom-left */
#results-container #restartBtn {
    position: absolute;
    left: 20px;
    bottom: 20px;
}