/* ═══════════════════════════════════════════════════════════════════
   Professional SCORM Course Player
   Clean, Minimalistic, Enterprise SaaS Style
   ═══════════════════════════════════════════════════════════════════ */

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

:root {
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --font-heading: var(--font-body);

    /* Professional Brand Palette */
    --clr-primary: #0052cc;        
    --clr-primary-hover: #0043a6;
    --clr-primary-light: #e6effa;
    
    --clr-success: #0b875b;
    --clr-warn: #f5cd47;
    --clr-error: #de350b;

    /* Crisp Greyscale */
    --clr-text-main: #0f172a;      
    --clr-text-muted: #475569;     
    --clr-text-light: #94a3b8;     

    /* Surfaces */
    --clr-bg: #ffffff;
    --clr-surface: #f8fafc;        
    --clr-border: #e2e8f0;         

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;

    --header-h: 64px;
    --footer-h: 80px;

    /* Customization vars (overridden by JS inline styles) */
    --font-size-base: 15px;
    --font-heading-weight: 700;
    --radius-card: 10px;

    /* Sidebar */
    --sidebar-bg: #ffffff;
    --sidebar-section-color: var(--clr-text-light);
    --sidebar-item-text-color: var(--clr-text-main);
    --sidebar-item-num-bg: var(--clr-surface);
    --sidebar-item-num-text: var(--clr-text-muted);
    --sidebar-active-bg: var(--clr-primary-light);
    --sidebar-active-border: var(--clr-primary);
    --sidebar-active-text: var(--clr-primary);

    /* Alternate explanation modal */
    --reteach-modal-bg: #ffffff;
    --reteach-header-bg: linear-gradient(135deg, #fef9c3 0%, #fef3c7 100%);
    --reteach-header-border: #fde68a;
    --reteach-header-text: #92400e;
    --reteach-title-color: var(--clr-primary);
    --reteach-body-text: var(--clr-text-main);
    --reteach-got-it-bg: var(--clr-success);
    --reteach-got-it-text: #ffffff;
    --reteach-still-unsure-bg: var(--clr-surface);
    --reteach-still-unsure-text: var(--clr-text-muted);
    --reteach-still-unsure-border: var(--clr-border);
}

/* ── Reset ────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: var(--clr-bg); }

html { font-size: var(--font-size-base, 15px); }

body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--clr-text-main);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom heading weight */
h1, h2, h3, h4 { font-weight: var(--font-heading-weight); }

/* Custom card radius — applied to bullet cards */
.bullet-card { border-radius: var(--radius-card); }


/* ── Main container (True Fullscreen App) ─────────────────────────── */
#course-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    background: var(--clr-bg);
    display: flex;
    flex-direction: column;
    border-radius: 0;
    box-shadow: none;
    border: none;
    overflow: hidden;
}

/* ── Header ───────────────────────────────────────────────────────── */
#course-header {
    height: var(--header-h);
    min-height: var(--header-h);
    background: var(--clr-bg);
    border-bottom: 1px solid var(--clr-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 48px;
    z-index: 10;
}

.header-left {
    flex: 1;
    min-width: 0; 
    margin-right: 24px;
}

.header-left h1 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--clr-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-right {
    flex-shrink: 0;
}

.progress-container { display: flex; align-items: center; gap: 16px; }

#progress-bar {
    width: 240px;
    height: 6px;
    background: var(--clr-surface);
    border-radius: 4px;
    overflow: hidden;
}

#progress-fill {
    height: 100%;
    background: var(--clr-primary);
    transition: width 0.4s ease;
}

#progress-percent {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--clr-text-muted);
    min-width: 48px;
    text-align: right;
}

/* ── Content area ─────────────────────────────────────────────────── */
#course-content {
    flex: 1;
    display: flex;
    background: var(--clr-bg);
    overflow: hidden;
    position: relative;
}

#slide-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 64px 80px;
    overflow-y: auto;
    scroll-behavior: smooth;
    transition: background 0.5s ease;
}

/* ── Per-slide custom background support ─────────────────────────── */
#slide-container { position: relative; }

.slide-bg-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.4s ease;
}

.slide-fade-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 1);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.3s ease;
}

#slide-content {
    position: relative;
    z-index: 2;
}

/* ── Rotating pastel slide backgrounds (corporate / no-theme only) ── */
html:not([data-theme]) #slide-container[data-pastel="0"] { background: linear-gradient(145deg, #fdfcff 0%, #f6f3ff 100%); }
html:not([data-theme]) #slide-container[data-pastel="1"] { background: linear-gradient(145deg, #f4fbff 0%, #e8f5ff 100%); }
html:not([data-theme]) #slide-container[data-pastel="2"] { background: linear-gradient(145deg, #f3fdf5 0%, #e6f9ec 100%); }
html:not([data-theme]) #slide-container[data-pastel="3"] { background: linear-gradient(145deg, #fdf7f0 0%, #fdf0e3 100%); }
html:not([data-theme]) #slide-container[data-pastel="4"] { background: linear-gradient(145deg, #fdf3f3 0%, #fae8e8 100%); }
html:not([data-theme]) #slide-container[data-pastel="5"] { background: linear-gradient(145deg, #fdfdf0 0%, #faf9e3 100%); }
html:not([data-theme]) #slide-container[data-pastel="6"] { background: linear-gradient(145deg, #f3f5ff 0%, #e8ecff 100%); }
html:not([data-theme]) #slide-container[data-pastel="7"] { background: linear-gradient(145deg, #f2fcf5 0%, #e3f7ea 100%); }

/* ── Slide Content Wrapper ────────────────────────────────────────── */
.slide-content-wrapper {
    width: 100%;
    max-width: 1200px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1; 
}

.slide-indicator {
    text-align: center;
    width: 100%;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--clr-text-light);
    margin-bottom: 16px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.slide-title, .quiz-slide-title, .content-section-title {
    text-align: center;
    width: 100%;
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: var(--font-heading-weight);
    color: var(--clr-text-main);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 24px;
    border: none;
    padding: 0;
}

.content-section-title {
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    margin-top: 32px;
}

/* ── Heading Slide (Perfectly Centered) ───────────────────────────── */
.heading-slide-wrapper {
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    margin: auto 0;
}

.heading-slide-hero {
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.heading-slide-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: var(--font-heading-weight);
    color: var(--clr-text-main);
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0;
    text-align: center;
}

.heading-slide-subtitle {
    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
    font-weight: 400;
    color: var(--clr-text-muted);
    line-height: 1.6;
    margin: 0;
    text-align: center;
}

.heading-slide-bar {
    width: 100px;
    height: 6px;
    background: var(--clr-primary);
    border-radius: 4px;
    margin-bottom: 24px;
}

/* ── Text Paragraphs & Body ───────────────────────────────────────── */
.text-paragraph {
    text-align: center;
    font-size: 1.15rem;
    color: var(--clr-text-muted);
    line-height: 1.8;
    max-width: 900px; 
    margin: 0 auto 32px auto;
}

.body-block {
    background: var(--clr-surface);
    padding: 32px 40px;
    border-radius: var(--radius-md);
    border-top: 4px solid var(--clr-primary);
    border-left: none;
    width: 100%;
    max-width: 1000px;
    text-align: center;
}

/* ── Bullet Points (With Enhanced Explanations) ───────────────────── */
.bullet-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 1000px; 
    margin: 0 auto 32px auto;
}

.bullet-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--clr-text-main);
    padding: 18px 22px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: var(--radius-card, var(--radius-md));
    position: relative;
    overflow: hidden;
    will-change: transform;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.bullet-list li:hover {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.09);
    background: rgba(255, 255, 255, 0.97);
}

.bullet-list li strong {
    color: var(--clr-primary);
    font-weight: 700;
}

/* ── Bullet icon badge ───────────────────────────────────────────── */
.bullet-icon-badge {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--icon-bg, #e0e7ff);
    color: var(--icon-color, #4338ca);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.bullet-icon-badge svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.bullet-text-content {
    flex: 1;
    min-width: 0;
    display: block;
}

/* ── UI Components & Layouts ──────────────────────────────────────── */
.two-column-layout {
    display: flex;
    gap: 48px;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 24px auto;
}

.content-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

/* ── Image Components ─────────────────────────────────────────────── */
.image-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--clr-surface);
    min-height: 100px;
    width: 100%;
}

.image-container.full-width-image {
    max-width: 100%;
}

.slide-image {
    display: block;
    width: 100%;
    max-height: 480px;
    object-fit: contain;
    border-radius: var(--radius-lg);
    border: 1px solid var(--clr-border);
    transition: transform 0.25s ease;
}

.slide-image:hover {
    transform: scale(1.015);
}

/* Skeleton shimmer while loading */
.image-skeleton {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        var(--clr-surface) 25%,
        #e8eef5 50%,
        var(--clr-surface) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
    border-radius: var(--radius-lg);
    min-height: 120px;
}

@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Error / broken-image placeholder */
.image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 24px;
    color: var(--clr-text-light);
    font-size: 0.9rem;
    text-align: center;
    width: 100%;
    min-height: 120px;
}

.image-placeholder i {
    font-size: 2.8rem;
    color: var(--clr-border);
}

/* ── Image Gallery (3 + images) ───────────────────────────────────── */
.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    width: 100%;
    max-width: 1200px;
    margin: 16px auto 0;
}

.image-gallery-2 {
    grid-template-columns: repeat(2, 1fr);
}

.image-gallery .image-container {
    height: 200px;
}

.image-gallery .slide-image {
    height: 100%;
    max-height: 100%;
    object-fit: cover;
}

/* ── Centered single image ────────────────────────────────────────── */
.centered-images {
    align-items: center;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.centered-images .image-container { width: 100%; }
.centered-images .slide-image     { max-height: 540px; }

/* ── Full-width image row (below text) ────────────────────────────── */
.image-row {
    width: 100%;
    max-width: 100%;
    margin-top: 16px;
}

.image-row .slide-image { max-height: 400px; }

/* ── Heading slide images (logos / hero art) ─────────────────────── */
.heading-slide-images {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-top: 24px;
    width: 100%;
}

.heading-slide-image {
    max-width: 520px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    flex-shrink: 0;
}

.heading-slide-image .slide-image {
    max-height: 240px;
    border: none;
}

/* ── Lightbox ─────────────────────────────────────────────────────── */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.lightbox.lightbox-visible {
    opacity: 1;
    pointer-events: all;
}

.lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.lightbox-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: lbZoom 0.25s ease;
}

@keyframes lbZoom {
    from { transform: scale(0.88); }
    to   { transform: scale(1); }
}

.lightbox-img {
    display: block;
    max-width: 90vw;
    max-height: 86vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
}

.lightbox-close {
    position: absolute;
    top: -52px;
    right: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.lightbox-close:hover { background: rgba(255, 255, 255, 0.28); }

/* ── Quiz Section ─────────────────────────────────────────────────── */
#quiz-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: flex-start; 
    padding: 64px 80px 80px 80px; 
    overflow-y: auto;
    scroll-behavior: smooth;
}

.quiz-wrapper {
    width: 100%;
    max-width: 850px;
    margin: 0 auto; 
    padding: 64px 56px;
    background: #ffffff;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.quiz-question {
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    font-weight: 600;
    color: var(--clr-text-main);
    text-align: center;
    margin-bottom: 48px;
    line-height: 1.6;
}

.quiz-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: left; 
}

.quiz-option {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    background: var(--clr-surface);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.quiz-option:hover {
    background: #ffffff;
    border-color: var(--clr-border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.quiz-option input[type="radio"] {
    width: 22px; height: 22px;
    accent-color: var(--clr-primary);
    flex-shrink: 0;
}

.quiz-option label {
    flex: 1;
    cursor: pointer;
    font-size: 1.15rem;
    color: var(--clr-text-main);
    font-weight: 500;
}

.option-letter {
    width: 36px; height: 36px;
    background: #ffffff;
    border: 1px solid var(--clr-border);
    color: var(--clr-text-muted);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 1rem;
    flex-shrink: 0;
}

.quiz-option.correct-answer {
    border-color: var(--clr-success);
    background: #f0fdf4;
}

.quiz-submit {
    width: 100%;
    margin-top: 40px;
    padding: 20px;
    background: var(--clr-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.quiz-submit:hover:not(:disabled) { background: var(--clr-primary-hover); }
.quiz-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Completion Screen ────────────────────────────────────────────── */
.completion-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    min-height: 60vh;
    animation: fadeIn 0.8s ease;
}

.completion-icon {
    font-size: clamp(4rem, 8vw, 6rem);
    color: var(--clr-primary);
    margin-bottom: 32px;
    filter: drop-shadow(0 8px 16px rgba(0, 82, 204, 0.2));
}

.completion-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: var(--font-heading-weight);
    color: var(--clr-text-main);
    margin-bottom: 24px;
}

.completion-score {
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    font-weight: 700;
    color: var(--clr-success);
    margin-bottom: 24px;
    background: #f0fdf4;
    padding: 16px 40px;
    border-radius: 50px;
    border: 2px solid #bbf7d0;
}

.completion-message {
    font-size: 1.15rem;
    color: var(--clr-text-muted);
    margin-bottom: 48px;
    max-width: 600px;
    line-height: 1.6;
}

.restart-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 18px 48px;
    font-size: 1.15rem;
    font-weight: 600;
    background: var(--clr-text-main);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.restart-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2);
}

.completion-actions {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.close-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 18px 48px;
    font-size: 1.15rem;
    font-weight: 600;
    background: transparent;
    color: var(--clr-text-main);
    border: 2px solid var(--clr-text-main);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.close-btn:hover {
    background: var(--clr-text-main);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2);
}

/* ── Footer / Controls ────────────────────────────────────────────── */
#course-footer {
    height: var(--footer-h);
    min-height: var(--footer-h);
    background: var(--clr-bg);
    border-top: 1px solid var(--clr-border);
    display: flex;
    align-items: center;
    padding: 0 48px;
    gap: 24px;
    z-index: 10;
}

.nav-controls {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    flex: 1; 
}

.nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: var(--clr-surface);
    color: var(--clr-text-main);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 140px;
    justify-content: center;
}

.nav-btn:hover:not(:disabled) {
    background: var(--clr-bg);
    border-color: var(--clr-text-light);
}

.nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.nav-btn#next-btn {
    background: var(--clr-primary);
    color: #fff;
    border: none;
}
.nav-btn#next-btn:hover:not(:disabled) { background: var(--clr-primary-hover); }

.audio-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: 999px;
    padding: 6px 16px 6px 6px;
    flex-shrink: 0;
}

.audio-progress {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 180px;
}

.audio-progress-bar {
    flex: 1;
    height: 4px;
    background: var(--clr-border);
    border-radius: 2px;
    overflow: hidden;
    cursor: pointer;
}

.audio-progress-fill {
    height: 100%;
    background: var(--clr-primary);
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
}

.audio-time {
    font-size: 0.7rem;
    color: var(--clr-text-muted);
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.control-btn {
    width: 34px; height: 34px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--clr-text-muted);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all 0.18s ease;
}

.control-btn:hover {
    background: var(--clr-border);
    color: var(--clr-text-main);
}

.fullscreen-btn {
    width: 44px; height: 44px;
    border-radius: 8px;
    border: 1px solid var(--clr-border);
    background: var(--clr-bg);
    color: var(--clr-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.fullscreen-btn:hover {
    background: var(--clr-surface);
    color: var(--clr-text-main);
}

/* ── Loading Screen ───────────────────────────────────────────────── */
.loading-screen {
    background: var(--clr-bg);
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
}
.loading-spinner {
    width: 56px; height: 56px;
    border: 4px solid var(--clr-surface);
    border-top-color: var(--clr-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 24px;
}
.loading-content h2 { color: var(--clr-text-main); font-weight: 600; font-size: 1.3rem; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE DESIGN (MOBILE OPTIMIZATION)
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    #course-header { padding: 0 32px; }
    #course-footer { padding: 0 32px; gap: 16px; }
    #slide-container, #quiz-container { padding: 48px 40px; }

    .two-column-layout { flex-direction: column; gap: 32px; }
    .quiz-wrapper { padding: 48px 40px; }

    #progress-bar { width: 160px; }

    .slide-image { max-height: 380px; }
    .centered-images .slide-image { max-height: 420px; }
    .image-gallery { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
    .lightbox-close { top: -44px; }
}

@media (max-width: 768px) {
    #course-header { padding: 0 20px; }
    .header-left h1 { font-size: 1rem; }
    #progress-bar { width: 100px; }
    #progress-percent { min-width: 38px; font-size: 0.85rem; }

    #slide-container, #quiz-container { padding: 32px 20px 60px 20px; }

    .slide-title, .quiz-slide-title, .content-section-title { margin-bottom: 20px; }
    .text-paragraph { font-size: 1.05rem; margin-bottom: 24px; }

    .body-block { padding: 24px 20px; }
    .bullet-list li { padding: 14px 18px; font-size: 1.05rem; gap: 12px; }
    .bullet-icon-badge { width: 32px; height: 32px; border-radius: 8px; }
    .bullet-icon-badge svg { width: 16px; height: 16px; }
    .quiz-wrapper { padding: 32px 20px; }
    .quiz-question { margin-bottom: 32px; font-size: 1.25rem; }
    .quiz-option { padding: 16px; gap: 16px; }
    .quiz-option label { font-size: 1.05rem; }
    .quiz-submit { padding: 16px; font-size: 1.1rem; }

    #course-footer { padding: 0 20px; gap: 12px; }
    .nav-btn span { display: none; }
    .nav-btn { min-width: auto; padding: 12px 20px; }
    .audio-controls { gap: 6px; padding: 4px 12px 4px 4px; }
    .audio-progress { width: 120px; }
    .control-btn { width: 32px; height: 32px; }
    .fullscreen-btn { width: 40px; height: 40px; }

    .slide-image { max-height: 300px; }
    .image-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .image-gallery .image-container { height: 160px; }
    .image-gallery-2 { grid-template-columns: repeat(2, 1fr); }
    .centered-images .slide-image { max-height: 320px; }
    .heading-slide-image .slide-image { max-height: 180px; }
    .lightbox-img { max-width: 95vw; max-height: 80vh; }
    .lightbox-close { top: -40px; width: 36px; height: 36px; }

    /* Sidebar: never wider than the viewport, and don't push content
       off-screen — it overlays instead. */
    .sidebar { width: min(85vw, 300px); }
    #course-container.sidebar-open #course-header,
    #course-container.sidebar-open #course-content,
    #course-container.sidebar-open #course-footer {
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    #course-header { padding: 0 16px; }
    .header-left { margin-right: 12px; }
    .header-left h1 { font-size: 0.95rem; }
    #progress-bar { display: none; }
    #progress-percent { display: none; }

    #slide-container, #quiz-container { padding: 24px 16px 48px 16px; }

    .body-block { padding: 20px 16px; }
    .bullet-list li { padding: 14px 16px; gap: 10px; }

    .quiz-wrapper { border: none; box-shadow: none; padding: 0; }
    .quiz-option { padding: 14px; gap: 12px; }
    .option-letter { width: 30px; height: 30px; font-size: 0.9rem; }
    .quiz-option label { font-size: 1rem; }

    #course-footer { padding: 0 16px; }
    .nav-btn { padding: 10px 16px; font-size: 1.1rem; }
    .control-btn { width: 28px; height: 28px; }
    .fullscreen-btn { width: 36px; height: 36px; }
    .audio-progress { width: 90px; }
    .audio-time { font-size: 0.65rem; }

    .completion-score { padding: 12px 24px; border-width: 1px; }
    .restart-btn { padding: 14px 32px; width: 100%; }

    .image-gallery { grid-template-columns: 1fr; }
    .image-gallery-2 { grid-template-columns: 1fr; }
    .image-gallery .image-container { height: 200px; }
    .slide-image { max-height: 260px; }
    .lightbox-img { max-width: 98vw; max-height: 75vh; }

    /* Resume dialog + loading screen — keep within viewport */
    .resume-dialog-box,
    .loading-content { width: calc(100% - 32px); max-width: 360px; padding: 24px; }
    .resume-dialog-buttons { flex-direction: column; gap: 8px; }
    .resume-dialog-buttons .resume-btn { width: 100%; }
}

/* ── Resume Dialog ────────────────────────────────────────────────── */
.resume-dialog {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
    animation: fadeIn 0.3s ease;
}

.resume-dialog-box {
    background: #ffffff;
    border-radius: var(--radius-lg);
    padding: 48px 40px 40px;
    max-width: 440px;
    width: 90%;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
    animation: slideUp 0.35s ease;
}

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

.resume-dialog-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    background: var(--clr-primary-light);
    border-radius: 50%;
    margin: 0 auto 24px;
    color: var(--clr-primary);
}

.resume-dialog-box h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--clr-text-main);
    margin-bottom: 12px;
}

.resume-dialog-box p {
    font-size: 1rem;
    color: var(--clr-text-muted);
    margin-bottom: 32px;
    line-height: 1.6;
}

.resume-dialog-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.resume-btn {
    flex: 1;
    padding: 14px 20px;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.resume-btn-primary {
    background: var(--clr-primary);
    color: #ffffff;
}
.resume-btn-primary:hover { background: var(--clr-primary-hover); }

.resume-btn-secondary {
    background: var(--clr-surface);
    color: var(--clr-text-main);
    border: 1px solid var(--clr-border);
}
.resume-btn-secondary:hover { background: var(--clr-border); }

/* ── Knowledge Check badge ────────────────────────────────────────── */
.kc-badge {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 12px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ── Final Assessment ─────────────────────────────────────────────── */
.assessment-wrapper {
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.assessment-header {
    text-align: center;
    padding: 40px 40px 32px;
    background: #ffffff;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: none;
}

.assessment-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    background: var(--clr-primary-light);
    border-radius: 50%;
    margin: 0 auto 16px;
    color: var(--clr-primary);
}

.assessment-header h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--clr-text-main);
    margin-bottom: 8px;
}

.assessment-subtitle {
    font-size: 0.95rem;
    color: var(--clr-text-muted);
}

.assessment-question-block {
    background: #ffffff;
    border: 1px solid var(--clr-border);
    border-top: none;
    padding: 32px 40px;
}

.assessment-question-block:last-of-type {
    border-radius: 0;
}

.assessment-q-num {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--clr-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}

.assessment-q-text {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--clr-text-main);
    line-height: 1.55;
    margin-bottom: 20px;
}

.assessment-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.assessment-wrong {
    border-color: var(--clr-error) !important;
    background: #fff5f5 !important;
}

/* ── Per-question confidence row (final assessment) ──────────────── */
.aq-conf-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed var(--clr-border);
    flex-wrap: wrap;
}
.aq-conf-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--clr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.aq-conf-btns {
    display: flex;
    gap: 8px;
}
.aq-conf-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1.5px solid var(--clr-border);
    border-radius: 20px;
    background: #fff;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--clr-text-muted);
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.aq-conf-btn:hover { border-color: var(--clr-primary); color: var(--clr-primary); background: #f5f3ff; }
.aq-conf-btn .conf-emoji { display: flex; align-items: center; line-height: 1; }
.aq-conf-btn.aq-conf-unsure.selected   { border-color: #de350b; background: #fff1f0; color: #de350b; }
.aq-conf-btn.aq-conf-somewhat.selected { border-color: #d97706; background: #fffbeb; color: #d97706; }
.aq-conf-btn.aq-conf-sure.selected     { border-color: #0b875b; background: #f0fdf4; color: #0b875b; }

.assessment-submit {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
    margin-top: 0 !important;
}

.assessment-score-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 40px;
    border: 1px solid var(--clr-border);
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    animation: fadeIn 0.5s ease;
}

.assessment-score-summary.passed {
    background: #f0fdf4;
    border-color: var(--clr-success);
}

.assessment-score-summary.failed {
    background: #fff5f5;
    border-color: var(--clr-error);
}

.ass-score-num {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 8px;
}

.assessment-score-summary.passed .ass-score-num { color: var(--clr-success); }
.assessment-score-summary.failed .ass-score-num { color: var(--clr-error); }

.ass-score-label {
    font-size: 1rem;
    font-weight: 500;
    color: var(--clr-text-muted);
}
@media (max-width: 480px) {
    .lightbox-close { top: -36px; }
    .resume-dialog-box { padding: 32px 20px 28px; }
    .resume-dialog-buttons { flex-direction: column; }
    .assessment-question-block { padding: 24px 16px; }
    .assessment-header { padding: 28px 16px 20px; }
}

/* ── Menu / hamburger button ─────────────────────────────────────── */
.menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--clr-text-main);
    flex-shrink: 0;
    margin-right: 12px;
    transition: background 0.15s;
}
.menu-btn:hover { background: var(--clr-surface); }

.header-left {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    margin-right: 24px;
}

/* ── Sidebar ─────────────────────────────────────────────────────── */

/* Overlay is kept in HTML but never blocks interaction */
.sidebar-overlay { display: none; }

.sidebar {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--clr-border);
    z-index: 100;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.06);
}
.sidebar.open { transform: translateX(0); }

/* Push all main content right when sidebar is open */
#course-header,
#course-content,
#course-footer {
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-left: 0;
}
#course-container.sidebar-open #course-header,
#course-container.sidebar-open #course-content,
#course-container.sidebar-open #course-footer {
    margin-left: 300px;
}

.sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--clr-border);
    flex-shrink: 0;
}

.sidebar-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--clr-text-main);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.sidebar-close-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--clr-text-muted);
    transition: background 0.15s;
}
.sidebar-close-btn:hover { background: var(--clr-surface); color: var(--clr-text-main); }

.sidebar-list {
    list-style: none;
    overflow-y: auto;
    flex: 1;
    padding: 8px 0 24px;
}

.sidebar-section {
    padding: 16px 20px 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sidebar-section-color);
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.15s, border-color 0.15s;
    user-select: none;
}
.sidebar-item:hover { background: var(--clr-surface); }

.sidebar-item.active {
    background: var(--sidebar-active-bg);
    border-left-color: var(--sidebar-active-border);
}
.sidebar-item.active .sidebar-item-num,
.sidebar-item.active .sidebar-item-text { color: var(--sidebar-active-text); }

.sidebar-item-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--sidebar-item-num-bg);
    border: 1px solid var(--clr-border);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--sidebar-item-num-text);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-item-icon {
    width: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-text-muted);
    flex-shrink: 0;
}

.sidebar-item-text {
    font-size: 0.875rem;
    color: var(--sidebar-item-text-color);
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.sidebar-quiz .sidebar-item-num { background: #fef3c7; border-color: #fde68a; color: #92400e; }
.sidebar-assessment { border-top: 1px solid var(--clr-border); margin-top: 8px; padding-top: 14px; }

/* audio-locked next button — greyed, no text change */
.nav-btn.audio-locked { opacity: 0.35; cursor: not-allowed; }

/* visited → green circle */
.sidebar-item.visited .sidebar-item-num {
    background: #dcfce7;
    border-color: #86efac;
    color: #16a34a;
}

/* locked (menuLock=true, not yet visited) */
.sidebar-item.sb-locked {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Confidence widget (floating card, bottom-right of course-content) */
.confidence-widget {
    position: absolute;
    bottom: 28px;
    right: 28px;
    width: 290px;
    background: #ffffff;
    border: 1px solid var(--clr-border);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.11), 0 2px 6px rgba(0, 0, 0, 0.06);
    z-index: 50;
    padding: 14px 14px 14px;
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.confidence-widget.conf-dismissed {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
    pointer-events: none;
}

.confidence-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.confidence-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--clr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.confidence-buttons {
    display: flex;
    gap: 8px;
}

.conf-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 6px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--clr-border);
    background: var(--clr-surface);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.12s, box-shadow 0.15s;
    font-family: var(--font-body);
}
.conf-btn:hover {
    border-color: var(--clr-primary);
    background: var(--clr-primary-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.12);
}

.conf-emoji { display: flex; align-items: center; justify-content: center; line-height: 1; }

.conf-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--clr-text-muted);
    text-align: center;
    letter-spacing: 0.02em;
}

.conf-btn.conf-unsure.selected   { border-color: #de350b; background: #fff1f0; box-shadow: 0 0 0 3px rgba(222,53,11,0.1); }
.conf-btn.conf-somewhat.selected { border-color: #d97706; background: #fffbeb; box-shadow: 0 0 0 3px rgba(217,119,6,0.1); }
.conf-btn.conf-got-it.selected   { border-color: #0b875b; background: #f0fdf4; box-shadow: 0 0 0 3px rgba(11,135,91,0.1); }
.conf-btn.conf-unsure.selected   .conf-label { color: #de350b; }
.conf-btn.conf-somewhat.selected .conf-label { color: #d97706; }
.conf-btn.conf-got-it.selected   .conf-label { color: #0b875b; }

.conf-close-btn {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--clr-text-light);
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
    padding: 0;
    flex-shrink: 0;
}
.conf-close-btn:hover { background: var(--clr-surface); color: var(--clr-text-muted); }

/* ── Sidebar confidence dots ──────────────────────────────────────── */
.sidebar-conf-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: auto;
    display: none;
}
.sidebar-conf-dot.conf-dot-unsure   { display: block; background: #de350b; }
.sidebar-conf-dot.conf-dot-somewhat { display: block; background: #d97706; }
.sidebar-conf-dot.conf-dot-got-it   { display: block; background: #0b875b; }

/* ── Sidebar review section ───────────────────────────────────────── */
.sidebar-review-section {
    border-top: 1px solid var(--clr-border);
    padding: 10px 0 14px;
    flex-shrink: 0;
}

.sidebar-review-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--clr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 0 20px 8px;
}

.sidebar-review-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-review-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 20px;
    transition: background 0.15s;
}
.sidebar-review-item:hover { background: var(--clr-surface); }

.review-item-text {
    flex: 1;
    font-size: 0.78rem;
    color: var(--clr-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.review-goto-btn {
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 4px;
    border: 1px solid var(--clr-border);
    background: var(--clr-bg);
    color: var(--clr-primary);
    cursor: pointer;
    flex-shrink: 0;
    font-family: var(--font-body);
    transition: background 0.15s;
}
.review-goto-btn:hover { background: var(--clr-primary-light); }

/* ── Assessment Instruction Card ─────────────────────────────────── */
.assessment-instr-card {
    background: #ffffff;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    padding: 48px 48px 40px;
    text-align: center;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08);
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
}

.assessment-instr-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--clr-text-main);
    margin: 20px 0 16px;
}

.assessment-instr-meta {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.instr-pill {
    padding: 4px 14px;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--clr-text-muted);
}

.instr-pill-warn {
    background: #fef3c7;
    border-color: #fde68a;
    color: #92400e;
}

.assessment-instr-list {
    list-style: none;
    text-align: left;
    margin: 0 0 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.assessment-instr-list li {
    display: flex;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--clr-text-muted);
    line-height: 1.5;
    padding: 10px 14px;
    background: var(--clr-surface);
    border-radius: var(--radius-sm);
}

.assessment-instr-list li::before {
    content: "•";
    color: var(--clr-primary);
    font-weight: 700;
    flex-shrink: 0;
}

.assessment-begin-btn {
    display: inline-block;
    padding: 16px 48px;
    background: var(--clr-primary);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.assessment-begin-btn:hover:not(:disabled) { background: var(--clr-primary-hover); }
.assessment-begin-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.assessment-no-attempt-note {
    margin-top: 16px;
    font-size: 0.9rem;
    color: var(--clr-text-muted);
}

/* ── Retake button ───────────────────────────────────────────────── */
.assessment-retake-btn {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 14px 24px;
    background: transparent;
    color: var(--clr-primary);
    border: 2px solid var(--clr-primary);
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.assessment-retake-btn:hover { background: var(--clr-primary-light); }

/* ── Assessment finish button ────────────────────────────────────── */
.assessment-finish-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 16px;
    padding: 16px 24px;
    background: var(--clr-primary);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.assessment-finish-btn:hover { background: var(--clr-primary-hover); }

/* ── Completion screen icon colours ─────────────────────────────── */
.completion-icon-pass { color: #f59e0b; }
.completion-icon-fail { color: var(--clr-error); }

/* ═══════════════════════════════════════════════════════════════════
   INTERACTIVE LEARNING FEATURES
   ═══════════════════════════════════════════════════════════════════ */

/* ── Keyword highlights (rendered from **bold** Markdown) ────────── */
mark.keyword-highlight {
    background: none;
    font-weight: 700;
    color: var(--clr-primary);
    font-style: normal;
    border-bottom: 2px solid var(--clr-primary-light);
    padding: 0 1px 1px;
}

/* ── 3D cascade entrance + ambient levitation + holographic shimmer ─ */

@keyframes card3DFlyIn {
    0%   {
        opacity: 0;
        transform: perspective(900px) rotateX(-55deg) translateY(-28px) translateZ(-70px) scale(0.87);
    }
    65%  {
        opacity: 1;
        transform: perspective(900px) rotateX(3deg) translateY(3px) translateZ(0) scale(1.01);
    }
    100% {
        opacity: 1;
        transform: perspective(900px) rotateX(0deg) translateY(0) translateZ(0) scale(1);
    }
}

@keyframes cardFloat {
    0%, 100% { transform: translateY(0px);   }
    50%       { transform: translateY(-5px); }
}

@keyframes holoSweep {
    0%        { left: -90%; opacity: 0;   }
    8%        {             opacity: 1;   }
    92%       {             opacity: 1;   }
    100%      { left: 170%; opacity: 0;   }
}

.bullet-list li {
    opacity: 0;
    animation:
        card3DFlyIn 0.58s cubic-bezier(0.22, 0.61, 0.36, 1) both,
        cardFloat   3.6s ease-in-out                          infinite;
    animation-delay:
        var(--fly-delay,   0s),
        calc(var(--fly-delay, 0s) + 0.65s + var(--float-offset, 0s));
}

/* Iridescent foil shimmer — sweeps automatically */
.bullet-list li::after {
    content: '';
    position: absolute;
    top: 0; left: -90%;
    width: 55%; height: 100%;
    background: linear-gradient(
        105deg,
        transparent                    10%,
        rgba(255, 255, 255, 0.05)      25%,
        rgba(130, 180, 255, 0.13)      40%,
        rgba(190, 120, 255, 0.11)      55%,
        rgba(100, 230, 195, 0.10)      70%,
        rgba(255, 255, 255, 0.05)      82%,
        transparent                    90%
    );
    transform: skewX(-12deg);
    pointer-events: none;
    border-radius: inherit;
    animation: holoSweep 4.8s ease-in-out infinite;
    animation-delay: var(--holo-delay, 0s);
}

/* ── Expandable bullet (Read more / Show less) ───────────────────── */
.bullet-extra {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1),
                margin-top 0.25s ease,
                opacity 0.3s ease;
    opacity: 0;
    font-size: 0.95rem;
    color: var(--clr-text-muted);
    line-height: 1.75;
    margin-top: 0;
    padding-left: 14px;
    border-left: 3px solid var(--clr-primary-light);
}

.bullet-list li.expanded .bullet-extra {
    max-height: 400px;
    margin-top: 12px;
    opacity: 1;
}

.bullet-expand-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--clr-primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 3px 0;
    letter-spacing: 0.01em;
    opacity: 0.8;
    transition: opacity 0.2s, gap 0.2s;
}
.bullet-expand-btn:hover { opacity: 1; gap: 7px; }

.expand-chevron { transition: transform 0.28s ease; flex-shrink: 0; }
.bullet-list li.expanded .expand-chevron { transform: rotate(180deg); }

/* ── Callout blocks (Note / Tip / Important / Warning / Insight) ── */
.callout-block {
    display: flex;
    gap: 14px;
    padding: 18px 22px;
    border-radius: var(--radius-md);
    border-left: 4px solid;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 20px;
    animation: fadeIn 0.45s ease;
}

.callout-note     { background: #eff6ff; border-color: #3b82f6; }
.callout-tip      { background: #f0fdf4; border-color: #22c55e; }
.callout-important{ background: #fefce8; border-color: #eab308; }
.callout-warning  { background: #fff7ed; border-color: #f97316; }
.callout-insight  { background: #f5f3ff; border-color: #8b5cf6; }

.callout-icon { font-size: 1.1rem; flex-shrink: 0; line-height: 1.75; }

.callout-body-wrap { flex: 1; }

.callout-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 5px;
}
.callout-note .callout-label      { color: #2563eb; }
.callout-tip .callout-label       { color: #16a34a; }
.callout-important .callout-label { color: #ca8a04; }
.callout-warning .callout-label   { color: #ea580c; }
.callout-insight .callout-label   { color: #7c3aed; }

.callout-body-text {
    font-size: 1rem;
    line-height: 1.72;
    color: var(--clr-text-main);
}

/* ── Narration / Explanation accordion panel ─────────────────────── */
.explanation-panel {
    width: 100%;
    max-width: 1000px;
    margin: 28px auto 0;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    animation: fadeIn 0.5s ease 0.25s both;
}

.explanation-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 22px;
    background: var(--clr-surface);
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--clr-text-muted);
    transition: background 0.2s, color 0.2s;
}
.explanation-toggle:hover {
    background: var(--clr-primary-light);
    color: var(--clr-primary);
}

.explanation-toggle-label { flex: 1; }

.explanation-chevron { transition: transform 0.3s ease; flex-shrink: 0; }
.explanation-panel.open .explanation-chevron { transform: rotate(180deg); }

.explanation-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1);
    background: #ffffff;
}
.explanation-panel.open .explanation-body { max-height: 600px; }

.explanation-inner {
    padding: 22px 24px;
    border-top: 1px solid var(--clr-border);
    font-size: 0.98rem;
    color: var(--clr-text-muted);
    line-height: 1.88;
}

/* ── Top-down slide layout (diagram above, content below) ────────── */
.slide-diagram-layout {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.slide-diagram-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

.slide-text-col {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

/* ── Diagram widget card ─────────────────────────────────────────── */
.diagram-widget {
    background: #ffffff;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
    animation: fadeIn 0.5s ease 0.1s both;
    position: relative;
}

.diagram-widget::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 33%, #ec4899 67%, #f59e0b 100%);
    z-index: 1;
}

.diagram-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #faf5ff 0%, #f0f4ff 100%);
    border-bottom: 1px solid #e9d5ff;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6d28d9;
}

.diagram-badge svg { color: #7c3aed; }

.diagram-frame {
    padding: 28px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 220px;
    overflow-x: auto;
    background: linear-gradient(160deg, #fafbff 0%, #f8f6ff 50%, #f6fbff 100%);
}

.diagram-frame svg {
    max-width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.06));
}

/* Loading pulse dots */
.diagram-loading {
    display: flex;
    align-items: center;
    gap: 6px;
}

.diagram-loading-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--clr-border);
    animation: diagramPulse 1.1s ease-in-out infinite;
}
.diagram-loading-dot:nth-child(2) { animation-delay: 0.18s; }
.diagram-loading-dot:nth-child(3) { animation-delay: 0.36s; }

/* ── Zoom button in diagram badge ────────────────────────────────── */
.diagram-zoom-btn {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--clr-border);
    border-radius: 6px;
    background: #ffffff;
    cursor: pointer;
    color: var(--clr-text-muted);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.diagram-zoom-btn:hover {
    background: var(--clr-primary, #4f46e5);
    color: #ffffff;
    border-color: var(--clr-primary, #4f46e5);
}

/* ── Diagram zoom modal (true fullscreen) ────────────────────────── */
.diagram-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.diagram-modal-overlay.open { opacity: 1; }

.diagram-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: background 0.15s, border-color 0.15s;
    z-index: 10000;
    flex-shrink: 0;
}
.diagram-modal-close:hover { background: #ef4444; border-color: #ef4444; }

.diagram-modal-box {
    position: relative;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: scale(0.95);
    transition: transform 0.22s ease;
}
.diagram-modal-overlay.open .diagram-modal-box { transform: scale(1); }

.diagram-modal-svg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100vw - 64px);
    height: calc(100vh - 64px);
    padding: 32px;
}
/* Strip fixed size from Mermaid SVG so it fills the viewport */
.diagram-modal-svg svg {
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    max-height: none;
    filter: drop-shadow(0 4px 32px rgba(0,0,0,0.6));
}

@keyframes diagramPulse {
    0%, 80%, 100% { opacity: 0.35; transform: scale(0.75); }
    40%           { opacity: 1;    transform: scale(1); }
}

@media (max-width: 900px) {
    .slide-diagram-layout { gap: 20px; }
}

@media (max-width: 768px) {
    .diagram-frame { padding: 14px 10px; min-height: 120px; }
}

/* ── Re-teach modal ──────────────────────────────────────────────── */
.reteach-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 900;
    opacity: 0;
    transition: opacity 0.25s ease;
    padding: 20px;
    box-sizing: border-box;
}
.reteach-modal-overlay.open { opacity: 1; }

.reteach-modal-box {
    background: var(--reteach-modal-bg, #ffffff);
    border: 1px solid var(--clr-border);
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
    max-width: 560px;
    width: 100%;
    transform: translateY(16px) scale(0.97);
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}
.reteach-modal-overlay.open .reteach-modal-box { transform: translateY(0) scale(1); }

.reteach-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    background: var(--reteach-header-bg);
    border-bottom: 1px solid var(--reteach-header-border);
}
.reteach-modal-badge {
    display: flex;
    align-items: center;
    gap: 8px;
}
.reteach-badge-icon { font-size: 1.3rem; line-height: 1; }
.reteach-badge-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--reteach-header-text);
    letter-spacing: 0.02em;
}
.reteach-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--reteach-header-text);
    opacity: 0.6;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    transition: opacity 0.15s, background 0.15s;
}
.reteach-close-btn:hover { opacity: 1; background: rgba(0, 0, 0, 0.08); }

.reteach-modal-body { padding: 24px 24px 16px; }

.reteach-modal-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--reteach-title-color);
    margin: 0 0 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.reteach-modal-text {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--reteach-body-text);
    margin: 0;
}

.reteach-modal-footer {
    display: flex;
    gap: 10px;
    padding: 16px 24px 22px;
    flex-wrap: wrap;
}
.reteach-got-it-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 20px;
    background: var(--reteach-got-it-bg);
    color: var(--reteach-got-it-text);
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.reteach-got-it-btn:hover { filter: brightness(0.9); transform: translateY(-1px); }
.reteach-check { font-size: 1.1rem; }
.reteach-still-unsure-btn {
    flex: 1;
    padding: 11px 16px;
    background: var(--reteach-still-unsure-bg);
    color: var(--reteach-still-unsure-text);
    border: 1.5px solid var(--reteach-still-unsure-border);
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.reteach-still-unsure-btn:hover { border-color: var(--clr-text-muted); color: var(--clr-text-main); }

@media (max-width: 480px) {
    .reteach-modal-footer { flex-direction: column; }
    .reteach-modal-body { padding: 20px 16px 12px; }
}

/* ═══════════════════════════════════════════════════════════════════
   3D INTERACTIVE LEARNING FEATURES
   ═══════════════════════════════════════════════════════════════════ */

/* ── 3D Slide Transitions ────────────────────────────────────────── */
.slide-enter-next {
    animation: enter3DNext 0.52s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.slide-enter-prev {
    animation: enter3DPrev 0.52s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes enter3DNext {
    from { opacity: 0; transform: perspective(1200px) rotateY(-15deg) translateX(56px) scale(0.95); }
    to   { opacity: 1; transform: perspective(1200px) rotateY(0)       translateX(0)    scale(1);    }
}
@keyframes enter3DPrev {
    from { opacity: 0; transform: perspective(1200px) rotateY(15deg)  translateX(-56px) scale(0.95); }
    to   { opacity: 1; transform: perspective(1200px) rotateY(0)      translateX(0)     scale(1);    }
}

/* ── Heading slide: idle float + parallax ────────────────────────── */
.heading-slide-hero {
    animation: heroFloat 7s ease-in-out infinite;
    will-change: transform;
}
.heading-slide-hero.parallax-active { animation-play-state: paused; }

@keyframes heroFloat {
    0%, 100% { transform: translateY(0px);   }
    50%      { transform: translateY(-10px); }
}

.heading-slide-bar,
.heading-slide-title,
.heading-slide-subtitle,
.heading-slide-dots { transition: transform 0.8s ease; }


/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .slide-enter-next,
    .slide-enter-prev   { animation: fadeIn 0.3s ease both !important; }
    .heading-slide-hero { animation: none !important; }
    .bullet-list li        { animation: fadeIn 0.3s ease both !important; }
    .bullet-list li::after { animation: none !important; }
}

/* ── Toast notifications ─────────────────────────────────────────── */
.toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    background: #1e293b;
    color: #f8fafc;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22);
    z-index: 20000;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    max-width: 420px;
    text-align: center;
    pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast svg  { flex-shrink: 0; }
.toast-success { background: #0b875b; }
.toast-error   { background: #de350b; }
.toast-warning { background: #d97706; }
.toast-info    { background: #0052cc; }

/* ── Quiz feedback ───────────────────────────────────────────────── */
.quiz-feedback {
    margin-top: 24px;
    padding: 20px 24px;
    border-radius: var(--radius-md);
    animation: fadeIn 0.3s ease;
}
.quiz-feedback.correct   { background: #f0fdf4; border: 1.5px solid #86efac; }
.quiz-feedback.incorrect { background: #fff5f5; border: 1.5px solid #fca5a5; }

.feedback-content {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.feedback-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.quiz-feedback.correct   .feedback-icon { color: #0b875b; }
.quiz-feedback.incorrect .feedback-icon { color: #de350b; }

.feedback-text h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--clr-text-main);
    margin-bottom: 4px;
}
.feedback-text p      { font-size: 0.95rem; color: var(--clr-text-muted); }
.feedback-explanation { margin-top: 8px; font-style: italic; }

/* Review-topic button (inside quiz feedback + assessment question blocks) */
.quiz-review-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    padding: 8px 16px;
    background: #fff;
    border: 1.5px solid var(--clr-primary);
    border-radius: 8px;
    color: var(--clr-primary);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.quiz-review-btn:hover { background: var(--clr-primary); color: #fff; }
.assessment-review-btn { margin-top: 12px; }

/* Confidence row inside knowledge-check quiz */
.quiz-conf-row { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--clr-border); }

/* ── Inline quiz ─────────────────────────────────────────────────── */
.inline-quiz-section { margin-top: 32px; width: 100%; max-width: 1000px; }
.inline-quiz-header h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--clr-primary);
    margin-bottom: 12px;
}
.inline-quiz-question {
    font-size: 1rem;
    font-weight: 600;
    color: var(--clr-text-main);
    margin-bottom: 12px;
    line-height: 1.55;
}
.inline-quiz-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 18px;
    margin-bottom: 8px;
    background: var(--clr-surface);
    border: 1.5px solid var(--clr-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--clr-text-main);
    font-family: var(--font-body);
    transition: background 0.15s, border-color 0.15s;
}
.inline-quiz-option:hover { background: var(--clr-primary-light); border-color: var(--clr-primary); }

/* ── Welcome slide badge ─────────────────────────────────────────── */
.welcome-badge {
    display: inline-block;
    padding: 5px 18px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* ── Learning objectives on the course title slide ───────────────── */
.objectives-section {
    margin-top: 28px;
    width: 100%;
    max-width: 580px;
    text-align: left;
    animation: fadeIn 0.6s ease 0.3s both;
}

.objectives-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--clr-text-light);
    margin-bottom: 12px;
    text-align: center;
}

.objectives-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.objective-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--clr-text-main);
    padding: 9px 16px;
    background: var(--clr-surface);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--clr-primary);
    animation: fadeIn 0.45s ease both;
}

.objective-icon {
    color: var(--clr-primary);
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}
.objective-icon svg { width: 18px; height: 18px; }

/* ── Summary slide ───────────────────────────────────────────────── */
.summary-badge {
    display: inline-block;
    padding: 5px 18px;
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.summary-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 580px;
    margin-top: 28px;
    text-align: left;
}

.summary-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.98rem;
    color: var(--clr-text-main);
    padding: 10px 16px;
    background: var(--clr-surface);
    border-radius: var(--radius-sm);
    border-left: 3px solid #22c55e;
    animation: fadeIn 0.45s ease both;
}

.summary-check {
    color: #16a34a;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.summary-check svg { width: 18px; height: 18px; }


/* ════════════════════════════════════════════════════════════════════
   DESIGN TEMPLATES
   ════════════════════════════════════════════════════════════════════ */

/* ── Heading gradient tokens (default: corporate) ────────────────── */
:root {
    --heading-from: #1e3a5f;
    --heading-to:   #2563eb;
}

/* ── Themed heading-slide background fill ────────────────────────── */
/* course.js adds .heading-bg to #slide-container on heading slides   */
[data-theme]:not([data-theme="corporate"]) #slide-container.heading-bg {
    background: linear-gradient(150deg, var(--heading-from) 0%, var(--heading-to) 100%);
    transition: background 0.4s ease;
}
/* preview_canvas uses #slide-canvas instead */
[data-theme]:not([data-theme="corporate"]) #slide-canvas.heading-bg {
    background: linear-gradient(150deg, var(--heading-from) 0%, var(--heading-to) 100%);
}

/* White-on-colour overrides for any themed heading slide */
[data-theme]:not([data-theme="corporate"]) #slide-container.heading-bg .heading-slide-title,
[data-theme]:not([data-theme="corporate"]) #slide-canvas.heading-bg    .heading-slide-title  { color: #ffffff; }

[data-theme]:not([data-theme="corporate"]) #slide-container.heading-bg .heading-slide-subtitle,
[data-theme]:not([data-theme="corporate"]) #slide-canvas.heading-bg    .heading-slide-subtitle { color: rgba(255,255,255,0.80); }

[data-theme]:not([data-theme="corporate"]) #slide-container.heading-bg .heading-slide-bar,
[data-theme]:not([data-theme="corporate"]) #slide-canvas.heading-bg    .heading-slide-bar {
    background: rgba(255,255,255,0.45);
}

[data-theme]:not([data-theme="corporate"]) #slide-container.heading-bg .heading-slide-dots span,
[data-theme]:not([data-theme="corporate"]) #slide-canvas.heading-bg    .heading-slide-dots span {
    background: rgba(255,255,255,0.45) !important;
}

[data-theme]:not([data-theme="corporate"]) #slide-container.heading-bg .welcome-badge,
[data-theme]:not([data-theme="corporate"]) #slide-canvas.heading-bg    .welcome-badge {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.35);
    color: #ffffff;
}
[data-theme]:not([data-theme="corporate"]) #slide-container.heading-bg .summary-badge,
[data-theme]:not([data-theme="corporate"]) #slide-canvas.heading-bg    .summary-badge {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.35);
    color: #ffffff;
}
[data-theme]:not([data-theme="corporate"]) #slide-container.heading-bg .objective-item,
[data-theme]:not([data-theme="corporate"]) #slide-canvas.heading-bg    .objective-item {
    background: rgba(255,255,255,0.12);
    border-left-color: rgba(255,255,255,0.50);
    color: #ffffff;
}
[data-theme]:not([data-theme="corporate"]) #slide-container.heading-bg .objectives-label,
[data-theme]:not([data-theme="corporate"]) #slide-canvas.heading-bg    .objectives-label { color: rgba(255,255,255,0.65); }

[data-theme]:not([data-theme="corporate"]) #slide-container.heading-bg .summary-item,
[data-theme]:not([data-theme="corporate"]) #slide-canvas.heading-bg    .summary-item {
    background: rgba(255,255,255,0.12);
    border-left-color: rgba(255,255,255,0.50);
    color: #ffffff;
}
[data-theme]:not([data-theme="corporate"]) #slide-container.heading-bg .summary-check,
[data-theme]:not([data-theme="corporate"]) #slide-canvas.heading-bg    .summary-check { color: rgba(255,255,255,0.90); }

[data-theme]:not([data-theme="corporate"]) #slide-container.heading-bg .objective-icon,
[data-theme]:not([data-theme="corporate"]) #slide-canvas.heading-bg    .objective-icon { color: rgba(255,255,255,0.90); }

/* ── 1. Corporate Blue (default — no override needed) ────────────── */

/* ── 2. Dark Slate ───────────────────────────────────────────────── */
[data-theme="dark"] {
    --clr-primary:       #38bdf8;
    --clr-primary-hover: #0ea5e9;
    --clr-primary-light: #0c2a40;
    --clr-bg:            #0f172a;
    --clr-surface:       #1e293b;
    --clr-border:        #334155;
    --clr-text-main:     #f1f5f9;
    --clr-text-muted:    #94a3b8;
    --clr-text-light:    #64748b;
    --heading-from:      #020617;
    --heading-to:        #0c4a6e;
    --reteach-modal-bg:  #1e293b;
}
[data-theme="dark"] .bullet-list li { background: rgba(30, 41, 59, 0.92); border-color: #334155; color: #f1f5f9; backdrop-filter: none; -webkit-backdrop-filter: none; }
[data-theme="dark"] .bullet-list li:hover { background: rgba(38, 50, 70, 0.98); }
[data-theme="dark"] .body-block { background: #1e293b; border-top-color: #38bdf8; }
[data-theme="dark"] .text-paragraph { color: #94a3b8; }

/* ── 3. Emerald Forest ───────────────────────────────────────────── */
[data-theme="emerald"] {
    --clr-primary:       #059669;
    --clr-primary-hover: #047857;
    --clr-primary-light: #d1fae5;
    --clr-bg:            #f0fdf4;
    --clr-surface:       #ffffff;
    --clr-border:        #a7f3d0;
    --clr-text-main:     #064e3b;
    --clr-text-muted:    #065f46;
    --clr-text-light:    #34d399;
    --heading-from:      #022c22;
    --heading-to:        #059669;
}
[data-theme="emerald"] .bullet-list li { border-left-color: #059669; }

/* ── 4. Sunset ───────────────────────────────────────────────────── */
[data-theme="sunset"] {
    --clr-primary:       #f97316;
    --clr-primary-hover: #ea580c;
    --clr-primary-light: #fff7ed;
    --clr-bg:            #fffbf5;
    --clr-surface:       #fff7ed;
    --clr-border:        #fed7aa;
    --clr-text-main:     #1c1917;
    --clr-text-muted:    #78350f;
    --clr-text-light:    #d97706;
    --heading-from:      #431407;
    --heading-to:        #c2410c;
}
[data-theme="sunset"] .bullet-list li { border-left-color: #f97316; }

/* ── 5. Royal Purple ─────────────────────────────────────────────── */
[data-theme="purple"] {
    --clr-primary:       #7c3aed;
    --clr-primary-hover: #6d28d9;
    --clr-primary-light: #ede9fe;
    --clr-bg:            #faf5ff;
    --clr-surface:       #f5f3ff;
    --clr-border:        #ddd6fe;
    --clr-text-main:     #2e1065;
    --clr-text-muted:    #4c1d95;
    --clr-text-light:    #a78bfa;
    --heading-from:      #1e0437;
    --heading-to:        #5b21b6;
}
[data-theme="purple"] .bullet-list li { border-left-color: #7c3aed; }

/* ── 6. Noir ─────────────────────────────────────────────────────── */
[data-theme="noir"] {
    --clr-primary:       #f59e0b;
    --clr-primary-hover: #d97706;
    --clr-primary-light: #291e00;
    --clr-bg:            #111111;
    --clr-surface:       #1c1c1c;
    --clr-border:        #2e2e2e;
    --clr-text-main:     #f5f5f5;
    --clr-text-muted:    #a3a3a3;
    --clr-text-light:    #737373;
    --heading-from:      #000000;
    --heading-to:        #1a1200;
    --reteach-modal-bg:  #1c1c1c;
}
[data-theme="noir"] .bullet-list li { background: rgba(28, 28, 28, 0.95); border-color: #2e2e2e; color: #f5f5f5; backdrop-filter: none; -webkit-backdrop-filter: none; }
[data-theme="noir"] .bullet-list li:hover { background: rgba(34, 34, 34, 0.98); }
[data-theme="noir"] .body-block { background: #1c1c1c; border-top-color: #f59e0b; }
[data-theme="noir"] .text-paragraph { color: #a3a3a3; }
/* ── Nexus Premium (Dark) ─────────────────────────────────────── */
[data-theme="nexus-dark"] {
    --clr-primary:       #FF6B58;
    --clr-primary-hover: #e05e4d;
    --clr-primary-light: #3a221f;
    --clr-bg:            #1c1c1c;
    --clr-surface:       rgba(42, 42, 42, 0.6);
    --clr-border:        rgba(255, 255, 255, 0.08);
    --clr-text-main:     #ffffff;
    --clr-text-muted:    #a3a3a3;
    --clr-text-light:    #737373;
    --ring-dark:         #333333;
    --reteach-modal-bg:  #2a2a2a;
    --reteach-still-unsure-bg: #383838;
}
[data-theme="nexus-dark"] #slide-container { position: relative; z-index: 1; }
[data-theme="nexus-dark"] #slide-container::before {
    content: ''; position: absolute; z-index: -2;
    width: 550px; height: 550px; border-radius: 50%;
    border: 90px solid var(--ring-dark);
    top: -150px; right: -50px; pointer-events: none;
}
[data-theme="nexus-dark"] #slide-container::after {
    content: ''; position: absolute; z-index: -1;
    width: 400px; height: 400px; border-radius: 50%;
    border: 80px solid var(--clr-primary);
    bottom: -100px; right: 15%; pointer-events: none;
    box-shadow: inset 0 0 40px rgba(0,0,0,0.5), 0 0 40px rgba(0,0,0,0.5);
}

/* ── Nexus Premium (Light) ────────────────────────────────────── */
[data-theme="nexus-light"] {
    --clr-primary:       #FF6B58;
    --clr-bg:            #F8F9FA;
    --clr-surface:       rgba(255, 255, 255, 0.7);
    --clr-border:        rgba(0, 0, 0, 0.05);
    --clr-text-main:     #1E1E1E;
    --clr-text-muted:    #666666;
    --clr-text-light:    #a3a3a3;
    --ring-dark:         #e9ecef;
}
[data-theme="nexus-light"] #slide-container { position: relative; z-index: 1; }
[data-theme="nexus-light"] #slide-container::before {
    content: ''; position: absolute; z-index: -2;
    width: 550px; height: 550px; border-radius: 50%;
    border: 90px solid var(--ring-dark);
    top: -150px; right: -50px; pointer-events: none;
}
[data-theme="nexus-light"] #slide-container::after {
    content: ''; position: absolute; z-index: -1;
    width: 400px; height: 400px; border-radius: 50%;
    border: 80px solid var(--clr-primary);
    bottom: -100px; right: 15%; pointer-events: none;
    box-shadow: inset 0 0 40px rgba(0,0,0,0.1), 0 0 40px rgba(0,0,0,0.1);
}

/* ── Typographic Overrides for Nexus Themes ── */
[data-theme^="nexus-"] .slide-title::before,
[data-theme^="nexus-"] .content-section-title::before,
[data-theme^="nexus-"] .heading-slide-title::before {
    content: '••'; display: block; color: var(--clr-primary);
    font-size: 1.5rem; letter-spacing: 4px; margin-bottom: 12px; line-height: 1;
}
[data-theme^="nexus-"] .heading-slide-bar,
[data-theme^="nexus-"] .heading-slide-dots,
[data-theme^="nexus-"] .welcome-badge,
[data-theme^="nexus-"] .summary-badge { display: none !important; }

/* Force left-alignment */
[data-theme^="nexus-"] .slide-content-wrapper { text-align: left; align-items: flex-start; }
[data-theme^="nexus-"] .heading-slide-hero,
[data-theme^="nexus-"] .body-block { text-align: left; }
[data-theme^="nexus-"] .bullet-list { align-items: flex-start; }

/* ════════════════════════════════════════════════════════════════════
   NEXUS PREMIUM THEMES (Colors, Rings & Strict Layout Overrides)
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Kill the Legacy Blue Heading Gradient ── */
[data-theme^="nexus-"] #slide-container.heading-bg {
    background: transparent !important;
}


[data-theme="nexus-dark"] {
    --clr-primary:       #FF6B58;
    --clr-primary-hover: #e05e4d;
    --clr-primary-light: #3a221f;
    --clr-bg:            #222222;
    --clr-surface:       rgba(42, 42, 42, 0.6);
    --clr-border:        rgba(255, 255, 255, 0.05);
    --clr-text-main:     #ffffff;
    --clr-text-muted:    #a3a3a3;
    --clr-text-light:    #737373;
    --ring-dark:         #333333;
}
[data-theme="nexus-dark"] #slide-container,
[data-theme="nexus-dark"] #quiz-container { 
    position: relative; z-index: 1; overflow-x: hidden; background: var(--clr-bg) !important; 
}
[data-theme="nexus-dark"] #slide-container::before,
[data-theme="nexus-dark"] #quiz-container::before {
    content: ''; position: absolute; z-index: -2;
    width: 550px; height: 550px; border-radius: 50%;
    border: 90px solid var(--ring-dark);
    top: -150px; right: -50px; pointer-events: none;
}
[data-theme="nexus-dark"] #slide-container::after,
[data-theme="nexus-dark"] #quiz-container::after {
    content: ''; position: absolute; z-index: -1;
    width: 400px; height: 400px; border-radius: 50%;
    border: 80px solid var(--clr-primary);
    bottom: -100px; right: 15%; pointer-events: none;
    box-shadow: inset 0 0 40px rgba(0,0,0,0.5), 0 0 40px rgba(0,0,0,0.5);
}


[data-theme="nexus-light"] {
    --clr-primary:       #FF6B58;
    --clr-bg:            #F8F9FA;
    --clr-surface:       rgba(255, 255, 255, 0.7);
    --clr-border:        rgba(0, 0, 0, 0.05);
    --clr-text-main:     #222222;
    --clr-text-muted:    #666666;
    --clr-text-light:    #a3a3a3;
    --ring-dark:         #e9ecef;
}
[data-theme="nexus-light"] #slide-container,
[data-theme="nexus-light"] #quiz-container { 
    position: relative; z-index: 1; overflow-x: hidden; background: var(--clr-bg) !important; 
}
[data-theme="nexus-light"] #slide-container::before,
[data-theme="nexus-light"] #quiz-container::before {
    content: ''; position: absolute; z-index: -2;
    width: 550px; height: 550px; border-radius: 50%;
    border: 90px solid var(--ring-dark);
    top: -150px; right: -50px; pointer-events: none;
}
[data-theme="nexus-light"] #slide-container::after,
[data-theme="nexus-light"] #quiz-container::after {
    content: ''; position: absolute; z-index: -1;
    width: 400px; height: 400px; border-radius: 50%;
    border: 80px solid var(--clr-primary);
    bottom: -100px; right: 15%; pointer-events: none;
    box-shadow: inset 0 0 40px rgba(0,0,0,0.1), 0 0 40px rgba(0,0,0,0.1);
}

[data-theme^="nexus-"] #slide-container {
    padding: 80px 100px !important;
    align-items: flex-start !important;
}
[data-theme^="nexus-"] #quiz-container {
    padding: 80px 100px !important;
    align-items: center !important; 
}

[data-theme^="nexus-"] .slide-content-wrapper {
    align-items: flex-start !important;
    max-width: 1200px !important;
    margin: 0 !important;
    position: relative !important; 
    width: 100% !important;
}

[data-theme^="nexus-"] .heading-slide-wrapper,
[data-theme^="nexus-"] .heading-slide-hero {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    margin: 0 !important;
}

[data-theme^="nexus-"] .slide-title,
[data-theme^="nexus-"] .heading-slide-title,
[data-theme^="nexus-"] .content-section-title {
    text-align: left !important;
    width: 100% !important;
    border: none !important; 
    padding: 0 !important;
    position: relative !important;
}

[data-theme^="nexus-"] .heading-slide-title {
    font-size: 4.5rem !important;
    line-height: 1.1 !important;
    margin-bottom: 24px !important;
    max-width: 1200px !important;
}

[data-theme^="nexus-"] .heading-slide-subtitle {
    text-align: left !important;
    font-size: 1.25rem !important;
    max-width: 1000px !important;
    margin: 0 !important;
}

[data-theme^="nexus-"] .slide-title {
    font-size: 3rem !important;
    margin-bottom: 40px !important;
    padding-right: 80px !important; 
}

[data-theme^="nexus-"] .slide-title::before,
[data-theme^="nexus-"] .content-section-title::before,
[data-theme^="nexus-"] .heading-slide-title::before {
    content: '••'; 
    display: block; 
    color: var(--clr-primary);
    font-size: 1.5rem; 
    letter-spacing: 4px; 
    margin-bottom: 12px; 
    line-height: 1;
}

[data-theme^="nexus-"] .slide-indicator {
    position: absolute !important;
    top: 0px !important;
    right: 0px !important;
    text-align: right !important;
    margin: 0 !important;
    color: var(--clr-primary) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    letter-spacing: 2px !important;
    width: auto !important;
}

[data-theme^="nexus-"] .heading-slide-bar,
[data-theme^="nexus-"] .heading-slide-dots,
[data-theme^="nexus-"] .welcome-badge,
[data-theme^="nexus-"] .summary-badge,
[data-theme^="nexus-"] .heading-slide-indicator {
    display: none !important;
}


[data-theme^="nexus-"] .text-paragraph,
[data-theme^="nexus-"] .body-block {
    text-align: left !important;
    max-width: 1200px !important;
    margin: 0 0 20px 0 !important;
}

[data-theme^="nexus-"] .body-block {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

[data-theme^="nexus-"] .bullet-list {
    list-style: none !important; 
    max-width: 1200px !important;
    margin: 0 0 32px 0 !important;
    padding-left: 0 !important;
    gap: 0 !important;
}

[data-theme^="nexus-"] .bullet-list li {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 0 16px 24px !important;
    font-size: 1.1rem !important;
    position: relative !important;
    animation: none !important;
    transform: none !important;
    overflow: visible !important;
}

[data-theme^="nexus-"] .bullet-list li::before {
    content: '•' !important;
    color: var(--clr-primary) !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    font-size: 1.5rem !important;
    line-height: 1.6 !important;
    font-weight: 700 !important;
    display: block !important;
}

[data-theme^="nexus-"] .bullet-list li::after { display: none !important; }
[data-theme^="nexus-"] .bullet-list li:hover { box-shadow: none !important; background: transparent !important; }

[data-theme^="nexus-"] .quiz-wrapper,
[data-theme^="nexus-"] .assessment-wrapper {
    text-align: center !important;
    margin: 0 auto !important; 
    max-width: 800px !important;
    width: 100% !important;
    box-shadow: none !important;
    border: 1px solid var(--ring-dark) !important;
    border-radius: 12px !important;
    padding: 40px !important;
}

[data-theme="nexus-dark"] .quiz-wrapper,
[data-theme="nexus-dark"] .assessment-wrapper {
    background: rgba(255,255,255,0.03) !important;
}

[data-theme="nexus-light"] .quiz-wrapper,
[data-theme="nexus-light"] .assessment-wrapper {
    background: rgba(0,0,0,0.03) !important;
}

[data-theme^="nexus-"] .quiz-header,
[data-theme^="nexus-"] .assessment-header {
    justify-content: center !important;
    text-align: center !important;
    background: transparent !important;
    border: none !important;
    padding: 0 0 20px 0 !important;
}

[data-theme^="nexus-"] .quiz-question,
[data-theme^="nexus-"] .assessment-q-text {
    text-align: center !important;
    font-size: 1.5rem !important;
}

[data-theme^="nexus-"] .assessment-icon {
    margin: 0 auto 16px auto !important;
}


[data-theme^="nexus-"] .quiz-form,
[data-theme^="nexus-"] .assessment-options {
    text-align: left !important;
}

[data-theme^="nexus-"] .quiz-option {
    background: var(--clr-bg) !important;
    border: 1px solid var(--ring-dark) !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
    padding: 16px 20px !important;
}

[data-theme^="nexus-"] .assessment-question-block {
    background: transparent !important;
    border: none !important;
    padding: 24px 0 !important;
    border-top: 1px solid var(--clr-border) !important;
}

[data-theme^="nexus-"] .slide-diagram-layout {
    margin: 0 !important;
    align-items: flex-start !important;
}

[data-theme^="nexus-"] .diagram-widget {
    background: var(--clr-surface) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

[data-theme^="nexus-"] .bullet-list li,
[data-theme^="nexus-"] .body-block,
[data-theme^="nexus-"] .text-paragraph {
    opacity: 1 !important;
    visibility: visible !important;
}


[data-theme="nexus-dark"] .confidence-widget {
    background: rgba(30, 30, 30, 0.85) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}
[data-theme="nexus-dark"] .confidence-title { color: #a3a3a3 !important; }
[data-theme="nexus-dark"] .conf-close-btn { color: #a3a3a3 !important; }
[data-theme="nexus-dark"] .conf-btn { 
    background: rgba(255, 255, 255, 0.05) !important; 
    border-color: rgba(255, 255, 255, 0.1) !important; 
}
[data-theme="nexus-dark"] .conf-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--clr-primary) !important;
}
[data-theme="nexus-dark"] .conf-label { color: #e0e0e0 !important; }


[data-theme^="nexus-"] .explanation-panel {
    margin: 20px 0 0 0 !important;
    max-width: 1200px !important;
    background: transparent !important;
    border: 1px solid var(--clr-border) !important;
}
[data-theme^="nexus-"] .explanation-toggle {
    background: rgba(0, 0, 0, 0.03) !important;
    color: var(--clr-text-main) !important;
}
[data-theme="nexus-dark"] .explanation-toggle {
    background: rgba(255, 255, 255, 0.05) !important;
}
[data-theme="nexus-dark"] .explanation-body { background: transparent !important; }
[data-theme="nexus-dark"] .explanation-inner {
    color: #a3a3a3 !important;
    border-top-color: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="nexus-dark"] #course-footer {
    background: var(--clr-bg) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}
[data-theme="nexus-dark"] .nav-btn:not(#next-btn),
[data-theme="nexus-dark"] .fullscreen-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
[data-theme="nexus-dark"] .nav-btn:not(#next-btn):hover,
[data-theme="nexus-dark"] .fullscreen-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}


[data-theme="nexus-dark"] .option-letter {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}


[data-theme="nexus-dark"] .aq-conf-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
[data-theme="nexus-dark"] .aq-conf-btn .conf-label {
    color: #e0e0e0 !important;
}
[data-theme="nexus-dark"] .aq-conf-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--clr-primary) !important;
}


[data-theme="nexus-dark"] .aq-conf-btn.aq-conf-unsure.selected {
    background: rgba(222, 53, 11, 0.15) !important;
    border-color: #de350b !important;
}
[data-theme="nexus-dark"] .aq-conf-btn.aq-conf-unsure.selected .conf-label { color: #ff8b73 !important; }

[data-theme="nexus-dark"] .aq-conf-btn.aq-conf-somewhat.selected {
    background: rgba(217, 119, 6, 0.15) !important;
    border-color: #d97706 !important;
}
[data-theme="nexus-dark"] .aq-conf-btn.aq-conf-somewhat.selected .conf-label { color: #fbbf24 !important; }

[data-theme="nexus-dark"] .aq-conf-btn.aq-conf-sure.selected,
[data-theme="nexus-dark"] .aq-conf-btn.aq-conf-got-it.selected {
    background: rgba(11, 135, 91, 0.15) !important;
    border-color: #0b875b !important;
}
[data-theme="nexus-dark"] .aq-conf-btn.aq-conf-sure.selected .conf-label,
[data-theme="nexus-dark"] .aq-conf-btn.aq-conf-got-it.selected .conf-label { color: #34d399 !important; } 


/* Fix for invisible text on nexus-light heading slides */
[data-theme="nexus-light"] #slide-container.heading-bg .heading-slide-title,
[data-theme="nexus-light"] #slide-canvas.heading-bg .heading-slide-title {
    color: var(--clr-text-main) !important;
}

[data-theme="nexus-light"] #slide-container.heading-bg .heading-slide-subtitle,
[data-theme="nexus-light"] #slide-canvas.heading-bg .heading-slide-subtitle {
    color: var(--clr-text-muted) !important;
}
/* ════════════════════════════════════════════════════════════════════
   NEXUS-LIGHT: FIX INVISIBLE WHITE TEXT ON HEADING SLIDES
   ════════════════════════════════════════════════════════════════════ */

/* 1. Titles and Subtitles */
[data-theme="nexus-light"] #slide-container.heading-bg .heading-slide-title,
[data-theme="nexus-light"] #slide-canvas.heading-bg .heading-slide-title { 
    color: var(--clr-text-main) !important; 
}
[data-theme="nexus-light"] #slide-container.heading-bg .heading-slide-subtitle,
[data-theme="nexus-light"] #slide-canvas.heading-bg .heading-slide-subtitle { 
    color: var(--clr-text-muted) !important; 
}

/* 2. Objectives & Summary List Items (Backgrounds & Borders) */
[data-theme="nexus-light"] #slide-container.heading-bg .objective-item,
[data-theme="nexus-light"] #slide-canvas.heading-bg .objective-item,
[data-theme="nexus-light"] #slide-container.heading-bg .summary-item,
[data-theme="nexus-light"] #slide-canvas.heading-bg .summary-item {
    background: var(--clr-surface) !important;
    border-left-color: var(--clr-primary) !important;
    color: var(--clr-text-main) !important;
}

/* 3. Objective Labels (e.g., "In this module you will learn...") */
[data-theme="nexus-light"] #slide-container.heading-bg .objectives-label,
[data-theme="nexus-light"] #slide-canvas.heading-bg .objectives-label { 
    color: var(--clr-text-light) !important; 
}

/* 4. Icons and Checkmarks inside the lists */
[data-theme="nexus-light"] #slide-container.heading-bg .objective-icon,
[data-theme="nexus-light"] #slide-canvas.heading-bg .objective-icon,
[data-theme="nexus-light"] #slide-container.heading-bg .summary-check,
[data-theme="nexus-light"] #slide-canvas.heading-bg .summary-check { 
    color: var(--clr-primary) !important; 
}

/* 5. (Optional) If you ever decide to un-hide the Welcome/Summary Badges */
[data-theme="nexus-light"] #slide-container.heading-bg .welcome-badge,
[data-theme="nexus-light"] #slide-canvas.heading-bg .welcome-badge,
[data-theme="nexus-light"] #slide-container.heading-bg .summary-badge,
[data-theme="nexus-light"] #slide-canvas.heading-bg .summary-badge {
    background: #fef3c7 !important;
    border-color: #fde68a !important;
    color: #92400e !important;
}

/* ════════════════════════════════════════════════════════════════════
   nexus-professional (Industrial AI / Full-Width High-Contrast Minimalist)
   ════════════════════════════════════════════════════════════════════ */

[data-theme="nexus-professional"] {
    /* Stark black for primary accents */
    --clr-primary:       #111111;       
    --clr-primary-hover: #333333;
    --clr-primary-light: #e2e6eb;
    
    /* The signature cool, pale gray-blue background */
    --clr-bg:            #E8ECEF;       
    --clr-surface:       #F2F4F7;       
    --clr-border:        #111111;       
    
    --clr-text-main:     #111111;
    --clr-text-muted:    #555555;
    --clr-text-light:    #888888;
    
    --ring-dark:         rgba(17, 17, 17, 0.04); 
}

/* ── 1. Structural Overrides ── */
[data-theme="nexus-professional"] #slide-container,
[data-theme="nexus-professional"] #quiz-container { 
    position: relative; 
    z-index: 1; 
    overflow-x: hidden; 
    background: var(--clr-bg) !important; 
}

/* Background Abstract Shapes */
[data-theme="nexus-professional"] #slide-container::before,
[data-theme="nexus-professional"] #quiz-container::before {
    content: ''; position: absolute; z-index: -2;
    width: 600px; height: 600px; border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    border: 2px solid var(--ring-dark);
    top: -100px; right: -100px; pointer-events: none;
    background: rgba(255,255,255,0.1);
}

[data-theme="nexus-professional"] #slide-container::after,
[data-theme="nexus-professional"] #quiz-container::after {
    content: ''; position: absolute; z-index: -1;
    width: 400px; height: 400px; border-radius: 50%;
    border: 60px solid var(--ring-dark);
    bottom: -150px; left: -100px; pointer-events: none;
}

/* Kill legacy blue heading gradient */
[data-theme="nexus-professional"] #slide-container.heading-bg {
    background: transparent !important;
}

/* ── 2. Typography & Layout (FULL WIDTH) ── */
[data-theme="nexus-professional"] .slide-content-wrapper {
    align-items: flex-start !important;
    max-width: 100% !important; /* Edge-to-edge */
    width: 100% !important;
    margin: 0 !important;
}

/* Full-width structural lines for titles */
[data-theme="nexus-professional"] .slide-title,
[data-theme="nexus-professional"] .content-section-title {
    text-align: left !important;
    font-weight: 600 !important;
    letter-spacing: -0.03em !important;
    border-bottom: 1px solid var(--clr-border) !important;
    padding-bottom: 16px !important;
    margin-bottom: 40px !important;
    width: 100% !important;
    display: block !important; /* Forces line to stretch */
}

/* Hide the dots from previous nexus themes */
[data-theme="nexus-professional"] .slide-title::before,
[data-theme="nexus-professional"] .content-section-title::before,
[data-theme="nexus-professional"] .heading-slide-title::before {
    display: none !important;
}

[data-theme="nexus-professional"] .heading-slide-title {
    font-size: clamp(3rem, 6vw, 5rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.04em !important;
    text-transform: uppercase !important;
    line-height: 1.05 !important;
    color: var(--clr-text-main) !important;
    text-align: left !important;
    max-width: 100% !important;
}

[data-theme="nexus-professional"] .heading-slide-subtitle {
    color: var(--clr-text-muted) !important;
    text-align: left !important;
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    margin-top: 16px !important;
    max-width: 100% !important;
}

/* Ensure paragraphs and blocks stretch */
[data-theme="nexus-professional"] .text-paragraph,
[data-theme="nexus-professional"] .body-block {
    max-width: 100% !important;
    text-align: left !important;
}

/* ── 3. Cards & Bullets (FLUID GRID / CUT CORNERS) ── */
[data-theme="nexus-professional"] .bullet-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 24px !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}

[data-theme="nexus-professional"] .bullet-list li {
    background: transparent !important;
    border: 1px solid var(--clr-border) !important;
    border-radius: 0px 32px 0px 32px !important; /* Signature cut corner */
    padding: 28px 32px !important;
    font-size: 1.05rem !important;
    color: var(--clr-text-main) !important;
    transition: background 0.3s ease, color 0.3s ease !important;
}

/* Hover effect: inverts to dark */
/* Disable hover effect: keep it transparent and static */
[data-theme="nexus-professional"] .bullet-list li:hover {
    background: transparent !important;
    color: var(--clr-text-main) !important;
    box-shadow: none !important;
    transform: none !important;
}

[data-theme="nexus-professional"] .bullet-list li::before {
    display: none !important; /* Removes default dots */
}

/* ── 4. Badges & Pills ── */
[data-theme="nexus-professional"] .welcome-badge,
[data-theme="nexus-professional"] .summary-badge {
    display: inline-block !important;
    background: var(--clr-primary) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 40px !important; /* Pill shape */
    padding: 8px 24px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* ── 5. Buttons & Controls ── */
[data-theme="nexus-professional"] .nav-btn:not(#next-btn) {
    background: transparent !important;
    border: 1px solid var(--clr-border) !important;
    border-radius: 40px !important;
    color: var(--clr-text-main) !important;
}

[data-theme="nexus-professional"] .nav-btn#next-btn {
    background: var(--clr-primary) !important;
    border-radius: 40px !important;
    color: #ffffff !important;
}

/* ── 6. Fix for Heading Slide White Text overrides ── */
[data-theme="nexus-professional"] #slide-container.heading-bg .objective-item,
[data-theme="nexus-professional"] #slide-container.heading-bg .summary-item {
    background: transparent !important;
    border: 1px solid var(--clr-border) !important;
    border-radius: 0 16px 0 16px !important;
    color: var(--clr-text-main) !important;
}

[data-theme="nexus-professional"] #slide-container.heading-bg .objective-icon,
[data-theme="nexus-professional"] #slide-container.heading-bg .summary-check,
[data-theme="nexus-professional"] #slide-container.heading-bg .objectives-label { 
    color: var(--clr-primary) !important; 
}
/* ════════════════════════════════════════════════════════════════════
   NEXUS-CONNECT (Corporate Navy & Red with Organic Gradients)
   ════════════════════════════════════════════════════════════════════ */

[data-theme="nexus-connect"] {
    /* The vibrant brand red */
    --clr-primary:       #D2202E;       
    --clr-primary-hover: #A81A25;
    --clr-primary-light: #F0E6E7;
    
    /* The light silver/gray background from the poster */
    --clr-bg:            #DDE0E2;       
    --clr-surface:       #FFFFFF;       
    
    /* Deep Corporate Navy */
    --clr-border:        #08294F;       
    --clr-text-main:     #08294F;
    --clr-text-muted:    #4B5C6F;
    --clr-text-light:    #8291A0;
    
    /* Signature gradient used in blobs and underlines */
    --gradient-brand:    linear-gradient(135deg, #D2202E 0%, #08294F 100%);
    --gradient-line:     linear-gradient(90deg, #08294F 0%, #08294F 40%, #D2202E 40%, #D2202E 100%);
}

/* ── 1. Structural Overrides & Organic Blobs ── */
[data-theme="nexus-connect"] #slide-container,
[data-theme="nexus-connect"] #quiz-container { 
    position: relative; 
    z-index: 1; 
    overflow-x: hidden; 
    background: var(--clr-bg) !important; 
}

/* Massive background gradient blob (bottom right) */
[data-theme="nexus-connect"] #slide-container::before,
[data-theme="nexus-connect"] #quiz-container::before {
    content: ''; position: absolute; z-index: -2;
    width: 800px; height: 800px; 
    background: var(--gradient-brand);
    /* Organic, uneven border radius to match the design */
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    bottom: -200px; right: -200px; 
    opacity: 0.12; /* Kept subtle to ensure text readability */
    pointer-events: none;
}

/* Small floating red accent spheres (top left) */
[data-theme="nexus-connect"] #slide-container::after,
[data-theme="nexus-connect"] #quiz-container::after {
    content: ''; position: absolute; z-index: -1;
    width: 120px; height: 120px; border-radius: 50%;
    background: var(--clr-primary);
    top: 60px; left: -40px; 
    opacity: 0.8;
    pointer-events: none;
    box-shadow: 20px 40px 0 -40px var(--clr-border);
}

[data-theme="nexus-connect"] #slide-container.heading-bg {
    background: transparent !important;
}

/* ── 2. Typography & The Signature Underline ── */
[data-theme="nexus-connect"] .slide-content-wrapper {
    align-items: flex-start !important;
    text-align: left !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
}

/* Replicating the "COME ALIVE IN SECTOR V" thick, two-toned underline */
[data-theme="nexus-connect"] .slide-title,
[data-theme="nexus-connect"] .content-section-title {
    text-align: left !important;
    font-weight: 900 !important;
    color: var(--clr-text-main) !important;
    position: relative !important;
    padding-bottom: 16px !important;
    margin-bottom: 40px !important;
    border: none !important;
    width: 100% !important;
}

[data-theme="nexus-connect"] .slide-title::after,
[data-theme="nexus-connect"] .content-section-title::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 140px; 
    height: 8px;
    background: var(--gradient-line);
}

/* Hide legacy dots */
[data-theme="nexus-connect"] .slide-title::before,
[data-theme="nexus-connect"] .content-section-title::before,
[data-theme="nexus-connect"] .heading-slide-title::before {
    display: none !important;
}

[data-theme="nexus-connect"] .heading-slide-title {
    font-size: clamp(3.5rem, 7vw, 5.5rem) !important;
    font-weight: 900 !important;
    color: var(--clr-text-main) !important;
    text-transform: uppercase !important;
    line-height: 1.1 !important;
    text-align: left !important;
    position: relative;
    padding-bottom: 24px;
}

/* Add the gradient underline to the main hero title too */
[data-theme="nexus-connect"] .heading-slide-title::after {
    content: ''; position: absolute;
    bottom: 0; left: 0;
    width: 180px; height: 10px;
    background: var(--gradient-line);
}

[data-theme="nexus-connect"] .heading-slide-subtitle {
    color: var(--clr-text-muted) !important;
    text-align: left !important;
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    margin-top: 24px !important;
}

[data-theme="nexus-connect"] .text-paragraph,
[data-theme="nexus-connect"] .body-block {
    text-align: left !important;
    max-width: 1000px !important;
}

/* ── 3. Cards & Bullets ── */
[data-theme="nexus-connect"] .bullet-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 24px !important;
    width: 100% !important;
    padding: 0 !important;
}

[data-theme="nexus-connect"] .bullet-list li {
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 12px !important;
    border-top: 6px solid var(--clr-primary) !important; /* Bold red top border */
    padding: 28px 32px !important;
    font-size: 1.05rem !important;
    color: var(--clr-text-muted) !important;
    box-shadow: 0 12px 32px rgba(8, 41, 79, 0.08) !important; /* Navy shadow */
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

[data-theme="nexus-connect"] .bullet-list li:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 40px rgba(8, 41, 79, 0.12) !important;
    background: #FFFFFF !important; /* Keep it white on hover */
    color: var(--clr-text-main) !important;
}

[data-theme="nexus-connect"] .bullet-list li::before {
    display: none !important;
}

/* ── 4. Badges & Buttons ── */
[data-theme="nexus-connect"] .welcome-badge,
[data-theme="nexus-connect"] .summary-badge {
    display: inline-block !important;
    background: var(--clr-border) !important; /* Navy background */
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 20px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
}

[data-theme="nexus-connect"] .nav-btn#next-btn {
    background: var(--gradient-brand) !important;
    border: none !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
}

/* ── 5. Fix for Heading Slide White Text overrides ── */
[data-theme="nexus-connect"] #slide-container.heading-bg .objective-item,
[data-theme="nexus-connect"] #slide-container.heading-bg .summary-item {
    background: #FFFFFF !important;
    border-left-color: var(--clr-primary) !important;
    color: var(--clr-text-main) !important;
    box-shadow: 0 8px 24px rgba(8, 41, 79, 0.06) !important;
}

[data-theme="nexus-connect"] #slide-container.heading-bg .objective-icon,
[data-theme="nexus-connect"] #slide-container.heading-bg .summary-check,
[data-theme="nexus-connect"] #slide-container.heading-bg .objectives-label { 
    color: var(--clr-primary) !important; 
}
/* ════════════════════════════════════════════════════════════════════
   AURA CATEGORY: Cinematic, Centered, Glowing Glassmorphism
   ════════════════════════════════════════════════════════════════════ */

[data-theme="aura-electric"] {
    --clr-primary:       #3A86FF;
    --clr-primary-hover: #5C9DFF;
    --clr-bg:            #020203;       /* Absolute deep space black */
    --clr-surface:       rgba(15, 20, 35, 0.65); /* Richer, darker glassy blue */
    --clr-border:        rgba(58, 134, 255, 0.3);

    --clr-text-main:     #FFFFFF;
    --clr-text-muted:    #A3B1C6;       /* Brighter muted text for dark mode */
    --clr-text-light:    #5A6B84;
    --reteach-modal-bg:  #0d1e40;
    --reteach-still-unsure-bg: #1a2a50;
}

/* ── 1. Cinematic Background & Lighting ── */
[data-theme^="aura-"] #slide-container,
[data-theme^="aura-"] #quiz-container { 
    position: relative; 
    z-index: 1; 
    overflow-x: hidden; 
    background: var(--clr-bg) !important; 
}

/* The top-down cinematic light wash */
[data-theme="aura-electric"] #slide-container::before,
[data-theme="aura-electric"] #quiz-container::before {
    content: ''; position: absolute; z-index: -2;
    width: 100%; height: 70vh; 
    background: linear-gradient(180deg, rgba(58,134,255,0.15) 0%, rgba(2,2,3,0) 100%);
    top: 0; left: 0; pointer-events: none;
}

/* ── 2. Aura Layout: Grand & Centered ── */
[data-theme^="aura-"] .slide-content-wrapper {
    align-items: center !important; 
    max-width: 1200px !important;
    margin: 0 auto !important;
    text-align: center !important;
}

[data-theme^="aura-"] .heading-slide-title {
    font-size: clamp(4rem, 9vw, 8rem) !important; 
    font-weight: 800 !important;
    color: var(--clr-text-main) !important;
    text-transform: uppercase !important;
    letter-spacing: -0.04em !important;
    line-height: 1 !important;
    text-align: center !important; 
    width: 100% !important;
}

[data-theme^="aura-"] .heading-slide-subtitle {
    text-align: center !important; 
    font-size: 1.3rem !important;
    margin-top: 24px !important;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    color: var(--clr-text-muted) !important;
}

[data-theme^="aura-"] .slide-title,
[data-theme^="aura-"] .content-section-title {
    text-align: center !important; 
    font-size: 2.8rem !important;
    font-weight: 600 !important;
    color: var(--clr-text-main) !important;
    border: none !important;
    padding-bottom: 20px !important;
    margin-bottom: 40px !important;
    width: 100% !important;
}

/* Hide all standard dots/lines from base themes */
[data-theme^="aura-"] .slide-title::before,
[data-theme^="aura-"] .content-section-title::before,
[data-theme^="aura-"] .heading-slide-title::before,
[data-theme^="aura-"] .heading-slide-bar,
[data-theme^="aura-"] .heading-slide-dots {
    display: none !important;
}

/* ── 3. The "Image Elements": Glowing Banners & Deep Cards ── */

/* Replicating the wide glowing blue banner under the title in the image */
[data-theme="aura-electric"] .body-block {
    background: linear-gradient(180deg, rgba(58,134,255,0.2) 0%, rgba(10,15,30,0.8) 100%) !important;
    border: 1px solid var(--clr-border) !important;
    border-top: 2px solid var(--clr-primary) !important; /* Bright top edge */
    border-radius: 24px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8) !important;
    color: #FFFFFF !important;
    font-size: 1.2rem !important;
    padding: 40px !important;
    text-align: left !important;
}

[data-theme^="aura-"] .bullet-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 24px !important;
    width: 100% !important;
    padding: 0 !important;
}

[data-theme="aura-electric"] .bullet-list li {
    background: linear-gradient(180deg, rgba(20,25,40,0.7) 0%, rgba(5,10,20,0.95) 100%) !important;
    border: 1px solid var(--clr-border) !important;
    border-top: 1px solid rgba(255,255,255,0.15) !important; /* Metallic top rim light */
    border-radius: 24px !important;
    padding: 36px 32px !important;
    color: var(--clr-text-muted) !important;
    text-align: left !important;
    
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    
    /* Strong inner bottom glow mimicking the 3D objects in the image */
    box-shadow: inset 0 -40px 80px -30px rgba(58, 134, 255, 0.25), 0 15px 40px rgba(0,0,0,0.7) !important;
    transition: all 0.3s ease !important;
}

[data-theme="aura-electric"] .bullet-list li:hover {
    border-color: rgba(58, 134, 255, 0.7) !important;
    box-shadow: inset 0 -60px 100px -30px rgba(58, 134, 255, 0.4), 0 20px 50px rgba(0,0,0,0.9) !important;
    color: var(--clr-text-main) !important;
    transform: translateY(-4px) !important;
}

[data-theme^="aura-"] .bullet-list li::before { display: none !important; }

[data-theme^="aura-"] #slide-container.heading-bg { background: transparent !important; }

/* ── 4. DARK MODE QUIZZES & ASSESSMENTS ── */
[data-theme="aura-electric"] .quiz-wrapper,
[data-theme="aura-electric"] .assessment-wrapper {
    background: rgba(10, 15, 25, 0.8) !important;
    border: 1px solid var(--clr-border) !important;
    border-top: 2px solid var(--clr-primary) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8) !important;
    color: var(--clr-text-main) !important;
    backdrop-filter: blur(16px);
}

[data-theme="aura-electric"] .assessment-header,
[data-theme="aura-electric"] .assessment-question-block,
[data-theme="aura-electric"] .assessment-score-summary {
    background: transparent !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: var(--clr-text-main) !important;
}

[data-theme="aura-electric"] .quiz-question,
[data-theme="aura-electric"] .assessment-q-text,
[data-theme="aura-electric"] .assessment-header h3 {
    color: #FFFFFF !important;
}

[data-theme="aura-electric"] .quiz-option,
[data-theme="aura-electric"] .inline-quiz-option {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #FFFFFF !important;
}

[data-theme="aura-electric"] .quiz-option:hover,
[data-theme="aura-electric"] .inline-quiz-option:hover {
    background: rgba(58, 134, 255, 0.1) !important;
    border-color: var(--clr-primary) !important;
}

[data-theme="aura-electric"] .option-letter {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: var(--clr-primary) !important;
}

[data-theme="aura-electric"] .quiz-feedback {
    background: rgba(0,0,0,0.6) !important;
}
[data-theme="aura-electric"] .quiz-feedback.correct { border-color: #0b875b !important; }
[data-theme="aura-electric"] .quiz-feedback.incorrect { border-color: #de350b !important; }

/* ── 5. DARK MODE CONFIDENCE WIDGETS ── */
[data-theme="aura-electric"] .confidence-widget {
    background: rgba(10, 15, 25, 0.95) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(58, 134, 255, 0.4) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,0.8), 0 0 20px rgba(58,134,255,0.1) !important;
}

[data-theme="aura-electric"] .confidence-title { color: var(--clr-text-muted) !important; }
[data-theme="aura-electric"] .conf-close-btn { color: var(--clr-text-muted) !important; }
[data-theme="aura-electric"] .conf-close-btn:hover { background: rgba(255,255,255,0.1) !important; color: #fff !important;}

[data-theme="aura-electric"] .conf-btn,
[data-theme="aura-electric"] .aq-conf-btn { 
    background: rgba(0, 0, 0, 0.5) !important; 
    border-color: rgba(255, 255, 255, 0.15) !important; 
}

[data-theme="aura-electric"] .conf-btn:hover,
[data-theme="aura-electric"] .aq-conf-btn:hover {
    background: rgba(58, 134, 255, 0.15) !important;
    border-color: var(--clr-primary) !important;
}

[data-theme="aura-electric"] .conf-label,
[data-theme="aura-electric"] .aq-conf-btn .conf-label { 
    color: var(--clr-text-muted) !important; 
}

/* Selected Confidence States (Deep cinematic versions of Red/Yellow/Green) */
[data-theme="aura-electric"] .conf-btn.conf-unsure.selected,
[data-theme="aura-electric"] .aq-conf-btn.aq-conf-unsure.selected {
    background: rgba(222, 53, 11, 0.2) !important;
    border-color: #de350b !important;
    box-shadow: 0 0 0 3px rgba(222,53,11,0.15) !important;
}
[data-theme="aura-electric"] .conf-btn.conf-unsure.selected .conf-label,
[data-theme="aura-electric"] .aq-conf-btn.aq-conf-unsure.selected .conf-label { color: #ff8b73 !important; }

[data-theme="aura-electric"] .conf-btn.conf-somewhat.selected,
[data-theme="aura-electric"] .aq-conf-btn.aq-conf-somewhat.selected {
    background: rgba(217, 119, 6, 0.2) !important;
    border-color: #d97706 !important;
    box-shadow: 0 0 0 3px rgba(217,119,6,0.15) !important;
}
[data-theme="aura-electric"] .conf-btn.conf-somewhat.selected .conf-label,
[data-theme="aura-electric"] .aq-conf-btn.aq-conf-somewhat.selected .conf-label { color: #fbbf24 !important; }

[data-theme="aura-electric"] .conf-btn.conf-got-it.selected,
[data-theme="aura-electric"] .aq-conf-btn.aq-conf-sure.selected,
[data-theme="aura-electric"] .aq-conf-btn.aq-conf-got-it.selected {
    background: rgba(11, 135, 91, 0.2) !important;
    border-color: #0b875b !important;
    box-shadow: 0 0 0 3px rgba(11,135,91,0.15) !important;
}
[data-theme="aura-electric"] .conf-btn.conf-got-it.selected .conf-label,
[data-theme="aura-electric"] .aq-conf-btn.aq-conf-sure.selected .conf-label,
[data-theme="aura-electric"] .aq-conf-btn.aq-conf-got-it.selected .conf-label { color: #34d399 !important; } 

/* ── 6. Top/Bottom Course Controls ── */
[data-theme="aura-electric"] #course-footer,
[data-theme="aura-electric"] #course-header {
    background: #020203 !important;
    border-color: rgba(255,255,255,0.05) !important;
}

[data-theme="aura-electric"] .nav-btn:not(#next-btn),
[data-theme="aura-electric"] .fullscreen-btn,
[data-theme="aura-electric"] .audio-controls {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="aura-electric"] .nav-btn:not(#next-btn):hover,
[data-theme="aura-electric"] .fullscreen-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}
/* ════════════════════════════════════════════════════════════════════
   RIBBON-FLOW: 3D Infographic Timeline (Paper Folds)
   ════════════════════════════════════════════════════════════════════ */

[data-theme="ribbon-flow"] {
    --clr-bg:            #F4F5F7;       /* Off-white paper background */
    --clr-surface:       #FFFFFF;       
    --clr-border:        #E0E0E0;       
    
    --clr-text-main:     #444444;
    --clr-text-muted:    #777777;
    --clr-text-light:    #AAAAAA;
    
    /* Ribbon Colors from the Image */
    --ribbon-1:          #D48F89; /* Dusty Rose */
    --ribbon-2:          #6A5D6E; /* Muted Mauve */
    --ribbon-3:          #3B2E36; /* Dark Plum */
    --ribbon-4:          #C14234; /* Rust Red */
}

/* ── 1. Structural Overrides & Clean Background ── */
[data-theme="ribbon-flow"] #slide-container,
[data-theme="ribbon-flow"] #quiz-container { 
    background: var(--clr-bg) !important; 
    position: relative; z-index: 1; overflow-x: hidden; 
}

[data-theme="ribbon-flow"] #slide-container.heading-bg {
    background: var(--clr-bg) !important;
}

/* Strip all legacy dots, shapes, and gradients */
[data-theme="ribbon-flow"] #slide-container::before,
[data-theme="ribbon-flow"] #slide-container::after,
[data-theme="ribbon-flow"] #quiz-container::before,
[data-theme="ribbon-flow"] #quiz-container::after,
[data-theme="ribbon-flow"] .heading-slide-bar,
[data-theme="ribbon-flow"] .heading-slide-dots,
[data-theme="ribbon-flow"] .slide-title::before,
[data-theme="ribbon-flow"] .content-section-title::before,
[data-theme="ribbon-flow"] .heading-slide-title::before {
    display: none !important;
}

/* ── 2. Clean, Lightweight Typography ── */
[data-theme="ribbon-flow"] .slide-content-wrapper {
    align-items: center !important; 
    max-width: 1000px !important;
    margin: 0 auto !important;
}

[data-theme="ribbon-flow"] .heading-slide-title {
    font-size: clamp(3rem, 6vw, 5rem) !important; 
    font-weight: 300 !important; /* Thin, elegant weight */
    color: var(--clr-text-main) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    text-align: center !important; 
    width: 100% !important;
    margin-bottom: 24px !important;
}

[data-theme="ribbon-flow"] .heading-slide-subtitle,
[data-theme="ribbon-flow"] .text-paragraph {
    text-align: center !important; 
    color: var(--clr-text-muted) !important;
}

[data-theme="ribbon-flow"] .slide-title,
[data-theme="ribbon-flow"] .content-section-title {
    text-align: center !important; 
    font-size: 2.2rem !important;
    font-weight: 400 !important;
    color: var(--clr-text-main) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    border: none !important;
    margin-bottom: 40px !important;
    width: 100% !important;
}

/* ── 3. The 3D Ribbon Timeline (The Core Feature) ── */
[data-theme="ribbon-flow"] .bullet-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    padding: 20px 0 60px 0 !important;
    counter-reset: ribbon-counter !important; /* Setup for the big numbers */
    list-style: none !important;
}

[data-theme="ribbon-flow"] .bullet-list li {
    width: 85% !important;
    max-width: 800px !important;
    min-height: 140px !important;
    position: relative !important;
    border: none !important;
    color: #FFFFFF !important;
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
    
    /* The overlap that creates the continuous ribbon illusion */
    margin-bottom: -30px !important; 
    
    /* Heavy drop shadow to separate the layers */
    box-shadow: 0 15px 25px -10px rgba(0,0,0,0.4) !important;
    transition: transform 0.2s ease !important;
}

/* Override the default bullet */
[data-theme="ribbon-flow"] .bullet-list li::before {
    counter-increment: ribbon-counter !important;
    content: "0" counter(ribbon-counter) !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 4.5rem !important;
    font-weight: 300 !important;
    opacity: 0.9 !important;
    color: #FFFFFF !important;
    line-height: 1 !important;
}

/* Odd Items (Align Left, Curve Right) */
[data-theme="ribbon-flow"] .bullet-list li:nth-child(odd) {
    align-self: flex-start !important;
    border-radius: 0 80px 80px 0 !important;
    padding: 40px 140px 40px 60px !important; /* Extra padding on right for the number */
}
[data-theme="ribbon-flow"] .bullet-list li:nth-child(odd)::before {
    right: 40px !important;
    left: auto !important;
}

/* Even Items (Align Right, Curve Left) */
[data-theme="ribbon-flow"] .bullet-list li:nth-child(even) {
    align-self: flex-end !important;
    border-radius: 80px 0 0 80px !important;
    padding: 40px 60px 40px 140px !important; /* Extra padding on left for the number */
    text-align: right !important;
}
[data-theme="ribbon-flow"] .bullet-list li:nth-child(even)::before {
    left: 40px !important;
    right: auto !important;
}

/* Hover slightly lifts the paper */
[data-theme="ribbon-flow"] .bullet-list li:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 20px 30px -10px rgba(0,0,0,0.5) !important;
}

/* Cyclical Color Palette & Z-Index Stacking (Ensures top folds shadow bottom folds) */
[data-theme="ribbon-flow"] .bullet-list li:nth-child(1) { background: var(--ribbon-1) !important; z-index: 10 !important; }
[data-theme="ribbon-flow"] .bullet-list li:nth-child(2) { background: var(--ribbon-2) !important; z-index: 9 !important; }
[data-theme="ribbon-flow"] .bullet-list li:nth-child(3) { background: var(--ribbon-3) !important; z-index: 8 !important; }
[data-theme="ribbon-flow"] .bullet-list li:nth-child(4) { background: var(--ribbon-4) !important; z-index: 7 !important; }
[data-theme="ribbon-flow"] .bullet-list li:nth-child(5) { background: var(--ribbon-1) !important; z-index: 6 !important; }
[data-theme="ribbon-flow"] .bullet-list li:nth-child(6) { background: var(--ribbon-2) !important; z-index: 5 !important; }
[data-theme="ribbon-flow"] .bullet-list li:nth-child(7) { background: var(--ribbon-3) !important; z-index: 4 !important; }
[data-theme="ribbon-flow"] .bullet-list li:nth-child(8) { background: var(--ribbon-4) !important; z-index: 3 !important; }

/* ── 4. Badges & Simple Controls ── */
[data-theme="ribbon-flow"] .welcome-badge,
[data-theme="ribbon-flow"] .summary-badge {
    display: inline-block !important;
    background: transparent !important;
    color: var(--ribbon-2) !important;
    border: 1px solid var(--ribbon-2) !important;
    border-radius: 4px !important;
    padding: 6px 16px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
}

[data-theme="ribbon-flow"] .nav-btn#next-btn {
    background: var(--ribbon-4) !important;
    border: none !important;
    color: #FFFFFF !important;
}

/* ── 5. Quizzes & Assessments (Paper Style) ── */
[data-theme="ribbon-flow"] .quiz-wrapper,
[data-theme="ribbon-flow"] .assessment-wrapper {
    background: #FFFFFF !important;
    border: 1px solid var(--clr-border) !important;
    border-top: 6px solid var(--ribbon-2) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
    text-align: center !important;
}

[data-theme="ribbon-flow"] .quiz-header,
[data-theme="ribbon-flow"] .assessment-header {
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    color: var(--ribbon-2) !important;
}

[data-theme="ribbon-flow"] .quiz-question,
[data-theme="ribbon-flow"] .assessment-q-text {
    color: var(--clr-text-main) !important;
    font-size: 1.4rem !important;
    font-weight: 400 !important;
}

[data-theme="ribbon-flow"] .quiz-option,
[data-theme="ribbon-flow"] .inline-quiz-option {
    background: var(--clr-bg) !important;
    border: 1px solid var(--clr-border) !important;
    color: var(--clr-text-main) !important;
    border-radius: 6px !important;
    text-align: left !important;
}

[data-theme="ribbon-flow"] .quiz-option:hover,
[data-theme="ribbon-flow"] .inline-quiz-option:hover {
    background: #FFFFFF !important;
    border-color: var(--ribbon-4) !important;
}

[data-theme="ribbon-flow"] .option-letter {
    background: #FFFFFF !important;
    border-color: var(--clr-border) !important;
    color: var(--ribbon-2) !important;
}

/* ── Title Slide ─────────────────────────────────────────────────── */

.title-slide-wrapper {
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    min-height: 100%;
    margin: auto 0;
    padding: 0 !important;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--clr-primary) 6%, var(--clr-bg)) 0%,
        var(--clr-bg) 50%,
        color-mix(in srgb, var(--clr-primary) 10%, var(--clr-bg)) 100%);
}

/* Large decorative circle behind content */
.title-slide-wrapper::before {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--clr-primary) 10%, transparent) 0%, transparent 70%);
    top: -120px; right: -120px;
    pointer-events: none;
}
.title-slide-wrapper::after {
    content: '';
    position: absolute;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--clr-primary) 7%, transparent) 0%, transparent 70%);
    bottom: -80px; left: -60px;
    pointer-events: none;
}

.title-slide-hero {
    max-width: 680px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 1;
    padding: 48px 32px;
}

/* Logo / icon badge */
.title-slide-badge {
    width: 72px; height: 72px;
    border-radius: 20px;
    background: var(--clr-primary);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 32px color-mix(in srgb, var(--clr-primary) 35%, transparent);
    margin-bottom: 4px;
}
.title-slide-badge svg { width: 36px; height: 36px; color: #fff; }

.title-slide-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--clr-primary);
    opacity: 0.8;
}

.title-slide-title {
    font-size: clamp(2.8rem, 7vw, 5rem);
    font-weight: var(--font-heading-weight);
    color: var(--clr-text-main);
    letter-spacing: -0.03em;
    line-height: 1.08;
    margin: 0;
    text-align: center;
}

.title-slide-divider {
    width: 56px; height: 4px;
    background: var(--clr-primary);
    border-radius: 2px;
    opacity: 0.7;
}

.title-slide-subtitle {
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    font-weight: 400;
    color: var(--clr-text-muted);
    line-height: 1.65;
    margin: 0;
    text-align: center;
    max-width: 480px;
}

.title-slide-start-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 40px;
    background: var(--clr-primary);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 12px;
    box-shadow: 0 6px 24px color-mix(in srgb, var(--clr-primary) 40%, transparent);
    transition: box-shadow 0.2s, transform 0.15s;
    letter-spacing: 0.02em;
}
.title-slide-start-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--clr-primary) 50%, transparent);
}
.title-slide-start-btn:active { transform: translateY(0); }
.title-slide-start-btn svg { width: 16px; height: 16px; }

/* ── Thank You Slide ──────────────────────────────────────────────── */
.thankyou-slide-wrapper {
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    min-height: 100%;
    margin: auto 0;
    padding: 0 !important;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--clr-primary) 6%, var(--clr-bg)) 0%,
        var(--clr-bg) 50%,
        color-mix(in srgb, var(--clr-primary) 10%, var(--clr-bg)) 100%);
}

.thankyou-slide-wrapper::before {
    content: '';
    position: absolute;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--clr-primary) 9%, transparent) 0%, transparent 70%);
    top: -100px; left: -100px;
    pointer-events: none;
}
.thankyou-slide-wrapper::after {
    content: '';
    position: absolute;
    width: 350px; height: 350px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--clr-success, #0b875b) 8%, transparent) 0%, transparent 70%);
    bottom: -80px; right: -60px;
    pointer-events: none;
}

.thankyou-slide-hero {
    max-width: 620px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 1;
    padding: 48px 32px;
}

.thankyou-slide-icon {
    width: 88px; height: 88px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--clr-primary) 10%, transparent);
    border: 3px solid var(--clr-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 2.4rem;
    color: var(--clr-primary);
    font-weight: 700;
    box-shadow: 0 0 0 12px color-mix(in srgb, var(--clr-primary) 6%, transparent);
    animation: ty-pulse 2.5s ease-in-out infinite;
}

@keyframes ty-pulse {
    0%, 100% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--clr-primary) 6%, transparent); }
    50%       { box-shadow: 0 0 0 20px color-mix(in srgb, var(--clr-primary) 3%, transparent); }
}

.thankyou-slide-title {
    font-size: clamp(2rem, 5.5vw, 3.5rem);
    font-weight: var(--font-heading-weight);
    color: var(--clr-text-main);
    letter-spacing: -0.03em;
    line-height: 1.12;
    margin: 0;
    text-align: center;
}

.thankyou-slide-subtitle {
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    font-weight: 400;
    color: var(--clr-text-muted);
    line-height: 1.65;
    margin: 0;
    text-align: center;
    max-width: 420px;
}

.thankyou-start-assessment-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 36px;
    background: var(--clr-primary);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--clr-primary) 35%, transparent);
    transition: box-shadow 0.2s, transform 0.15s;
    letter-spacing: 0.02em;
}
.thankyou-start-assessment-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--clr-primary) 45%, transparent);
}
.thankyou-start-assessment-btn:active { transform: translateY(0); }
.thankyou-start-assessment-btn svg { width: 18px; height: 18px; }

/* Decorative dots — Title slide */
.title-slide-dots {
    display: flex;
    gap: 8px;
    margin-top: 20px;
}
.title-slide-dots span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--clr-primary);
    opacity: 0.35;
}
.title-slide-dots span:nth-child(2) { opacity: 0.55; }
.title-slide-dots span:nth-child(3) { opacity: 0.25; }

/* Decorative dots — Thank You slide */
.thankyou-slide-dots {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.thankyou-slide-dots span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--clr-primary);
    opacity: 0.35;
}
.thankyou-slide-dots span:nth-child(2) { opacity: 0.55; }
.thankyou-slide-dots span:nth-child(3) { opacity: 0.25; }

/* ── Global Background Override ──────────────────────────────
   Ensures theme background decorations are never too prominent. */
[data-theme] #slide-container::before, 
[data-theme] #slide-container::after,
[data-theme] #quiz-container::before, 
[data-theme] #quiz-container::after {
    opacity: 0.05 !important;
}

/* Also soften the gradient of heading slides */
[data-theme]:not([data-theme="corporate"]) #slide-container.heading-bg,
[data-theme]:not([data-theme="corporate"]) #slide-canvas.heading-bg {
    background: linear-gradient(150deg, color-mix(in srgb, var(--heading-from) 25%, transparent) 0%, color-mix(in srgb, var(--heading-to) 40%, transparent) 100%) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   TITLE & THANK-YOU SLIDE — THEME-PROOF OVERRIDES
   Must appear LAST and use high-specificity selectors so they beat
   every theme's !important rules:
     • html #slide-container.title-slide-bg  = (1,1,1) specificity
       — beats [data-theme^="nexus-"] #slide-container (1,1,0)
     • #slide-container .title-slide-wrapper = (1,1,0) specificity
       — beats [data-theme^="nexus-"] .slide-content-wrapper (0,2,0)
   ══════════════════════════════════════════════════════════════════════ */

/* 1. Remove all padding and force centering on the container */
html #slide-container.title-slide-bg,
html #slide-container.thankyou-slide-bg {
    padding: 0 !important;
    align-items: center !important;
}

/* 2. Make #slide-content fill the full container for these two slide types */
html #slide-container.title-slide-bg #slide-content,
html #slide-container.thankyou-slide-bg #slide-content {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* 3. Force the wrappers to fill the slide edge-to-edge and centre their hero */
#slide-container .title-slide-wrapper,
#slide-container .thankyou-slide-wrapper {
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
    min-height: calc(100vh - var(--header-h)) !important;
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

/* When a custom bg image is applied, the wrapper bg must be transparent
   so the image (on .slide-bg-layer behind #slide-content) shows through.
   The JS sets background:transparent via inline style when slide.bgImage exists,
   but this CSS class handles the ::before/::after decorative circles too. */
.title-slide-wrapper[style*="transparent"]::before,
.title-slide-wrapper[style*="transparent"]::after,
.thankyou-slide-wrapper[style*="transparent"]::before,
.thankyou-slide-wrapper[style*="transparent"]::after {
    display: none;
}

/* ══════════════════════════════════════════════════════════════════════
   COMPLETION SCREEN — THEME-PROOF OVERRIDES
   html #slide-container.completion-active = (1,1,1) specificity
   beats [data-theme^="nexus-"] #slide-container (1,1,0)
   ══════════════════════════════════════════════════════════════════════ */
html #slide-container.completion-active {
    align-items: center !important;
    padding: 40px !important;
}

html #slide-container.completion-active #slide-content {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

html #slide-container.completion-active .completion-screen {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* ══════════════════════════════════════════════════════════════════════
   VISIBILITY FIXES — all appended last so they beat earlier !important
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Heading slide: Emerald Forest & Sunset are light themes.
        The global rule forces white text on all themed heading slides, but
        these two need DARK text on a softly-branded light background instead. ── */

/* Keep the heading background light and on-brand (don't use the dark gradient) */
[data-theme="emerald"] #slide-container.heading-bg,
[data-theme="emerald"] #slide-canvas.heading-bg {
    background: linear-gradient(150deg,
        color-mix(in srgb, #059669 18%, var(--clr-bg)) 0%,
        color-mix(in srgb, #022c22 12%, var(--clr-bg)) 100%) !important;
}

[data-theme="sunset"] #slide-container.heading-bg,
[data-theme="sunset"] #slide-canvas.heading-bg {
    background: linear-gradient(150deg,
        color-mix(in srgb, #f97316 18%, var(--clr-bg)) 0%,
        color-mix(in srgb, #431407 12%, var(--clr-bg)) 100%) !important;
}

/* Override the global white-text rule — use theme dark text instead */
[data-theme="emerald"] #slide-container.heading-bg .heading-slide-title,
[data-theme="emerald"] #slide-canvas.heading-bg    .heading-slide-title {
    color: var(--clr-text-main) !important;
}
[data-theme="emerald"] #slide-container.heading-bg .heading-slide-subtitle,
[data-theme="emerald"] #slide-canvas.heading-bg    .heading-slide-subtitle {
    color: var(--clr-text-muted) !important;
}
[data-theme="emerald"] #slide-container.heading-bg .heading-slide-bar,
[data-theme="emerald"] #slide-canvas.heading-bg    .heading-slide-bar {
    background: var(--clr-primary) !important;
    opacity: 0.7 !important;
}
[data-theme="emerald"] #slide-container.heading-bg .heading-slide-dots span,
[data-theme="emerald"] #slide-canvas.heading-bg    .heading-slide-dots span {
    background: var(--clr-primary) !important;
}
[data-theme="emerald"] #slide-container.heading-bg .welcome-badge,
[data-theme="emerald"] #slide-canvas.heading-bg    .welcome-badge,
[data-theme="emerald"] #slide-container.heading-bg .summary-badge,
[data-theme="emerald"] #slide-canvas.heading-bg    .summary-badge {
    background: var(--clr-primary-light) !important;
    border-color: var(--clr-border) !important;
    color: var(--clr-primary) !important;
}
[data-theme="emerald"] #slide-container.heading-bg .objective-item,
[data-theme="emerald"] #slide-canvas.heading-bg    .objective-item,
[data-theme="emerald"] #slide-container.heading-bg .summary-item,
[data-theme="emerald"] #slide-canvas.heading-bg    .summary-item {
    background: rgba(255,255,255,0.6) !important;
    border-left-color: var(--clr-primary) !important;
    color: var(--clr-text-main) !important;
}
[data-theme="emerald"] #slide-container.heading-bg .objectives-label,
[data-theme="emerald"] #slide-canvas.heading-bg    .objectives-label { color: var(--clr-text-muted) !important; }
[data-theme="emerald"] #slide-container.heading-bg .objective-icon,
[data-theme="emerald"] #slide-canvas.heading-bg    .objective-icon,
[data-theme="emerald"] #slide-container.heading-bg .summary-check,
[data-theme="emerald"] #slide-canvas.heading-bg    .summary-check { color: var(--clr-primary) !important; }

[data-theme="sunset"] #slide-container.heading-bg .heading-slide-title,
[data-theme="sunset"] #slide-canvas.heading-bg    .heading-slide-title {
    color: var(--clr-text-main) !important;
}
[data-theme="sunset"] #slide-container.heading-bg .heading-slide-subtitle,
[data-theme="sunset"] #slide-canvas.heading-bg    .heading-slide-subtitle {
    color: var(--clr-text-muted) !important;
}
[data-theme="sunset"] #slide-container.heading-bg .heading-slide-bar,
[data-theme="sunset"] #slide-canvas.heading-bg    .heading-slide-bar {
    background: var(--clr-primary) !important;
    opacity: 0.7 !important;
}
[data-theme="sunset"] #slide-container.heading-bg .heading-slide-dots span,
[data-theme="sunset"] #slide-canvas.heading-bg    .heading-slide-dots span {
    background: var(--clr-primary) !important;
}
[data-theme="sunset"] #slide-container.heading-bg .welcome-badge,
[data-theme="sunset"] #slide-canvas.heading-bg    .welcome-badge,
[data-theme="sunset"] #slide-container.heading-bg .summary-badge,
[data-theme="sunset"] #slide-canvas.heading-bg    .summary-badge {
    background: var(--clr-primary-light) !important;
    border-color: var(--clr-border) !important;
    color: var(--clr-primary) !important;
}
[data-theme="sunset"] #slide-container.heading-bg .objective-item,
[data-theme="sunset"] #slide-canvas.heading-bg    .objective-item,
[data-theme="sunset"] #slide-container.heading-bg .summary-item,
[data-theme="sunset"] #slide-canvas.heading-bg    .summary-item {
    background: rgba(255,255,255,0.6) !important;
    border-left-color: var(--clr-primary) !important;
    color: var(--clr-text-main) !important;
}
[data-theme="sunset"] #slide-container.heading-bg .objectives-label,
[data-theme="sunset"] #slide-canvas.heading-bg    .objectives-label { color: var(--clr-text-muted) !important; }
[data-theme="sunset"] #slide-container.heading-bg .objective-icon,
[data-theme="sunset"] #slide-canvas.heading-bg    .objective-icon,
[data-theme="sunset"] #slide-container.heading-bg .summary-check,
[data-theme="sunset"] #slide-canvas.heading-bg    .summary-check { color: var(--clr-primary) !important; }

/* ── 2. Diagram widget: Dark Slate & Nexus Premium Dark
        .diagram-widget, .diagram-frame and .diagram-badge are hardcoded
        white; override them to use theme surface / bg colours. ── */
[data-theme="dark"] .diagram-widget,
[data-theme="nexus-dark"] .diagram-widget {
    background: var(--clr-surface) !important;
    border-color: var(--clr-border) !important;
}

[data-theme="dark"] .diagram-frame,
[data-theme="nexus-dark"] .diagram-frame {
    background: var(--clr-bg) !important;
}

[data-theme="dark"] .diagram-badge,
[data-theme="nexus-dark"] .diagram-badge {
    background: var(--clr-surface) !important;
    border-bottom-color: var(--clr-border) !important;
    color: var(--clr-text-main) !important;
}

[data-theme="dark"] .diagram-badge svg,
[data-theme="nexus-dark"] .diagram-badge svg {
    color: var(--clr-primary) !important;
}

[data-theme="dark"] .diagram-zoom-btn,
[data-theme="nexus-dark"] .diagram-zoom-btn {
    background: var(--clr-surface) !important;
    border-color: var(--clr-border) !important;
    color: var(--clr-text-muted) !important;
}

[data-theme="dark"] .diagram-zoom-btn:hover,
[data-theme="nexus-dark"] .diagram-zoom-btn:hover {
    background: var(--clr-bg) !important;
    color: var(--clr-primary) !important;
}

/* ── 3 & 4. Quiz + Assessment: Dark Slate
        .quiz-wrapper, .assessment-header, .assessment-question-block all
        have hardcoded background:#ffffff; theme text (#f1f5f9) is invisible. ── */
[data-theme="dark"] .quiz-wrapper {
    background: var(--clr-surface) !important;
    border-color: var(--clr-border) !important;
}

[data-theme="dark"] .quiz-question {
    color: var(--clr-text-main) !important;
}

[data-theme="dark"] .quiz-option {
    background: rgba(30, 41, 59, 0.85) !important;
    border-color: var(--clr-border) !important;
}

[data-theme="dark"] .quiz-option:hover {
    background: rgba(38, 50, 70, 0.95) !important;
    border-color: var(--clr-primary) !important;
}

[data-theme="dark"] .quiz-option label {
    color: var(--clr-text-main) !important;
}

[data-theme="dark"] .option-letter {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--clr-border) !important;
    color: var(--clr-primary) !important;
}

[data-theme="dark"] .quiz-feedback.correct {
    background: rgba(11, 43, 26, 0.95) !important;
    border-color: #86efac !important;
}

[data-theme="dark"] .quiz-feedback.incorrect {
    background: rgba(43, 11, 11, 0.95) !important;
    border-color: #fca5a5 !important;
}

[data-theme="dark"] .assessment-header,
[data-theme="dark"] .assessment-question-block {
    background: var(--clr-surface) !important;
    border-color: var(--clr-border) !important;
}

[data-theme="dark"] .assessment-header h3 {
    color: var(--clr-text-main) !important;
}

[data-theme="dark"] .assessment-q-text {
    color: var(--clr-text-main) !important;
}

[data-theme="dark"] .aq-conf-btn {
    background: rgba(30, 41, 59, 0.85) !important;
    border-color: var(--clr-border) !important;
    color: var(--clr-text-muted) !important;
}

/* ── 5. Final assessment instruction card (dark themes)
        .assessment-instr-card is hardcoded #ffffff; not overridden in
        nexus-dark or aura-electric blocks above. ── */
[data-theme="dark"] .assessment-instr-card {
    background: var(--clr-surface) !important;
    border-color: var(--clr-border) !important;
}

[data-theme="dark"] .assessment-instr-title {
    color: var(--clr-text-main) !important;
}

[data-theme="dark"] .assessment-instr-list li {
    background: rgba(30, 41, 59, 0.6) !important;
    color: var(--clr-text-muted) !important;
}

[data-theme="nexus-dark"] .assessment-instr-card,
[data-theme="aura-electric"] .assessment-instr-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: var(--clr-border) !important;
}

[data-theme="nexus-dark"] .assessment-instr-title,
[data-theme="aura-electric"] .assessment-instr-title {
    color: var(--clr-text-main) !important;
}

[data-theme="nexus-dark"] .assessment-instr-list li,
[data-theme="aura-electric"] .assessment-instr-list li {
    background: var(--clr-surface) !important;
    color: var(--clr-text-muted) !important;
}

/* ── 6. Menu / sidebar: Nexus Premium Dark & Aura Electric (+ Dark Slate)
        --sidebar-bg defaults to #ffffff, making sidebar text (white in dark
        themes) invisible on a white background. ── */
[data-theme="dark"] {
    --sidebar-bg:                #1e293b;
    --sidebar-section-color:     #64748b;
    --sidebar-item-text-color:   #94a3b8;
    --sidebar-item-num-bg:       #0f172a;
    --sidebar-item-num-text:     #64748b;
    --sidebar-active-bg:         #0c2a40;
    --sidebar-active-border:     #38bdf8;
    --sidebar-active-text:       #38bdf8;
}

[data-theme="nexus-dark"] {
    --sidebar-bg:                #1e1e1e;
    --sidebar-section-color:     #737373;
    --sidebar-item-text-color:   #a3a3a3;
    --sidebar-item-num-bg:       #2a2a2a;
    --sidebar-item-num-text:     #737373;
    --sidebar-active-bg:         rgba(255, 107, 88, 0.12);
    --sidebar-active-border:     #FF6B58;
    --sidebar-active-text:       #FF6B58;
}

[data-theme="aura-electric"] {
    --sidebar-bg:                #0a0d16;
    --sidebar-section-color:     #5A6B84;
    --sidebar-item-text-color:   #A3B1C6;
    --sidebar-item-num-bg:       rgba(15, 20, 35, 0.65);
    --sidebar-item-num-text:     #5A6B84;
    --sidebar-active-bg:         rgba(58, 134, 255, 0.12);
    --sidebar-active-border:     #3A86FF;
    --sidebar-active-text:       #3A86FF;
}

/* ── Flashcard review slide ───────────────────────────────────────── */
/* Flashcard slides are ALWAYS centered, regardless of theme or the
   global contentAlign (left / center / right). The wrapper centers
   itself via margin auto; children use align-items: stretch so the
   grid is full width (NOT shrink-to-content, which would collapse the
   cards into single-character columns).
   Specificity (0,2,0) on the compound selector beats theme rules like
       [data-theme^="nexus-"] .slide-content-wrapper        (0,1,1)
       [data-content-right]   .slide-content-wrapper        (0,1,1)
   even when those use !important. */
.slide-content-wrapper.flashcard-slide-wrapper,
html .flashcard-slide-wrapper {
    width: 100% !important;
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 32px 24px 40px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;   /* CRITICAL: keep children at full width */
    justify-content: flex-start !important;
    text-align: center !important;
    gap: 28px !important;
    box-sizing: border-box !important;
}

.slide-content-wrapper.flashcard-slide-wrapper .flashcard-slide-header,
html .flashcard-slide-wrapper .flashcard-slide-header {
    text-align: center !important;
    width: 100% !important;
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.slide-content-wrapper.flashcard-slide-wrapper .flashcard-slide-title,
.slide-content-wrapper.flashcard-slide-wrapper .flashcard-slide-subtitle,
html .flashcard-slide-wrapper .flashcard-slide-title,
html .flashcard-slide-wrapper .flashcard-slide-subtitle {
    text-align: center !important;
    width: 100% !important;
    align-self: center !important;
}

.slide-content-wrapper.flashcard-slide-wrapper .flashcard-grid,
html .flashcard-slide-wrapper .flashcard-grid {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    align-self: stretch !important;
}

.flashcard-slide-title {
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    font-weight: 700;
    color: var(--clr-text-main);
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}

.flashcard-slide-subtitle {
    font-size: 0.95rem;
    color: var(--clr-text-muted);
    margin: 0;
}

.flashcard-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    perspective: 1400px;
    box-sizing: border-box;
}

.flashcard-card {
    appearance: none;
    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
    width: 100%;            /* fill grid cell so cards don't collapse */
    min-width: 0;
    min-height: 220px;
    border-radius: calc(var(--radius-card) + 6px);
    transition: transform 0.25s ease;
}

.flashcard-card:hover { transform: translateY(-2px); }

.flashcard-card:focus-visible {
    outline: 2px solid var(--clr-primary);
    outline-offset: 3px;
}

.flashcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 220px;
    transform-style: preserve-3d;
    transition: transform 0.55s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.flashcard-card.is-flipped .flashcard-inner { transform: rotateY(180deg); }

.flashcard-face {
    position: absolute;
    inset: 0;
    border-radius: calc(var(--radius-card) + 6px);
    padding: 22px 22px 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 12px 28px -12px rgba(15, 23, 42, 0.18);
    border: 1px solid var(--clr-border);
}

.flashcard-front {
    background: var(--clr-surface);
    color: var(--clr-text-main);
}

.flashcard-back {
    background: var(--clr-primary);
    color: #fff;
    transform: rotateY(180deg);
    border-color: transparent;
}

.flashcard-face-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: rgba(15, 23, 42, 0.06);
    color: inherit;
}

.flashcard-back .flashcard-face-label {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.flashcard-face-text {
    width: 100%;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
    margin: 12px 0 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.flashcard-front .flashcard-face-text { color: var(--clr-text-main); }
.flashcard-back  .flashcard-face-text { font-weight: 500; }

.flashcard-flip-hint {
    align-self: flex-end;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.55;
    color: var(--clr-text-muted);
}

/* Sidebar pill for flashcard slides */
.sidebar-item.sidebar-flashcard .sidebar-item-num {
    background: var(--clr-primary-light, var(--clr-surface));
    color: var(--clr-primary);
}

/* ════════════════════════════════════════════════════════════════════
   THEME RESPONSIVENESS — Nexus, Aura, Ribbon-Flow on tablets & phones
   These selectors mirror the high-specificity !important rules above
   so they actually win inside media queries. Must stay at the END of
   the file so the cascade reaches them last.
   ════════════════════════════════════════════════════════════════════ */

/* ── Tablet (≤900px) ─────────────────────────────────────────────── */
@media (max-width: 900px) {

    /* Nexus dark/light decorative rings shrink */
    [data-theme="nexus-dark"]  #slide-container::before,
    [data-theme="nexus-dark"]  #quiz-container::before,
    [data-theme="nexus-light"] #slide-container::before,
    [data-theme="nexus-light"] #quiz-container::before {
        width: 360px !important; height: 360px !important;
        border-width: 60px !important;
        top: -100px !important; right: -80px !important;
    }
    [data-theme="nexus-dark"]  #slide-container::after,
    [data-theme="nexus-dark"]  #quiz-container::after,
    [data-theme="nexus-light"] #slide-container::after,
    [data-theme="nexus-light"] #quiz-container::after {
        width: 260px !important; height: 260px !important;
        border-width: 50px !important;
        bottom: -80px !important; right: 10% !important;
    }

    /* Nexus-professional blob + ring shrink */
    [data-theme="nexus-professional"] #slide-container::before,
    [data-theme="nexus-professional"] #quiz-container::before {
        width: 380px !important; height: 380px !important;
        top: -60px !important; right: -60px !important;
    }
    [data-theme="nexus-professional"] #slide-container::after,
    [data-theme="nexus-professional"] #quiz-container::after {
        width: 260px !important; height: 260px !important;
        border-width: 40px !important;
        bottom: -100px !important; left: -60px !important;
    }

    /* Nexus-connect gradient blob + sphere shrink */
    [data-theme="nexus-connect"] #slide-container::before,
    [data-theme="nexus-connect"] #quiz-container::before {
        width: 520px !important; height: 520px !important;
        bottom: -150px !important; right: -150px !important;
    }
    [data-theme="nexus-connect"] #slide-container::after,
    [data-theme="nexus-connect"] #quiz-container::after {
        width: 80px !important; height: 80px !important;
        top: 40px !important; left: -30px !important;
    }

    /* All nexus themes — tighter padding (was 80px 100px) */
    [data-theme^="nexus-"] #slide-container,
    [data-theme^="nexus-"] #quiz-container {
        padding: 56px 40px !important;
    }

    /* Nexus headings & titles scale down */
    [data-theme^="nexus-"] .heading-slide-title {
        font-size: clamp(2.4rem, 5.5vw, 3.4rem) !important;
    }
    [data-theme^="nexus-"] .heading-slide-subtitle {
        font-size: 1.1rem !important;
    }
    [data-theme^="nexus-"] .slide-title {
        font-size: clamp(1.75rem, 4vw, 2.2rem) !important;
        padding-right: 0 !important;
        margin-bottom: 28px !important;
    }

    /* Aura heading scale-down (was clamp(4rem, 9vw, 8rem)) */
    [data-theme^="aura-"] .heading-slide-title {
        font-size: clamp(3rem, 7vw, 5rem) !important;
    }
    [data-theme^="aura-"] .slide-title,
    [data-theme^="aura-"] .content-section-title {
        font-size: clamp(1.8rem, 4vw, 2.4rem) !important;
    }
    [data-theme="aura-electric"] .body-block {
        padding: 30px 24px !important;
        font-size: 1.05rem !important;
    }

    /* Ribbon-flow: narrow ribbons, smaller counter numbers */
    [data-theme="ribbon-flow"] .bullet-list li {
        width: 92% !important;
        min-height: 110px !important;
    }
    [data-theme="ribbon-flow"] .bullet-list li::before {
        font-size: 3.4rem !important;
    }
    [data-theme="ribbon-flow"] .bullet-list li:nth-child(odd) {
        padding: 28px 100px 28px 32px !important;
    }
    [data-theme="ribbon-flow"] .bullet-list li:nth-child(even) {
        padding: 28px 32px 28px 100px !important;
    }
    [data-theme="ribbon-flow"] .bullet-list li:nth-child(odd)::before  { right: 28px !important; }
    [data-theme="ribbon-flow"] .bullet-list li:nth-child(even)::before { left:  28px !important; }
    [data-theme="ribbon-flow"] .heading-slide-title {
        font-size: clamp(2.4rem, 6vw, 3.4rem) !important;
        letter-spacing: 0.08em !important;
    }
    [data-theme="ribbon-flow"] .slide-title,
    [data-theme="ribbon-flow"] .content-section-title {
        font-size: 1.75rem !important;
    }
}

/* ── Mobile (≤640px) ─────────────────────────────────────────────── */
@media (max-width: 640px) {

    /* Decorative rings/blobs — small enough not to dominate the viewport */
    [data-theme="nexus-dark"]  #slide-container::before,
    [data-theme="nexus-dark"]  #quiz-container::before,
    [data-theme="nexus-light"] #slide-container::before,
    [data-theme="nexus-light"] #quiz-container::before {
        width: 240px !important; height: 240px !important;
        border-width: 40px !important;
        top: -80px !important; right: -60px !important;
    }
    [data-theme="nexus-dark"]  #slide-container::after,
    [data-theme="nexus-dark"]  #quiz-container::after,
    [data-theme="nexus-light"] #slide-container::after,
    [data-theme="nexus-light"] #quiz-container::after {
        width: 180px !important; height: 180px !important;
        border-width: 32px !important;
        bottom: -70px !important;
    }
    [data-theme="nexus-professional"] #slide-container::before,
    [data-theme="nexus-professional"] #quiz-container::before {
        width: 260px !important; height: 260px !important;
    }
    [data-theme="nexus-professional"] #slide-container::after,
    [data-theme="nexus-professional"] #quiz-container::after {
        width: 180px !important; height: 180px !important;
        border-width: 28px !important;
    }
    [data-theme="nexus-connect"] #slide-container::before,
    [data-theme="nexus-connect"] #quiz-container::before {
        width: 360px !important; height: 360px !important;
        bottom: -120px !important; right: -120px !important;
    }

    /* Nexus padding — usable on phones (was 80px 100px) */
    [data-theme^="nexus-"] #slide-container,
    [data-theme^="nexus-"] #quiz-container {
        padding: 32px 18px !important;
    }

    /* Nexus typography on phones */
    [data-theme^="nexus-"] .heading-slide-title {
        font-size: clamp(1.9rem, 7vw, 2.4rem) !important;
        margin-bottom: 16px !important;
    }
    [data-theme^="nexus-"] .heading-slide-subtitle {
        font-size: 1rem !important;
    }
    [data-theme^="nexus-"] .slide-title {
        font-size: 1.55rem !important;
        margin-bottom: 24px !important;
    }
    /* Nexus "••" prefix on titles — smaller */
    [data-theme^="nexus-"] .slide-title::before,
    [data-theme^="nexus-"] .content-section-title::before,
    [data-theme^="nexus-"] .heading-slide-title::before {
        font-size: 1.1rem !important;
        margin-bottom: 8px !important;
    }
    /* Slide indicator was absolutely positioned top-right (overlaps title on
       narrow phones) — return to static document flow */
    [data-theme^="nexus-"] .slide-indicator {
        position: static !important;
        text-align: left !important;
        margin-bottom: 10px !important;
        font-size: 0.78rem !important;
    }
    /* Nexus bullet rows compact */
    [data-theme^="nexus-"] .bullet-list li {
        font-size: 0.98rem !important;
        padding: 0 0 12px 20px !important;
    }
    [data-theme^="nexus-"] .bullet-list li::before {
        font-size: 1.25rem !important;
    }
    /* Nexus quiz wrapper compact (was padding: 40px) */
    [data-theme^="nexus-"] .quiz-wrapper,
    [data-theme^="nexus-"] .assessment-wrapper {
        padding: 24px 18px !important;
        max-width: 100% !important;
    }
    [data-theme^="nexus-"] .quiz-question,
    [data-theme^="nexus-"] .assessment-q-text {
        font-size: 1.15rem !important;
    }
    [data-theme^="nexus-"] .quiz-option {
        padding: 14px 16px !important;
        margin-bottom: 10px !important;
    }

    /* Nexus-professional: cards stack 1-col, heading shrinks */
    [data-theme="nexus-professional"] .bullet-list {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    [data-theme="nexus-professional"] .bullet-list li {
        padding: 20px 22px !important;
        font-size: 0.98rem !important;
        border-radius: 0 20px 0 20px !important;
    }
    [data-theme="nexus-professional"] .heading-slide-title {
        font-size: clamp(2rem, 9vw, 2.6rem) !important;
    }
    [data-theme="nexus-professional"] .heading-slide-subtitle {
        font-size: 1rem !important;
    }
    [data-theme="nexus-professional"] .slide-title,
    [data-theme="nexus-professional"] .content-section-title {
        font-size: 1.65rem !important;
        margin-bottom: 24px !important;
        padding-bottom: 10px !important;
    }

    /* Nexus-connect: cards stack, shorter underlines */
    [data-theme="nexus-connect"] .bullet-list {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    [data-theme="nexus-connect"] .bullet-list li {
        padding: 22px 22px !important;
        font-size: 0.98rem !important;
    }
    [data-theme="nexus-connect"] .heading-slide-title {
        font-size: clamp(2.1rem, 9vw, 2.8rem) !important;
        padding-bottom: 16px !important;
    }
    [data-theme="nexus-connect"] .heading-slide-title::after {
        width: 110px !important;
        height: 7px !important;
    }
    [data-theme="nexus-connect"] .heading-slide-subtitle {
        font-size: 1.05rem !important;
        margin-top: 14px !important;
    }
    [data-theme="nexus-connect"] .slide-title,
    [data-theme="nexus-connect"] .content-section-title {
        font-size: 1.5rem !important;
        margin-bottom: 24px !important;
    }
    [data-theme="nexus-connect"] .slide-title::after,
    [data-theme="nexus-connect"] .content-section-title::after {
        width: 90px !important;
        height: 6px !important;
    }

    /* Aura electric scale-down */
    [data-theme^="aura-"] #slide-container,
    [data-theme^="aura-"] #quiz-container {
        padding: 32px 18px 60px !important;
    }
    [data-theme^="aura-"] .heading-slide-title {
        font-size: clamp(2.2rem, 11vw, 3rem) !important;
    }
    [data-theme^="aura-"] .heading-slide-subtitle {
        font-size: 1rem !important;
        margin-top: 14px !important;
    }
    [data-theme^="aura-"] .slide-title,
    [data-theme^="aura-"] .content-section-title {
        font-size: 1.6rem !important;
        margin-bottom: 24px !important;
        padding-bottom: 14px !important;
    }
    [data-theme="aura-electric"] .body-block {
        padding: 22px 18px !important;
        font-size: 1rem !important;
        border-radius: 16px !important;
    }
    [data-theme^="aura-"] .bullet-list {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    [data-theme="aura-electric"] .bullet-list li {
        padding: 22px 20px !important;
        font-size: 0.98rem !important;
        border-radius: 16px !important;
    }
    [data-theme="aura-electric"] .quiz-wrapper,
    [data-theme="aura-electric"] .assessment-wrapper {
        padding: 24px 18px !important;
        max-width: 100% !important;
    }

    /* Ribbon-flow: stack vertically, number repositioned to top */
    [data-theme="ribbon-flow"] .bullet-list {
        padding: 12px 0 32px !important;
    }
    [data-theme="ribbon-flow"] .bullet-list li,
    [data-theme="ribbon-flow"] .bullet-list li:nth-child(odd),
    [data-theme="ribbon-flow"] .bullet-list li:nth-child(even) {
        width: 96% !important;
        align-self: center !important;
        border-radius: 18px !important;
        padding: 56px 22px 22px !important;
        text-align: left !important;
        min-height: 0 !important;
        margin-bottom: 14px !important;
        font-size: 0.98rem !important;
    }
    [data-theme="ribbon-flow"] .bullet-list li::before,
    [data-theme="ribbon-flow"] .bullet-list li:nth-child(odd)::before,
    [data-theme="ribbon-flow"] .bullet-list li:nth-child(even)::before {
        top: 14px !important;
        left: 22px !important;
        right: auto !important;
        transform: none !important;
        font-size: 2.2rem !important;
        line-height: 1 !important;
        opacity: 0.85 !important;
    }
    [data-theme="ribbon-flow"] .heading-slide-title {
        font-size: clamp(1.9rem, 9vw, 2.6rem) !important;
        letter-spacing: 0.06em !important;
    }
    [data-theme="ribbon-flow"] .slide-title,
    [data-theme="ribbon-flow"] .content-section-title {
        font-size: 1.45rem !important;
        margin-bottom: 24px !important;
        letter-spacing: 0.05em !important;
    }
    [data-theme="ribbon-flow"] .quiz-question,
    [data-theme="ribbon-flow"] .assessment-q-text {
        font-size: 1.15rem !important;
    }
}

/* ── Very narrow phones (≤380px) ─────────────────────────────────── */
@media (max-width: 380px) {
    [data-theme^="nexus-"] #slide-container,
    [data-theme^="nexus-"] #quiz-container,
    [data-theme^="aura-"]  #slide-container,
    [data-theme^="aura-"]  #quiz-container {
        padding: 24px 14px !important;
    }
    [data-theme^="nexus-"] .heading-slide-title,
    [data-theme^="aura-"]  .heading-slide-title {
        font-size: 1.75rem !important;
    }
    [data-theme="aura-electric"] .body-block {
        padding: 16px 14px !important;
        font-size: 0.95rem !important;
    }
    [data-theme="ribbon-flow"] .bullet-list li,
    [data-theme="ribbon-flow"] .bullet-list li:nth-child(odd),
    [data-theme="ribbon-flow"] .bullet-list li:nth-child(even) {
        padding: 50px 16px 18px !important;
    }
    [data-theme="ribbon-flow"] .bullet-list li::before,
    [data-theme="ribbon-flow"] .bullet-list li:nth-child(odd)::before,
    [data-theme="ribbon-flow"] .bullet-list li:nth-child(even)::before {
        left: 16px !important;
        font-size: 1.9rem !important;
    }
}