/* lesson_creator.min.css - Optimized for both Light & Dark modes */

/* ============================================
   LIGHT MODE (Default)
============================================ */
:root {
    --lc-bg: #f8f9fa;
    --lc-text: #212529;
    --lc-muted: #6c757d;
    --lc-border: rgba(0,0,0,.14);
    --lc-card1: #ffffff;
    --lc-card2: #f8f9fa;
    --lc-accent: #6b7bff;
    --lc-shadow: rgba(0,0,0,0.1);
}

/* ============================================
   DARK MODE
============================================ */
[data-bs-theme="dark"] {
    --lc-bg: #0b1020;
    --lc-text: #eaf0ff;
    --lc-muted: #b9c7ff;
    --lc-border: rgba(255,255,255,.14);
    --lc-card1: rgba(255,255,255,.07);
    --lc-card2: rgba(255,255,255,.03);
    --lc-accent: #6b7bff;
    --lc-shadow: rgba(0,0,0,0.3);
}

/* ============================================
   LESSON CREATOR LAYOUT
============================================ */
.creator-shell{display:flex;flex-direction:column;height:calc(100vh - 56px);padding:20px}.creator-grid{display:grid;grid-template-columns:260px 1fr;gap:20px;flex-grow:1;min-height:0}.creator-grid.with-toc{grid-template-columns:260px 1fr 300px}.palette,.main-canvas,.toc-panel{background:var(--lc-card1);border-radius:18px;border:1px solid var(--lc-border);padding:16px;overflow-y:auto}.main-canvas{display:flex;flex-direction:column}.canvas,.json-editor,.preview-pane{overflow-y:auto;display:none}.canvas.active,.json-editor.active,.preview-pane.active{display:block;flex-grow:1}

/* ============================================
   MODE SWITCHER
============================================ */
.mode-switcher{margin-bottom:16px;display:flex;gap:8px;flex-wrap:wrap}.mode-btn{padding:8px 12px;border-radius:8px;border:1px solid var(--lc-border);background:var(--lc-card2);color:var(--lc-muted);cursor:pointer;transition:all .2s;font-size:13px}.mode-btn:hover{background:var(--lc-card1);box-shadow:0 2px 8px var(--lc-shadow)}.mode-btn.active{background:var(--lc-accent);color:#fff;border-color:var(--lc-accent)}

/* ============================================
   PALETTE SIDEBAR
============================================ */
.palette h3{color:var(--lc-text);font-size:13px;margin:0 0 10px 0;text-transform:uppercase;letter-spacing:.5px}.palette-group{margin-bottom:20px}.add-btn{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:6px;background:var(--lc-card1);border:1px solid var(--lc-border);color:var(--lc-text);margin-bottom:6px;cursor:pointer;font-size:12px;transition:all .2s}.add-btn:hover{background:var(--lc-card2);border-color:var(--lc-accent)}.add-btn:disabled{opacity:.4;cursor:not-allowed}.add-btn .emoji{margin-right:6px}

/* ============================================
   SECTIONS & BLOCKS
============================================ */
.section-card{background:var(--lc-card1);border:2px solid var(--lc-border);border-radius:12px;margin-bottom:16px;transition:border-color .2s;scroll-margin-top:20px}.section-card.active{border-color:var(--lc-accent);box-shadow:0 0 0 3px rgba(107,123,255,.1)}.section-header{padding:12px 16px;border-bottom:1px solid var(--lc-border);display:flex;align-items:center;gap:12px}.section-header input{flex:1;background:transparent;border:none;color:var(--lc-text);font-size:16px;font-weight:600}.section-header input:focus{outline:none}.section-content{padding:16px}.block-card{background:var(--lc-card2);border:1px dashed var(--lc-border);border-radius:10px;margin-bottom:12px;padding:14px;position:relative;scroll-margin-top:20px;transition:all .2s}.block-card:hover{border-color:var(--lc-accent)}.block-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.block-type{color:var(--lc-accent);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}

/* ============================================
   SPANS
============================================ */
.spans-container{display:flex;flex-direction:column;gap:8px}.span-item{background:var(--lc-card2);border:1px solid var(--lc-border);border-radius:8px;padding:10px;display:flex;align-items:flex-start;gap:10px}.span-type-badge{background:var(--lc-accent);color:#fff;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;white-space:nowrap}.span-content{flex:1}.span-content textarea,.span-content input,.span-content select{width:100%;background:var(--lc-card1);border:1px solid var(--lc-border);color:var(--lc-text);padding:8px;border-radius:6px;font-size:13px;font-family:inherit;resize:vertical}.span-content textarea{min-height:60px}.span-content input{margin-bottom:6px}.span-content label{display:block;color:var(--lc-muted);font-size:11px;margin-bottom:4px;margin-top:8px}.span-actions{display:flex;flex-direction:column;gap:4px}

/* ============================================
   FORM FIELDS
============================================ */
.field-group{margin-bottom:12px}.field-label{display:block;color:var(--lc-muted);font-size:11px;margin-bottom:4px}.field-input,.field-textarea,.field-select{width:100%;background:var(--lc-card1);border:1px solid var(--lc-border);color:var(--lc-text);padding:8px;border-radius:6px;font-size:13px;transition:border-color .2s}.field-input:focus,.field-textarea:focus,.field-select:focus{border-color:var(--lc-accent);outline:none;box-shadow:0 0 0 3px rgba(107,123,255,.1)}.field-textarea{min-height:80px;font-family:inherit;resize:vertical}

/* ============================================
   COLOR PICKER
============================================ */
.color-picker-wrapper{display:flex;gap:8px;align-items:center}.color-picker{width:60px;height:32px;border-radius:6px;border:1px solid var(--lc-border);cursor:pointer}.color-reset-btn{padding:4px 8px;background:var(--lc-card1);border:1px solid var(--lc-border);border-radius:4px;color:var(--lc-text);font-size:11px;cursor:pointer;transition:all .2s}.color-reset-btn:hover{background:var(--lc-card2);border-color:var(--lc-accent)}

/* ============================================
   ICON BUTTONS
============================================ */
.icon-btn{background:transparent;border:none;color:var(--lc-muted);cursor:pointer;padding:4px 8px;border-radius:6px;font-size:14px;transition:all .2s}.icon-btn:hover{background:rgba(107,123,255,.1);color:var(--lc-text)}.delete-icon{color:#ff6b6b!important}.delete-icon:hover{background:rgba(255,107,107,.2)!important}

/* ============================================
   TABLE OF CONTENTS PANEL
============================================ */
.toc-panel{max-height:calc(100vh - 150px)}.toc-panel h3{color:var(--lc-text);font-size:14px;margin-bottom:16px;font-weight:600}.toc-tree{list-style:none;padding:0;margin:0}.toc-section{margin-bottom:12px}.toc-section-title{padding:8px 12px;background:var(--lc-card2);border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;color:var(--lc-text);display:flex;justify-content:space-between;align-items:center;transition:all .2s}.toc-section-title:hover{background:var(--lc-accent);color:#fff}.toc-blocks{list-style:none;padding:0;margin:8px 0 0 16px}.toc-block-item{padding:6px 10px;font-size:12px;color:var(--lc-muted);cursor:pointer;border-radius:4px;margin-bottom:4px;transition:all .2s}.toc-block-item:hover{background:rgba(107,123,255,.1);color:var(--lc-text)}

/* ============================================
   PREVIEW MODE
============================================ */
.preview-pane{color:var(--lc-text);padding:40px;border-radius:12px;position:relative;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.preview-pane.fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;border-radius:0;overflow-y:auto}.fullscreen-btn{position:absolute;top:20px;right:20px;background:rgba(0,0,0,.5);color:#fff;border:none;padding:10px 16px;border-radius:8px;cursor:pointer;font-size:14px;z-index:10;transition:all .2s}.fullscreen-btn:hover{background:rgba(0,0,0,.7);transform:scale(1.05)}.preview-lesson-title{font-size:2.5em;font-weight:700;margin-bottom:32px;text-shadow:0 2px 10px rgba(0,0,0,.3);color:#fff}.preview-section{margin-bottom:40px;padding:20px;border-radius:12px;scroll-margin-top:20px}.preview-section-title{font-size:1.8em;font-weight:600;margin-bottom:20px;border-bottom:2px solid rgba(255,255,255,.3);padding-bottom:12px;color:#fff}.preview-block{background:rgba(255,255,255,.95);color:#333;padding:20px;border-radius:10px;margin-bottom:16px;line-height:1.7;font-size:16px;box-shadow:0 4px 12px rgba(0,0,0,.1);scroll-margin-top:20px}.preview-block strong{font-weight:700;color:#000}.preview-block em{font-style:italic}.preview-blank{display:inline-block;background:#f0f0f0;border:none;border-bottom:2px solid var(--lc-accent);padding:4px 12px;margin:0 4px;min-width:100px;font-style:italic;color:#666;text-align:center;border-radius:4px 4px 0 0}.preview-link{color:#667eea;text-decoration:underline;font-weight:500}.preview-link:hover{color:#764ba2}

/* ============================================
   INTERACTIVE COMPONENTS
============================================ */
.flashcard-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}.flashcard{background:#fff;border-radius:8px;padding:20px;min-height:150px;cursor:pointer;transition:transform .3s;box-shadow:0 2px 8px rgba(0,0,0,.1)}.flashcard:hover{transform:translateY(-4px)}.flashcard.flipped{background:#f8f9fa}.timeline-container{position:relative;padding-left:40px}.timeline-item{position:relative;padding-bottom:30px;border-left:2px solid rgba(255,255,255,.3);padding-left:30px;margin-bottom:20px}.timeline-item::before{content:'';position:absolute;left:-6px;top:0;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid #667eea}.timeline-date{font-weight:700;font-size:1.2em;margin-bottom:8px}.accordion-item{background:#fff;border-radius:8px;margin-bottom:12px;overflow:hidden}.accordion-header{padding:16px;background:#f8f9fa;cursor:pointer;font-weight:600;display:flex;justify-content:space-between;align-items:center}.accordion-content{padding:16px;display:none}.accordion-content.active{display:block}.hotspot-container{position:relative;display:inline-block}.hotspot-marker{position:absolute;width:30px;height:30px;background:rgba(102,126,234,.8);border:2px solid #fff;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;transition:all .2s}.hotspot-marker:hover{transform:scale(1.2);background:rgba(118,75,162,.9)}.hotspot-popup{position:absolute;background:#fff;color:#333;padding:12px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.2);max-width:200px;display:none;z-index:10}.memory-game-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:500px}.memory-card{aspect-ratio:1;background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:2em;transition:transform .3s}.memory-card.flipped{background:#667eea;color:#fff}.memory-card:hover{transform:scale(1.05)}

/* ============================================
   QUIZ COMPONENTS
============================================ */
.quiz-question{background:#fff;padding:20px;border-radius:8px;margin-bottom:16px}.quiz-options{display:flex;flex-direction:column;gap:12px;margin-top:12px}.quiz-option{padding:12px;background:#f8f9fa;border:2px solid #dee2e6;border-radius:8px;cursor:pointer;transition:all .2s}.quiz-option:hover{border-color:#667eea;background:#e7f0ff}.quiz-option.selected{border-color:#667eea;background:#e7f0ff}.quiz-option.correct{border-color:#28a745;background:#d4edda}.quiz-option.incorrect{border-color:#dc3545;background:#f8d7da}

/* ============================================
   JSON EDITOR
============================================ */
#jsonCode{width:100%;height:100%;background:var(--lc-card2);border:1px solid var(--lc-border);color:#9effa9;font-family:'Courier New',monospace;font-size:13px;padding:16px;border-radius:8px;line-height:1.5}

/* ============================================
   UTILITY CLASSES
============================================ */
.empty-state{text-align:center;padding:32px 16px;color:var(--lc-muted);font-size:13px;font-style:italic}.scroll-smooth{scroll-behavior:smooth}

/* ============================================
   RESPONSIVE
============================================ */
@media(max-width:1200px){.creator-grid.with-toc{grid-template-columns:240px 1fr 280px}}@media(max-width:992px){.creator-grid{grid-template-columns:220px 1fr}.creator-grid.with-toc{grid-template-columns:1fr}.toc-panel{position:fixed;right:-320px;top:0;bottom:0;width:300px;z-index:1000;transition:right .3s}.toc-panel.show{right:0}}@media(max-width:768px){.creator-grid{grid-template-columns:1fr}.palette{position:fixed;left:-280px;top:0;bottom:0;width:260px;z-index:1000;transition:left .3s}.palette.show{left:0}.mode-switcher{flex-direction:column}.preview-lesson-title{font-size:1.8em}.preview-section-title{font-size:1.4em}}