/* ═══════════════════════════════════════════════════════════════
   LMS — dashboards, course cards, chapter browser, quiz editor,
   answer options, sliders, steppers, file panels.
   Maps to template 11_lms_module_LMS01-LMS10.html.
   ═══════════════════════════════════════════════════════════════ */

/* ── STAT CARDS (LMS-05) ── */
.lms-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 14px;
}
@media (max-width: 700px) { .lms-stat-grid { grid-template-columns: 1fr; } }

.lms-stat {
    background: var(--white);
    border-radius: 12px;
    padding: 18px 20px;
    border: 1px solid var(--gray-100);
    box-shadow: 0 1px 3px rgba(13,53,133,.06);
    display: flex; align-items: center; justify-content: space-between;
}
.lms-stat__info { flex: 1; }
.lms-stat__label {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    color: var(--gray-400);
    margin-bottom: 4px;
}
.lms-stat__value { font-size: 28px; font-weight: 700; line-height: 1.1; }
.lms-stat__icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.lms-stat__icon i { font-size: 24px; }

/* ── LEADERBOARD (LMS-05) ── */
.lms-lb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { .lms-lb-grid { grid-template-columns: 1fr; } }

.lms-lb {
    background: var(--white);
    border-radius: 12px;
    border: 1px solid var(--gray-100);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(13,53,133,.06);
}
.lms-lb__head {
    background: var(--navy-800);
    padding: 10px 16px;
    display: flex; align-items: center; gap: 8px;
}
.lms-lb__head i { font-size: 16px; color: var(--gold-300); }
.lms-lb__head-title { font-size: 13px; font-weight: 600; color: #fff; flex: 1; }

.lms-lb__row {
    display: grid; grid-template-columns: 50px 1fr auto; gap: 8px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--gray-100);
    align-items: center;
}
.lms-lb__row:last-child { border-bottom: none; }
.lms-lb__row:hover { background: var(--blue-50); }
.lms-lb__rank { font-size: 13px; font-weight: 700; color: var(--blue-600); }
.lms-lb__rank--silver { color: #94A3B8; }
.lms-lb__rank--other  { color: var(--gray-400); }
.lms-lb__name { font-size: 13px; color: var(--gray-700); }
.lms-lb__value { font-size: 12px; font-weight: 700; color: var(--blue-800); }

/* ── SECTION CARDS ── */
.lms-card {
    background: var(--white);
    border-radius: 12px;
    border: 1px solid var(--gray-100);
    box-shadow: 0 1px 3px rgba(13,53,133,.06);
    margin-bottom: 16px;
    overflow: hidden;
}
.lms-card__head {
    padding: 12px 16px;
    border-bottom: 1px solid var(--gray-100);
    display: flex; align-items: center; gap: 8px;
}
.lms-card__head--blue { background: var(--navy-800); }
.lms-card__head--blue .lms-card__title { color: #fff; }
.lms-card__icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.lms-card__icon i { font-size: 15px; }
.lms-card__icon--course { background: var(--blue-100); }    .lms-card__icon--course i { color: var(--blue-700); }
.lms-card__icon--quiz   { background: var(--gold-100); }                      .lms-card__icon--quiz i   { color: var(--gold-600); }
.lms-card__icon--assign { background: var(--green-100); }                      .lms-card__icon--assign i { color: var(--green-500); }
.lms-card__icon--topic  { background: var(--teal-100); }                      .lms-card__icon--topic i  { color: var(--teal-500); }
.lms-card__icon--ques   { background: var(--purple-100); }                      .lms-card__icon--ques i   { color: var(--purple-500); }
.lms-card__title { font-size: 13px; font-weight: 600; color: var(--blue-800); flex: 1; }
.lms-card__title em { font-style: normal; color: var(--gold-600); }
.lms-card__badge {
    font-size: 10px; font-weight: 600;
    padding: 2px 8px; border-radius: 999px;
    background: var(--blue-50); color: var(--blue-700);
    border: 1px solid var(--blue-100);
}
.lms-card__body { padding: 16px; }
.lms-card__body--flush { padding: 0; }
.lms-card__body--tight { padding: 10px; }

/* ── FORM FIELD COLORS ── */
.lms-field-label {
    font-size: 10px; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase;
}
.lms-fl-blue   { color: var(--blue-600); }
.lms-fl-gold   { color: var(--gold-600); }
.lms-fl-green  { color: var(--green-500); }
.lms-fl-orange { color: var(--orange-500); }
.lms-fl-purple { color: var(--purple-500); }

/* ── FILE BROWSE ── */
.lms-file-browse {
    display: flex; align-items: stretch;
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
}
.lms-file-browse__name {
    flex: 1; padding: 9px 12px;
    font-size: 13px; color: var(--gray-400);
}
.lms-file-browse__btn {
    background: var(--navy-700);
    color: #fff;
    padding: 9px 16px;
    font-size: 12px; font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    border: none; font-family: inherit;
}
.lms-file-browse__btn i { font-size: 14px; color: var(--gold-300); }

/* ── TOGGLE ── */
.lms-toggle-row {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 10px;
}
.lms-toggle-row__label { font-size: 13px; font-weight: 500; color: var(--gray-700); flex: 1; }
.lms-toggle {
    width: 38px; height: 22px;
    border-radius: 11px;
    position: relative; cursor: pointer; flex-shrink: 0;
    background: var(--gray-300);
    border: none; padding: 0;
}
.lms-toggle.on { background: var(--navy-700); }
.lms-toggle__thumb {
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--white); position: absolute; top: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: left .15s;
    left: 2px;
}
.lms-toggle.on .lms-toggle__thumb { left: 18px; }

/* ── STEPPER ── */
.lms-stepper { display: flex; align-items: center; gap: 8px; }
.lms-stepper__btn {
    width: 28px; height: 28px;
    border-radius: 5px;
    border: 1.5px solid var(--gray-200);
    background: var(--white);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 16px; color: var(--gray-500); font-weight: 700;
}
.lms-stepper__btn:hover { border-color: var(--blue-500); color: var(--blue-700); }
.lms-stepper__val {
    font-size: 15px; font-weight: 700;
    color: var(--blue-800);
    min-width: 60px; text-align: center;
    background: var(--gray-50);
    border: 1.5px solid var(--gray-100);
    border-radius: 8px;
    padding: 4px 8px;
}

/* ── SLIDER ── */
.lms-slider {
    display: flex; align-items: center; gap: 12px;
}
.lms-slider__bound {
    font-size: 11px; font-weight: 600;
    color: var(--gray-400);
    min-width: 16px; text-align: center;
}
.lms-slider__track {
    flex: 1; height: 4px;
    background: var(--gray-200);
    border-radius: 2px;
    position: relative;
}
.lms-slider__fill {
    height: 100%;
    background: linear-gradient(to right, var(--blue-700), var(--blue-400));
    border-radius: 2px;
}
.lms-slider__thumb {
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--navy-700);
    border: 2px solid #fff;
    box-shadow: 0 4px 14px rgba(13,53,133,.10);
    position: absolute; top: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}
.lms-slider__value {
    font-size: 12px; font-weight: 700;
    color: var(--blue-800);
    min-width: 28px; text-align: center;
}

/* native input slider — restyled */
.lms-slider input[type="range"] {
    -webkit-appearance: none; appearance: none;
    flex: 1; height: 4px;
    background: transparent;
    margin: 0;
}
.lms-slider input[type="range"]::-webkit-slider-runnable-track {
    height: 4px; background: var(--gray-200); border-radius: 2px;
}
.lms-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--navy-700);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(13,53,133,.20);
    margin-top: -6px; cursor: pointer;
}

/* ── COURSE CARD (LMS-01 / LMS-04) ── */
.lms-course-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 900px) { .lms-course-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .lms-course-grid { grid-template-columns: 1fr; } }

.lms-course-card {
    background: var(--white);
    border-radius: 12px;
    border: 1px solid var(--gray-100);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(13,53,133,.06);
    transition: all .2s;
}
.lms-course-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(13,53,133,.10);
}
.lms-course-card__thumb {
    width: 100%; height: 130px;
    background: linear-gradient(135deg, var(--blue-700), var(--blue-500));
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.lms-course-card__thumb i { font-size: 48px; color: rgba(255,255,255,.2); }
.lms-course-card__thumb--green  { background: linear-gradient(135deg, var(--green-500), #2EAA65); }
.lms-course-card__thumb--purple { background: linear-gradient(135deg, var(--purple-500), #8060C0); }
.lms-course-card__thumb--teal   { background: linear-gradient(135deg, var(--teal-500), #1A94B0); }
.lms-course-card__thumb--orange { background: linear-gradient(135deg, var(--orange-500), #E06020); }
.lms-course-card__thumb--brown  { background: linear-gradient(135deg, #8A4000, #C06020); }

.lms-course-card__badge {
    position: absolute; top: 10px; left: 10px;
    background: var(--gold-300);
    color: var(--blue-900);
    font-size: 10px; font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
}
.lms-course-card__body { padding: 14px; }
.lms-course-card__title {
    font-size: 14px; font-weight: 700;
    color: var(--blue-800);
    margin-bottom: 6px;
}
.lms-course-card__desc {
    font-size: 12px; color: var(--gray-500);
    line-height: 1.5; margin-bottom: 10px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}
.lms-course-card__meta {
    display: flex; justify-content: space-between;
    font-size: 11px; color: var(--gray-400);
    margin-bottom: 6px;
}
.lms-course-card__progress-label {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--blue-600);
    margin-bottom: 5px;
}
.lms-course-card__progress {
    height: 5px;
    background: var(--gray-100);
    border-radius: 3px;
    margin-bottom: 10px;
    overflow: hidden;
}
.lms-course-card__progress-fill {
    height: 100%;
    background: linear-gradient(to right, var(--blue-700), var(--blue-400));
    border-radius: 3px;
}
.lms-course-card__progress-fill--green {
    background: linear-gradient(to right, var(--green-500), #4DC888);
}
.lms-course-card__actions { display: flex; gap: 8px; }

/* ── ICON BUTTONS ── */
.lms-icon-btn {
    width: 28px; height: 28px;
    border-radius: 5px;
    border: 1px solid var(--gray-200);
    background: var(--white);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all .15s;
}
.lms-icon-btn i { font-size: 14px; color: var(--gray-500); }
.lms-icon-btn--view  { background: var(--green-100); border-color: var(--green-border); }
.lms-icon-btn--view  i { color: var(--green-500); }
.lms-icon-btn--edit  { background: var(--blue-100); border-color: var(--blue-100); }
.lms-icon-btn--edit  i { color: var(--blue-600); }
.lms-icon-btn--del   { background: var(--red-100); border-color: var(--red-border); }
.lms-icon-btn--del   i { color: var(--red-500); }

/* ── FILE PANEL (chapter detail / attachments) ── */
.lms-file-panel {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
}
.lms-file-panel__head {
    background: var(--navy-700);
    padding: 8px 12px;
    display: flex; align-items: center; justify-content: space-between;
}
.lms-file-panel__title { font-size: 11px; font-weight: 600; color: #fff; }
.lms-file-panel__add {
    width: 22px; height: 22px; border-radius: 5px;
    background: rgba(255,255,255,.15);
    border: none;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.lms-file-panel__add i { font-size: 13px; color: #fff; }

.lms-file-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--gray-100);
    background: var(--white);
}
.lms-file-item:last-child { border-bottom: none; }
.lms-file-item__name { font-size: 12px; color: var(--gray-700); flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lms-file-item__del {
    width: 22px; height: 22px; border-radius: 4px;
    background: var(--red-100); border: none;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.lms-file-item__del i { font-size: 12px; color: var(--red-500); }

/* ── CHAPTER DETAIL SECTIONS (LMS-02) ── */
.lms-section-label {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    margin-bottom: 6px;
    display: flex; align-items: center; justify-content: space-between;
}
.lms-section-label--mat    { color: var(--blue-600); }
.lms-section-label--assign { color: var(--gold-600); }
.lms-section-label--cnt    { color: var(--purple-500); }
.lms-section-label--quiz   { color: var(--green-500); }
.lms-section-add {
    width: 22px; height: 22px; border-radius: 5px;
    border: none;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.lms-section-add--mat    { background: var(--blue-100); }   .lms-section-add--mat i    { color: var(--blue-700); font-size: 12px; }
.lms-section-add--assign { background: var(--gold-100); }                    .lms-section-add--assign i { color: var(--gold-600); font-size: 12px; }
.lms-section-add--cnt    { background: var(--purple-100); }                    .lms-section-add--cnt i    { color: var(--purple-500); font-size: 12px; }
.lms-section-add--quiz   { background: var(--green-100); }                    .lms-section-add--quiz i   { color: var(--green-500); font-size: 12px; }

/* ── ANSWER OPTION (LMS-08) ── */
.lms-answer-option {
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 12px;
    align-items: start;
}
@media (max-width: 700px) { .lms-answer-option { grid-template-columns: 1fr; } }
.lms-answer-option:last-child { margin-bottom: 0; }
.lms-answer-option__label {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    color: var(--blue-600);
    margin-bottom: 6px;
}
.lms-answer-option__weight-label {
    font-size: 10px; font-weight: 700;
    color: var(--gray-400);
    text-transform: uppercase; letter-spacing: .06em;
    margin-bottom: 8px;
}
.lms-answer-option__weight-bounds {
    display: flex; justify-content: space-between;
    font-size: 11px; color: var(--gray-400);
    margin-bottom: 4px;
}
.lms-answer-option__weight-bounds span:nth-child(2) {
    font-weight: 700; color: var(--blue-800);
}

/* ── IMAGE GALLERY (LMS-08) ── */
.lms-img-gallery {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.lms-img-thumb {
    width: 70px; height: 50px;
    border-radius: 5px;
    background: linear-gradient(135deg, var(--blue-700), var(--blue-400));
    border: 2px solid var(--gray-200);
    overflow: hidden; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.lms-img-thumb i { font-size: 24px; color: rgba(255,255,255,.3); }
.lms-img-thumb--green  { background: linear-gradient(135deg, var(--green-500), #4DC888); }
.lms-img-thumb--orange { background: linear-gradient(135deg, var(--orange-500), #E06020); }
.lms-img-thumb--purple { background: linear-gradient(135deg, var(--purple-500), #8060C0); }

.lms-img-wrap {
    background: var(--white);
    border: 1.5px solid var(--blue-700);
    border-radius: 12px;
    overflow: hidden;
}
.lms-img-wrap__head {
    background: var(--navy-700);
    padding: 8px 12px;
    display: flex; align-items: center; justify-content: space-between;
}
.lms-img-wrap__head-title { font-size: 11px; font-weight: 600; color: #fff; }
.lms-img-wrap__upload {
    padding: 5px 12px;
    font-size: 11px; font-weight: 600;
    background: rgba(255,255,255,.15);
    color: #fff;
    border: none; cursor: pointer;
    border-radius: 5px;
    display: inline-flex; align-items: center; gap: 6px;
}
.lms-img-wrap__upload i { font-size: 13px; color: var(--gold-300); }
.lms-img-wrap__body { padding: 12px; }

/* ── DATA TABLE (LMS-09) ── */
.lms-table { width: 100%; border-collapse: collapse; }
.lms-table thead tr { background: var(--navy-800); }
.lms-table th {
    font-size: 11px; font-weight: 600;
    color: rgba(255,255,255,.85);
    padding: 10px 14px;
    text-align: left;
    white-space: nowrap;
}
.lms-table td {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--gray-700);
    border-bottom: 1px solid var(--gray-100);
    vertical-align: top;
}
.lms-table tr:last-child td { border-bottom: none; }
.lms-table tr:nth-child(even) td { background: var(--gray-50); }
.lms-table tr:hover td { background: var(--blue-50); }
.lms-table__no { font-weight: 700; color: var(--blue-700); width: 40px; }
.lms-table__points { font-weight: 700; color: var(--blue-700); }
.lms-table__actions { display: flex; gap: 5px; }
.lms-answer-list { display: flex; flex-direction: column; gap: 3px; }
.lms-answer-list__item {
    font-size: 12px; color: var(--gray-600);
    display: flex; align-items: flex-start; gap: 5px;
}
.lms-answer-list__item::before {
    content: '•';
    color: var(--blue-400);
    font-size: 14px; line-height: 1.4;
    flex-shrink: 0;
}

/* ── CHAPTER BROWSER (LMS-03, student view) ── */
.lms-chapter-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 480px;
    background: var(--white);
    border-radius: 12px;
    border: 1px solid var(--gray-100);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(13,53,133,.06);
}
@media (max-width: 700px) { .lms-chapter-layout { grid-template-columns: 1fr; } }

.lms-ch-nav { background: var(--white); border-right: 1px solid var(--gray-100); }
.lms-ch-nav__item {
    padding: 10px 14px;
    font-size: 13px; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--gray-100);
    transition: background .15s;
}
.lms-ch-nav__item:hover { background: var(--blue-50); }
.lms-ch-nav__item--active { background: var(--navy-700); color: #fff; }
.lms-ch-nav__item--active i { color: var(--gold-300); }
.lms-ch-nav__item i { font-size: 14px; color: var(--gray-300); }
.lms-ch-topic {
    padding: 8px 14px 8px 28px;
    font-size: 12px; cursor: pointer;
    color: var(--gray-500);
    border-bottom: 1px solid var(--gray-100);
    display: flex; align-items: center; gap: 6px;
    transition: background .15s;
}
.lms-ch-topic:hover { background: var(--blue-50); color: var(--blue-700); }
.lms-ch-topic--active { color: var(--blue-700); font-weight: 600; }
.lms-ch-topic--sub { padding-left: 42px; }

.lms-ch-content { padding: 20px; }
.lms-ch-pagination {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.lms-ch-pagination__title {
    font-size: 16px; font-weight: 600;
    color: var(--blue-800);
}
.lms-ch-pagination__nums { display: flex; gap: 4px; }
.lms-ch-pagination__btn {
    width: 28px; height: 28px;
    border-radius: 5px;
    border: 1.5px solid var(--gray-200);
    background: var(--white);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    cursor: pointer;
    color: var(--gray-500);
}
.lms-ch-pagination__btn--active {
    background: var(--navy-700);
    color: #fff;
    border-color: var(--blue-700);
}

/* ── CONTENT SECTIONS (LMS-03) ── */
.lms-content-section {
    background: var(--white);
    border-radius: 12px;
    border: 1px solid var(--gray-100);
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(13,53,133,.06);
}
.lms-content-section__head {
    background: var(--navy-800);
    padding: 10px 14px;
    display: flex; align-items: center; justify-content: space-between;
}
.lms-content-section__title {
    font-size: 13px; font-weight: 600; color: #fff;
    display: flex; align-items: center; gap: 7px;
}
.lms-content-section__title i { color: var(--gold-300); }
.lms-content-section__body { padding: 12px 14px; }

.lms-cs-file {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: 8px;
    margin-bottom: 6px;
}
.lms-cs-file i { font-size: 15px; color: var(--blue-500); }
.lms-cs-file__name { font-size: 12px; color: var(--gray-700); flex: 1; }
.lms-cs-file__check {
    width: 20px; height: 20px; border-radius: 4px;
    background: var(--navy-700);
    display: inline-flex; align-items: center; justify-content: center;
}
.lms-cs-file__check i { font-size: 11px; color: #fff; }

.lms-cs-video-thumb {
    width: 100%; height: 160px;
    background: linear-gradient(135deg, var(--gray-800), var(--gray-700));
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
}
.lms-cs-video-play {
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(255,255,255,.9);
    display: flex; align-items: center; justify-content: center;
}
.lms-cs-video-play i { font-size: 22px; color: var(--blue-700); }

.lms-cs-assign {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 10px;
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: 8px;
    margin-bottom: 6px;
}
.lms-cs-assign__label { font-size: 12px; font-weight: 600; color: var(--blue-700); }
.lms-cs-assign__check {
    width: 20px; height: 20px; border-radius: 4px;
    background: var(--navy-700);
    display: inline-flex; align-items: center; justify-content: center;
}
.lms-cs-assign__check i { font-size: 11px; color: #fff; }

.lms-take-exam-btn {
    background: var(--navy-700);
    color: #fff;
    padding: 10px 24px;
    border-radius: 8px;
    font-family: inherit; font-size: 13px; font-weight: 600;
    border: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
}
.lms-take-exam-btn i { color: var(--gold-300); font-size: 15px; }
.lms-score-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--green-100);
    border: 1.5px solid var(--green-border);
    border-radius: 8px;
    padding: 8px 14px;
}
.lms-score-badge__label {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase;
    color: var(--green-500);
}
.lms-score-badge__value {
    font-size: 18px; font-weight: 700; color: var(--green-500);
}

/* ── CHAPTER LIST SUMMARY (LMS-02 left grid) ── */
.lms-chapter-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid var(--gray-100);
}
.lms-chapter-summary {
    padding: 12px 16px;
    border-right: 1px solid var(--gray-100);
}
.lms-chapter-summary:last-child { border-right: none; }
.lms-chapter-summary__label {
    font-size: 12px; font-weight: 700;
    color: var(--blue-700);
    background: var(--blue-100);
    padding: 6px 10px;
    border-radius: 5px;
    margin-bottom: 8px;
    display: inline-block;
}
.lms-chapter-summary__label--inactive {
    color: var(--gray-500); background: var(--gray-100);
}
.lms-chapter-summary__grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    font-size: 11px; color: var(--gray-500);
}
.lms-chapter-summary__grid strong {
    color: var(--blue-600);
    display: block; margin-bottom: 2px;
}

/* ── PAGE LAYOUT HELPERS ── */
.lms-page-grid-main-side {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 18px;
}
.lms-page-grid-main-side--narrow { grid-template-columns: 1fr 280px; }
@media (max-width: 900px) {
    .lms-page-grid-main-side,
    .lms-page-grid-main-side--narrow { grid-template-columns: 1fr; }
}
.lms-page-card-narrow { max-width: 640px; }

.lms-form-row {
    display: grid; gap: 12px;
    margin-bottom: 14px;
}
.lms-form-row--2 { grid-template-columns: 1fr 1fr; }
.lms-form-row--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 600px) {
    .lms-form-row--2, .lms-form-row--3 { grid-template-columns: 1fr; }
}