* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: #111111;
    color: white;
    font-family: Arial, sans-serif;
}

header {
    padding: 25px 50px;
}

header h2 {
    margin: 0;
    font-size: 24px;
}

.hero h1 {
    font-size: 60px;
}

.hero {
    text-align: center;
    padding: 120px 20px;
}

.primary-button {
    background-color: white;
    color: black;
    padding: 15px 30px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 25px;
    transition: 0.3s ease;
}

.primary-button:hover {
    background-color: #dddddd;
}

.major-selection {
    display: none;
    text-align: center;
    padding: 120px 20px;
}

.major-card {
    display: flex;
    align-items: center;
    gap: 20px;

    width: 100%;
    max-width: 500px;
    margin: 40px auto 0;
    padding: 20px;

    background-color: #181818;
    border: 1px solid #2a2a2a;
    border-radius: 16px;

    text-align: left;
    cursor: pointer;
    transition: 0.3s ease;
}

.major-card:hover {
    transform: translateY(-4px);
    border-color: #555555;
    background-color: #1d1d1d;
}


.arrow {
    margin-left: auto;
    font-size: 24px;
    transition: 0.3s ease;
}

.major-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 50px;
    height: 50px;

    background-color: #222222;
    border-radius: 12px;

    font-weight: bold;
}

.major-info h3 {
    margin: 0 0 5px;
}

.major-info p {
    margin: 0;
    color: #888888;
    font-size: 14px;
}

.major-card:hover .arrow {
    transform: translateX(5px);
}

.semester-selection {
    display: none;
    text-align: center;
    padding: 100px 20px;
}

.semester-selection h1,
.course-selection h1 {
    font-size: 42px;
    margin-bottom: 10px;
}

.semester-selection>p,
.course-selection>p {
    color: #888888;
}

.step-label {
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #666666 !important;
}

.semester-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;

    width: 100%;
    max-width: 600px;
    margin: 40px auto 0;
}

.semester-card {
    padding: 25px;

    background-color: #181818;
    color: white;

    border: 1px solid #2a2a2a;
    border-radius: 14px;

    font-size: 17px;
    cursor: pointer;

    transition: 0.2s ease;
}

.semester-card:hover {
    transform: translateY(-3px);
    background-color: #1d1d1d;
    border-color: #555555;
}

.course-selection {
    display: none;
    text-align: center;
    padding: 80px 20px;
}

.course-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;

    width: 100%;
    max-width: 800px;
    margin: 40px auto 0;
}

.course-card {
    display: flex;
    flex-direction: column;
    gap: 10px;

    padding: 25px;

    background-color: #181818;
    color: white;

    border: 1px solid #2a2a2a;
    border-radius: 16px;

    text-align: left;
    cursor: pointer;

    transition: 0.2s ease;
}

.course-card:hover {
    transform: translateY(-3px);
    background-color: #1d1d1d;
    border-color: #555555;
}

.course-code {
    font-size: 13px;
    color: #888888;
    font-weight: bold;
    letter-spacing: 1px;
}

.course-name {
    font-size: 18px;
    font-weight: bold;
}

@media (max-width: 600px) {

    .semester-options,
    .course-grid {
        grid-template-columns: 1fr;
    }

    .hero h1 {
        font-size: 45px;
    }
}

.course-hub {
    display: none;
    width: 100%;
    max-width: 1100px;
    margin: auto;
    padding: 50px 30px 100px;
}

.back-to-courses {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    margin-bottom: 35px;
}

.back-to-courses:hover {
    color: white;
}

.course-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.course-hub-code {
    color: #888;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.course-hub-name {
    margin: 0;
    font-size: 42px;
}

.exam-button,
.set-exam-button,
.continue-button {
    background: white;
    color: black;

    border: none;
    border-radius: 10px;

    padding: 13px 20px;

    font-weight: bold;
    cursor: pointer;
}

.course-nav {
    display: flex;
    gap: 5px;

    margin-top: 45px;
    padding-bottom: 10px;

    border-bottom: 1px solid #292929;

    overflow-x: auto;
}

.nav-tab {
    background: none;
    color: #777;

    border: none;
    border-bottom: 2px solid transparent;

    padding: 12px 16px;

    cursor: pointer;
    white-space: nowrap;
}

.nav-tab:hover {
    color: white;
}

.nav-tab.active {
    color: white;
    border-bottom-color: white;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 15px;
    margin-top: 30px;
}

.dashboard-card {
    background: #181818;

    border: 1px solid #292929;
    border-radius: 16px;

    padding: 25px;
}

.dashboard-card h2 {
    font-size: 30px;
    margin: 10px 0;
}

.dashboard-card p {
    color: #888;
}

.card-label {
    color: #666 !important;

    font-size: 12px;
    font-weight: bold;

    letter-spacing: 1.5px;
}

.progress-bar {
    height: 8px;

    background: #292929;
    border-radius: 20px;

    overflow: hidden;

    margin: 15px 0;
}

.progress-fill {
    width: 0%;
    height: 100%;

    background: white;

    border-radius: 20px;
}

.continue-section {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 30px;

    margin-top: 15px;
    padding: 30px;

    background: #181818;

    border: 1px solid #292929;
    border-radius: 16px;
}

.continue-section h2 {
    margin: 8px 0;
}

.continue-section p {
    color: #888;
}

.empty-state {
    margin-top: 30px;

    padding: 60px 30px;

    background: #181818;

    border: 1px solid #292929;
    border-radius: 16px;

    text-align: center;
}

.empty-state p {
    color: #888;
}

@media (max-width: 700px) {

    .course-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .course-hub-name {
        font-size: 32px;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .continue-section {
        align-items: flex-start;
        flex-direction: column;
    }

}

.modal-overlay {
    display: none;

    position: fixed;
    inset: 0;

    background: rgba(0, 0, 0, 0.75);

    align-items: center;
    justify-content: center;

    padding: 20px;
    z-index: 1000;
}

.modal-overlay.open {
    display: flex;
}

.modal {
    width: 100%;
    max-width: 450px;

    background: #181818;

    border: 1px solid #333;
    border-radius: 18px;

    padding: 28px;
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 25px;
}

.modal-header h2 {
    margin: 5px 0 0;
}

.close-modal {
    background: none;
    border: none;

    color: #888;

    font-size: 28px;
    cursor: pointer;
}

.close-modal:hover {
    color: white;
}

#exam-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#exam-form label {
    color: #aaa;
    font-size: 14px;

    margin-top: 10px;
}

#exam-form input {
    width: 100%;

    background: #111;
    color: white;

    border: 1px solid #333;
    border-radius: 10px;

    padding: 14px;

    font-size: 15px;

    color-scheme: dark;
}

#exam-form input:focus {
    outline: none;
    border-color: #777;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;

    margin-top: 20px;
}

.cancel-exam,
.save-exam {
    padding: 12px 18px;

    border-radius: 9px;
    border: none;

    cursor: pointer;
    font-weight: bold;
}

.cancel-exam {
    background: #292929;
    color: white;
}

.save-exam {
    background: white;
    color: black;
}

/* =========================
   AUTHENTICATION
========================= */

.auth-screen {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px 20px;
}

.auth-container {
    width: 100%;
    max-width: 430px;
}

.auth-logo {
    text-align: center;
    margin-bottom: 35px;
    font-size: 26px;
}

.auth-box {
    background: #181818;

    border: 1px solid #292929;
    border-radius: 18px;

    padding: 35px;
}

.auth-label {
    color: #666;

    font-size: 11px;
    font-weight: bold;

    letter-spacing: 2px;

    margin-bottom: 12px;
}

.auth-box h1 {
    margin: 0 0 8px;
    font-size: 32px;
}

.auth-subtitle {
    color: #888;
    margin: 0 0 30px;
}

#auth-form {
    display: flex;
    flex-direction: column;
}

#auth-form label {
    color: #aaa;

    font-size: 13px;

    margin-bottom: 8px;
    margin-top: 15px;
}

#auth-form input {
    width: 100%;

    padding: 14px;

    background: #111;
    color: white;

    border: 1px solid #333;
    border-radius: 10px;

    font-size: 15px;
}

#auth-form input:focus {
    outline: none;
    border-color: #777;
}

.auth-submit {
    width: 100%;

    margin-top: 25px;
    padding: 14px;

    background: white;
    color: black;

    border: none;
    border-radius: 10px;

    font-size: 15px;
    font-weight: bold;

    cursor: pointer;
}

.auth-submit:hover {
    background: #ddd;
}

.auth-switch-text {
    text-align: center;

    color: #777;

    font-size: 14px;

    margin: 25px 0 0;
}

.auth-switch {
    background: none;
    border: none;

    color: white;

    cursor: pointer;
    font-weight: bold;
}

.auth-message {
    display: none;

    padding: 12px;

    margin: 18px 0 0 !important;

    border-radius: 8px;

    font-size: 13px;
}

.auth-message.error {
    display: block;

    background: rgba(255, 80, 80, 0.08);
    color: #ff8585;

    border: 1px solid rgba(255, 80, 80, 0.2);
}

.auth-message.success {
    display: block;

    background: rgba(120, 255, 160, 0.08);
    color: #8cffaa;

    border: 1px solid rgba(120, 255, 160, 0.2);
}


/* Hide the actual Hodren app until authentication finishes */

.main-header,
main {
    display: none;
}

.materials-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-top: 35px;
    margin-bottom: 25px;
}

.materials-header h2 {
    font-size: 30px;
    margin: 6px 0;
}

.materials-header>div>p:last-child {
    color: #888;
}

.materials-progress {
    width: 180px;
}

.materials-progress-text {
    display: block;

    color: #888;

    font-size: 13px;
    text-align: right;

    margin-bottom: 8px;
}

.materials-list {
    display: flex;
    flex-direction: column;

    gap: 12px;
}

.material-item {
    display: flex;
    align-items: center;

    gap: 20px;

    padding: 22px;

    background: #181818;

    border: 1px solid #292929;
    border-radius: 14px;

    transition: 0.2s ease;
}

.material-item:hover {
    border-color: #444;
    transform: translateY(-2px);
}

.material-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    background: #222;

    border-radius: 10px;

    color: #888;

    font-size: 13px;
    font-weight: bold;
}

.material-info {
    flex: 1;
}

.material-info h3 {
    margin: 0 0 6px;

    font-size: 17px;
}

.material-info p {
    margin: 0;

    color: #777;

    font-size: 13px;
}

.material-actions {
    display: flex;
    align-items: center;

    gap: 10px;
}

.material-status {
    color: #666;

    font-size: 12px;
}

.study-material-button {
    padding: 10px 16px;

    background: white;
    color: black;

    border: none;
    border-radius: 9px;

    font-weight: bold;
    cursor: pointer;
}

.study-material-button:hover {
    background: #ddd;
}

@media (max-width: 700px) {

    .materials-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .materials-progress {
        width: 100%;
    }

    .materials-progress-text {
        text-align: left;
    }

    .material-item {
        align-items: flex-start;
    }

    .material-actions {
        align-items: flex-end;
        flex-direction: column;
    }

}

.study-reader {
    max-width: 800px;
    margin: 40px auto;
}

.back-to-materials {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    margin-bottom: 40px;
    padding: 0;
}

.back-to-materials:hover {
    color: white;
}

.study-reader-header {
    border-bottom: 1px solid #292929;
    padding-bottom: 30px;
}

.study-reader-header h2 {
    font-size: 38px;
    margin: 12px 0;
}

.study-description {
    color: #888;
}

.study-content {
    padding: 40px 0;
    color: #ccc;
    font-size: 17px;
    line-height: 1.9;
    min-height: 200px;
}

.study-footer {
    border-top: 1px solid #292929;
    padding-top: 25px;
    display: flex;
    justify-content: flex-end;
}

.complete-lesson-button {
    background: white;
    color: black;
    border: none;
    border-radius: 10px;
    padding: 14px 22px;
    font-weight: bold;
    cursor: pointer;
}

.complete-lesson-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.lesson-explanation {
    margin-bottom: 30px;
    color: #ccc;
    line-height: 1.8;
}

.pdf-container {
    background: #181818;
    border: 1px solid #292929;
    border-radius: 14px;
    overflow: hidden;
}

.pdf-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 18px 22px;

    border-bottom: 1px solid #292929;
}

.pdf-header span {
    color: #888;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
}

.open-pdf-link {
    color: white;
    font-size: 13px;
    text-decoration: none;
}

.open-pdf-link:hover {
    text-decoration: underline;
}

.pdf-viewer {
    width: 100%;
    height: 650px;
    border: none;
    background: white;
}

@media (max-width: 700px) {
    .pdf-viewer {
        height: 500px;
    }
}

.pdf-reader {
    width: 100%;
}

.pdf-page-container {
    background: #252525;
    padding: 20px;
    text-align: center;
    overflow-x: auto;
}

#pdf-canvas {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.pdf-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    padding: 20px;
}

.pdf-controls button {
    background: #252525;
    color: white;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 10px 18px;
    cursor: pointer;
}

.pdf-controls button:hover:not(:disabled) {
    background: #333;
}

.pdf-controls button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

#pdf-page-info {
    color: #aaa;
    font-size: 14px;
}

#pdf-error {
    color: #ff8585;
    text-align: center;
}

.lesson-explanation {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 14px;

    padding: 30px;
    margin-bottom: 30px;

    color: #ddd;

    font-size: 15px;
    line-height: 1.9;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* HODREN FLASHCARDS */

.flashcards-section {
    max-width: 750px;
    margin: 0 auto;
}

.flashcards-header {
    margin-bottom: 25px;
}

.flashcards-header h2 {
    font-size: 28px;
    margin-bottom: 8px;
}

.flashcards-header p {
    color: #999;
}

#flashcard-lesson {
    width: 100%;
    padding: 14px;
    background: #1a1a1a;
    color: white;
    border: 1px solid #333;
    border-radius: 10px;
    margin-bottom: 30px;
}

.flashcard {
    min-height: 280px;
    background: #1c1c1c;
    border: 1px solid #444;
    border-radius: 18px;
    padding: 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.flashcard:hover {
    border-color: #888;
}

.flashcard-question,
.flashcard-answer {
    font-size: 23px;
    font-weight: 600;
    line-height: 1.5;
}

.flashcard-answer {
    display: none;
    color: #9ee6bc;
}

.flashcard.flipped .flashcard-question {
    display: none;
}

.flashcard.flipped .flashcard-answer {
    display: block;
}

.flashcard-hint {
    color: #777;
    font-size: 13px;
    margin-top: 25px;
}

.flashcard-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-top: 25px;
}

.flashcard-controls button {
    background: #252525;
    color: white;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 12px 18px;
    cursor: pointer;
}

.flashcard-controls button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.flashcard-empty {
    text-align: center;
    color: #888;
}

/* =========================
   HODREN PRACTICE QUIZZES
========================= */

.practice-section {
    max-width: 800px;
    margin: 0 auto;
}

.practice-header {
    margin-bottom: 25px;
}

.practice-header h2 {
    font-size: 28px;
    margin-bottom: 8px;
}

.practice-header p {
    color: #999;
}

#practice-lesson {
    width: 100%;
    padding: 14px;
    background: #1a1a1a;
    color: white;
    border: 1px solid #333;
    border-radius: 10px;
    margin-bottom: 30px;
}

.quiz-progress {
    display: flex;
    justify-content: space-between;
    color: #aaa;
    margin-bottom: 20px;
    font-size: 14px;
}

.quiz-question-card {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 16px;
    padding: 30px;
}

#quiz-question {
    font-size: 22px;
    line-height: 1.5;
    margin-bottom: 25px;
}

#quiz-answers {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quiz-answer {
    width: 100%;
    padding: 16px;
    text-align: left;
    background: #252525;
    color: white;
    border: 1px solid #444;
    border-radius: 10px;
    cursor: pointer;
    font-size: 15px;
}

.quiz-answer:hover:not(:disabled) {
    background: #333;
}

.quiz-answer.correct {
    background: #173b29;
    border-color: #43b581;
}

.quiz-answer.incorrect {
    background: #452020;
    border-color: #e05a5a;
}

.quiz-answer:disabled {
    cursor: default;
}

#quiz-feedback {
    margin-top: 20px;
    line-height: 1.7;
    color: #ccc;
}

#quiz-next,
#quiz-retry {
    margin-top: 25px;
    padding: 13px 22px;
    background: white;
    color: #111;
    border: none;
    border-radius: 9px;
    font-weight: bold;
    cursor: pointer;
}

.quiz-results {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 16px;
    padding: 45px 25px;
    text-align: center;
}

.quiz-final-score {
    font-size: 48px;
    font-weight: bold;
    margin: 25px 0;
}

.quiz-result-message,
.quiz-empty {
    color: #aaa;
}

.quiz-empty {
    text-align: center;
}

/* =========================
   HODREN PROGRESS DASHBOARD
========================= */

.progress-dashboard {
    max-width: 1050px;
    margin: 0 auto;
}

.progress-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.progress-dashboard-header h2 {
    font-size: 30px;
    margin-bottom: 8px;
}

.progress-dashboard-header p {
    color: #999;
}

#refresh-progress {
    padding: 12px 20px;
    background: #252525;
    color: white;
    border: 1px solid #444;
    border-radius: 9px;
    cursor: pointer;
}

#refresh-progress:hover {
    background: #333;
}

.progress-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 25px;
}

.progress-stat-card {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 14px;
    padding: 25px;
}

.progress-stat-card span {
    color: #999;
    font-size: 11px;
    letter-spacing: 1px;
}

.progress-stat-card h3 {
    font-size: 32px;
    margin: 15px 0;
}

.progress-stat-card p {
    color: #777;
    font-size: 12px;
    line-height: 1.6;
}

.progress-overview-card {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 14px;
    padding: 30px;
    margin-bottom: 25px;
}

.progress-overview-card h3 {
    font-size: 20px;
    margin-bottom: 15px;
}

.progress-section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.progress-section-title span {
    color: #9ee6bc;
    font-weight: bold;
}

.progress-dashboard-bar {
    height: 10px;
    background: #303030;
    border-radius: 20px;
    overflow: hidden;
    margin-top: 20px;
}

#progress-dashboard-fill {
    width: 0%;
    height: 100%;
    background: #9ee6bc;
    border-radius: 20px;
    transition: width 0.4s ease;
}

.progress-section-description {
    color: #999;
    margin-bottom: 25px;
    font-size: 14px;
}

.lecture-performance-item {
    padding: 20px 0;
    border-bottom: 1px solid #333;
}

.lecture-performance-item:last-child {
    border-bottom: none;
}

.lecture-performance-top {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 12px;
}

.lecture-performance-name {
    font-size: 14px;
    color: #ddd;
}

.lecture-performance-score {
    font-size: 14px;
    font-weight: bold;
}

.lecture-performance-bar {
    height: 7px;
    background: #303030;
    border-radius: 20px;
    overflow: hidden;
}

.lecture-performance-fill {
    height: 100%;
    background: #9ee6bc;
    border-radius: 20px;
    transition: width 0.4s ease;
}

.lecture-performance-status {
    color: #888;
    font-size: 12px;
    margin-top: 10px;
}

#progress-message {
    color: #999;
    text-align: center;
    margin-top: 15px;
}

@media (max-width: 900px) {
    .progress-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .progress-stats {
        grid-template-columns: 1fr;
    }

    .progress-dashboard-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .progress-overview-card {
        padding: 20px;
    }
}

/* =========================
   HODREN MOCK EXAMS
========================= */

.mock-section {
    max-width: 850px;
    margin: 0 auto;
}

.mock-header {
    margin-bottom: 30px;
}

.mock-header h2 {
    font-size: 30px;
    margin-bottom: 8px;
}

.mock-header p {
    color: #999;
}

.mock-info-card,
.mock-question-card,
.mock-results {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 16px;
    padding: 35px;
}

.mock-info-card h3 {
    font-size: 24px;
    margin-bottom: 15px;
}

.mock-info-card p {
    color: #aaa;
    line-height: 1.7;
}

.mock-details {
    display: flex;
    gap: 15px;
    margin: 25px 0;
    flex-wrap: wrap;
}

.mock-details span {
    padding: 10px 16px;
    background: #252525;
    border: 1px solid #444;
    border-radius: 8px;
    color: #ddd;
    font-size: 14px;
}

#mock-start-button,
#mock-submit,
#mock-retry {
    background: white;
    color: #111;
    border: none;
    padding: 14px 22px;
    border-radius: 9px;
    font-weight: bold;
    cursor: pointer;
}

.mock-exam-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    color: #aaa;
}

#mock-timer {
    font-size: 24px;
    font-weight: bold;
    color: #9ee6bc;
    font-variant-numeric: tabular-nums;
}

#mock-timer.warning {
    color: #ff7777;
}

#mock-question {
    font-size: 22px;
    line-height: 1.5;
    margin-bottom: 25px;
}

#mock-answers {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mock-answer {
    padding: 16px;
    background: #252525;
    border: 1px solid #444;
    border-radius: 10px;
    color: white;
    text-align: left;
    cursor: pointer;
    font-size: 15px;
}

.mock-answer:hover {
    background: #333;
}

.mock-answer.selected {
    border-color: #9bbdff;
    background: #24334b;
    box-shadow: inset 4px 0 #9bbdff;
}

.mock-controls {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 25px;
}

.mock-controls button {
    padding: 12px 18px;
    background: #252525;
    color: white;
    border: 1px solid #444;
    border-radius: 9px;
    cursor: pointer;
}

.mock-controls button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.mock-controls #mock-submit {
    background: white;
    color: #111;
    margin-left: auto;
}

.mock-results {
    text-align: center;
}

#mock-final-score {
    font-size: 48px;
    font-weight: bold;
    margin: 25px 0;
}

#mock-result-message {
    color: #aaa;
    margin-bottom: 25px;
}

#mock-review {
    text-align: left;
    margin: 30px 0;
}

.mock-review-item {
    border-top: 1px solid #333;
    padding: 18px 0;
    line-height: 1.7;
}

.mock-review-item p {
    color: #aaa;
    margin-top: 6px;
}

.mock-review-item.correct {
    border-left: 3px solid #43b581;
    padding-left: 15px;
}

.mock-review-item.incorrect {
    border-left: 3px solid #e05a5a;
    padding-left: 15px;
}

#mock-error {
    color: #ff8585;
    margin-top: 15px;
}

@media (max-width: 500px) {

    .mock-info-card,
    .mock-question-card,
    .mock-results {
        padding: 22px;
    }

    .mock-controls #mock-submit {
        margin-left: 0;
    }
}

/* =========================
   HODREN MOCK ANALYTICS
========================= */

.mock-analytics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 25px;
}

.mock-analytics-stat {
    background: #222;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 20px;
}

.mock-analytics-stat span {
    color: #999;
    font-size: 11px;
    letter-spacing: 1px;
}

.mock-analytics-stat h3 {
    font-size: 28px;
    margin: 12px 0 0;
    color: white;
}

.mock-history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid #333;
}

.mock-history-item:last-child {
    border-bottom: none;
}

.mock-history-info h4 {
    margin: 0 0 8px;
    font-size: 16px;
}

.mock-history-info p {
    margin: 0;
    color: #999;
    font-size: 13px;
}

.mock-history-score {
    font-size: 22px;
    font-weight: bold;
    white-space: nowrap;
}

.mock-history-score.good {
    color: #9ee6bc;
}

.mock-history-score.medium {
    color: #f5c76b;
}

.mock-history-score.low {
    color: #ff8585;
}

.mock-weak-item {
    padding: 18px;
    margin-top: 12px;
    background: #222;
    border: 1px solid #333;
    border-radius: 10px;
}

.mock-weak-item h4 {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.5;
}

.mock-weak-item p {
    color: #aaa;
    margin: 5px 0;
    font-size: 13px;
}

.mock-analytics-empty {
    color: #999;
    padding: 20px 0;
}

@media (max-width: 700px) {
    .mock-analytics-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mock-history-item {
        align-items: flex-start;
    }
}

/* =========================
   COLLAPSIBLE LECTURE PERFORMANCE
========================= */

.lecture-collapse {
    width: 100%;
    overflow: hidden;
}

.lecture-collapse-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.lecture-collapse-header::-webkit-details-marker {
    display: none;
}

.lecture-collapse-header h3 {
    margin: 0;
    font-size: 20px;
    color: white;
}

.collapse-arrow {
    font-size: 28px;
    color: #aaa;
    transition: transform 0.25s ease;
}

.lecture-collapse[open] .collapse-arrow {
    transform: rotate(180deg);
}

.lecture-collapse-content {
    padding: 0 24px 24px;
    border-top: 1px solid #333;
}

.lecture-collapse-header:hover {
    background: #222;
}

.lecture-collapse-header:focus-visible {
    outline: 2px solid #9ee6bc;
    outline-offset: -3px;
}

/* =========================
   HODREN HOME BUTTON
========================= */

.hodren-logo {
    background: none;
    border: none;
    padding: 0;

    color: white;
    font-size: 24px;
    font-weight: bold;
    font-family: inherit;

    cursor: pointer;
    transition: color 0.2s ease;
}

.hodren-logo:hover {
    color: #8cffaa;
}

.hodren-logo:focus-visible {
    outline: 2px solid #8cffaa;
    outline-offset: 6px;
    border-radius: 3px;
}

/* =========================
   HODREN STUDENT DASHBOARD
========================= */

.student-dashboard {
    display: none;
    max-width: 1450px;
    margin: 0 auto;
    padding: 5px 35px 100px;
}

.student-dashboard-header {
    margin-bottom: 35px;
}

.student-dashboard-header h1 {
    font-size: 38px;
    margin: 10px 0;
}

.student-dashboard-header>p:last-child {
    color: #999;
}

.student-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 20px;
    align-items: start;
}

.student-profile-card,
.student-overview-card,
.student-exams-card {
    background: #1b1f24;
    border: 1px solid #30343b;
    border-radius: 16px;
    padding: 25px;
    min-width: 0;
}

.student-profile-card h2,
.student-overview-card h2,
.student-exams-card h2 {
    font-size: 21px;
    margin: 0 0 22px;
}

.profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    background: #263d32;
    color: #8cffaa;
    border-radius: 50%;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
}

#dashboard-student-email {
    color: #888;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.profile-details {
    margin-top: 25px;
}

.profile-details>div {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 15px 0;
    border-top: 1px solid #333;
}

.profile-details span,
.student-overview-stats span {
    color: #999;
    font-size: 13px;
}

.profile-details strong {
    font-size: 13px;
    text-align: right;
}

.student-overview-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 25px 0;
}

.student-overview-stats>div {
    background: #242930;
    padding: 18px 12px;
    border-radius: 12px;
}

.student-overview-stats h3 {
    font-size: 26px;
    margin: 12px 0 0;
}

#dashboard-continue {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 10px;
    background: #8cffaa;
    color: #111;
    font-weight: bold;
    cursor: pointer;
}

#dashboard-continue:hover {
    background: #b0ffc6;
}

#dashboard-upcoming-exams {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#dashboard-upcoming-exams p {
    color: #999;
    font-size: 14px;
}

.dashboard-courses-section {
    margin-top: 35px;
}

.dashboard-courses-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

#dashboard-view-courses {
    background: none;
    border: none;
    color: #8cffaa;
    font-size: 14px;
    cursor: pointer;
}

#dashboard-course-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

/* =========================
   DASHBOARD RESPONSIVENESS
========================= */

@media (max-width: 1100px) {
    .student-dashboard-grid {
        grid-template-columns: 1fr 1fr;
    }

    .student-exams-card {
        grid-column: 1 / -1;
    }

    #dashboard-course-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .student-dashboard {
        padding: 30px 20px 70px;
    }

    .student-dashboard-header h1 {
        font-size: 30px;
    }

    .student-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .student-exams-card {
        grid-column: auto;
    }

    .student-overview-stats {
        grid-template-columns: 1fr;
    }

    #dashboard-course-list {
        grid-template-columns: 1fr;
    }
}

/* =========================
   DASHBOARD COURSE CARDS
========================= */

.dashboard-course-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;

    width: 100%;
    min-height: 170px;
    padding: 24px;

    background: #1b1f24;
    color: white;

    border: 1px solid #30343b;
    border-radius: 16px;

    text-align: left;
    cursor: pointer;

    transition: 0.2s ease;
}

.dashboard-course-card:hover {
    transform: translateY(-3px);
    border-color: #8cffaa;
    background: #222a28;
}

.dashboard-course-card:focus-visible {
    outline: 2px solid #8cffaa;
    outline-offset: 3px;
}

.dashboard-course-code {
    color: #8cffaa;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;
}

.dashboard-course-card h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.4;
}

.dashboard-course-action {
    margin-top: auto;
    color: #aaa;
    font-size: 13px;
}

/* =========================
   HODREN NAVIGATION MENU
========================= */

.main-header {
    position: relative;
    z-index: 100;
}

.hodren-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
}

.hodren-logo {
    color: #8cffaa;
    letter-spacing: 1px;
}

.hodren-menu-wrapper {
    position: relative;
}

.hodren-menu-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;

    width: 44px;
    height: 44px;

    background: transparent;
    border: none;
    cursor: pointer;
}

.menu-line {
    display: block;
    height: 2px;
    background: white;
    border-radius: 10px;
    transition: 0.25s ease;
}

.menu-line-top {
    width: 28px;
}

.menu-line-bottom {
    width: 19px;
}

.hodren-menu-button:hover .menu-line {
    background: #8cffaa;
}

.hodren-menu-button:focus-visible,
.hodren-dropdown button:focus-visible {
    outline: 2px solid #8cffaa;
    outline-offset: 4px;
}

.hodren-dropdown {
    display: none;

    position: absolute;
    top: 55px;
    right: 0;

    width: 240px;
    padding: 18px;

    background: #1b1f24;
    border: 1px solid #30343b;
    border-radius: 14px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
    z-index: 200;
}

.hodren-dropdown.open {
    display: flex;
    flex-direction: column;
}

.hodren-menu-label {
    font-size: 11px;
    letter-spacing: 2px;
    color: #8cffaa;
    font-weight: bold;
    margin: 5px 10px 15px;
}

.hodren-dropdown button {
    width: 100%;
    padding: 13px 10px;

    background: transparent;
    border: none;
    border-radius: 8px;

    color: #ddd;
    text-align: left;
    font-size: 14px;
    cursor: pointer;

    transition: background 0.2s ease;
}

.hodren-dropdown button:hover {
    background: #2a3035;
    color: white;
}

.hodren-menu-divider {
    height: 1px;
    background: #363b42;
    margin: 12px 0;
}

.hodren-dropdown .menu-logout {
    color: #ff8585;
}

.hodren-dropdown .menu-logout:hover {
    background: rgba(255, 100, 100, 0.1);
    color: #ff8585;
}

@media (max-width: 600px) {
    .main-header {
        padding: 18px 20px;
    }

    .hodren-dropdown {
        width: min(240px, calc(100vw - 40px));
    }
}

/* =========================
   HODREN ACADEMIC PATH
========================= */

.major-selection {
    display: none;
    padding: 60px 20px;
    text-align: left;
}

.academic-path-container {
    max-width: 1050px;
    margin: 0 auto;
    padding: 35px;

    background: #101915;
    border: 1px solid #1b2921;
    border-radius: 28px;
}

.academic-path-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.academic-path-top h2 {
    color: #8cffaa;
    font-size: 28px;
    margin: 0;
}

.academic-path-top span {
    color: #999;
    font-size: 15px;
}

.academic-path-container>h1 {
    margin: 50px 0 35px;
    font-size: clamp(28px, 4vw, 42px);
    color: white;
}

.academic-path-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.academic-major-card {
    min-height: 220px;
    padding: 30px;

    background: #1b2a21;
    border: 2px solid #34463b;
    border-radius: 22px;

    color: white;
    text-align: left;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    transition: 0.25s ease;
}

.academic-major-icon {
    font-size: 30px;
    color: #a8b8ad;
    margin-bottom: 25px;
}

.academic-major-card h3 {
    font-size: 27px;
    font-weight: 500;
    margin: 0 0 15px;
}

.academic-major-card p {
    font-size: 17px;
    color: #a8b8ad;
    margin: auto 0 0;
}

.academic-major-card.available {
    cursor: pointer;
    border-color: #8cffaa;
}

.academic-major-card.available .academic-major-icon,
.academic-major-card.available p {
    color: #8cffaa;
}

.academic-major-card.available:hover {
    background: #24392b;
    transform: translateY(-3px);
}

.academic-major-card:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.academic-path-note {
    margin: 30px 0 0;
    color: #888;
    font-size: 14px;
}

@media (max-width: 650px) {
    .academic-path-container {
        padding: 24px 18px;
    }

    .academic-path-grid {
        grid-template-columns: 1fr;
    }

    .academic-major-card {
        min-height: 180px;
        padding: 25px;
    }

    .academic-path-top h2 {
        font-size: 23px;
    }
}

/* =========================
   HODREN UPCOMING EXAMS
   ========================= */

#dashboard-upcoming-exams {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

.dashboard-exam-item {
    background: #242830;
    border: 1px solid #30363d;
    border-radius: 14px;
    padding: 18px;
    transition: border-color 0.2s ease;
}

.dashboard-exam-item:hover {
    border-color: #89ffab;
}

.dashboard-exam-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dashboard-exam-top strong {
    font-size: 16px;
    color: #ffffff;
}

.dashboard-exam-countdown {
    color: #89ffab;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.dashboard-exam-item p {
    color: #a0a0a0;
    font-size: 14px;
    margin: 10px 0 0;
}

/* =========================
   HODREN EDIT PROFILE
   ========================= */

.edit-profile-button {
    margin: 18px 0;
    padding: 9px 16px;
    border: 1px solid #3b4540;
    border-radius: 9px;
    background: transparent;
    color: #89ffab;
    font-size: 13px;
    cursor: pointer;
    transition: 0.2s ease;
}

.edit-profile-button:hover {
    background: #25382d;
    border-color: #89ffab;
}

.edit-profile-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.75);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.edit-profile-modal.open {
    display: flex;
}

.edit-profile-content {
    width: 100%;
    max-width: 440px;
    padding: 32px;
    background: #1b1f24;
    border: 1px solid #30363d;
    border-radius: 18px;
    color: white;
}

.edit-profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 26px;
}

.edit-profile-header h2 {
    margin: 0;
    font-size: 24px;
}

#close-edit-profile {
    background: none;
    border: none;
    color: #aaa;
    font-size: 20px;
    cursor: pointer;
}

#edit-profile-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#edit-profile-form label {
    color: #aaa;
    font-size: 13px;
}

#edit-profile-form input {
    padding: 14px;
    border: 1px solid #353b42;
    border-radius: 9px;
    background: #242830;
    color: white;
    font-size: 15px;
    outline: none;
}

#edit-profile-form input:focus {
    border-color: #89ffab;
}

.save-profile-button {
    margin-top: 12px;
    padding: 14px;
    border: none;
    border-radius: 9px;
    background: #89ffab;
    color: #111;
    font-weight: 700;
    cursor: pointer;
}

.save-profile-button:disabled {
    opacity: 0.6;
    cursor: wait;
}

#edit-profile-message {
    min-height: 18px;
    margin: 0;
    font-size: 13px;
    color: #89ffab;
}

@media (max-width: 480px) {
    .edit-profile-content {
        padding: 24px;
    }
}

/* =========================
   HODREN LOADING SCREEN
========================= */

.hodren-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #111111;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.hodren-loader-logo {
    font-family: Arial, sans-serif;
    font-size: clamp(36px, 7vw, 56px);
    font-weight: 800;
    letter-spacing: -2px;
    color: #ffffff;

    animation: hodrenLogoAppear 1.2s ease forwards;
}

.hodren-loader-logo span {
    color: #8fffd2;
}

@keyframes hodrenLogoAppear {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hodren-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* =========================
   HODREN GOOGLE AUTH
========================= */

.google-auth-section {
    margin-top: 22px;
    width: 100%;
}

/* OR divider */

.auth-divider {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    color: #777;
    font-size: 11px;
    letter-spacing: 2px;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #303030;
}

/* Google button */

.google-login-button {
    width: 100%;
    padding: 14px 20px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    background: #1b1b1b;
    border: 1px solid #333;
    border-radius: 10px;

    color: #ffffff;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
    transition: all 0.2s ease;
}

.google-login-button:hover {
    background: #252525;
    border-color: #8fffd2;
    transform: translateY(-1px);
}

.google-login-button:active {
    transform: translateY(0);
}

/* Google icon */

.google-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

/* =========================
   HODREN LECTURE SUMMARY
========================= */

.lesson-summary-section {
    margin-top: 35px;
    padding: 30px;

    background: #181818;
    border: 1px solid #292929;
    border-radius: 16px;
}

.lesson-summary-section h2 {
    margin: 10px 0 25px;
    font-size: 26px;
    color: #ffffff;
}

.lesson-summary-section .card-label {
    color: #8cffaa !important;
}

.lesson-summary-section .lesson-explanation {
    line-height: 1.9;
    color: #cccccc;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .lesson-summary-section {
        padding: 20px;
    }
}
/* Shared source references and study content layouts. */
.source-link { color: #8cffaa; display: inline-block; margin: 10px 0; text-decoration: underline; text-underline-offset: 3px; }
.source-link:not([href]) { display: none; }
#course-content-count { color: #aaa; line-height: 1.6; }
#mock-lecture-scope { display: block; width: 100%; max-width: 600px; margin: 12px 0 22px; padding: 12px; background: #222; color: #fff; border: 1px solid #555; border-radius: 8px; font: inherit; }
.flashcard:focus-visible, .source-link:focus-visible { outline: 2px solid #8cffaa; outline-offset: 4px; }
.flashcard-question, .flashcard-answer, #quiz-question, #mock-question, .quiz-answer, .mock-answer { white-space: pre-wrap; overflow-wrap: anywhere; }
.lesson-explanation[dir="rtl"], [dir="rtl"] .flashcard-question, [dir="rtl"] .flashcard-answer { font-family: Tahoma, Arial, sans-serif; line-height: 1.9; }
#quiz-save-status { color: #b8d6c2; }
@media (max-width: 600px) {
    .materials-header { flex-direction: column; align-items: stretch; gap: 18px; }
    .material-item { flex-wrap: wrap; }
    .material-info { min-width: 0; flex: 1; }
    .material-actions { width: 100%; justify-content: flex-end; }
    .flashcard { padding: 22px 16px; }
    .flashcard-question, .flashcard-answer { font-size: 19px; }
    .flashcard-controls { flex-wrap: wrap; justify-content: center; }
    .quiz-answer, .mock-answer { min-height: 44px; }
}

/* Bilingual controls keep the existing header and menu positions. */
.hodren-header-content { direction: ltr; }
.hodren-header-controls { display: flex; align-items: center; gap: 12px; direction: ltr; }
.language-switch { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 12px; gap: 4px; border: 1px solid #344339; border-radius: 9px; background: #171b18; color: #d2d8d4; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; direction: ltr; }
.language-switch:hover { border-color: #8cffaa; }
.language-switch:focus-visible { outline: 2px solid #8cffaa; outline-offset: 3px; }
.language-divider { color: #6e7d73; }
html[lang="en"] .language-label-en, html[lang="ar"] .language-label-ar { color: #8cffaa; font-weight: 700; }
.auth-language-controls { position: fixed; top: 20px; right: 22px; z-index: 150; }
html[lang="ar"] body { font-family: Tahoma, Arial, sans-serif; }
html[dir="rtl"] .hodren-dropdown { direction: rtl; text-align: right; }
html[dir="rtl"] .hodren-dropdown button { text-align: right; }
html[dir="rtl"] .academic-path-container, html[dir="rtl"] .major-selection, html[dir="rtl"] .student-profile-card, html[dir="rtl"] .student-overview-card, html[dir="rtl"] .student-exams-card, html[dir="rtl"] .dashboard-course-card { text-align: right; }
html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="password"], html[dir="rtl"] input[type="date"], html[dir="rtl"] input[type="time"] { direction: ltr; text-align: left; }
html[dir="rtl"] .auth-box label { text-align: right; }
[data-educational-content] { unicode-bidi: plaintext; }
.hodren-logo, .course-code, .dashboard-course-code, .course-hub-code { direction: ltr; unicode-bidi: isolate; }
/* Readable Study Notes use the same charcoal/mint visual language. */
.lesson-summary-section .lesson-explanation { white-space: normal; line-height: 1.85; overflow-wrap: anywhere; text-align: start; }
.lesson-explanation p { margin: 0 0 1.05em; }
.lesson-explanation h3 { color: #8cffaa; font-size: 1.12em; line-height: 1.5; margin: 1.8em 0 .7em; }
.lesson-explanation h3:first-child { margin-top: 0; }
.lesson-explanation h4 { color: #e3e9e5; font-size: 1em; margin: 1.4em 0 .6em; }
.lesson-explanation ul, .lesson-explanation ol { padding-inline-start: 1.6em; margin: .6em 0 1.2em; }
.lesson-explanation li { margin-block: .35em; }
.lesson-explanation code { font-family: Consolas, "Courier New", monospace; font-size: .94em; background: #111613; color: #c0e6ca; padding: .12em .35em; border-radius: 4px; direction: ltr; unicode-bidi: isolate; }
.lesson-explanation pre { overflow-x: auto; white-space: pre; direction: ltr; text-align: left; background: #111613; border: 1px solid #314136; border-radius: 10px; padding: 16px; margin: 1em 0 1.4em; max-width: 100%; unicode-bidi: isolate; }
.lesson-explanation pre code { background: transparent; padding: 0; line-height: 1.65; }
.lesson-explanation[lang="ar"] { font-family: Tahoma, Arial, sans-serif; line-height: 2; }
@media (max-width: 600px) {
    .hodren-header-controls { gap: 8px; }
    .language-switch { padding: 8px 9px; font-size: 12px; }
    .auth-language-controls { top: 12px; right: 14px; }
    .lesson-summary-section { min-width: 0; }
    .lesson-summary-section .lesson-explanation { font-size: 15px; }
    .lesson-explanation pre { padding: 12px; font-size: 13px; }
}