/* =============================================================================
   MetaMorphe LMS — Progress / Lesson / Exercise / Header Frontend Styles
   Butterfly design system: cyan · green · pink · yellow — warm neutral palette
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Design tokens */
:root {
    --mmlms-font:    "Inter", system-ui, -apple-system, sans-serif;

    /* Butterfly hues */
    --mmlms-cyan:    #4ec0d8;
    --mmlms-green:   #8fcc5a;
    --mmlms-pink:    #dc5f84;
    --mmlms-yellow:  #ecd84b;

    /* Inks (readable on white) */
    --mmlms-ink-cyan:   #1d6e80;
    --mmlms-ink-green:  #4d7a26;
    --mmlms-ink-pink:   #9c2f51;
    --mmlms-ink-yellow: #7a6411;

    /* Pastel surfaces */
    --mmlms-bg-cyan:    #e0f1f5;
    --mmlms-bg-green:   #ecf6dc;
    --mmlms-bg-pink:    #fae2e9;
    --mmlms-bg-yellow:  #faf3cf;

    /* Pastel borders */
    --mmlms-bd-cyan:    #b4dde6;
    --mmlms-bd-green:   #cfe6a4;
    --mmlms-bd-pink:    #efc1cf;
    --mmlms-bd-yellow:  #ead67e;

    /* Warm neutrals */
    --mmlms-ink-900: #1c1a17;
    --mmlms-ink-800: #2a2722;
    --mmlms-ink-700: #3c3832;
    --mmlms-ink-600: #5a544c;
    --mmlms-ink-500: #807a72;
    --mmlms-ink-400: #a8a39a;
    --mmlms-ink-300: #cfcbc4;
    --mmlms-ink-200: #e7e4df;
    --mmlms-ink-150: #efece7;
    --mmlms-ink-100: #f6f3ee;
    --mmlms-ink-50:  #faf8f4;
    --mmlms-bg:      #f4f1ec;
    --mmlms-paper:   #ffffff;

    /* Radii */
    --mmlms-r-sm:   8px;
    --mmlms-r-md:   12px;
    --mmlms-r-lg:   16px;
    --mmlms-r-pill: 999px;

    /* Shadows */
    --mmlms-sh-1: 0 1px 0 rgba(28,26,23,.04), 0 1px 2px rgba(28,26,23,.04);
    --mmlms-sh-2: 0 2px 4px rgba(28,26,23,.04), 0 8px 24px -8px rgba(28,26,23,.08);

    /* Legacy aliases kept for JS compat */
    --mmlms-primary: var(--mmlms-cyan);
    --mmlms-success: var(--mmlms-green);
    --mmlms-warning: var(--mmlms-yellow);
    --mmlms-error:   var(--mmlms-pink);
    --mmlms-light:   var(--mmlms-ink-50);
    --mmlms-dark:    var(--mmlms-ink-900);
    --mmlms-border:  var(--mmlms-ink-200);
    --mmlms-radius:  var(--mmlms-r-sm);
    --mmlms-shadow:  var(--mmlms-sh-1);
}

/* =============================================================================
   General containers
   ============================================================================= */

.mmlms-lesson-progress,
.mmlms-module-progress,
.mmlms-lesson-completion {
    background: var(--mmlms-paper);
    border: 1px solid var(--mmlms-ink-200);
    border-radius: var(--mmlms-r-md);
    padding: 20px;
    margin: 20px 0;
    box-shadow: var(--mmlms-sh-1);
    font-family: var(--mmlms-font);
    color: var(--mmlms-ink-900);
}

.mmlms-progress-header {
    margin-bottom: 14px;
}

.mmlms-lesson-title,
.mmlms-module-title {
    margin: 0 0 8px 0;
    color: var(--mmlms-ink-900);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.mmlms-lesson-title  { font-size: 1.1em; }
.mmlms-module-title  { font-size: 1.3em; }

.mmlms-progress-date,
.mmlms-completed-date {
    margin: 4px 0;
    font-size: 0.85em;
    color: var(--mmlms-ink-500);
}

/* =============================================================================
   Progress bar
   ============================================================================= */

.mmlms-progress-container { margin-bottom: 14px; }

.mmlms-progress-bar {
    width: 100%;
    height: 8px;
    background: var(--mmlms-ink-150);
    border-radius: var(--mmlms-r-pill);
    overflow: hidden;
    border: none;
}

.mmlms-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--mmlms-cyan), var(--mmlms-green));
    border-radius: var(--mmlms-r-pill);
    transition: width 0.35s ease;
}

.mmlms-progress-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    font-size: 0.85em;
}

.mmlms-progress-percentage {
    font-weight: 700;
    color: var(--mmlms-ink-900);
}

.mmlms-completed-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--mmlms-bg-green);
    color: var(--mmlms-ink-green);
    border: 1px solid var(--mmlms-bd-green);
    padding: 3px 10px;
    border-radius: var(--mmlms-r-pill);
    font-size: 0.78em;
    font-weight: 600;
}

.mmlms-no-exercises-badge {
    background: var(--mmlms-ink-100);
    color: var(--mmlms-ink-500);
    border: 1px solid var(--mmlms-ink-200);
    padding: 3px 10px;
    border-radius: var(--mmlms-r-pill);
    font-size: 0.78em;
    font-weight: 600;
}

/* =============================================================================
   Buttons
   ============================================================================= */

.mmlms-progress-actions {
    margin-top: 18px;
    border-top: 1px solid var(--mmlms-ink-200);
    padding-top: 14px;
}

.mmlms-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--mmlms-cyan);
    color: #fff;
    border: none;
    padding: 9px 18px;
    border-radius: var(--mmlms-r-pill);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--mmlms-font);
    transition: opacity 0.18s ease, transform 0.18s ease;
    margin-right: 8px;
    margin-bottom: 8px;
}

.mmlms-btn:hover    { opacity: 0.85; transform: translateY(-1px); }
.mmlms-btn:disabled { background: var(--mmlms-ink-300); color: var(--mmlms-ink-600); cursor: not-allowed; transform: none; opacity: 1; }

.mmlms-mark-completed   { background: var(--mmlms-green); }
.mmlms-mark-completed:hover { opacity: 0.85; }

/* =============================================================================
   Slider
   ============================================================================= */

.mmlms-progress-slider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.mmlms-progress-slider label {
    font-weight: 500;
    font-size: 13px;
    color: var(--mmlms-ink-700);
    min-width: 80px;
}

.mmlms-progress-range {
    flex: 1;
    height: 4px;
    background: var(--mmlms-ink-150);
    outline: none;
    border-radius: var(--mmlms-r-pill);
    accent-color: var(--mmlms-cyan);
}

.mmlms-progress-range::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--mmlms-cyan);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 2px rgba(78,192,216,0.25);
}

.mmlms-progress-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--mmlms-cyan);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.mmlms-range-value {
    font-weight: 700;
    font-size: 13px;
    min-width: 44px;
    text-align: right;
    color: var(--mmlms-ink-cyan);
}

/* =============================================================================
   Module stats / items
   ============================================================================= */

.mmlms-module-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.mmlms-item-count {
    background: var(--mmlms-ink-100);
    color: var(--mmlms-ink-700);
    padding: 4px 10px;
    border-radius: var(--mmlms-r-pill);
    font-size: 0.85em;
    font-weight: 500;
    border: 1px solid var(--mmlms-ink-200);
}

.mmlms-module-progress-container { margin: 16px 0; }

.mmlms-module-progress-bar      { height: 8px; border-radius: var(--mmlms-r-pill); }
.mmlms-module-progress-bar .mmlms-progress-fill {
    background: linear-gradient(90deg, var(--mmlms-cyan), var(--mmlms-green));
}

.mmlms-items-list {
    margin-top: 20px;
    border-top: 1px solid var(--mmlms-ink-200);
    padding-top: 16px;
}

.mmlms-items-list h4 {
    margin: 0 0 12px 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mmlms-ink-500);
}

.mmlms-item-detail {
    background: var(--mmlms-ink-50);
    border: 1px solid var(--mmlms-ink-200);
    border-radius: var(--mmlms-r-sm);
    padding: 12px 14px;
    margin-bottom: 8px;
    transition: box-shadow 0.18s ease;
}

.mmlms-item-detail:hover { box-shadow: var(--mmlms-sh-2); }

.mmlms-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.mmlms-item-type {
    display: inline-flex;
    align-items: center;
    background: var(--mmlms-bg-cyan);
    color: var(--mmlms-ink-cyan);
    border: 1px solid var(--mmlms-bd-cyan);
    padding: 2px 8px;
    border-radius: var(--mmlms-r-pill);
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mmlms-type-lesson   { background: var(--mmlms-bg-green); color: var(--mmlms-ink-green); border-color: var(--mmlms-bd-green); }
.mmlms-type-exercise { background: var(--mmlms-bg-yellow); color: var(--mmlms-ink-yellow); border-color: var(--mmlms-bd-yellow); }

.mmlms-item-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--mmlms-ink-900);
    flex: 1;
}

.mmlms-item-progress-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mmlms-item-progress-bar { flex: 1; height: 4px; border-radius: var(--mmlms-r-pill); background: var(--mmlms-ink-150); overflow: hidden; }

.mmlms-item-percentage {
    font-size: 0.8em;
    font-weight: 600;
    min-width: 36px;
    text-align: right;
    color: var(--mmlms-ink-600);
}

/* =============================================================================
   Compact / detailed variants
   ============================================================================= */

.mmlms-style-compact { padding: 10px; margin: 10px 0; }
.mmlms-style-compact .mmlms-progress-container { margin-bottom: 0; }

.mmlms-style-detailed { padding: 24px; }
.mmlms-style-detailed .mmlms-progress-bar { height: 10px; }

.mmlms-completion-info {
    background: var(--mmlms-bg-green);
    border: 1px solid var(--mmlms-bd-green);
    padding: 10px 14px;
    border-radius: var(--mmlms-r-sm);
    margin-top: 12px;
    font-size: 13px;
    color: var(--mmlms-ink-green);
}

/* Error / loading */
.mmlms-progress-error {
    background: var(--mmlms-bg-pink);
    color: var(--mmlms-ink-pink);
    padding: 10px 14px;
    border-radius: var(--mmlms-r-sm);
    border: 1px solid var(--mmlms-bd-pink);
    margin: 10px 0;
    font-size: 13px;
}

.mmlms-loading { opacity: 0.6; pointer-events: none; }

@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media (max-width: 768px) {
    .mmlms-lesson-progress,
    .mmlms-module-progress { padding: 14px; margin: 14px 0; }
    .mmlms-progress-actions { flex-direction: column; }
    .mmlms-btn { width: 100%; margin-right: 0; justify-content: center; }
    .mmlms-progress-slider { flex-direction: column; align-items: stretch; gap: 4px; }
    .mmlms-progress-slider label { min-width: auto; }
    .mmlms-module-stats { flex-direction: column; align-items: flex-start; }
}

/* =============================================================================
   Lesson / exercise status indicators
   ============================================================================= */

.mmlms-unified-progress {
    background: var(--mmlms-ink-50);
    border: 1px solid var(--mmlms-ink-200);
    border-radius: var(--mmlms-r-md);
    padding: 14px 16px;
    margin: 14px 0;
    font-family: var(--mmlms-font);
}

.mmlms-progress-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.mmlms-lesson-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--mmlms-r-pill);
    font-size: 0.85em;
    font-weight: 600;
    border: 1px solid;
}

.mmlms-lesson-status.mmlms-completed  { background: var(--mmlms-bg-green);  color: var(--mmlms-ink-green);  border-color: var(--mmlms-bd-green); }
.mmlms-lesson-status.mmlms-incomplete { background: var(--mmlms-bg-yellow); color: var(--mmlms-ink-yellow); border-color: var(--mmlms-bd-yellow); }

.mmlms-status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--mmlms-r-pill);
    font-weight: 600;
    font-size: 13px;
    border: 1px solid;
}

.mmlms-status-indicator.mmlms-completed  { background: var(--mmlms-bg-green);  color: var(--mmlms-ink-green);  border-color: var(--mmlms-bd-green); }
.mmlms-status-indicator.mmlms-incomplete { background: var(--mmlms-bg-yellow); color: var(--mmlms-ink-yellow); border-color: var(--mmlms-bd-yellow); }

.mmlms-completion-status {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0;
    padding: 14px 16px;
    background: var(--mmlms-ink-50);
    border: 1px solid var(--mmlms-ink-200);
    border-radius: var(--mmlms-r-sm);
}

.mmlms-completion-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--mmlms-ink-200);
    flex-wrap: wrap;
}

.mmlms-mark-completed,
.mmlms-mark-incomplete {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--mmlms-green);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: var(--mmlms-r-pill);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--mmlms-font);
    cursor: pointer;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.mmlms-mark-incomplete { background: var(--mmlms-yellow); color: var(--mmlms-ink-yellow); }

.mmlms-mark-completed:hover,
.mmlms-mark-incomplete:hover { opacity: 0.85; transform: translateY(-1px); }

/* exercise count */
.mmlms-exercises-progress-summary,
.mmlms-exercise-count {
    background: var(--mmlms-ink-50);
    border: 1px solid var(--mmlms-ink-200);
    border-radius: var(--mmlms-r-sm);
    padding: 8px 12px;
    font-size: 0.85em;
    color: var(--mmlms-ink-700);
    font-weight: 500;
}

/* =============================================================================
   MODULE PROGRESSION MENU  [mm_lms_menu_progression]
   ============================================================================= */

.mmlms-progression-menu {
    background: var(--mmlms-paper);
    border: 1px solid var(--mmlms-ink-200);
    border-radius: var(--mmlms-r-lg);
    padding: 24px;
    margin: 20px 0;
    box-shadow: var(--mmlms-sh-1);
    font-family: var(--mmlms-font);
}

.mmlms-progression-menu .mmlms-module-header {
    text-align: center;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--mmlms-ink-200);
}

.mmlms-progression-menu .mmlms-module-title {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--mmlms-ink-900);
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.mmlms-progress-summary {
    display: inline-block;
    background: var(--mmlms-bg-cyan);
    color: var(--mmlms-ink-cyan);
    border: 1px solid var(--mmlms-bd-cyan);
    padding: 6px 16px;
    border-radius: var(--mmlms-r-pill);
    font-size: 0.9em;
    font-weight: 600;
}

/* Continue button */
.mmlms-continue-section        { text-align: center; margin: 22px 0; }
.mmlms-continue-section-bottom { text-align: center; margin: 28px 0 0 0; padding-top: 22px; border-top: 1px solid var(--mmlms-ink-200); }

.mmlms-continue-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: var(--mmlms-cyan);
    color: #fff;
    text-decoration: none;
    padding: 16px 28px;
    border-radius: var(--mmlms-r-lg);
    box-shadow: 0 4px 14px rgba(78,192,216,0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}

.mmlms-continue-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(78,192,216,0.38);
    color: #fff;
    text-decoration: none;
}

.mmlms-continue-text   { font-size: 1.1em; font-weight: 700; margin-bottom: 4px; }
.mmlms-continue-lesson { font-size: 0.85em; opacity: 0.88; font-weight: 400; }

.mmlms-continue-btn.mmlms-completed { background: var(--mmlms-green); box-shadow: 0 4px 14px rgba(143,204,90,0.3); }

/* Lessons grid */
.mmlms-lessons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.mmlms-lessons-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

/* =============================================================================
   Lesson / Exercise item cards
   ============================================================================= */

.mmlms-lesson-item,
.mmlms-exercise-item {
    background: var(--mmlms-paper);
    border: 1px solid var(--mmlms-ink-200);
    border-radius: var(--mmlms-r-md);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    position: relative;
}

.mmlms-lesson-item:hover,
.mmlms-exercise-item:hover { transform: translateY(-2px); box-shadow: var(--mmlms-sh-2); }

/* States */
.mmlms-lesson-item.mmlms-completed,
.mmlms-exercise-item.mmlms-completed {
    border-color: var(--mmlms-bd-green);
    background: #fdfffa;
}

.mmlms-lesson-item.mmlms-current,
.mmlms-exercise-item.mmlms-current {
    border-color: var(--mmlms-cyan);
    box-shadow: 0 0 0 3px var(--mmlms-bg-cyan), var(--mmlms-sh-2);
}

.mmlms-lesson-item.mmlms-next,
.mmlms-exercise-item.mmlms-next {
    border-color: var(--mmlms-bd-yellow);
    background: #fffef5;
}

.mmlms-lesson-item.mmlms-locked,
.mmlms-exercise-item.mmlms-locked {
    opacity: 0.62;
    background: var(--mmlms-ink-50);
    border-color: var(--mmlms-ink-200);
}

.mmlms-lesson-item.mmlms-locked:hover,
.mmlms-exercise-item.mmlms-locked:hover { transform: none; cursor: not-allowed; box-shadow: none; }

/* Links */
.mmlms-lesson-link,
.mmlms-exercise-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.mmlms-lesson-link:hover,
.mmlms-exercise-link:hover { color: inherit; text-decoration: none; }

/* Cover image area */
.mmlms-lesson-image,
.mmlms-exercise-image {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--mmlms-ink-100);
}

.mmlms-lesson-image   { height: 140px; }
.mmlms-exercise-image { height: 110px; }

.mmlms-lesson-image img,
.mmlms-exercise-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.mmlms-lesson-item:hover .mmlms-lesson-image img,
.mmlms-exercise-item:hover .mmlms-exercise-image img { transform: scale(1.04); }

/* Placeholders — SVG illustrations */
.mmlms-lesson-placeholder {
    width: 100%;
    height: 100%;
    background: var(--mmlms-bg-cyan);
    display: grid;
    place-items: center;
}

.mmlms-exercise-placeholder {
    width: 100%;
    height: 100%;
    background: var(--mmlms-bg-green);
    display: grid;
    place-items: center;
}

/* Status overlay — positioning anchor only */
.mmlms-lesson-status-overlay,
.mmlms-exercise-status-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Status badge icons */
.mmlms-status-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    flex-shrink: 0;
}

.mmlms-done-badge  { background: #8fcc5a; color: #fff; }
.mmlms-lock-badge  { background: #cfcbc4; color: #fff; }
.mmlms-current-badge {
    background: #fff;
    border: 2px solid #4ec0d8;
    display: grid;
    place-items: center;
}

.mmlms-menu-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ec0d8;
    animation: mmlmsMenuPulse 1.6s ease-in-out infinite;
}

@keyframes mmlmsMenuPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .6; transform: scale(1.3); }
}

/* Legacy icon classes (kept for any custom overrides) */
.mmlms-completed-icon { color: var(--mmlms-green); font-weight: 700; font-size: 1.1em; }
.mmlms-current-icon   { color: var(--mmlms-cyan);  font-weight: 700; font-size: 1.1em; }
.mmlms-locked-icon    { color: var(--mmlms-ink-400); font-size: 1em; }

/* Quiz overlay badge */
.mmlms-quiz-overlay {
    position: absolute;
    top: 46px;
    right: 10px;
    background: var(--mmlms-bg-pink);
    border: 1px solid var(--mmlms-bd-pink);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    transition: transform 0.18s ease;
    z-index: 1;
}

.mmlms-quiz-overlay:hover { transform: scale(1.15); }
.mmlms-quiz-overlay-icon  { font-size: 0.95em; line-height: 1; }

/* Item info */
.mmlms-lesson-info,
.mmlms-exercise-info { padding: 14px 16px; }

.mmlms-lesson-title {
    font-size: 1em;
    font-weight: 600;
    color: var(--mmlms-ink-900);
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.mmlms-exercise-title {
    font-size: 0.95em;
    font-weight: 600;
    color: var(--mmlms-ink-900);
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.mmlms-lesson-number {
    display: inline-block;
    background: var(--mmlms-bg-cyan);
    color: var(--mmlms-ink-cyan);
    border: 1px solid var(--mmlms-bd-cyan);
    padding: 2px 9px;
    border-radius: var(--mmlms-r-pill);
    font-size: 0.75em;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: 0.04em;
}

.mmlms-exercise-number {
    display: inline-block;
    background: var(--mmlms-bg-yellow);
    color: var(--mmlms-ink-yellow);
    border: 1px solid var(--mmlms-bd-yellow);
    padding: 2px 9px;
    border-radius: var(--mmlms-r-pill);
    font-size: 0.72em;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: 0.04em;
}

.mmlms-completion-date {
    display: block;
    font-size: 0.78em;
    color: var(--mmlms-ink-green);
    font-weight: 500;
    margin-top: 6px;
}

/* Exercise progress in lesson card */
.mmlms-lesson-exercises-progress { margin-top: 12px; }

.mmlms-exercises-count {
    font-size: 0.82em;
    color: var(--mmlms-ink-500);
    margin-bottom: 6px;
    display: block;
}

.mmlms-mini-progress-bar {
    width: 100%;
    height: 4px;
    background: var(--mmlms-ink-150);
    border-radius: var(--mmlms-r-pill);
    overflow: hidden;
    border: none;
}

.mmlms-mini-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--mmlms-cyan), var(--mmlms-green));
    border-radius: var(--mmlms-r-pill);
    transition: width 0.3s ease;
}

/* Locked image effect */
.mmlms-lesson-item.mmlms-locked .mmlms-lesson-image,
.mmlms-exercise-item.mmlms-locked .mmlms-exercise-image { filter: grayscale(80%); }

.mmlms-lesson-item.mmlms-locked .mmlms-lesson-title,
.mmlms-exercise-item.mmlms-locked .mmlms-exercise-title { color: var(--mmlms-ink-500); }

/* Style list */
.mmlms-style-list .mmlms-lessons-list .mmlms-lesson-item,
.mmlms-style-list .mmlms-exercises-list .mmlms-exercise-item {
    display: flex;
    align-items: center;
    padding: 0;
}

.mmlms-style-list .mmlms-lesson-image  { width: 110px; height: 74px; flex-shrink: 0; }
.mmlms-style-list .mmlms-exercise-image { width: 90px; height: 64px; flex-shrink: 0; }
.mmlms-style-list .mmlms-lesson-info   { flex: 1; padding: 12px 16px; }
.mmlms-style-list .mmlms-exercise-info { flex: 1; padding: 10px 14px; }
.mmlms-style-list .mmlms-lesson-exercises-progress { margin-top: 8px; }

/* =============================================================================
   EXERCISES MENU  [mm_lms_menu_progression on exercise level]
   ============================================================================= */

.mmlms-exercises-menu {
    background: var(--mmlms-paper);
    border: 1px solid var(--mmlms-ink-200);
    border-radius: var(--mmlms-r-lg);
    padding: 24px;
    margin: 20px 0;
    box-shadow: var(--mmlms-sh-1);
    font-family: var(--mmlms-font);
}

.mmlms-exercises-menu .mmlms-lesson-header {
    text-align: center;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--mmlms-ink-200);
}

.mmlms-exercises-menu .mmlms-lesson-title {
    font-size: 1.4em;
    font-weight: 700;
    color: var(--mmlms-ink-900);
    margin-bottom: 12px;
    letter-spacing: -0.015em;
}

.mmlms-lesson-stats    { margin-bottom: 12px; }
.mmlms-lesson-progress-bar { margin-bottom: 8px; }
.mmlms-lesson-progress-bar .mmlms-progress-bar { height: 6px; }

.mmlms-exercises-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.mmlms-exercises-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

/* =============================================================================
   EXERCISE BUTTON  [mmlms_exercise_button]
   ============================================================================= */

.mmlms-exercise-button-container { margin: 18px 0; font-family: var(--mmlms-font); }

.mmlms-exercise-completion-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--mmlms-green);
    color: #fff;
    border: none;
    padding: 11px 22px;
    border-radius: var(--mmlms-r-pill);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--mmlms-font);
    cursor: pointer;
    transition: opacity 0.18s ease, transform 0.18s ease;
    box-shadow: 0 3px 10px rgba(143,204,90,0.3);
}

.mmlms-exercise-completion-btn:hover:not(:disabled) {
    opacity: 0.88;
    transform: translateY(-1px);
}

.mmlms-exercise-completion-btn:disabled {
    background: var(--mmlms-ink-300);
    color: var(--mmlms-ink-600);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.mmlms-exercise-completion-btn.mmlms-completed-exercise {
    background: var(--mmlms-ink-400);
    box-shadow: none;
}

.mmlms-exercise-status-message { margin-top: 8px; font-size: 13px; }
.mmlms-exercise-status-message .mmlms-success { color: var(--mmlms-ink-green); font-weight: 600; }
.mmlms-exercise-status-message .mmlms-error   { color: var(--mmlms-ink-pink);  font-weight: 600; }
.mmlms-exercise-status-message .mmlms-info    { color: var(--mmlms-ink-cyan);  font-weight: 600; }

/* =============================================================================
   QUIZ INDICATOR  (in progression menu)
   ============================================================================= */

.mmlms-quiz-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--mmlms-bg-pink);
    border: 1px solid var(--mmlms-bd-pink);
    border-radius: var(--mmlms-r-sm);
    padding: 10px 14px;
    margin-bottom: 10px;
    font-size: 0.9em;
    color: var(--mmlms-ink-pink);
    font-family: var(--mmlms-font);
}

.mmlms-quiz-indicator-icon { font-size: 1.3em; flex-shrink: 0; }
.mmlms-quiz-indicator-text { font-weight: 600; }

.mmlms-btn-quiz-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    font-size: 1em;
    vertical-align: middle;
    opacity: 0.9;
}

/* =============================================================================
   HEADER  [mmlms_header]
   ============================================================================= */

.mmlms-header {
    background: var(--mmlms-paper);
    border-bottom: 1px solid var(--mmlms-ink-200);
    padding: 12px 20px;
    margin-bottom: 18px;
    box-shadow: var(--mmlms-sh-1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--mmlms-font);
}

.mmlms-header-left,
.mmlms-header-right {
    display: flex;
    align-items: center;
    gap: 18px;
}

.mmlms-header-item {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.mmlms-header-left .mmlms-header-item::after,
.mmlms-header-right .mmlms-header-item::after {
    content: '›';
    position: absolute;
    right: -13px;
    font-size: 1.3em;
    color: var(--mmlms-ink-300);
    font-weight: 300;
}

.mmlms-header-left .mmlms-header-item:last-child::after,
.mmlms-header-right .mmlms-header-item:last-child::after { content: ''; }

.mmlms-header-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--mmlms-ink-700);
    transition: color 0.18s ease;
    padding: 4px;
    border-radius: var(--mmlms-r-sm);
}

.mmlms-header-link:hover { color: var(--mmlms-ink-900); text-decoration: none; }

.mmlms-header-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    transition: transform 0.18s ease;
}

.mmlms-header-home .mmlms-header-icon { width: 28px; height: 28px; }

.mmlms-header-link:hover .mmlms-header-icon { transform: scale(1.08); }

.mmlms-header-text {
    font-size: 0.9em;
    font-weight: 600;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.mmlms-header-module  .mmlms-header-icon { border: 2px solid var(--mmlms-bd-cyan);   border-radius: var(--mmlms-r-sm); padding: 2px; }
.mmlms-header-lesson  .mmlms-header-icon { border: 2px solid var(--mmlms-bd-green);  border-radius: var(--mmlms-r-sm); padding: 2px; }
.mmlms-header-exercise .mmlms-header-icon { border: 2px solid var(--mmlms-bd-yellow); border-radius: var(--mmlms-r-sm); padding: 2px; }

/* SVG fallback icon wraps (when no option image is set) */
.mmlms-header-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: var(--mmlms-r-sm);
    display: grid;
    place-items: center;
    padding: 2px;
    box-sizing: border-box;
    flex-shrink: 0;
    border: 2px solid;
    transition: transform 0.18s ease;
}

.mmlms-header-link:hover .mmlms-header-icon-wrap { transform: scale(1.08); }

.mmlms-header-icon-module   { background: var(--mmlms-bg-cyan);   color: var(--mmlms-ink-cyan);   border-color: var(--mmlms-bd-cyan); }
.mmlms-header-icon-lesson   { background: var(--mmlms-bg-green);  color: var(--mmlms-ink-green);  border-color: var(--mmlms-bd-green); }
.mmlms-header-icon-exercise { background: var(--mmlms-bg-yellow); color: var(--mmlms-ink-yellow); border-color: var(--mmlms-bd-yellow); }
.mmlms-header-icon-home     { background: var(--mmlms-ink-100);   color: var(--mmlms-ink-600);    border-color: var(--mmlms-ink-200); }

/* =============================================================================
   Misc / animations
   ============================================================================= */

.mmlms-progress-updated { animation: progressUpdate 0.4s ease; }

@keyframes progressUpdate {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.015); }
    100% { transform: scale(1); }
}

.mmlms-btn:focus,
.mmlms-progress-range:focus {
    outline: 2px solid var(--mmlms-cyan);
    outline-offset: 2px;
}

.mmlms-progress-container.disabled { opacity: 0.5; pointer-events: none; }

.mmlms-tooltip { position: relative; cursor: help; }
.mmlms-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--mmlms-ink-900);
    color: #fff;
    padding: 4px 10px;
    border-radius: var(--mmlms-r-sm);
    font-size: 0.78em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1000;
}
.mmlms-tooltip:hover::after { opacity: 1; }

/* =============================================================================
   Responsive
   ============================================================================= */

@media (max-width: 768px) {
    .mmlms-progression-menu,
    .mmlms-exercises-menu { padding: 18px 14px; }
    .mmlms-lessons-grid   { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
    .mmlms-exercises-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
    .mmlms-continue-btn   { padding: 14px 22px; }
    .mmlms-continue-text  { font-size: 1em; }
    .mmlms-style-list .mmlms-lesson-item,
    .mmlms-style-list .mmlms-exercise-item { flex-direction: column; }
    .mmlms-style-list .mmlms-lesson-image,
    .mmlms-style-list .mmlms-exercise-image { width: 100%; height: 120px; }
    .mmlms-header-text { display: none; }
    .mmlms-header-icon { width: 32px; height: 32px; }
    .mmlms-header-left, .mmlms-header-right { gap: 12px; }
}

@media (max-width: 480px) {
    .mmlms-lessons-grid   { grid-template-columns: 1fr; }
    .mmlms-exercises-grid { grid-template-columns: 1fr; }
    .mmlms-lesson-image   { height: 140px; }
    .mmlms-exercise-image { height: 110px; }
    .mmlms-header { padding: 10px; }
    .mmlms-header-left, .mmlms-header-right { gap: 8px; }
    .mmlms-header-icon { width: 28px; height: 28px; }
}