/* =========================
   ROOT / THEME
========================= */
:root {
    --bg-main: #eef2fb;
    --bg-soft: #edf0fb;
    --bg-card: #ffffff;

    --text-main: #17153a;
    --text-dark: #0b1220;
    --text-muted: #5b6478;

    --border-color: #d7dfeb;

    --primary: #5b4cf0;
    --primary-dark: #4635d8;
    --secondary: #7447ee;
    --accent-pink: #d946a1;
    --accent-blue: #2ea8da;

    --gradient-main: linear-gradient(135deg, #4d3ff0 0%, #6b46ea 50%, #d946a1 100%);
    --gradient-soft: linear-gradient(135deg, rgba(77, 63, 240, 0.10) 0%, rgba(217, 70, 161, 0.10) 100%);

    --shadow-sm: 0 8px 24px rgba(2, 6, 23, 0.10);
    --shadow-md: 0 12px 32px rgba(2, 6, 23, 0.13);
    --shadow-lg: 0 16px 40px rgba(2, 6, 23, 0.16);

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
}

/* =========================
   GLOBAL
========================= */
html, body {
    min-height: 100%;
}

body {
    background:
        radial-gradient(circle at top left, rgba(91, 76, 240, 0.16), transparent 22%),
        radial-gradient(circle at top right, rgba(217, 70, 161, 0.13), transparent 20%),
        radial-gradient(circle at bottom right, rgba(46, 168, 218, 0.10), transparent 18%),
        linear-gradient(180deg, #cfd3db 0%, #f3f5fb 100%);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-dark);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}

.page-main {
    flex: 1;
}

.page-wrapper {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.page-title {
    margin: 0;
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.02em;
}

.page-subtitle {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.section-title {
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 18px;
    color: var(--text-dark);
}

.card-box {
    position: relative;
    background: rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius-md);
    padding: 24px;
    box-shadow:
        0 10px 30px rgba(2, 6, 23, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.38);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
    overflow: hidden;
}

.card-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.28), transparent 40%),
        radial-gradient(circle at top right, rgba(91, 76, 240, 0.08), transparent 28%);
    pointer-events: none;
    z-index: 0;
}

.card-box > * {
    position: relative;
    z-index: 1;
}

.card-box:hover {
    box-shadow:
        0 16px 40px rgba(2, 6, 23, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
    border-color: rgba(255, 255, 255, 0.52);
}

.brand-logo {
    height: 52px;
    width: auto;
    display: block;
}

/* =========================
   HEADER
========================= */
.site-topbar {
    background: linear-gradient(135deg, #4338ca 0%, #5b21b6 48%, #be185d 100%);
    color: #fff;
    padding: 14px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    box-shadow: 0 10px 24px rgba(67, 56, 202, 0.24);
}

.site-topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.site-topbar-title {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.site-topbar-subtitle {
    font-size: 0.84rem;
    color: rgba(255,255,255,0.88);
    margin: 2px 0 0 0;
}

.site-topbar-right {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* =========================
   H5 ICON SUPPORT
========================= */
h5 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    color: var(--text-dark);
}

h5::before {
    content: "";
    width: 14px;
    height: 18px;
    flex-shrink: 0;
    background-image: url('../images/logoo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* =========================
   BUTTONS
========================= */
.btn-custom {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 12px;
    border: none;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.22s ease;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.btn-custom:hover {
    transform: translateY(-1px);
}

.btn-primary-custom {
    background: var(--gradient-main);
    color: #fff;
}

.btn-primary-custom:hover {
    color: #fff;
    box-shadow: 0 12px 24px rgba(109, 94, 252, 0.24);
}

.btn-secondary-custom {
    background: #eef2ff;
    color: #312e81;
}

.btn-secondary-custom:hover {
    background: #e0e7ff;
    color: #312e81;
}

.btn-danger-custom {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
}

.btn-danger-custom:hover {
    color: #fff;
}

.btn-warning-custom {
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    color: #fff;
}

.btn-warning-custom:hover {
    color: #fff;
}

.btn-dark-custom {
    background: linear-gradient(135deg, #334155, #0f172a);
    color: #fff;
}

.btn-dark-custom:hover {
    color: #fff;
}

.btn-sm-custom {
    padding: 7px 12px;
    font-size: 0.85rem;
    border-radius: 10px;
}

/* =========================
   ALERTS
========================= */
.alert-custom {
    padding: 14px 16px;
    border-radius: 12px;
    margin-bottom: 18px;
    font-size: 0.95rem;
    border: 1px solid transparent;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
}

.alert-success-custom {
    background: #ecfdf3;
    color: #166534;
    border-color: #bbf7d0;
}

.alert-danger-custom {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}

/* =========================
   DASHBOARD CARDS
========================= */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.dashboard-card {
    position: relative;
    background: rgba(255, 255, 255, 0.58);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 22px;
    padding: 24px;
    box-shadow:
        0 12px 34px rgba(15, 23, 42, 0.10),
        inset 0 1px 0 rgba(255,255,255,0.48);
    border: 1px solid rgba(255, 255, 255, 0.42);
    transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
    overflow: hidden;
}

.dashboard-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.22), transparent 45%),
        radial-gradient(circle at top right, rgba(91, 76, 240, 0.10), transparent 25%),
        radial-gradient(circle at bottom left, rgba(217, 70, 161, 0.08), transparent 24%);
    opacity: 1;
    pointer-events: none;
}

.dashboard-card:hover {
    transform: translateY(-5px);
    box-shadow:
        0 18px 44px rgba(15, 23, 42, 0.16),
        inset 0 1px 0 rgba(255,255,255,0.58);
    border-color: rgba(255,255,255,0.56);
}

.dashboard-card > * {
    position: relative;
    z-index: 1;
}

.dashboard-card h5 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--text-dark);
}

.dashboard-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    min-height: 44px;
    margin-bottom: 18px;
    line-height: 1.6;
}

/* =========================
   TABLE
========================= */
.table-wrapper {
    overflow-x: auto;
    border-radius: 14px;
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    background: #fff;
}

.custom-table thead {
    background: linear-gradient(135deg, #e5e7ff 0%, #f8e8f3 100%);
}

.custom-table th,
.custom-table td {
    padding: 14px 12px;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
    vertical-align: middle;
}

.custom-table th {
    font-weight: 800;
    color: #4338ca;
    white-space: nowrap;
}

.custom-table tbody tr:hover {
    background: #fafaff;
}

.action-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* =========================
   BADGES
========================= */
.badge-custom {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
}

.badge-active {
    background: #dcfce7;
    color: #166534;
}

.badge-suspended {
    background: #fdf2f8;
    color: #be185d;
}

/* =========================
   FORMS
========================= */
.form-card {
    max-width: 1100px;
    margin: 0 auto;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.form-group-full {
    grid-column: 1 / -1;
    min-width: 0;
}

.form-grid > div {
    min-width: 0;
}

.form-label-custom {
    display: block;
    margin-bottom: 7px;
    font-weight: 700;
    color: #334155;
}

.form-control-custom {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    font-size: 0.95rem;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-sizing: border-box;
}

.form-control-custom:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(109, 94, 252, 0.12);
    background: #fff;
}

.form-actions {
    margin-top: 22px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.form-helper-text {
    display: block;
    margin-top: 8px;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* =========================
   VALIDATION
========================= */
.validation-box {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 14px 16px;
    border-radius: 12px;
    margin-bottom: 18px;
}

.validation-box ul {
    margin: 0;
    padding-left: 18px;
}

/* =========================
   STUDENT COURSE PLAYER
========================= */
.player-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    min-height: 100vh;
}

.sidebar {
    border-right: 1px solid #ddd;
    padding: 20px;
    overflow: auto;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(10px);
}

.content {
    padding: 30px;
    overflow: auto;
    background:
        radial-gradient(circle at top right, rgba(236, 72, 153, 0.06), transparent 18%),
        radial-gradient(circle at top left, rgba(109, 94, 252, 0.08), transparent 22%),
        #f8fafc;
}

.module-title {
    font-weight: 800;
    margin-top: 20px;
    color: var(--text-dark);
}

.item-link {
    display: block;
    padding: 10px 12px;
    margin: 5px 0;
    border-radius: 10px;
    cursor: pointer;
    background: #f8fafc;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    color: #1e293b;
}

.item-link:hover {
    background: #ece8ff;
    border-color: #c4b5fd;
}

.item-link.active {
    background: linear-gradient(135deg, #e6e0ff 0%, #f8dff0 100%);
    border-color: #a78bfa;
    color: #312e81;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(91, 76, 240, 0.18);
}

.item-link.done {
    opacity: 0.96;
}

.item-link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.item-link-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.item-link-type {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.item-link-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-status-mark {
    font-size: 0.95rem;
    flex-shrink: 0;
}

/* =========================
   STUDENT QUIZ ATTEMPT
========================= */
.quiz-container {
    max-width: 1480px;
    margin: 30px auto;
    padding: 0 20px;
}

.quiz-card {
    background: rgba(255,255,255,0.96);
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
    padding: 24px;
    margin-bottom: 20px;
}

.quiz-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}


.quiz-result-box {
    background: rgba(255,255,255,0.96);
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
    padding: 24px;
    margin-bottom: 20px;
}

.quiz-result-title {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.quiz-meta-line {
    margin: 6px 0;
    color: #334155;
}

.question-block {
    border-top: 1px solid #e2e8f0;
    padding-top: 18px;
    margin-top: 18px;
}

.question-number {
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--text-dark);
}

.group-title {
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.question-text-main {
    line-height: 1.7;
    color: #1e293b;
}

.question-points {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 700;
}

.question-instruction-text {
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, #eef2ff 0%, #fdf2f8 100%);
    border: 1px solid #ddd6fe;
    color: #334155;
    line-height: 1.65;
}

.choice-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
}

.blank-line {
    margin: 8px 0;
}

.fill-blank-stack {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.shared-media {
    margin: 15px 0;
}

.shared-media img,
.question-media-img {
    max-width: 100%;
    border-radius: 12px;
    margin-top: 10px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.question-inline-image,
.standalone-question-image {
    margin-top: 10px;
}

.question-inline-image img,
.standalone-question-image img {
    max-width: 100%;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    display: block;
}

.standalone-audio-wrap audio,
.question-audio-wrap audio {
    width: 100%;
    margin-top: 10px;
}

/* =========================
   AUDIO RECORDER
========================= */
.recorder-box {
    background: linear-gradient(135deg, #fafaff 0%, #fff7fb 100%);
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px;
    margin-top: 10px;
}

.recorder-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    margin-bottom: 12px;
    color: #334155;
}

.recorder-status.recording {
    color: #b91c1c;
}

.rec-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #94a3b8;
    display: inline-block;
}

.recorder-status.recording .rec-dot {
    background: #dc2626;
    animation: recPulse 1s infinite;
}

@keyframes recPulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.25); opacity: 0.55; }
    100% { transform: scale(1); opacity: 1; }
}

.recorder-timer {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 12px;
}

.recorder-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.recorder-preview {
    margin-top: 10px;
}

.recorder-help {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 8px;
}

.recorder-actions .btn-custom:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.recorder-preview audio {
    width: 100%;
    display: block;
}

.recorder-file-input {
    margin-top: 12px;
}

/* =========================
   SMART STUDENT LESSON VIEWER
========================= */
.lesson-shell {
    background: rgba(255,255,255,0.96);
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 28px;
    animation: lessonFadeUp 0.45s ease;
}

@keyframes lessonFadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lesson-top {
    margin-bottom: 20px;
}

.lesson-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.lesson-subtitle {
    color: var(--text-muted);
    margin: 0;
    font-size: 0.98rem;
}

.lesson-grid {
    display: grid;
    grid-template-columns: minmax(320px, 1.2fr) minmax(280px, 0.9fr);
    gap: 24px;
    align-items: start;
}

.lesson-grid.no-text {
    grid-template-columns: 1fr;
}

.lesson-text-column,
.lesson-media-column {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.lesson-card {
    background: linear-gradient(135deg, #fbfbff 0%, #fff9fc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 18px;
}

.lesson-content-card {
    min-height: 180px;
}

.lesson-content-text {
    line-height: 1.9;
    color: #1e293b;
    font-size: 1rem;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.lesson-content-text p {
    margin: 0 0 14px 0;
}

.lesson-content-text p:last-child {
    margin-bottom: 0;
}

.lesson-content-text h1,
.lesson-content-text h2,
.lesson-content-text h3,
.lesson-content-text h4,
.lesson-content-text h5,
.lesson-content-text h6 {
    color: inherit;
    font-weight: 800;
    line-height: 1.3;
    margin: 20px 0 12px;
}

.lesson-content-text h1 { font-size: 2rem; }
.lesson-content-text h2 { font-size: 1.7rem; }
.lesson-content-text h3 { font-size: 1.4rem; }
.lesson-content-text h4 { font-size: 1.2rem; }
.lesson-content-text h5 { font-size: 1.05rem; }
.lesson-content-text h6 { font-size: 0.95rem; }

.lesson-content-text blockquote {
    margin: 16px 0;
    padding: 14px 16px;
    border-left: 4px solid var(--primary);
    background: linear-gradient(135deg, #eef2ff 0%, #fdf2f8 100%);
    border-radius: 12px;
    color: #334155;
}

.lesson-content-text strong,
.lesson-content-text b {
    font-weight: 800;
    color: inherit;
}

.lesson-content-text span,
.lesson-content-text strong,
.lesson-content-text b,
.lesson-content-text em,
.lesson-content-text i,
.lesson-content-text u,
.lesson-content-text a {
    color: inherit;
}

.lesson-content-text em {
    font-style: italic;
}

.lesson-content-text hr {
    border: none;
    border-top: 1px solid #dbe3f0;
    margin: 20px 0;
}

.lesson-image-card img {
    width: 100%;
    max-height: 420px;
    object-fit: contain;
    border-radius: 14px;
    display: block;
    background: #ffffff;
}

.lesson-video-frame {
    width: 100%;
    height: 320px;
    border: none;
    border-radius: 14px;
    background: #000;
}

.lesson-audio-card audio {
    width: 100%;
}

.lesson-actions {
    margin-top: 24px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.lesson-inline-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.lesson-empty-box {
    text-align: center;
    color: var(--text-muted);
    padding: 20px;
}

.tts-button-speaking {
    background: linear-gradient(135deg, #312e81, #0f172a) !important;
    color: #ffffff !important;
}

/* =========================
   COURSE PLAYER ENHANCEMENTS
========================= */
.player-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.player-topbar-left {
    flex: 1;
    min-width: 260px;
}

.player-course-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 8px 0;
}

.player-course-subtitle {
    color: var(--text-muted);
    margin: 0;
}

.course-progress-box {
    background: rgba(255,255,255,0.96);
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    margin-bottom: 20px;
}

.course-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.course-progress-title {
    font-weight: 800;
    color: var(--text-dark);
}

.course-progress-meta {
    color: #475569;
    font-size: 0.95rem;
}

.course-progress-bar {
    width: 100%;
    height: 12px;
    background: #ddd6fe;
    border-radius: 999px;
    overflow: hidden;
}

.course-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #6d5efc, #8b5cf6, #ec4899);
    border-radius: 999px;
    transition: width 0.35s ease;
}

.module-block {
    margin-bottom: 12px;
}

.module-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 12px 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, #e8e4ff 0%, #f9e7f2 100%);
    color: var(--text-dark);
    font-weight: 800;
    user-select: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.module-header:hover {
    transform: translateY(-1px);
}

.module-toggle-icon {
    font-size: 0.95rem;
    color: #334155;
    transition: transform 0.2s ease;
}

.module-items {
    margin-top: 8px;
    padding-left: 6px;
}

.module-items.collapsed {
    display: none;
}

.sidebar-sticky-top {
    position: sticky;
    top: 0;
    background: rgba(255,255,255,0.98);
    padding-bottom: 10px;
    z-index: 2;
}

.exit-course-btn {
    white-space: nowrap;
}

/* =========================
   FILE PREVIEW / EDIT FORM FIX
========================= */
.current-file-box {
    margin-top: 8px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.current-file-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 800;
    color: #475569;
    margin-bottom: 4px;
}

.current-file-name {
    display: block;
    color: #0f172a;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
    line-height: 1.5;
}

.inline-remove-file {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.92rem;
    color: #334155;
}

.file-link-preview {
    display: inline-block;
    margin-top: 8px;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
    color: var(--primary-dark);
    font-weight: 700;
}

/* =========================
   STUDENT DASHBOARD COURSE CARDS
========================= */
.dashboard-course-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 118px;
    gap: 18px;
    align-items: start;
    background: rgba(255, 255, 255, 0.56);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 24px;
    box-shadow:
        0 14px 36px rgba(15, 23, 42, 0.10),
        inset 0 1px 0 rgba(255,255,255,0.50);
    padding: 20px;
    transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
    overflow: hidden;
}

.dashboard-course-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.22), transparent 38%),
        radial-gradient(circle at top right, rgba(91, 76, 240, 0.10), transparent 24%),
        radial-gradient(circle at bottom left, rgba(217, 70, 161, 0.08), transparent 22%);
    pointer-events: none;
}

.dashboard-course-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 20px 48px rgba(15, 23, 42, 0.15),
        inset 0 1px 0 rgba(255,255,255,0.60);
    border-color: rgba(255,255,255,0.58);
}

.dashboard-course-card-content {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.dashboard-course-card h5 {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    color: var(--text-dark);
}

.dashboard-course-card p {
    margin: 0 0 12px 0;
    color: #475569;
    line-height: 1.65;
}

.dashboard-course-cover-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
}

.dashboard-course-cover {
    width: 108px;
    height: 148px;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.52);
    box-shadow:
        0 12px 24px rgba(15, 23, 42, 0.18),
        inset 0 1px 0 rgba(255,255,255,0.45);
    background: rgba(255,255,255,0.65);
}

.dashboard-course-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 14px;
    margin-bottom: 12px;
    border: 1px solid #e2e8f0;
}

.course-status-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
    margin-bottom: 12px;
    border: 1px solid rgba(255,255,255,0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.course-status-active {
    background: rgba(220, 252, 231, 0.78);
    color: #166534;
}

.course-status-completed {
    background: rgba(237, 233, 254, 0.82);
    color: #6d28d9;
}

.course-status-suspended {
    background: rgba(254, 226, 226, 0.82);
    color: #b91c1c;
}

.course-section-block {
    position: relative;
}

.course-section-title {
    margin: 0 0 16px 0;
    font-size: 1.18rem;
    font-weight: 900;
    color: var(--text-dark);
    letter-spacing: -0.01em;
}

.course-section-block + .course-section-block {
    margin-top: 30px;
}

/* =========================
   DECORATIVE STUDENT MASCOT
========================= */
.avatar-student {
    position: fixed;
    right: 18px;
    bottom: 0;
    height: 320px;
    width: auto;
    z-index: 20;
    pointer-events: none;
    opacity: 0.95;
    filter: drop-shadow(0 14px 30px rgba(15, 23, 42, 0.16));
}

/* =========================
   FOOTER
========================= */
.site-footer {
    margin-top: 40px;
    padding: 20px;
    text-align: center;
    color: #64748b;
    font-size: 0.92rem;
    border-top: 1px solid #e2e8f0;
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(8px);
}

/* =========================
   DRAG / DROP
========================= */
.drag-handle {
    cursor: grab;
    font-size: 18px;
    user-select: none;
}

.draggable-row.dragging {
    opacity: 0.5;
    background: #eef4ff;
}

.draggable-row.over {
    outline: 2px dashed #2563eb;
}

/* =========================
   QUIZ START SCREEN
========================= */
.quiz-start-shell {
    max-width: 980px;
    margin: 30px auto;
    padding: 0 20px;
}

.quiz-start-card {
    background: rgba(255,255,255,0.96);
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    padding: 26px;
}

.quiz-start-title {
    margin: 0 0 10px 0;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-dark);
}

.quiz-start-subtitle {
    margin: 0 0 18px 0;
    color: var(--text-muted);
}

.quiz-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.quiz-info-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px;
}

.quiz-info-box strong {
    display: block;
    margin-bottom: 5px;
    color: var(--text-dark);
}

.quiz-rich-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 18px;
}

.quiz-rich-title {
    margin: 0 0 10px 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-dark);
}

.quiz-rich-content {
    color: #334155;
    line-height: 1.75;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.quiz-history-list {
    display: grid;
    gap: 10px;
}

.quiz-history-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 14px;
}

.quiz-hidden {
    display: none !important;
}

/* =========================
   QUIZ PAGE TRANSITION
========================= */
.quiz-page-panel {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.quiz-page-panel.page-leaving {
    opacity: 0;
    transform: translateY(10px);
}

.quiz-page-panel.page-entering {
    opacity: 0;
    transform: translateY(10px);
}

.quiz-page-index {
    font-weight: 800;
    color: #312e81;
    font-size: 0.95rem;
}

.quiz-nav-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.quiz-nav-left,
.quiz-nav-right {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* =========================
   GROUP AUDIO LOCK
========================= */
.group-audio-lock-box {
    background: linear-gradient(135deg, #eef2ff 0%, #fdf2f8 100%);
    border: 1px solid #ddd6fe;
    border-radius: 14px;
    padding: 14px 16px;
    color: #312e81;
}

.group-audio-lock-title {
    font-weight: 800;
    margin-bottom: 6px;
}

.group-audio-lock-subtitle {
    font-size: 0.92rem;
    color: #475569;
}

.group-hidden-audio {
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

/* =========================
   GROUP QUESTION LAYOUT
========================= */
.group-layout {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.group-layout.no-images {
    grid-template-columns: 1fr;
}

.group-media-column,
.group-content-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.group-media-card,
.group-content-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px;
}

.group-media-card img {
    width: 100%;
    display: block;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
}

.group-media-label {
    font-size: 0.85rem;
    font-weight: 800;
    color: #475569;
    margin-bottom: 10px;
}

.group-question-stack {
    display: grid;
    gap: 18px;
}

/* =========================
   GROUP IMAGE SEGMENTS
========================= */
.group-segment-stack {
    display: grid;
    gap: 22px;
}

.group-question-segment {
    display: grid;
    grid-template-columns: minmax(480px, 620px) minmax(0, 1fr);
    gap: 26px;
    align-items: start;
    margin-bottom: 24px;
}

.group-reference-before-whole-table {
    width: 100%;
    margin-bottom: 18px;
}

.group-reference-before-whole-table-left {
    width: min(620px, 100%);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

@media (max-width: 980px) {
    .group-reference-before-whole-table-left {
        width: 100%;
    }
}

.group-question-segment.no-image {
    grid-template-columns: 1fr;
}

.group-segment-left {
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: sticky;
    top: 20px;
    align-self: start;
}

.group-segment-left-placeholder {
    visibility: hidden;
}

.group-segment-image-card,
.group-segment-passage-card {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.group-segment-image-label {
    font-weight: 800;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.group-segment-image-card img {
    width: 100%;
    max-height: 520px;
    object-fit: contain;
    border-radius: 14px;
    display: block;
    background: #fff;
}

.group-segment-passage-card .passage-box {
    margin-top: 0;
    min-height: 120px;
    height: 320px;
    max-height: 80vh;
    overflow: auto;
    resize: vertical;
    font-size: 1rem;
    line-height: 1.9;
    padding-right: 6px;
    border-radius: 12px;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.group-segment-passage-card .passage-box:hover {
    box-shadow: inset 0 0 0 1px rgba(91, 76, 240, 0.10);
}

.group-segment-passage-card .passage-box:active {
    box-shadow: inset 0 0 0 1px rgba(91, 76, 240, 0.18);
}

.group-segment-questions {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.group-instructions-box {
    background: linear-gradient(135deg, #eef2ff 0%, #fdf2f8 100%);
    border: 1px solid #ddd6fe;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 18px;
}

.group-instructions-title {
    font-weight: 800;
    margin-bottom: 6px;
    color: var(--text-dark);
}

.group-instructions-text {
    color: #475569;
    line-height: 1.7;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.question-instruction-text p,
.quiz-rich-content p,
.group-instructions-text p {
    margin: 0 0 12px 0;
}

.question-instruction-text p:last-child,
.quiz-rich-content p:last-child,
.group-instructions-text p:last-child {
    margin-bottom: 0;
}

.question-instruction-text img,
.quiz-rich-content img,
.group-instructions-text img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 12px 0;
    border-radius: 12px;
}

.question-instruction-text table,
.quiz-rich-content table,
.group-instructions-text table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0;
    background: #fff;
}

.question-instruction-text table td,
.question-instruction-text table th,
.quiz-rich-content table td,
.quiz-rich-content table th,
.group-instructions-text table td,
.group-instructions-text table th {
    border: 1px solid #cbd5e1;
    padding: 10px 12px;
    vertical-align: top;
}

.question-instruction-text ul,
.question-instruction-text ol,
.quiz-rich-content ul,
.quiz-rich-content ol,
.group-instructions-text ul,
.group-instructions-text ol {
    margin: 12px 0 12px 22px;
}

.question-instruction-text a,
.quiz-rich-content a,
.group-instructions-text a {
    color: var(--primary-dark);
    text-decoration: underline;
}

.question-instruction-text blockquote,
.quiz-rich-content blockquote,
.group-instructions-text blockquote {
    margin: 16px 0;
    padding: 14px 16px;
    border-left: 4px solid var(--primary);
    background: rgba(255,255,255,0.55);
    border-radius: 12px;
    color: #334155;
}

.question-instruction-text hr,
.quiz-rich-content hr,
.group-instructions-text hr {
    border: none;
    border-top: 1px solid #dbe3f0;
    margin: 18px 0;
}

.question-instruction-text h1,
.question-instruction-text h2,
.question-instruction-text h3,
.question-instruction-text h4,
.question-instruction-text h5,
.question-instruction-text h6,
.quiz-rich-content h1,
.quiz-rich-content h2,
.quiz-rich-content h3,
.quiz-rich-content h4,
.quiz-rich-content h5,
.quiz-rich-content h6,
.group-instructions-text h1,
.group-instructions-text h2,
.group-instructions-text h3,
.group-instructions-text h4,
.group-instructions-text h5,
.group-instructions-text h6 {
    color: var(--text-dark);
    font-weight: 800;
    line-height: 1.3;
    margin: 18px 0 10px;
}

.passage-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 18px;
    border-radius: 12px;
    white-space: normal;
    margin-top: 10px;
    line-height: 1.75;
}

.passage-box p {
    margin: 0 0 12px 0;
}

.passage-box p:last-child {
    margin-bottom: 0;
}

.passage-box ul,
.passage-box ol {
    margin: 10px 0 10px 20px;
}

.passage-box strong {
    font-weight: 800;
}

.passage-box em {
    font-style: italic;
}

/* =========================
   TABLE BUILDER 
========================= */
.table-builder-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.table-builder-toolbar-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 180px));
    gap: 10px;
}

.table-builder-hint {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 14px;
    line-height: 1.7;
}

.excel-table-toolbar {
    margin-top: 18px;
    margin-bottom: 18px;
    padding: 16px;
    background: rgba(255,255,255,0.92);
    border: 1px solid #dbe3f0;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.excel-toolbar-grid {
    display: grid;
    grid-template-columns: 180px minmax(220px, 1fr) minmax(220px, 1fr) minmax(260px, auto);
    gap: 14px;
    align-items: end;
}

.excel-toolbar-button-wrap {
    display: flex;
    flex-direction: column;
}

.excel-table-wrap {
    overflow-x: auto;
    padding-bottom: 8px;
    border-radius: 16px;
    background: rgba(255,255,255,0.45);
    border: 1px solid rgba(255,255,255,0.35);
}

.excel-table-builder {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 100%;
    width: max-content;
    background: #fff;
    table-layout: fixed;
}

.excel-table-builder tr:first-child td {
    border-top: none;
}

.excel-table-builder td:first-child {
    border-left: none;
}

.excel-table-cell {
    border-top: 1px solid #dbe3f0;
    border-left: 1px solid #dbe3f0;
    border-right: none;
    border-bottom: none;
    min-width: 180px;
    width: 180px;
    height: 92px;
    padding: 0;
    vertical-align: top;
    background: rgba(255,255,255,0.96);
    transition: background 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    position: relative;
}

.excel-table-builder tr:last-child .excel-table-cell {
    border-bottom: 1px solid #dbe3f0;
}

.excel-table-builder .excel-table-cell:last-child {
    border-right: 1px solid #dbe3f0;
}

.excel-table-cell.selected {
    background: #f8faff;
    box-shadow:
        inset 0 0 0 2px #5b4cf0,
        0 0 0 3px rgba(91, 76, 240, 0.10);
    z-index: 2;
}

.excel-table-cell.cell-type-input {
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.88) 0%, rgba(255, 255, 255, 0.96) 100%);
}

.excel-table-cell.cell-type-dropdown {
    background: linear-gradient(135deg, rgba(253, 242, 248, 0.88) 0%, rgba(255, 255, 255, 0.96) 100%);
}

.excel-table-cell-inner {
    min-height: 92px;
    padding: 12px;
    outline: none;
    line-height: 1.6;
    color: var(--text-main);
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    font-size: 0.95rem;
}

.excel-table-cell-inner:empty::before {
    content: "Type here...";
    color: #94a3b8;
    font-style: italic;
    font-weight: 500;
}

.excel-table-cell-inner strong,
.excel-table-cell-inner b {
    font-weight: 800;
}

.excel-table-cell.cell-type-text {
    background: rgba(255,255,255,0.96);
}

.excel-table-cell-inner[data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: #94a3b8;
    font-style: italic;
    font-weight: 500;
}



/* =========================
   TABLE QUESTION
========================= */
.table-question-shell {
    margin-top: 14px;
}

.table-question-title {
    text-align: center;
    font-weight: 800;
    font-size: 1.08rem;
    color: var(--text-dark);
    margin-bottom: 14px;
    line-height: 1.6;
    padding: 10px 14px;
    background: linear-gradient(135deg, #eef2ff 0%, #fdf2f8 100%);
    border: 1px solid #ddd6fe;
    border-radius: 14px;
}

.table-question-wrap {
    overflow-x: auto;
    padding-bottom: 6px;
}

.table-interactive {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.table-interactive td {
    border: 1px solid var(--border-color);
    padding: 10px;
    background: #fff;
}

.table-interactive-pretty {
    width: auto;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(255,255,255,0.92);
    border: 1px solid #dbe3f0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.table-interactive-pretty td {
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    padding: 10px;
    background: rgba(255,255,255,0.96);
    vertical-align: middle;
    min-width: 90px;
    max-width: 260px;
     font-size: 0.9rem;
}

.table-interactive-pretty tr:last-child td {
    border-bottom: none;
}

.table-interactive-pretty td:last-child {
    border-right: none;
}

.table-cell-text {
    white-space: normal;
}

.table-cell-input,
.table-cell-dropdown {
    min-width: 150px;
}

.table-static-text {
    color: var(--text-main);
    line-height: 1.5;
    font-weight: 600;
    white-space: normal;
    word-break: break-word;
}



.table-inline-label {
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.4;
}

.table-inline-label.before {
    margin-right: 2px;
}

.table-inline-label.after {
    margin-left: 2px;
}

.table-answer-input,
.table-answer-select {
    min-width: 170px;
    max-width: 260px;
}



.table-answer-highlight {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.10) 0%, rgba(236, 72, 153, 0.10) 100%);
    border: 1px solid rgba(99, 102, 241, 0.30) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08);
    transition: all 0.2s ease;
}

.table-answer-highlight:focus {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.16) 0%, rgba(236, 72, 153, 0.16) 100%);
    border-color: rgba(99, 102, 241, 0.55) !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

.table-answer-number-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 26px;
    height: 26px;

    border-radius: 6px;
    background: #d8ceea;
    border: 1px solid #5e86d2;

    color: #000000;
    font-size: 12px;
    font-weight: 700;

    position: relative;
    z-index: 2;

    margin-right: -12px; 
}

/* =========================
   GROUP TABLE LAYOUT MODES
========================= */
.group-table-full-width {
    width: 100%;
    margin: 10px 0 24px 0;
}

.group-table-full-width .question-block {
    width: 100%;
}

.group-table-full-width .table-question-shell,
.group-table-full-width .table-question-wrap,
.group-table-full-width .table-interactive-pretty {
    width: 100%;
}

.group-table-full-width .table-interactive-pretty {
    min-width: 100%;
}

.group-table-left-column,
.group-table-right-column {
    width: 100%;
    margin: 10px 0 24px 0;
}

.group-table-left-column .question-block,
.group-table-right-column .question-block {
    width: 100%;
}

.group-table-left-column .table-question-shell,
.group-table-left-column .table-question-wrap,
.group-table-left-column .table-interactive-pretty,
.group-table-right-column .table-question-shell,
.group-table-right-column .table-question-wrap,
.group-table-right-column .table-interactive-pretty {
    width: 100%;
}

.group-table-left-column .table-interactive-pretty,
.group-table-right-column .table-interactive-pretty {
    min-width: 100%;
    max-width: 100%;
}

/* =========================
   MATCHING QUESTION
========================= */
.matching-question-shell {
    margin-top: 14px;
}

.matching-question-title {
    text-align: center;
    font-weight: 800;
    font-size: 1.08rem;
    color: var(--text-dark);
    margin-bottom: 14px;
    line-height: 1.6;
    padding: 10px 14px;
    background: linear-gradient(135deg, #eef2ff 0%, #fdf2f8 100%);
    border: 1px solid #ddd6fe;
    border-radius: 14px;
}

.matching-options-box {
    background: rgba(255,255,255,0.92);
    border: 1px solid #dbe3f0;
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 14px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.matching-options-title,
.matching-options-label {
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.matching-prompt-list {
    display: grid;
    gap: 12px;
}

.matching-prompt-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    gap: 14px;
    align-items: center;
    background: rgba(255,255,255,0.95);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.matching-prompt-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.matching-prompt-right {
    min-width: 0;
}

.matching-prompt-number {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: linear-gradient(135deg, #5b4cf0, #d946a1);
    color: #fff;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(91, 76, 240, 0.20);
}

.matching-prompt-text {
    color: var(--text-main);
    line-height: 1.6;
    font-weight: 600;
    min-width: 0;
}

.matching-prompt-answer .form-control-custom {
    min-width: 0;
}

/* =========================
   MATCHING DRAG AND DROP
========================= */
.matching-bank {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.matching-draggable-choice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, #eef2ff 0%, #fdf2f8 100%);
    border: 1px solid #c7d2fe;
    color: #312e81;
    font-weight: 800;
    font-size: 0.93rem;
    cursor: grab;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    user-select: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.matching-draggable-choice:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(15, 23, 42, 0.10);
}

.matching-draggable-choice.dragging {
    opacity: 0.55;
}

.matching-dropzone {
    min-height: 56px;
    border: 2px dashed #cbd5e1;
    border-radius: 14px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.matching-dropzone.drag-over {
    border-color: #6366f1;
    background: #f8faff;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.08);
}

.matching-dropzone-placeholder {
    color: #94a3b8;
    font-weight: 600;
    font-size: 0.92rem;
}

.matching-dropzone-filled {
    border-style: solid;
    border-color: #a5b4fc;
    background: linear-gradient(135deg, #eef2ff 0%, #fff7fb 100%);
}

.matching-dropzone-choice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.matching-dropzone-chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #5b4cf0, #d946a1);
    color: #fff;
    font-weight: 800;
    font-size: 0.9rem;
}

.matching-remove-btn {
    border: none;
    background: #fff;
    color: #b91c1c;
    font-weight: 800;
    border-radius: 10px;
    padding: 6px 10px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.matching-remove-btn:hover {
    background: #fef2f2;
}

/* =========================
   MATCHING REVIEW
========================= */
.matching-review-list {
    display: grid;
    gap: 12px;
}

.matching-review-item {
    background: rgba(255,255,255,0.96);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.matching-review-head,
.matching-review-main {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 12px;
    align-items: start;
}

.matching-review-number {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: linear-gradient(135deg, #5b4cf0, #d946a1);
    color: #fff;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}

.matching-review-prompt {
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.55;
}

.matching-review-body,
.matching-review-content {
    padding-left: 58px;
}

/* =========================
   MATCHING BUILDER
========================= */
.matching-builder-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

.matching-builder-panel {
    background: linear-gradient(135deg, #fbfbff 0%, #fff9fc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 16px;
}

.matching-builder-title {
    margin: 0 0 12px 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-dark);
}

.matching-prompt-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.matching-prompt-head {
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 10px;
}

/* =========================
   REVIEW TABLE POLISH
========================= */
.review-table-interactive {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(255,255,255,0.96);
    border: 1px solid #dbe3f0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.review-table-interactive td {
    min-width: 180px;
    vertical-align: top;
    padding: 12px;
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
}

.review-table-interactive tr:last-child td {
    border-bottom: none;
}

.review-table-interactive td:last-child {
    border-right: none;
}

/* =========================
   QUIZ ESSAY WRITING AREA
========================= */
.quiz-essay-textarea {
    resize: vertical;
}

.quiz-large-essay-wrap {
    position: relative;
    margin-top: 12px;
}

.quiz-large-essay-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('../images/logoo.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 260px;
    opacity: 0.02;
    pointer-events: none;
    z-index: 0;
}

.quiz-large-essay-textarea {
    position: relative;
    z-index: 1;
    min-height: 520px;
    width: 100%;
    resize: vertical;
    background: transparent !important;
    font-family: Calibri, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12pt;
    line-height: 1.7;
    padding: 18px 20px;
}

/* =========================
   PAGINATION
========================= */
.pagination-wrap {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    overflow-x: auto;
}

.pagination-wrap .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination-wrap .pagination li {
    list-style: none;
}

.pagination-wrap .pagination a,
.pagination-wrap .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #dbe3f0;
    background: #ffffff;
    color: var(--text-dark);
    font-weight: 700;
    text-decoration: none;
    box-sizing: border-box;
}

.pagination-wrap .pagination .active span,
.pagination-wrap .pagination a:hover {
    background: var(--gradient-main);
    color: #ffffff;
    border-color: transparent;
}

/* =========================
   CKEDITOR
========================= */
.ck.ck-editor {
    width: 100%;
}

.ck.ck-editor__main > .ck-editor__editable {
    min-height: 320px;
    background: #ffffff !important;
    border-radius: 0 0 12px 12px !important;
    color: #1e293b;
}

.ck.ck-toolbar {
    border-radius: 12px 12px 0 0 !important;
}

.ck.ck-editor__editable_inline {
    padding: 16px 18px !important;
    line-height: 1.8;
}

.ck-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.ck-content table {
    width: 100%;
    border-collapse: collapse;
}

.ck-content table td,
.ck-content table th {
    border: 1px solid #cbd5e1;
    padding: 10px;
}

.lesson-content-text img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
    margin: 12px 0;
}

.lesson-content-text table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0;
    background: #fff;
    display: table;
}

.lesson-content-text figure.table {
    margin: 14px 0;
    overflow-x: auto;
}

.lesson-content-text figure.table table {
    min-width: 100%;
}

.lesson-content-text table td,
.lesson-content-text table th {
    border: 1px solid #cbd5e1;
    padding: 10px 12px;
}

.lesson-content-text ul,
.lesson-content-text ol {
    margin: 12px 0 12px 22px;
}

.lesson-content-text a {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 980px) {
    .lesson-grid {
        grid-template-columns: 1fr;
    }

    .lesson-video-frame {
        height: 260px;
    }

    .lesson-title {
        font-size: 1.6rem;
    }

    .player-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .group-question-segment {
        grid-template-columns: 1fr;
    }

    .group-segment-left {
        position: static;
    }

    .group-segment-image-card {
        position: static;
    }

    .group-segment-image-card img {
        max-height: 420px;
    }
}

@media (max-width: 900px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    .group-layout {
        grid-template-columns: 1fr;
    }

    .quiz-info-grid {
        grid-template-columns: 1fr;
    }

    .matching-prompt-item {
    grid-template-columns: 1fr;
    align-items: start;
}

.matching-prompt-left {
    align-items: flex-start;
}

.matching-prompt-right {
    width: 100%;
}

.matching-dropzone {
    width: 100%;
}

.matching-prompt-number {
    width: 38px;
    height: 38px;
}

    .matching-builder-grid {
        grid-template-columns: 1fr;
    }

        .excel-toolbar-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .page-title {
        font-size: 1.6rem;
    }

    .page-wrapper {
        margin: 25px auto;
        padding: 0 14px;
    }

    .player-layout {
        grid-template-columns: 1fr;
        height: auto;
    }

    .sidebar {
        border-right: none;
        border-bottom: 1px solid #ddd;
    }

    .content {
        padding: 20px;
    }

    .avatar-student {
        display: none;
    }

    .table-builder-toolbar-fields {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .table-builder-toolbar-fields .form-control-custom {
        width: 100%;
    }

    .table-question-title {
        font-size: 1rem;
        padding: 9px 12px;
    }

    .table-interactive-pretty td {
        min-width: 84px;
        max-width: 220px;
        padding: 8px;
    }

    .table-cell-input,
    .table-cell-dropdown {
        min-width: 130px;
    }

    .table-answer-input,
    .table-answer-select {
        min-width: 120px;
    }

    .excel-toolbar-grid {
        grid-template-columns: 1fr;
    }

    .excel-table-cell {
        min-width: 150px;
        width: 150px;
        height: 84px;
    }

    .excel-table-cell-inner {
        min-height: 84px;
        padding: 10px;
    }
}

@media (max-width: 640px) {
    .dashboard-course-card {
        grid-template-columns: 1fr;
    }

    .dashboard-course-cover-wrap {
        justify-content: flex-start;
    }

    .dashboard-course-cover {
        width: 98px;
        height: 138px;
    }

    .site-topbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .matching-review-body,
    .matching-review-content {
        padding-left: 0;
    }
}

.inline-fill-question {
    margin-top: 10px;
    line-height: 2;
    color: #1e293b;
    font-size: 1rem;
}

.inline-fill-text {
    display: inline;
    white-space: normal;
}

.inline-fill-piece {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 6px;
    vertical-align: middle;
}

.inline-fill-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.inline-fill-input {
    display: inline-block;
    width: 180px !important;
    min-width: 120px;
    max-width: 220px;
    vertical-align: middle;
    margin: 0;
}

.fill-blank-paragraph-box {
    margin-top: 12px;
    padding: 16px 18px;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.inline-fill-question-justify {
    text-align: justify;
    line-height: 2.2;
}

.fill-blank-inline-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    align-items: center;
    line-height: 2;
}

.fill-blank-paragraph-box .inline-fill-piece {
    margin: 0 6px 6px 0;
}

.fill-blank-paragraph-box .inline-fill-input {
    width: 160px !important;
    min-width: 120px;
    max-width: 200px;
}

@media (max-width: 768px) {
    .fill-blank-paragraph-box {
        padding: 14px;
    }

    .fill-blank-paragraph-box .inline-fill-input {
        width: 130px !important;
        min-width: 100px;
    }
}

/* =========================
   INLINE DROPDOWN QUESTION
========================= */
.inline-dropdown-question-wrap {
    margin-top: 10px;
}

.inline-dropdown-question {
    line-height: 2;
    color: #1e293b;
    font-size: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.inline-dropdown-text {
    display: inline;
    white-space: normal;
}

.inline-dropdown-piece {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    max-width: 100%;
}

.inline-dropdown-select {
    width: auto !important;
    min-width: 120px;
    max-width: min(100%, 36ch);
    display: inline-block;
    padding-right: 34px;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .inline-dropdown-question {
        gap: 6px 8px;
    }

    .inline-dropdown-select {
        min-width: 110px;
        max-width: 100%;
    }
}

/* =========================
   NEW QUIZ ATTEMPT SUPPORT
   multi-marker table + safer wrapping
========================= */

.table-inline-field-wrap,
.table-answer-field-wrap {
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.table-answer-field-wrap .table-inline-label,
.table-inline-field-wrap .table-inline-label {
    display: inline;
    white-space: normal;
    word-break: break-word;
}

.table-answer-field-wrap .table-answer-input,
.table-answer-field-wrap .table-answer-select {
    flex: 0 1 180px;
}

.table-answer-field-wrap .table-answer-input + .table-answer-input,
.table-answer-field-wrap .table-answer-select + .table-answer-select,
.table-answer-field-wrap .table-answer-input + .table-answer-select,
.table-answer-field-wrap .table-answer-select + .table-answer-input {
    margin-left: 2px;
}

.table-static-text .inline-marker-chip,
.table-inline-label .inline-marker-chip {
    display: none !important;
}

/* better wrapping when a table cell has many markers */
.table-interactive-pretty td {
    overflow-wrap: anywhere;
    word-break: break-word;
}


.table-cell-smart-flow {
    display: block;
    width: 100%;
    line-height: 1.7;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.table-marker-inline-item {
    display: inline-flex;
    align-items: center;
    gap: 0; /* remove gap completely */
    margin: 0 2px;
    vertical-align: middle;
}

.table-cell-smart-flow .table-inline-label {
    display: inline;
}

.table-cell-smart-flow .table-answer-input,
.table-cell-smart-flow .table-answer-select {
    display: inline-block;
    width: 140px;
    min-width: 90px;
    max-width: 160px;

    padding: 6px 10px;
    padding-left: 14px; /* add space so text doesn't hit the number */

    border-radius: 8px;
    position: relative;
    z-index: 1;
}

.table-interactive-pretty td {
    vertical-align: top;
}


/* optional: slightly tighter multi-answer cell layout */
.table-answer-field-wrap {
    row-gap: 8px;
}

/* fill in the blank remains inline but wraps better */
.inline-fill-question,
.fill-blank-inline-wrap {
    overflow-wrap: anywhere;
    word-break: break-word;
}


.fib-editor {
    min-height: 120px;
    padding: 14px 16px;
    border: 1px solid #d7dfeb;
    border-radius: 14px;
    background: #fff;
    line-height: 1.8;
    font-size: 15px;
    color: #17153a;
}
.fib-editor:focus {
    outline: none;
    border-color: #5b4cf0;
    box-shadow: 0 0 0 3px rgba(91, 76, 240, 0.12);
}
.fib-marker-chip,
.inline-marker-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    padding: 3px 10px;
    margin: 0 4px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    vertical-align: middle;
    user-select: none;
    white-space: nowrap;
}
.fib-marker-chip {
    background: rgba(91, 76, 240, 0.12);
    color: #4338ca;
    border: 1px solid rgba(91, 76, 240, 0.22);
}
.inline-marker-chip.marker-input {
    background: rgba(91, 76, 240, 0.12);
    color: #4338ca;
    border: 1px solid rgba(91, 76, 240, 0.22);
}
.inline-marker-chip.marker-dropdown {
    background: rgba(56, 189, 248, 0.14);
    color: #0369a1;
    border: 1px solid rgba(56, 189, 248, 0.25);
}
.fib-group-card {
    border: 1px solid #d7dfeb;
    border-radius: 18px;
    background: #fff;
    padding: 16px;
    margin-bottom: 16px;
}
.fib-group-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.fib-group-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #17153a;
}
.fib-blank-row {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #f8fafc;
    padding: 12px;
    margin-bottom: 12px;
}
.excel-table-builder {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.excel-table-builder td {
    border: 1px solid #d7dfeb;
    min-width: 140px;
    height: 74px;
    vertical-align: top;
    background: #fff;
    position: relative;
}
.excel-table-builder td.selected {
    box-shadow: inset 0 0 0 2px #5b4cf0;
    background: #f8f7ff;
}
.excel-table-cell-inner {
    min-height: 72px;
    padding: 10px;
    outline: none;
    white-space: normal;
    word-break: break-word;
    line-height: 1.7;
}
.cell-type-text .excel-table-cell-inner {
    background: #fff;
}
.cell-type-input .excel-table-cell-inner {
    background: #faf7ff;
}
.cell-type-dropdown .excel-table-cell-inner {
    background: #f2fbff;
}
.table-marker-card {
    border: 1px solid #d7dfeb;
    border-radius: 14px;
    background: #f8fafc;
    padding: 12px;
    margin-bottom: 10px;
}
.marker-meta-title {
    font-size: 0.84rem;
    font-weight: 800;
    color: #17153a;
    margin-bottom: 8px;
}
.marker-muted {
    font-size: 0.76rem;
    color: #64748b;
    margin-top: 6px;
}



.fill-blank-multiline {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.fib-break-chip,
.table-break-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    margin: 0 4px;
    border-radius: 999px;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #991b1b;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* =========================
   INSTRUCTOR COURSES
========================= */

.instructor-courses-grid {
    gap: 20px;
}

.instructor-course-card h5::before,
.instructor-course-title::before {
    display: none;
    content: none;
}

.instructor-course-card h5,
.instructor-course-title {
    display: block;
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    line-height: 1.3;
    color: var(--text-dark);
}

.instructor-course-card-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.instructor-course-desc {
    margin: 0 0 12px 0 !important;
    color: #475569;
    line-height: 1.6;
    max-height: 4.8em;
    overflow: hidden;
}

.instructor-course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.instructor-course-meta-box {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.72);
    border: 1px solid #e2e8f0;
    min-width: 110px;
}

.instructor-course-meta-box .meta-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 3px;
}

.instructor-course-meta-box .meta-value {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    color: #17153a;
}

.instructor-course-actions {
    margin-top: 4px;
}

@media (max-width: 640px) {
    .instructor-course-meta {
        flex-direction: column;
    }

    .instructor-course-meta-box {
        width: 100%;
    }
}

/* =========================
   QUIZ HIGHLIGHT + FLOATING TIMER
   Scoped additions only
========================= */

.quiz-topbar-enhanced {
    position: sticky;
    top: 14px;
    z-index: 120;
    background: rgba(255,255,255,0.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(99, 102, 241, 0.14);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.10);
    border-radius: 18px;
    padding: 16px 18px;
}

.quiz-topbar-right-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.quiz-mini-help {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #eef2ff 0%, #fdf2f8 100%);
    border: 1px solid #ddd6fe;
    color: #4338ca;
    font-size: 0.88rem;
    font-weight: 700;
}

.quiz-mini-help-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, #5b4cf0, #d946a1);
    flex-shrink: 0;
}



@keyframes quizTimerDangerPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 12px 26px rgba(239, 68, 68, 0.18);
    }
    50% {
        transform: scale(1.03);
        box-shadow: 0 18px 34px rgba(239, 68, 68, 0.28);
    }
}

/* highlightable text */
.quiz-annotatable,
.quiz-annotatable * {
    user-select: text;
    -webkit-user-select: text;
}

/* keep controls normal */
.quiz-annotatable input,
.quiz-annotatable textarea,
.quiz-annotatable select,
.quiz-annotatable button,
.quiz-annotatable audio {
    user-select: none;
    -webkit-user-select: none;
}

.quiz-highlight-toolbar {
    position: fixed;
    z-index: 250;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.96);
    box-shadow: 0 20px 42px rgba(2, 6, 23, 0.28);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.quiz-highlight-tool {
    border: none;
    cursor: pointer;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 800;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}

.quiz-highlight-tool:hover {
    transform: translateY(-1px);
}

.quiz-highlight-yellow {
    background: linear-gradient(135deg, #fde68a 0%, #facc15 100%);
    color: #4b3b00;
}

.quiz-highlight-green {
    background: linear-gradient(135deg, #bbf7d0 0%, #4ade80 100%);
    color: #14532d;
}

.quiz-highlight-pink {
    background: linear-gradient(135deg, #fbcfe8 0%, #f472b6 100%);
    color: #831843;
}

.quiz-highlight-clear {
    background: rgba(255,255,255,0.10);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.12);
}

.quiz-text-highlight {
    border-radius: 0.38em;
    padding: 0.02em 0.16em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.quiz-text-highlight-yellow {
    background: linear-gradient(180deg, rgba(255,245,157,0.22) 0%, rgba(250,204,21,0.72) 100%);
    box-shadow: inset 0 0 0 1px rgba(234,179,8,0.15);
}

.quiz-text-highlight-green {
    background: linear-gradient(180deg, rgba(187,247,208,0.18) 0%, rgba(74,222,128,0.62) 100%);
    box-shadow: inset 0 0 0 1px rgba(34,197,94,0.15);
}

.quiz-text-highlight-pink {
    background: linear-gradient(180deg, rgba(251,207,232,0.18) 0%, rgba(244,114,182,0.60) 100%);
    box-shadow: inset 0 0 0 1px rgba(236,72,153,0.15);
}

/* overlay polish */
.quiz-submit-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(15, 23, 42, 0.46);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.quiz-submit-overlay-card {
    width: min(100%, 420px);
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 22px;
    box-shadow: 0 22px 54px rgba(15, 23, 42, 0.22);
    padding: 26px 24px;
    text-align: center;
}

.quiz-submit-overlay-title {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.quiz-submit-overlay-text {
    color: var(--text-muted);
    line-height: 1.7;
}

/* responsive */
@media (max-width: 768px) {
    .quiz-topbar-enhanced {
        top: 8px;
        padding: 14px;
        border-radius: 14px;
    }

    .quiz-topbar-right-tools {
        width: 100%;
        justify-content: space-between;
    }

    .quiz-mini-help {
        font-size: 0.8rem;
        padding: 7px 10px;
    }

    .quiz-highlight-toolbar {
        max-width: calc(100vw - 16px);
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px 10px;
        border-radius: 14px;
    }

    .quiz-highlight-tool {
        padding: 7px 10px;
        font-size: 11px;
    }
}

/* =========================
   RESIZABLE PASSAGE BOX
========================= */

.passage-resizable-wrap {
    position: relative;
}

.group-segment-passage-card .passage-box {
    margin-top: 0;
    min-height: 120px;
    height: 320px;
    max-height: 80vh;
    overflow: auto;
    resize: none; /* hide default browser resize handle */
    font-size: 1rem;
    line-height: 1.9;
    padding-right: 8px;
    padding-bottom: 44px; /* space for handle */
}

.passage-resize-handle {
    position: absolute;
    right: 12px;
    bottom: 10px;
    z-index: 5;

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

    min-height: 34px;
    padding: 6px 12px;

    border-radius: 999px;
    background: linear-gradient(135deg, #eef2ff 0%, #fdf2f8 100%);
    border: 1px solid #c7d2fe;
    color: #312e81;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.01em;

    cursor: ns-resize;
    user-select: none;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.passage-resize-handle:hover {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.14);
    background: linear-gradient(135deg, #e0e7ff 0%, #fce7f3 100%);
}

.passage-resize-handle:active {
    transform: scale(0.98);
}

@media (max-width: 768px) {
    .group-segment-passage-card .passage-box {
        height: 260px;
        padding-bottom: 48px;
    }

    .passage-resize-handle {
        right: 10px;
        bottom: 8px;
        font-size: 11px;
        padding: 6px 10px;
    }
}

/* =========================
   FANCY TIMER IN STICKY TOPBAR
========================= */

.quiz-topbar-fancy-timer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px; /* ↓ smaller height */
    padding: 6px 12px; /* ↓ tighter padding */
    border-radius: 100px; /* ↓ less oval, more rectangle */
    background: rgba(15, 23, 42, 0.92);
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.16);
}

.quiz-topbar-fancy-timer-icon {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-main);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
    font-size: 14px;
    flex-shrink: 0;
}

.quiz-topbar-fancy-timer-label {
    font-size: 0.84rem;
    font-weight: 700;
    opacity: 0.86;
    white-space: nowrap;
}

.quiz-topbar-fancy-timer-value {
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    min-width: 58px;
    text-align: right;
}

.quiz-topbar-fancy-timer-danger {
    animation: quizTimerDangerPulse 1s infinite;
}

@media (max-width: 768px) {
    .quiz-topbar-fancy-timer {
        width: 100%;
        justify-content: center;
        padding: 10px 14px;
    }

    .quiz-topbar-fancy-timer-label {
        font-size: 0.8rem;
    }

    .quiz-topbar-fancy-timer-value {
        font-size: 0.95rem;
    }
}

[data-word-gid] {
    border-radius: 0.28em;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.quiz-token-highlight-yellow {
    background: linear-gradient(180deg, rgba(255,245,157,0.22) 0%, rgba(250,204,21,0.72) 100%);
    box-shadow: inset 0 0 0 1px rgba(234,179,8,0.15);
    border-radius: 0.28em;
    padding: 0.02em 0.04em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.quiz-token-highlight-green {
    background: linear-gradient(180deg, rgba(187,247,208,0.18) 0%, rgba(74,222,128,0.62) 100%);
    box-shadow: inset 0 0 0 1px rgba(34,197,94,0.15);
    border-radius: 0.28em;
    padding: 0.02em 0.04em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.quiz-token-highlight-pink {
    background: linear-gradient(180deg, rgba(251,207,232,0.18) 0%, rgba(244,114,182,0.60) 100%);
    box-shadow: inset 0 0 0 1px rgba(236,72,153,0.15);
    border-radius: 0.28em;
    padding: 0.02em 0.04em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}


.module-header-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.module-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    line-height: 1;
}

.module-badge-open {
    background: rgba(91, 76, 240, 0.10);
    color: #5b4cf0;
}

.module-badge-complete {
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
}

.module-badge-locked {
    background: rgba(148, 163, 184, 0.18);
    color: #475569;
}

.module-header.disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.module-block.module-locked .module-items {
    pointer-events: none;
}

.item-link.locked {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.15);
}

.item-link.locked:hover {
    transform: none !important;
}

.item-link.done .item-link-title {
    opacity: 0.92;
}

.content-enter {
    animation: fadeSlideIn 0.35s ease;
}

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hover-lift {
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.hover-lift:hover {
    transform: translateY(-3px);
}

.course-progress-fill {
    transition: width 0.35s ease;
}

.soft-success-box {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    background: #ecfdf5;
    color: #166534;
    border: 1px solid #bbf7d0;
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-weight: 600;
}

.soft-success-box.visible {
    opacity: 1;
    transform: translateY(0);
}

.instructor-review-summary {
    padding: 22px;
    border-radius: 22px;
}

.review-summary-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.review-summary-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.review-type-pill,
.review-status-pill,
.question-type-pill,
.manual-needed-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.03em;
    border: 1px solid transparent;
    white-space: nowrap;
}

.review-type-pill {
    background: #eef2ff;
    color: #4338ca;
    border-color: #c7d2fe;
}

.review-status-success {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

.review-status-warning {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fdba74;
}

.review-status-neutral {
    background: #f8fafc;
    color: #475569;
    border-color: #cbd5e1;
}

.result-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

.result-stat-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.04);
}

.result-stat-card-highlight {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    border-color: transparent;
}

.result-stat-label {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
}

.result-stat-card-highlight .result-stat-label,
.result-stat-card-highlight .result-stat-value,
.result-stat-card-highlight .result-stat-sub {
    color: #ffffff;
}

.result-stat-value {
    margin-top: 8px;
    font-size: 28px;
    line-height: 1.1;
    font-weight: 900;
    color: #0f172a;
}

.result-stat-sub {
    margin-top: 6px;
    font-size: 13px;
    color: #64748b;
}

.review-summary-feedback {
    margin-top: 16px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
}

.review-summary-feedback-label {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    margin-bottom: 6px;
}

.review-summary-feedback-text {
    color: #0f172a;
    line-height: 1.6;
}

.review-question-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.review-question-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.question-type-pill {
    background: #f8fafc;
    color: #334155;
    border-color: #e2e8f0;
}

.manual-needed-pill {
    background: #fef3c7;
    color: #92400e;
    border-color: #fcd34d;
}

.question-score-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.question-score-chip {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 14px;
    padding: 10px 12px;
}

.question-score-chip span {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.question-score-chip strong {
    display: block;
    font-size: 16px;
    color: #0f172a;
    font-weight: 800;
}

.question-score-chip-total {
    background: #eef2ff;
    border-color: #c7d2fe;
}

.question-score-chip-total strong {
    color: #3730a3;
}

@media (max-width: 768px) {
    .result-stat-value {
        font-size: 24px;
    }

    .review-question-head {
        flex-direction: column;
        align-items: stretch;
    }
}


.review-answer-block {
    margin-top: 14px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 14px;
    overflow: hidden;
}

.review-answer-label {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    background: #eef2ff;
    border-bottom: 1px solid #dbeafe;
}

.review-answer-content {
    padding: 16px;
    color: #1e293b;
    line-height: 1.8;
    font-size: 15px;
}

.review-answer-content p {
    margin: 0 0 14px 0;
}

.review-answer-content p:last-child {
    margin-bottom: 0;
}

.review-answer-essay {
    white-space: normal;
    word-break: break-word;
}

.review-empty-text {
    margin: 0;
    color: #94a3b8;
    font-style: italic;
}


/* =========================
   TABLE MANUAL INPUT
========================= */

.inline-marker-chip.marker-manual-input {
    background: rgba(245, 158, 11, 0.14);
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, 0.30);
}

.excel-table-cell.cell-type-manual_input,
.cell-type-manual_input .excel-table-cell-inner {
    background: #fff7ed;
}

.table-cell-manual_input {
    min-width: 180px;
}

.table-marker-manual-item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
}

.table-marker-manual-item .table-answer-number-badge {
    margin-right: 0;
    flex-shrink: 0;
}

.table-marker-manual-item .table-manual-input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 1;
}

.table-manual-input::placeholder {
    color: #94a3b8;
}


/* =========================
   INSTRUCTOR COURSE LIST VIEW
========================= */

.instructor-course-search-card {
    margin-bottom: 20px;
}

.instructor-course-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: end;
}

.instructor-course-search-input {
    min-width: 0;
}

.instructor-course-search-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.instructor-course-list-head {
    margin-bottom: 16px;
}

.instructor-course-list-title {
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1.4;
}

.instructor-course-list-desc {
    margin-top: 4px;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 620px;
}

.instructor-course-mode-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    border: 1px solid #c7d2fe;
    font-size: 12px;
    font-weight: 800;
}

.instructor-course-list-table td {
    vertical-align: top;
}

/* =========================
   INSTRUCTOR COURSE DETAIL COVER
========================= */

.instructor-course-detail-card {
    margin-bottom: 28px;
}

.instructor-course-detail-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px;
    gap: 24px;
    align-items: center;
}

.instructor-course-detail-title {
    margin: 10px 0 8px 0;
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--text-dark);
    line-height: 1.25;
}

.instructor-course-detail-desc {
    margin: 0;
    color: #475569;
    line-height: 1.7;
    max-width: 780px;
}

.instructor-course-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

.instructor-course-detail-cover-wrap {
    display: flex;
    justify-content: flex-end;
}

.instructor-course-detail-cover {
    width: 150px;
    height: 205px;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.60);
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.18);
}

/* =========================
   STRONGER PAGINATION ACTIVE STATE
========================= */

.pagination-wrap {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    overflow-x: auto;
}

.pagination-wrap .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination-wrap .pagination li {
    list-style: none;
}

.pagination-wrap .pagination a,
.pagination-wrap .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #dbe3f0;
    background: #ffffff;
    color: var(--text-dark);
    font-weight: 700;
    text-decoration: none;
    box-sizing: border-box;
}

.pagination-wrap .pagination .active a,
.pagination-wrap .pagination .active span,
.pagination-wrap .pagination .page-item.active .page-link,
.pagination-wrap .pagination a:hover {
    background: var(--gradient-main);
    color: #ffffff;
    border-color: transparent;
}

.pagination-wrap .pagination .disabled a,
.pagination-wrap .pagination .disabled span {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .instructor-course-search-row {
        grid-template-columns: 1fr;
    }

    .instructor-course-search-actions {
        justify-content: flex-start;
    }

    .instructor-course-detail-content {
        grid-template-columns: 1fr;
    }

    .instructor-course-detail-cover-wrap {
        justify-content: flex-start;
    }

    .instructor-course-detail-cover {
        width: 120px;
        height: 165px;
    }
}


/* =========================
   INSTRUCTOR STUDENT MASTERLIST
========================= */

.instructor-student-filter-card {
    margin-bottom: 20px;
}

.instructor-student-filter-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: end;
}

.instructor-student-filter-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.instructor-student-masterlist-table td {
    vertical-align: middle;
}

.student-progress-cell {
    min-width: 230px;
}

.student-progress-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
    font-size: 13px;
    color: #64748b;
}

.student-progress-meta strong {
    color: #17153a;
}

.student-progress-bar {
    width: 100%;
    height: 10px;
    background: #ddd6fe;
    border-radius: 999px;
    overflow: hidden;
}

.student-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #6d5efc, #8b5cf6, #ec4899);
    border-radius: 999px;
    transition: width 0.35s ease;
}

@media (max-width: 768px) {
    .instructor-student-filter-row {
        grid-template-columns: 1fr;
    }

    .instructor-student-filter-actions {
        justify-content: flex-start;
    }

    .student-progress-cell {
        min-width: 180px;
    }
}


/* =========================
   ADMIN COURSE SEARCH
========================= */
.admin-course-search-row {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    gap: 14px;
    align-items: end;
}

.admin-course-search-input {
    min-width: 0;
}

.admin-course-search-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding-bottom: 1px;
}

@media (max-width: 768px) {
    .admin-course-search-row {
        grid-template-columns: 1fr;
    }

    .admin-course-search-actions {
        justify-content: flex-start;
    }
}


.ai-feedback-action-row {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ai-feedback-status {
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
}

.ai-feedback-status.ai-feedback-error {
    color: #b91c1c;
}

.ai-essay-feedback-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

.ai-ielts-panel {
    border: 1px solid #c7d2fe;
    background: linear-gradient(135deg, #eef2ff 0%, #fdf2f8 100%);
}

.ai-feedback-status {
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
}

.ai-feedback-status.ai-feedback-error {
    color: #b91c1c;
}

#generateIeltsAiFeedbackBtn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

/* =========================
   USER ROLE CHECKBOX CARDS
========================= */
.form-section {
    margin-top: 24px;
}

.form-section-helper {
    margin: 4px 0 14px;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.checkbox-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 14px 16px;
    border: 1px solid #d7dfeb;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.86);
    cursor: pointer;
    transition: all 0.22s ease;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.checkbox-card:hover {
    border-color: var(--primary);
    background: #ffffff;
    box-shadow: 0 12px 26px rgba(91, 76, 240, 0.12);
    transform: translateY(-1px);
}

.checkbox-card input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
    flex-shrink: 0;
}

.checkbox-card span {
    font-weight: 800;
    color: var(--text-dark);
}

.checkbox-card.is-selected {
    border-color: var(--primary);
    background: var(--gradient-soft);
    box-shadow: 0 12px 26px rgba(91, 76, 240, 0.12);
}

.checkbox-card.is-disabled {
    opacity: 0.48;
    cursor: not-allowed;
    background: #f8fafc;
    transform: none;
    box-shadow: none;
}

.checkbox-card.is-disabled input,
.checkbox-card.is-disabled span {
    cursor: not-allowed;
}

/* =========================
   USER ROLE BADGES
========================= */
.role-badge-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.badge-role-admin {
    background: #eef2ff;
    color: #4338ca;
}

.badge-role-instructor {
    background: #fdf2f8;
    color: #be185d;
}

.badge-role-student {
    background: #ecfdf5;
    color: #047857;
}


/* =========================
   INSTRUCTOR QUIZ ATTEMPT DRILLDOWN
========================= */

.instructor-quiz-student-table td {
    vertical-align: middle;
}

.student-detail-row td {
    padding: 0 !important;
    background: #f8fafc;
}

.student-detail-panel {
    padding: 18px;
    background:
        radial-gradient(circle at top left, rgba(91, 76, 240, 0.08), transparent 26%),
        radial-gradient(circle at bottom right, rgba(217, 70, 161, 0.07), transparent 22%),
        #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.quiz-drill-title {
    font-size: 1rem;
    font-weight: 900;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.quiz-drill-subtitle {
    color: #64748b;
    font-size: 0.9rem;
    margin-bottom: 14px;
}

.quiz-drill-stack,
.quiz-module-list {
    display: grid;
    gap: 12px;
}

.quiz-drill-card {
    background: rgba(255,255,255,0.92);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.quiz-drill-toggle {
    width: 100%;
    border: none;
    background: #ffffff;
    padding: 14px 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    text-align: left;
    transition: background 0.2s ease;
}

.quiz-drill-toggle:hover {
    background: linear-gradient(135deg, #eef2ff 0%, #fdf2f8 100%);
}

.quiz-drill-toggle strong {
    display: block;
    color: #0f172a;
    font-size: 0.96rem;
    line-height: 1.4;
}

.quiz-drill-toggle small {
    display: block;
    color: #64748b;
    font-size: 0.82rem;
    margin-top: 3px;
}

.quiz-drill-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.quiz-drill-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 9px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    border: 1px solid #c7d2fe;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.quiz-drill-pill-warning {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fdba74;
}

.quiz-drill-pill-success {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

.quiz-course-panel,
.quiz-module-panel {
    padding: 14px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.quiz-module-card {
    border-color: #dbeafe;
}

.quiz-module-card .quiz-drill-toggle {
    background: #fbfdff;
}

.quiz-attempt-table-wrap {
    overflow-x: auto;
    border-radius: 14px;
}

.quiz-attempt-inner-table {
    background: #ffffff;
    font-size: 0.9rem;
}

.quiz-drill-loading,
.quiz-drill-empty {
    padding: 14px 16px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    color: #64748b;
    font-weight: 700;
}

@media (max-width: 768px) {
    .quiz-drill-toggle {
        flex-direction: column;
        align-items: stretch;
    }

    .quiz-drill-pills {
        justify-content: flex-start;
    }
}


/* =========================
   QUIZ ATTEMPTS CLEAN TABLE
========================= */

.attempt-summary-cell {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.attempt-summary-cell strong {
    color: #0f172a;
    font-weight: 900;
}

.attempt-summary-mini {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    font-weight: 800;
}

.attempt-mini-pending,
.attempt-mini-graded {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
}

.attempt-mini-pending {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
}

.attempt-mini-graded {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

/* =========================
   STUDENT ANNOUNCEMENT
========================= */

.student-announcement-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 24px;
    padding: 18px 20px;
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(238, 242, 255, 0.96) 0%, rgba(253, 242, 248, 0.96) 100%);
    border: 1px solid #c7d2fe;
    box-shadow: 0 12px 30px rgba(91, 76, 240, 0.10);
}

.student-announcement-icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    background: var(--gradient-main);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 10px 22px rgba(91, 76, 240, 0.22);
}

.student-announcement-content {
    min-width: 0;
}

.student-announcement-title {
    font-size: 1.05rem;
    font-weight: 900;
    color: #17153a;
    margin-bottom: 6px;
}

.student-announcement-message {
    color: #334155;
    line-height: 1.7;
    font-size: 0.96rem;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .student-announcement-card {
        grid-template-columns: 1fr;
    }

    .student-announcement-icon {
        width: 46px;
        height: 46px;
        border-radius: 16px;
        font-size: 22px;
    }
}

.student-announcement-rich {
    line-height: 1.7;
}

.student-announcement-rich p {
    margin: 0 0 12px 0;
}

.student-announcement-rich p:last-child {
    margin-bottom: 0;
}

.student-announcement-rich ul,
.student-announcement-rich ol {
    margin: 10px 0 10px 22px;
    padding: 0;
}

.student-announcement-rich li {
    margin-bottom: 6px;
}

.student-announcement-rich a {
    color: var(--primary-dark);
    font-weight: 700;
    text-decoration: underline;
}

.student-announcement-rich img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 12px 0;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
}

.student-announcement-rich table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    background: #ffffff;
}

.student-announcement-rich table td,
.student-announcement-rich table th {
    border: 1px solid #cbd5e1;
    padding: 8px 10px;
    vertical-align: top;
}

.student-announcement-rich blockquote {
    margin: 14px 0;
    padding: 12px 14px;
    border-left: 4px solid var(--primary);
    background: rgba(255,255,255,0.55);
    border-radius: 12px;
    color: #334155;
}

/* =========================================================
   FS LMS Grade Card - Isolated CSS
   Use only for:
   app/Views/instructor/grade_cards/ielts_card.php
   app/Views/instructor/grade_cards/regular_card.php

   Prefix: fsgc-
========================================================= */

.fsgc-print-page {
    width: 100%;
}

.fsgc-page-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.fsgc-sheet {
    max-width: 980px;
    margin: 0 auto 22px auto;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

/* =========================================================
   PRINTABLE LOGO HEADER
========================================================= */

.fsgc-logo-header {
    display: grid;
    grid-template-columns: 170px 1fr 170px;
    gap: 18px;
    align-items: center;
    border-bottom: 2px solid #7c3aed;
    padding-bottom: 14px;
    margin-bottom: 18px;
}

.fsgc-logo-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fsgc-logo {
    max-width: 150px;
    max-height: 150px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.fsgc-logo-center {
    text-align: center;
}

.fsgc-logo-title-only {
    margin: 0;
    font-size: 30px;
    line-height: 1.2;
    color: #111827;
    font-weight: 900;
}

.fsgc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    color: #ffffff;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    letter-spacing: 0.04em;
}

.fsgc-badge-main {
    font-size: 15px;
    padding: 12px 22px;
    box-shadow: 0 10px 22px rgba(124, 58, 237, 0.18);
}

/* =========================================================
   STUDENT / COURSE INFO
========================================================= */

.fsgc-info-grid {
    display: grid;
    grid-template-columns: 1.2fr 1.4fr 0.8fr;
    gap: 10px;
    margin-bottom: 14px;
}

.fsgc-info-box {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px 12px;
}

.fsgc-info-label {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 900;
    color: #64748b;
    margin-bottom: 3px;
    letter-spacing: 0.04em;
}

.fsgc-info-value {
    font-size: 13px;
    font-weight: 900;
    color: #111827;
    line-height: 1.25;
}

/* =========================================================
   OVERALL RESULT / FINAL GRADE BOX
========================================================= */

.fsgc-highlight-box {
    display: grid;
    grid-template-columns: 1fr 130px;
    align-items: stretch;
    gap: 0;
    background: #ffffff;
    border: 2px solid #7c3aed;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 14px;
}

.fsgc-highlight-main {
    padding: 12px 14px;
    background: linear-gradient(135deg, #eef2ff, #fdf2f8);
}

.fsgc-highlight-label {
    font-size: 13px;
    font-weight: 900;
    color: #4c1d95;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fsgc-highlight-note {
    margin-top: 3px;
    font-size: 11px;
    color: #64748b;
}

.fsgc-highlight-value {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-left: 2px solid #7c3aed;
    font-size: 30px;
    font-weight: 950;
    color: #7c3aed;
    white-space: nowrap;
    padding: 8px;
}

/* =========================================================
   PRINTABLE TABLE
========================================================= */

.fsgc-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.fsgc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    background: #ffffff;
}

.fsgc-table th {
    background: linear-gradient(135deg, #e5e7ff 0%, #f8e8f3 100%);
    color: #4338ca;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 8px 7px;
    border: 1px solid #e5e7eb;
    text-align: left;
}

.fsgc-table td {
    padding: 8px 7px;
    border: 1px solid #e5e7eb;
    vertical-align: top;
    color: #111827;
}

.fsgc-table strong {
    font-weight: 900;
}

.fsgc-score {
    font-size: 15px;
    font-weight: 900;
    color: #111827;
}

.fsgc-score-purple {
    color: #7c3aed;
}

.fsgc-muted {
    color: #64748b;
    font-size: 11px;
}

.fsgc-incomplete {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: #fee2e2;
    color: #991b1b;
    font-size: 10px;
    font-weight: 900;
}

/* =========================================================
   SIGNATURES
========================================================= */

.fsgc-signatures {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 42px;
    margin-top: 42px;
}

.fsgc-signature-line {
    border-top: 1px solid #111827;
    text-align: center;
    padding-top: 7px;
    font-size: 12px;
    font-weight: 800;
    color: #111827;
}

.fsgc-print-note {
    margin-top: 12px;
    font-size: 11px;
    color: #64748b;
    text-align: center;
}

/* =========================================================
   EDIT PANEL
========================================================= */

.fsgc-edit-panel {
    max-width: 980px;
    margin: 0 auto;
}

.fsgc-edit-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

.fsgc-edit-title {
    margin: 0 0 12px 0;
    font-size: 17px;
    font-weight: 900;
    color: #111827;
}

.fsgc-edit-grid {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) minmax(180px, 1fr) minmax(90px, 110px) minmax(180px, 1.2fr);
    gap: 10px;
    align-items: end;
    min-width: 0;
}

.fsgc-regular-edit-grid {
    display: grid;
    grid-template-columns: minmax(140px, 1.2fr) minmax(160px, 1fr) repeat(5, minmax(70px, 90px)) minmax(170px, 1.2fr);
    gap: 10px;
    align-items: end;
    min-width: 0;
}

.fsgc-field {
    min-width: 0;
}

.fsgc-field label {
    display: block;
    font-size: 11px;
    font-weight: 900;
    color: #64748b;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.fsgc-field input,
.fsgc-field select,
.fsgc-field textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 13px;
    background: #ffffff;
}

.fsgc-field textarea {
    min-height: 38px;
    resize: vertical;
}

.fsgc-source-pill {
    display: inline-flex;
    align-items: center;
    margin-top: 6px;
    font-size: 10px;
    font-weight: 900;
    color: #475569;
    background: #f1f5f9;
    border-radius: 999px;
    padding: 4px 8px;
}

/* =========================================================
   INSTRUCTOR ATTEMPT FEEDBACK BOX
========================================================= */

.fsgc-review-feedback-box {
    margin-top: 10px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: 10px 12px;
}

.fsgc-review-feedback-label {
    font-size: 11px;
    font-weight: 900;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 5px;
}

.fsgc-review-feedback-text {
    font-size: 13px;
    color: #334155;
    line-height: 1.45;
    white-space: pre-wrap;
}

.fsgc-review-feedback-empty {
    color: #94a3b8;
    font-style: italic;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {
    .fsgc-logo-header {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .fsgc-logo {
        max-width: 120px;
        max-height: 120px;
    }

    .fsgc-info-grid,
    .fsgc-edit-grid,
    .fsgc-regular-edit-grid {
        grid-template-columns: 1fr;
    }

    .fsgc-highlight-box {
        grid-template-columns: 1fr;
    }

    .fsgc-highlight-value {
        border-left: 0;
        border-top: 2px solid #7c3aed;
    }
}

/* =========================================================
   PRINT STYLE - COLORED A4 PRINT
========================================================= */

@media print {
    @page {
        size: A4 portrait;
        margin: 10mm;
    }

    body:has(.fsgc-print-page),
    body:has(.fsgc-print-page) * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body:has(.fsgc-print-page) {
        background: #ffffff;
        color: #111827;
        display: block;
    }

    body:has(.fsgc-print-page) header,
    body:has(.fsgc-print-page) footer,
    body:has(.fsgc-print-page) nav,
    body:has(.fsgc-print-page) .site-topbar,
    body:has(.fsgc-print-page) .site-footer,
    body:has(.fsgc-print-page) .page-header,
    body:has(.fsgc-print-page) .fsgc-no-print,
    body:has(.fsgc-print-page) .alert-custom {
        display: none;
    }

    body:has(.fsgc-print-page) .page-wrapper {
        margin: 0;
        padding: 0;
        max-width: none;
        width: 100%;
    }

    body:has(.fsgc-print-page) .fsgc-sheet {
        max-width: none;
        width: 100%;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: #ffffff;
    }

    body:has(.fsgc-print-page) .fsgc-logo-header {
        grid-template-columns: 135px 1fr 135px;
        gap: 10px;
        padding-bottom: 10px;
        margin-bottom: 12px;
        border-bottom: 2px solid #7c3aed;
    }

    body:has(.fsgc-print-page) .fsgc-logo {
        max-width: 120px;
        max-height: 120px;
    }

    body:has(.fsgc-print-page) .fsgc-badge,
    body:has(.fsgc-print-page) .fsgc-badge-main {
        background: linear-gradient(135deg, #7c3aed, #ec4899);
        color: #ffffff;
        font-size: 12px;
        padding: 9px 16px;
        border-radius: 999px;
        box-shadow: none;
    }

    body:has(.fsgc-print-page) .fsgc-info-grid {
        grid-template-columns: 1.2fr 1.4fr 0.8fr;
        gap: 7px;
        margin-bottom: 10px;
    }

    body:has(.fsgc-print-page) .fsgc-info-box {
        padding: 7px 8px;
        border-radius: 8px;
        background: #f8fafc;
        border: 1px solid #e5e7eb;
    }

    body:has(.fsgc-print-page) .fsgc-info-label {
        font-size: 8.5px;
        color: #64748b;
    }

    body:has(.fsgc-print-page) .fsgc-info-value {
        font-size: 11px;
        color: #111827;
    }

    body:has(.fsgc-print-page) .fsgc-highlight-box {
        grid-template-columns: 1fr 105px;
        border: 2px solid #7c3aed;
        border-radius: 12px;
        margin: 10px 0 12px 0;
        overflow: hidden;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    body:has(.fsgc-print-page) .fsgc-highlight-main {
        background: linear-gradient(135deg, #eef2ff, #fdf2f8);
        padding: 8px 10px;
    }

    body:has(.fsgc-print-page) .fsgc-highlight-label {
        font-size: 12px;
        color: #4c1d95;
    }

    body:has(.fsgc-print-page) .fsgc-highlight-note {
        display: none;
    }

    body:has(.fsgc-print-page) .fsgc-highlight-value {
        min-height: 42px;
        border-left: 2px solid #7c3aed;
        border-radius: 0;
        background: #ffffff;
        font-size: 26px;
        color: #7c3aed;
        padding: 0 8px;
    }

    body:has(.fsgc-print-page) .fsgc-table {
        font-size: 10.5px;
        background: #ffffff;
    }

    body:has(.fsgc-print-page) .fsgc-table th {
        padding: 5px 5px;
        border-color: #e5e7eb;
        background: linear-gradient(135deg, #e5e7ff 0%, #f8e8f3 100%);
        color: #4338ca;
    }

    body:has(.fsgc-print-page) .fsgc-table td {
        padding: 5px 5px;
        border-color: #e5e7eb;
        color: #111827;
    }

    body:has(.fsgc-print-page) .fsgc-score {
        font-size: 12px;
        color: #111827;
    }

    body:has(.fsgc-print-page) .fsgc-score-purple {
        color: #7c3aed;
    }

    body:has(.fsgc-print-page) .fsgc-incomplete {
        background: #fee2e2;
        color: #991b1b;
        border-radius: 999px;
        padding: 2px 6px;
        font-size: 9px;
    }

    body:has(.fsgc-print-page) .fsgc-signatures {
        margin-top: 34px;
        gap: 36px;
    }

    body:has(.fsgc-print-page) .fsgc-signature-line {
        font-size: 10.5px;
        color: #111827;
    }

    body:has(.fsgc-print-page) .fsgc-print-note {
        font-size: 9.5px;
        color: #64748b;
    }
}

/* =========================
   ADMIN COURSE ASSIGNMENT SEARCHABLE DROPDOWN
========================= */

.assignment-combo-wrap {
    position: relative;
}

.assignment-combo-input-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.assignment-combo-panel {
    position: absolute;
    z-index: 60;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    max-height: 280px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #d7dfeb;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
    padding: 8px;
    display: none;
}

.assignment-combo-panel.is-open {
    display: block;
}

.assignment-combo-option {
    width: 100%;
    border: none;
    background: #ffffff;
    text-align: left;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    color: #0f172a;
    font-weight: 700;
    line-height: 1.35;
}

.assignment-combo-option:hover,
.assignment-combo-option.is-active {
    background: linear-gradient(135deg, #eef2ff 0%, #fdf2f8 100%);
    color: #312e81;
}

.assignment-combo-option small {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-weight: 600;
}

.assignment-combo-empty {
    padding: 12px;
    color: #64748b;
    font-weight: 700;
}

.assignment-combo-clear {
    white-space: nowrap;
}

.assignment-combo-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12) !important;
}

@media (max-width: 768px) {
    .assignment-combo-panel {
        max-height: 240px;
    }

    .assignment-combo-input-wrap {
        grid-template-columns: 1fr;
    }

    .assignment-combo-clear {
        width: 100%;
    }
}

/* =========================
   STUDENT DASHBOARD ONLINE MINI BADGE
========================= */

.student-dashboard-wrapper {
    position: relative;
}

.student-online-mini-badge {
    position: absolute;
    top: 2px;
    right: 20px;
    z-index: 5;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 5px 9px;
    border-radius: 999px;

    background: rgba(220, 252, 231, 0.85);
    color: #166534;
    border: 1px solid #bbf7d0;

    font-size: 11px;
    font-weight: 800;
    line-height: 1;

    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}

.student-online-mini-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #22c55e;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .student-online-mini-badge {
        position: static;
        margin-bottom: 14px;
    }
}

/* =========================
   ADMIN ONLINE STUDENTS MINI POPUP
========================= */

.admin-dashboard-wrapper {
    position: relative;
}

.admin-online-mini-btn {
    position: absolute;
    top: 2px;
    right: 20px;
    z-index: 10;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 5px 9px;
    border-radius: 999px;

    background: rgba(220, 252, 231, 0.88);
    color: #166534;
    border: 1px solid #bbf7d0;

    font-size: 11px;
    font-weight: 900;
    line-height: 1;

    cursor: pointer;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}

.admin-online-mini-btn:hover {
    background: #dcfce7;
    transform: translateY(-1px);
}

.admin-online-mini-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #22c55e;
    flex-shrink: 0;
}

.admin-online-floating-panel {
    position: absolute;
    top: 34px;
    right: 20px;
    z-index: 20;

    width: min(360px, calc(100vw - 40px));
    max-height: 360px;
    overflow-y: auto;

    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #dbe3f0;
    border-radius: 16px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
    padding: 12px;

    display: none;
}

.admin-online-floating-panel.is-open {
    display: block;
}

.admin-online-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.admin-online-panel-title {
    font-size: 13px;
    font-weight: 900;
    color: #0f172a;
}

.admin-online-close-btn {
    border: none;
    background: #f1f5f9;
    color: #334155;
    border-radius: 999px;
    width: 26px;
    height: 26px;
    cursor: pointer;
    font-weight: 900;
}

.admin-online-close-btn:hover {
    background: #e2e8f0;
}

.admin-online-list {
    display: grid;
    gap: 8px;
}

.admin-online-item {
    padding: 9px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}

.admin-online-name {
    font-size: 13px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.35;
}

.admin-online-email,
.admin-online-time {
    font-size: 11px;
    color: #64748b;
    line-height: 1.45;
    word-break: break-word;
}

.admin-online-empty {
    font-size: 12px;
    color: #64748b;
    padding: 8px;
}

@media (max-width: 768px) {
    .admin-online-mini-btn {
        position: static;
        margin-bottom: 14px;
    }

    .admin-online-floating-panel {
        position: static;
        width: 100%;
        margin-bottom: 18px;
    }
}


/* =========================================================
   Deleted Student Grade Card Archive Print
========================================================= */

.dsgc-sheet {
    max-width: 980px;
    margin: 0 auto 22px auto;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.dsgc-title-main {
    margin: 0;
    font-size: 28px;
    line-height: 1.15;
    color: #111827;
    font-weight: 950;
}

.dsgc-title-sub {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    color: #ffffff;
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.dsgc-archive-note {
    margin-top: 10px;
    font-size: 11px;
    color: #64748b;
    text-align: center;
}

@media print {
    body:has(.dsgc-print-page),
    body:has(.dsgc-print-page) * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body:has(.dsgc-print-page) {
        background: #ffffff;
        display: block;
    }

    body:has(.dsgc-print-page) header,
    body:has(.dsgc-print-page) footer,
    body:has(.dsgc-print-page) nav,
    body:has(.dsgc-print-page) .site-topbar,
    body:has(.dsgc-print-page) .site-footer,
    body:has(.dsgc-print-page) .page-header,
    body:has(.dsgc-print-page) .fsgc-no-print,
    body:has(.dsgc-print-page) .alert-custom {
        display: none;
    }

    body:has(.dsgc-print-page) .page-wrapper {
        margin: 0;
        padding: 0;
        max-width: none;
        width: 100%;
    }

    body:has(.dsgc-print-page) .dsgc-sheet {
        max-width: none;
        width: 100%;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    body:has(.dsgc-print-page) .fsgc-logo-header {
        grid-template-columns: 110px 1fr 110px;
        gap: 8px;
        padding-bottom: 8px;
        margin-bottom: 10px;
        border-bottom: 2px solid #7c3aed;
    }

    body:has(.dsgc-print-page) .fsgc-logo {
        max-width: 95px;
        max-height: 95px;
    }

    body:has(.dsgc-print-page) .dsgc-title-main {
        font-size: 24px;
    }

    body:has(.dsgc-print-page) .dsgc-title-sub {
        font-size: 11px;
        padding: 7px 14px;
        box-shadow: none;
    }

    body:has(.dsgc-print-page) .fsgc-info-grid {
        grid-template-columns: 1.2fr 1.4fr 0.8fr;
        gap: 6px;
        margin-bottom: 8px;
    }

    body:has(.dsgc-print-page) .fsgc-info-box {
        padding: 6px 8px;
        border-radius: 8px;
    }

    body:has(.dsgc-print-page) .fsgc-info-label {
        font-size: 8px;
    }

    body:has(.dsgc-print-page) .fsgc-info-value {
        font-size: 10.5px;
    }

    body:has(.dsgc-print-page) .fsgc-highlight-box {
        grid-template-columns: 1fr 95px;
        border-radius: 10px;
        margin: 8px 0 10px 0;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    body:has(.dsgc-print-page) .fsgc-highlight-main {
        padding: 7px 9px;
    }

    body:has(.dsgc-print-page) .fsgc-highlight-label {
        font-size: 11px;
    }

    body:has(.dsgc-print-page) .fsgc-highlight-note {
        display: none;
    }

    body:has(.dsgc-print-page) .fsgc-highlight-value {
        min-height: 38px;
        font-size: 23px;
        padding: 0 6px;
    }

    body:has(.dsgc-print-page) .fsgc-review-feedback-box {
        margin-top: 8px;
        padding: 7px 9px;
        border-radius: 8px;
    }

    body:has(.dsgc-print-page) .fsgc-review-feedback-label {
        font-size: 9px;
        margin-bottom: 3px;
    }

    body:has(.dsgc-print-page) .fsgc-review-feedback-text {
        font-size: 10.5px;
        line-height: 1.35;
    }

    body:has(.dsgc-print-page) .fsgc-table {
        font-size: 9.5px;
    }

    body:has(.dsgc-print-page) .fsgc-table th {
        padding: 4px 4px;
        font-size: 8.5px;
    }

    body:has(.dsgc-print-page) .fsgc-table td {
        padding: 4px 4px;
    }

    body:has(.dsgc-print-page) .fsgc-score {
        font-size: 10.5px;
    }

    body:has(.dsgc-print-page) .fsgc-muted {
        font-size: 8.5px;
    }

    body:has(.dsgc-print-page) .dsgc-archive-note {
        font-size: 8.5px;
        margin-top: 8px;
    }
}

/* =========================================================
   User Activation Expiry Modal
========================================================= */

.user-expiry-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.58);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.user-expiry-modal-overlay.is-open {
    display: flex;
}

.user-expiry-modal-box {
    width: 100%;
    max-width: 520px;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

.user-expiry-modal-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    background: linear-gradient(135deg, #eef2ff, #fdf2f8);
    border-bottom: 1px solid #e5e7eb;
}

.user-expiry-modal-title {
    margin: 0;
    font-size: 20px;
    font-weight: 900;
    color: #111827;
}

.user-expiry-modal-subtitle {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
}

.user-expiry-modal-close {
    border: 0;
    background: transparent;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    color: #64748b;
}

.user-expiry-modal-close:hover {
    color: #111827;
}

.user-expiry-modal-body {
    padding: 18px 22px;
    display: grid;
    gap: 10px;
}

.user-expiry-option-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 12px 14px;
    cursor: pointer;
    background: #ffffff;
}

.user-expiry-option-card:hover {
    background: #f8fafc;
    border-color: #c4b5fd;
}

.user-expiry-option-card input {
    margin-top: 4px;
}

.user-expiry-option-card strong {
    display: block;
    color: #111827;
    font-size: 15px;
}

.user-expiry-option-card small {
    display: block;
    color: #64748b;
    margin-top: 2px;
    line-height: 1.4;
}

.user-expiry-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px 20px;
    border-top: 1px solid #e5e7eb;
}

.user-expiry-meta {
    font-size: 12px;
    color: #64748b;
    margin-top: 5px;
    line-height: 1.4;
}

.user-expiry-meta-expired {
    color: #be185d;
}

@media (max-width: 540px) {
    .user-expiry-modal-box {
        max-width: 100%;
    }

    .user-expiry-modal-header,
    .user-expiry-modal-body,
    .user-expiry-modal-actions {
        padding-left: 16px;
        padding-right: 16px;
    }

    .user-expiry-modal-actions {
        flex-direction: column-reverse;
    }

    .user-expiry-modal-actions .btn-custom {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   Student Course Player - Final Fixed Player Layout
   Sidebar and lesson content scroll separately.
   Smaller bottom spacing version.
========================================================= */

@media (min-width: 901px) {
    body:has(.player-layout) {
        height: 100vh;
        min-height: 100vh;
        overflow: hidden;
    }

    body:has(.player-layout) .site-topbar {
        flex: 0 0 auto;
    }

    body:has(.player-layout) .site-footer {
        flex: 0 0 auto;
        margin-top: 0;
    }

    body:has(.player-layout) .page-main {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    body:has(.player-layout) .player-layout {
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
        display: grid;
        grid-template-columns: 320px minmax(0, 1fr);
        overflow: hidden;
        align-items: stretch;
    }

    body:has(.player-layout) .sidebar {
        height: 100%;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        overflow-x: hidden;
        box-sizing: border-box;
        padding-bottom: 45px;
        scrollbar-width: thin;
        scrollbar-color: #c4b5fd #f1f5f9;
    }

    body:has(.player-layout) .sidebar::after {
        content: "";
        display: block;
        height: 20px;
    }

    body:has(.player-layout) .content {
        height: 100%;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        overflow-x: hidden;
        box-sizing: border-box;
        padding-bottom: 50px;
        scroll-behavior: smooth;
    }

    body:has(.player-layout) .content::after {
        content: "";
        display: block;
        height: 20px;
    }

    body:has(.player-layout) .lesson-shell {
        margin-bottom: 20px;
    }

    body:has(.player-layout) .sidebar::-webkit-scrollbar,
    body:has(.player-layout) .content::-webkit-scrollbar {
        width: 8px;
    }

    body:has(.player-layout) .sidebar::-webkit-scrollbar-track,
    body:has(.player-layout) .content::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 999px;
    }

    body:has(.player-layout) .sidebar::-webkit-scrollbar-thumb,
    body:has(.player-layout) .content::-webkit-scrollbar-thumb {
        background: #c4b5fd;
        border-radius: 999px;
    }

    body:has(.player-layout) .sidebar::-webkit-scrollbar-thumb:hover,
    body:has(.player-layout) .content::-webkit-scrollbar-thumb:hover {
        background: #a78bfa;
    }
}

/* Mobile/tablet: keep normal page flow */
@media (max-width: 900px) {
    body:has(.player-layout) {
        height: auto;
        min-height: 100vh;
        overflow: auto;
    }

    body:has(.player-layout) .site-footer {
        margin-top: 40px;
    }

    body:has(.player-layout) .page-main {
        display: block;
        overflow: visible;
        min-height: auto;
    }

    body:has(.player-layout) .player-layout {
        display: block;
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    body:has(.player-layout) .sidebar {
        height: auto;
        max-height: none;
        overflow: visible;
        padding-bottom: 15px;
    }

    body:has(.player-layout) .sidebar::after {
        content: "";
        display: block;
        height: 12px;
    }

    body:has(.player-layout) .content {
        height: auto;
        max-height: none;
        overflow: visible;
        padding-bottom: 22px;
    }

    body:has(.player-layout) .content::after {
        content: "";
        display: block;
        height: 12px;
    }

    body:has(.player-layout) .lesson-shell {
        margin-bottom: 15px;
    }
}

/* =========================================================
   Quiz Essay Word Counter
========================================================= */

.essay-word-counter {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: linear-gradient(135deg, #eef2ff 0%, #fdf2f8 100%);
    border: 1px solid #ddd6fe;
    color: #334155;
    font-size: 0.92rem;
}

.essay-word-counter-main {
    font-weight: 800;
    color: #312e81;
}

.essay-word-count {
    font-size: 1.05rem;
}

.essay-word-counter-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.essay-word-minimum {
    color: #475569;
    font-weight: 700;
}

.essay-word-status {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
}

.essay-word-status-neutral {
    background: #e0e7ff;
    color: #3730a3;
}

.essay-word-status-warning {
    background: #fef3c7;
    color: #92400e;
}

.essay-word-status-good {
    background: #dcfce7;
    color: #166534;
}

/* Dark mode */
body[data-theme="dark"] .essay-word-counter {
    background: linear-gradient(135deg, rgba(109, 94, 252, 0.24), rgba(236, 72, 153, 0.14));
    border-color: rgba(196, 181, 253, 0.32);
    color: #e5e7eb;
}

body[data-theme="dark"] .essay-word-counter-main {
    color: #f8fafc;
}

body[data-theme="dark"] .essay-word-minimum {
    color: #cbd5e1;
}

body[data-theme="dark"] .essay-word-status-neutral {
    background: rgba(99, 102, 241, 0.26);
    color: #ddd6fe;
}

body[data-theme="dark"] .essay-word-status-warning {
    background: rgba(245, 158, 11, 0.22);
    color: #fde68a;
}

body[data-theme="dark"] .essay-word-status-good {
    background: rgba(22, 101, 52, 0.32);
    color: #bbf7d0;
}

/* =========================================================
   THEME TOGGLE BUTTON
========================================================= */

.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.32);
    background: rgba(255,255,255,0.16);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.92rem;
    cursor: pointer;
    transition: all 0.22s ease;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.14);
}

.theme-toggle-btn:hover {
    background: rgba(255,255,255,0.25);
    transform: translateY(-1px);
}

.theme-toggle-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

/* =========================================================
   DARK MODE ROOT
   Designed to match existing purple/pink/blue glass UI
========================================================= */

body[data-theme="dark"] {
    --bg-main: #0b1020;
    --bg-soft: #111827;
    --bg-card: #111827;

    --text-main: #e5e7eb;
    --text-dark: #f8fafc;
    --text-muted: #b8c2d4;

    --border-color: #334155;

    --primary: #8b7cff;
    --primary-dark: #a78bfa;
    --secondary: #a855f7;
    --accent-pink: #f472b6;
    --accent-blue: #38bdf8;

    --gradient-main: linear-gradient(135deg, #6d5efc 0%, #8b5cf6 50%, #ec4899 100%);
    --gradient-soft: linear-gradient(135deg, rgba(109, 94, 252, 0.18) 0%, rgba(236, 72, 153, 0.16) 100%);

    --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.34);
    --shadow-lg: 0 16px 42px rgba(0, 0, 0, 0.42);

    background:
        radial-gradient(circle at top left, rgba(109, 94, 252, 0.24), transparent 24%),
        radial-gradient(circle at top right, rgba(236, 72, 153, 0.18), transparent 22%),
        radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.12), transparent 20%),
        linear-gradient(180deg, #080d1a 0%, #111827 100%);
    color: var(--text-dark);
}

/* =========================================================
   DARK MODE HEADER / FOOTER
========================================================= */

body[data-theme="dark"] .site-topbar {
    background: linear-gradient(135deg, #312e81 0%, #581c87 48%, #9d174d 100%);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
}

body[data-theme="dark"] .site-footer {
    background: rgba(15, 23, 42, 0.86);
    border-top-color: rgba(148, 163, 184, 0.24);
    color: #cbd5e1;
}

/* =========================================================
   DARK MODE GLASS CARDS
========================================================= */

body[data-theme="dark"] .card-box,
body[data-theme="dark"] .dashboard-card,
body[data-theme="dark"] .dashboard-course-card,
body[data-theme="dark"] .quiz-card,
body[data-theme="dark"] .quiz-result-box,
body[data-theme="dark"] .quiz-start-card,
body[data-theme="dark"] .lesson-shell,
body[data-theme="dark"] .form-card,
body[data-theme="dark"] .matching-builder-panel,
body[data-theme="dark"] .matching-options-box,
body[data-theme="dark"] .matching-prompt-item,
body[data-theme="dark"] .matching-review-item,
body[data-theme="dark"] .recorder-box,
body[data-theme="dark"] .current-file-box,
body[data-theme="dark"] .quiz-info-box,
body[data-theme="dark"] .quiz-rich-box,
body[data-theme="dark"] .quiz-history-item,
body[data-theme="dark"] .group-media-card,
body[data-theme="dark"] .group-content-card,
body[data-theme="dark"] .group-segment-image-card,
body[data-theme="dark"] .group-segment-passage-card,
body[data-theme="dark"] .passage-box {
    background: rgba(15, 23, 42, 0.82);
    border-color: rgba(148, 163, 184, 0.24);
    color: #e5e7eb;
    box-shadow:
        0 14px 38px rgba(0, 0, 0, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body[data-theme="dark"] .card-box::before,
body[data-theme="dark"] .dashboard-card::after,
body[data-theme="dark"] .dashboard-course-card::before {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.06), transparent 42%),
        radial-gradient(circle at top right, rgba(109, 94, 252, 0.18), transparent 28%),
        radial-gradient(circle at bottom left, rgba(236, 72, 153, 0.12), transparent 28%);
}

body[data-theme="dark"] .card-box:hover,
body[data-theme="dark"] .dashboard-card:hover,
body[data-theme="dark"] .dashboard-course-card:hover {
    border-color: rgba(196, 181, 253, 0.36);
    box-shadow:
        0 18px 46px rgba(0, 0, 0, 0.46),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* =========================================================
   DARK MODE TEXT
========================================================= */

body[data-theme="dark"] .page-title,
body[data-theme="dark"] .section-title,
body[data-theme="dark"] .quiz-result-title,
body[data-theme="dark"] .quiz-start-title,
body[data-theme="dark"] .lesson-title,
body[data-theme="dark"] .player-course-title,
body[data-theme="dark"] .course-section-title,
body[data-theme="dark"] .course-progress-title,
body[data-theme="dark"] .question-number,
body[data-theme="dark"] .group-title,
body[data-theme="dark"] .module-title,
body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3,
body[data-theme="dark"] h4,
body[data-theme="dark"] h5,
body[data-theme="dark"] h6 {
    color: #f8fafc;
}

body[data-theme="dark"] .page-subtitle,
body[data-theme="dark"] .player-course-subtitle,
body[data-theme="dark"] .lesson-subtitle,
body[data-theme="dark"] .course-progress-meta,
body[data-theme="dark"] .dashboard-card p,
body[data-theme="dark"] .dashboard-course-card p,
body[data-theme="dark"] .form-helper-text,
body[data-theme="dark"] .item-link-type,
body[data-theme="dark"] .current-file-label,
body[data-theme="dark"] .recorder-help,
body[data-theme="dark"] .quiz-start-subtitle,
body[data-theme="dark"] .quiz-meta-line,
body[data-theme="dark"] .question-points,
body[data-theme="dark"] .table-builder-hint,
body[data-theme="dark"] .group-media-label {
    color: #b8c2d4;
}

body[data-theme="dark"] .lesson-content-text,
body[data-theme="dark"] .question-text-main,
body[data-theme="dark"] .quiz-rich-content,
body[data-theme="dark"] .group-instructions-text,
body[data-theme="dark"] .matching-prompt-text,
body[data-theme="dark"] .passage-box,
body[data-theme="dark"] .current-file-name,
body[data-theme="dark"] .table-static-text,
body[data-theme="dark"] .table-inline-label {
    color: #e5e7eb;
}

body[data-theme="dark"] a:not(.btn-custom) {
    color: #c4b5fd;
}

/* =========================================================
   DARK MODE BUTTONS
========================================================= */

body[data-theme="dark"] .btn-secondary-custom {
    background: rgba(99, 102, 241, 0.18);
    color: #ddd6fe;
    border: 1px solid rgba(196, 181, 253, 0.22);
}

body[data-theme="dark"] .btn-secondary-custom:hover {
    background: rgba(139, 92, 246, 0.28);
    color: #ffffff;
}

body[data-theme="dark"] .btn-dark-custom {
    background: linear-gradient(135deg, #475569, #111827);
    color: #ffffff;
}

/* =========================================================
   DARK MODE FORMS
========================================================= */

body[data-theme="dark"] .form-label-custom {
    color: #e5e7eb;
}

body[data-theme="dark"] .form-control-custom,
body[data-theme="dark"] .quiz-large-essay-textarea,
body[data-theme="dark"] textarea,
body[data-theme="dark"] select,
body[data-theme="dark"] input[type="text"],
body[data-theme="dark"] input[type="email"],
body[data-theme="dark"] input[type="password"],
body[data-theme="dark"] input[type="number"],
body[data-theme="dark"] input[type="date"],
body[data-theme="dark"] input[type="datetime-local"],
body[data-theme="dark"] input[type="file"] {
    background: rgba(15, 23, 42, 0.94);
    border-color: rgba(148, 163, 184, 0.36);
    color: #f8fafc;
}

body[data-theme="dark"] .form-control-custom:focus,
body[data-theme="dark"] textarea:focus,
body[data-theme="dark"] select:focus,
body[data-theme="dark"] input:focus {
    background: rgba(15, 23, 42, 1);
    border-color: #a78bfa;
    box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.18);
}

body[data-theme="dark"] .form-control-custom::placeholder,
body[data-theme="dark"] textarea::placeholder,
body[data-theme="dark"] input::placeholder {
    color: #94a3b8;
}

body[data-theme="dark"] option {
    background: #0f172a;
    color: #f8fafc;
}

/* =========================================================
   DARK MODE TABLES
========================================================= */

body[data-theme="dark"] .table-wrapper {
    border-color: rgba(148, 163, 184, 0.22);
}

body[data-theme="dark"] .custom-table {
    background: rgba(15, 23, 42, 0.96);
    color: #e5e7eb;
}

body[data-theme="dark"] .custom-table thead {
    background: linear-gradient(135deg, #312e81 0%, #831843 100%);
}

body[data-theme="dark"] .custom-table th {
    color: #f8fafc;
}

body[data-theme="dark"] .custom-table th,
body[data-theme="dark"] .custom-table td {
    border-bottom-color: rgba(148, 163, 184, 0.24);
}

body[data-theme="dark"] .custom-table tbody tr:hover {
    background: rgba(99, 102, 241, 0.12);
}

/* =========================================================
   DARK MODE COURSE PLAYER
========================================================= */

body[data-theme="dark"] .sidebar {
    background:
        radial-gradient(circle at top left, rgba(109, 94, 252, 0.10), transparent 28%),
        rgba(15, 23, 42, 0.96);
    border-right-color: rgba(148, 163, 184, 0.24);
}

body[data-theme="dark"] .content {
    background:
        radial-gradient(circle at top right, rgba(236, 72, 153, 0.10), transparent 20%),
        radial-gradient(circle at top left, rgba(109, 94, 252, 0.13), transparent 24%),
        #0b1020;
}

body[data-theme="dark"] .sidebar-sticky-top {
    background: rgba(15, 23, 42, 0.98);
}

body[data-theme="dark"] .course-progress-box {
    background: rgba(15, 23, 42, 0.78);
    border-color: rgba(148, 163, 184, 0.24);
}

body[data-theme="dark"] .course-progress-bar {
    background: rgba(99, 102, 241, 0.24);
}

body[data-theme="dark"] .module-header {
    background: linear-gradient(135deg, rgba(109, 94, 252, 0.34) 0%, rgba(236, 72, 153, 0.25) 100%);
    border: 1px solid rgba(196, 181, 253, 0.22);
    color: #f8fafc;
}

body[data-theme="dark"] .module-toggle-icon {
    color: #e5e7eb;
}

body[data-theme="dark"] .item-link {
    background: rgba(255, 255, 255, 0.06);
    color: #e5e7eb;
    border-color: rgba(255, 255, 255, 0.08);
}

body[data-theme="dark"] .item-link:hover {
    background: rgba(109, 94, 252, 0.18);
    border-color: rgba(196, 181, 253, 0.45);
}

body[data-theme="dark"] .item-link.active {
    background: linear-gradient(135deg, rgba(109, 94, 252, 0.38) 0%, rgba(236, 72, 153, 0.28) 100%);
    border-color: #a78bfa;
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.18);
}

body[data-theme="dark"] .item-link.locked {
    opacity: 0.62;
}

/* =========================================================
   DARK MODE LESSON CONTENT
========================================================= */

body[data-theme="dark"] .lesson-shell {
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.92));
    border-color: rgba(148, 163, 184, 0.25);
}

body[data-theme="dark"] .lesson-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.92) 0%, rgba(49, 46, 129, 0.30) 100%);
    border-color: rgba(148, 163, 184, 0.22);
}

body[data-theme="dark"] .lesson-image-card img,
body[data-theme="dark"] .group-media-card img,
body[data-theme="dark"] .group-segment-image-card img,
body[data-theme="dark"] .question-inline-image img,
body[data-theme="dark"] .standalone-question-image img {
    background: #0f172a;
    border-color: rgba(148, 163, 184, 0.24);
}

body[data-theme="dark"] .lesson-content-text blockquote,
body[data-theme="dark"] .question-instruction-text,
body[data-theme="dark"] .group-instructions-box,
body[data-theme="dark"] .group-audio-lock-box,
body[data-theme="dark"] .table-question-title,
body[data-theme="dark"] .matching-question-title {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.18) 0%, rgba(236, 72, 153, 0.14) 100%);
    border-color: rgba(196, 181, 253, 0.26);
    color: #e5e7eb;
}

/* =========================================================
   DARK MODE QUIZ / QUESTION ELEMENTS
========================================================= */

body[data-theme="dark"] .question-block {
    border-top-color: rgba(148, 163, 184, 0.24);
}

body[data-theme="dark"] .choice-line,
body[data-theme="dark"] .blank-line {
    color: #e5e7eb;
}

body[data-theme="dark"] .recorder-box {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.88) 0%, rgba(76, 29, 63, 0.35) 100%);
    border-color: rgba(148, 163, 184, 0.24);
}

body[data-theme="dark"] .recorder-status,
body[data-theme="dark"] .recorder-timer {
    color: #e5e7eb;
}

/* =========================================================
   DARK MODE TABLE BUILDER / INTERACTIVE TABLES
========================================================= */

body[data-theme="dark"] .table-interactive-pretty,
body[data-theme="dark"] .review-table-interactive,
body[data-theme="dark"] .excel-table-builder {
    background: rgba(15, 23, 42, 0.96);
    border-color: rgba(148, 163, 184, 0.24);
}

body[data-theme="dark"] .table-interactive td,
body[data-theme="dark"] .table-interactive-pretty td,
body[data-theme="dark"] .review-table-interactive td,
body[data-theme="dark"] .excel-table-cell {
    background: rgba(15, 23, 42, 0.94);
    border-color: rgba(148, 163, 184, 0.24);
    color: #e5e7eb;
}

body[data-theme="dark"] .excel-table-cell-inner {
    color: #e5e7eb;
}

body[data-theme="dark"] .excel-table-cell-inner:empty::before,
body[data-theme="dark"] .excel-table-cell-inner[data-placeholder]:empty::before {
    color: #94a3b8;
}

body[data-theme="dark"] .excel-toolbar-grid,
body[data-theme="dark"] .excel-table-toolbar,
body[data-theme="dark"] .excel-table-wrap {
    background: rgba(15, 23, 42, 0.76);
    border-color: rgba(148, 163, 184, 0.24);
}

body[data-theme="dark"] .table-answer-highlight {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.18) 0%, rgba(236, 72, 153, 0.16) 100%);
    border-color: rgba(167, 139, 250, 0.46) !important;
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.10);
}

body[data-theme="dark"] .table-answer-number-badge {
    background: #312e81;
    border-color: #818cf8;
    color: #ffffff;
}

/* =========================================================
   DARK MODE MATCHING
========================================================= */

body[data-theme="dark"] .matching-draggable-choice {
    background: linear-gradient(135deg, rgba(109, 94, 252, 0.24), rgba(236, 72, 153, 0.16));
    border-color: rgba(196, 181, 253, 0.34);
    color: #f8fafc;
}

body[data-theme="dark"] .matching-dropzone {
    background: rgba(15, 23, 42, 0.90);
    border-color: rgba(148, 163, 184, 0.34);
}

body[data-theme="dark"] .matching-dropzone.drag-over {
    background: rgba(99, 102, 241, 0.18);
    border-color: #a78bfa;
    box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.12);
}

body[data-theme="dark"] .matching-dropzone-placeholder {
    color: #94a3b8;
}

body[data-theme="dark"] .matching-dropzone-filled {
    background: linear-gradient(135deg, rgba(109, 94, 252, 0.22), rgba(236, 72, 153, 0.14));
    border-color: #a78bfa;
}

body[data-theme="dark"] .matching-remove-btn {
    background: rgba(248, 250, 252, 0.10);
    color: #fecaca;
}

/* =========================================================
   DARK MODE ALERTS / BADGES / CHIPS
========================================================= */

body[data-theme="dark"] .alert-success-custom {
    background: rgba(22, 101, 52, 0.22);
    color: #bbf7d0;
    border-color: rgba(34, 197, 94, 0.36);
}

body[data-theme="dark"] .alert-danger-custom,
body[data-theme="dark"] .validation-box {
    background: rgba(153, 27, 27, 0.22);
    color: #fecaca;
    border-color: rgba(248, 113, 113, 0.34);
}

body[data-theme="dark"] .badge-active,
body[data-theme="dark"] .course-status-active {
    background: rgba(22, 101, 52, 0.32);
    color: #bbf7d0;
}

body[data-theme="dark"] .badge-suspended,
body[data-theme="dark"] .course-status-suspended {
    background: rgba(157, 23, 77, 0.32);
    color: #fbcfe8;
}

body[data-theme="dark"] .course-status-completed {
    background: rgba(109, 40, 217, 0.32);
    color: #ddd6fe;
}

/* =========================================================
   DARK MODE PAGINATION
========================================================= */

body[data-theme="dark"] .pagination-wrap .pagination a,
body[data-theme="dark"] .pagination-wrap .pagination span {
    background: rgba(15, 23, 42, 0.94);
    border-color: rgba(148, 163, 184, 0.28);
    color: #e5e7eb;
}

body[data-theme="dark"] .pagination-wrap .pagination .active span,
body[data-theme="dark"] .pagination-wrap .pagination a:hover {
    background: var(--gradient-main);
    color: #ffffff;
    border-color: transparent;
}

/* =========================================================
   DARK MODE MODALS
========================================================= */

body[data-theme="dark"] .modal-box-custom,
body[data-theme="dark"] .user-expiry-modal-box {
    background: rgba(15, 23, 42, 0.96);
    border-color: rgba(148, 163, 184, 0.28);
    color: #e5e7eb;
}

body[data-theme="dark"] .modal-header-custom,
body[data-theme="dark"] .user-expiry-modal-header {
    background: linear-gradient(135deg, rgba(49, 46, 129, 0.94), rgba(131, 24, 67, 0.86));
    border-bottom-color: rgba(148, 163, 184, 0.24);
}

body[data-theme="dark"] .modal-title-custom,
body[data-theme="dark"] .user-expiry-modal-title {
    color: #f8fafc;
}

body[data-theme="dark"] .modal-subtitle-custom,
body[data-theme="dark"] .user-expiry-modal-subtitle {
    color: #cbd5e1;
}

body[data-theme="dark"] .modal-close-custom,
body[data-theme="dark"] .user-expiry-modal-close {
    color: #cbd5e1;
}

body[data-theme="dark"] .user-expiry-option-card {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(148, 163, 184, 0.24);
}

body[data-theme="dark"] .user-expiry-option-card:hover {
    background: rgba(109, 94, 252, 0.16);
    border-color: rgba(196, 181, 253, 0.42);
}

body[data-theme="dark"] .user-expiry-option-card strong {
    color: #f8fafc;
}

body[data-theme="dark"] .user-expiry-option-card small {
    color: #cbd5e1;
}

/* =========================================================
   DARK MODE CKEDITOR / TINYMCE-LIKE CONTENT AREAS
========================================================= */

body[data-theme="dark"] .ck.ck-editor__main > .ck-editor__editable,
body[data-theme="dark"] .ck-content {
    background: #0f172a !important;
    color: #e5e7eb !important;
}

body[data-theme="dark"] .ck.ck-toolbar {
    background: #111827 !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
}

body[data-theme="dark"] .ck.ck-editor__editable_inline {
    border-color: rgba(148, 163, 184, 0.28) !important;
}

/* =========================================================
   DARK MODE SCROLLBARS
========================================================= */

body[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #0f172a;
}

body[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 999px;
}

body[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* =========================================================
   DARK MODE MOBILE POLISH
========================================================= */

@media (max-width: 768px) {
    body[data-theme="dark"] .site-topbar {
        background: linear-gradient(135deg, #312e81 0%, #5b21b6 48%, #9d174d 100%);
    }

    body[data-theme="dark"] .theme-toggle-btn {
        padding: 8px 12px;
        font-size: 0.86rem;
    }
}

/* =========================================================
   Dark Mode - TinyMCE Rendered Tables
========================================================= */

body[data-theme="dark"] .lesson-content-text table,
body[data-theme="dark"] .question-instruction-text table,
body[data-theme="dark"] .quiz-rich-content table,
body[data-theme="dark"] .group-instructions-text table,
body[data-theme="dark"] .passage-box table {
    background: rgba(15, 23, 42, 0.96);
    color: #e5e7eb;
    border-color: rgba(148, 163, 184, 0.35);
}

body[data-theme="dark"] .lesson-content-text table td,
body[data-theme="dark"] .lesson-content-text table th,
body[data-theme="dark"] .question-instruction-text table td,
body[data-theme="dark"] .question-instruction-text table th,
body[data-theme="dark"] .quiz-rich-content table td,
body[data-theme="dark"] .quiz-rich-content table th,
body[data-theme="dark"] .group-instructions-text table td,
body[data-theme="dark"] .group-instructions-text table th,
body[data-theme="dark"] .passage-box table td,
body[data-theme="dark"] .passage-box table th {
    background: rgba(15, 23, 42, 0.92);
    color: #e5e7eb;
    border-color: rgba(148, 163, 184, 0.35);
}

body[data-theme="dark"] .lesson-content-text table th,
body[data-theme="dark"] .question-instruction-text table th,
body[data-theme="dark"] .quiz-rich-content table th,
body[data-theme="dark"] .group-instructions-text table th,
body[data-theme="dark"] .passage-box table th {
    background: linear-gradient(135deg, rgba(109, 94, 252, 0.28), rgba(236, 72, 153, 0.18));
    color: #f8fafc;
}

/* =========================================================
   Dark Mode - Quiz Sticky Topbar / Timer / Highlight Help
========================================================= */

body[data-theme="dark"] .quiz-topbar-enhanced {
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.94)),
        radial-gradient(circle at top right, rgba(236, 72, 153, 0.14), transparent 30%),
        radial-gradient(circle at top left, rgba(109, 94, 252, 0.16), transparent 28%);
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: #f8fafc;
}

body[data-theme="dark"] .quiz-topbar-enhanced h2 {
    color: #f8fafc;
}

body[data-theme="dark"] .quiz-page-index {
    color: #c4b5fd;
}

body[data-theme="dark"] .quiz-topbar-right-tools {
    color: #e5e7eb;
}

body[data-theme="dark"] .quiz-mini-help {
    background: rgba(255, 255, 255, 0.07);
    color: #e5e7eb;
    border: 1px solid rgba(196, 181, 253, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-theme="dark"] .quiz-mini-help-dot {
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.16);
}

body[data-theme="dark"] .quiz-topbar-fancy-timer {
    background: rgba(2, 6, 23, 0.72);
    color: #ffffff;
    border: 1px solid rgba(196, 181, 253, 0.22);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body[data-theme="dark"] .quiz-topbar-fancy-timer-icon {
    background: var(--gradient-main);
}

body[data-theme="dark"] .quiz-topbar-fancy-timer-label {
    color: #cbd5e1;
}

body[data-theme="dark"] .quiz-topbar-fancy-timer-value {
    color: #ffffff;
}

/* =========================================================
   DARK MODE - STUDENT ANNOUNCEMENT BOX
========================================================= */

body[data-theme="dark"] .student-announcement-card {
    background:
        linear-gradient(135deg, rgba(49, 46, 129, 0.42) 0%, rgba(131, 24, 67, 0.34) 100%),
        rgba(15, 23, 42, 0.88);
    border-color: rgba(196, 181, 253, 0.28);
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body[data-theme="dark"] .student-announcement-icon {
    background: var(--gradient-main);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(139, 92, 246, 0.28);
}

body[data-theme="dark"] .student-announcement-title {
    color: #f8fafc;
}

body[data-theme="dark"] .student-announcement-message,
body[data-theme="dark"] .student-announcement-rich {
    color: #e5e7eb;
}

body[data-theme="dark"] .student-announcement-rich a {
    color: #c4b5fd;
}

body[data-theme="dark"] .student-announcement-rich blockquote {
    background: rgba(15, 23, 42, 0.52);
    border-left-color: #a78bfa;
    color: #e5e7eb;
}

body[data-theme="dark"] .student-announcement-rich img {
    border-color: rgba(148, 163, 184, 0.28);
    background: #0f172a;
}

body[data-theme="dark"] .student-announcement-rich table {
    background: rgba(15, 23, 42, 0.96);
    color: #e5e7eb;
}

body[data-theme="dark"] .student-announcement-rich table td,
body[data-theme="dark"] .student-announcement-rich table th {
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(148, 163, 184, 0.35);
    color: #e5e7eb;
}

body[data-theme="dark"] .student-announcement-rich table th {
    background: linear-gradient(135deg, rgba(109, 94, 252, 0.30), rgba(236, 72, 153, 0.18));
    color: #f8fafc;
}

/* =========================================================
   DARK MODE - FILL IN THE BLANK INPUTS
========================================================= */

body[data-theme="dark"] .fill-blank-paragraph-box {
    background: rgba(15, 23, 42, 0.62);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 16px;
    padding: 14px;
}

body[data-theme="dark"] .inline-fill-question {
    color: #e5e7eb;
}

body[data-theme="dark"] .inline-fill-text {
    color: #e5e7eb;
}

body[data-theme="dark"] .inline-fill-piece {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body[data-theme="dark"] .inline-fill-number {
    background: linear-gradient(135deg, #6d5efc, #ec4899);
    color: #ffffff;
    border: 1px solid rgba(196, 181, 253, 0.45);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}

body[data-theme="dark"] .inline-fill-input {
    background: rgba(248, 250, 252, 0.96) !important;
    color: #0f172a !important;
    border: 1px solid rgba(196, 181, 253, 0.65) !important;
    box-shadow:
        0 0 0 3px rgba(139, 92, 246, 0.10),
        0 6px 14px rgba(0, 0, 0, 0.16);
}

body[data-theme="dark"] .inline-fill-input:focus {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #c084fc !important;
    box-shadow:
        0 0 0 4px rgba(192, 132, 252, 0.22),
        0 8px 18px rgba(0, 0, 0, 0.22);
}

body[data-theme="dark"] .inline-fill-input::placeholder {
    color: #64748b !important;
}

/* =========================================================
   DARK MODE - MULTIPLE CHOICE DROPDOWN
========================================================= */

body[data-theme="dark"] .inline-dropdown-question-wrap {
    background: rgba(15, 23, 42, 0.58);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 16px;
    padding: 14px;
}

body[data-theme="dark"] .inline-dropdown-question {
    color: #e5e7eb;
}

body[data-theme="dark"] .inline-dropdown-text {
    color: #e5e7eb;
}

body[data-theme="dark"] .inline-dropdown-piece {
    display: inline-flex;
    align-items: center;
}

body[data-theme="dark"] .inline-dropdown-select {
    background: rgba(248, 250, 252, 0.97) !important;
    color: #0f172a !important;
    border: 1px solid rgba(196, 181, 253, 0.70) !important;
    box-shadow:
        0 0 0 3px rgba(139, 92, 246, 0.10),
        0 6px 14px rgba(0, 0, 0, 0.16);
    font-weight: 700;
}

body[data-theme="dark"] .inline-dropdown-select:focus {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #c084fc !important;
    box-shadow:
        0 0 0 4px rgba(192, 132, 252, 0.22),
        0 8px 18px rgba(0, 0, 0, 0.22);
}

body[data-theme="dark"] .inline-dropdown-select option {
    background: #ffffff;
    color: #0f172a;
}

/* =========================================================
   DARK MODE - QUESTION BUILDERS / CUSTOM EDITORS
   Table Interactive Builder
   Fill-in-the-Blank Builder
   Matching Builder
   Dropdown Question Builder
========================================================= */

/* Main builder/editor containers */
body[data-theme="dark"] .table-builder-toolbar,
body[data-theme="dark"] .table-builder-toolbar-fields,
body[data-theme="dark"] .excel-table-toolbar,
body[data-theme="dark"] .excel-table-wrap,
body[data-theme="dark"] .table-question-shell,
body[data-theme="dark"] .matching-builder-panel,
body[data-theme="dark"] .matching-options-box,
body[data-theme="dark"] .matching-prompt-item,
body[data-theme="dark"] .matching-prompt-card,
body[data-theme="dark"] .fill-blank-paragraph-box,
body[data-theme="dark"] .fill-blank-answer-group,
body[data-theme="dark"] .fillblank-answer-group,
body[data-theme="dark"] .answer-group-box,
body[data-theme="dark"] .answers-group-box,
body[data-theme="dark"] .answer-group-card,
body[data-theme="dark"] .answers-group-card,
body[data-theme="dark"] .choice-card,
body[data-theme="dark"] .choice-row,
body[data-theme="dark"] .choice-item,
body[data-theme="dark"] .builder-repeater-item,
body[data-theme="dark"] .builder-item-box,
body[data-theme="dark"] .builder-panel,
body[data-theme="dark"] .builder-box {
    background: rgba(15, 23, 42, 0.86);
    border-color: rgba(148, 163, 184, 0.26);
    color: #e5e7eb;
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Section titles and helper texts */
body[data-theme="dark"] .table-builder-hint,
body[data-theme="dark"] .marker-muted,
body[data-theme="dark"] .matching-options-label,
body[data-theme="dark"] .matching-options-title,
body[data-theme="dark"] .matching-builder-title,
body[data-theme="dark"] .matching-prompt-head,
body[data-theme="dark"] .answer-group-title,
body[data-theme="dark"] .answers-group-title,
body[data-theme="dark"] .builder-section-title,
body[data-theme="dark"] .builder-box-title,
body[data-theme="dark"] .marker-meta-title {
    color: #f8fafc;
}

body[data-theme="dark"] .answer-group-desc,
body[data-theme="dark"] .answers-group-desc,
body[data-theme="dark"] .builder-section-subtitle,
body[data-theme="dark"] .form-helper-text {
    color: #cbd5e1;
}

/* =========================================================
   DARK MODE - TABLE INTERACTIVE BUILDER
========================================================= */

body[data-theme="dark"] .excel-table-builder {
    background: rgba(15, 23, 42, 0.96);
    border-color: rgba(148, 163, 184, 0.28);
}

body[data-theme="dark"] .excel-table-builder td,
body[data-theme="dark"] .excel-table-cell {
    background: rgba(15, 23, 42, 0.94);
    border-color: rgba(148, 163, 184, 0.28);
    color: #e5e7eb;
}

body[data-theme="dark"] .excel-table-builder td.selected,
body[data-theme="dark"] .excel-table-cell.selected {
    background: rgba(109, 94, 252, 0.22);
    box-shadow:
        inset 0 0 0 2px #a78bfa,
        0 0 0 3px rgba(167, 139, 250, 0.13);
}

body[data-theme="dark"] .excel-table-cell-inner {
    color: #e5e7eb;
    background: transparent;
}

body[data-theme="dark"] .cell-type-text .excel-table-cell-inner,
body[data-theme="dark"] .excel-table-cell.cell-type-text .excel-table-cell-inner {
    background: rgba(15, 23, 42, 0.86);
}

body[data-theme="dark"] .cell-type-input .excel-table-cell-inner,
body[data-theme="dark"] .excel-table-cell.cell-type-input .excel-table-cell-inner {
    background: linear-gradient(135deg, rgba(49, 46, 129, 0.36), rgba(15, 23, 42, 0.90));
}

body[data-theme="dark"] .cell-type-dropdown .excel-table-cell-inner,
body[data-theme="dark"] .excel-table-cell.cell-type-dropdown .excel-table-cell-inner {
    background: linear-gradient(135deg, rgba(14, 116, 144, 0.22), rgba(15, 23, 42, 0.90));
}

body[data-theme="dark"] .excel-table-cell-inner:focus,
body[data-theme="dark"] .excel-table-cell-inner[contenteditable="true"]:focus {
    outline: 2px solid rgba(167, 139, 250, 0.72);
    background: rgba(30, 41, 59, 0.98);
}

body[data-theme="dark"] .excel-table-cell-inner:empty::before,
body[data-theme="dark"] .excel-table-cell-inner[data-placeholder]:empty::before {
    color: #94a3b8;
}

body[data-theme="dark"] .table-marker-card {
    background: rgba(30, 41, 59, 0.86);
    border-color: rgba(196, 181, 253, 0.28);
    color: #e5e7eb;
}

body[data-theme="dark"] .table-marker-card:hover {
    border-color: rgba(196, 181, 253, 0.48);
}

body[data-theme="dark"] .table-break-chip,
body[data-theme="dark"] .fib-break-chip {
    background: rgba(153, 27, 27, 0.24);
    border-color: rgba(248, 113, 113, 0.38);
    color: #fecaca;
}

/* Table preview / table interactive cells */
body[data-theme="dark"] .table-interactive,
body[data-theme="dark"] .table-interactive-pretty,
body[data-theme="dark"] .review-table-interactive {
    background: rgba(15, 23, 42, 0.96);
    border-color: rgba(148, 163, 184, 0.28);
}

body[data-theme="dark"] .table-interactive td,
body[data-theme="dark"] .table-interactive th,
body[data-theme="dark"] .table-interactive-pretty td,
body[data-theme="dark"] .table-interactive-pretty th,
body[data-theme="dark"] .review-table-interactive td,
body[data-theme="dark"] .review-table-interactive th {
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(148, 163, 184, 0.28);
    color: #e5e7eb;
}

body[data-theme="dark"] .table-static-text,
body[data-theme="dark"] .table-inline-label,
body[data-theme="dark"] .table-cell-smart-flow {
    color: #e5e7eb;
}

body[data-theme="dark"] .table-answer-highlight {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.20), rgba(236, 72, 153, 0.16)) !important;
    border-color: rgba(167, 139, 250, 0.58) !important;
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.12);
}

body[data-theme="dark"] .table-answer-number-badge {
    background: linear-gradient(135deg, #6d5efc, #ec4899);
    border-color: rgba(196, 181, 253, 0.48);
    color: #ffffff;
}

/* Table marker input/select fields */
body[data-theme="dark"] .table-answer-input,
body[data-theme="dark"] .table-answer-select,
body[data-theme="dark"] .table-cell-input input,
body[data-theme="dark"] .table-cell-dropdown select,
body[data-theme="dark"] .table-marker-card input,
body[data-theme="dark"] .table-marker-card select,
body[data-theme="dark"] .table-marker-card textarea {
    background: rgba(15, 23, 42, 0.98) !important;
    border-color: rgba(148, 163, 184, 0.38) !important;
    color: #f8fafc !important;
}

body[data-theme="dark"] .table-answer-input:focus,
body[data-theme="dark"] .table-answer-select:focus,
body[data-theme="dark"] .table-marker-card input:focus,
body[data-theme="dark"] .table-marker-card select:focus,
body[data-theme="dark"] .table-marker-card textarea:focus {
    background: rgba(15, 23, 42, 1) !important;
    border-color: #a78bfa !important;
    box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.18) !important;
}

/* =========================================================
   DARK MODE - FILL-IN-THE-BLANK BUILDER
========================================================= */

body[data-theme="dark"] .fill-blank-multiline,
body[data-theme="dark"] .fillblank-builder,
body[data-theme="dark"] .fill-blank-builder,
body[data-theme="dark"] .fillblank-editor-box,
body[data-theme="dark"] .fill-blank-editor-box,
body[data-theme="dark"] .fillblank-group-box,
body[data-theme="dark"] .fill-blank-group-box,
body[data-theme="dark"] .fillblank-answer-box,
body[data-theme="dark"] .fill-blank-answer-box {
    background: rgba(15, 23, 42, 0.78);
    border-color: rgba(148, 163, 184, 0.26);
    color: #e5e7eb;
}

body[data-theme="dark"] .fill-blank-paragraph-box {
    background: rgba(15, 23, 42, 0.68);
    border: 1px solid rgba(148, 163, 184, 0.24);
    color: #e5e7eb;
}

body[data-theme="dark"] .inline-fill-question,
body[data-theme="dark"] .inline-fill-text,
body[data-theme="dark"] .inline-fill-piece {
    color: #e5e7eb;
}

body[data-theme="dark"] .inline-fill-number,
body[data-theme="dark"] .fillblank-marker,
body[data-theme="dark"] .fill-blank-marker,
body[data-theme="dark"] .blank-answer-chip,
body[data-theme="dark"] .blank-answer-badge {
    background: linear-gradient(135deg, #6d5efc, #ec4899);
    border-color: rgba(196, 181, 253, 0.46);
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
}

body[data-theme="dark"] .inline-fill-input,
body[data-theme="dark"] .fill-blank-paragraph-box input,
body[data-theme="dark"] .fillblank-builder input,
body[data-theme="dark"] .fillblank-builder select,
body[data-theme="dark"] .fillblank-builder textarea,
body[data-theme="dark"] .fill-blank-builder input,
body[data-theme="dark"] .fill-blank-builder select,
body[data-theme="dark"] .fill-blank-builder textarea,
body[data-theme="dark"] .fillblank-answer-box input,
body[data-theme="dark"] .fillblank-answer-box select,
body[data-theme="dark"] .fillblank-answer-box textarea,
body[data-theme="dark"] .fill-blank-answer-box input,
body[data-theme="dark"] .fill-blank-answer-box select,
body[data-theme="dark"] .fill-blank-answer-box textarea {
    background: rgba(15, 23, 42, 0.98) !important;
    color: #f8fafc !important;
    border-color: rgba(148, 163, 184, 0.38) !important;
}

body[data-theme="dark"] .inline-fill-input:focus,
body[data-theme="dark"] .fill-blank-paragraph-box input:focus,
body[data-theme="dark"] .fillblank-builder input:focus,
body[data-theme="dark"] .fillblank-builder select:focus,
body[data-theme="dark"] .fillblank-builder textarea:focus,
body[data-theme="dark"] .fill-blank-builder input:focus,
body[data-theme="dark"] .fill-blank-builder select:focus,
body[data-theme="dark"] .fill-blank-builder textarea:focus {
    background: rgba(15, 23, 42, 1) !important;
    border-color: #a78bfa !important;
    box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.18) !important;
}

/* =========================================================
   DARK MODE - DROPDOWN QUESTION BUILDER
========================================================= */

body[data-theme="dark"] .inline-dropdown-question-wrap {
    background: rgba(15, 23, 42, 0.58);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 16px;
    padding: 14px;
}

body[data-theme="dark"] .inline-dropdown-question,
body[data-theme="dark"] .inline-dropdown-text,
body[data-theme="dark"] .inline-dropdown-piece {
    color: #e5e7eb;
}

body[data-theme="dark"] .inline-dropdown-select,
body[data-theme="dark"] .dropdown-option-input,
body[data-theme="dark"] .dropdown-option-select,
body[data-theme="dark"] .dropdown-builder input,
body[data-theme="dark"] .dropdown-builder select,
body[data-theme="dark"] .dropdown-builder textarea,
body[data-theme="dark"] .dropdown-question-builder input,
body[data-theme="dark"] .dropdown-question-builder select,
body[data-theme="dark"] .dropdown-question-builder textarea {
    background: rgba(15, 23, 42, 0.98) !important;
    color: #f8fafc !important;
    border-color: rgba(148, 163, 184, 0.38) !important;
    font-weight: 700;
}

body[data-theme="dark"] .inline-dropdown-select:focus,
body[data-theme="dark"] .dropdown-builder input:focus,
body[data-theme="dark"] .dropdown-builder select:focus,
body[data-theme="dark"] .dropdown-builder textarea:focus,
body[data-theme="dark"] .dropdown-question-builder input:focus,
body[data-theme="dark"] .dropdown-question-builder select:focus,
body[data-theme="dark"] .dropdown-question-builder textarea:focus {
    background: rgba(15, 23, 42, 1) !important;
    color: #ffffff !important;
    border-color: #a78bfa !important;
    box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.18) !important;
}

body[data-theme="dark"] .inline-dropdown-select option,
body[data-theme="dark"] .dropdown-builder option,
body[data-theme="dark"] .dropdown-question-builder option {
    background: #0f172a;
    color: #f8fafc;
}

/* =========================================================
   DARK MODE - MATCHING BUILDER
========================================================= */

body[data-theme="dark"] .matching-builder-grid,
body[data-theme="dark"] .matching-prompt-list,
body[data-theme="dark"] .matching-bank {
    color: #e5e7eb;
}

body[data-theme="dark"] .matching-prompt-text,
body[data-theme="dark"] .matching-options-title,
body[data-theme="dark"] .matching-options-label,
body[data-theme="dark"] .matching-builder-title,
body[data-theme="dark"] .matching-prompt-head {
    color: #f8fafc;
}

body[data-theme="dark"] .matching-prompt-number,
body[data-theme="dark"] .matching-review-number {
    background: linear-gradient(135deg, #6d5efc, #ec4899);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(139, 92, 246, 0.26);
}

body[data-theme="dark"] .matching-draggable-choice,
body[data-theme="dark"] .matching-option-chip,
body[data-theme="dark"] .matching-dropzone-chip {
    background: linear-gradient(135deg, rgba(109, 94, 252, 0.32), rgba(236, 72, 153, 0.22));
    border-color: rgba(196, 181, 253, 0.38);
    color: #ffffff;
}

body[data-theme="dark"] .matching-dropzone {
    background: rgba(15, 23, 42, 0.90);
    border-color: rgba(148, 163, 184, 0.34);
    color: #e5e7eb;
}

body[data-theme="dark"] .matching-dropzone.drag-over {
    background: rgba(99, 102, 241, 0.20);
    border-color: #a78bfa;
    box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.12);
}

body[data-theme="dark"] .matching-dropzone-placeholder {
    color: #94a3b8;
}

body[data-theme="dark"] .matching-dropzone-filled {
    background: linear-gradient(135deg, rgba(109, 94, 252, 0.24), rgba(236, 72, 153, 0.16));
    border-color: #a78bfa;
}

body[data-theme="dark"] .matching-remove-btn {
    background: rgba(248, 250, 252, 0.10);
    color: #fecaca;
}

body[data-theme="dark"] .matching-remove-btn:hover {
    background: rgba(153, 27, 27, 0.28);
}

/* Matching builder inputs */
body[data-theme="dark"] .matching-builder-panel input,
body[data-theme="dark"] .matching-builder-panel select,
body[data-theme="dark"] .matching-builder-panel textarea,
body[data-theme="dark"] .matching-prompt-card input,
body[data-theme="dark"] .matching-prompt-card select,
body[data-theme="dark"] .matching-prompt-card textarea,
body[data-theme="dark"] .matching-options-box input,
body[data-theme="dark"] .matching-options-box select,
body[data-theme="dark"] .matching-options-box textarea {
    background: rgba(15, 23, 42, 0.98) !important;
    color: #f8fafc !important;
    border-color: rgba(148, 163, 184, 0.38) !important;
}

body[data-theme="dark"] .matching-builder-panel input:focus,
body[data-theme="dark"] .matching-builder-panel select:focus,
body[data-theme="dark"] .matching-builder-panel textarea:focus,
body[data-theme="dark"] .matching-prompt-card input:focus,
body[data-theme="dark"] .matching-prompt-card select:focus,
body[data-theme="dark"] .matching-prompt-card textarea:focus,
body[data-theme="dark"] .matching-options-box input:focus,
body[data-theme="dark"] .matching-options-box select:focus,
body[data-theme="dark"] .matching-options-box textarea:focus {
    background: rgba(15, 23, 42, 1) !important;
    border-color: #a78bfa !important;
    box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.18) !important;
}

/* =========================================================
   DARK MODE - ANSWERS / CHOICES / OPTION GROUPS
========================================================= */

body[data-theme="dark"] .answer-row,
body[data-theme="dark"] .answer-item,
body[data-theme="dark"] .answer-card,
body[data-theme="dark"] .choice-line,
body[data-theme="dark"] .choice-item,
body[data-theme="dark"] .choice-row,
body[data-theme="dark"] .choice-card,
body[data-theme="dark"] .option-row,
body[data-theme="dark"] .option-card,
body[data-theme="dark"] .option-item {
    background: rgba(15, 23, 42, 0.76);
    border-color: rgba(148, 163, 184, 0.24);
    color: #e5e7eb;
}

body[data-theme="dark"] .answer-row input,
body[data-theme="dark"] .answer-row select,
body[data-theme="dark"] .answer-row textarea,
body[data-theme="dark"] .answer-item input,
body[data-theme="dark"] .answer-item select,
body[data-theme="dark"] .answer-item textarea,
body[data-theme="dark"] .choice-line input,
body[data-theme="dark"] .choice-line select,
body[data-theme="dark"] .choice-line textarea,
body[data-theme="dark"] .choice-row input,
body[data-theme="dark"] .choice-row select,
body[data-theme="dark"] .choice-row textarea,
body[data-theme="dark"] .option-row input,
body[data-theme="dark"] .option-row select,
body[data-theme="dark"] .option-row textarea {
    background: rgba(15, 23, 42, 0.98) !important;
    color: #f8fafc !important;
    border-color: rgba(148, 163, 184, 0.38) !important;
}

/* =========================================================
   DARK MODE - GENERIC BUILDER FALLBACK
   Covers builder boxes with slightly different class names
========================================================= */

body[data-theme="dark"] [class*="builder-panel"],
body[data-theme="dark"] [class*="builder-box"],
body[data-theme="dark"] [class*="editor-panel"],
body[data-theme="dark"] [class*="editor-box"],
body[data-theme="dark"] [class*="answer-group"],
body[data-theme="dark"] [class*="option-group"] {
    border-color: rgba(148, 163, 184, 0.24);
}

body[data-theme="dark"] [class*="builder-panel"] input,
body[data-theme="dark"] [class*="builder-panel"] select,
body[data-theme="dark"] [class*="builder-panel"] textarea,
body[data-theme="dark"] [class*="builder-box"] input,
body[data-theme="dark"] [class*="builder-box"] select,
body[data-theme="dark"] [class*="builder-box"] textarea,
body[data-theme="dark"] [class*="editor-panel"] input,
body[data-theme="dark"] [class*="editor-panel"] select,
body[data-theme="dark"] [class*="editor-panel"] textarea,
body[data-theme="dark"] [class*="editor-box"] input,
body[data-theme="dark"] [class*="editor-box"] select,
body[data-theme="dark"] [class*="editor-box"] textarea {
    background: rgba(15, 23, 42, 0.98) !important;
    color: #f8fafc !important;
    border-color: rgba(148, 163, 184, 0.38) !important;
}

/* =========================================================
   DARK MODE - AUTO INVERT DETECTED BLACK/WHITE IMAGES
========================================================= */

body[data-theme="dark"] img.bw-dark-auto-invert {
    filter: invert(1) brightness(0.92) contrast(1.08);
    background: transparent !important;
}


/* =========================================================
   PUBLIC COURSE ACCESS PAGE
   Final CSS with wider voucher box and controlled button width
========================================================= */

.public-course-access-page {
    margin-top: 40px;
    margin-bottom: 40px;
}

/* Align banner, alerts, and form exactly */
.public-course-access-page .public-course-banner,
.public-course-access-page .public-course-alert,
.public-course-access-page .public-course-form-card {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Main banner */
.public-course-banner {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 18px;
    align-items: center;
    margin-bottom: 24px;
    padding: 26px 28px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.68);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.42);
    box-shadow:
        0 10px 30px rgba(2, 6, 23, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.public-course-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.28), transparent 40%),
        radial-gradient(circle at top right, rgba(217, 70, 161, 0.10), transparent 25%),
        radial-gradient(circle at bottom left, rgba(91, 76, 240, 0.08), transparent 30%);
    pointer-events: none;
}

.public-course-banner-main,
.public-course-banner-cta {
    position: relative;
    z-index: 1;
}

.public-course-banner-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 150px;
}

/* Badge */
.public-course-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 6px 12px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 0.82rem;
    font-weight: 800;
}

/* Banner text */
.public-course-banner .page-title {
    margin: 0 0 10px;
    font-size: 2.05rem;
    line-height: 1.15;
}

.public-course-banner .page-subtitle {
    margin: 0;
    max-width: 640px;
    line-height: 1.55;
}

/* Right CTA section */
.public-course-banner-cta {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    align-self: center;
    padding: 18px 22px 20px;
    border-radius: 14px;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,0.55), transparent 34%),
        linear-gradient(135deg, #fff7ed 0%, #fde68a 100%);
    border: 1px solid rgba(245, 158, 11, 0.35);
    box-shadow: 0 10px 24px rgba(245, 158, 11, 0.18);
}

.public-course-voucher-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-top: 2px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}

.public-course-voucher-text {
    min-width: 0;
}

.public-course-voucher-text strong {
    display: block;
    margin-bottom: 3px;
    color: #78350f;
    font-size: 0.95rem;
    line-height: 1.25;
    font-weight: 900;
}

.public-course-voucher-text span {
    display: block;
    color: #7c4a03;
    font-size: 0.84rem;
    line-height: 1.45;
}

/* Unique Check Result / Voucher button */
.fs-public-voucher-check-button {
    grid-column: 1 / -1;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 260px;
    max-width: 300px;
    justify-self: center;
    min-height: 42px;
    margin-top: 4px;
    padding: 11px 14px;
    border-radius: 11px;
    background: linear-gradient(135deg, #f59e0b, #ea580c) !important;
    color: #ffffff !important;
    font-weight: 900;
    font-size: 0.90rem;
    text-align: center;
    text-decoration: none !important;
    border: none !important;
    box-shadow: 0 10px 20px rgba(234, 88, 12, 0.28);
    transition: all 0.22s ease;
    cursor: pointer;
}

.fs-public-voucher-check-button:hover {
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(234, 88, 12, 0.34);
}

.fs-public-voucher-check-button:focus {
    outline: none;
    box-shadow:
        0 14px 26px rgba(234, 88, 12, 0.34),
        0 0 0 4px rgba(245, 158, 11, 0.22);
}

/* Form Card */
.public-course-form-card {
    padding: 26px;
    margin-top: 0;
}

.public-course-form-heading {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e2e8f0;
}

.public-course-form-heading h2 {
    margin: 0 0 4px;
    color: var(--text-dark);
    font-size: 1.25rem;
    font-weight: 900;
}

.public-course-form-heading p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.92rem;
}

/* Course description box */
.public-course-info-box {
    margin-top: 12px;
    margin-bottom: 0;
    border-left: 4px solid var(--primary);
    background: rgba(248, 250, 252, 0.92);
}

/* Form footer */
.public-course-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #e2e8f0;
}

.public-course-form-note {
    max-width: 560px;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.public-course-form-footer .btn-custom {
    min-width: 190px;
}

/* Helper text polish */
.public-course-access-page .form-helper-text {
    margin-top: 5px;
    font-size: 0.81rem;
    line-height: 1.35;
}

/* Disabled submit */
.public-course-access-page button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Responsive */
@media (max-width: 980px) {
    .public-course-banner {
        grid-template-columns: 1fr;
        padding: 22px;
    }

    .public-course-banner-main {
        min-height: auto;
    }

    .public-course-banner-cta {
        width: 100%;
    }
}

@media (max-width: 900px) {
    .public-course-access-page .form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .public-course-access-page {
        margin-top: 25px;
    }

    .public-course-banner,
    .public-course-form-card {
        padding: 18px;
        border-radius: 14px;
    }

    .public-course-banner .page-title {
        font-size: 1.7rem;
    }

    .public-course-banner-cta {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 14px;
    }

    .public-course-voucher-icon {
        margin: 0 auto;
    }

    .fs-public-voucher-check-button {
        width: 100% !important;
        min-width: 0;
        max-width: none;
        justify-self: stretch;
    }

    .public-course-form-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .public-course-form-footer .btn-custom {
        width: 100%;
    }
}

/* =========================================================
   PUBLIC COURSE GIFT ICON ANIMATION
========================================================= */

.public-course-voucher-icon {
    animation: publicGiftBounce 2.2s ease-in-out infinite;
    transform-origin: center bottom;
}

.public-course-banner-cta:hover .public-course-voucher-icon {
    animation: publicGiftShake 0.65s ease-in-out infinite;
}

@keyframes publicGiftBounce {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    20% {
        transform: translateY(-6px) rotate(-4deg);
    }

    35% {
        transform: translateY(0) rotate(3deg);
    }

    50% {
        transform: translateY(-3px) rotate(-2deg);
    }

    65% {
        transform: translateY(0) rotate(0deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }
}

@keyframes publicGiftShake {
    0% {
        transform: rotate(0deg) scale(1);
    }

    25% {
        transform: rotate(-7deg) scale(1.06);
    }

    50% {
        transform: rotate(7deg) scale(1.06);
    }

    75% {
        transform: rotate(-4deg) scale(1.04);
    }

    100% {
        transform: rotate(0deg) scale(1);
    }
}

/* Accessibility: stop animation for users who disable motion */
@media (prefers-reduced-motion: reduce) {
    .public-course-voucher-icon {
        animation: none;
    }

    .public-course-banner-cta:hover .public-course-voucher-icon {
        animation: none;
    }
}

/* Resume / Previous Registration Note */
.public-course-resume-note {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 22px;
    padding: 15px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, #eef2ff 0%, #fff7fb 100%);
    border: 1px solid #ddd6fe;
    box-shadow: 0 8px 20px rgba(91, 76, 240, 0.08);
}

.public-course-resume-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}

.public-course-resume-note strong {
    display: block;
    margin-bottom: 5px;
    color: #312e81;
    font-size: 0.96rem;
    font-weight: 900;
}

.public-course-resume-note p {
    margin: 0;
    color: #475569;
    font-size: 0.9rem;
    line-height: 1.55;
}

@media (max-width: 640px) {
    .public-course-resume-note {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .public-course-resume-icon {
        margin: 0 auto;
    }
}

/* =========================================================
   PUBLIC COURSE PLAYER COMPLETION MARKERS
========================================================= */

.public-player-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.public-result-direct-btn {
    white-space: nowrap;
}

.item-status-mark {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e5e7eb;
    color: #111827;
    font-size: 0.9rem;
    font-weight: 900;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.item-link.done {
    background: #f0fdf4;
    border-color: #bbf7d0;
    opacity: 1;
}

.item-link.done .item-status-mark {
    background: #22c55e;
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(34, 197, 94, 0.28);
}

.item-link.done .item-link-type {
    color: #15803d;
}

.item-link.done .item-link-title {
    color: #166534;
    font-weight: 800;
}

.item-link.done.active {
    background: linear-gradient(135deg, #dcfce7 0%, #eef2ff 100%);
    border-color: #22c55e;
}

.module-badge-done {
    background: #dcfce7 !important;
    color: #166534 !important;
}

.public-lesson-complete-btn:disabled {
    opacity: 0.85;
    cursor: not-allowed;
    transform: none;
    background: linear-gradient(135deg, #16a34a, #15803d) !important;
    color: #ffffff !important;
}

@media (max-width: 900px) {
    .public-player-actions {
        justify-content: flex-start;
    }

    .public-player-actions .btn-custom {
        width: 100%;
        text-align: center;
    }
}

/* =========================
   EXIT CONFIRMATION MODAL
========================= */
.exit-confirm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(15, 23, 42, 0.68);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.exit-confirm-backdrop.is-open {
    display: flex;
}

.exit-confirm-card {
    width: min(480px, 100%);
    background: #ffffff;
    border-radius: 22px;
    padding: 28px 26px;
    text-align: center;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.65);
    animation: exitModalPop 0.18s ease-out;
}

.exit-confirm-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 14px auto;
    border-radius: 999px;
    background: #fff7ed;
    color: #ea580c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
}

.exit-confirm-title {
    font-size: 1.35rem;
    font-weight: 900;
    color: #111827;
    margin-bottom: 10px;
}

.exit-confirm-message {
    font-size: 0.98rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 22px;
}

.exit-confirm-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.exit-confirm-cancel {
    background: linear-gradient(135deg, #16a34a, #22c55e) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 900 !important;
    box-shadow: 0 10px 22px rgba(22, 163, 74, 0.24);
}

.exit-confirm-yes {
    background: linear-gradient(135deg, #dc2626, #ef4444) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 900 !important;
    box-shadow: 0 10px 22px rgba(220, 38, 38, 0.24);
}

.exit-confirm-cancel:hover,
.exit-confirm-yes:hover {
    color: #ffffff !important;
    transform: translateY(-1px);
}

@keyframes exitModalPop {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.96);
    }

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

@media (max-width: 480px) {
    .exit-confirm-card {
        padding: 24px 20px;
    }

    .exit-confirm-actions {
        flex-direction: column;
    }

    .exit-confirm-actions .btn-custom {
        width: 100%;
        text-align: center;
    }
}

/* =========================
   DELETE CONFIRMATION MODAL
========================= */
.delete-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 23, 42, 0.68);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.delete-modal-backdrop.is-open {
    display: flex;
}

.delete-modal-card {
    width: min(100%, 480px);
    background: rgba(255, 255, 255, 0.96);
    border-radius: 22px;
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, 0.58);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.32);
    text-align: center;
    animation: deleteModalPop 0.22s ease;
}

@keyframes deleteModalPop {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }

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

.delete-modal-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 14px;
    border-radius: 999px;
    background: #fef2f2;
    color: #dc2626;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: inset 0 0 0 1px #fecaca;
}

.delete-modal-title {
    margin: 0 0 10px;
    font-size: 1.35rem;
    font-weight: 900;
    color: #0f172a;
}

.delete-modal-message {
    margin: 0;
    color: #475569;
    line-height: 1.65;
    font-size: 0.96rem;
}

.delete-modal-warning {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fed7aa;
    font-weight: 800;
    font-size: 0.9rem;
    line-height: 1.5;
}

.delete-modal-actions {
    margin-top: 22px;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.delete-modal-actions .btn-custom {
    min-width: 130px;
}

@media (max-width: 520px) {
    .delete-modal-card {
        padding: 22px 18px;
    }

    .delete-modal-actions {
        flex-direction: column;
    }

    .delete-modal-actions .btn-custom {
        width: 100%;
    }
}

.essay-security-warning {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff3cd;
    border: 1px solid #ffe69c;
    color: #7a5a00;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.voucher-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    vertical-align: middle;
    margin-right: 8px;
}

.voucher-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.voucher-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #cbd5e1;
    border-radius: 999px;
    transition: 0.22s ease;
    box-shadow: inset 0 2px 5px rgba(15, 23, 42, 0.16);
}

.voucher-slider::before {
    content: "";
    position: absolute;
    height: 22px;
    width: 22px;
    left: 3px;
    top: 3px;
    background: #ffffff;
    border-radius: 50%;
    transition: 0.22s ease;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.24);
}

.voucher-switch input:checked + .voucher-slider {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.voucher-switch input:checked + .voucher-slider::before {
    transform: translateX(24px);
}

.voucher-switch input:disabled + .voucher-slider {
    opacity: 0.55;
    cursor: not-allowed;
}

.voucher-status-text {
    display: inline-block;
    min-width: 62px;
    font-size: 0.82rem;
    font-weight: 800;
    vertical-align: middle;
}

.voucher-status-text.is-active {
    color: #166534;
}

.voucher-status-text.is-inactive {
    color: #be185d;
}


/* =========================
   INSTRUCTOR STUDENT QUIZ ATTEMPTS
========================= */
.student-attempts-page .student-attempts-help {
    margin: 0 0 18px;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.55;
}

.student-attempts-page .student-attempts-course,
.student-attempts-page .student-attempts-module {
    overflow: hidden;
}

.student-attempts-page .student-attempts-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 24px;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 20px;
    box-sizing: border-box;
    list-style: none;
}

.student-attempts-page .student-attempts-summary::-webkit-details-marker {
    display: none;
}

.student-attempts-page .student-attempts-summary::marker {
    display: none;
    content: "";
}

.student-attempts-page .student-attempts-title-wrap {
    min-width: 0;
}

.student-attempts-page .student-attempts-title-wrap strong {
    overflow-wrap: anywhere;
}

.student-attempts-page .student-attempts-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 7px;
    min-width: 0;
    max-width: 100%;
    padding: 2px 0;
    margin-left: auto;
}

.student-attempts-page .student-attempts-toggle-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #4338ca;
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
    transition: transform 0.2s ease;
}

.student-attempts-page .student-attempts-toggle-icon::before {
    content: "›";
}

.student-attempts-page details[open]
> .student-attempts-summary
.student-attempts-toggle-icon {
    transform: rotate(90deg);
}

.student-attempts-page .student-attempts-course > .quiz-course-panel,
.student-attempts-page .student-attempts-module > .quiz-module-panel {
    display: block;
}

.student-attempts-page .student-attempts-module + .student-attempts-module {
    margin-top: 12px;
}

.student-attempts-page .student-attempts-module .student-attempts-summary {
    padding: 14px 18px;
}

.student-attempts-page .student-attempts-empty-module {
    padding: 14px 16px;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: #ffffff;
    color: #64748b;
    font-weight: 700;
}

.student-attempts-page .student-attempts-target {
    animation: studentAttemptHighlight 1.5s ease;
}

@keyframes studentAttemptHighlight {
    0%,
    100% {
        background: transparent;
    }

    30% {
        background: #fef3c7;
    }
}

@media (max-width: 900px) {
    .student-attempts-page .student-attempts-summary {
        grid-template-columns: minmax(0, 1fr) 22px;
        gap: 10px;
        padding: 15px 16px;
    }

    .student-attempts-page .student-attempts-pills {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
        margin-left: 0;
        padding-right: 0;
    }

    .student-attempts-page .student-attempts-toggle-icon {
        grid-column: 2;
        grid-row: 1;
    }
}

@media (max-width: 560px) {
    .student-attempts-page .student-attempts-summary {
        padding: 14px;
    }

    .student-attempts-page .quiz-drill-pill {
        font-size: 11px;
        padding: 5px 8px;
    }
}

/* =========================================================
   INSTRUCTOR QUIZ ATTEMPTS - PENDING MANUAL CHECK
   ========================================================= */

.quiz-pending-row > td {
    background-color: #fff8e1 !important;
}

.quiz-pending-row > td:first-child {
    border-left: 4px solid #f59e0b !important;
}

.quiz-pending-row:hover > td {
    background-color: #fff3cd !important;
}

.quiz-pending-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 4px 9px;
    border-radius: 20px;
    background-color: #fef3c7;
    border: 1px solid #f59e0b;
    color: #92400e;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}