.course-cover {
    min-height: 160px;
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(37, 99, 235, .92), rgba(6, 182, 212, .88), rgba(139, 92, 246, .88));
    color: #fff;
    padding: 26px;
    position: relative;
    overflow: hidden;
}

.course-cover::after {
    content: "</>";
    position: absolute;
    left: 18px;
    bottom: -22px;
    font-family: Consolas, monospace;
    font-weight: 800;
    font-size: 5rem;
    color: rgba(255, 255, 255, .12);
}

.course-card {
    background: #fff;
    border: 1px solid rgba(37, 99, 235, .12);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 16px 45px rgba(30, 64, 175, .07);
    height: 100%;
    transition: .25s ease;
}

.course-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 55px rgba(30, 64, 175, .13);
}

.course-card-body {
    padding: 22px;
}

.unit-card {
    background: #fff;
    border: 1px solid rgba(37, 99, 235, .12);
    border-radius: 22px;
    overflow: hidden;
    margin-bottom: 18px;
}

.unit-header {
    padding: 18px 20px;
    background: linear-gradient(135deg, #f8fbff, #eef6ff);
    border-bottom: 1px solid rgba(37, 99, 235, .10);
}

.lesson-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 20px;
    border-bottom: 1px solid #eef2f7;
    color: #172033;
    transition: .2s ease;
}

.lesson-row:last-child {
    border-bottom: 0;
}

.lesson-row:hover {
    background: #f8fbff;
}

.lesson-number {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 14px;
    color: #2563eb;
    background: #dbeafe;
    font-weight: 800;
}

.lesson-number.completed {
    color: #047857;
    background: #d1fae5;
}

.video-shell {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: #0f172a;
    box-shadow: 0 22px 55px rgba(15, 23, 42, .22);
}

.video-shell::before {
    content: "";
    display: block;
    padding-top: 56.25%;
}

.video-shell iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-watermark {
    position: absolute;
    z-index: 3;
    left: 14px;
    top: 14px;
    max-width: calc(100% - 28px);
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .58);
    color: rgba(255, 255, 255, .82);
    backdrop-filter: blur(8px);
    font-size: .75rem;
    pointer-events: none;
}

.lesson-content {
    background: #fff;
    border: 1px solid rgba(37, 99, 235, .12);
    border-radius: 24px;
    padding: clamp(20px, 4vw, 36px);
    line-height: 2.05;
    font-size: 1rem;
}

.lesson-content pre,
.code-preview {
    direction: ltr;
    text-align: left;
    background: #111827;
    color: #e5e7eb;
    padding: 18px;
    border-radius: 18px;
    overflow-x: auto;
    font-family: Consolas, monospace;
}

.check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}

.check-option {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    padding: 12px;
    border-radius: 15px;
    background: #f8fbff;
    border: 1px solid #dbeafe;
}

.sticky-form {
    position: sticky;
    top: 96px;
}

@media (max-width: 991px) {
    .sticky-form {
        position: static;
    }
}
.resource-upload-card,
.lesson-resource-section {
    background: #fff;
    border: 1px solid rgba(37, 99, 235, .12);
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 12px 36px rgba(30, 64, 175, .05);
}

.resource-upload-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 17px;
    background: #fee2e2;
    color: #dc2626;
    font-size: 1.35rem;
}

.resource-upload-icon.pdf {
    background: #ffedd5;
    color: #ea580c;
}

.resource-upload-icon.mindmap {
    background: #ede9fe;
    color: #7c3aed;
}

.current-resource {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: 16px;
    background: #f8fbff;
    border: 1px solid #dbeafe;
}

.pdf-viewer {
    height: min(78vh, 850px);
    min-height: 520px;
    overflow: hidden;
    border-radius: 20px;
    background: #e5e7eb;
}

.pdf-viewer iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.mindmap-viewer {
    border-radius: 20px;
    overflow: auto;
    background:
        linear-gradient(45deg, #f8fafc 25%, transparent 25%),
        linear-gradient(-45deg, #f8fafc 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f8fafc 75%),
        linear-gradient(-45deg, transparent 75%, #f8fafc 75%),
        #fff;
    background-size: 24px 24px;
    background-position: 0 0, 0 12px, 12px -12px, -12px 0;
    border: 1px solid #e2e8f0;
    padding: 18px;
    text-align: center;
}

.mindmap-viewer img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .12);
}

@media (max-width: 576px) {
    .pdf-viewer {
        min-height: 430px;
        height: 65vh;
    }

    .resource-upload-card,
    .lesson-resource-section {
        padding: 17px;
    }
}


/* CodeStep Interactive Code Lab */
.resource-upload-icon.code {
    background: #dbeafe;
    color: #2563eb;
}

.code-lab-admin-card {
    border: 1px solid rgba(37, 99, 235, .22);
    background:
        radial-gradient(circle at 0 0, rgba(6, 182, 212, .08), transparent 32%),
        #fff;
}

.code-lab-switch {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    border-radius: 999px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    font-weight: 700;
    white-space: nowrap;
}

.admin-code-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.admin-code-editor {
    min-height: 265px;
    resize: vertical;
    background: #111827;
    color: #e5e7eb;
    border-color: #1f2937;
    font-family: Consolas, "Courier New", monospace;
    line-height: 1.65;
    font-size: .86rem;
    text-align: left;
}

.admin-code-editor:focus {
    background: #111827;
    color: #fff;
    border-color: #60a5fa;
}

.code-lab-card {
    background: #fff;
    border: 1px solid rgba(37, 99, 235, .16);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 22px 60px rgba(30, 64, 175, .10);
}

.code-lab-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 26px;
    background:
        radial-gradient(circle at 4% 0, rgba(6, 182, 212, .15), transparent 34%),
        radial-gradient(circle at 96% 0, rgba(139, 92, 246, .13), transparent 32%),
        linear-gradient(135deg, #f8fbff, #fff);
    border-bottom: 1px solid #e5edfb;
}

.code-lab-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #1d4ed8;
    font-weight: 800;
    font-size: .82rem;
}

.code-lab-run-count {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 10px 14px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #dbeafe;
    color: #475569;
    font-size: .82rem;
}

.code-lab-run-count i {
    font-size: 1.25rem;
    color: #2563eb;
}

.code-lab-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 15px 20px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.code-save-status {
    color: #64748b;
    font-size: .78rem;
}

.code-lab-card.is-saving .code-save-status {
    color: #2563eb;
}

.code-lab-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 610px;
}

.code-editor-panel {
    min-width: 0;
    background: #0f172a;
    border-left: 1px solid #1e293b;
}

.code-tabs {
    display: flex;
    gap: 5px;
    padding: 10px 12px 0;
    background: #0b1220;
    overflow-x: auto;
}

.code-tab {
    border: 0;
    border-radius: 12px 12px 0 0;
    padding: 10px 16px;
    background: transparent;
    color: #94a3b8;
    font-family: "Cairo", sans-serif;
    font-weight: 700;
    white-space: nowrap;
}

.code-tab:hover,
.code-tab.active {
    color: #fff;
    background: #1e293b;
}

.code-editor-wrap {
    display: none;
    height: calc(100% - 53px);
}

.code-editor-wrap.active {
    display: block;
}

.code-editor {
    width: 100%;
    height: 100%;
    min-height: 555px;
    resize: none;
    border: 0;
    outline: 0;
    padding: 20px;
    background: #111827;
    color: #e5e7eb;
    caret-color: #60a5fa;
    font-family: Consolas, "Courier New", monospace;
    font-size: .92rem;
    line-height: 1.75;
    text-align: left;
    tab-size: 4;
}

.code-output-panel {
    min-width: 0;
    display: grid;
    grid-template-rows: auto minmax(330px, 1fr) 185px;
    background: #fff;
}

.code-output-header,
.code-console-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-weight: 800;
}

.code-output-header {
    padding: 11px 15px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.code-preview-frame {
    width: 100%;
    height: 100%;
    min-height: 330px;
    border: 0;
    background: #fff;
}

.code-console {
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #0b1220;
    color: #dbeafe;
    border-top: 1px solid #1e293b;
}

.code-console-header {
    padding: 9px 13px;
    color: #cbd5e1;
    border-bottom: 1px solid #1e293b;
    font-size: .78rem;
}

.code-console-header button {
    border: 0;
    background: transparent;
    color: #93c5fd;
    font-family: "Cairo", sans-serif;
    font-size: .75rem;
}

.code-console-output {
    flex: 1;
    overflow: auto;
    padding: 10px 13px;
    direction: ltr;
    text-align: left;
    font-family: Consolas, monospace;
    font-size: .78rem;
    line-height: 1.6;
}

.console-empty {
    color: #64748b;
}

.console-line {
    display: flex;
    gap: 8px;
    padding: 3px 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.console-icon {
    width: 15px;
    flex-shrink: 0;
    font-weight: 800;
}

.console-error {
    color: #fca5a5;
}

.console-warn {
    color: #fde68a;
}

.console-info {
    color: #93c5fd;
}

.console-log {
    color: #d1fae5;
}

.code-lab-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 18px;
    text-align: center;
    color: #475569;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    font-size: .86rem;
    font-weight: 700;
}

.code-lab-tip i {
    color: #f59e0b;
}

.code-lab-card.is-expanded {
    position: fixed;
    z-index: 1085;
    inset: 10px;
    border-radius: 22px;
    margin: 0 !important;
    overflow: auto;
}

.code-lab-card.is-expanded .code-lab-workspace {
    min-height: calc(100vh - 230px);
}

body:has(.code-lab-card.is-expanded) {
    overflow: hidden;
}

@media (max-width: 1199px) {
    .admin-code-grid {
        grid-template-columns: 1fr;
    }

    .admin-code-editor {
        min-height: 210px;
    }
}

@media (max-width: 991px) {
    .code-lab-workspace {
        grid-template-columns: 1fr;
    }

    .code-editor-panel {
        border-left: 0;
        border-bottom: 1px solid #1e293b;
    }

    .code-editor-wrap,
    .code-editor {
        min-height: 420px;
    }

    .code-output-panel {
        grid-template-rows: auto minmax(390px, 1fr) 170px;
    }
}

@media (max-width: 767px) {
    .code-lab-heading,
    .code-lab-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .code-lab-run-count {
        align-self: flex-start;
    }

    .code-lab-toolbar > div:last-child {
        justify-content: space-between;
    }

    .code-lab-workspace {
        min-height: 0;
    }

    .code-editor-wrap,
    .code-editor {
        min-height: 360px;
    }

    .code-output-panel {
        grid-template-rows: auto 360px 160px;
    }

    .code-lab-card.is-expanded {
        inset: 4px;
        border-radius: 16px;
    }
}


/* Student course roadmap */
.roadmap-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.roadmap-summary > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #fff;
    color: #64748b;
    font-size: .82rem;
}

.roadmap-summary-number {
    font-size: 1.65rem;
    line-height: 1;
    color: #0f172a;
    font-weight: 800;
}

.student-course-roadmap {
    position: relative;
}

.student-course-roadmap::before {
    content: "";
    position: absolute;
    top: 28px;
    bottom: 28px;
    right: 22px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(#93c5fd, #dbeafe);
}

.roadmap-step {
    position: relative;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 18px;
    margin-bottom: 24px;
}

.roadmap-step:last-child {
    margin-bottom: 0;
}

.roadmap-step-marker {
    position: relative;
    z-index: 2;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 5px solid #f8fafc;
    border-radius: 50%;
    background: #dbeafe;
    color: #2563eb;
    box-shadow: 0 0 0 1px #bfdbfe;
}

.roadmap-step.is-available .roadmap-step-marker {
    background: #d1fae5;
    color: #047857;
    box-shadow: 0 0 0 1px #a7f3d0;
}

.roadmap-course-wrap {
    min-width: 0;
}

.roadmap-course-card {
    max-width: 960px;
}

.locked-course-card {
    cursor: default;
    opacity: .94;
}

.locked-course-card:hover {
    transform: none;
}

.course-cover-locked {
    background:
        linear-gradient(135deg, rgba(71, 85, 105, .94), rgba(100, 116, 139, .92), rgba(51, 65, 85, .94));
}

.course-plan-number {
    display: inline-grid;
    place-items: center;
    min-width: 32px;
    min-height: 32px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .88);
    font-size: .72rem;
    font-weight: 800;
    backdrop-filter: blur(5px);
}

.locked-course-overlay-icon {
    position: absolute;
    left: 20px;
    bottom: -9px;
    font-size: 4.8rem;
    color: rgba(255, 255, 255, .12);
}

.locked-course-message {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 13px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.locked-course-message-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 13px;
    background: #fef3c7;
    color: #d97706;
}

.roadmap-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 18px;
    background: #eff6ff;
    color: #1e3a8a;
    border: 1px solid #dbeafe;
}

.roadmap-note > i {
    margin-top: 2px;
    color: #2563eb;
}

.dashboard-roadmap-card {
    height: 100%;
}

.dashboard-roadmap-card .course-cover {
    min-height: 145px;
    padding: 20px;
}

@media (max-width: 767px) {
    .roadmap-summary {
        grid-template-columns: 1fr 1fr;
    }

    .roadmap-summary > div:first-child {
        grid-column: 1 / -1;
    }

    .student-course-roadmap::before {
        right: 17px;
    }

    .roadmap-step {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 12px;
    }

    .roadmap-step-marker {
        width: 36px;
        height: 36px;
        border-width: 4px;
        font-size: .8rem;
    }

    .roadmap-course-card .course-cover {
        min-height: 145px;
        padding: 20px;
    }
}


/* Student locked units roadmap */
.student-unit-locked {
    border-style: dashed;
    border-color: #cbd5e1;
    background: #fbfcfe;
}

.student-unit-locked .unit-header {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
}

.student-unit-locked .unit-header h2 {
    color: #475569;
}

.student-unit-locked-body {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    background:
        radial-gradient(circle at 100% 0, rgba(245, 158, 11, .08), transparent 34%),
        #fff;
}

.student-unit-lock-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 16px;
    background: #fef3c7;
    color: #d97706;
    font-size: 1.15rem;
}

@media (max-width: 576px) {
    .student-unit-locked-body {
        padding: 16px;
    }

    .student-unit-lock-icon {
        width: 40px;
        height: 40px;
        border-radius: 14px;
    }
}


/* CodeStep Question Bank */
.question-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.question-stat-card {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 18px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 12px 32px rgba(30, 64, 175, .05);
}

.question-stat-icon,
.question-editor-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 1.2rem;
}

.question-stat-card strong {
    display: block;
    font-size: 1.45rem;
    line-height: 1.1;
    color: #0f172a;
}

.question-stat-card span:last-child {
    color: #64748b;
    font-size: .78rem;
}

.question-filter-form {
    display: grid;
    grid-template-columns: minmax(190px, 1.35fr) repeat(6, minmax(145px, 1fr));
    gap: 12px;
    align-items: end;
}

.question-filter-actions {
    display: flex;
    gap: 7px;
}

.question-filter-actions .btn {
    flex: 1;
}

.question-bank-list {
    display: grid;
    gap: 14px;
}

.bank-question-card {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 15px;
    padding: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .04);
}

.bank-question-card.is-archived {
    opacity: .66;
    background: #f8fafc;
}

.bank-question-number {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #eff6ff;
    color: #2563eb;
    font-weight: 800;
}

.question-text-preview {
    white-space: pre-line;
    line-height: 1.8;
}

.bank-code-preview {
    max-width: 760px;
    margin: 12px 0 0;
    padding: 14px 16px;
    overflow: auto;
    border-radius: 15px;
    background: #0f172a;
    color: #e2e8f0;
    direction: ltr;
    text-align: left;
    font-size: .82rem;
    line-height: 1.65;
}

.question-path {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    color: #64748b;
    font-size: .78rem;
}

.bank-question-actions {
    min-width: 94px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.bank-question-actions form,
.bank-question-actions .btn {
    width: 100%;
}

.question-type-selector {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.question-type-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.question-type-option span {
    min-height: 86px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px;
    border: 2px solid #e2e8f0;
    border-radius: 18px;
    color: #64748b;
    background: #fff;
    cursor: pointer;
    font-weight: 700;
    transition: .2s ease;
}

.question-type-option span i {
    font-size: 1.35rem;
}

.question-type-option input:checked + span {
    border-color: #60a5fa;
    color: #1d4ed8;
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .08);
}

.question-main-text {
    font-size: 1.05rem;
    line-height: 1.9;
}

.question-answer-panel {
    padding: 18px;
    border: 1px solid #dbeafe;
    border-radius: 20px;
    background: #f8fbff;
}

.question-choice-editor {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 42px;
    gap: 8px;
    align-items: center;
}

.choice-correct-radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.choice-correct-radio span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 2px solid #dbe3ef;
    border-radius: 50%;
    color: transparent;
    background: #fff;
    cursor: pointer;
}

.choice-correct-radio input:checked + span {
    border-color: #10b981;
    background: #d1fae5;
    color: #047857;
}

.true-false-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.true-false-selector input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.true-false-selector span {
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 2px solid #e2e8f0;
    border-radius: 18px;
    background: #fff;
    cursor: pointer;
    font-weight: 800;
}

.true-false-selector input:checked + .answer-true {
    border-color: #10b981;
    background: #ecfdf5;
    color: #047857;
}

.true-false-selector input:checked + .answer-false {
    border-color: #ef4444;
    background: #fef2f2;
    color: #b91c1c;
}

.question-code-editor,
.question-code-answer {
    background: #0f172a;
    color: #e2e8f0;
    border-color: #1e293b;
    font-family: Consolas, "Courier New", monospace;
    text-align: left;
    line-height: 1.7;
}

.question-code-editor:focus,
.question-code-answer:focus {
    background: #0f172a;
    color: #fff;
    border-color: #60a5fa;
}

@media (max-width: 1399px) {
    .question-filter-form {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .question-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .question-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bank-question-card {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .bank-question-actions {
        grid-column: 2;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .bank-question-actions form,
    .bank-question-actions .btn {
        width: auto;
    }
}

@media (max-width: 576px) {
    .question-stat-grid,
    .question-filter-form,
    .question-type-selector {
        grid-template-columns: 1fr;
    }

    .bank-question-card {
        grid-template-columns: 1fr;
        padding: 15px;
    }

    .bank-question-number {
        width: 34px;
        height: 34px;
    }

    .bank-question-actions {
        grid-column: 1;
    }

    .question-choice-editor {
        grid-template-columns: 40px minmax(0, 1fr) 38px;
    }

    .true-false-selector {
        grid-template-columns: 1fr;
    }
}


/* Quick question entry */
.quick-defaults-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.quick-default-item {
    min-width: 0;
    padding: 13px 15px;
    border-radius: 16px;
    background: #eff6ff;
    border: 1px solid #dbeafe;
}

.quick-default-item span {
    display: block;
    color: #64748b;
    font-size: .72rem;
    margin-bottom: 3px;
}

.quick-default-item strong {
    display: block;
    overflow: hidden;
    color: #1e3a8a;
    font-size: .86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-pin-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #dbeafe;
    color: #2563eb;
}

.quick-question-card {
    border: 1px solid rgba(16, 185, 129, .24);
    box-shadow: 0 18px 50px rgba(16, 185, 129, .07);
}

@media (max-width: 991px) {
    .quick-defaults-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quick-default-item:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 576px) {
    .quick-defaults-strip {
        grid-template-columns: 1fr;
    }

    .quick-default-item:first-child {
        grid-column: auto;
    }
}


/* Matching / ordering / essay question types */
.match-pair-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr) 42px;
    gap: 8px;
    align-items: center;
}

.match-arrow {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #2563eb;
    border-radius: 14px;
    background: #dbeafe;
}

.order-item-editor {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 8px;
    align-items: center;
}

.order-item-number {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: #ede9fe;
    color: #6d28d9;
    font-weight: 800;
}

.question-answer-panel[data-question-panel="essay"] {
    background:
        radial-gradient(circle at 100% 0, rgba(245, 158, 11, .08), transparent 32%),
        #fffdf7;
    border-color: #fde68a;
}

@media (max-width: 767px) {
    .match-pair-editor {
        grid-template-columns: minmax(0, 1fr) 38px;
    }

    .match-pair-editor input:first-of-type {
        grid-column: 1;
        grid-row: 1;
    }

    .match-pair-editor input:nth-of-type(2) {
        grid-column: 1;
        grid-row: 2;
    }

    .match-arrow {
        grid-column: 2;
        grid-row: 1;
        width: 38px;
        height: 38px;
    }

    .match-pair-editor .remove-match-pair {
        grid-column: 2;
        grid-row: 2;
    }
}


/* V1.9.4 - quick settings + interactive question preview */
.quick-save-defaults-btn {
    box-shadow: 0 10px 24px rgba(37, 99, 235, .16);
}

.quick-question-actions {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 10px;
}

.question-preview-shell {
    overflow: hidden;
    border: 1px solid #bfdbfe;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 20px 56px rgba(30, 64, 175, .10);
    scroll-margin-top: 95px;
}

.question-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    border-bottom: 1px solid #dbeafe;
    background:
        radial-gradient(circle at 100% 0, rgba(59, 130, 246, .10), transparent 35%),
        #f8fbff;
}

.question-preview-body {
    padding: 22px;
}

.preview-question-heading {
    margin-bottom: 22px;
}

.preview-question-heading h3 {
    white-space: pre-line;
    line-height: 1.9;
}

.preview-answer-list {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.preview-choice {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 15px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
}

.preview-choice:hover {
    border-color: #93c5fd;
    background: #f8fbff;
}

.preview-choice input {
    margin-top: 5px;
}

.preview-true-false {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    max-width: 560px;
    margin-bottom: 18px;
}

.preview-tf-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.preview-tf-option span {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 17px;
    background: #fff;
    cursor: pointer;
    font-weight: 800;
}

.preview-tf-option input:checked + span {
    border-color: #60a5fa;
    background: #eff6ff;
    color: #1d4ed8;
}

.preview-code {
    margin: 0 0 14px;
    padding: 18px;
    overflow: auto;
    border-radius: 18px;
    background: #0f172a;
    color: #e2e8f0;
    direction: ltr;
    text-align: left;
    line-height: 1.75;
}

.preview-code-answer {
    max-width: 680px;
    font-family: Consolas, "Courier New", monospace;
    direction: ltr;
    text-align: left;
}

.preview-matching-list {
    display: grid;
    gap: 10px;
    max-width: 850px;
    margin-bottom: 18px;
}

.preview-match-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, .8fr);
    gap: 12px;
    align-items: center;
}

.preview-match-left {
    padding: 12px 14px;
    border-radius: 15px;
    background: #eff6ff;
    color: #1e3a8a;
    font-weight: 700;
}

.preview-order-list {
    display: grid;
    gap: 9px;
    max-width: 780px;
    margin-bottom: 18px;
}

.preview-order-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
}

.preview-order-number {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #ede9fe;
    color: #6d28d9;
    font-weight: 800;
}

.preview-order-text {
    line-height: 1.7;
}

.preview-order-controls {
    display: flex;
    gap: 5px;
}

.preview-essay-answer {
    max-width: 850px;
}

.preview-result {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    max-width: 850px;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 15px;
    font-weight: 700;
}

.preview-result.is-info {
    background: #eff6ff;
    color: #1e40af;
}

.preview-result.is-correct {
    background: #ecfdf5;
    color: #047857;
}

.preview-result.is-wrong {
    background: #fef2f2;
    color: #b91c1c;
}

@media (max-width: 767px) {
    .quick-question-actions {
        grid-template-columns: 1fr;
    }

    .question-preview-header {
        flex-direction: column;
    }

    .preview-true-false {
        grid-template-columns: 1fr;
    }

    .preview-match-row {
        grid-template-columns: 1fr;
    }

    .preview-order-row {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .preview-order-controls {
        grid-column: 2;
    }
}


/* V1.9.5 - platform text settings */
.platform-setting-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 17px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 1.2rem;
}

.platform-text-preview {
    padding: 18px;
    border: 1px dashed #bfdbfe;
    border-radius: 18px;
    background: #f8fbff;
}

.platform-text-preview .preview-result {
    margin-bottom: 0;
}


/* V1.9.6 - multi select questions */
.question-answer-panel[data-question-panel="multi_select"] {
    background:
        radial-gradient(circle at 100% 0, rgba(16, 185, 129, .08), transparent 32%),
        #f8fffc;
    border-color: #a7f3d0;
}

.question-answer-panel[data-question-panel="multi_select"] .choice-correct-radio span {
    border-radius: 12px;
}

.question-answer-panel[data-question-panel="multi_select"] .choice-correct-radio input:checked + span {
    border-color: #10b981;
    background: #d1fae5;
    color: #047857;
}

.preview-choice input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}


/* V1.9.6.1 - separate add-choice controls */
.question-answer-panel[data-question-panel="multi_select"] #addChoiceMulti {
    border-color: #a7f3d0 !important;
    background: #ecfdf5;
    color: #047857;
}

.question-answer-panel[data-question-panel="mcq"] #addChoiceMcq {
    border-color: #bfdbfe !important;
    background: #eff6ff;
    color: #1d4ed8;
}


/* V1.9.7 - image questions */
.question-images-editor {
    padding: 18px;
    border: 1px solid #dbeafe;
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0, rgba(59, 130, 246, .07), transparent 34%),
        #fbfdff;
}

.question-image-upload-zone {
    min-height: 108px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 18px;
    border: 2px dashed #93c5fd;
    border-radius: 18px;
    background: #fff;
    color: #1d4ed8;
    text-align: center;
    cursor: pointer;
}

.question-image-upload-zone:hover {
    background: #eff6ff;
}

.question-image-upload-zone > i {
    font-size: 1.65rem;
}

.question-image-upload-zone span {
    color: #64748b;
    font-size: .78rem;
}

.question-existing-images {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.question-existing-image-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #dbeafe;
    border-radius: 16px;
    background: #fff;
}

.question-existing-image-card img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: #f8fafc;
}

.question-image-label,
.preview-question-image-label {
    position: absolute;
    z-index: 2;
    top: 8px;
    right: 8px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #0f5bb7;
    color: #fff;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(15, 91, 183, .18);
}

.question-image-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    border-top: 1px solid #e2e8f0;
    color: #b91c1c;
    font-size: .78rem;
    cursor: pointer;
}

.question-existing-image-card.is-marked-for-removal {
    opacity: .42;
}

.question-existing-image-card.is-marked-for-removal::after {
    content: "سيتم الحذف";
    position: absolute;
    inset: 0 0 37px;
    z-index: 3;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .74);
    color: #b91c1c;
    font-weight: 800;
}

.preview-question-images {
    display: grid;
    gap: 14px;
    margin: 0 0 24px;
}

.preview-question-images-1 {
    grid-template-columns: minmax(0, 560px);
    justify-content: center;
}

.preview-question-images-2,
.preview-question-images-3,
.preview-question-images-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.preview-question-image-card {
    position: relative;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 2px solid #dbeafe;
    border-radius: 18px;
    background: #fff;
}

.preview-question-image-card img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: #f8fafc;
}

@media (max-width: 767px) {
    .question-existing-images {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .preview-question-images-2,
    .preview-question-images-3,
    .preview-question-images-4 {
        grid-template-columns: 1fr;
    }
}


/* V1.10 - Training & Mastery */
.assessment-narrow { max-width: 980px; }

.assessment-admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.assessment-admin-card,
.mastery-admin-item,
.student-practice-card,
.student-mastery-item,
.manual-grade-item,
.manual-grade-card,
.mastery-start-card,
.mastery-progress-card {
    border: 1px solid #dbeafe;
    border-radius: 22px;
    background: #fff;
}

.assessment-admin-card,
.mastery-admin-item { padding: 20px; }

.assessment-admin-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    color: #64748b;
    font-size: .82rem;
}

.assessment-bank-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: hidden;
    border: 1px solid #dbeafe;
    border-radius: 22px;
    background: #fff;
}

.assessment-bank-strip > div { padding: 18px; text-align: center; }
.assessment-bank-strip > div + div { border-right: 1px solid #e2e8f0; }
.assessment-bank-strip strong { display: block; font-size: 1.5rem; color: #1d4ed8; }
.assessment-bank-strip span { color: #64748b; font-size: .78rem; }

.assessment-section-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 18px;
    font-size: 1.25rem;
}

.assessment-section-icon.practice { background: #fff7ed; color: #ea580c; }
.assessment-section-icon.mastery { background: #eff6ff; color: #2563eb; }

.assessment-section-icon.large {
    width: 70px;
    height: 70px;
    margin-inline: auto;
    font-size: 1.7rem;
}

.assessment-question-card {
    padding: 22px;
    border: 1px solid #dbeafe;
    border-radius: 24px;
    background: #fff;
}

.assessment-question-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.assessment-question-number {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #2563eb;
    color: #fff;
    font-weight: 800;
}

.assessment-question-text {
    margin: 0 0 20px;
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 2;
}

.assessment-question-images {
    display: grid;
    gap: 12px;
    margin-bottom: 22px;
}

.assessment-question-images.count-1 {
    grid-template-columns: minmax(0, 560px);
    justify-content: center;
}

.assessment-question-images.count-2,
.assessment-question-images.count-3,
.assessment-question-images.count-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.assessment-question-images figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    border: 2px solid #dbeafe;
    border-radius: 18px;
    background: #f8fafc;
}

.assessment-question-images figure > span {
    position: absolute;
    top: 9px;
    right: 9px;
    z-index: 2;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #0f5bb7;
    color: #fff;
    font-weight: 800;
}

.assessment-question-images img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
}

.assessment-options { display: grid; gap: 10px; }

.assessment-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 15px;
    border: 1px solid #e2e8f0;
    border-radius: 17px;
    cursor: pointer;
}

.assessment-option:hover { border-color: #93c5fd; background: #f8fbff; }
.assessment-option input { width: 19px; height: 19px; margin-top: 3px; flex-shrink: 0; }
.assessment-option:has(input:checked) { border-color: #60a5fa; background: #eff6ff; }

.assessment-code {
    padding: 18px;
    overflow: auto;
    border-radius: 18px;
    background: #0f172a;
    color: #e2e8f0;
    direction: ltr;
    text-align: left;
}

.assessment-code-answer {
    direction: ltr;
    text-align: left;
    font-family: Consolas, "Courier New", monospace;
}

.assessment-matching { display: grid; gap: 10px; }

.assessment-match-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, .8fr);
    align-items: center;
    gap: 12px;
}

.assessment-match-left {
    padding: 13px 14px;
    border-radius: 15px;
    background: #eff6ff;
    color: #1e3a8a;
    font-weight: 700;
}

.assessment-order-list { display: grid; gap: 9px; }

.assessment-order-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
}

.assessment-order-index {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #ede9fe;
    color: #6d28d9;
    font-weight: 800;
}

.assessment-order-actions { display: flex; gap: 5px; }
.assessment-order-actions .btn { width: 38px; height: 38px; padding: 0; }

.assessment-progress-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border: 1px solid #dbeafe;
    border-radius: 18px;
    background: #f8fbff;
    font-weight: 700;
}

.assessment-countdown {
    min-width: 92px;
    padding: 8px 13px;
    border-radius: 14px;
    background: #0f172a;
    color: #fff;
    direction: ltr;
    text-align: center;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.assessment-countdown.large { min-width: 125px; font-size: 1.35rem; }
.assessment-countdown.is-ending { background: #b91c1c; }

.practice-feedback {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 16px;
    padding: 18px;
    border-radius: 20px;
}

.practice-feedback.correct { background: #ecfdf5; color: #065f46; }
.practice-feedback.wrong { background: #fff7ed; color: #9a3412; }

.practice-feedback-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 15px;
    background: rgba(255,255,255,.7);
    font-size: 1.2rem;
}

.practice-result-card,
.mastery-result-card {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 26px;
    border: 1px solid #dbeafe;
    border-radius: 26px;
    background: #fff;
}

.practice-result-card.pass,
.mastery-result-card.passed { border-color: #a7f3d0; background: #f7fffb; }

.practice-result-card.near,
.mastery-result-card.pending { border-color: #bfdbfe; background: #f8fbff; }

.practice-result-card.low,
.mastery-result-card.failed { border-color: #fed7aa; background: #fffaf5; }

.practice-result-ring {
    width: 116px;
    height: 116px;
    display: grid;
    place-items: center;
    align-content: center;
    flex-shrink: 0;
    border: 9px solid #dbeafe;
    border-radius: 50%;
    background: #fff;
}

.practice-result-ring strong { font-size: 1.55rem; color: #1d4ed8; }
.practice-result-ring span { font-size: .72rem; color: #64748b; }

.mastery-start-card { padding: 30px; text-align: center; }

.mastery-start-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 24px;
    overflow: hidden;
    border: 1px solid #dbeafe;
    border-radius: 18px;
}

.mastery-start-stats > div { padding: 15px 8px; }
.mastery-start-stats > div + div { border-right: 1px solid #e2e8f0; }
.mastery-start-stats strong, .mastery-start-stats span { display: block; }
.mastery-start-stats strong { color: #1d4ed8; font-size: 1.2rem; }
.mastery-start-stats span { color: #64748b; font-size: .72rem; }

.mastery-submit-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 18px;
    border: 1px solid #bbf7d0;
    border-radius: 20px;
    background: #f0fdf4;
}

.student-practice-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
}

.mastery-lesson-list {
    padding: 20px;
    border: 1px solid #dbeafe;
    border-radius: 22px;
    background: #f8fbff;
}

.student-mastery-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
}

.student-mastery-item + .student-mastery-item { margin-top: 9px; }

.mastery-step {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 13px;
    background: #e2e8f0;
    color: #475569;
    font-weight: 800;
}

.mastery-step.passed { background: #dcfce7; color: #15803d; }
.mastery-progress-card { padding: 20px; }

.mastery-progress-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid #eef2f7;
    font-size: .85rem;
}

.mastery-dot {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #cbd5e1;
}

.mastery-dot.passed { background: #22c55e; }

.lesson-unlocked-celebration {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    border: 1px solid #86efac;
    border-radius: 22px;
    background: #f0fdf4;
    color: #166534;
}

.lesson-unlocked-celebration > i { font-size: 1.7rem; }
.lesson-unlocked-celebration .btn { display: block; width: fit-content; }

.lesson-row-locked { opacity: .75; cursor: not-allowed; }
.lesson-number.locked { background: #e2e8f0; color: #64748b; }

.manual-grade-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
}

.manual-grade-card { padding: 22px; }

.manual-answer-box,
.manual-reference-box {
    margin-top: 14px;
    padding: 15px;
    border-radius: 17px;
}

.manual-answer-box { background: #f8fafc; border: 1px solid #e2e8f0; }
.manual-reference-box { height: 100%; background: #eff6ff; border: 1px solid #dbeafe; }

.manual-answer-box span,
.manual-reference-box strong {
    display: block;
    margin-bottom: 7px;
    color: #1d4ed8;
    font-size: .78rem;
    font-weight: 800;
}

.manual-answer-box p,
.manual-reference-box p { margin: 0; line-height: 1.8; }

.mastery-result-icon {
    width: 84px;
    height: 84px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 25px;
    background: #fef3c7;
    color: #b45309;
    font-size: 2rem;
}

@media (max-width: 767px) {
    .assessment-admin-grid { grid-template-columns: 1fr; }
    .assessment-bank-strip { grid-template-columns: 1fr; }
    .assessment-bank-strip > div + div { border-right: 0; border-top: 1px solid #e2e8f0; }

    .assessment-question-images.count-2,
    .assessment-question-images.count-3,
    .assessment-question-images.count-4 { grid-template-columns: 1fr; }

    .assessment-match-row { grid-template-columns: 1fr; }

    .assessment-order-item { grid-template-columns: 36px minmax(0, 1fr); }
    .assessment-order-actions { grid-column: 2; }

    .practice-result-card,
    .mastery-result-card,
    .student-practice-card,
    .student-mastery-item,
    .manual-grade-item,
    .mastery-submit-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .practice-result-ring { margin-inline: auto; }

    .mastery-start-stats { grid-template-columns: repeat(2, 1fr); }
    .mastery-start-stats > div + div { border-right: 0; }
    .mastery-start-stats > div:nth-child(even) { border-right: 1px solid #e2e8f0; }
    .mastery-start-stats > div:nth-child(n+3) { border-top: 1px solid #e2e8f0; }
}


/* V1.10.1 - Student Tracking */
.tracking-summary-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: hidden;
    border: 1px solid #dbeafe;
    border-radius: 22px;
    background: #fff;
}

.tracking-summary-strip > div {
    padding: 18px;
    text-align: center;
}

.tracking-summary-strip > div + div {
    border-right: 1px solid #e2e8f0;
}

.tracking-summary-strip strong {
    display: block;
    color: #1d4ed8;
    font-size: 1.55rem;
}

.tracking-summary-strip span {
    color: #64748b;
    font-size: .78rem;
}

.student-tracking-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.student-tracking-card {
    min-width: 0;
    padding: 20px;
    border: 1px solid #dbeafe;
    border-radius: 22px;
    background: #fff;
}

.tracking-avatar {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: 16px;
    background: #e0ecff;
    color: #1d4ed8;
    font-weight: 800;
}

.tracking-avatar.large {
    width: 68px;
    height: 68px;
    border-radius: 22px;
    font-size: 1.25rem;
}

.tracking-groups {
    padding: 9px 11px;
    border-radius: 13px;
    background: #f8fafc;
    color: #64748b;
    font-size: .78rem;
}

.tracking-mini-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 15px;
}

.tracking-mini-stats > div {
    padding: 10px 5px;
    text-align: center;
}

.tracking-mini-stats > div + div {
    border-right: 1px solid #e2e8f0;
}

.tracking-mini-stats strong,
.tracking-mini-stats span {
    display: block;
}

.tracking-mini-stats strong {
    color: #1d4ed8;
    font-size: 1rem;
}

.tracking-mini-stats span {
    margin-top: 2px;
    color: #64748b;
    font-size: .67rem;
}

.tracking-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.tracking-kpi-grid article {
    min-width: 0;
    padding: 17px 10px;
    border: 1px solid #dbeafe;
    border-radius: 19px;
    background: #fff;
    text-align: center;
}

.tracking-kpi-grid i {
    display: block;
    margin-bottom: 7px;
    color: #3b82f6;
    font-size: 1.25rem;
}

.tracking-kpi-grid strong,
.tracking-kpi-grid span {
    display: block;
}

.tracking-kpi-grid strong {
    color: #0f172a;
    font-size: 1.2rem;
}

.tracking-kpi-grid span {
    margin-top: 3px;
    color: #64748b;
    font-size: .7rem;
}

.tracking-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 17px;
    border: 1px solid #bae6fd;
    border-radius: 18px;
    background: #f0f9ff;
    color: #0c4a6e;
    font-size: .85rem;
}

.tracking-note > i {
    flex-shrink: 0;
    margin-top: 2px;
}

.tracking-table-wrap {
    overflow-x: auto;
}

.tracking-table {
    min-width: 900px;
    margin-bottom: 0;
}

.tracking-table th {
    color: #475569;
    font-size: .76rem;
    white-space: nowrap;
}

.tracking-table td {
    padding-block: 13px;
    font-size: .82rem;
}

.tracking-score {
    display: inline-flex;
    min-width: 64px;
    justify-content: center;
    padding: 6px 9px;
    border-radius: 11px;
    font-weight: 800;
}

.tracking-score.passed {
    background: #dcfce7;
    color: #166534;
}

.tracking-score.failed {
    background: #ffedd5;
    color: #9a3412;
}

.min-w-0 {
    min-width: 0;
}

@media (max-width: 1199px) {
    .student-tracking-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tracking-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .tracking-summary-strip {
        grid-template-columns: 1fr;
    }

    .tracking-summary-strip > div + div {
        border-right: 0;
        border-top: 1px solid #e2e8f0;
    }

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

    .tracking-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* V1.11 Professional Lesson Video Player */
.codestep-video-card{overflow:hidden;border:1px solid #dbeafe;border-radius:26px;background:#fff}
.codestep-video-frame{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:radial-gradient(circle at 25% 20%,rgba(59,130,246,.24),transparent 32%),linear-gradient(135deg,#0f172a,#172554)}
.codestep-video-cover{position:absolute;inset:0;width:100%;height:100%;padding:0;overflow:hidden;border:0;background:transparent;color:#fff;text-align:right;cursor:pointer}
.codestep-video-cover:focus-visible{outline:4px solid rgba(59,130,246,.72);outline-offset:-5px}.codestep-video-cover:disabled{cursor:wait}
.codestep-video-thumbnail,.codestep-video-placeholder,.codestep-video-shade{position:absolute;inset:0;width:100%;height:100%}.codestep-video-thumbnail{object-fit:cover;transition:transform .35s ease}.codestep-video-cover:hover .codestep-video-thumbnail{transform:scale(1.025)}
.codestep-video-placeholder{display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,rgba(96,165,250,.26),transparent 22%),linear-gradient(135deg,#111827,#1e3a8a);color:rgba(255,255,255,.75);font-size:clamp(3rem,10vw,7rem)}
.codestep-video-shade{background:linear-gradient(to top,rgba(2,6,23,.94) 0%,rgba(2,6,23,.52) 38%,rgba(2,6,23,.16) 72%),linear-gradient(to left,rgba(37,99,235,.18),transparent 45%)}
.codestep-video-brand,.codestep-video-duration{position:absolute;z-index:3;top:20px;display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(15,23,42,.55);backdrop-filter:blur(9px);font-size:.74rem;font-weight:800}.codestep-video-brand{right:20px}.codestep-video-duration{left:20px;direction:ltr;font-variant-numeric:tabular-nums}
.codestep-video-play{position:absolute;z-index:4;top:50%;left:50%;width:clamp(68px,10vw,94px);height:clamp(68px,10vw,94px);display:grid;place-items:center;border:2px solid rgba(255,255,255,.75);border-radius:50%;background:rgba(37,99,235,.94);box-shadow:0 18px 45px rgba(0,0,0,.28),0 0 0 10px rgba(255,255,255,.08);transform:translate(-50%,-50%);transition:transform .2s ease,box-shadow .2s ease}.codestep-video-play i{margin-left:4px;font-size:clamp(1.9rem,5vw,2.8rem)}.codestep-video-cover:hover .codestep-video-play{transform:translate(-50%,-50%) scale(1.06);box-shadow:0 20px 48px rgba(0,0,0,.32),0 0 0 14px rgba(255,255,255,.1)}
.codestep-video-caption{position:absolute;z-index:3;right:24px;bottom:24px;left:24px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}.codestep-video-caption-label{color:#bfdbfe;font-size:.73rem;font-weight:800}.codestep-video-caption strong{max-width:780px;font-size:clamp(1.08rem,2.6vw,1.65rem);line-height:1.55}.codestep-video-caption small{color:rgba(255,255,255,.72);font-size:.75rem}
.codestep-video-iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}.codestep-video-card.is-loading .codestep-video-frame::after{content:"";position:absolute;z-index:8;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border:4px solid rgba(255,255,255,.28);border-top-color:#fff;border-radius:50%;animation:codestep-video-spin .8s linear infinite}@keyframes codestep-video-spin{to{transform:rotate(360deg)}}
.codestep-video-meta{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 18px;border-top:1px solid #e2e8f0}.codestep-video-meta>div{min-width:0;display:flex;align-items:center;gap:11px}.codestep-video-meta-icon{width:40px;height:40px;display:grid;place-items:center;flex-shrink:0;border-radius:14px;background:#eff6ff;color:#2563eb}.codestep-video-meta strong,.codestep-video-meta span{display:block}.codestep-video-meta strong{overflow:hidden;color:#0f172a;font-size:.85rem;text-overflow:ellipsis;white-space:nowrap}.codestep-video-meta>div>div>span{margin-top:2px;color:#64748b;font-size:.7rem}.codestep-video-status{padding:12px 16px;border-top:1px solid #fed7aa;background:#fff7ed;color:#9a3412;font-size:.8rem;font-weight:700}
.lesson-learning-summary{display:flex;align-items:flex-start;gap:14px;padding:17px 18px;border:1px solid #bfdbfe;border-radius:20px;background:#f8fbff}.lesson-learning-summary-icon{width:44px;height:44px;display:grid;place-items:center;flex-shrink:0;border-radius:15px;background:#fef3c7;color:#d97706}.lesson-learning-summary strong{display:block;margin-bottom:4px;color:#1e3a8a;font-size:.82rem}.lesson-learning-summary p{color:#334155;line-height:1.85}
.lesson-written-content{padding:0;overflow:hidden}.lesson-written-heading{display:flex;align-items:center;gap:12px;padding:17px 20px;border-bottom:1px solid #e2e8f0;background:#f8fafc}.lesson-written-heading>span{width:42px;height:42px;display:grid;place-items:center;flex-shrink:0;border-radius:14px;background:#e0ecff;color:#2563eb}.lesson-written-heading small{display:block;color:#2563eb;font-size:.7rem;font-weight:800}.lesson-written-heading h2{margin:2px 0 0;color:#0f172a;font-size:.96rem;font-weight:800}.lesson-written-body{padding:22px;color:#334155;font-size:1rem;line-height:2.05}
.practice-feedback.retry{border:1px solid #bfdbfe;background:#eff6ff;color:#1e3a8a}.practice-correct-answer{padding:13px 14px;border:1px solid #bbf7d0;border-radius:16px;background:#f0fdf4;color:#166534}.practice-correct-answer span{display:flex;align-items:center;gap:7px;margin-bottom:7px;font-size:.74rem;font-weight:800}.practice-correct-answer strong{display:block;line-height:1.8}
@media (max-width:767px){.codestep-video-card{border-radius:20px}.codestep-video-brand,.codestep-video-duration{top:11px;padding:6px 9px;font-size:.64rem}.codestep-video-brand{right:11px}.codestep-video-duration{left:11px}.codestep-video-caption{right:14px;bottom:13px;left:14px}.codestep-video-caption small{display:none}.codestep-video-meta{align-items:flex-start;padding:13px 14px}.codestep-video-meta>.badge-soft-primary{display:none}.lesson-written-body{padding:17px;font-size:.94rem}}
@media (prefers-reduced-motion:reduce){.codestep-video-thumbnail,.codestep-video-play{transition:none}.codestep-video-card.is-loading .codestep-video-frame::after{animation-duration:1.5s}}