body {
background:#1b1b1b;
color:#f5f5f5;
font-family:Arial,sans-serif;
max-width:1180px;
margin:auto;
padding:20px;
overflow-x:auto;
}
.card { background:#2f2f2f; padding:20px; border-radius:16px; margin-bottom:20px; border:1px solid #555; }
button { width:100%; padding:12px; margin-top:10px; border:none; border-radius:10px; background:#555; color:#fff; cursor:pointer; }
button:hover:not(:disabled) { background:#666; }
button:disabled { opacity:0.55; cursor:not-allowed; }
select,input { width:100%; padding:10px; box-sizing:border-box; margin-top:6px; margin-bottom:12px; background:#444; color:#fff; border:1px solid #777; }
.option { background:#444; }
.correct { background:#15803d !important; }
.wrong { background:#b91c1c !important; }
.selected-answer { outline:2px solid #3b82f6; outline-offset:-2px; }
.setup-card { max-width:720px; margin-left:auto; margin-right:auto; }
.quiz-shell { display:grid; grid-template-columns:180px 820px; gap:14px; justify-content:center; align-items:start; width:1014px; max-width:1014px; margin:0 auto 20px auto; }
.question-sidebar { background:#242424; border:1px solid #666; border-radius:14px; padding:12px; height:590px; max-height:590px; overflow:hidden; display:flex; flex-direction:column; }
.sidebar-title { font-weight:bold; margin-bottom:8px; text-align:center; color:#fff; }
.sidebar-meta { font-size:13px; color:#e5e7eb; margin-bottom:10px; line-height:1.4; border-top:1px solid #666; border-bottom:1px solid #666; padding:10px 0; }
.sidebar-meta div { display:flex; justify-content:space-between; gap:8px; }
.question-list { display:flex; flex-direction:column; gap:4px; overflow-y:auto; min-height:0; flex:1; padding-right:4px; }
.nav-question { width:100%; text-align:left; margin:0; padding:6px 8px; background:#3f3f3f; color:#f5f5f5; border-radius:4px; font-size:13px; line-height:1.2; transition:background .12s ease, transform .12s ease; }
.nav-question:hover { background:#565656; transform:translateX(2px); }
.nav-question.current { background:#3b82f6; font-weight:bold; color:#fff; }
.nav-question.marked { box-shadow:inset 6px 0 0 #facc15; }
.nav-question.answered { box-shadow:inset 6px 0 0 #3b82f6; }
.nav-question.answered-correct { box-shadow:inset 6px 0 0 #22c55e; }
.nav-question.answered-incorrect { box-shadow:inset 6px 0 0 #ef4444; }
.nav-question.current.marked { box-shadow:inset 6px 0 0 #facc15; }
.legend { border-top:1px solid #666; margin-top:10px; padding-top:10px; font-size:12px; color:#e5e7eb; line-height:1.7; }
.dot { display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:7px; vertical-align:-1px; background:#a3a3a3; }
.correct-dot{background:#22c55e}.incorrect-dot{background:#ef4444}.marked-dot{background:#facc15}.answered-dot{background:#3b82f6}
.quiz-main { min-width:0; height:590px; max-height:590px; margin:0; display:flex; flex-direction:column; overflow:hidden; }
.progress-line{font-weight:bold;margin-bottom:8px;color:#fff}.live-score{color:#e5e7eb;font-size:14px;min-height:20px;margin-bottom:8px}
.question-box { background:#3d3d3d; border:1px solid #666; border-radius:10px; padding:16px; min-height:110px; max-height:150px; overflow-y:auto; margin-bottom:14px; }
.question-box h2 { color:#fff; }
#question{font-size:18px;line-height:1.35;color:#fff;font-weight:500}.answers{flex:1;overflow-y:auto;padding-right:4px}
.answer-row { display:grid; grid-template-columns:42px 1fr; gap:12px; align-items:center; text-align:left; margin:0 0 10px 0; background:#4a4a4a; border:1px solid #666; font-size:16px; line-height:1.35; }
.answer-row:hover:not(:disabled) { background:#5a5a5a; }
.answer-letter { width:32px; height:32px; border-radius:50%; background:#666; display:inline-flex; align-items:center; justify-content:center; font-weight:bold; }
.bottom-toolbar{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:10px}.bottom-toolbar button{margin-top:0;padding:9px 8px}
#nextBtn { background:#2563eb; }
#nextBtn:hover:not(:disabled) { background:#3b82f6; }
.bottom-toolbar button:last-child { background:#7f1d1d; }
.bottom-toolbar button:last-child:hover:not(:disabled) { background:#991b1b; }
@media (max-width:760px){body{padding:10px}.quiz-shell{grid-template-columns:160px 660px;width:834px;max-width:834px;justify-content:start;margin-left:0;margin-right:0}.question-sidebar{height:560px;max-height:560px}.quiz-main{height:560px;max-height:560px}.nav-question{font-size:13px;padding:6px}.answer-row{font-size:15px}}