:root {
    --nta-dark-blue: #337ab7; --nta-light-gray: #f5f5f5;
    --nta-border-gray: #ddd; --answered-green: #29b329;
    --not-answered-red: #e64444; --marked-purple: #8e44ad;
    --not-visited-gray: #d9d9d9;
}
.mock-test-pro-container {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #f0f2f5; margin: 0; padding: 1rem;
}
.test-header { background-color: var(--nta-dark-blue); color: white; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; }
.test-header h2 { font-size: 1.2em; margin: 0; }
.timer { font-size: 1.1em; font-weight: bold; }
.quiz-container { display: flex; flex-direction: column; height: calc(100vh - 45px); }
.test-body { display: flex; flex-grow: 1; overflow: hidden; }
.question-panel { flex: 3; padding: 15px; background: #fff; display: flex; flex-direction: column; overflow-y: auto; }
.sidebar-panel { flex: 1; padding: 15px; background: var(--nta-light-gray); border-left: 1px solid var(--nta-border-gray); overflow-y: auto; }
.section-tabs { display: flex; flex-wrap: wrap; gap: 5px; border-bottom: 1px solid var(--nta-border-gray); padding-bottom: 10px; margin-bottom: 15px; }
.section-tab { padding: 8px 12px; border: 1px solid var(--nta-border-gray); border-radius: 4px; cursor: pointer; background: #fff; font-size: 14px; }
.section-tab.active { background: var(--nta-dark-blue); color: white; border-color: var(--nta-dark-blue); }
.question-header { font-weight: bold; margin-bottom: 15px; }
.question-content p { font-size: 1.1em; line-height: 1.6; }
.options .option { display: flex; align-items: center; margin-bottom: 12px; padding: 12px; border-radius: 4px; border: 1px solid #eee; cursor: pointer; }
.options .option.selected { background-color: #e7f3fe; border-color: #b3d7ff; }
.options .option input { margin-right: 12px; }
.action-buttons { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--nta-border-gray); display: flex; flex-wrap: wrap; gap: 10px; }
.action-buttons button { padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; font-size: 14px; }
.action-buttons .save-next { background: #5cb85c; color: white; border-color: #4cae4c; }
.action-buttons .mark-review { background: #f0ad4e; color: white; border-color: #eea236; }
.palette-legend { font-size: 14px; }
.palette-legend .legend-item { display: flex; align-items: center; margin-bottom: 8px; }
.legend-box { width: 20px; height: 20px; margin-right: 10px; border-radius: 4px; display: inline-block; position: relative; }
.legend-box.answered { background: var(--answered-green); }
.legend-box.not-answered { background: var(--not-answered-red); }
.legend-box.not-visited { background: var(--not-visited-gray); }
.legend-box.marked { background: var(--marked-purple); }
.legend-box.answered-marked::after { content: '✔'; color: white; font-size: 12px; position: absolute; bottom: -2px; right: 2px; }
.palette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 8px; margin: 15px 0; }
.palette-btn { width: 100%; height: 32px; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; font-size: 13px; position: relative; line-height: 32px; text-align: center; padding: 0; }
.palette-btn.not-visited { background: var(--not-visited-gray); }
.palette-btn.not-answered { background: var(--not-answered-red); color: white; }
.palette-btn.answered { background: var(--answered-green); color: white; }
.palette-btn.marked { background: var(--marked-purple); color: white; }
.palette-btn.answered-marked { background: var(--marked-purple); color: white; }
.palette-btn.answered-marked::after { content: '✔'; color: white; font-size: 12px; position: absolute; bottom: 2px; right: 4px; }
.palette-btn.current { border: 2.5px solid #333; }
.sidebar-panel .submit-btn { width: 100%; padding: 12px; font-size: 16px; background: var(--nta-dark-blue); color: white; border: none; border-radius: 4px; cursor: pointer; margin-top: 20px; }
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; justify-content: center; align-items: center; z-index: 1000; }
.modal-content { background: white; padding: 30px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); text-align: center; max-width: 400px; }
.modal-content p { margin: 0 0 20px; }
.modal-buttons button { padding: 10px 20px; border-radius: 5px; border: none; cursor: pointer; margin: 0 10px; }
#modal-confirm-btn { background-color: #5cb85c; color: white; }
#modal-cancel-btn { background-color: #d9534f; color: white; }
#modal-ok-btn { background-color: var(--nta-dark-blue); color: white; }
@media (max-width: 768px) { .test-body { flex-direction: column; } .sidebar-panel { border-left: none; border-top: 1px solid var(--nta-border-gray); } .quiz-container { height: auto; } }