:root {
    --brand-blue: #6366f1;
    --brand-purple: #a855f7;
    --brand-pink: #ec4899;
    --brand-orange: #f43f5e;
    --brand-gradient: linear-gradient(90deg, var(--brand-blue), var(--brand-purple), var(--brand-pink), var(--brand-orange));

    --white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    --green-50: #f0fdf4;
    --green-100: #d1fae5;
    --green-500: #22c55e;
    --green-600: #16a34a;
    --green-800: #166534;

    --blue-50: #eff6ff;
    --blue-200: #b3d4ff;
    --blue-500: #3b67f6;
    --blue-600: #253feb;
    --blue-900: #1e2d5f;

    --red-100: #fee2e2;
    --red-300: #fca5a5;
    --red-400: #f87171;
    --red-600: #dc2626;
    --red-900: #7f1d1d;

    --purple-50: #fffbeb;
    --purple-500: #a855f7;
    --purple-950: #3f215c;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', 'Segoe UI', Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: var(--gray-800);
    background-color: var(--gray-100);
    padding: 20px;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    background-color: var(--white);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
    background-image: var(--brand-gradient);
    background-size: 100% 10px, 100% 100%;
    background-repeat: no-repeat;
    background-position: top left, top left;
}

.instructions { color: var(--gray-500); font-size: 14px; margin-bottom: 20px; }
.instructions p { margin-bottom: 12px; }
.instructions p:last-child { margin-bottom: 0; }

.divider { border: none; border-top: 1px solid var(--gray-300); margin: 20px 0; }
.exam-title { color: var(--green-500); font-size: 32px; font-weight: 600; margin-bottom: 30px; }

.loading, .error { text-align: center; padding: 40px; color: var(--gray-500); }
.error { color: var(--red-600); background-color: var(--red-100); border-radius: 4px; }

.questions-container { margin-bottom: 30px; }
.question-block { margin-bottom: 40px; padding-bottom: 30px; border-bottom: 1px solid var(--gray-200); }
.question-block:last-child { border-bottom: none; }

.question-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; }
.question-number { font-weight: 600; color: var(--gray-800); min-width: 30px; }
.question-text { flex: 1; color: var(--gray-800); font-size: 16px; }
.multiple-badge { color: var(--gray-500); font-size: 14px; font-style: italic; }

.options-container { margin-left: 30px; margin-bottom: 15px; }
.option-label {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px; margin-bottom: 8px; cursor: pointer;
    border-radius: 4px; transition: background-color 0.2s;
}
.option-label:hover { background-color: var(--gray-50); }
.option-label input[type="checkbox"] { margin-top: 4px; cursor: pointer; width: 18px; height: 18px; }
.option-letter, .option-text { color: var(--gray-800); }
.option-letter { font-weight: 500; min-width: 20px; }
.option-text { flex: 1; }

.option-label.correct { background-color: var(--green-100); border-left: 3px solid var(--green-500); }
.option-label.incorrect { background-color: var(--red-100); border-left: 3px solid var(--red-600); }

.answer-button, .submit-button, .start-exam-button {
    background-color: var(--green-500); color: var(--white); border: none;
    border-radius: 6px; font-weight: 500; cursor: pointer; transition: background-color 0.2s;
}
.answer-button { padding: 10px 20px; font-size: 14px; margin-left: 30px; }
.submit-button { padding: 15px 40px; font-size: 16px; font-weight: 600; }
.start-exam-button { padding: 12px 30px; font-size: 16px; font-weight: 600; width: 100%; }

.answer-button:hover, .submit-button:hover, .start-exam-button:hover:not(:disabled) { background-color: var(--green-600); }
.answer-button:active, .submit-button:active, .start-exam-button:active:not(:disabled) { transform: translateY(1px); }
.start-exam-button:disabled { background-color: var(--gray-400); cursor: not-allowed; opacity: 0.6; }

.explanation {
    margin-left: 30px; margin-top: 15px; padding: 15px;
    background-color: var(--gray-50); border-left: 3px solid var(--green-500); border-radius: 4px;
}
.explanation strong { color: var(--gray-800); }
.explanation p { margin-top: 8px; color: var(--gray-500); line-height: 1.6; }
.explanation .study-references ul { list-style: none; padding-left: 0; margin: 8px 0 0 0; }

.submit-container { text-align: center; margin: 40px 0; }

.results { margin-top: 40px; padding: 30px; background-color: var(--gray-50); border-radius: 8px; text-align: center; }
.results-title { color: var(--gray-800); font-size: 24px; margin-bottom: 20px; }
.score-display { margin-top: 20px; }
.score-text, .percentage-text { font-size: 18px; color: var(--gray-800); margin-bottom: 10px; }
.score-text span, .percentage-text span { font-weight: 600; color: var(--green-500); font-size: 20px; }

.new-exam-button {
    background-color: var(--blue-500); color: var(--white); border: none;
    padding: 12px 30px; border-radius: 6px; font-size: 16px; font-weight: 600;
    cursor: pointer; transition: background-color 0.2s; margin-top: 20px;
}
.new-exam-button:hover { background-color: var(--blue-600); }
.new-exam-button:active { transform: translateY(1px); }

.mode-selection, .topic-study-section { margin-bottom: 30px; }
.topic-study-section {
    overflow-wrap: break-word;
    word-break: break-word;
}
.topic-study-section .sidebar-topic-title {
    min-width: 0;
}
.topic-study-section .study-content-body,
.topic-study-section .viewer-title,
.topic-study-section .mode-card p,
.topic-study-section .mode-card strong,
.topic-study-section .sidebar-sub-item {
    overflow-wrap: break-word;
    word-break: break-word;
}
.topic-study-section .study-content-body pre,
.topic-study-section .study-content-body code {
    overflow-wrap: break-word;
    word-break: break-all;
}
.section-title { color: var(--gray-800); font-size: 24px; font-weight: 600; margin-bottom: 20px; }
.subsection-title { color: var(--gray-800); font-size: 18px; font-weight: 600; margin: 20px 0 15px 0; }

.mode-options { display: flex; flex-direction: column; gap: 15px; margin-bottom: 30px; }
.mode-option { display: block; cursor: pointer; }
.mode-option input[type="radio"] { display: none; }

.mode-card {
    padding: 20px; border: 2px solid var(--gray-200); border-radius: 8px;
    background-color: var(--white); transition: all 0.2s;
}
.mode-card:hover { border-color: var(--green-500); background-color: var(--green-50); }
.mode-option input[type="radio"]:checked + .mode-card {
    border-color: var(--green-500); background-color: var(--green-50);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}
.mode-card strong { display: block; color: var(--gray-800); font-size: 18px; margin-bottom: 8px; }
.mode-card p { color: var(--gray-500); font-size: 14px; margin: 0; }

.mode-card-clickable { cursor: pointer; position: relative; padding-right: 40px; }
.mode-card-clickable .expand-indicator {
    position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
    font-size: 12px; color: var(--gray-500);
}
.mode-option.is-expanded .mode-card-clickable { border-color: var(--green-500); background-color: var(--green-50); }

.study-container {
    display: grid; grid-template-columns: 300px 1fr;
    background-color: var(--white); min-height: 600px;
}

.study-sidebar { background-color: var(--gray-50); overflow-y: auto; max-height: 800px; border-right: 1px solid var(--gray-200); }
.sidebar-topic-item { border-bottom: 1px solid var(--gray-200); }
.sidebar-topic-header {
    padding: 15px; cursor: pointer; font-weight: 600; color: var(--gray-800);
    display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
    background-color: var(--gray-100); transition: background-color 0.2s;
}
.sidebar-topic-title { flex: 1; line-height: 1.4; font-size: 15px; }
.sidebar-arrow { font-size: 12px; margin-top: 3px; flex-shrink: 0; color: var(--gray-500); }
.sidebar-topic-header:hover { background-color: var(--gray-200); }

.sidebar-subsections { background-color: var(--white); }
.sidebar-sub-item {
    padding: 12px 15px 12px 25px; cursor: pointer; font-size: 14px;
    color: var(--gray-500); border-left: 5px solid transparent; transition: all 0.2s;
}
.sidebar-sub-item:hover { background-color: var(--gray-50); color: var(--gray-800); }
.sidebar-sub-item.active {
    background-color: var(--green-50); color: var(--green-800);
    border-left-color: var(--brand-orange); font-weight: 500;
}

.study-content-viewer { padding: 30px; background-color: var(--white); overflow-y: auto; max-height: 800px; }
.viewer-header { margin-bottom: 25px; padding-bottom: 15px; border-bottom: 2px solid var(--gray-100); display: none; }
.viewer-topic-label { text-transform: uppercase; font-size: 12px; letter-spacing: 0.05em; color: var(--gray-500); margin-bottom: 5px; display: block; }
.viewer-title { font-size: 24px; color: var(--gray-800); margin: 0; }

.study-content-body { color: var(--gray-800); font-size: 14px; line-height: 1.6; }
.study-content-body p { margin: 0 0 1em 0; }
.study-content-body ul, .study-content-body ol { margin: 0.5em 0 1em 0; padding-left: 1.5em; }
.study-content-body li { margin-bottom: 0.25em; }
.study-content-body .study-content-heading { font-size: 1.1em; font-weight: 600; margin: 0 0 0.75em 0; color: var(--gray-800); border-left: 4px solid var(--brand-orange); padding: 10px; background-color: var(--green-50)}

.study-content-body .study-note { margin: 1em 0; padding: 12px 16px; border-radius: 6px; background-color: var(--blue-50); }
.study-content-body .study-note-important { background-color: var(--purple-50); }

.study-content-body .study-table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 14px; }
.study-content-body .study-table th, .study-content-body .study-table td {
    border: 1px solid var(--gray-200); padding: 10px 12px; text-align: left;
}
.study-content-body .study-table th { background-color: var(--gray-100); font-weight: 600; color: var(--gray-800); }
.study-content-body .study-table td { color: var(--gray-800); }

.study-content-body code, .study-content-body .code-inline {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace; font-size: 13px;
    padding: 0.2em 0.4em; background-color: var(--gray-100); border-radius: 4px; color: var(--gray-800);
}
.study-content-body pre {
    margin: 1em 0; padding: 16px; background-color: var(--gray-800); border-radius: 6px; overflow-x: auto;
}
.study-content-body pre code { font-size: 13px; line-height: 1.5; padding: 0; background-color: transparent; color: var(--gray-200); }

.topic-selection { margin-bottom: 30px; padding: 20px; background-color: var(--gray-50); border-radius: 8px; }
.topics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.topic-checkbox {
    display: flex; align-items: flex-start; gap: 10px; padding: 12px;
    background-color: var(--white); border: 1px solid var(--gray-200);
    border-radius: 6px; cursor: pointer; transition: all 0.2s;
}
.topic-checkbox:hover { border-color: var(--green-500); background-color: var(--green-50); }
.topic-checkbox input[type="checkbox"] { margin-top: 2px; width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; }
.topic-checkbox input[type="checkbox"]:checked + .topic-label { color: var(--green-500); }
.topic-label { flex: 1; color: var(--gray-800); font-size: 14px; line-height: 1.5; }
.topic-label strong { display: block; margin-bottom: 4px; }

.exam-preview { margin-top: 30px; padding: 20px; background-color: var(--green-50); border: 2px solid var(--green-500); border-radius: 8px; }
.preview-info { margin-bottom: 20px; }
.preview-info p { margin-bottom: 8px; color: var(--gray-800); font-size: 14px; }
.preview-info p:last-child { margin-bottom: 0; }
.preview-info strong { color: var(--gray-800); }

.back-to-selection-container { margin-bottom: 20px; display: flex; flex-direction: row; }
.back-to-selection-button {
    background-color: var(--gray-500); color: var(--white); border: none; padding: 10px 20px;
    border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer;
    transition: background-color 0.2s; display: inline-flex; align-items: center; gap: 8px;
}
.exam-infotext {
    color: var(--gray-400); padding: 10px 20px; display: flex;
}
.back-to-selection-button:hover { background-color: var(--gray-600); }
.back-to-selection-button:active { transform: translateY(1px); }

.dark-mode-toggle {
    position: fixed; top: 15px; right: 18px; z-index: 1000;
    display: inline-block;
    border-radius: 9999px;
    box-sizing: border-box;
}

.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--gray-200);
    color: var(--gray-800);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.theme-toggle-btn:hover {
    background-color: var(--gray-300);
    color: var(--gray-900);
}

.theme-toggle-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--gray-400);
}

.theme-icon {
    display: block;
    width: 24px;
    height: 24px;
    transition: opacity 0.2s ease;
}

.theme-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.theme-icon-moon { display: block; }
.theme-icon-sun { display: none; }

html.dark-mode { color-scheme: dark; }

html.dark-mode body { background-color: var(--gray-900); color: var(--gray-200); }
html.dark-mode .container { background-color: var(--gray-800); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }

html.dark-mode .instructions { color: var(--gray-400); }
html.dark-mode .divider { border-top-color: var(--gray-700); }
html.dark-mode .exam-title { color: var(--blue-500); }
html.dark-mode .loading, html.dark-mode .error { color: var(--gray-400); }
html.dark-mode .error { color: var(--red-300); background-color: var(--red-900); }
html.dark-mode .question-block { border-bottom-color: var(--gray-700); }
html.dark-mode .multiple-badge { color: var(--gray-400); }

html.dark-mode .question-number, html.dark-mode .question-text,
html.dark-mode .option-label, html.dark-mode .option-letter, html.dark-mode .option-text,
html.dark-mode .explanation strong, html.dark-mode .results-title,
html.dark-mode .score-text, html.dark-mode .percentage-text,
html.dark-mode .section-title, html.dark-mode .subsection-title,
html.dark-mode .mode-card strong, html.dark-mode .topic-label,
html.dark-mode .preview-info p, html.dark-mode .preview-info strong,
html.dark-mode .study-topic-header strong, html.dark-mode .study-subsection-title,
html.dark-mode .study-content-body, html.dark-mode .study-content-body .study-content-heading,
html.dark-mode .study-content-body .study-table td, html.dark-mode .viewer-title {
    color: var(--gray-300);
}

html.dark-mode .study-content-heading { background-color: var(--blue-900); }

html.dark-mode .explanation p, html.dark-mode .mode-card p,
html.dark-mode .mode-card-clickable .expand-indicator, html.dark-mode .study-topic-indicator,
html.dark-mode .study-subsection-indicator {
    color: var(--gray-400);
}

html.dark-mode .score-text span, html.dark-mode .percentage-text span,
html.dark-mode .topic-checkbox input[type="checkbox"]:checked + .topic-label {
    color: var(--white);
}

html.dark-mode .option-label:hover, html.dark-mode .study-topic-header:hover,
html.dark-mode .study-subsection-header:hover { background-color: var(--gray-700); }

html.dark-mode .option-label.correct { background-color: var(--blue-900); border-left-color: var(--blue-500); }
html.dark-mode .option-label.incorrect { background-color: var(--red-900); border-left-color: var(--red-400); }

html.dark-mode .answer-button, html.dark-mode .submit-button, html.dark-mode .start-exam-button { background-color: var(--blue-500); }
html.dark-mode .answer-button:hover, html.dark-mode .submit-button:hover, html.dark-mode .start-exam-button:hover:not(:disabled) { background-color: var(--blue-600); }
html.dark-mode .start-exam-button:disabled { background-color: var(--gray-700); color: var(--gray-400); }

html.dark-mode .explanation, html.dark-mode .results, html.dark-mode .mode-card,
html.dark-mode .topic-selection { background-color: var(--gray-700); }

html.dark-mode .explanation { border-left-color: var(--blue-500); }

html.dark-mode .mode-card, html.dark-mode .topic-checkbox, html.dark-mode .study-topic-card, html.dark-mode .study-subsection {
    border-color: var(--gray-700);
}

html.dark-mode .mode-card:hover, html.dark-mode .mode-option input[type="radio"]:checked + .mode-card,
html.dark-mode .mode-option.is-expanded .mode-card-clickable, html.dark-mode .topic-checkbox:hover,
html.dark-mode .study-topic-card.is-expanded .study-topic-header, html.dark-mode .study-subsection.is-expanded .study-subsection-header {
    background-color: var(--blue-900);
}

html.dark-mode .mode-card:hover, html.dark-mode .mode-option input[type="radio"]:checked + .mode-card,
html.dark-mode .mode-option.is-expanded .mode-card-clickable, html.dark-mode .topic-checkbox:hover,
html.dark-mode .study-topic-card.is-expanded, html.dark-mode .study-subsection.is-expanded, html.dark-mode .exam-preview {
    border-color: var(--blue-500);
}

html.dark-mode .mode-option input[type="radio"]:checked + .mode-card { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); }
html.dark-mode .study-topic-card.is-expanded { box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2); }
html.dark-mode .topic-checkbox { background-color: var(--gray-800); }
html.dark-mode .exam-preview { background-color: var(--blue-900); }
html.dark-mode .back-to-selection-button { background-color: var(--gray-700); color: var(--gray-200); }
html.dark-mode .back-to-selection-button:hover { background-color: var(--gray-600); }

html.dark-mode .dark-mode-toggle { border-color: var(--gray-900); }

html.dark-mode .theme-toggle-btn {
    background-color: var(--gray-700);
    color: var(--gray-200);
}

html.dark-mode .theme-toggle-btn:hover {
    background-color: var(--gray-600);
    color: var(--white);
}

html.dark-mode .theme-toggle-btn:focus { box-shadow: 0 0 0 2px var(--gray-500); }

html.dark-mode .theme-icon-moon { display: none; }
html.dark-mode .theme-icon-sun { display: block; }

html.dark-mode .study-subsection-content { border-top-color: var(--gray-700); background-color: var(--gray-900); }
html.dark-mode .study-content-body code, html.dark-mode .study-content-body .code-inline { background-color: var(--gray-700); color: var(--gray-200); }
html.dark-mode .study-content-body pre { background-color: var(--gray-900); border: 1px solid var(--gray-700); }
html.dark-mode .study-content-body pre code { color: var(--gray-300); }
html.dark-mode .study-content-body .study-note { background-color: var(--gray-800); border-left-color: var(--purple-500); }
html.dark-mode .study-content-body .study-note-important { background-color: var(--gray-800) ; border-left-color: var(--purple-500); }
html.dark-mode .study-content-body .study-table th, html.dark-mode .study-content-body .study-table td { border-color: var(--gray-700); }
html.dark-mode .study-content-body .study-table th { background-color: var(--gray-700); color: var(--gray-200); }

html.dark-mode .study-sidebar { background-color: var(--gray-800); border-right-color: var(--gray-700); }
html.dark-mode .sidebar-topic-item { border-bottom-color: var(--gray-700); }
html.dark-mode .sidebar-topic-header { background-color: var(--gray-800); color: var(--gray-200); }
html.dark-mode .sidebar-topic-header:hover { background-color: var(--gray-700); }
html.dark-mode .sidebar-arrow { color: var(--gray-400); }
html.dark-mode .sidebar-subsections { background-color: var(--gray-900); }
html.dark-mode .sidebar-sub-item { color: var(--gray-400); background-color: var(--gray-800);}
html.dark-mode .sidebar-sub-item:hover { background-color: var(--gray-800); color: var(--gray-200); }
html.dark-mode .sidebar-sub-item.active { background-color: var(--blue-900); color: var(--blue-200); border-left-color: var(--brand-orange); }
html.dark-mode .study-content-viewer { background-color: var(--gray-800); }
html.dark-mode .viewer-header { border-bottom-color: var(--gray-700); }
html.dark-mode .viewer-topic-label { color: var(--gray-400); }
html.dark-mode .study-content-body pre code { background-color: transparent; }

@media (max-width: 768px) {
    body { padding: 10px; }
    .container { padding: 20px; }
    .exam-title { font-size: 24px; }
    .question-header { gap: 5px; }
    .options-container, .answer-button, .explanation { margin-left: 0; }
    .topics-grid { grid-template-columns: 1fr; }
    .mode-card { padding: 15px; }
    .section-title { font-size: 20px; }
    .study-container { grid-template-columns: 1fr; height: auto; min-height: auto; }
    .study-sidebar { max-height: 300px; border-right: none; border-bottom: none; }
    .study-content-viewer { max-height: none; overflow-y: visible; padding: 20px 0 0 0; }
    .topic-study-section .study-container { min-width: 0; }
    .topic-study-section .study-sidebar,
    .topic-study-section .study-content-viewer { min-width: 0; }
    .topic-study-section .sidebar-topic-header { min-width: 0; }
    .dark-mode-toggle { top: 7px; right: 7px; }
    .theme-toggle-btn { width: 36px; height: 36px; }
    .theme-icon { width: 20px; height: 20px; }
}