/* ============================================================
   MAPEH Laboratory — LAMBO Learning Cycle Styles
   Complete styling for all components
   ============================================================ */

/* --- Root Container --- */
#mapeh-lab-root,
#mapeh-lab-portal-root {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #1e293b;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    min-height: 100%;
}
#mapeh-lab-root *,
#mapeh-lab-portal-root * {
    box-sizing: border-box;
}
#mapeh-lab-portal-root {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}

/* --- Header --- */
.mlab-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
    background: linear-gradient(135deg, #f8fafc 0%, #ede9fe 100%);
    border-bottom: 1px solid #e2e8f0;
}
.mlab-header-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, #7c3aed 0%, #c026d3 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}
.mlab-header-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1e293b;
}
.mlab-header-sub {
    font-size: 0.875rem;
    color: #64748b;
    margin-top: 0.15rem;
}

/* --- LAMBO Cycle Bar --- */
.mlab-cycle-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 1rem 2rem;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
}
.mlab-cycle-chip {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border: 1.5px solid var(--c, #7c3aed);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: #fff;
    color: var(--c, #7c3aed);
    white-space: nowrap;
}
.mlab-cycle-chip i { font-size: 0.65rem; }
.mlab-cycle-arrow {
    color: #cbd5e1;
    font-size: 0.55rem;
}

/* --- Section Title --- */
.mlab-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #475569;
    padding: 1.5rem 2rem 0.5rem;
}

/* --- Topic Grid --- */
.mlab-topic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
    padding: 0.5rem 2rem 2rem;
}
.mlab-topic-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
}
.mlab-topic-card:hover {
    border-color: #7c3aed;
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.15);
    transform: translateY(-3px);
}

/* --- Topic Banner --- */
.mlab-topic-banner {
    position: relative;
    padding: 1.5rem;
    color: #fff;
    min-height: 100px;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.mlab-topic-banner-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    backdrop-filter: blur(4px);
}
.mlab-topic-banner-domain {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
}
.mlab-topic-banner-progress {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: rgba(255, 255, 255, 0.25);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    backdrop-filter: blur(4px);
}

/* --- Topic Body --- */
.mlab-topic-body {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.mlab-topic-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
}
.mlab-topic-sub {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 0.3rem;
    line-height: 1.4;
    flex: 1;
}
.mlab-topic-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
    font-size: 0.72rem;
    color: #94a3b8;
}
.mlab-topic-meta span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.mlab-topic-progress-bar {
    height: 4px;
    background: #e2e8f0;
    border-radius: 999px;
    margin-top: 0.75rem;
    overflow: hidden;
}
.mlab-topic-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #7c3aed, #c026d3);
    border-radius: 999px;
    transition: width 0.3s;
}
.mlab-topic-start {
    margin-top: 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #7c3aed;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: gap 0.2s;
}
.mlab-topic-card:hover .mlab-topic-start {
    gap: 0.7rem;
}

/* --- Back Bar --- */
.mlab-back-bar {
    padding: 1rem 2rem;
    border-bottom: 1px solid #e2e8f0;
}
.mlab-back-btn {
    background: none;
    border: none;
    color: #6366f1;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    transition: color 0.2s;
}
.mlab-back-btn:hover { color: #4f46e5; }

/* --- Lab Cover --- */
.mlab-lab-cover {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
    color: #fff;
    gap: 1.5rem;
}
.mlab-lab-cover-content {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex: 1;
}
.mlab-lab-cover-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    backdrop-filter: blur(4px);
}
.mlab-lab-cover-domain {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.9;
}
.mlab-lab-cover-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-top: 0.15rem;
}
.mlab-lab-cover-sub {
    font-size: 0.85rem;
    opacity: 0.85;
    margin-top: 0.3rem;
    max-width: 600px;
}
.mlab-lab-cover-progress {
    flex-shrink: 0;
}
.mlab-lab-cover-progress-ring {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: conic-gradient(rgba(255,255,255,0.3) calc(var(--p, 0) * 1%), rgba(255,255,255,0.15) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.mlab-lab-cover-progress-ring::before {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
}
.mlab-lab-cover-progress-ring span {
    position: relative;
    font-size: 0.85rem;
    font-weight: 700;
}

/* --- Lab Meta Bar --- */
.mlab-lab-meta-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding: 0.75rem 2rem;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.78rem;
    color: #475569;
}
.mlab-lab-meta-bar span {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.mlab-lab-meta-bar i { color: #7c3aed; }
.mlab-lab-cert {
    color: #b45309 !important;
    font-weight: 600;
}
.mlab-lab-cert i { color: #b45309 !important; }

/* --- Lab Info Grid --- */
.mlab-lab-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    padding: 1.5rem 2rem;
}
.mlab-lab-info-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1rem 1.25rem;
}
.mlab-lab-info-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #7c3aed;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}
.mlab-lab-info-value {
    font-size: 0.875rem;
    color: #334155;
    line-height: 1.5;
}
.mlab-lab-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mlab-lab-info-list li {
    font-size: 0.82rem;
    color: #334155;
    padding: 0.3rem 0;
    padding-left: 1.1rem;
    position: relative;
    line-height: 1.4;
}
.mlab-lab-info-list li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #10b981;
    font-size: 0.65rem;
    position: absolute;
    left: 0;
    top: 0.45rem;
}

/* --- Badge Card --- */
.mlab-lab-badge-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.mlab-lab-badge {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    margin: 0.5rem 0;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
.mlab-lab-badge-text {
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
}

/* --- Detail Layout --- */
.mlab-detail {
    display: flex;
    border-top: 1px solid #e2e8f0;
    min-height: 500px;
}

/* --- Step Sidebar --- */
.mlab-sidebar {
    width: 230px;
    flex-shrink: 0;
    border-right: 1px solid #e2e8f0;
    padding: 1rem 0.5rem;
    background: #fafafa;
}
.mlab-sidebar-title {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    padding: 0 0.75rem 0.5rem;
}
.mlab-step-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    border-left: 3px solid transparent;
    margin-bottom: 0.15rem;
}
.mlab-step-item:hover { background: #f1f5f9; }
.mlab-step-item.active {
    background: #ede9fe;
    border-left-color: var(--c, #7c3aed);
}
.mlab-step-item.done .mlab-step-num {
    background: #10b981 !important;
    color: #fff !important;
}
.mlab-step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}
.mlab-step-item.active .mlab-step-num {
    background: var(--c, #7c3aed);
    color: #fff;
}
.mlab-step-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.mlab-step-item.active .mlab-step-label { color: #1e293b; }
.mlab-step-label i { font-size: 0.7rem; color: #94a3b8; }
.mlab-step-item.active .mlab-step-label i { color: var(--c, #7c3aed); }

/* --- Step Content Area --- */
.mlab-content {
    flex: 1;
    padding: 1.5rem 2rem;
    overflow-y: auto;
    max-height: calc(100vh - 380px);
}
.mlab-empty {
    text-align: center;
    color: #94a3b8;
    padding: 3rem;
}

/* --- Step Header --- */
.mlab-step-header {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-left: 4px solid var(--c, #7c3aed);
    border-radius: 0 10px 10px 0;
    margin-bottom: 1.5rem;
}
.mlab-step-badge {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--c, #7c3aed);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.mlab-step-header-text { flex: 1; }
.mlab-step-name {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c, #7c3aed);
}
.mlab-step-title-h {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1e293b;
    margin-top: 0.1rem;
}
.mlab-step-desc {
    font-size: 0.82rem;
    color: #64748b;
    margin-top: 0.25rem;
    line-height: 1.4;
}
.mlab-step-time {
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* --- Video --- */
.mlab-video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    margin-bottom: 1.5rem;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.mlab-video iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 0;
}

/* --- Content Blocks --- */
.mlab-heading {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    margin: 1.5rem 0 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid #e2e8f0;
}
.mlab-paragraph {
    font-size: 0.875rem;
    color: #334155;
    line-height: 1.65;
    margin-bottom: 0.85rem;
}
.mlab-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}
.mlab-list li {
    font-size: 0.85rem;
    color: #334155;
    padding: 0.35rem 0;
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    line-height: 1.5;
}
.mlab-list li i {
    color: #7c3aed;
    font-size: 0.55rem;
    margin-top: 0.45rem;
    flex-shrink: 0;
}

/* --- Terms (simple) --- */
.mlab-terms {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.mlab-term {
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
.mlab-term-word {
    display: block;
    font-weight: 700;
    color: #7c3aed;
    font-size: 0.85rem;
}
.mlab-term-def {
    display: block;
    font-size: 0.8rem;
    color: #475569;
    margin-top: 0.2rem;
}

/* --- Vocabulary Cards --- */
.mlab-vocab {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.mlab-vocab-card {
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #7c3aed;
    border-radius: 0 8px 8px 0;
    transition: box-shadow 0.2s;
}
.mlab-vocab-card:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); }
.mlab-vocab-word {
    font-size: 0.95rem;
    font-weight: 700;
    color: #7c3aed;
}
.mlab-vocab-def {
    font-size: 0.82rem;
    color: #334155;
    margin-top: 0.3rem;
    line-height: 1.5;
}
.mlab-vocab-example {
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed #e2e8f0;
    font-style: italic;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}
.mlab-vocab-example i { color: #cbd5e1; font-size: 0.65rem; margin-top: 0.2rem; }

/* --- Tip --- */
.mlab-tip {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.85rem 1.1rem;
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #92400e;
    margin-bottom: 1rem;
    line-height: 1.5;
}
.mlab-tip i { color: #f59e0b; margin-top: 0.15rem; flex-shrink: 0; }

/* --- Warning --- */
.mlab-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.85rem 1.1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #991b1b;
    margin-bottom: 1rem;
    line-height: 1.5;
}
.mlab-warning i { color: #ef4444; margin-top: 0.15rem; flex-shrink: 0; }

/* --- Screenshot / Image / GIF --- */
.mlab-figure {
    margin: 0 0 1.25rem;
    text-align: center;
}
.mlab-figure img {
    max-width: 100%;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.mlab-figure figcaption {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 0.5rem;
    font-style: italic;
}
.mlab-img-placeholder {
    padding: 2rem;
    background: #f1f5f9;
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    text-align: center;
    color: #94a3b8;
    margin-bottom: 1.25rem;
}
.mlab-img-placeholder i { font-size: 1.5rem; display: block; margin-bottom: 0.5rem; }
.mlab-img-placeholder span { font-size: 0.8rem; }

/* --- Checklist --- */
.mlab-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.mlab-check-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.9rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    color: #334155;
    transition: all 0.15s;
}
.mlab-check-item:hover { border-color: #c7d2fe; background: #f5f3ff; }
.mlab-check-item input { display: none; }
.mlab-check-box {
    width: 22px;
    height: 22px;
    border: 2px solid #cbd5e1;
    border-radius: 6px;
    flex-shrink: 0;
    transition: all 0.15s;
    position: relative;
}
.mlab-check-item input:checked + .mlab-check-box {
    background: #7c3aed;
    border-color: #7c3aed;
}
.mlab-check-item input:checked + .mlab-check-box::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #fff;
    font-size: 0.7rem;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.mlab-check-item input:checked ~ span:last-child {
    text-decoration: line-through;
    color: #94a3b8;
}

/* --- Questions (simple list) --- */
.mlab-questions {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}
.mlab-questions li {
    font-size: 0.85rem;
    color: #334155;
    padding: 0.45rem 0;
    line-height: 1.5;
}

/* --- Quiz --- */
.mlab-quiz { margin-bottom: 1.25rem; }
.mlab-quiz-item {
    padding: 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 0.75rem;
}
.mlab-quiz-q {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.65rem;
}
.mlab-quiz-opts {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.mlab-quiz-opt {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0.85rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.82rem;
    color: #334155;
    transition: all 0.15s;
}
.mlab-quiz-opt:hover { border-color: #c7d2fe; background: #f5f3ff; }
.mlab-quiz-opt.disabled { cursor: default; }
.mlab-quiz-opt.disabled:hover { background: #fff; border-color: #e2e8f0; }
.mlab-quiz-radio {
    width: 18px;
    height: 18px;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.15s;
    position: relative;
}
.mlab-quiz-opt.correct {
    background: #f0fdf4;
    border-color: #86efac;
    color: #166534;
}
.mlab-quiz-opt.correct .mlab-quiz-radio {
    background: #22c55e;
    border-color: #22c55e;
}
.mlab-quiz-opt.correct .mlab-quiz-radio::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #fff;
    font-size: 0.55rem;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.mlab-quiz-opt.wrong {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}
.mlab-quiz-opt.wrong .mlab-quiz-radio {
    background: #ef4444;
    border-color: #ef4444;
}
.mlab-quiz-opt.wrong .mlab-quiz-radio::after {
    content: '\f00d';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #fff;
    font-size: 0.55rem;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.mlab-quiz-feedback { margin-top: 0.5rem; }
.mlab-quiz-fb {
    padding: 0.6rem 0.85rem;
    border-radius: 6px;
    font-size: 0.8rem;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    line-height: 1.4;
}
.mlab-quiz-fb.correct { background: #f0fdf4; color: #166534; }
.mlab-quiz-fb.wrong { background: #fef2f2; color: #991b1b; }

/* --- True/False --- */
.mlab-tf { margin-bottom: 1.25rem; }
.mlab-tf-item {
    padding: 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 0.75rem;
}
.mlab-tf-q {
    font-size: 0.88rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.65rem;
}
.mlab-tf-btns {
    display: flex;
    gap: 0.5rem;
}
.mlab-tf-btn {
    padding: 0.5rem 1.25rem;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    color: #475569;
    transition: all 0.15s;
}
.mlab-tf-btn:hover { border-color: #7c3aed; color: #7c3aed; }
.mlab-tf-btn.disabled { cursor: default; opacity: 0.7; }
.mlab-tf-btn.disabled:hover { border-color: #cbd5e1; color: #475569; }
.mlab-tf-btn.correct {
    background: #22c55e;
    border-color: #22c55e;
    color: #fff;
    opacity: 1;
}
.mlab-tf-btn.wrong {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
    opacity: 1;
}
.mlab-tf-btn.help {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #fff;
    opacity: 1;
}
.mlab-tf-feedback { margin-top: 0.5rem; }
.mlab-tf-fb {
    padding: 0.6rem 0.85rem;
    border-radius: 6px;
    font-size: 0.8rem;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    line-height: 1.4;
}
.mlab-tf-fb.correct { background: #f0fdf4; color: #166534; }
.mlab-tf-fb.wrong { background: #fef2f2; color: #991b1b; }

/* --- Fill in the Blank --- */
.mlab-fillblank { margin-bottom: 1.25rem; }
.mlab-fb-item {
    padding: 0.85rem 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}
.mlab-fb-text {
    font-size: 0.85rem;
    color: #334155;
    margin-bottom: 0.5rem;
    line-height: 1.6;
}
.mlab-fb-input {
    display: inline-block;
    padding: 0.3rem 0.6rem;
    border: 1.5px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.82rem;
    min-width: 120px;
    margin: 0 0.25rem;
}
.mlab-fb-input.correct { border-color: #22c55e; background: #f0fdf4; }
.mlab-fb-input.wrong { border-color: #ef4444; background: #fef2f2; }
.mlab-fb-check {
    padding: 0.35rem 0.85rem;
    background: #7c3aed;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}
.mlab-fb-check:hover { background: #6d28d9; }
.mlab-fb-feedback { margin-top: 0.4rem; }
.mlab-fb-result {
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.mlab-fb-result.correct { background: #f0fdf4; color: #166534; }
.mlab-fb-result.wrong { background: #fef2f2; color: #991b1b; }

/* --- Matching --- */
.mlab-matching { margin-bottom: 1.25rem; }
.mlab-match-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0.75rem;
}
.mlab-match-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.82rem;
    color: #334155;
}
.mlab-match-left { font-weight: 600; white-space: nowrap; }
.mlab-match-arrow { color: #cbd5e1; text-align: center; }
.mlab-match-select {
    padding: 0.35rem 0.6rem;
    border: 1.5px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.8rem;
    width: 100%;
    min-width: 150px;
    background: #fff;
}
.mlab-match-select.correct { border-color: #22c55e; background: #f0fdf4; }
.mlab-match-select.wrong { border-color: #ef4444; background: #fef2f2; }
.mlab-match-check {
    padding: 0.5rem 1.25rem;
    background: #7c3aed;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}
.mlab-match-check:hover { background: #6d28d9; }
.mlab-match-feedback { margin-top: 0.6rem; }
.mlab-match-result {
    padding: 0.6rem 0.85rem;
    border-radius: 6px;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.mlab-match-result.correct { background: #f0fdf4; color: #166534; }
.mlab-match-result.partial { background: #fefce8; color: #92400e; }
.mlab-match-result.wrong { background: #fef2f2; color: #991b1b; }

/* --- Ordering (drag and drop) --- */
.mlab-ordering { margin-bottom: 1.25rem; }
.mlab-order-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}
.mlab-order-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.9rem;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #334155;
    cursor: grab;
    transition: all 0.15s;
}
.mlab-order-item:hover { border-color: #c7d2fe; }
.mlab-order-item.dragging { opacity: 0.5; cursor: grabbing; }
.mlab-order-item.correct { border-color: #86efac; background: #f0fdf4; }
.mlab-order-item.wrong { border-color: #fecaca; background: #fef2f2; }
.mlab-order-grip { color: #cbd5e1; cursor: grab; }
.mlab-order-check {
    padding: 0.5rem 1.25rem;
    background: #7c3aed;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}
.mlab-order-check:hover { background: #6d28d9; }
.mlab-order-feedback { margin-top: 0.6rem; }
.mlab-order-result {
    padding: 0.6rem 0.85rem;
    border-radius: 6px;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.mlab-order-result.correct { background: #f0fdf4; color: #166534; }
.mlab-order-result.wrong { background: #fef2f2; color: #991b1b; }

/* --- Flashcards --- */
.mlab-flashcards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.mlab-flashcard {
    perspective: 1000px;
    height: 140px;
    cursor: pointer;
}
.mlab-flashcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.5s;
    transform-style: preserve-3d;
}
.mlab-flashcard.flipped .mlab-flashcard-inner {
    transform: rotateY(180deg);
}
.mlab-flashcard-front, .mlab-flashcard-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.mlab-flashcard-front {
    background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%);
    color: #fff;
}
.mlab-flashcard-back {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    transform: rotateY(180deg);
}
.mlab-flashcard-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
    margin-bottom: 0.4rem;
}
.mlab-flashcard-text {
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.4;
}
.mlab-flashcard-hint {
    font-size: 0.65rem;
    opacity: 0.6;
    margin-top: auto;
    padding-top: 0.5rem;
}

/* --- Rubric --- */
.mlab-rubric {
    overflow-x: auto;
    margin-bottom: 1.25rem;
}
.mlab-rubric table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.mlab-rubric th {
    text-align: left;
    padding: 0.65rem 0.85rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    font-weight: 700;
    color: #475569;
}
.mlab-rubric td {
    padding: 0.65rem 0.85rem;
    border: 1px solid #e2e8f0;
    color: #334155;
}
.mlab-rubric-max { text-align: center; font-weight: 600; }
.mlab-rubric-input {
    width: 65px;
    padding: 0.35rem 0.5rem;
    border: 1.5px solid #cbd5e1;
    border-radius: 6px;
    text-align: center;
    font-size: 0.85rem;
}
.mlab-rubric-input:focus { border-color: #7c3aed; outline: none; }
.mlab-rubric tfoot td {
    font-weight: 700;
    background: #f8fafc;
    text-align: center;
    font-size: 0.9rem;
}

/* --- Reflection --- */
.mlab-reflection { margin-bottom: 1.25rem; }
.mlab-reflection-prompt { margin-bottom: 1rem; }
.mlab-reflection-q {
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.4rem;
    line-height: 1.5;
}
.mlab-reflection-input {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #334155;
    font-family: inherit;
    resize: vertical;
    min-height: 60px;
    transition: border-color 0.15s;
}
.mlab-reflection-input:focus { border-color: #7c3aed; outline: none; }

/* --- Checkpoint --- */
.mlab-checkpoint {
    padding: 1rem 1.25rem;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 10px;
    margin-bottom: 1.25rem;
}
.mlab-checkpoint-q {
    font-size: 0.88rem;
    font-weight: 600;
    color: #0c4a6e;
    margin-bottom: 0.65rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    line-height: 1.5;
}
.mlab-checkpoint-q i { color: #0284c7; margin-top: 0.15rem; flex-shrink: 0; }
.mlab-checkpoint-btns {
    display: flex;
    gap: 0.5rem;
}
.mlab-cp-btn {
    padding: 0.5rem 1.1rem;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    color: #475569;
    transition: all 0.15s;
}
.mlab-cp-btn:hover { border-color: #7c3aed; color: #7c3aed; }
.mlab-cp-btn.disabled { cursor: default; opacity: 0.7; }
.mlab-cp-btn.disabled:hover { border-color: #cbd5e1; color: #475569; }
.mlab-cp-btn.correct { background: #22c55e; border-color: #22c55e; color: #fff; opacity: 1; }
.mlab-cp-btn.help { background: #f59e0b; border-color: #f59e0b; color: #fff; opacity: 1; }
.mlab-checkpoint-feedback { margin-top: 0.6rem; }
.mlab-cp-fb {
    padding: 0.65rem 0.85rem;
    border-radius: 6px;
    font-size: 0.8rem;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    line-height: 1.4;
}
.mlab-cp-fb.yes { background: #f0fdf4; color: #166534; }
.mlab-cp-fb.no { background: #fffbeb; color: #92400e; }

/* --- Upload --- */
.mlab-upload { margin-bottom: 1.25rem; }
.mlab-upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 2rem;
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}
.mlab-upload-zone:hover {
    border-color: #7c3aed;
    background: #f5f3ff;
}
.mlab-upload-zone input[type="file"] { display: none; }
.mlab-upload-zone i { font-size: 2rem; color: #7c3aed; }
.mlab-upload-zone span { font-size: 0.85rem; font-weight: 600; color: #475569; }
.mlab-upload-hint { font-size: 0.72rem; color: #94a3b8; font-weight: 400; }
.mlab-upload-result { margin-top: 0.75rem; }
.mlab-upload-success {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 8px;
}
.mlab-upload-success i { color: #22c55e; font-size: 1.25rem; }
.mlab-upload-success strong { font-size: 0.85rem; color: #166534; display: block; }
.mlab-upload-meta { font-size: 0.72rem; color: #15803d; }

/* --- Step Footer (mark complete) --- */
.mlab-step-footer {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e2e8f0;
}
.mlab-complete-toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: #475569;
}
.mlab-complete-toggle input { display: none; }
.mlab-complete-box {
    width: 22px;
    height: 22px;
    border: 2px solid #cbd5e1;
    border-radius: 6px;
    position: relative;
    transition: all 0.15s;
}
.mlab-complete-toggle input:checked + .mlab-complete-box {
    background: #10b981;
    border-color: #10b981;
}
.mlab-complete-toggle input:checked + .mlab-complete-box::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #fff;
    font-size: 0.7rem;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

/* --- Step Navigation --- */
.mlab-step-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e2e8f0;
}
.mlab-step-counter {
    font-size: 0.78rem;
    color: #94a3b8;
    font-weight: 600;
}
.mlab-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.mlab-btn-prev { background: #f1f5f9; color: #475569; }
.mlab-btn-prev:hover { background: #e2e8f0; }
.mlab-btn-next { background: #7c3aed; color: #fff; }
.mlab-btn-next:hover { background: #6d28d9; }
.mlab-btn-done { background: #10b981; color: #fff; }
.mlab-btn-done:hover { background: #059669; }

/* --- Responsive --- */






/* ============================================================
   CapCut Video Editor Simulation
   ============================================================ */

.cc-editor {
    background: #0f172a;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #e2e8f0;
    position: relative;
}

/* Fullscreen mode */
.cc-editor:fullscreen, .cc-editor:-webkit-full-screen {
    width: 100vw; height: 100vh; border-radius: 0;
    display: flex; flex-direction: column;
}
.cc-editor:fullscreen .cc-body, .cc-editor:-webkit-full-screen .cc-body {
    flex: 1; min-height: 0;
}

/* --- Top Bar --- */
.cc-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.5rem 0.75rem; background: #1e293b; border-bottom: 1px solid #334155;
    flex-shrink: 0;
}
.cc-topbar-left { display: flex; align-items: center; gap: 0.5rem; }
.cc-logo { color: #7c3aed; font-size: 1.1rem; }
.cc-project-name {
    background: transparent; border: 1px solid transparent; color: #e2e8f0;
    font-size: 0.85rem; font-weight: 600; padding: 0.25rem 0.5rem; border-radius: 6px;
    min-width: 120px; max-width: 200px;
}
.cc-project-name:hover { border-color: #334155; }
.cc-project-name:focus { border-color: #7c3aed; outline: none; background: #0f172a; }
.cc-topbar-right { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.cc-tb-btn {
    display: flex; align-items: center; gap: 0.3rem;
    padding: 0.35rem 0.6rem; background: #334155; border: 1px solid #475569;
    border-radius: 6px; color: #cbd5e1; font-size: 0.72rem; font-weight: 600;
    cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.cc-tb-btn:hover { background: #475569; color: #fff; }
.cc-tb-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cc-export-btn { background: #7c3aed !important; border-color: #7c3aed !important; color: #fff !important; }
.cc-export-btn:hover { background: #6d28d9 !important; }
.cc-fs-btn { background: #1d4ed8 !important; border-color: #1d4ed8 !important; color: #fff !important; }

/* --- Body Layout: Desktop (landscape) --- */
.cc-body {
    display: grid;
    grid-template-columns: 180px 1fr 200px;
    grid-template-rows: 1fr auto;
    grid-template-areas:
        "media preview props"
        "media timeline timeline";
    height: 540px;
    gap: 1px;
    background: #334155;
}

/* --- Media Panel --- */
.cc-media-panel { grid-area: media; background: #1e293b; display: flex; flex-direction: column; overflow: hidden; }
.cc-panel-header {
    padding: 0.5rem 0.75rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: #94a3b8; display: flex; align-items: center; gap: 0.35rem;
    border-bottom: 1px solid #334155; flex-shrink: 0;
}
.cc-import-zone {
    margin: 0.5rem; padding: 0.75rem 0.5rem; border: 2px dashed #475569; border-radius: 8px;
    text-align: center; cursor: pointer; transition: all 0.15s;
    display: flex; flex-direction: column; align-items: center; gap: 0.25rem; flex-shrink: 0;
}
.cc-import-zone:hover, .cc-import-zone.dragover { border-color: #7c3aed; background: rgba(124,58,237,0.1); }
.cc-import-zone i { font-size: 1.3rem; color: #7c3aed; }
.cc-import-zone span { font-size: 0.68rem; color: #cbd5e1; font-weight: 600; }
.cc-import-hint { font-size: 0.6rem; color: #64748b; }
.cc-media-list { flex: 1; overflow-y: auto; padding: 0 0.4rem 0.4rem; }
.cc-media-empty { text-align: center; color: #64748b; font-size: 0.68rem; padding: 1rem 0.5rem; line-height: 1.5; }
.cc-media-item {
    display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem; border-radius: 6px;
    margin-bottom: 0.25rem; transition: background 0.15s;
}
.cc-media-item:hover { background: #334155; }
.cc-media-thumb {
    width: 44px; height: 30px; border-radius: 4px; background-size: cover; background-position: center;
    flex-shrink: 0; background-color: #334155;
}
.cc-media-thumb-icon { display: flex; align-items: center; justify-content: center; color: #64748b; font-size: 0.85rem; }
.cc-media-info { flex: 1; min-width: 0; }
.cc-media-name { font-size: 0.68rem; font-weight: 600; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-media-meta { font-size: 0.58rem; color: #64748b; margin-top: 0.1rem; }
.cc-media-add {
    width: 22px; height: 22px; border-radius: 50%; background: #7c3aed; border: none; color: #fff;
    font-size: 0.6rem; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cc-media-add:hover { background: #6d28d9; transform: scale(1.1); }
.cc-media-loading { padding: 0.4rem; text-align: center; color: #94a3b8; font-size: 0.68rem; }
.cc-media-error { padding: 0.4rem; text-align: center; color: #ef4444; font-size: 0.68rem; }

/* --- Preview --- */
.cc-preview-wrap { grid-area: preview; background: #0f172a; display: flex; flex-direction: column; padding: 0.5rem; min-height: 0; }
.cc-preview { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.cc-canvas {
    max-width: 100%; max-height: 100%; border-radius: 8px; background: #000;
    aspect-ratio: 16/9; object-fit: contain;
}
.cc-empty-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; color: #475569; pointer-events: none;
}
.cc-empty-overlay i { font-size: 2.5rem; margin-bottom: 0.5rem; }
.cc-empty-overlay p { font-size: 0.85rem; }
.cc-controls { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; flex-shrink: 0; }
.cc-play-btn {
    width: 34px; height: 34px; border-radius: 50%; background: #7c3aed; border: none; color: #fff;
    font-size: 0.8rem; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cc-play-btn:hover { background: #6d28d9; }
.cc-time { font-size: 0.68rem; color: #94a3b8; font-family: 'SF Mono', Monaco, monospace; white-space: nowrap; }
.cc-seek { flex: 1; height: 6px; background: #334155; border-radius: 999px; position: relative; cursor: pointer; touch-action: none; }
.cc-seek-fill { height: 100%; background: #7c3aed; border-radius: 999px; width: 0%; }
.cc-seek-handle {
    position: absolute; top: 50%; left: 0%; width: 14px; height: 14px; background: #fff;
    border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* --- Timeline --- */
.cc-timeline-wrap { grid-area: timeline; background: #1e293b; padding: 0.4rem 0.6rem; flex-shrink: 0; }
.cc-tl-toolbar { display: flex; align-items: center; gap: 0.25rem; margin-bottom: 0.35rem; flex-wrap: wrap; }
.cc-tl-btn {
    display: flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; background: #334155;
    border: 1px solid #475569; border-radius: 6px; color: #cbd5e1; font-size: 0.68rem; font-weight: 600;
    cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.cc-tl-btn:hover { background: #475569; color: #fff; }
.cc-tl-info { font-size: 0.68rem; color: #64748b; margin-left: auto; }
.cc-tl-track {
    display: flex; gap: 2px; min-height: 50px; background: #0f172a; border-radius: 6px;
    padding: 3px; margin-bottom: 3px; overflow-x: auto; touch-action: pan-x;
}
.cc-tl-empty { color: #64748b; font-size: 0.68rem; text-align: center; padding: 0.8rem; width: 100%; }
.cc-clip {
    position: relative; min-width: 40px; height: 44px; border-radius: 5px; cursor: pointer; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end; padding: 3px; border: 2px solid transparent;
    flex-shrink: 0; touch-action: none;
}
.cc-clip:hover { opacity: 0.85; }
.cc-clip.selected { border-color: #fff; box-shadow: 0 0 0 2px #7c3aed; }
.cc-clip-thumb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0.4; }
.cc-clip-label { font-size: 0.55rem; color: #fff; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; z-index: 1; }
.cc-clip-dur { font-size: 0.5rem; color: rgba(255,255,255,0.7); position: relative; z-index: 1; }
.cc-clip-badge { position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,0.5); border-radius: 3px; padding: 1px 3px; font-size: 0.45rem; color: #fff; z-index: 1; }
.cc-clip-badge.trans { right: 16px; }
.cc-clip-badge.filt { right: 30px; }
.cc-clip-handle { position: absolute; top: 0; width: 14px; height: 100%; cursor: ew-resize; z-index: 2; touch-action: none; }
.cc-clip-handle.left { left: 0; }
.cc-clip-handle.right { right: 0; }
.cc-clip-handle:hover { background: rgba(255,255,255,0.3); }

.cc-tl-audio { min-height: 24px; background: #0f172a; border-radius: 5px; padding: 3px; display: flex; gap: 3px; flex-wrap: wrap; align-items: center; }
.cc-audio-empty { color: #64748b; font-size: 0.62rem; padding: 0.2rem 0.4rem; display: flex; align-items: center; gap: 0.25rem; }
.cc-audio-clip { display: flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.5rem; background: #059669; border-radius: 4px; font-size: 0.6rem; color: #fff; font-weight: 600; }
.cc-audio-del { background: rgba(0,0,0,0.3); border: none; color: #fff; border-radius: 3px; cursor: pointer; font-size: 0.5rem; padding: 1px 4px; }
.cc-audio-del:hover { background: rgba(239,68,68,0.6); }

/* --- Properties --- */
.cc-props-panel { grid-area: props; background: #1e293b; display: flex; flex-direction: column; overflow: hidden; }
.cc-props-content { flex: 1; overflow-y: auto; padding: 0.5rem; }
.cc-props-empty { text-align: center; color: #64748b; font-size: 0.68rem; padding: 1rem 0.5rem; }
.cc-prop-group { margin-bottom: 0.6rem; padding-bottom: 0.5rem; border-bottom: 1px solid #334155; }
.cc-prop-group:last-child { border-bottom: none; }
.cc-prop-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; color: #7c3aed; margin-bottom: 0.3rem; }
.cc-prop-row { display: flex; justify-content: space-between; font-size: 0.68rem; color: #cbd5e1; padding: 0.15rem 0; }
.cc-prop-row span:last-child { color: #94a3b8; }
.cc-prop-btn {
    width: 100%; padding: 0.35rem 0.5rem; background: #334155; border: 1px solid #475569; border-radius: 6px;
    color: #cbd5e1; font-size: 0.68rem; font-weight: 600; cursor: pointer; margin-bottom: 0.25rem;
    display: flex; align-items: center; gap: 0.35rem; justify-content: center;
}
.cc-prop-btn:hover { background: #475569; color: #fff; }
.cc-prop-danger { background: #7f1d1d !important; border-color: #991b1b !important; }

/* ============================================================
   Responsive: Mobile Portrait
   ============================================================ */


/* ============================================================
   Responsive: Mobile Landscape
   ============================================================ */


/* ============================================================
   Responsive: Tablet
   ============================================================ */


/* Fullscreen adjustments */
.cc-editor:fullscreen .cc-body, .cc-editor:-webkit-full-screen .cc-body {
    height: calc(100vh - 50px) !important;
}
.cc-editor:fullscreen .cc-canvas, .cc-editor:-webkit-full-screen .cc-canvas {
    max-height: calc(100vh - 200px) !important;
}

/* ============================================================
   Cover Animations — Loop GIF-like CSS Animations
   ============================================================ */

.mlab-cover-anim {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* --- CapCut: Animated Timeline + Preview Screen --- */
.mlab-anim-capcut .anim-timeline {
    position: absolute;
    bottom: 8px; left: 8px; right: 8px;
    height: 20px;
    background: rgba(0,0,0,0.4);
    border-radius: 4px;
    display: flex;
    gap: 2px;
    padding: 2px;
    overflow: hidden;
}
.mlab-anim-capcut .anim-clip {
    height: 100%;
    border-radius: 3px;
    opacity: 0.7;
    animation: clipSlide 3s ease-in-out infinite;
}
.mlab-anim-capcut .anim-clip1 { background: #7c3aed; width: 30%; animation-delay: 0s; }
.mlab-anim-capcut .anim-clip2 { background: #0891b2; width: 25%; animation-delay: 0.5s; }
.mlab-anim-capcut .anim-clip3 { background: #db2777; width: 20%; animation-delay: 1s; }
@keyframes clipSlide {
    0%, 100% { transform: translateX(0); opacity: 0.7; }
    50% { transform: translateX(10px); opacity: 1; }
}
.mlab-anim-capcut .anim-playhead {
    position: absolute;
    top: 0; bottom: 0;
    left: 0;
    width: 2px;
    background: #fff;
    animation: playheadMove 3s linear infinite;
    box-shadow: 0 0 4px rgba(255,255,255,0.8);
}
@keyframes playheadMove {
    0% { left: 5%; }
    100% { left: 75%; }
}
.mlab-anim-capcut .anim-preview-screen {
    position: absolute;
    top: 10px; left: 50%;
    transform: translateX(-50%);
    width: 60px; height: 36px;
    background: rgba(0,0,0,0.5);
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.2);
    overflow: hidden;
}
.mlab-anim-capcut .anim-screen-content {
    width: 100%; height: 100%;
    background: linear-gradient(90deg, #7c3aed, #db2777, #0891b2, #7c3aed);
    background-size: 300% 100%;
    animation: screenShift 3s linear infinite;
}
@keyframes screenShift {
    0% { background-position: 0% 0%; }
    100% { background-position: 300% 0%; }
}

/* --- News: Studio with lower-thirds + LIVE badge --- */
.mlab-anim-news .anim-news-set {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 100%);
}
.mlab-anim-news .anim-news-desk {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 30%;
    background: linear-gradient(180deg, rgba(220,38,38,0.3), rgba(220,38,38,0.6));
    border-top: 2px solid rgba(255,255,255,0.3);
}
.mlab-anim-news .anim-news-anchor {
    position: absolute;
    bottom: 20%; left: 50%;
    transform: translateX(-50%);
    width: 24px; height: 32px;
    background: rgba(255,255,255,0.15);
    border-radius: 12px 12px 4px 4px;
    animation: anchorTalk 2s ease-in-out infinite;
}
@keyframes anchorTalk {
    0%, 100% { transform: translateX(-50%) scaleY(1); }
    50% { transform: translateX(-50%) scaleY(1.05); }
}
.mlab-anim-news .anim-lower-third {
    position: absolute;
    bottom: 6px; left: 6px;
    width: 50%;
    animation: ltSlideIn 3s ease-in-out infinite;
}
@keyframes ltSlideIn {
    0% { transform: translateX(-100%); opacity: 0; }
    20%, 80% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(-100%); opacity: 0; }
}
.mlab-anim-news .anim-lt-bar {
    width: 4px; height: 16px;
    background: #dc2626;
    display: inline-block;
    vertical-align: middle;
}
.mlab-anim-news .anim-lt-text {
    display: inline-block;
    height: 16px;
    width: 40px;
    background: rgba(0,0,0,0.6);
    margin-left: 2px;
    border-radius: 2px;
    vertical-align: middle;
    animation: ltTextBlink 3s ease-in-out infinite;
}
@keyframes ltTextBlink {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}
.mlab-anim-news .anim-live-badge {
    position: absolute;
    top: 6px; right: 6px;
    background: #dc2626;
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 3px;
    animation: livePulse 1.5s ease-in-out infinite;
}
@keyframes livePulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(220,38,38,0.5); }
    50% { opacity: 0.7; box-shadow: 0 0 0 4px rgba(220,38,38,0); }
}

/* --- Podcast: Microphone + Sound Waves --- */
.mlab-anim-podcast .anim-mic {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    color: rgba(255,255,255,0.8);
    animation: micGlow 2s ease-in-out infinite;
}
@keyframes micGlow {
    0%, 100% { text-shadow: 0 0 8px rgba(5,150,105,0.5); transform: translate(-50%, -50%) scale(1); }
    50% { text-shadow: 0 0 16px rgba(5,150,105,1); transform: translate(-50%, -50%) scale(1.08); }
}
.mlab-anim-podcast .anim-waves {
    position: absolute;
    bottom: 8px; left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 3px;
    align-items: flex-end;
    height: 24px;
}
.mlab-anim-podcast .anim-wave-bar {
    width: 3px;
    height: 8px;
    background: #059669;
    border-radius: 2px;
    animation: waveBar 0.8s ease-in-out infinite;
}
@keyframes waveBar {
    0%, 100% { height: 4px; background: #059669; }
    50% { height: 24px; background: #10b981; }
}

/* --- Stop Motion: Frame-by-frame grid --- */
.mlab-anim-stopmotion .anim-frames {
    position: absolute;
    inset: 8px;
    display: flex;
    gap: 3px;
    align-items: center;
    justify-content: center;
}
.mlab-anim-stopmotion .anim-frame {
    width: 22px; height: 28px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    animation: frameHighlight 1.5s ease-in-out infinite;
}
@keyframes frameHighlight {
    0%, 100% { border-color: rgba(255,255,255,0.15); }
    50% { border-color: #7c3aed; box-shadow: 0 0 6px rgba(124,58,237,0.6); }
}
.mlab-anim-stopmotion .anim-frame-figure {
    position: absolute;
    bottom: 2px; left: 50%;
    transform: translateX(-50%);
    width: 8px; height: 12px;
    background: rgba(255,255,255,0.6);
    border-radius: 4px 4px 2px 2px;
    animation: figureMove 1.5s ease-in-out infinite;
}
@keyframes figureMove {
    0% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-4px); }
    100% { transform: translateX(-50%) translateY(0); }
}
.mlab-anim-stopmotion .anim-frame-counter {
    position: absolute;
    top: 4px; right: 6px;
    font-size: 7px;
    color: rgba(255,255,255,0.5);
    font-family: monospace;
}

/* --- Live Stream: Scene switcher + signal --- */
.mlab-anim-livestream .anim-stream-screen {
    position: absolute;
    top: 8px; left: 8px; right: 8px;
    height: 40px;
    background: rgba(0,0,0,0.5);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.15);
}
.mlab-anim-livestream .anim-stream-scene {
    position: absolute;
    inset: 0;
    opacity: 0;
    animation: sceneSwitch 4s ease-in-out infinite;
}
.mlab-anim-livestream .anim-scene1 {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    animation-delay: 0s;
}
.mlab-anim-livestream .anim-scene2 {
    background: linear-gradient(135deg, #1e293b, #2563eb);
    animation-delay: 2s;
}
@keyframes sceneSwitch {
    0%, 45% { opacity: 0; }
    50%, 95% { opacity: 1; }
    100% { opacity: 0; }
}
.mlab-anim-livestream .anim-signal-pulse {
    position: absolute;
    bottom: 8px; left: 8px;
    color: rgba(255,255,255,0.6);
    font-size: 12px;
    animation: signalPulse 1s ease-in-out infinite;
}
@keyframes signalPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}
.mlab-anim-livestream .anim-stream-dot {
    position: absolute;
    bottom: 10px; left: 24px;
    width: 6px; height: 6px;
    background: #ef4444;
    border-radius: 50%;
    animation: streamDot 1s ease-in-out infinite;
}
@keyframes streamDot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* --- Color Grading: Before/After split + Color Wheel --- */
.mlab-anim-colorgrade .anim-color-split {
    position: absolute;
    top: 8px; left: 8px;
    width: 50px; height: 30px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.15);
}
.mlab-anim-colorgrade .anim-color-before {
    position: absolute;
    left: 0; top: 0;
    width: 50%; height: 100%;
    background: #6b7280;
    filter: grayscale(0.8) brightness(0.7);
}
.mlab-anim-colorgrade .anim-color-after {
    position: absolute;
    right: 0; top: 0;
    width: 50%; height: 100%;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    filter: saturate(1.5) contrast(1.2);
    animation: afterPulse 2s ease-in-out infinite;
}
@keyframes afterPulse {
    0%, 100% { filter: saturate(1.5) contrast(1.2); }
    50% { filter: saturate(2) contrast(1.4); }
}
.mlab-anim-colorgrade .anim-color-divider {
    position: absolute;
    left: 50%; top: 0; bottom: 0;
    width: 2px;
    background: #fff;
    transform: translateX(-50%);
    animation: dividerSlide 3s ease-in-out infinite;
}
@keyframes dividerSlide {
    0%, 100% { left: 50%; }
    50% { left: 30%; }
}
.mlab-anim-colorgrade .anim-color-wheel {
    position: absolute;
    bottom: 6px; right: 6px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #3b82f6, #8b5cf6, #ec4899, #ef4444);
    animation: wheelSpin 4s linear infinite;
    border: 1px solid rgba(255,255,255,0.3);
}
@keyframes wheelSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Make sure banner content is above animation */
.mlab-topic-banner-icon, .mlab-topic-banner-domain, .mlab-topic-banner-progress,
.mlab-lab-cover-content, .mlab-lab-cover-progress {
    position: relative;
    z-index: 1;
}

/* === STEP ANIMATION SVG === */
.mlab-step-anim {
    margin: 16px 0 20px;
    border-radius: 12px;
    overflow: hidden;
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.15);
}
.step-svg {
    display: block;
    width: 100%;
    max-width: 600px;
    height: auto;
    margin: 0 auto;
}
.step-svg text { user-select: none; }
.step-svg .svg-bulb-glow {
    animation: svgBulbPulse 2s ease-in-out infinite;
    transform-origin: center;
}
@keyframes svgBulbPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* === CAPCUT STEP ANIMS === */
.svg-cc-book { animation: svgFloat 3s ease-in-out infinite; transform-origin: center; }
.svg-cc-tool1, .svg-cc-tool2, .svg-cc-tool3, .svg-cc-tool4 { animation: svgFadeIn 0.5s ease both; }
.svg-cc-tool1 { animation-delay: 0.1s; }
.svg-cc-tool2 { animation-delay: 0.3s; }
.svg-cc-tool3 { animation-delay: 0.5s; }
.svg-cc-tool4 { animation-delay: 0.7s; }
.svg-cc-play { animation: svgPulse 1.5s ease-in-out infinite; transform-origin: center; }
.svg-cc-timeline { animation: svgSlide 3s linear infinite; }
.svg-cc-clip1 { animation: svgClipIn 0.6s ease both; }
.svg-cc-clip2 { animation: svgClipIn 0.6s ease 0.2s both; }
.svg-cc-clip3 { animation: svgClipIn 0.6s ease 0.4s both; }
.svg-cc-clip4 { animation: svgClipIn 0.6s ease 0.6s both; }
.svg-cc-cursor { animation: svgMove 2s ease-in-out infinite; }
.svg-cc-q1, .svg-cc-q3 { animation: svgWiggle 2s ease-in-out infinite; }
.svg-cc-q2, .svg-cc-q4 { animation: svgPop 0.5s ease 0.3s both; }
.svg-cc-export { animation: svgPulse 1.5s ease-in-out infinite; }
.svg-cc-rub1, .svg-cc-rub2, .svg-cc-rub3, .svg-cc-rub4 { animation: svgFadeIn 0.5s ease both; }
.svg-cc-rub1 { animation-delay: 0.2s; }
.svg-cc-rub2 { animation-delay: 0.4s; }
.svg-cc-rub3 { animation-delay: 0.6s; }
.svg-cc-rub4 { animation-delay: 0.8s; }

/* === NEWS BROADCAST STEP ANIMS === */
.svg-role-1, .svg-role-2, .svg-role-3, .svg-role-4 { animation: svgFadeIn 0.5s ease both; }
.svg-role-1 { animation-delay: 0.1s; }
.svg-role-2 { animation-delay: 0.25s; }
.svg-role-3 { animation-delay: 0.4s; }
.svg-role-4 { animation-delay: 0.55s; }
.svg-news-seg1, .svg-news-seg2, .svg-news-seg3, .svg-news-seg4 { animation: svgGrow 0.6s ease both; transform-origin: left center; }
.svg-news-seg1 { animation-delay: 0.7s; }
.svg-news-seg2 { animation-delay: 0.85s; }
.svg-news-seg3 { animation-delay: 1s; }
.svg-news-seg4 { animation-delay: 1.15s; }
.svg-news-anchor-head { animation: svgPulse 2s ease-in-out infinite; transform-origin: center; }
.svg-news-anchor-body { animation: svgPulse 2s ease-in-out infinite; transform-origin: center; }
.svg-news-live { animation: svgBlink 1.5s ease-in-out infinite; }
.svg-news-progress { animation: svgGrow 4s linear infinite; transform-origin: left center; }
.svg-script-line1, .svg-script-line2, .svg-script-line3, .svg-script-line4, .svg-script-line5 { animation: svgGrow 0.5s ease both; transform-origin: left center; }
.svg-script-line1 { animation-delay: 0.2s; }
.svg-script-line2 { animation-delay: 0.4s; }
.svg-script-line3 { animation-delay: 0.6s; }
.svg-script-line4 { animation-delay: 0.8s; }
.svg-script-line5 { animation-delay: 1s; }
.svg-pen { animation: svgWrite 3s ease-in-out infinite; }
.svg-nws-quiz1, .svg-nws-quiz3 { animation: svgWiggle 2s ease-in-out infinite; }
.svg-nws-quiz2, .svg-nws-quiz4 { animation: svgPop 0.5s ease 0.3s both; }
.svg-tp-line1, .svg-tp-line2, .svg-tp-line3, .svg-tp-line4, .svg-tp-line5 { animation: svgScroll 3s linear infinite; }
.svg-studio-btn1 { animation: svgBlink 1.5s ease-in-out infinite; }
.svg-cam-rec { animation: svgBlink 1s ease-in-out infinite; }
.svg-cam-progress { animation: svgGrow 5s linear infinite; transform-origin: left center; }
.svg-edit-clip1, .svg-edit-clip2, .svg-edit-clip3, .svg-edit-clip4 { animation: svgClipIn 0.5s ease both; }
.svg-edit-clip1 { animation-delay: 0.1s; }
.svg-edit-clip2 { animation-delay: 0.25s; }
.svg-edit-clip3 { animation-delay: 0.4s; }
.svg-edit-clip4 { animation-delay: 0.55s; }
.svg-edit-export { animation: svgPulse 1.5s ease-in-out infinite; }
.svg-nws-rub1, .svg-nws-rub2, .svg-nws-rub3, .svg-nws-rub4 { animation: svgFadeIn 0.5s ease both; }
.svg-nws-rub1 { animation-delay: 0.2s; }
.svg-nws-rub2 { animation-delay: 0.4s; }
.svg-nws-rub3 { animation-delay: 0.6s; }
.svg-nws-rub4 { animation-delay: 0.8s; }
.svg-nws-bulb { animation: svgFloat 3s ease-in-out infinite; }
.svg-nws-thought1, .svg-nws-thought2 { animation: svgPop 0.5s ease both; }
.svg-nws-thought1 { animation-delay: 0.2s; }
.svg-nws-thought2 { animation-delay: 0.4s; }

/* === PODCAST STEP ANIMS === */
.svg-pod-f1, .svg-pod-f2, .svg-pod-f3, .svg-pod-f4 { animation: svgFadeIn 0.5s ease both; }
.svg-pod-f1 { animation-delay: 0.1s; }
.svg-pod-f2 { animation-delay: 0.25s; }
.svg-pod-f3 { animation-delay: 0.4s; }
.svg-pod-f4 { animation-delay: 0.55s; }
.svg-pod-s1, .svg-pod-s2, .svg-pod-s3, .svg-pod-s4, .svg-pod-s5 { animation: svgGrow 0.5s ease both; transform-origin: left center; }
.svg-pod-s1 { animation-delay: 0.7s; }
.svg-pod-s2 { animation-delay: 0.85s; }
.svg-pod-s3 { animation-delay: 1s; }
.svg-pod-s4 { animation-delay: 1.15s; }
.svg-pod-s5 { animation-delay: 1.3s; }
.svg-pod-waves rect { animation: svgBarWave 1s ease-in-out infinite; }
.svg-pw1 { animation-delay: 0s; }
.svg-pw2 { animation-delay: 0.1s; }
.svg-pw3 { animation-delay: 0.2s; }
.svg-pw4 { animation-delay: 0.3s; }
.svg-pw5 { animation-delay: 0.4s; }
.svg-pw6 { animation-delay: 0.5s; }
.svg-pw7 { animation-delay: 0.6s; }
.svg-pw8 { animation-delay: 0.7s; }
.svg-pw9 { animation-delay: 0.8s; }
.svg-pw10 { animation-delay: 0.9s; }
.svg-pod-mic-icon { animation: svgPulse 2s ease-in-out infinite; transform-origin: center; }
.svg-pod-prog { animation: svgGrow 4s linear infinite; transform-origin: left center; }
.svg-pod-rec { animation: svgPulse 1.5s ease-in-out infinite; }
.svg-pod-rec-dot { animation: svgBlink 1s ease-in-out infinite; }
.svg-pod-step1, .svg-pod-step2, .svg-pod-step3 { animation: svgFadeIn 0.5s ease both; }
.svg-pod-step1 { animation-delay: 0.1s; }
.svg-pod-step2 { animation-delay: 0.3s; }
.svg-pod-step3 { animation-delay: 0.5s; }
.svg-pod-setup-mic { animation: svgPulse 2s ease-in-out infinite; transform-origin: center; }
.svg-pod-setup-wave rect { animation: svgBarWave 1s ease-in-out infinite; }
.svg-pod-q1, .svg-pod-q3 { animation: svgWiggle 2s ease-in-out infinite; }
.svg-pod-q2, .svg-pod-q4 { animation: svgPop 0.5s ease 0.3s both; }
.svg-pod-sim-mic { animation: svgPulse 2s ease-in-out infinite; transform-origin: center; }
.svg-pod-sim-track1 rect { animation: svgBarWave 0.8s ease-in-out infinite; }
.svg-pod-sim-prog { animation: svgGrow 5s linear infinite; transform-origin: left center; }
.svg-pod-sim-rec { animation: svgBlink 1.5s ease-in-out infinite; }
.svg-pod-sim-dot { animation: svgBlink 1s ease-in-out infinite; }
.svg-pod-sim-exp { animation: svgPulse 1.5s ease-in-out infinite; }
.svg-pod-prac-mic { animation: svgPulse 2s ease-in-out infinite; transform-origin: center; }
.svg-pod-prac-waves rect { animation: svgBarWave 0.8s ease-in-out infinite; }
.svg-ppw1 { animation-delay: 0s; } .svg-ppw2 { animation-delay: 0.08s; }
.svg-ppw3 { animation-delay: 0.16s; } .svg-ppw4 { animation-delay: 0.24s; }
.svg-ppw5 { animation-delay: 0.32s; } .svg-ppw6 { animation-delay: 0.4s; }
.svg-ppw7 { animation-delay: 0.48s; } .svg-ppw8 { animation-delay: 0.56s; }
.svg-ppw9 { animation-delay: 0.64s; } .svg-ppw10 { animation-delay: 0.72s; }
.svg-pod-prac-rec { animation: svgBlink 1.5s ease-in-out infinite; }
.svg-pod-prac-dot { animation: svgBlink 1s ease-in-out infinite; }
.svg-pod-cre-wave rect { animation: svgBarWave 0.6s ease-in-out infinite; }
.svg-pod-cre-intro, .svg-pod-cre-outro { animation: svgClipIn 0.5s ease both; }
.svg-pod-cre-prog { animation: svgGrow 4s linear infinite; transform-origin: left center; }
.svg-pod-cre-export { animation: svgPulse 1.5s ease-in-out infinite; }
.svg-pod-rub1, .svg-pod-rub2, .svg-pod-rub3, .svg-pod-rub4 { animation: svgFadeIn 0.5s ease both; }
.svg-pod-rub1 { animation-delay: 0.2s; }
.svg-pod-rub2 { animation-delay: 0.4s; }
.svg-pod-rub3 { animation-delay: 0.6s; }
.svg-pod-rub4 { animation-delay: 0.8s; }
.svg-pod-bulb { animation: svgFloat 3s ease-in-out infinite; }
.svg-pod-thought1, .svg-pod-thought2 { animation: svgPop 0.5s ease both; }
.svg-pod-thought1 { animation-delay: 0.2s; }
.svg-pod-thought2 { animation-delay: 0.4s; }

/* === STOP MOTION STEP ANIMS === */
.svg-sm-fr1, .svg-sm-fr2, .svg-sm-fr3, .svg-sm-fr4, .svg-sm-fr5 { animation: svgFadeIn 0.5s ease both; }
.svg-sm-fr1 { animation-delay: 0.1s; }
.svg-sm-fr2 { animation-delay: 0.25s; }
.svg-sm-fr3 { animation-delay: 0.4s; }
.svg-sm-fr4 { animation-delay: 0.55s; }
.svg-sm-fr5 { animation-delay: 0.7s; }
.svg-sm-b1, .svg-sm-b2, .svg-sm-b3, .svg-sm-b4, .svg-sm-b5 { animation: svgBounce 1.5s ease-in-out infinite; }
.svg-sm-b1 { animation-delay: 0s; }
.svg-sm-b2 { animation-delay: 0.15s; }
.svg-sm-b3 { animation-delay: 0.3s; }
.svg-sm-b4 { animation-delay: 0.45s; }
.svg-sm-b5 { animation-delay: 0.6s; }
.svg-sm-see-ball { animation: svgBounce 2s ease-in-out infinite; }
.svg-sm-see-prog { animation: svgGrow 4s linear infinite; transform-origin: left center; }
.svg-sm-see-play { animation: svgPulse 1.5s ease-in-out infinite; transform-origin: center; }
.svg-sm-step1, .svg-sm-step2, .svg-sm-step3, .svg-sm-step4 { animation: svgFadeIn 0.5s ease both; }
.svg-sm-step1 { animation-delay: 0.1s; }
.svg-sm-step2 { animation-delay: 0.3s; }
.svg-sm-step3 { animation-delay: 0.5s; }
.svg-sm-step4 { animation-delay: 0.7s; }
.svg-sm-sb1, .svg-sm-sb2, .svg-sm-sb3, .svg-sm-sb4 { animation: svgPop 0.4s ease both; }
.svg-sm-sb1 { animation-delay: 0.3s; }
.svg-sm-sb2 { animation-delay: 0.45s; }
.svg-sm-sb3 { animation-delay: 0.6s; }
.svg-sm-sb4 { animation-delay: 0.75s; }
.svg-sm-q1, .svg-sm-q3 { animation: svgWiggle 2s ease-in-out infinite; }
.svg-sm-q2, .svg-sm-q4 { animation: svgPop 0.5s ease 0.3s both; }
.svg-sm-sim-obj { animation: svgBounce 2s ease-in-out infinite; }
.svg-sm-sim-th1, .svg-sm-sim-th2, .svg-sm-sim-th3, .svg-sm-sim-th4 { animation: svgPop 0.4s ease both; }
.svg-sm-sim-th1 { animation-delay: 0.1s; }
.svg-sm-sim-th2 { animation-delay: 0.25s; }
.svg-sm-sim-th3 { animation-delay: 0.4s; }
.svg-sm-sim-th4 { animation-delay: 0.55s; }
.svg-sm-sim-capture { animation: svgPulse 1.5s ease-in-out infinite; }
.svg-sm-sim-play { animation: svgPulse 1.5s ease-in-out infinite; }
.svg-sm-prac-obj { animation: svgBounce 2s ease-in-out infinite; }
.svg-sm-prac-prog { animation: svgGrow 5s linear infinite; transform-origin: left center; }
.svg-sm-prac-snap { animation: svgPulse 1s ease-in-out infinite; }
.svg-sm-prac-dot { animation: svgBlink 0.8s ease-in-out infinite; }
.svg-sm-cre-fr1, .svg-sm-cre-fr2, .svg-sm-cre-fr3, .svg-sm-cre-fr4, .svg-sm-cre-fr5,
.svg-sm-cre-fr6, .svg-sm-cre-fr7, .svg-sm-cre-fr8, .svg-sm-cre-fr9, .svg-sm-cre-fr10 { animation: svgPop 0.3s ease both; }
.svg-sm-cre-fr1 { animation-delay: 0.05s; } .svg-sm-cre-fr2 { animation-delay: 0.1s; }
.svg-sm-cre-fr3 { animation-delay: 0.15s; } .svg-sm-cre-fr4 { animation-delay: 0.2s; }
.svg-sm-cre-fr5 { animation-delay: 0.25s; } .svg-sm-cre-fr6 { animation-delay: 0.3s; }
.svg-sm-cre-fr7 { animation-delay: 0.35s; } .svg-sm-cre-fr8 { animation-delay: 0.4s; }
.svg-sm-cre-fr9 { animation-delay: 0.45s; } .svg-sm-cre-fr10 { animation-delay: 0.5s; }
.svg-sm-cre-prog { animation: svgGrow 4s linear infinite; transform-origin: left center; }
.svg-sm-cre-export { animation: svgPulse 1.5s ease-in-out infinite; }
.svg-sm-rub1, .svg-sm-rub2, .svg-sm-rub3, .svg-sm-rub4 { animation: svgFadeIn 0.5s ease both; }
.svg-sm-rub1 { animation-delay: 0.2s; }
.svg-sm-rub2 { animation-delay: 0.4s; }
.svg-sm-rub3 { animation-delay: 0.6s; }
.svg-sm-rub4 { animation-delay: 0.8s; }
.svg-sm-bulb { animation: svgFloat 3s ease-in-out infinite; }
.svg-sm-thought1, .svg-sm-thought2 { animation: svgPop 0.5s ease both; }
.svg-sm-thought1 { animation-delay: 0.2s; }
.svg-sm-thought2 { animation-delay: 0.4s; }

/* === LIVE STREAMING STEP ANIMS === */
.svg-ls-eq1, .svg-ls-eq2, .svg-ls-eq3, .svg-ls-eq4 { animation: svgFadeIn 0.5s ease both; }
.svg-ls-eq1 { animation-delay: 0.1s; }
.svg-ls-eq2 { animation-delay: 0.25s; }
.svg-ls-eq3 { animation-delay: 0.4s; }
.svg-ls-eq4 { animation-delay: 0.55s; }
.svg-ls-pipe rect { animation: svgGrow 0.5s ease both; transform-origin: left center; }
.svg-ls-p1 { animation-delay: 0.7s; }
.svg-ls-p2 { animation-delay: 0.85s; }
.svg-ls-p3 { animation-delay: 1s; }
.svg-ls-p4 { animation-delay: 1.15s; }
.svg-ls-see-streamer { animation: svgPulse 2s ease-in-out infinite; transform-origin: center; }
.svg-ls-see-live { animation: svgBlink 1s ease-in-out infinite; }
.svg-ls-see-prog { animation: svgGrow 4s linear infinite; transform-origin: left center; }
.svg-ls-see-chat { animation: svgSlideUp 3s ease-in-out infinite; }
.svg-ls-step1, .svg-ls-step2, .svg-ls-step3, .svg-ls-step4 { animation: svgFadeIn 0.5s ease both; }
.svg-ls-step1 { animation-delay: 0.1s; }
.svg-ls-step2 { animation-delay: 0.3s; }
.svg-ls-step3 { animation-delay: 0.5s; }
.svg-ls-step4 { animation-delay: 0.7s; }
.svg-ls-obs-cam { animation: svgPulse 2s ease-in-out infinite; transform-origin: center; }
.svg-ls-obs-bars rect { animation: svgBarWave 0.8s ease-in-out infinite; }
.svg-ls-bar1 { animation-delay: 0s; } .svg-ls-bar2 { animation-delay: 0.08s; }
.svg-ls-bar3 { animation-delay: 0.16s; } .svg-ls-bar4 { animation-delay: 0.24s; }
.svg-ls-bar5 { animation-delay: 0.32s; } .svg-ls-bar6 { animation-delay: 0.4s; }
.svg-ls-bar7 { animation-delay: 0.48s; } .svg-ls-bar8 { animation-delay: 0.56s; }
.svg-ls-bar9 { animation-delay: 0.64s; } .svg-ls-bar10 { animation-delay: 0.72s; }
.svg-ls-obs-start { animation: svgPulse 1.5s ease-in-out infinite; }
.svg-ls-q1, .svg-ls-q3 { animation: svgWiggle 2s ease-in-out infinite; }
.svg-ls-q2, .svg-ls-q4 { animation: svgPop 0.5s ease 0.3s both; }
.svg-ls-sim-streamer { animation: svgPulse 2s ease-in-out infinite; transform-origin: center; }
.svg-ls-sim-live { animation: svgBlink 1s ease-in-out infinite; }
.svg-ls-sim-chat1, .svg-ls-sim-chat2, .svg-ls-sim-chat3, .svg-ls-sim-chat4 { animation: svgSlideUp 0.5s ease both; }
.svg-ls-sim-chat1 { animation-delay: 0.5s; }
.svg-ls-sim-chat2 { animation-delay: 1s; }
.svg-ls-sim-chat3 { animation-delay: 1.5s; }
.svg-ls-sim-chat4 { animation-delay: 2s; }
.svg-ls-sim-start { animation: svgBlink 1.5s ease-in-out infinite; }
.svg-ls-sim-end { animation: svgPulse 1.5s ease-in-out infinite; }
.svg-ls-prac-streamer { animation: svgPulse 2s ease-in-out infinite; transform-origin: center; }
.svg-ls-prac-live { animation: svgBlink 1s ease-in-out infinite; }
.svg-ls-prac-prog { animation: svgGrow 5s linear infinite; transform-origin: left center; }
.svg-ls-prac-end { animation: svgPulse 1.5s ease-in-out infinite; }
.svg-ls-cre-cam { animation: svgPulse 2s ease-in-out infinite; transform-origin: center; }
.svg-ls-cre-sc1 { animation: svgPulse 1.5s ease-in-out infinite; }
.svg-ls-cre-prog { animation: svgGrow 4s linear infinite; transform-origin: left center; }
.svg-ls-rub1, .svg-ls-rub2, .svg-ls-rub3, .svg-ls-rub4 { animation: svgFadeIn 0.5s ease both; }
.svg-ls-rub1 { animation-delay: 0.2s; }
.svg-ls-rub2 { animation-delay: 0.4s; }
.svg-ls-rub3 { animation-delay: 0.6s; }
.svg-ls-rub4 { animation-delay: 0.8s; }
.svg-ls-bulb { animation: svgFloat 3s ease-in-out infinite; }
.svg-ls-thought1, .svg-ls-thought2 { animation: svgPop 0.5s ease both; }
.svg-ls-thought1 { animation-delay: 0.2s; }
.svg-ls-thought2 { animation-delay: 0.4s; }

/* === COLOR GRADING STEP ANIMS === */
.svg-cg-before { animation: svgFadeIn 0.5s ease both; }
.svg-cg-after { animation: svgFadeIn 0.5s ease 0.3s both; }
.svg-cg-see-grad { animation: svgHueShift 4s ease-in-out infinite; }
.svg-cg-see-prog { animation: svgGrow 4s linear infinite; transform-origin: left center; }
.svg-cg-step1, .svg-cg-step2, .svg-cg-step3, .svg-cg-step4 { animation: svgFadeIn 0.5s ease both; }
.svg-cg-step1 { animation-delay: 0.1s; }
.svg-cg-step2 { animation-delay: 0.3s; }
.svg-cg-step3 { animation-delay: 0.5s; }
.svg-cg-step4 { animation-delay: 0.7s; }
.svg-cg-wheel1, .svg-cg-wheel2, .svg-cg-wheel3 { animation: svgFadeIn 0.5s ease both; }
.svg-cg-wheel1 { animation-delay: 0.3s; }
.svg-cg-wheel2 { animation-delay: 0.45s; }
.svg-cg-wheel3 { animation-delay: 0.6s; }
.svg-cg-dot1 { animation: svgOrbit 3s linear infinite; transform-origin: 220px 60px; }
.svg-cg-dot2 { animation: svgOrbit 3s linear 0.5s infinite; transform-origin: 280px 60px; }
.svg-cg-dot3 { animation: svgOrbit 3s linear 1s infinite; transform-origin: 340px 60px; }
.svg-cg-lut-prog { animation: svgGrow 3s linear infinite; transform-origin: left center; }
.svg-cg-q1, .svg-cg-q3 { animation: svgWiggle 2s ease-in-out infinite; }
.svg-cg-q2, .svg-cg-q4 { animation: svgPop 0.5s ease 0.3s both; }
.svg-cg-sim-before { animation: svgFadeIn 0.5s ease both; }
.svg-cg-sim-after { animation: svgFadeIn 0.5s ease 0.3s both; }
.svg-cg-sim-sl1, .svg-cg-sim-sl2, .svg-cg-sim-sl3, .svg-cg-sim-sl4 { animation: svgFadeIn 0.5s ease both; }
.svg-cg-sl1-dot { animation: svgSlide 2s ease-in-out infinite; }
.svg-cg-sl2-dot { animation: svgSlide 2s ease-in-out 0.3s infinite; }
.svg-cg-sl3-dot { animation: svgSlide 2s ease-in-out 0.6s infinite; }
.svg-cg-sl4-dot { animation: svgSlide 2s ease-in-out 0.9s infinite; }
.svg-cg-prac-grad { animation: svgHueShift 3s ease-in-out infinite; }
.svg-cg-prac-dot1 { animation: svgSlide 2s ease-in-out infinite; }
.svg-cg-prac-apply { animation: svgPulse 1.5s ease-in-out infinite; }
.svg-cg-cre-final { animation: svgHueShift 4s ease-in-out infinite; }
.svg-cg-cre-lut1 { animation: svgPulse 1.5s ease-in-out infinite; }
.svg-cg-cre-export { animation: svgPulse 1.5s ease-in-out infinite; }
.svg-cg-rub1, .svg-cg-rub2, .svg-cg-rub3, .svg-cg-rub4 { animation: svgFadeIn 0.5s ease both; }
.svg-cg-rub1 { animation-delay: 0.2s; }
.svg-cg-rub2 { animation-delay: 0.4s; }
.svg-cg-rub3 { animation-delay: 0.6s; }
.svg-cg-rub4 { animation-delay: 0.8s; }
.svg-cg-bulb { animation: svgFloat 3s ease-in-out infinite; }
.svg-cg-thought1, .svg-cg-thought2 { animation: svgPop 0.5s ease both; }
.svg-cg-thought1 { animation-delay: 0.2s; }
.svg-cg-thought2 { animation-delay: 0.4s; }

/* === STEP ANIM KEYFRAMES === */
@keyframes svgFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
@keyframes svgFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes svgPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
@keyframes svgBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
@keyframes svgBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
@keyframes svgGrow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}
@keyframes svgPop {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes svgWiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-2deg); }
    75% { transform: rotate(2deg); }
}
@keyframes svgSlide {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(10px); }
}
@keyframes svgSlideUp {
    0% { transform: translateY(8px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
@keyframes svgScroll {
    0% { opacity: 0.3; }
    50% { opacity: 1; }
    100% { opacity: 0.3; }
}
@keyframes svgClipIn {
    0% { transform: scaleX(0); opacity: 0; }
    100% { transform: scaleX(1); opacity: 1; }
}
@keyframes svgMove {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(15px); }
}
@keyframes svgWrite {
    0%, 100% { transform: translateX(0) rotate(-15deg); }
    50% { transform: translateX(20px) rotate(-15deg); }
}
@keyframes svgBarWave {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.5); }
}
@keyframes svgHueShift {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(30deg); }
}
@keyframes svgOrbit {
    from { transform: rotate(0deg) translateX(8px) rotate(0deg); }
    to { transform: rotate(360deg) translateX(8px) rotate(-360deg); }
}

/* ====================================================================
   SIMULATION: Generic loading state
   ==================================================================== */
.mlab-generic-sim {
    padding: 1rem;
}
.mlab-generic-sim-loading {
    text-align: center;
    padding: 2rem;
    color: #64748b;
    font-size: 0.95rem;
}
.mlab-generic-sim-loading i {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    display: block;
}
.mlab-sim-notfound {
    padding: 2rem;
    text-align: center;
    color: #94a3b8;
    font-style: italic;
}

/* ====================================================================
   SIMULATION: Color Grading Studio
   ==================================================================== */
.mlab-cg-sim {
    background: #0f172a;
    border-radius: 12px;
    padding: 1.5rem;
    color: #e2e8f0;
}
.mlab-cg-preview-area {
    margin-bottom: 1.5rem;
    text-align: center;
}
.mlab-cg-image-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 16/9;
    border-radius: 8px;
    overflow: hidden;
    background: #1e293b;
}
.mlab-cg-image {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #00f2fe 100%);
    transition: filter 0.15s ease;
}
.mlab-cg-label-before {
    display: none;
    position: absolute;
    top: 8px;
    left: 8px;
    background: #ef4444;
    color: #fff;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
}
.mlab-cg-toggle {
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    background: #334155;
    color: #e2e8f0;
    border: 1px solid #475569;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.2s;
}
.mlab-cg-toggle:hover {
    background: #475569;
}
.mlab-cg-toggle:active {
    background: #7c3aed;
}
.mlab-cg-controls {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #1e293b;
    border-radius: 8px;
}
.mlab-cg-slider-row {
    display: grid;
    grid-template-columns: 100px 1fr 40px;
    align-items: center;
    gap: 0.75rem;
}
.mlab-cg-slider-row label {
    font-size: 0.85rem;
    color: #94a3b8;
}
.mlab-cg-slider-row input[type="range"] {
    -webkit-appearance: none;
    height: 6px;
    background: #334155;
    border-radius: 3px;
    outline: none;
}
.mlab-cg-slider-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: #7c3aed;
    border-radius: 50%;
    cursor: pointer;
}
.mlab-cg-slider-row span {
    text-align: right;
    font-size: 0.8rem;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}
.mlab-cg-luts {
    margin-bottom: 1rem;
}
.mlab-cg-lut-title {
    font-size: 0.9rem;
    color: #94a3b8;
    margin-bottom: 0.5rem;
}
.mlab-cg-lut-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.5rem;
}
.mlab-cg-lut-btn {
    padding: 0.5rem;
    background: #1e293b;
    color: #e2e8f0;
    border: 1px solid #334155;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
}
.mlab-cg-lut-btn:hover {
    border-color: #7c3aed;
}
.mlab-cg-lut-btn.active {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #fff;
}
.mlab-cg-reset {
    width: 100%;
    padding: 0.6rem;
    background: #334155;
    color: #e2e8f0;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
}
.mlab-cg-reset:hover {
    background: #475569;
}

/* ====================================================================
   SIMULATION: Live Streaming Dashboard
   ==================================================================== */
.mlab-ls-sim {
    background: #0f172a;
    border-radius: 12px;
    padding: 1.5rem;
    color: #e2e8f0;
    display: grid;
    gap: 1rem;
}
.mlab-ls-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}
.mlab-ls-scene-display {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #7c3aed;
    transition: opacity 0.2s, background 0.3s;
}
.mlab-ls-scene-content {
    text-align: center;
}
.mlab-ls-scene-icon {
    font-size: 3rem;
    color: rgba(255,255,255,0.8);
    margin-bottom: 0.5rem;
}
.mlab-ls-scene-name {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
}
.mlab-ls-live-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ef4444;
    color: #fff;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    animation: lsLivePulse 1.5s ease-in-out infinite;
}
@keyframes lsLivePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.mlab-ls-timer {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}
.mlab-ls-viewers {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.mlab-ls-panel-title {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mlab-ls-scenes-panel {
    background: #1e293b;
    border-radius: 8px;
    padding: 0.75rem;
}
.mlab-ls-scene-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #334155;
    color: #e2e8f0;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
    width: 100%;
    text-align: left;
    transition: all 0.2s;
}
.mlab-ls-scene-btn:hover {
    background: #3e4f68;
}
.mlab-ls-scene-btn.active {
    border-color: #7c3aed;
    background: #4c2a8a;
}
.mlab-ls-audio-panel {
    background: #1e293b;
    border-radius: 8px;
    padding: 0.75rem;
}
.mlab-ls-audio-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.mlab-ls-audio-row span {
    font-size: 0.8rem;
    color: #94a3b8;
    width: 40px;
}
.mlab-ls-audio-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 30px;
    flex: 1;
}
.mlab-ls-audio-bar {
    flex: 1;
    background: #22c55e;
    border-radius: 1px;
    min-height: 2px;
    transition: height 0.1s ease;
}
.mlab-ls-audio-bar.peak {
    background: #ef4444;
}
.mlab-ls-chat-panel {
    background: #1e293b;
    border-radius: 8px;
    padding: 0.75rem;
}
.mlab-ls-chat-messages {
    height: 120px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.mlab-ls-chat-msg {
    font-size: 0.8rem;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    animation: lsChatIn 0.3s ease;
}
@keyframes lsChatIn {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}
.mlab-ls-chat-name {
    color: #7c3aed;
    font-weight: 600;
}
.mlab-ls-chat-text {
    color: #e2e8f0;
}
.mlab-ls-controls {
    text-align: center;
}
.mlab-ls-start-btn {
    padding: 0.75rem 2rem;
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.2s;
}
.mlab-ls-start-btn:hover {
    background: #dc2626;
    transform: scale(1.02);
}
.mlab-ls-start-btn.active {
    background: #334155;
}
.mlab-ls-start-btn.active:hover {
    background: #475569;
}

/* ====================================================================
   SIMULATION: News Broadcasting Studio
   ==================================================================== */
.mlab-news-sim {
    background: #0f172a;
    border-radius: 12px;
    padding: 1.5rem;
    color: #e2e8f0;
    display: grid;
    gap: 1rem;
}
.mlab-news-studio-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%);
    border: 2px solid #1e293b;
}
.mlab-news-anchor-area {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 120px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.mlab-news-anchor-icon {
    font-size: 4rem;
    color: rgba(255,255,255,0.3);
}
.mlab-news-logo {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #fff;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.mlab-news-live-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ef4444;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    animation: newsLivePulse 1.5s ease-in-out infinite;
}
@keyframes newsLivePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.mlab-news-lower-third {
    position: absolute;
    bottom: 20px;
    left: 10px;
    display: flex;
    align-items: stretch;
}
.mlab-news-lower-third.animate-in {
    animation: newsLTSlide 0.5s ease;
}
@keyframes newsLTSlide {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.mlab-news-lt-bar {
    width: 6px;
    background: #ef4444;
    border-radius: 2px;
}
.mlab-news-lt-name {
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 6px 12px;
    font-weight: 700;
    font-size: 0.9rem;
}
.mlab-news-lt-title {
    background: rgba(124,58,237,0.9);
    color: #fff;
    padding: 6px 12px;
    font-size: 0.75rem;
    align-self: center;
}
.mlab-news-tp-section {
    background: #1e293b;
    border-radius: 8px;
    padding: 1rem;
}
.mlab-news-tp-label {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mlab-news-tp-screen {
    height: 150px;
    overflow: hidden;
    background: #000;
    border-radius: 6px;
    margin-bottom: 0.75rem;
    position: relative;
}
.mlab-news-tp-text {
    padding: 1rem;
    color: #fbbf24;
    font-size: 1.3rem;
    line-height: 2;
    text-align: center;
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 10px rgba(251,191,36,0.3);
}
.mlab-news-tp-input {
    width: 100%;
    min-height: 60px;
    background: #0f172a;
    color: #e2e8f0;
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 0.5rem;
    font-size: 0.85rem;
    resize: vertical;
    margin-bottom: 0.75rem;
    font-family: inherit;
}
.mlab-news-tp-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.mlab-news-tp-btn {
    padding: 0.5rem 1rem;
    background: #334155;
    color: #e2e8f0;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.2s;
}
.mlab-news-tp-btn:hover {
    background: #475569;
}
.mlab-news-tp-btn.start {
    background: #22c55e;
    color: #fff;
}
.mlab-news-tp-btn.start:hover {
    background: #16a34a;
}
.mlab-news-tp-btn.start.active {
    background: #ef4444;
}
.mlab-news-tp-btn.start.active:hover {
    background: #dc2626;
}
.mlab-news-tp-speed {
    font-size: 0.8rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.mlab-news-tp-speed input[type="range"] {
    width: 80px;
    -webkit-appearance: none;
    height: 4px;
    background: #334155;
    border-radius: 2px;
}
.mlab-news-tp-speed input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: #7c3aed;
    border-radius: 50%;
    cursor: pointer;
}
.mlab-news-lt-section {
    background: #1e293b;
    border-radius: 8px;
    padding: 1rem;
}
.mlab-news-lt-label {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mlab-news-lt-input {
    width: 100%;
    padding: 0.5rem;
    background: #0f172a;
    color: #e2e8f0;
    border: 1px solid #334155;
    border-radius: 6px;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    font-family: inherit;
}
.mlab-news-lt-input:focus {
    outline: none;
    border-color: #7c3aed;
}
.mlab-news-lt-btn {
    padding: 0.5rem 1rem;
    background: #7c3aed;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    margin-right: 0.5rem;
    transition: background 0.2s;
}
.mlab-news-lt-btn:hover {
    background: #6d28d9;
}
.mlab-news-lt-btn.hide {
    background: #334155;
}
.mlab-news-lt-btn.hide:hover {
    background: #475569;
}

/* ====================================================================
   SIMULATION: Stop Motion Studio
   ==================================================================== */
.mlab-sm-sim {
    background: #0f172a;
    border-radius: 12px;
    padding: 1.5rem;
    color: #e2e8f0;
    display: grid;
    gap: 1rem;
}
.mlab-sm-stage-area {
    display: grid;
    gap: 0.75rem;
}
.mlab-sm-stage {
    position: relative;
    width: 100%;
    max-width: 400px;
    height: 160px;
    background: linear-gradient(180deg, #87ceeb 0%, #98d8c8 60%, #8fbc8f 100%);
    border-radius: 8px;
    overflow: hidden;
    margin: 0 auto;
    cursor: grab;
    border: 2px solid #334155;
}
.mlab-sm-stage:active {
    cursor: grabbing;
}
.mlab-sm-character {
    position: absolute;
    width: 30px;
    height: 40px;
    background: #ef4444;
    border-radius: 50% 50% 30% 30%;
    transition: left 0.1s, top 0.1s;
    z-index: 2;
}
.mlab-sm-character::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    background: #fecaca;
    border-radius: 50%;
}
.mlab-sm-onion {
    position: absolute;
    width: 30px;
    height: 40px;
    background: #ef4444;
    border-radius: 50% 50% 30% 30%;
    opacity: 0.3;
    z-index: 1;
    pointer-events: none;
}
.mlab-sm-onion::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    background: #fecaca;
    border-radius: 50%;
}
.mlab-sm-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}
.mlab-sm-btn {
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transition: all 0.2s;
}
.mlab-sm-btn.capture {
    background: #7c3aed;
    color: #fff;
}
.mlab-sm-btn.capture:hover {
    background: #6d28d9;
}
.mlab-sm-btn.delete {
    background: #334155;
    color: #e2e8f0;
}
.mlab-sm-btn.delete:hover {
    background: #475569;
}
.mlab-sm-btn.play {
    background: #22c55e;
    color: #fff;
}
.mlab-sm-btn.play:hover {
    background: #16a34a;
}
.mlab-sm-onion-toggle {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: #94a3b8;
    cursor: pointer;
}
.mlab-sm-counter {
    text-align: center;
    font-size: 0.8rem;
    color: #64748b;
}
.mlab-sm-counter span {
    color: #e2e8f0;
    font-weight: 600;
}
.mlab-sm-frames-strip {
    display: flex;
    gap: 0.3rem;
    overflow-x: auto;
    padding: 0.5rem;
    background: #1e293b;
    border-radius: 6px;
    min-height: 60px;
    align-items: center;
}
.mlab-sm-frames-empty {
    color: #64748b;
    font-size: 0.8rem;
    font-style: italic;
    width: 100%;
    text-align: center;
}
.mlab-sm-frame-thumb {
    position: relative;
    width: 50px;
    height: 40px;
    background: linear-gradient(180deg, #87ceeb 0%, #8fbc8f 100%);
    border-radius: 4px;
    flex-shrink: 0;
    border: 1px solid #334155;
}
.mlab-sm-frame-thumb span {
    position: absolute;
    bottom: 1px;
    right: 2px;
    font-size: 0.6rem;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.mlab-sm-frame-dot {
    position: absolute;
    width: 6px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.mlab-sm-move-controls {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: center;
}
.mlab-sm-move-label {
    font-size: 0.8rem;
    color: #94a3b8;
}
.mlab-sm-move-btn {
    width: 36px;
    height: 36px;
    background: #334155;
    color: #e2e8f0;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: background 0.2s;
}
.mlab-sm-move-btn:hover {
    background: #475569;
}
.mlab-sm-move-btn:active {
    background: #7c3aed;
}
.mlab-sm-move-hint {
    font-size: 0.75rem;
    color: #64748b;
    font-style: italic;
}

/* ====================================================================
   SIMULATION: Podcast Studio
   ==================================================================== */
.mlab-pod-sim {
    background: #0f172a;
    border-radius: 12px;
    padding: 1.5rem;
    color: #e2e8f0;
    display: grid;
    gap: 1rem;
}
.mlab-pod-mic-area {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #1e293b;
    border-radius: 8px;
    padding: 1rem;
}
.mlab-pod-mic {
    width: 60px;
    height: 60px;
    background: #334155;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #64748b;
    flex-shrink: 0;
    transition: all 0.2s;
}
.mlab-pod-mic.active {
    background: #ef4444;
    color: #fff;
    animation: podMicPulse 1s ease-in-out infinite;
}
@keyframes podMicPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
    50% { box-shadow: 0 0 0 10px rgba(239,68,68,0); }
}
.mlab-pod-waveform {
    flex: 1;
    height: 60px;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    background: #0f172a;
    border-radius: 6px;
    padding: 0.25rem;
    overflow: hidden;
}
.mlab-pod-wave-bar {
    flex: 1;
    min-width: 3px;
    max-width: 6px;
    background: #22c55e;
    border-radius: 1px;
    min-height: 2px;
}
.mlab-pod-wave-bar.playing {
    background: #7c3aed;
}
.mlab-pod-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.mlab-pod-rec-btn {
    padding: 0.6rem 1.2rem;
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s;
}
.mlab-pod-rec-btn i {
    font-size: 0.7rem;
}
.mlab-pod-rec-btn.recording {
    animation: podRecPulse 1s ease-in-out infinite;
}
@keyframes podRecPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.mlab-pod-stop-btn,
.mlab-pod-play-btn {
    padding: 0.6rem 1rem;
    background: #334155;
    color: #e2e8f0;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transition: background 0.2s;
}
.mlab-pod-stop-btn:hover:not(:disabled),
.mlab-pod-play-btn:hover:not(:disabled) {
    background: #475569;
}
.mlab-pod-stop-btn:disabled,
.mlab-pod-play-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.mlab-pod-timer {
    margin-left: auto;
    font-size: 1.1rem;
    color: #e2e8f0;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.mlab-pod-timeline {
    background: #1e293b;
    border-radius: 8px;
    padding: 0.75rem;
}
.mlab-pod-timeline-label {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mlab-pod-timeline-track {
    height: 40px;
    background: #0f172a;
    border-radius: 4px;
    display: flex;
    align-items: flex-end;
    gap: 1px;
    padding: 0.25rem;
    overflow: hidden;
    margin-bottom: 0.5rem;
}
.mlab-pod-timeline-track.music {
    margin-bottom: 0;
}
.mlab-pod-timeline-empty {
    color: #64748b;
    font-size: 0.75rem;
    font-style: italic;
    width: 100%;
    text-align: center;
    align-self: center;
}
.mlab-pod-tl-bar {
    flex: 1;
    min-width: 2px;
    max-width: 5px;
    background: #22c55e;
    border-radius: 1px;
    min-height: 2px;
}
.mlab-pod-tl-bar.music {
    background: #3b82f6;
}
.mlab-pod-mix-section {
    background: #1e293b;
    border-radius: 8px;
    padding: 0.75rem;
}
.mlab-pod-mix-label {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mlab-pod-mix-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.mlab-pod-mix-row label {
    font-size: 0.8rem;
    color: #94a3b8;
}
.mlab-pod-mix-row input[type="range"] {
    -webkit-appearance: none;
    height: 6px;
    background: #334155;
    border-radius: 3px;
}
.mlab-pod-mix-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: #7c3aed;
    border-radius: 50%;
    cursor: pointer;
}
.mlab-pod-music-btn {
    width: 100%;
    padding: 0.5rem;
    background: #334155;
    color: #e2e8f0;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    margin-top: 0.5rem;
    transition: background 0.2s;
}
.mlab-pod-music-btn:hover {
    background: #475569;
}
.mlab-pod-music-btn.active {
    background: #3b82f6;
}
.mlab-pod-trim-section {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.mlab-pod-trim-label {
    font-size: 0.8rem;
    color: #94a3b8;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mlab-pod-trim-btn {
    padding: 0.5rem 1rem;
    background: #f59e0b;
    color: #000;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.2s;
}
.mlab-pod-trim-btn:hover {
    background: #d97706;
}
.mlab-pod-export-btn {
    padding: 0.5rem 1rem;
    background: #22c55e;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.2s;
}
.mlab-pod-export-btn:hover {
    background: #16a34a;
}

/* ====================================================================
   SIMULATION: Karaoke Lyric Video Maker
   ==================================================================== */
.mlab-karaoke-sim {
    background: #0f172a;
    border-radius: 12px;
    padding: 1.5rem;
    color: #e2e8f0;
    display: grid;
    gap: 1rem;
}
.mlab-karaoke-header {
    text-align: center;
}
.mlab-karaoke-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fbbf24;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.mlab-karaoke-subtitle {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-top: 0.25rem;
}
.mlab-karaoke-stage {
    background: #4c1d95;
    border-radius: 12px;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
    transition: background 0.2s;
}
.mlab-karaoke-lyrics {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.6;
    transition: all 0.2s;
}
.mlab-karaoke-line {
    opacity: 0.5;
    transition: all 0.2s;
}
.mlab-karaoke-line.active {
    opacity: 1;
    color: #fbbf24;
    transform: scale(1.02);
}
.mlab-karaoke-word {
    display: inline-block;
    padding: 0 0.15rem;
    border-radius: 4px;
    transition: all 0.15s ease;
    opacity: 0.6;
}
.mlab-karaoke-word.active {
    opacity: 1;
    color: #fbbf24;
    transform: scale(1.15);
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
}
.mlab-karaoke-ball {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #fbbf24;
    border-radius: 50%;
    margin-left: 0.5rem;
    vertical-align: middle;
    animation: karaokeBounce 0.6s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
}
@keyframes karaokeBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.mlab-karaoke-progress {
    height: 6px;
    background: #1e293b;
    border-radius: 3px;
    overflow: hidden;
}
.mlab-karaoke-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #db2777, #fbbf24);
    transition: width 0.05s linear;
}
.mlab-karaoke-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
}
.mlab-karaoke-song-select {
    padding: 0.5rem;
    background: #1e293b;
    color: #e2e8f0;
    border: 1px solid #334155;
    border-radius: 6px;
    font-size: 0.85rem;
}
.mlab-karaoke-btn {
    padding: 0.5rem 1rem;
    background: #334155;
    color: #e2e8f0;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transition: all 0.2s;
}
.mlab-karaoke-btn:hover:not(:disabled) {
    background: #475569;
}
.mlab-karaoke-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.mlab-karaoke-btn.active {
    background: #ef4444;
}
.mlab-karaoke-btn.sync {
    background: #7c3aed;
}
.mlab-karaoke-btn.sync:hover:not(:disabled) {
    background: #6d28d9;
}
.mlab-karaoke-btn.reset {
    background: #475569;
}
.mlab-karaoke-btn.save {
    background: #22c55e;
    color: #fff;
}
.mlab-karaoke-btn.save:hover:not(:disabled) {
    background: #16a34a;
}
.mlab-karaoke-btn.load {
    background: #3b82f6;
    color: #fff;
}
.mlab-karaoke-btn.load:hover:not(:disabled) {
    background: #2563eb;
}
.mlab-karaoke-editor,
.mlab-karaoke-style-panel,
.mlab-karaoke-timeline,
.mlab-karaoke-help {
    background: #1e293b;
    border-radius: 8px;
    padding: 0.75rem;
}
.mlab-karaoke-editor-title,
.mlab-karaoke-style-title,
.mlab-karaoke-timeline-title,
.mlab-karaoke-help-title {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mlab-karaoke-lyrics-input {
    width: 100%;
    min-height: 80px;
    background: #0f172a;
    color: #e2e8f0;
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 0.5rem;
    font-size: 0.85rem;
    resize: vertical;
    font-family: inherit;
}
.mlab-karaoke-style-row {
    display: grid;
    grid-template-columns: 100px 1fr 40px;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.mlab-karaoke-style-row label {
    font-size: 0.85rem;
    color: #94a3b8;
}
.mlab-karaoke-style-row input[type="color"] {
    width: 100%;
    height: 32px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.mlab-karaoke-style-row input[type="range"] {
    -webkit-appearance: none;
    height: 6px;
    background: #334155;
    border-radius: 3px;
}
.mlab-karaoke-style-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: #7c3aed;
    border-radius: 50%;
    cursor: pointer;
}
.mlab-karaoke-style-row span {
    color: #64748b;
    font-size: 0.8rem;
    text-align: right;
}
.mlab-karaoke-timeline-bars {
    display: flex;
    gap: 0.25rem;
    min-height: 30px;
    align-items: flex-end;
}
.mlab-karaoke-timeline-empty {
    color: #64748b;
    font-size: 0.8rem;
    font-style: italic;
    width: 100%;
    text-align: center;
}
.mlab-karaoke-tl-bar {
    flex: 1;
    min-height: 8px;
    background: #334155;
    border-radius: 3px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 0.2rem;
    color: #64748b;
    font-size: 0.65rem;
    transition: background 0.2s;
}
.mlab-karaoke-tl-bar.synced {
    background: #22c55e;
    color: #fff;
}
.mlab-karaoke-help ol {
    margin: 0;
    padding-left: 1.2rem;
    color: #94a3b8;
    font-size: 0.85rem;
}
.mlab-karaoke-help li {
    margin-bottom: 0.25rem;
}
.mlab-karaoke-upload {
    background: #1e293b;
    border: 1px dashed #7c3aed;
    border-radius: 8px;
    padding: 0.75rem;
}
.mlab-karaoke-upload-title {
    font-size: 0.85rem;
    color: #c084fc;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.mlab-karaoke-file {
    color: #e2e8f0;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    width: 100%;
}
.mlab-karaoke-upload-note {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 0.5rem;
    line-height: 1.4;
}
#karaoke-use-upload-btn {
    background: #7c3aed;
    margin-top: 0.5rem;
}
#karaoke-use-upload-btn:disabled {
    background: #334155;
}

/* ====================================================================
   SIMULATION: 8-Bit Chiptune Composer
   ==================================================================== */
.mlab-chip-sim {
    background: #0f172a;
    border-radius: 12px;
    padding: 1.5rem;
    color: #e2e8f0;
    display: grid;
    gap: 1rem;
}
.mlab-chip-header {
    text-align: center;
}
.mlab-chip-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #22c55e;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.mlab-chip-subtitle {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-top: 0.25rem;
}
.mlab-chip-transport {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}
.mlab-chip-btn {
    padding: 0.5rem 1rem;
    background: #334155;
    color: #e2e8f0;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transition: all 0.2s;
}
.mlab-chip-btn:hover:not(:disabled) {
    background: #475569;
}
.mlab-chip-btn.play {
    background: #22c55e;
    color: #fff;
}
.mlab-chip-btn.play:hover:not(:disabled) {
    background: #16a34a;
}
.mlab-chip-btn.play.active {
    background: #f97316;
}
.mlab-chip-btn.stop {
    background: #ef4444;
    color: #fff;
}
.mlab-chip-btn.stop:hover:not(:disabled) {
    background: #dc2626;
}
.mlab-chip-btn.reset {
    background: #475569;
}
.mlab-chip-settings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    background: #1e293b;
    padding: 0.75rem;
    border-radius: 8px;
}
.mlab-chip-setting {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.mlab-chip-setting label {
    font-size: 0.8rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mlab-chip-setting input[type="range"] {
    width: 100%;
    accent-color: #22c55e;
}
.mlab-chip-setting select {
    padding: 0.4rem;
    background: #0f172a;
    color: #e2e8f0;
    border: 1px solid #334155;
    border-radius: 4px;
}
.mlab-chip-grid-wrap {
    background: #1e293b;
    border-radius: 8px;
    padding: 0.75rem;
    overflow-x: auto;
}
.mlab-chip-grid {
    display: grid;
    gap: 0.35rem;
    min-width: 600px;
}
.mlab-chip-row {
    display: grid;
    grid-template-columns: 45px repeat(16, 1fr);
    gap: 0.2rem;
    align-items: center;
}
.mlab-chip-row-label {
    font-size: 0.7rem;
    color: #94a3b8;
    text-align: right;
    padding-right: 0.3rem;
}
.mlab-chip-cell {
    aspect-ratio: 1;
    background: #334155;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid #334155;
}
.mlab-chip-cell:hover {
    background: #475569;
}
.mlab-chip-cell.beat {
    border-color: #64748b;
}
.mlab-chip-cell.active {
    background: #22c55e;
    border-color: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
}
.mlab-chip-cell.active.mlab-chip-cell.beat {
    background: #4ade80;
}
.mlab-chip-cell.playing {
    outline: 2px solid #fbbf24;
    outline-offset: -2px;
}
.mlab-chip-step-counter {
    text-align: center;
    color: #94a3b8;
    font-size: 0.85rem;
    margin-top: 0.5rem;
}
.mlab-chip-help {
    background: #1e293b;
    border-radius: 8px;
    padding: 0.75rem;
}
.mlab-chip-help-title {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mlab-chip-help ol {
    margin: 0;
    padding-left: 1.2rem;
    color: #94a3b8;
    font-size: 0.85rem;
}
.mlab-chip-help li {
    margin-bottom: 0.25rem;
}

/* ====================================================================
   SIMULATION: Sound Effects Studio
   ==================================================================== */
.mlab-sfx-sim {
    background: #0f172a;
    border-radius: 12px;
    padding: 1.25rem;
    color: #e2e8f0;
    display: grid;
    gap: 1rem;
}
.mlab-sfx-header {
    text-align: center;
}
.mlab-sfx-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #22c55e;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.mlab-sfx-subtitle {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 0.25rem;
}
.mlab-sfx-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    background: #1e293b;
    border-radius: 8px;
    padding: 0.75rem;
}

.mlab-sfx-left {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.mlab-sfx-label {
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.25rem;
}
.mlab-sfx-select {
    padding: 0.4rem;
    background: #0f172a;
    color: #e2e8f0;
    border: 1px solid #334155;
    border-radius: 4px;
}
.mlab-sfx-slider {
    width: 100%;
    accent-color: #22c55e;
}
.mlab-sfx-value {
    font-size: 0.75rem;
    color: #22c55e;
    text-align: right;
    margin-top: -0.25rem;
}
.mlab-sfx-right {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
}
.mlab-sfx-canvas {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    width: 100%;
    max-width: 300px;
    height: auto;
    aspect-ratio: 2 / 1;
}
.mlab-sfx-waveform-label {
    font-size: 0.7rem;
    color: #64748b;
    text-align: center;
}
.mlab-sfx-play-btn {
    background: #22c55e;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.6rem 1.2rem;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.mlab-sfx-play-btn:hover {
    background: #16a34a;
}
.mlab-sfx-saved-title {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 0.5rem;
    text-align: center;
}
.mlab-sfx-saved {
    width: 100%;
    max-height: 120px;
    overflow-y: auto;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 4px;
    padding: 0.4rem;
    font-size: 0.75rem;
}
.mlab-sfx-saved-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3rem 0;
    border-bottom: 1px solid #334155;
    color: #e2e8f0;
}
.mlab-sfx-saved-item button {
    background: #334155;
    color: #22c55e;
    border: none;
    border-radius: 3px;
    padding: 0.2rem 0.4rem;
    cursor: pointer;
    font-size: 0.7rem;
}
.mlab-sfx-save-sound-btn,
.mlab-sfx-clear-btn {
    padding: 0.4rem 0.8rem;
    background: #334155;
    color: #e2e8f0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
}
.mlab-sfx-empty {
    color: #64748b;
    font-size: 0.75rem;
    text-align: center;
    display: block;
}
.mlab-sfx-help {
    background: #1e293b;
    border-radius: 8px;
    padding: 0.75rem;
}
.mlab-sfx-help-title {
    font-size: 0.85rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}
.mlab-sfx-help ol {
    margin: 0;
    padding-left: 1.2rem;
    color: #94a3b8;
    font-size: 0.85rem;
}
.mlab-sfx-help li {
    margin-bottom: 0.25rem;
}

/* ====================================================================
   SIMULATION: Pixel Art Studio
   ==================================================================== */
.mlab-pixel-sim {
    background: #0f172a;
    border-radius: 12px;
    padding: 1.25rem;
    color: #e2e8f0;
    display: grid;
    gap: 1rem;
}
.mlab-pixel-header {
    text-align: center;
}
.mlab-pixel-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #f59e0b;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.mlab-pixel-subtitle {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 0.25rem;
}
.mlab-pixel-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    background: #1e293b;
    border-radius: 8px;
    padding: 0.75rem;
    align-items: center;
    justify-content: center;
}
.mlab-pixel-tools {
    display: flex;
    gap: 0.4rem;
}
.mlab-pixel-tool {
    width: 36px;
    height: 36px;
    background: #334155;
    color: #e2e8f0;
    border: 1px solid #334155;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mlab-pixel-tool.active {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #0f172a;
}
.mlab-pixel-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    max-width: 280px;
}
.mlab-pixel-color {
    width: 22px;
    height: 22px;
    border-radius: 3px;
    cursor: pointer;
    border: 2px solid transparent;
}
.mlab-pixel-color.active {
    border-color: #fff;
}
.mlab-pixel-main {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 1rem;
}

.mlab-pixel-left {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
}
.mlab-pixel-canvas-wrap {
    background: #1e293b;
    padding: 0.75rem;
    border-radius: 8px;
}
.mlab-pixel-canvas {
    display: block;
    width: 320px;
    height: 320px;
    image-rendering: pixelated;
    background: #000;
    cursor: crosshair;
}
.mlab-pixel-frames {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    justify-content: center;
}
.mlab-pixel-frames label {
    color: #94a3b8;
    font-size: 0.8rem;
}
.mlab-pixel-frame-list {
    display: flex;
    gap: 0.3rem;
}
.mlab-pixel-frame {
    background: #334155;
    color: #e2e8f0;
    border: none;
    border-radius: 4px;
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    font-size: 0.75rem;
}
.mlab-pixel-frame.active {
    background: #f59e0b;
    color: #0f172a;
}
.mlab-pixel-right {
    background: #1e293b;
    border-radius: 8px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
}
.mlab-pixel-preview-box {
    text-align: center;
}
.mlab-pixel-preview-title {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 0.3rem;
}
.mlab-pixel-preview {
    width: 128px;
    height: 128px;
    background: #000;
    border-radius: 4px;
    image-rendering: pixelated;
}
.mlab-pixel-controls {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
    color: #94a3b8;
    font-size: 0.8rem;
}
.mlab-pixel-controls input[type="range"] {
    width: 100%;
    accent-color: #f59e0b;
}
.mlab-pixel-btn {
    padding: 0.4rem 0.8rem;
    background: #334155;
    color: #e2e8f0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}
.mlab-pixel-btn.play {
    background: #22c55e;
    color: #fff;
}
.mlab-pixel-btn.stop {
    background: #ef4444;
    color: #fff;
}
.mlab-pixel-btn:hover {
    background: #475569;
}
.mlab-pixel-templates {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    width: 100%;
}
.mlab-pixel-templates label {
    color: #94a3b8;
    font-size: 0.8rem;
}
.mlab-pixel-templates select {
    padding: 0.4rem;
    background: #0f172a;
    color: #e2e8f0;
    border: 1px solid #334155;
    border-radius: 4px;
}
.mlab-pixel-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
}
.mlab-pixel-help {
    background: #1e293b;
    border-radius: 8px;
    padding: 0.75rem;
}
.mlab-pixel-help-title {
    font-size: 0.85rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}
.mlab-pixel-help ol {
    margin: 0;
    padding-left: 1.2rem;
    color: #94a3b8;
    font-size: 0.85rem;
}

/* ====================================================================
   SIMULATION: Visual Novel Maker
   ==================================================================== */
.mlab-vn-sim {
    background: #0f172a;
    border-radius: 12px;
    padding: 1.25rem;
    color: #e2e8f0;
    display: grid;
    gap: 1rem;
}
.mlab-vn-header {
    text-align: center;
}
.mlab-vn-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ec4899;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.mlab-vn-subtitle {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 0.25rem;
}
.mlab-vn-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.mlab-vn-left {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: #1e293b;
    border-radius: 8px;
    padding: 0.75rem;
}
.mlab-vn-label {
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mlab-vn-scene-list {
    max-height: 120px;
    overflow-y: auto;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 4px;
    padding: 0.25rem;
}
.mlab-vn-scene-item {
    padding: 0.4rem;
    font-size: 0.8rem;
    color: #e2e8f0;
    cursor: pointer;
    border-bottom: 1px solid #334155;
}
.mlab-vn-scene-item.active {
    background: #ec4899;
    color: #0f172a;
    border-radius: 3px;
}
.mlab-vn-fields {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.mlab-vn-fields label {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 0.25rem;
}
.mlab-vn-input,
.mlab-vn-select,
.mlab-vn-textarea {
    padding: 0.4rem;
    background: #0f172a;
    color: #e2e8f0;
    border: 1px solid #334155;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.85rem;
    width: 100%;
    box-sizing: border-box;
}
.mlab-vn-textarea {
    resize: vertical;
}
.mlab-vn-choices {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.mlab-vn-choice-row {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}
.mlab-vn-choice-row input {
    flex: 1;
}
.mlab-vn-choice-row select {
    flex: 1;
}
.mlab-vn-btn {
    padding: 0.4rem 0.8rem;
    background: #334155;
    color: #e2e8f0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
}
.mlab-vn-btn:hover {
    background: #475569;
}
.mlab-vn-btn.play {
    background: #22c55e;
    color: #fff;
}
.mlab-vn-btn-small {
    background: #7f1d1d;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.3rem 0.5rem;
    cursor: pointer;
    font-size: 0.75rem;
}
.mlab-vn-empty {
    color: #64748b;
    font-size: 0.75rem;
    display: block;
    padding: 0.3rem 0;
}
.mlab-vn-right {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: #1e293b;
    border-radius: 8px;
    padding: 0.75rem;
}
.mlab-vn-preview-title {
    font-size: 0.85rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}
.mlab-vn-stage {
    position: relative;
    width: 100%;
    height: 240px;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1rem;
    box-sizing: border-box;
    border: 1px solid #334155;
}
.mlab-vn-stage-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #475569;
    z-index: 1;
}
.bg-classroom { background: linear-gradient(135deg, #475569 0%, #94a3b8 100%); }
.bg-forest { background: linear-gradient(135deg, #14532d 0%, #22c55e 100%); }
.bg-city { background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); }
.bg-space { background: linear-gradient(135deg, #0f172a 0%, #6366f1 100%); }
.bg-home { background: linear-gradient(135deg, #78350f 0%, #f59e0b 100%); }
.mlab-vn-character {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 5rem;
    z-index: 2;
}
.mlab-vn-dialogue {
    position: relative;
    z-index: 3;
    background: rgba(15, 23, 42, 0.9);
    padding: 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #e2e8f0;
    min-height: 50px;
}
.mlab-vn-choices-preview {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.5rem;
}
.mlab-vn-choice-btn {
    padding: 0.5rem;
    background: #ec4899;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    text-align: left;
}
.mlab-vn-choice-btn:hover {
    background: #db2777;
}
.mlab-vn-play-controls,
.mlab-vn-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}
.mlab-vn-help {
    background: #1e293b;
    border-radius: 8px;
    padding: 0.75rem;
}
.mlab-vn-help-title {
    font-size: 0.85rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}
.mlab-vn-help ol {
    margin: 0;
    padding-left: 1.2rem;
    color: #94a3b8;
    font-size: 0.85rem;
}

/* --- Lab Access Gate --- */
.mlab-access-gate {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 2rem;
    background: linear-gradient(135deg, #f8fafc 0%, #ede9fe 100%);
}
.mlab-access-card {
    background: #fff;
    border-radius: 16px;
    padding: 2.5rem;
    width: 100%;
    max-width: 460px;
    box-shadow: 0 10px 40px rgba(124, 58, 237, 0.12);
    border: 1px solid #e2e8f0;
    text-align: center;
}
.mlab-access-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, #7c3aed 0%, #c026d3 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.75rem;
    margin: 0 auto 1.25rem;
}
.mlab-access-card h2 {
    margin: 0 0 0.5rem;
    color: #1e293b;
    font-size: 1.5rem;
    font-weight: 800;
}
.mlab-access-card p {
    color: #64748b;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}
.mlab-access-card label {
    display: block;
    text-align: left;
    font-weight: 600;
    font-size: 0.85rem;
    color: #475569;
    margin: 1rem 0 0.35rem;
}
.mlab-access-card input {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
.mlab-access-card input:focus {
    outline: none;
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}
.mlab-access-error {
    background: #fef2f2;
    color: #b91c1c;
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}
.mlab-access-btn {
    width: 100%;
    margin-top: 1.5rem;
    padding: 0.9rem;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #7c3aed 0%, #c026d3 100%);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.mlab-access-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.25);
}

/* --- Student info bar --- */
.mlab-student-info {
    margin-left: auto;
    font-size: 0.9rem;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.mlab-code-pill {
    background: #ede9fe;
    color: #6d28d9;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.8rem;
}

/* --- Link upload block --- */
.mlab-link-upload {
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 1.25rem;
    margin: 1rem 0;
}
.mlab-link-label {
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}
.mlab-link-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
    box-sizing: border-box;
}
.mlab-link-input:focus {
    outline: none;
    border-color: #7c3aed;
}
.mlab-link-btn {
    padding: 0.6rem 1rem;
    border: none;
    border-radius: 8px;
    background: #4f46e5;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s;
}
.mlab-link-btn:hover {
    background: #4338ca;
}
.mlab-link-success {
    margin-top: 0.75rem;
    color: #047857;
    font-size: 0.9rem;
    font-weight: 600;
}
.mlab-link-error {
    margin-top: 0.75rem;
    color: #b91c1c;
    font-size: 0.9rem;
    font-weight: 600;
}
.mlab-link-official {
    margin-top: 0.75rem;
    background: #eff6ff;
    color: #1e40af;
    padding: 0.6rem 0.85rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
}



/* --- Teacher Lab Dashboard --- */
.mlab-teacher-header {
    background: linear-gradient(135deg, #f8fafc 0%, #ede9fe 100%);
    padding: 2rem;
    border-bottom: 1px solid #e2e8f0;
}
.mlab-teacher-header h2 {
    margin: 0 0 0.5rem;
    color: #1e293b;
    font-size: 1.5rem;
    font-weight: 800;
}
.mlab-teacher-header p {
    margin: 0;
    color: #64748b;
}
.mlab-teacher-tabs {
    display: flex;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
}
.mlab-teacher-tab {
    padding: 0.6rem 1.25rem;
    border: none;
    border-radius: 8px;
    background: #f1f5f9;
    color: #475569;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.mlab-teacher-tab.active,
.mlab-teacher-tab:hover {
    background: #7c3aed;
    color: #fff;
}
.mlab-teacher-panel {
    padding: 2rem;
}
.mlab-teacher-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1rem;
}
.mlab-loading {
    color: #64748b;
    padding: 1rem;
}
.mlab-teacher-empty {
    padding: 2rem;
    background: #f8fafc;
    border: 2px dashed #e2e8f0;
    border-radius: 12px;
    text-align: center;
    color: #64748b;
}
.mlab-teacher-codes-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}
.mlab-code-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.mlab-code-card-title {
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.25rem;
}
.mlab-code-card-meta {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 1rem;
}
.mlab-code-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.mlab-code-label {
    background: #ede9fe;
    color: #6d28d9;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
}
.mlab-code-value {
    font-family: 'Courier New', monospace;
    font-weight: 800;
    color: #7c3aed;
    font-size: 1.25rem;
}
.mlab-code-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: #475569;
    margin-bottom: 1rem;
}
.mlab-code-form label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    margin: 0.75rem 0 0.35rem;
}
.mlab-code-form input[type="text"],
.mlab-code-form input[type="datetime-local"] {
    width: 100%;
    padding: 0.6rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    box-sizing: border-box;
}
.mlab-code-form input:focus {
    outline: none;
    border-color: #7c3aed;
}
.mlab-inline {
    display: flex !important;
    align-items: center;
    gap: 0.4rem;
}
.mlab-code-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}
.mlab-btn-danger {
    background: #dc2626 !important;
}
.mlab-btn-danger:hover {
    background: #b91c1c !important;
}
.mlab-teacher-filter {
    margin-bottom: 1.5rem;
    max-width: 400px;
}
.mlab-teacher-filter label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.35rem;
}
.mlab-teacher-filter select {
    width: 100%;
    padding: 0.6rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
}
.mlab-results-group {
    margin-bottom: 2rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}
.mlab-results-group-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 700;
    color: #1e293b;
    flex-wrap: wrap;
}
.mlab-results-topic {
    margin-left: auto;
    color: #64748b;
    font-weight: 500;
}
.mlab-mini-bar {
    width: 60px;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    margin-right: 0.35rem;
}
.mlab-mini-bar > div {
    height: 100%;
    background: #10b981;
}
.mlab-badge-success {
    color: #047857;
    font-weight: 600;
    font-size: 0.85rem;
}
.mlab-badge-pending {
    color: #b45309;
    font-weight: 600;
    font-size: 0.85rem;
}
.mlab-no-link {
    color: #94a3b8;
    font-size: 0.85rem;
}
.mlab-link-view {
    color: #4f46e5;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.85rem;
}
.mlab-link-view:hover {
    text-decoration: underline;
}
.mlab-score-input,
.mlab-notes-input {
    padding: 0.4rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    width: 80px;
}
.mlab-notes-input {
    width: 140px;
}
.mlab-btn-sm {
    padding: 0.4rem 0.6rem !important;
    font-size: 0.8rem !important;
}
.mlab-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mlab-preview-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
}
.mlab-preview-content {
    position: relative;
    width: 90vw;
    max-width: 900px;
    height: 80vh;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    z-index: 1;
}
.mlab-preview-content iframe {
    width: 100%;
    height: 100%;
    border: none;
}
.mlab-preview-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    color: #fff;
    cursor: pointer;
    z-index: 2;
}



/* --- Lab assessment builder --- */
.mlab-assessment-picker {
    max-width: 500px;
    margin-bottom: 1.5rem;
}
.mlab-assessment-picker label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.35rem;
}
.mlab-assessment-picker select {
    width: 100%;
    padding: 0.6rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
}
.mlab-assessment-form {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.mlab-assessment-form label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    margin: 1rem 0 0.35rem;
}
.mlab-assessment-form input[type="text"],
.mlab-assessment-form input[type="number"] {
    width: 100%;
    padding: 0.6rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    box-sizing: border-box;
}
.mlab-question-row {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
}
.mlab-question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    font-weight: 700;
    color: #1e293b;
}
.mlab-question-row select {
    width: 100%;
    padding: 0.5rem;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    box-sizing: border-box;
}
.mlab-question-row input[type="text"],
.mlab-question-row input[type="number"] {
    width: 100%;
    padding: 0.5rem;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    box-sizing: border-box;
}

/* --- Student lab assessment --- */
.mlab-assessment-card {
    background: linear-gradient(135deg, #ede9fe 0%, #e0f2fe 100%);
    border: 1px solid #c4b5fd;
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    text-align: center;
}
.mlab-assessment-card h3 {
    margin: 0 0 0.5rem;
    color: #1e293b;
}
.mlab-assessment-card p {
    color: #64748b;
    margin: 0 0 1rem;
}
.mlab-assessment-modal-content {
    height: auto;
    max-height: 90vh;
    padding: 1.5rem;
    overflow-y: auto;
}
.mlab-assessment-modal-content h3 {
    margin-top: 0;
    color: #1e293b;
}
.mlab-assessment-question {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
}
.mlab-assessment-qtext {
    color: #1e293b;
    font-weight: 500;
    margin-bottom: 0.75rem;
}
.mlab-assessment-points {
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 400;
}
.mlab-assessment-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.mlab-assessment-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
}
.mlab-assessment-option input {
    accent-color: #7c3aed;
}
.mlab-assessment-text {
    width: 100%;
    padding: 0.6rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    box-sizing: border-box;
}
.mlab-assessment-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

/* --- Teacher assessment builder modal --- */
.mlab-builder-content {
    height: auto;
    max-height: 92vh;
    overflow-y: auto;
    padding: 1.5rem;
    width: 90vw;
    max-width: 800px;
}
.mlab-builder-content h3 {
    margin-top: 0;
    color: #1e293b;
}
.mlab-builder-field {
    margin-bottom: 1rem;
}
.mlab-builder-field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.35rem;
}
.mlab-builder-field input {
    width: 100%;
    padding: 0.6rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    box-sizing: border-box;
}
.mlab-builder-section-title {
    font-weight: 700;
    color: #1e293b;
    margin: 1.25rem 0 0.75rem;
}
.mlab-builder-page {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
}
.mlab-builder-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.75rem;
}
.mlab-builder-page label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    margin: 0.75rem 0 0.35rem;
}
.mlab-builder-page select,
.mlab-builder-page textarea {
    width: 100%;
    padding: 0.6rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    box-sizing: border-box;
    font-family: inherit;
}
.mlab-builder-page textarea {
    resize: vertical;
    min-height: 120px;
}
.mlab-builder-hint {
    background: #eff6ff;
    color: #1e40af;
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    margin-top: 0.5rem;
}
.mlab-builder-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}
.mlab-btn-secondary {
    background: #64748b !important;
}
.mlab-btn-secondary:hover {
    background: #475569 !important;
}

.mlab-student-pill {
    background: #eff6ff;
    border: 1px solid #c7d2fe;
    color: #1e40af;
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* --- Teacher dashboard stats grid --- */
.mlab-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.mlab-stat-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.mlab-stat-card i {
    font-size: 1.75rem;
    color: #4f46e5;
    width: 40px;
    text-align: center;
}
.mlab-stat-card h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: #1e293b;
}
.mlab-stat-card p {
    margin: 0;
    font-size: 0.8rem;
    color: #64748b;
}

/* --- Search bar --- */
.mlab-search-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.6rem 1rem;
    margin-bottom: 1.5rem;
}
.mlab-search-bar i {
    color: #94a3b8;
}
.mlab-search-bar input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 0.95rem;
    background: transparent;
}

/* --- Code card header --- */
.mlab-code-card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.mlab-code-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.mlab-code-card-info {
    flex: 1;
}
.mlab-code-card-badge {
    flex-shrink: 0;
}

/* --- Toast notification --- */
.mlab-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1e293b;
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    z-index: 100000;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.mlab-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.mlab-toast i {
    color: #22c55e;
}

/* --- Assessment overview cards --- */
.mlab-assess-overview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.mlab-assess-overview-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem;
    cursor: pointer;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.mlab-assess-overview-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: #c7d2fe;
}
.mlab-assess-overview-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.mlab-assess-overview-info {
    flex: 1;
    min-width: 0;
}
.mlab-assess-overview-title {
    font-weight: 700;
    color: #1e293b;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mlab-assess-overview-meta {
    font-size: 0.78rem;
    color: #64748b;
    margin: 0.15rem 0;
}
.mlab-assess-overview-stats {
    display: flex;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: #475569;
}

/* --- Results toolbar --- */
.mlab-results-toolbar {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.mlab-results-toolbar .mlab-search-bar {
    flex: 1;
    min-width: 200px;
    margin-bottom: 0;
}
.mlab-results-count {
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 600;
    margin-left: auto;
}
.mlab-results-group-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

/* --- Small button --- */
.mlab-btn-sm {
    padding: 0.35rem 0.6rem !important;
    font-size: 0.8rem !important;
}