/* ═══════════════════════════════════════════════════════════
   CSE111 OOP — Styles
   Object-Oriented Programming Visual Learning Module
   Purple/Indigo theme to differentiate from CSE110 green
   ═══════════════════════════════════════════════════════════ */

/* ─── Module Intro Card ────────────────────────────────── */
.oop-module-intro {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.08), rgba(139, 92, 246, 0.08));
    border: 1px solid rgba(56, 189, 248, 0.18);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
}

.oop-module-intro::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #38bdf8, #8b5cf6);
    border-radius: 4px 0 0 4px;
}

.oop-module-intro-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 2px;
}

.oop-module-intro-body {
    flex: 1;
    min-width: 0;
}

.oop-module-intro-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #38bdf8;
    margin-bottom: 0.3rem;
}

.oop-module-intro-desc {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-secondary, #94a3b8);
    margin: 0;
}

.oop-module-intro-desc strong {
    color: var(--text-primary, #e2e8f0);
}

.oop-module-intro-real {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    font-weight: 500;
}

.oop-module-intro-title code {
    font-family: 'JetBrains Mono', monospace;
    background: rgba(56, 189, 248, 0.15);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    color: #38bdf8;
    text-transform: none;
    letter-spacing: normal;
}

.oop-module-intro-desc code {
    font-family: 'JetBrains Mono', monospace;
    background: rgba(139, 92, 246, 0.2);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.82rem;
    color: #c4b5fd;
}

.oop-module-intro-real code {
    font-family: 'JetBrains Mono', monospace;
    background: rgba(251, 191, 36, 0.15);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.72rem;
    color: inherit;
}

/* ═══════════════════════════════════════════════════════════
   UNIVERSAL IDE CODE BLOCK STYLING
   Applies to ALL code blocks across ALL CSE 111 modules.
   This ensures every <pre> with code looks like a real IDE.
   ═══════════════════════════════════════════════════════════ */

/* Base: Every <pre> containing code in the OOP module section */
.oop-module pre:has(code),
.m1-anatomy-code,
.m1-step-code,
.m1-anon-code,
.m1-implicit-code,
.m3-explorer-code {
    background: #1e1e2e !important;
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace !important;
    color: #cdd6f4 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    position: relative;
    overflow-x: auto;
}

/* Left gutter strip for all code blocks */
.oop-module pre:has(code)::before,
.m1-anatomy-code::before,
.m1-step-code::before,
.m1-anon-code::before,
.m1-implicit-code::before,
.m3-explorer-code::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2.5rem;
    background: rgba(0, 0, 0, 0.25);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px 0 0 10px;
    pointer-events: none;
    z-index: 1;
}

/* Ensure content has left padding for the gutter */
.oop-module pre:has(code),
.m1-anatomy-code,
.m1-step-code,
.m1-anon-code,
.m1-implicit-code,
.m3-explorer-code {
    padding-left: 3rem !important;
}

/* Syntax colors inherited everywhere */
.oop-module pre .kw,
.m1-anatomy-code .kw,
.m1-step-code .kw,
.m1-anon-code .kw,
.m1-implicit-code .kw,
.m3-explorer-code .kw {
    color: #cba6f7 !important;
    font-weight: 600;
}

.oop-module pre .cls,
.m1-anatomy-code .cls,
.m1-step-code .cls,
.m1-anon-code .cls,
.m1-implicit-code .cls,
.m3-explorer-code .cls {
    color: #89dceb !important;
}

.oop-module pre .fn,
.m1-anatomy-code .fn,
.m1-step-code .fn,
.m1-anon-code .fn,
.m1-implicit-code .fn,
.m3-explorer-code .fn {
    color: #f9e2af !important;
}

.oop-module pre .str,
.m1-anatomy-code .str,
.m1-step-code .str,
.m1-anon-code .str,
.m1-implicit-code .str,
.m3-explorer-code .str {
    color: #a6e3a1 !important;
}

.oop-module pre .num,
.m1-anatomy-code .num,
.m1-step-code .num,
.m1-anon-code .num,
.m1-implicit-code .num,
.m3-explorer-code .num {
    color: #fab387 !important;
}

.oop-module pre .cmt,
.m1-anatomy-code .cmt,
.m1-step-code .cmt,
.m1-anon-code .cmt,
.m1-implicit-code .cmt,
.m3-explorer-code .cmt {
    color: #585b70 !important;
    font-style: italic;
}

.oop-module pre .type,
.m1-anatomy-code .type,
.m1-step-code .type,
.m1-anon-code .type,
.m1-implicit-code .type,
.m3-explorer-code .type {
    color: #89dceb !important;
}

/* Scrollbar for all code blocks */
.oop-module pre::-webkit-scrollbar,
.m1-anatomy-code::-webkit-scrollbar,
.m1-step-code::-webkit-scrollbar,
.m1-anon-code::-webkit-scrollbar,
.m1-implicit-code::-webkit-scrollbar,
.m3-explorer-code::-webkit-scrollbar {
    height: 6px;
}

.oop-module pre::-webkit-scrollbar-track,
.m1-anatomy-code::-webkit-scrollbar-track,
.m1-step-code::-webkit-scrollbar-track,
.m1-anon-code::-webkit-scrollbar-track,
.m1-implicit-code::-webkit-scrollbar-track,
.m3-explorer-code::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.oop-module pre::-webkit-scrollbar-thumb,
.m1-anatomy-code::-webkit-scrollbar-thumb,
.m1-step-code::-webkit-scrollbar-thumb,
.m1-anon-code::-webkit-scrollbar-thumb,
.m1-implicit-code::-webkit-scrollbar-thumb,
.m3-explorer-code::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

/* Selection highlight for all code blocks */
.oop-module pre::selection,
.oop-module pre *::selection {
    background: rgba(99, 102, 241, 0.35);
}

/* ─── IDE Wrapper (auto-applied by JS to standalone code blocks) ─── */
.ide-wrapper {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
    margin-bottom: 0.75rem;
    background: #1e1e2e;
}

.ide-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1rem;
    height: 36px;
    background: #181825;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    user-select: none;
}

.ide-dots {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.ide-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.ide-dot-red {
    background: #f38ba8;
}

.ide-dot-yellow {
    background: #fab387;
}

.ide-dot-green {
    background: #a6e3a1;
}

.ide-title {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.75rem;
    color: #6c7086;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Code block inside the wrapper — remove duplicate borders/radius */
.ide-wrapper>pre,
.ide-wrapper>.oop-code-display {
    border: none !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* ─── Tab Bar (hidden — navigation moved to sidebar) ─── */
.oop-tab-bar {
    display: none;
    gap: 4px;
    padding: 0.75rem 1rem;
    overflow-x: auto;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.08));
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 16px;
    margin-bottom: 1.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 92, 246, 0.3) transparent;
}

.oop-tab-bar::-webkit-scrollbar {
    height: 4px;
}

.oop-tab-bar::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.3);
    border-radius: 4px;
}

.oop-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.6rem 1.2rem;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    position: relative;
    overflow: hidden;
}

.oop-tab::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.15));
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: 12px;
}

.oop-tab:hover::before {
    opacity: 1;
}

.oop-tab:hover {
    color: var(--text-primary, #e2e8f0);
    border-color: rgba(139, 92, 246, 0.3);
}

.oop-tab.active {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4), 0 0 30px rgba(139, 92, 246, 0.15);
    transform: translateY(-1px);
}

.oop-tab.active::before {
    opacity: 0;
}

.oop-tab-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    font-size: 0.75rem;
    font-weight: 700;
}

.oop-tab.active .oop-tab-num {
    background: rgba(255, 255, 255, 0.3);
}

.oop-tab-label code {
    font-family: 'JetBrains Mono', monospace;
    background: rgba(139, 92, 246, 0.2);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
}

.oop-tab.active .oop-tab-label code {
    background: rgba(255, 255, 255, 0.25);
}

/* ─── Module Content Panels ────────────────────────────── */
.oop-module {
    display: none;
    max-width: 100%;
    overflow-x: hidden;
}

.oop-module.active {
    display: block;
    animation: oopFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Staggered child entry */
.oop-module.active>* {
    animation: oopChildReveal 0.45s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.oop-module.active>*:nth-child(1) {
    animation-delay: 0.05s;
}

.oop-module.active>*:nth-child(2) {
    animation-delay: 0.1s;
}

.oop-module.active>*:nth-child(3) {
    animation-delay: 0.15s;
}

.oop-module.active>*:nth-child(4) {
    animation-delay: 0.2s;
}

.oop-module.active>*:nth-child(5) {
    animation-delay: 0.25s;
}

.oop-module.active>*:nth-child(6) {
    animation-delay: 0.3s;
}

.oop-module.active>*:nth-child(n+7) {
    animation-delay: 0.35s;
}

@keyframes oopFadeIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.99);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes oopChildReveal {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─── Concept Card ─────────────────────────────────────── */
.oop-concept-card {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.06));
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    max-width: 100%;
    overflow-x: auto;
}

.oop-concept-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.35);
}

.oop-concept-card h2 {
    margin: 0 0 0.5rem;
    font-size: 1.3rem;
    color: var(--text-primary, #e2e8f0);
}

.oop-concept-card p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary, #94a3b8);
}

.oop-concept-card code {
    font-family: 'JetBrains Mono', monospace;
    background: rgba(139, 92, 246, 0.2);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #c4b5fd;
}

.oop-concept-card strong {
    color: #a78bfa;
}

/* ─── Simulation Layout ────────────────────────────────── */
.oop-sim-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
    max-width: 100%;
    overflow-x: hidden;
}

@media (max-width: 900px) {
    .oop-sim-layout {
        grid-template-columns: 1fr;
    }
}

/* ─── Code Display Scaling ─────────────────────────────── */
.oop-code-display {
    overflow-x: auto;
    max-width: 100%;
}

/* ─── Code Panel — IDE Window Chrome ───────────────────── */
.oop-code-panel,
.oop-viz-panel {
    background: #1e1e2e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.oop-code-panel {
    position: relative;
}

.oop-panel-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem;
    height: 38px;
    background: #181825;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.82rem;
    font-weight: 500;
    color: #cdd6f4;
    position: relative;
}

/* Traffic-light window dots */
.oop-code-panel>.oop-panel-header::before {
    content: '';
    display: inline-flex;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #f38ba8;
    box-shadow:
        18px 0 0 #fab387,
        36px 0 0 #a6e3a1;
    margin-right: 16px;
    flex-shrink: 0;
}

.oop-panel-icon {
    font-size: 1rem;
}

.oop-panel-title {
    flex: 1;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.78rem;
    color: #a6adc8;
    letter-spacing: 0.02em;
}

.oop-step-badge {
    font-size: 0.7rem;
    padding: 2px 10px;
    border-radius: 99px;
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
    font-weight: 500;
}

.oop-step-badge.running {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    animation: oopPulse 1.5s infinite;
}

@keyframes oopPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* ─── Code Display — IDE Editor Pane ───────────────────── */
.oop-code-display {
    margin: 0;
    padding: 1rem 1.25rem 1rem 3.5rem;
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.82rem;
    line-height: 1.75;
    color: #cdd6f4;
    overflow-x: auto;
    tab-size: 4;
    background: #1e1e2e;
    counter-reset: ide-line;
    position: relative;
    border-left: 1px solid rgba(255, 255, 255, 0.04);
}

/* Line numbers via CSS counters */
.oop-code-display code {
    display: block;
}

.oop-code-display code::before {
    display: none;
}

/* Per-line numbering trick: each newline in <pre> creates a visual line.
   We use a left gutter background strip and line-height alignment. */
.oop-code-display::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3rem;
    background: rgba(0, 0, 0, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

/* Syntax token colors — VS Code Dark+ inspired */
.oop-code-display .kw {
    color: #cba6f7;
    font-weight: 600;
}

.oop-code-display .cls {
    color: #89dceb;
}

.oop-code-display .fn {
    color: #f9e2af;
}

.oop-code-display .str {
    color: #a6e3a1;
}

.oop-code-display .num {
    color: #fab387;
}

.oop-code-display .cmt {
    color: #585b70;
    font-style: italic;
}

.oop-code-display .type {
    color: #89dceb;
}

.oop-code-display .code-line-active {
    background: rgba(139, 92, 246, 0.15);
    border-left: 3px solid #8b5cf6;
    margin-left: -3.5rem;
    padding-left: calc(3.5rem - 3px);
    margin-right: -1.25rem;
    padding-right: 1.25rem;
}

/* IDE scrollbar styling */
.oop-code-display::-webkit-scrollbar {
    height: 6px;
}

.oop-code-display::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.oop-code-display::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.oop-code-display::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Selection highlight */
.oop-code-display::selection,
.oop-code-display *::selection {
    background: rgba(99, 102, 241, 0.35);
}

/* Standalone code blocks (not inside .oop-code-panel) get their own IDE chrome */
.oop-concept-card>.oop-code-display,
.m1-method-side .oop-code-display,
.m1-creation-panel .oop-code-display,
.m1-eq-explanation .oop-code-display,
.m1-creation-panel>.oop-code-display,
.m4-use-block .oop-code-display {
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* ─── Simulation Canvas ───────────────────────────────── */
.oop-sim-canvas {
    padding: 1.5rem;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    position: relative;
}

/* ─── Controls ─────────────────────────────────────────── */
.oop-sim-controls {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
    flex-wrap: wrap;
}

.control-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s;
    font-family: inherit;
}

.control-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary, #e2e8f0);
    transform: translateY(-1px);
}

.control-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.control-btn.primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.3);
}

.control-btn.primary:hover {
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.5);
    transform: translateY(-2px);
}

/* ─── Explanation ──────────────────────────────────────── */
.oop-explanation {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: rgba(251, 191, 36, 0.06);
    border: 1px solid rgba(251, 191, 36, 0.15);
    border-radius: 12px;
}

.oop-explain-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.oop-explanation p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary, #94a3b8);
}

.oop-explanation code {
    font-family: 'JetBrains Mono', monospace;
    background: rgba(139, 92, 246, 0.2);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #c4b5fd;
}

.oop-explanation strong {
    color: #fbbf24;
}

/* ─── Inputs ───────────────────────────────────────────── */
.oop-num-input,
.oop-text-input {
    width: 80px;
    padding: 0.4rem 0.6rem;
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 8px;
    background: rgba(139, 92, 246, 0.1);
    color: var(--text-primary, #e2e8f0);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.2s;
}

.oop-text-input {
    width: 120px;
}

.oop-num-input:focus,
.oop-text-input:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.2);
}

/* ═══════════════════════════════════════════════════════════
   MODULE-SPECIFIC SIMULATION STYLES
   ═══════════════════════════════════════════════════════════ */

/* ─── M1: Blueprint & Objects ──────────────────────────── */
.oop-blueprint {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1));
    border: 2px dashed rgba(139, 92, 246, 0.4);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    min-width: 150px;
}

.oop-blueprint-title {
    font-weight: 700;
    color: #a78bfa;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.oop-blueprint-fields {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.oop-field {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    color: var(--text-secondary, #94a3b8);
    background: rgba(0, 0, 0, 0.2);
    padding: 4px 10px;
    border-radius: 6px;
}

.field-type {
    color: #67e8f9;
}

.oop-factory-arrow {
    font-size: 2rem;
    color: #8b5cf6;
    animation: arrowPulse 1.5s ease-in-out infinite;
}

@keyframes arrowPulse {

    0%,
    100% {
        transform: translateX(0);
        opacity: 0.6;
    }

    50% {
        transform: translateX(5px);
        opacity: 1;
    }
}

.oop-objects-area {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    min-height: 100px;
    align-items: flex-start;
    justify-content: center;
}

.oop-placeholder-text {
    color: var(--text-muted, #475569);
    font-style: italic;
    font-size: 0.85rem;
    text-align: center;
    padding: 2rem;
}

.oop-object-box {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(16, 185, 129, 0.08));
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    min-width: 130px;
    animation: objectAppear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes objectAppear {
    from {
        opacity: 0;
        transform: scale(0.5) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.oop-object-box .obj-title {
    font-weight: 700;
    color: #4ade80;
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.oop-object-box .obj-field {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--text-secondary, #94a3b8);
    padding: 2px 0;
}

.oop-object-box .obj-field .val {
    color: #86efac;
}

/* ─── M2: Memory & References ──────────────────────────── */
.oop-memory-canvas {
    flex-direction: row;
    justify-content: space-evenly;
    align-items: stretch;
    gap: 2rem;
}

.oop-mem-stack,
.oop-mem-heap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.oop-mem-label {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-primary, #e2e8f0);
    text-align: center;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(139, 92, 246, 0.2);
}

.oop-ref-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 10px;
    transition: all 0.3s;
}

.ref-name {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: #a78bfa;
    font-size: 0.85rem;
}

.ref-addr {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: #fb923c;
    background: rgba(251, 146, 60, 0.1);
    padding: 2px 8px;
    border-radius: 6px;
}

.oop-heap-obj {
    padding: 0.75rem 1rem;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 10px;
    transition: all 0.3s;
}

.heap-addr {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: #fb923c;
    margin-bottom: 4px;
}

.heap-field {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: var(--text-secondary, #94a3b8);
}

.heap-field span {
    color: #86efac;
}

.oop-heap-obj.garbage {
    opacity: 0.3;
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.05);
    text-decoration: line-through;
    animation: garbageFade 1s ease-out;
}

@keyframes garbageFade {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0.3;
        transform: scale(0.95);
    }
}

.oop-ref-box.active-ref {
    border-color: #22c55e;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.3);
}

.oop-mem-arrows {
    display: none;
    /* arrows handled by CSS borders/shadows for simplicity */
}

/* ─── M3: House Method ─────────────────────────────────── */
.oop-house-canvas {
    gap: 1.5rem;
}

.oop-house-icon {
    text-align: center;
}

.house-emoji {
    font-size: 4rem;
    line-height: 1;
    transition: transform 0.3s;
}

.house-counter {
    font-size: 3rem;
    font-weight: 900;
    color: #8b5cf6;
    font-family: 'JetBrains Mono', monospace;
    transition: all 0.3s;
}

.house-counter.updating {
    animation: counterBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: #22c55e;
}

@keyframes counterBounce {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(1);
    }
}

.house-label {
    font-size: 0.8rem;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.oop-method-input {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    color: #a78bfa;
}

/* ─── M4: Scope Boxes ──────────────────────────────────── */
.oop-scope-canvas {
    flex-direction: row;
    gap: 2rem;
}

.oop-scope-box {
    padding: 1.25rem;
    border-radius: 12px;
    min-width: 180px;
    text-align: center;
    transition: all 0.4s;
}

.oop-scope-object {
    background: rgba(34, 197, 94, 0.08);
    border: 2px solid rgba(34, 197, 94, 0.3);
}

.oop-scope-method {
    background: rgba(251, 191, 36, 0.08);
    border: 2px solid rgba(251, 191, 36, 0.3);
}

.scope-title {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-primary, #e2e8f0);
    margin-bottom: 0.75rem;
}

.scope-var {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--text-secondary, #94a3b8);
}

.scope-val {
    color: #86efac;
    font-weight: 600;
    transition: all 0.3s;
}

.scope-val.changed {
    background: rgba(34, 197, 94, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
    animation: valPulse 0.5s;
}

@keyframes valPulse {
    from {
        box-shadow: 0 0 15px rgba(34, 197, 94, 0.5);
    }

    to {
        box-shadow: none;
    }
}

.scope-val.failed {
    color: #ef4444;
    animation: failShake 0.5s;
}

@keyframes failShake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

.oop-scope-box.highlight-good {
    border-color: #22c55e;
    box-shadow: 0 0 25px rgba(34, 197, 94, 0.3);
}

.oop-scope-box.highlight-bad {
    border-color: #ef4444;
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.3);
}

.oop-this-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: #22c55e;
    font-size: 1.2rem;
    background: rgba(34, 197, 94, 0.15);
    padding: 6px 16px;
    border-radius: 20px;
    animation: arrowAppear 0.3s ease-out;
}

@keyframes arrowAppear {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* ─── M5: Factory ──────────────────────────────────────── */
.oop-factory-canvas {
    gap: 1rem;
}

.oop-conveyor {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.conveyor-belt {
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.3), rgba(99, 102, 241, 0.6), rgba(139, 92, 246, 0.3));
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.conveyor-line {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg,
            transparent 0px,
            transparent 10px,
            rgba(255, 255, 255, 0.3) 10px,
            rgba(255, 255, 255, 0.3) 20px);
    animation: conveyorMove 1s linear infinite;
}

@keyframes conveyorMove {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-20px);
    }
}

.oop-product-area {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    min-height: 80px;
}

.oop-constructor-inputs {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.oop-product-box {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(16, 185, 129, 0.06));
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    text-align: center;
    animation: productSlide 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes productSlide {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.8);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.oop-product-box .product-label {
    font-weight: 700;
    color: #4ade80;
    font-size: 0.8rem;
    margin-bottom: 4px;
}

.oop-product-box .product-field {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--text-secondary, #94a3b8);
}

.product-field .val {
    color: #86efac;
}

.product-field .default-val {
    color: #fb923c;
    font-style: italic;
}

/* ─── M6: Encapsulation Safe ───────────────────────────── */
.oop-safe-canvas {
    gap: 1.5rem;
}

.oop-safe {
    text-align: center;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.06));
    border: 2px solid rgba(139, 92, 246, 0.3);
    border-radius: 16px;
    transition: all 0.4s;
}

.safe-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.safe-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: var(--text-muted, #64748b);
    margin-bottom: 0.5rem;
}

.safe-value {
    font-size: 2rem;
    font-weight: 900;
    font-family: 'JetBrains Mono', monospace;
    color: #8b5cf6;
    transition: all 0.3s;
}

.oop-guard {
    text-align: center;
    transition: all 0.3s;
}

.guard-emoji {
    font-size: 2rem;
    transition: transform 0.3s;
}

.guard-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: #a78bfa;
    margin-top: 4px;
}

.guard-status {
    font-size: 0.75rem;
    color: var(--text-muted, #64748b);
    margin-top: 4px;
    font-weight: 600;
}

.guard-status.approved {
    color: #22c55e;
}

.guard-status.rejected {
    color: #ef4444;
    animation: failShake 0.5s;
}

.oop-safe.approved {
    border-color: rgba(34, 197, 94, 0.5);
    box-shadow: 0 0 25px rgba(34, 197, 94, 0.2);
}

.oop-safe.rejected {
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.2);
    animation: failShake 0.5s;
}

.oop-encap-input {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary, #94a3b8);
}

/* ─── M7: Scoreboard ───────────────────────────────────── */
.oop-static-canvas {
    gap: 1.25rem;
}

.oop-scoreboard {
    width: 100%;
    text-align: center;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.06));
    border: 2px solid rgba(251, 191, 36, 0.3);
    border-radius: 14px;
}

.scoreboard-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #fbbf24;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.scoreboard-value {
    font-size: 2.5rem;
    font-weight: 900;
    font-family: 'JetBrains Mono', monospace;
    color: #fbbf24;
    transition: all 0.3s;
}

.scoreboard-value.updating {
    animation: scorePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes scorePop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
        color: #22c55e;
    }

    100% {
        transform: scale(1);
    }
}

.oop-players-row {
    display: flex;
    gap: 1rem;
    width: 100%;
    justify-content: center;
}

.oop-player-card {
    flex: 1;
    max-width: 180px;
    text-align: center;
    padding: 1rem;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 12px;
    transition: all 0.3s;
}

.oop-player-card.active-player {
    border-color: #22c55e;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.2);
}

.player-emoji {
    font-size: 2rem;
    margin-bottom: 0.4rem;
}

.player-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary, #e2e8f0);
    margin-bottom: 0.3rem;
}

.player-score {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: var(--text-secondary, #94a3b8);
}

.player-score span {
    color: #8b5cf6;
    font-weight: 700;
}

/* ─── M8: Inheritance ──────────────────────────────────── */
.oop-inherit-canvas {
    gap: 1rem;
}

.oop-inherit-chain {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 350px;
}

.oop-class-box {
    width: 100%;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    text-align: center;
    transition: all 0.4s;
}

.oop-parent-class {
    background: rgba(99, 102, 241, 0.1);
    border: 2px solid rgba(99, 102, 241, 0.3);
}

.oop-child-class {
    background: rgba(34, 197, 94, 0.08);
    border: 2px solid rgba(34, 197, 94, 0.25);
}

.class-tag {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-muted, #64748b);
    font-weight: 700;
}

.oop-parent-class .class-tag {
    color: #818cf8;
}

.oop-child-class .class-tag {
    color: #4ade80;
}

.class-name {
    font-size: 1.2rem;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    margin: 4px 0;
}

.oop-parent-class .class-name {
    color: #a78bfa;
}

.oop-child-class .class-name {
    color: #86efac;
}

.class-field {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    color: var(--text-secondary, #94a3b8);
    margin-top: 4px;
}

.class-field span,
.class-inherited span {
    color: #86efac;
    font-weight: 600;
}

.class-inherited {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: rgba(139, 92, 246, 0.6);
    margin-top: 4px;
    font-style: italic;
}

.oop-inherit-arrow {
    font-size: 0.85rem;
    font-weight: 700;
    color: #8b5cf6;
}

.oop-class-box.active-flow {
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
    border-color: #8b5cf6;
}

.oop-flow-indicator {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #a78bfa;
    animation: oopFadeIn 0.3s;
}

/* ─── M9: Polymorphism ─────────────────────────────────── */
.oop-poly-canvas {
    flex-direction: row;
    gap: 1rem;
}

.oop-poly-ref,
.oop-poly-obj {
    padding: 1.25rem;
    border-radius: 12px;
    text-align: center;
    min-width: 130px;
    transition: all 0.4s;
}

.oop-poly-ref {
    background: rgba(99, 102, 241, 0.1);
    border: 2px solid rgba(99, 102, 241, 0.3);
}

.oop-poly-obj {
    background: rgba(34, 197, 94, 0.08);
    border: 2px solid rgba(34, 197, 94, 0.25);
}

.poly-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted, #64748b);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.poly-type {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem;
    font-weight: 700;
}

.oop-poly-ref .poly-type {
    color: #a78bfa;
}

.oop-poly-obj .poly-type {
    color: #86efac;
}

.oop-poly-wire {
    display: flex;
    align-items: center;
    color: #8b5cf6;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 1.2rem;
    transition: all 0.3s;
}

.oop-poly-wire.traced {
    color: #22c55e;
    text-shadow: 0 0 15px rgba(34, 197, 94, 0.5);
    animation: wireGlow 0.5s;
}

@keyframes wireGlow {
    from {
        filter: brightness(2);
    }

    to {
        filter: brightness(1);
    }
}

.oop-poly-result {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 10px;
    padding: 0.75rem 1.25rem;
    animation: resultAppear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes resultAppear {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px) scale(0.8);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

.result-method {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: #4ade80;
    font-weight: 600;
}

/* ─── M10: Casting Scanner ─────────────────────────────── */
.oop-cast-canvas {
    gap: 1rem;
}

.oop-scanner {
    width: 100%;
    max-width: 350px;
    text-align: center;
}

.scanner-frame {
    padding: 1.5rem;
    border: 2px solid rgba(99, 102, 241, 0.3);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.04));
    position: relative;
    overflow: hidden;
}

.scanner-frame::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.1), transparent);
    transition: left 0.8s;
}

.scanner-frame.scanning::before {
    left: 100%;
}

.scanner-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #a78bfa;
    font-weight: 700;
    margin-bottom: 1rem;
}

.scanner-object {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.scan-wrapper {
    padding: 0.75rem 1.5rem;
    background: rgba(99, 102, 241, 0.15);
    border: 2px solid rgba(99, 102, 241, 0.4);
    border-radius: 10px;
    transition: all 0.5s;
}

.wrapper-label {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: #a78bfa;
    font-size: 0.9rem;
}

.scan-inner {
    padding: 0.5rem 1.25rem;
    background: rgba(34, 197, 94, 0.15);
    border: 2px solid rgba(34, 197, 94, 0.4);
    border-radius: 8px;
    animation: innerReveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes innerReveal {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.inner-label {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: #4ade80;
    font-size: 0.9rem;
}

.scanner-result {
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    color: var(--text-muted, #64748b);
    font-weight: 500;
}

.scanner-result.true-result {
    color: #22c55e;
    font-weight: 700;
}

.scanner-result.false-result {
    color: #ef4444;
    font-weight: 700;
}

.scan-wrapper.unwrapped {
    border-style: dashed;
    opacity: 0.4;
}

/* ─── Console Output ───────────────────────────────────── */
.oop-console {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 10px;
    margin-top: 0.5rem;
}

.oop-console-title {
    font-size: 0.7rem;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.4rem;
}

.oop-console-output {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    color: #86efac;
    white-space: pre-wrap;
    min-height: 1em;
}



/* ═══════════════════════════════════════════════════════════
   M1 ENHANCED SECTIONS — Class Anatomy, Properties, 
   Instantiation, Creation Methods, Anonymous Objects
   ═══════════════════════════════════════════════════════════ */

/* ─── Class Anatomy ─────────────────────────────────────── */
.m1-anatomy-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.2rem;
}

.m1-anatomy-block {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform 0.25s, box-shadow 0.25s;
}

.m1-anatomy-block:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.m1-anatomy-header {
    padding: 0.6rem 1rem;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.3px;
}

.m1-anatomy-fields {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(59, 130, 246, 0.1));
    color: #93c5fd;
}

.m1-anatomy-methods {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(34, 197, 94, 0.1));
    color: #86efac;
}

.m1-anatomy-constructors {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(251, 191, 36, 0.1));
    color: #fde68a;
}

.m1-anatomy-code {
    margin: 0;
    padding: 0.8rem 1rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    line-height: 1.6;
    background: rgba(0, 0, 0, 0.2);
    color: #e2e8f0;
    border: none;
    border-radius: 0;
}

.m1-anatomy-desc {
    padding: 0.7rem 1rem;
    font-size: 0.82rem;
    color: var(--text-secondary, #94a3b8);
    line-height: 1.5;
}

.m1-anatomy-fullcode {
    margin-top: 1.2rem;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.m1-anatomy-fullcode-label {
    padding: 0.5rem 1rem;
    background: rgba(139, 92, 246, 0.15);
    font-weight: 600;
    font-size: 0.82rem;
    color: #c4b5fd;
}

.m1-fullcode-pre {
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
}

/* ─── Object Properties Grid ───────────────────────────── */
.m1-properties-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.2rem;
}

.m1-prop-card {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 14px;
    padding: 1.2rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.m1-prop-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.m1-prop-state:hover {
    border-color: rgba(59, 130, 246, 0.5);
}

.m1-prop-behavior:hover {
    border-color: rgba(34, 197, 94, 0.5);
}

.m1-prop-identity:hover {
    border-color: rgba(168, 85, 247, 0.5);
}

.m1-prop-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.m1-prop-title {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--text-primary, #e2e8f0);
    margin-bottom: 0.2rem;
}

.m1-prop-subtitle {
    font-size: 0.82rem;
    color: var(--text-secondary, #94a3b8);
    margin-bottom: 0.8rem;
    font-style: italic;
}

.m1-prop-example {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    text-align: left;
    line-height: 1.7;
    color: #e2e8f0;
    margin-bottom: 0.8rem;
}

.m1-prop-desc {
    font-size: 0.8rem;
    color: var(--text-secondary, #94a3b8);
    line-height: 1.5;
    text-align: left;
}

.m1-addr {
    color: #fb923c;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
}

.m1-analogy-box {
    margin-top: 1.2rem;
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 1rem 1.2rem;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(59, 130, 246, 0.08));
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 12px;
}

.m1-analogy-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.m1-analogy-text {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-secondary, #94a3b8);
}

/* ─── Declaration vs Initialization ────────────────────── */
.m1-instantiation-steps {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-top: 1.2rem;
}

.m1-step-card {
    flex: 1;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 14px;
    padding: 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: border-color 0.3s;
}

.m1-step-card:hover {
    border-color: rgba(139, 92, 246, 0.3);
}

.m1-step-init {
    border-color: rgba(34, 197, 94, 0.2);
}

.m1-step-init:hover {
    border-color: rgba(34, 197, 94, 0.4);
}

.m1-step-num {
    display: inline-block;
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 99px;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.m1-step-init .m1-step-num {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.m1-step-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary, #e2e8f0);
    margin-bottom: 0.6rem;
}

.m1-step-code {
    margin: 0 0 0.8rem 0;
    padding: 0.6rem 0.8rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #e2e8f0;
    border: 1px solid rgba(139, 92, 246, 0.15);
    overflow-x: auto;
}

.m1-step-memory {
    margin-bottom: 0.8rem;
}

.m1-mem-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 700;
    color: var(--text-secondary, #94a3b8);
    margin-bottom: 0.3rem;
    margin-top: 0.5rem;
}

.m1-mem-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.8rem;
    border-radius: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    transition: all 0.4s;
}

.m1-mem-stack {
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.m1-mem-heap {
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.m1-mem-empty {
    border-style: dashed;
    justify-content: center;
    min-height: 50px;
}

.m1-empty-text {
    color: var(--text-secondary, #64748b);
    font-style: italic;
    font-size: 0.75rem;
}

.m1-mem-var {
    font-weight: 700;
    color: #93c5fd;
}

.m1-mem-null {
    color: #ef4444;
    font-style: italic;
}

.m1-mem-addr {
    color: #fb923c;
    background: rgba(251, 146, 60, 0.1);
    padding: 2px 8px;
    border-radius: 6px;
}

.m1-mem-active {
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.3);
}

.m1-mem-active.m1-mem-heap {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.m1-heap-field {
    font-size: 0.78rem;
    color: #e2e8f0;
}

.m1-step-desc {
    font-size: 0.82rem;
    color: var(--text-secondary, #94a3b8);
    line-height: 1.5;
}

.m1-step-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 0.8rem;
    flex-shrink: 0;
}

.m1-step-arrow-line {
    font-size: 2rem;
    color: #8b5cf6;
    animation: pulseArrow 1.5s ease-in-out infinite;
}

.m1-step-arrow-label {
    font-size: 0.75rem;
    color: #a78bfa;
    font-weight: 600;
    margin-top: 0.3rem;
}

@keyframes pulseArrow {

    0%,
    100% {
        opacity: 0.5;
        transform: translateX(0);
    }

    50% {
        opacity: 1;
        transform: translateX(4px);
    }
}

.m1-warning-box {
    margin-top: 1.2rem;
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 1rem 1.2rem;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 12px;
}

.m1-warning-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
}

.m1-warning-text {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-secondary, #94a3b8);
}

.m1-error-code {
    display: block;
    margin-top: 0.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    background: rgba(0, 0, 0, 0.3);
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
    color: #e2e8f0;
}

.m1-error-label {
    color: #ef4444;
    font-weight: 600;
}

/* ─── Ways to Create Objects (Tabs) ────────────────────── */
.m1-creation-tabs {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    overflow-x: auto;
    padding-bottom: 4px;
}

.m1-tab-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
    color: var(--text-secondary, #94a3b8);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.25s;
    font-family: inherit;
}

.m1-tab-btn:hover {
    background: rgba(139, 92, 246, 0.1);
    color: var(--text-primary, #e2e8f0);
    border-color: rgba(139, 92, 246, 0.3);
}

.m1-tab-btn.active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.15));
    color: #c4b5fd;
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 2px 10px rgba(139, 92, 246, 0.15);
}

.m1-tab-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.7rem;
    font-weight: 700;
}

.m1-tab-btn.active .m1-tab-num {
    background: rgba(139, 92, 246, 0.4);
    color: white;
}

.m1-creation-panels {
    margin-top: 0.8rem;
}

.m1-creation-panel {
    display: none;
    animation: fadeSlideIn 0.3s ease;
}

.m1-creation-panel.active {
    display: block;
}

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.m1-creation-level {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
}

.m1-level-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
    letter-spacing: 0.3px;
}

.m1-level-beginner {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.m1-level-intermediate {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.m1-level-advanced {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.m1-level-usage {
    font-size: 0.8rem;
    color: var(--text-secondary, #94a3b8);
    font-style: italic;
}

.m1-creation-explain {
    margin-top: 0.8rem;
    font-size: 0.88rem;
    color: var(--text-secondary, #94a3b8);
    line-height: 1.6;
}

.m1-creation-explain ol {
    margin: 0.5rem 0 0 1.2rem;
    padding: 0;
}

.m1-creation-explain ol li {
    margin-bottom: 0.3rem;
}

.m1-note-box {
    margin-top: 0.6rem;
    padding: 0.6rem 0.8rem;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    font-size: 0.82rem;
}

/* ─── Anonymous Objects ────────────────────────────────── */
.m1-anon-compare {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-top: 1.2rem;
}

.m1-anon-side {
    flex: 1;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 14px;
    padding: 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: border-color 0.3s;
}

.m1-anon-normal:hover {
    border-color: rgba(59, 130, 246, 0.3);
}

.m1-anon-anonymous:hover {
    border-color: rgba(168, 85, 247, 0.3);
}

.m1-anon-side-label {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-primary, #e2e8f0);
    margin-bottom: 0.8rem;
}

.m1-anon-code {
    margin: 0 0 0.6rem 0;
    padding: 0.7rem 0.8rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    line-height: 1.6;
    color: #e2e8f0;
    border: 1px solid rgba(139, 92, 246, 0.1);
}

.m1-anon-note {
    font-size: 0.82rem;
    color: var(--text-secondary, #94a3b8);
    font-weight: 500;
}

.m1-anon-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    font-weight: 900;
    font-size: 1rem;
    color: var(--text-secondary, #64748b);
    flex-shrink: 0;
}

.m1-anon-usecases {
    margin-top: 1.2rem;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.m1-anon-usecase-title {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-primary, #e2e8f0);
    margin-bottom: 0.8rem;
}

.m1-anon-usecase-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.m1-anon-usecase {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--text-secondary, #94a3b8);
    line-height: 1.5;
}

.m1-usecase-icon {
    flex-shrink: 0;
    font-size: 1.1rem;
    margin-top: 1px;
}

.m1-anon-usecase code {
    display: block;
    margin-top: 0.2rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.76rem;
    color: #c4b5fd;
    background: rgba(139, 92, 246, 0.1);
    padding: 3px 8px;
    border-radius: 6px;
}

/* ─── Object Superclass — Hierarchy Tree ──────────────── */
.m1-hierarchy-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: 1.5rem 0;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.m1-tree-node {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.2rem;
    border-radius: 12px;
    transition: all 0.3s ease;
    position: relative;
}

.m1-tree-root {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.08));
    border: 1.5px solid rgba(251, 191, 36, 0.35);
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.1);
}

.m1-tree-root:hover {
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.2);
    border-color: rgba(251, 191, 36, 0.5);
}

.m1-tree-mid {
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.m1-tree-mid:hover {
    border-color: rgba(59, 130, 246, 0.4);
}

.m1-tree-leaf {
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.2);
    font-size: 0.85rem;
}

.m1-tree-leaf:hover {
    border-color: rgba(139, 92, 246, 0.4);
}

.m1-tree-icon {
    font-size: 1.2rem;
}

.m1-tree-name {
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    color: var(--text-primary, #e2e8f0);
}

.m1-tree-tag {
    font-size: 0.7rem;
    color: var(--text-secondary, #94a3b8);
    font-style: italic;
    opacity: 0.8;
}

.m1-tree-branches {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 0;
    flex-wrap: wrap;
}

.m1-tree-branch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.m1-tree-line {
    width: 2px;
    height: 24px;
    background: linear-gradient(to bottom, rgba(59, 130, 246, 0.4), rgba(139, 92, 246, 0.4));
    border-radius: 1px;
}

.m1-tree-subbranches {
    display: flex;
    gap: 1rem;
    margin-top: 0;
}

/* ─── Implicit extends comparison ─────────────────────── */
.m1-implicit-box {
    margin-top: 1.2rem;
    padding: 1rem 1.2rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.m1-implicit-label {
    font-size: 0.88rem;
    color: var(--text-primary, #e2e8f0);
    margin-bottom: 0.6rem;
}

.m1-implicit-compare {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.m1-implicit-code {
    flex: 1;
    min-width: 180px;
    margin: 0;
    padding: 0.6rem 0.8rem;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    line-height: 1.6;
    color: #e2e8f0;
    border: 1px solid rgba(139, 92, 246, 0.1);
}

.m1-implicit-equals {
    font-weight: 900;
    font-size: 1.5rem;
    color: rgba(34, 197, 94, 0.7);
    flex-shrink: 0;
}

/* ─── Inherited Methods Grid ──────────────────────────── */
.m1-inherited-methods {
    margin-top: 1.2rem;
}

.m1-inherited-title {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text-primary, #e2e8f0);
    margin-bottom: 0.6rem;
}

.m1-inherited-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.6rem;
}

.m1-inherited-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.7rem 0.5rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.3s;
}

.m1-inherited-item:hover {
    border-color: rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.05);
}

.m1-inherited-item code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    color: #93c5fd;
    font-weight: 600;
}

.m1-inherited-item span {
    font-size: 0.72rem;
    color: var(--text-secondary, #94a3b8);
}

/* ─── Object Methods Explorer ─────────────────────────── */
.m1-method-subtitle {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary, #e2e8f0);
    margin-bottom: 0.6rem;
}

.m1-method-compare {
    display: flex;
    gap: 1rem;
    margin: 1rem 0;
}

.m1-method-side {
    flex: 1;
    padding: 1.2rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.2);
    transition: border-color 0.3s;
}

.m1-method-bad {
    border-color: rgba(239, 68, 68, 0.15);
}

.m1-method-bad:hover {
    border-color: rgba(239, 68, 68, 0.35);
}

.m1-method-good {
    border-color: rgba(34, 197, 94, 0.15);
}

.m1-method-good:hover {
    border-color: rgba(34, 197, 94, 0.35);
}

.m1-method-side-label {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-primary, #e2e8f0);
    margin-bottom: 0.6rem;
}

.m1-method-output {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.6rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    font-size: 0.82rem;
    flex-wrap: wrap;
}

.m1-output-bad {
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.15);
}

.m1-output-good {
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.15);
}

.m1-output-label {
    font-weight: 600;
    color: var(--text-secondary, #94a3b8);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.m1-method-output code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: var(--text-primary, #e2e8f0);
}

.m1-output-verdict {
    font-size: 0.78rem;
    font-weight: 600;
    margin-left: auto;
}

/* ─── equals() Diagram ────────────────────────────────── */
.m1-equals-diagram {
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.m1-eq-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.m1-eq-operator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 80px;
    padding: 0.6rem 0.8rem;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 10px;
    flex-shrink: 0;
}

.m1-eq-op-equals {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.2);
}

.m1-eq-operator code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary, #e2e8f0);
}

.m1-eq-type {
    font-size: 0.65rem;
    color: var(--text-secondary, #94a3b8);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.m1-eq-explanation {
    flex: 1;
}

.m1-eq-desc {
    font-size: 0.88rem;
    color: var(--text-primary, #e2e8f0);
    margin-bottom: 0.5rem;
}

.m1-eq-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 0.3rem 1rem;
}

/* ─── hashCode Contract ───────────────────────────────── */
.m1-hashcode-contract {
    margin-top: 1.2rem;
    padding: 1rem 1.2rem;
    background: rgba(251, 191, 36, 0.04);
    border: 1px solid rgba(251, 191, 36, 0.15);
    border-radius: 12px;
}

.m1-contract-title {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text-primary, #e2e8f0);
    margin-bottom: 0.8rem;
}

.m1-contract-rules {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.m1-contract-rule {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.84rem;
    color: var(--text-secondary, #94a3b8);
    line-height: 1.5;
}

.m1-rule-icon {
    flex-shrink: 0;
    font-size: 1rem;
    margin-top: 1px;
}

/* ─── M9 GFG-Enhanced: Real-Life Analogy ──────────────── */
.m9-analogy-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.m9-analogy-emoji {
    font-size: 2.5rem;
}

.m9-analogy-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary, #e2e8f0);
}

.m9-analogy-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted, #a0aec0);
    margin-top: 2px;
}

.m9-roles-visual {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin: 1rem 0;
}

.m9-person-center {
    text-align: center;
    flex: 0 0 auto;
}

.m9-person-icon {
    font-size: 3rem;
    margin-bottom: 0.3rem;
}

.m9-person-label {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-primary, #e2e8f0);
}

.m9-roles-ring {
    flex: 1;
    display: flex;
    gap: 0.7rem;
}

.m9-role-card {
    flex: 1;
    padding: 0.8rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
    transition: all 0.25s ease;
}

.m9-role-card:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.m9-role-emoji {
    font-size: 1.8rem;
    margin-bottom: 0.3rem;
}

.m9-role-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary, #e2e8f0);
    margin-bottom: 0.2rem;
}

.m9-role-behavior {
    font-size: 0.78rem;
    font-style: italic;
    color: rgba(134, 239, 172, 0.8);
}

/* ─── M9 GFG-Enhanced: Two Types Comparison ───────────── */
.m9-types-compare {
    display: flex;
    gap: 0;
    align-items: stretch;
    margin-top: 0.5rem;
}

.m9-type-side {
    flex: 1;
    padding: 1.2rem;
    border-radius: 12px;
}

.m9-type-compile {
    background: rgba(99, 179, 237, 0.04);
    border: 1px solid rgba(99, 179, 237, 0.12);
}

.m9-type-runtime {
    background: rgba(237, 137, 54, 0.04);
    border: 1px solid rgba(237, 137, 54, 0.12);
}

.m9-type-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1rem;
    color: var(--text-muted, #a0aec0);
    padding: 0 0.8rem;
    min-width: 3rem;
}

.m9-type-badge {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary, #e2e8f0);
    margin-bottom: 0.6rem;
}

.m9-type-aka,
.m9-type-when,
.m9-type-rule {
    font-size: 0.8rem;
    color: var(--text-muted, #a0aec0);
    margin-bottom: 0.3rem;
}

.m9-type-side .oop-code-display {
    margin: 0.8rem 0;
    font-size: 0.75rem !important;
}

.m9-type-key {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(196, 167, 255, 0.85);
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: rgba(139, 92, 246, 0.06);
    margin-top: 0.3rem;
}

/* ─── M9 GFG-Enhanced: Quick Reference Table ──────────── */
.m9-quick-table {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.m9-qt-header,
.m9-qt-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
}

.m9-qt-header {
    background: rgba(139, 92, 246, 0.1);
}

.m9-qt-header .m9-qt-cell {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-primary, #e2e8f0);
}

.m9-qt-row {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.m9-qt-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

.m9-qt-cell {
    padding: 0.55rem 0.8rem;
    font-size: 0.8rem;
    color: var(--text-muted, #a0aec0);
}

.m9-qt-feature {
    font-weight: 600;
    color: var(--text-primary, #e2e8f0) !important;
}

.m9-qt-overload {
    color: rgba(144, 205, 244, 0.9) !important;
}

.m9-qt-override {
    color: rgba(246, 173, 85, 0.9) !important;
}

/* ─── M8 GFG-Enhanced: Types of Inheritance ───────────── */
.m8-types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
    margin-top: 1rem;
}

.m8-type-box {
    border-radius: 12px;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    transition: all 0.25s ease;
}

.m8-type-box:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.m8-type-special {
    border-color: rgba(237, 137, 54, 0.2);
    background: rgba(237, 137, 54, 0.03);
}

.m8-type-header {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary, #e2e8f0);
    margin-bottom: 0.8rem;
}

.m8-type-tag {
    font-size: 0.65rem;
    font-weight: 500;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    background: rgba(237, 137, 54, 0.15);
    color: rgba(246, 173, 85, 0.9);
    vertical-align: middle;
    margin-left: 0.3rem;
}

.m8-type-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    margin: 0.5rem 0;
    min-height: 100px;
}

.m8-tnode {
    padding: 0.35rem 0.8rem;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: 'Fira Code', 'Cascadia Code', monospace;
}

.m8-tnode-parent {
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.25);
    color: rgba(196, 167, 255, 0.95);
}

.m8-tnode-mid {
    background: rgba(99, 179, 237, 0.12);
    border: 1px solid rgba(99, 179, 237, 0.25);
    color: rgba(144, 205, 244, 0.95);
}

.m8-tnode-child {
    background: rgba(72, 187, 120, 0.12);
    border: 1px solid rgba(72, 187, 120, 0.25);
    color: rgba(134, 239, 172, 0.95);
}

.m8-tnode-interface {
    background: rgba(237, 137, 54, 0.12);
    border: 1px dashed rgba(237, 137, 54, 0.3);
    color: rgba(246, 173, 85, 0.95);
    font-size: 0.7rem;
}

.m8-tarrow {
    font-size: 0.75rem;
    color: var(--text-muted, #a0aec0);
}

.m8-tarrow-split {
    display: flex;
    gap: 2rem;
    font-size: 0.85rem;
    color: var(--text-muted, #a0aec0);
}

.m8-tnode-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.m8-type-desc {
    font-size: 0.75rem;
    color: var(--text-muted, #a0aec0);
    margin-top: 0.5rem;
    line-height: 1.3;
}

/* ─── M8 GFG-Enhanced: IS-A Relationship ──────────────── */
.m8-isa-visual {
    display: flex;
    gap: 2rem;
    align-items: center;
    margin: 1rem 0;
}

.m8-isa-chain {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    flex: 0 0 auto;
}

.m8-isa-node {
    padding: 0.4rem 1.2rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.85rem;
    text-align: center;
}

.m8-isa-top {
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.25);
    color: rgba(196, 167, 255, 0.95);
}

.m8-isa-mid {
    background: rgba(99, 179, 237, 0.12);
    border: 1px solid rgba(99, 179, 237, 0.25);
    color: rgba(144, 205, 244, 0.95);
}

.m8-isa-leaf {
    background: rgba(72, 187, 120, 0.12);
    border: 1px solid rgba(72, 187, 120, 0.25);
    color: rgba(134, 239, 172, 0.95);
}

.m8-isa-branches {
    display: flex;
    gap: 2rem;
}

.m8-isa-branch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.m8-isa-connector {
    font-size: 0.9rem;
    color: var(--text-muted, #a0aec0);
}

.m8-isa-checks {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.m8-isa-check {
    padding: 0.5rem 0.8rem;
    border-radius: 8px;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.m8-isa-check code {
    font-family: 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.78rem;
}

.m8-isa-true {
    background: rgba(72, 187, 120, 0.06);
    border: 1px solid rgba(72, 187, 120, 0.12);
    color: rgba(134, 239, 172, 0.9);
}

.m8-isa-false {
    background: rgba(245, 101, 101, 0.06);
    border: 1px solid rgba(245, 101, 101, 0.12);
    color: rgba(252, 165, 165, 0.9);
}

/* ─── M8 GFG-Enhanced: Subclass Capabilities ──────────── */
.m8-subclass-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7rem;
    margin-top: 0.5rem;
}

.m8-sub-action {
    padding: 0.9rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
    transition: all 0.25s ease;
}

.m8-sub-action:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.m8-sub-icon {
    font-size: 1.5rem;
    margin-bottom: 0.3rem;
}

.m8-sub-label {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-primary, #e2e8f0);
    margin-bottom: 0.2rem;
}

.m8-sub-desc {
    font-size: 0.75rem;
    color: var(--text-muted, #a0aec0);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.m8-sub-code {
    display: block;
    font-size: 0.72rem;
    font-family: 'Fira Code', 'Cascadia Code', monospace;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    background: rgba(139, 92, 246, 0.08);
    color: rgba(196, 167, 255, 0.85);
    word-break: break-all;
}

/* ─── M6 GFG-Enhanced: Capsule Analogy ────────────────── */
.m6-capsule-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.m6-capsule-emoji {
    font-size: 2.5rem;
}

.m6-capsule-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary, #e2e8f0);
}

.m6-capsule-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted, #a0aec0);
    margin-top: 2px;
}

.m6-capsule-visual {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.m6-capsule-shell {
    flex: 1;
    border-radius: 16px;
    border: 2px solid rgba(139, 92, 246, 0.3);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(139, 92, 246, 0.02));
    padding: 1.2rem;
    position: relative;
}

.m6-capsule-label {
    text-align: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: rgba(139, 92, 246, 0.9);
    margin-bottom: 1rem;
    letter-spacing: 0.03em;
}

.m6-capsule-inside {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.m6-capsule-section-label {
    font-weight: 600;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    color: var(--text-secondary, #cbd5e0);
}

.m6-capsule-item {
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-family: 'Fira Code', 'Cascadia Code', monospace;
    margin-bottom: 0.3rem;
}

.m6-capsule-private {
    background: rgba(245, 101, 101, 0.1);
    border: 1px solid rgba(245, 101, 101, 0.2);
    color: rgba(252, 165, 165, 0.9);
}

.m6-capsule-public {
    background: rgba(72, 187, 120, 0.1);
    border: 1px solid rgba(72, 187, 120, 0.2);
    color: rgba(134, 239, 172, 0.9);
}

.m6-capsule-outside {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.3rem;
    max-width: 140px;
}

.m6-capsule-arrow {
    font-size: 1.8rem;
    color: var(--text-muted, #a0aec0);
}

.m6-capsule-ext-label {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-primary, #e2e8f0);
}

.m6-capsule-ext-desc {
    font-size: 0.75rem;
    color: var(--text-muted, #a0aec0);
    line-height: 1.4;
}

/* ─── M6 GFG-Enhanced: Access Modifier Levels ─────────── */
.m6-access-levels {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-top: 1rem;
}

.m6-access-level {
    display: grid;
    grid-template-columns: 120px 160px 1fr auto;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.25s ease;
}

.m6-access-level:hover {
    transform: translateX(4px);
    background: rgba(255, 255, 255, 0.04);
}

.m6-access-badge {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-primary, #e2e8f0);
}

.m6-access-scope {
    font-size: 0.82rem;
    color: var(--text-secondary, #cbd5e0);
}

.m6-access-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
    min-width: 100px;
}

.m6-access-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.m6-access-private {
    background: rgba(245, 101, 101, 0.06);
}

.m6-access-private .m6-access-fill {
    background: linear-gradient(90deg, #f56565, #fc8181);
}

.m6-access-default {
    background: rgba(237, 137, 54, 0.06);
}

.m6-access-default .m6-access-fill {
    background: linear-gradient(90deg, #ed8936, #f6ad55);
}

.m6-access-protected {
    background: rgba(99, 179, 237, 0.06);
}

.m6-access-protected .m6-access-fill {
    background: linear-gradient(90deg, #63b3ed, #90cdf4);
}

.m6-access-public {
    background: rgba(72, 187, 120, 0.06);
}

.m6-access-public .m6-access-fill {
    background: linear-gradient(90deg, #48bb78, #68d391);
}

.m6-access-detail {
    font-size: 0.78rem;
    color: var(--text-muted, #a0aec0);
}

/* ─── M6 GFG-Enhanced: Pros / Cons Grid ───────────────── */
.m6-pros-cons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

.m6-pros-box,
.m6-cons-box {
    border-radius: 12px;
    padding: 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.m6-pros-box {
    background: rgba(72, 187, 120, 0.05);
    border-color: rgba(72, 187, 120, 0.15);
}

.m6-cons-box {
    background: rgba(237, 137, 54, 0.05);
    border-color: rgba(237, 137, 54, 0.15);
}

.m6-pros-header,
.m6-cons-header {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.8rem;
    color: var(--text-primary, #e2e8f0);
}

.m6-pros-list,
.m6-cons-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.m6-pros-item,
.m6-cons-item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-size: 0.85rem;
}

.m6-pros-icon,
.m6-cons-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.m6-pros-item strong,
.m6-cons-item strong {
    display: block;
    color: var(--text-primary, #e2e8f0);
    font-size: 0.85rem;
    margin-bottom: 0.15rem;
}

.m6-pros-desc,
.m6-cons-desc {
    font-size: 0.78rem;
    color: var(--text-muted, #a0aec0);
    line-height: 1.4;
}

/* ─── M6 GFG-Enhanced: Data Hiding vs Encapsulation ──── */
.m6-dh-compare {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    margin: 1rem 0;
}

.m6-dh-side {
    flex: 1;
    padding: 1.2rem;
    border-radius: 12px;
}

.m6-dh-encap {
    background: rgba(99, 179, 237, 0.06);
    border: 1px solid rgba(99, 179, 237, 0.15);
}

.m6-dh-hiding {
    background: rgba(245, 101, 101, 0.06);
    border: 1px solid rgba(245, 101, 101, 0.15);
}

.m6-dh-badge {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary, #e2e8f0);
    margin-bottom: 0.5rem;
}

.m6-dh-desc {
    font-size: 0.82rem;
    color: var(--text-secondary, #cbd5e0);
    margin-bottom: 0.8rem;
    line-height: 1.5;
}

.m6-dh-focus {
    margin-top: 0.8rem;
    font-size: 0.82rem;
    color: var(--text-muted, #a0aec0);
    padding: 0.5rem 0.8rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    text-align: center;
}

.m6-dh-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.2rem;
    color: rgba(139, 92, 246, 0.7);
    min-width: 50px;
    letter-spacing: 0.08em;
}

/* ─── M11 Abstraction — ATM Analogy ───────────────────── */
.m11-analogy-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.m11-analogy-emoji {
    font-size: 2.5rem;
}

.m11-analogy-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary, #e2e8f0);
}

.m11-analogy-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted, #a0aec0);
    margin-top: 2px;
}

.m11-atm-compare {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 1.5rem;
}

.m11-atm-side {
    flex: 1;
    padding: 1.2rem;
    border-radius: 12px;
}

.m11-atm-what {
    background: rgba(72, 187, 120, 0.08);
    border: 1px solid rgba(72, 187, 120, 0.2);
}

.m11-atm-how {
    background: rgba(245, 101, 101, 0.06);
    border: 1px solid rgba(245, 101, 101, 0.15);
}

.m11-atm-label {
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.8rem;
    color: var(--text-primary, #e2e8f0);
}

.m11-atm-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.m11-atm-item {
    padding: 0.5rem 0.8rem;
    border-radius: 8px;
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.25s ease;
}

.m11-atm-item:hover {
    transform: translateX(4px);
    background: rgba(255, 255, 255, 0.08);
}

.m11-atm-hidden {
    opacity: 0.55;
    filter: blur(0.5px);
    text-decoration: line-through;
    text-decoration-color: rgba(245, 101, 101, 0.5);
}

.m11-atm-hidden:hover {
    opacity: 0.9;
    filter: none;
    text-decoration: none;
}

.m11-atm-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-width: 50px;
}

.m11-atm-wall {
    font-size: 1.8rem;
}

.m11-atm-wall-label {
    font-size: 0.7rem;
    color: var(--text-muted, #a0aec0);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.m11-key-points {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.m11-key-point {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.8rem;
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary, #cbd5e0);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.m11-kp-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* ─── M11 Rules Comparison Table ──────────────────────── */
.m11-rules-table {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin: 1rem 0;
}

.m11-rule-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.m11-rule-row:last-child {
    border-bottom: none;
}

.m11-rule-header {
    background: rgba(139, 92, 246, 0.12);
    border-bottom: 2px solid rgba(139, 92, 246, 0.3);
}

.m11-rule-header>div {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-primary, #e2e8f0);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.m11-rule-feature,
.m11-rule-abs,
.m11-rule-int {
    padding: 0.65rem 0.9rem;
    font-size: 0.82rem;
    color: var(--text-secondary, #cbd5e0);
}

.m11-rule-feature {
    font-weight: 600;
    color: var(--text-primary, #e2e8f0);
    background: rgba(255, 255, 255, 0.03);
}

.m11-rule-abs {
    background: rgba(251, 191, 36, 0.04);
}

.m11-rule-int {
    background: rgba(99, 179, 237, 0.04);
}

.m11-rule-row:hover:not(.m11-rule-header) {
    background: rgba(255, 255, 255, 0.03);
}

/* ─── M11 Decision Grid ──────────────────────────────── */
.m11-decision-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1rem 0;
}

.m11-decision-box {
    border-radius: 12px;
    padding: 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.m11-decision-abstract {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(251, 191, 36, 0.03));
    border-color: rgba(251, 191, 36, 0.2);
}

.m11-decision-interface {
    background: linear-gradient(135deg, rgba(99, 179, 237, 0.08), rgba(99, 179, 237, 0.03));
    border-color: rgba(99, 179, 237, 0.2);
}

.m11-decision-header {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.8rem;
    color: var(--text-primary, #e2e8f0);
}

.m11-decision-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.m11-decision-item {
    font-size: 0.82rem;
    color: var(--text-secondary, #cbd5e0);
    padding: 0.4rem 0;
    padding-left: 1rem;
    position: relative;
}

.m11-decision-item::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--text-muted, #a0aec0);
}

/* ─── M11 Pitfalls ────────────────────────────────────── */
.m11-pitfalls {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.m11-pitfall {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 1rem;
    border-radius: 10px;
    background: rgba(245, 101, 101, 0.06);
    border: 1px solid rgba(245, 101, 101, 0.15);
    transition: all 0.25s ease;
}

.m11-pitfall:hover {
    background: rgba(245, 101, 101, 0.1);
    border-color: rgba(245, 101, 101, 0.25);
}

.m11-pitfall-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.m11-pitfall strong {
    display: block;
    color: var(--text-primary, #e2e8f0);
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
}

.m11-pitfall-desc {
    font-size: 0.82rem;
    color: var(--text-muted, #a0aec0);
    line-height: 1.5;
}

/* ─── M1 Responsive ────────────────────────────────────── */
@media (max-width: 768px) {

    .m1-anatomy-container,
    .m1-properties-grid {
        grid-template-columns: 1fr;
    }

    .m1-instantiation-steps {
        flex-direction: column;
    }

    .m1-step-arrow {
        flex-direction: row;
        padding: 0.5rem 0;
    }

    .m1-step-arrow-line {
        transform: rotate(90deg);
    }

    .m1-anon-compare {
        flex-direction: column;
    }

    .m1-anon-vs {
        padding: 0.5rem 0;
    }

    .m1-creation-tabs {
        flex-wrap: wrap;
    }

    .m1-method-compare {
        flex-direction: column;
    }

    .m1-eq-row {
        flex-direction: column;
    }

    .m1-eq-operator {
        flex-direction: row;
        min-width: unset;
    }

    .m1-tree-branches {
        flex-direction: column;
        align-items: center;
    }

    .m1-implicit-compare {
        flex-direction: column;
    }

    .m1-implicit-equals {
        transform: rotate(90deg);
        align-self: center;
    }

    /* M9 responsive */
    .m9-roles-visual {
        flex-direction: column;
    }

    .m9-types-compare {
        flex-direction: column;
    }

    .m9-type-vs {
        display: none;
    }

    /* M8 responsive */
    .m8-types-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .m8-isa-visual {
        flex-direction: column;
    }

    /* M6 responsive */
    .m6-capsule-visual {
        flex-direction: column;
    }

    .m6-capsule-outside {
        flex-direction: row;
        max-width: unset;
        gap: 0.8rem;
    }

    .m6-capsule-arrow {
        transform: rotate(90deg);
    }

    .m6-capsule-inside {
        grid-template-columns: 1fr;
    }

    .m6-access-level {
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
    }

    .m6-access-bar {
        grid-column: 1 / -1;
    }

    .m6-access-detail {
        grid-column: 1 / -1;
    }

    .m6-pros-cons-grid {
        grid-template-columns: 1fr;
    }

    .m6-dh-compare {
        flex-direction: column;
    }

    .m6-dh-vs {
        min-width: unset;
    }

    /* M11 responsive */
    .m11-atm-compare {
        flex-direction: column;
    }

    .m11-atm-divider {
        flex-direction: row;
        min-width: unset;
    }

    .m11-decision-grid {
        grid-template-columns: 1fr;
    }

    .m11-rule-row {
        grid-template-columns: 1fr 1fr 1fr;
        font-size: 0.75rem;
    }

    .m11-rule-feature,
    .m11-rule-abs,
    .m11-rule-int {
        padding: 0.5rem 0.6rem;
        font-size: 0.75rem;
    }
}

/* ═══════════════════════════════════════════════════
   MODULE 3: METHODS — Multi-Example Simulation
   ═══════════════════════════════════════════════════ */

/* Example Selector Tabs */
.m3-example-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.m3-ex-tab {
    flex: 1;
    min-width: 130px;
    padding: 0.65rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #94a3b8;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.m3-ex-tab:hover {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.4);
    color: #c4b5fd;
}

.m3-ex-tab.active {
    background: rgba(139, 92, 246, 0.2);
    border-color: #8b5cf6;
    color: #a78bfa;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.25);
}

/* Example panels */
.m3-example-panel {
    animation: fadeInUp 0.3s ease;
}

/* ── Bank Simulation ── */
.m3-bank-canvas {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
}

.m3-vault {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 2rem;
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid rgba(139, 92, 246, 0.3);
    border-radius: 16px;
    transition: all 0.3s;
    width: 100%;
    max-width: 280px;
    position: relative;
}

.m3-vault-icon {
    font-size: 2.5rem;
}

.m3-balance-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.m3-balance-label {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: 'JetBrains Mono', monospace;
}

.m3-balance-value {
    font-size: 2rem;
    font-weight: 800;
    color: #22c55e;
    font-family: 'JetBrains Mono', monospace;
    transition: all 0.3s;
}

.m3-vault-status {
    font-size: 0.85rem;
    font-weight: 600;
    min-height: 1.2em;
    transition: all 0.3s;
}

.m3-status-ok {
    color: #22c55e;
}

.m3-status-fail {
    color: #ef4444;
}

/* Vault animations */
.m3-vault.vault-deposit {
    border-color: #22c55e;
    box-shadow: 0 0 25px rgba(34, 197, 94, 0.4);
    transform: scale(1.03);
}

.m3-vault.vault-withdraw {
    border-color: #facc15;
    box-shadow: 0 0 20px rgba(250, 204, 21, 0.3);
}

.m3-vault.vault-fail {
    border-color: #ef4444;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
    animation: m3shake 0.4s ease;
}

@keyframes m3shake {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-6px);
    }

    40% {
        transform: translateX(6px);
    }

    60% {
        transform: translateX(-4px);
    }

    80% {
        transform: translateX(4px);
    }
}

.m3-bank-input-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 0.6rem 1rem;
    width: 100%;
}

.m3-amount-label {
    color: #94a3b8;
    font-weight: 600;
    white-space: nowrap;
}

/* Button variants */
.m3-withdraw-btn {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.15), rgba(234, 179, 8, 0.05));
    border-color: rgba(234, 179, 8, 0.4);
    color: #facc15;
}

.m3-withdraw-btn:hover {
    background: rgba(234, 179, 8, 0.25);
}

.m3-perform-btn {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.15), rgba(251, 146, 60, 0.05));
    border-color: rgba(251, 146, 60, 0.4);
    color: #fb923c;
}

.m3-perform-btn:hover {
    background: rgba(251, 146, 60, 0.25);
}

.m3-reset-btn {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.15);
    color: #64748b;
}

.m3-reset-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}

/* ── Student GPA Simulation ── */
.m3-student-canvas {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
}

.m3-grade-slots {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.m3-grade-slot {
    width: 62px;
    height: 72px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    border: 2px dashed rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.25);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.m3-grade-slot.empty {
    opacity: 0.5;
}

.m3-grade-slot.filled {
    border-style: solid;
    border-color: rgba(139, 92, 246, 0.5);
    background: rgba(139, 92, 246, 0.1);
    opacity: 1;
    transform: scale(1.05);
}

.m3-slot-idx {
    font-size: 0.65rem;
    color: #64748b;
    font-family: 'JetBrains Mono', monospace;
}

.m3-slot-val {
    font-size: 1.2rem;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
}

.m3-gpa-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 2rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

.m3-gpa-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.m3-gpa-value {
    font-size: 2rem;
    font-weight: 800;
    color: #8b5cf6;
    font-family: 'JetBrains Mono', monospace;
    transition: all 0.3s;
}

/* ── Dog Simulation ── */
.m3-dog-canvas {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 1.25rem;
}

.m3-dog-top {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.m3-dog-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    min-width: 100px;
    flex-shrink: 0;
    position: relative;
}

.m3-dog-emoji {
    font-size: 3rem;
    transition: transform 0.3s;
    display: block;
}

.m3-dog-emoji.m3-dog-happy {
    animation: m3bounce 0.4s ease;
}

.m3-dog-emoji.m3-dog-perform {
    animation: m3spin 0.6s ease;
}

@keyframes m3bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes m3spin {
    0% {
        transform: rotate(0);
    }

    50% {
        transform: rotate(20deg);
    }

    100% {
        transform: rotate(0);
    }
}

.m3-dog-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: #94a3b8;
}

.m3-dog-speech {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(139, 92, 246, 0.9);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.m3-tricks-list-wrap {
    flex: 1;
    min-width: 0;
}

.m3-tricks-list-label {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    margin-bottom: 0.5rem;
}

.m3-tricks-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 150px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    padding: 0.5rem;
}

.m3-trick-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.6rem;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    transition: all 0.3s;
}

.m3-trick-item.m3-trick-new {
    animation: m3slideIn 0.3s ease;
}

@keyframes m3slideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.m3-trick-idx {
    color: #64748b;
    font-size: 0.75rem;
}

.m3-trick-name {
    color: #a78bfa;
}

/* ── Call Log ── */
.m3-call-log-wrap {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
}

.m3-call-log-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.m3-log-hint {
    font-weight: 400;
    text-transform: none;
    color: #475569;
}

.m3-call-log {
    max-height: 140px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    scroll-behavior: smooth;
}

.m3-log-entry {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.35rem 0.75rem;
    background: rgba(0, 0, 0, 0.25);
    border-left: 3px solid #8b5cf6;
    border-radius: 0 6px 6px 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    transition: all 0.3s;
}

.m3-log-entry.m3-log-new {
    animation: m3logSlide 0.35s ease;
}

@keyframes m3logSlide {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.m3-log-ts {
    color: #475569;
    flex-shrink: 0;
    font-size: 0.72rem;
    padding-top: 1px;
}

.m3-log-msg {
    color: #e2e8f0;
}

.m3-log-placeholder {
    color: #475569;
    font-size: 0.8rem;
    font-style: italic;
    padding: 0.25rem 0.5rem;
}

/* ── Value update animation ── */
.m3-val-update {
    animation: m3pulse 0.4s ease;
}

@keyframes m3pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

/* ── Method Anatomy ── */
.m3-anatomy-card {
    margin-top: 1.5rem;
}

.m3-anatomy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.m3-anatomy-item {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.m3-anatomy-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #94a3b8;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    padding-bottom: 0.4rem;
}

.m3-anatomy-code {
    font-size: 0.8rem !important;
    margin: 0 !important;
}

.m3-anatomy-note {
    font-size: 0.82rem;
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
}


/* ═══════════════════════════════════════════════════
   METHOD CALL EXPLORER — Interactive Anatomy Section
   ═══════════════════════════════════════════════════ */

.m3-explorer-card {
    padding: 1.5rem;
}

/* Type Tabs */
.m3-type-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.m3-type-tab {
    flex: 1;
    min-width: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.75rem 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.m3-type-tab:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-2px);
}

.m3-type-tab.active {
    background: rgba(139, 92, 246, 0.15);
    border-color: #8b5cf6;
    box-shadow: 0 0 18px rgba(139, 92, 246, 0.2);
}

.m3-type-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: 800;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
}

.void-badge {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.return-badge {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.4);
}

.bool-badge {
    background: rgba(250, 204, 21, 0.2);
    color: #facc15;
    border: 1px solid rgba(250, 204, 21, 0.4);
}

.noparam-badge {
    background: rgba(96, 165, 250, 0.2);
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.4);
}

.m3-type-name {
    font-size: 0.78rem;
    color: #94a3b8;
    font-weight: 600;
}

.m3-type-tab.active .m3-type-name {
    color: #c4b5fd;
}

/* Explorer Stage */
.m3-explorer-stage {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.25rem;
    min-height: 220px;
}

/* Code Block */
.m3-explorer-code {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    line-height: 1.8;
    min-height: 180px;
}

.m3-ex-line {
    display: block;
    padding: 1px 6px;
    border-radius: 4px;
    transition: background 0.3s, box-shadow 0.3s;
}

.m3-ex-line.m3-line-active {
    background: rgba(250, 204, 21, 0.18);
    box-shadow: inset 3px 0 0 #facc15;
    color: #fef9c3;
}

.m3-empty-parens {
    color: #fb923c;
    font-weight: 800;
}

.m3-kt {
    color: #a78bfa;
    font-style: italic;
}

/* keyword type */

/* Flow Connector */
.m3-flow-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 90px;
    flex-shrink: 0;
}

.m3-flow-arrow-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
}

.m3-flow-arg-line,
.m3-flow-ret-line {
    width: 100%;
    height: 32px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 4px;
    overflow: hidden;
}

.m3-flow-arg-label,
.m3-flow-ret-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: #a78bfa;
    z-index: 2;
    position: absolute;
}

.m3-flow-label {
    font-size: 0.65rem;
    font-weight: 800;
    color: #475569;
    letter-spacing: 0.08em;
    padding: 2px 0;
}

/* Particles */
.m3-flow-particle {
    position: absolute;
    width: auto;
    height: 22px;
    padding: 0 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.arg-particle {
    background: rgba(139, 92, 246, 0.7);
    color: #fff;
    left: -40px;
}

.ret-particle {
    background: rgba(34, 197, 94, 0.7);
    color: #fff;
    right: -40px;
}

.m3-particle-animate {
    animation: m3argFlow 0.7s ease forwards;
}

.m3-ret-animate {
    animation: m3retFlow 0.7s ease 0.8s forwards;
}

@keyframes m3argFlow {
    from {
        left: -40px;
        opacity: 0;
    }

    to {
        left: calc(100% + 5px);
        opacity: 1;
    }
}

@keyframes m3retFlow {
    from {
        right: -40px;
        opacity: 0;
    }

    to {
        right: calc(100% + 5px);
        opacity: 1;
    }
}

/* Call Stack */
.m3-stack-side {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.m3-stack-label {
    font-size: 0.75rem;
    font-weight: 800;
    color: #64748b;
    letter-spacing: 0.05em;
}

.m3-stack {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.4rem;
}

.m3-stack-frame {
    padding: 0.65rem 1rem;
    border-radius: 10px;
    border: 1px solid;
    transition: all 0.3s;
}

.m3-frame-caller {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.3);
}

.m3-frame-method {
    background: rgba(250, 204, 21, 0.08);
    border-color: rgba(250, 204, 21, 0.4);
}

.m3-frame-push {
    animation: m3framePush 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.m3-frame-pop {
    animation: m3framePop 0.3s ease forwards;
}

@keyframes m3framePush {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes m3framePop {
    from {
        opacity: 1;
        transform: none;
    }

    to {
        opacity: 0;
        transform: translateY(-8px) scale(0.95);
    }
}

.m3-frame-title {
    font-size: 0.75rem;
    font-weight: 800;
    color: #8b5cf6;
    font-family: 'JetBrains Mono', monospace;
    margin-bottom: 0.35rem;
}

.m3-frame-call {
    font-size: 0.78rem;
    color: #e2e8f0;
    font-family: 'JetBrains Mono', monospace;
}

.m3-frame-result {
    font-size: 0.78rem;
    font-weight: 700;
    margin-top: 0.3rem;
    min-height: 1em;
}

.m3-frame-body {
    font-size: 0.75rem;
    font-family: 'JetBrains Mono', monospace;
    color: #cbd5e1;
    line-height: 1.7;
}

.m3-fvar {
    color: #94a3b8;
}

.m3-fval {
    color: #22c55e;
    font-weight: 700;
}

.m3-result-ok {
    color: #22c55e;
}

.m3-result-void {
    color: #ef4444;
    font-style: italic;
}

.m3-result-pop {
    animation: m3pulse 0.4s ease;
}

/* Why box */
.m3-why-box {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    margin-top: 0.5rem;
}

.m3-why-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.m3-why-text {
    font-size: 0.8rem;
    color: #94a3b8;
    line-height: 1.5;
}

/* Explorer controls */
.m3-explorer-controls {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* Insight box */
.m3-explorer-insight {
    margin-top: 1rem;
    padding: 0.9rem 1.1rem;
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-left: 4px solid #22c55e;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #cbd5e1;
    line-height: 1.6;
}

.m3-insight-pop {
    animation: m3logSlide 0.4s ease;
}

/* Responsive */
@media (max-width: 700px) {
    .m3-explorer-stage {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }

    .m3-flow-connector {
        transform: rotate(90deg);
        width: 60px;
        margin: 0 auto;
    }
}


/* ═══════════════════════════════════════════════════
   METHOD CALL EXPLORER — Interactive Anatomy Section
   ═══════════════════════════════════════════════════ */

.m3-explorer-card {
    padding: 1.5rem;
}

.m3-type-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.m3-type-tab {
    flex: 1;
    min-width: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.75rem 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.m3-type-tab:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-2px);
}

.m3-type-tab.active {
    background: rgba(139, 92, 246, 0.15);
    border-color: #8b5cf6;
    box-shadow: 0 0 18px rgba(139, 92, 246, 0.2);
}

.m3-type-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: 800;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
}

.void-badge {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.return-badge {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.4);
}

.bool-badge {
    background: rgba(250, 204, 21, 0.2);
    color: #facc15;
    border: 1px solid rgba(250, 204, 21, 0.4);
}

.noparam-badge {
    background: rgba(96, 165, 250, 0.2);
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.4);
}

.m3-type-name {
    font-size: 0.78rem;
    color: #94a3b8;
    font-weight: 600;
}

.m3-type-tab.active .m3-type-name {
    color: #c4b5fd;
}

.m3-explorer-stage {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.25rem;
    min-height: 220px;
}

.m3-explorer-code {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    line-height: 1.8;
    min-height: 180px;
}

.m3-ex-line {
    display: block;
    padding: 1px 6px;
    border-radius: 4px;
    transition: background 0.3s, box-shadow 0.3s;
}

.m3-ex-line.m3-line-active {
    background: rgba(250, 204, 21, 0.18);
    box-shadow: inset 3px 0 0 #facc15;
    color: #fef9c3;
}

.m3-empty-parens {
    color: #fb923c;
    font-weight: 800;
}

.m3-flow-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 90px;
    flex-shrink: 0;
}

.m3-flow-arrow-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
}

.m3-flow-arg-line,
.m3-flow-ret-line {
    width: 100%;
    height: 32px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 4px;
    overflow: hidden;
}

.m3-flow-arg-label,
.m3-flow-ret-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: #a78bfa;
    z-index: 2;
    position: absolute;
}

.m3-flow-label {
    font-size: 0.65rem;
    font-weight: 800;
    color: #475569;
    letter-spacing: 0.08em;
    padding: 2px 0;
}

.m3-flow-particle {
    position: absolute;
    width: auto;
    height: 22px;
    padding: 0 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.arg-particle {
    background: rgba(139, 92, 246, 0.7);
    color: #fff;
    left: -40px;
}

.ret-particle {
    background: rgba(34, 197, 94, 0.7);
    color: #fff;
    right: -40px;
}

.m3-particle-animate {
    animation: m3argFlow 0.7s ease forwards;
}

.m3-ret-animate {
    animation: m3retFlow 0.7s ease 0.8s forwards;
}

@keyframes m3argFlow {
    from {
        left: -40px;
        opacity: 0;
    }

    to {
        left: calc(100% + 5px);
        opacity: 1;
    }
}

@keyframes m3retFlow {
    from {
        right: -40px;
        opacity: 0;
    }

    to {
        right: calc(100% + 5px);
        opacity: 1;
    }
}

.m3-stack-side {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.m3-stack-label {
    font-size: 0.75rem;
    font-weight: 800;
    color: #64748b;
    letter-spacing: 0.05em;
}

.m3-stack {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.4rem;
}

.m3-stack-frame {
    padding: 0.65rem 1rem;
    border-radius: 10px;
    border: 1px solid;
    transition: all 0.3s;
}

.m3-frame-caller {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.3);
}

.m3-frame-method {
    background: rgba(250, 204, 21, 0.08);
    border-color: rgba(250, 204, 21, 0.4);
}

.m3-frame-push {
    animation: m3framePush 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.m3-frame-pop {
    animation: m3framePop 0.3s ease forwards;
}

@keyframes m3framePush {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes m3framePop {
    from {
        opacity: 1;
        transform: none;
    }

    to {
        opacity: 0;
        transform: translateY(-8px) scale(0.95);
    }
}

.m3-frame-title {
    font-size: 0.75rem;
    font-weight: 800;
    color: #8b5cf6;
    font-family: 'JetBrains Mono', monospace;
    margin-bottom: 0.35rem;
}

.m3-frame-call {
    font-size: 0.78rem;
    color: #e2e8f0;
    font-family: 'JetBrains Mono', monospace;
}

.m3-frame-result {
    font-size: 0.78rem;
    font-weight: 700;
    margin-top: 0.3rem;
    min-height: 1em;
}

.m3-frame-body {
    font-size: 0.75rem;
    font-family: 'JetBrains Mono', monospace;
    color: #cbd5e1;
    line-height: 1.7;
}

.m3-fvar {
    color: #94a3b8;
}

.m3-fval {
    color: #22c55e;
    font-weight: 700;
}

.m3-result-ok {
    color: #22c55e;
}

.m3-result-void {
    color: #ef4444;
    font-style: italic;
}

.m3-result-pop {
    animation: m3pulse 0.4s ease;
}

.m3-why-box {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    margin-top: 0.5rem;
}

.m3-why-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.m3-why-text {
    font-size: 0.8rem;
    color: #94a3b8;
    line-height: 1.5;
}

.m3-explorer-controls {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.m3-explorer-insight {
    margin-top: 1rem;
    padding: 0.9rem 1.1rem;
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-left: 4px solid #22c55e;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #cbd5e1;
    line-height: 1.6;
}

.m3-insight-pop {
    animation: m3logSlide 0.4s ease;
}

@media (max-width: 700px) {
    .m3-explorer-stage {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }

    .m3-flow-connector {
        transform: rotate(90deg);
        width: 60px;
        margin: 0 auto;
    }
}

/* ═══════════════════════════════════════════════════════════
   PHASE 3 — NEW ENRICHMENT COMPONENTS
   ═══════════════════════════════════════════════════════════ */

/* Cross-reference note (M10 back-reference to M8 instanceof) */
.oop-crossref-note {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-left: 3px solid #818cf8;
    border-radius: 10px;
    padding: 0.7rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.87rem;
    color: #c7d2fe;
    line-height: 1.5;
}

/* ─── M4: Three Uses of this ─── */
.m4-uses-card {
    margin-top: 1.5rem;
}

.m4-uses-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.m4-use-block {
    background: rgba(139, 92, 246, 0.06);
    border: 1px solid rgba(139, 92, 246, 0.18);
    border-radius: 12px;
    padding: 1rem;
    transition: border-color 0.2s;
}

.m4-use-block:hover {
    border-color: rgba(139, 92, 246, 0.45);
}

.m4-use-num {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.5rem;
}

.m4-use-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: 0.5rem;
}

.m4-use-desc {
    font-size: 0.82rem;
    color: #94a3b8;
    line-height: 1.55;
}

.m4-use-block .oop-code-display {
    font-size: 0.75rem;
    margin: 0.5rem 0;
    padding: 0.7rem;
    min-height: unset;
}

@media (max-width: 900px) {
    .m4-uses-grid {
        grid-template-columns: 1fr;
    }
}

/* ─── M5: Constructor Chaining ─── */
.m5-chain-card {
    margin-top: 1.5rem;
}

.m5-chain-canvas {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    justify-content: center;
}

.m5-chain-step {
    background: rgba(99, 102, 241, 0.07);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 10px;
    padding: 0.6rem 0.9rem;
}

.m5-chain-final {
    background: rgba(34, 197, 94, 0.07);
    border-color: rgba(34, 197, 94, 0.3);
}

.m5-chain-call {
    font-size: 0.85rem;
    color: #e2e8f0;
    font-weight: 500;
    margin-bottom: 0.2rem;
}

.m5-chain-arrow {
    font-size: 0.78rem;
    color: #94a3b8;
    padding: 0.25rem 0;
    text-align: center;
}

.m5-chain-result {
    font-size: 0.78rem;
    color: #86efac;
    margin-top: 0.3rem;
    line-height: 1.5;
}

/* M5 Copy Constructor */
.m5-copy-card {
    margin-top: 1.5rem;
}

/* ─── M7: Static Initializer Block ─── */
.m7-block-card {
    margin-top: 1.5rem;
}

.m7-timeline-canvas {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    justify-content: center;
}

.m7-timeline-event {
    border-radius: 10px;
    padding: 0.6rem 0.9rem;
    border: 1px solid;
}

.m7-tl-class {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.35);
}

.m7-tl-obj {
    background: rgba(99, 102, 241, 0.07);
    border-color: rgba(99, 102, 241, 0.25);
}

.m7-tl-obj2 {
    background: rgba(99, 102, 241, 0.05);
    border-color: rgba(99, 102, 241, 0.15);
}

.m7-tl-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #c4b5fd;
    margin-bottom: 0.2rem;
}

.m7-tl-desc {
    font-size: 0.77rem;
    color: #94a3b8;
}

.m7-tl-arrow {
    text-align: center;
    color: #6366f1;
    font-size: 1rem;
    padding: 0.1rem;
}

/* ─── M7: Class vs Object Memory Diagram ─── */
.m7-mem-card {
    margin-top: 1.5rem;
}

.m7-mem-diagram {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.m7-mem-zone {
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
    border: 1px solid;
}

.m7-mem-class-zone {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.35);
}

.m7-mem-obj-zone {
    background: rgba(99, 102, 241, 0.07);
    border-color: rgba(99, 102, 241, 0.22);
    flex: 1;
}

.m7-mem-objs-row {
    display: flex;
    gap: 0.75rem;
}

.m7-mem-zone-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: 0.3rem;
}

.m7-mem-zone-subtitle {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-bottom: 0.5rem;
}

.m7-mem-field {
    font-size: 0.78rem;
    color: #cbd5e1;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    margin-top: 0.4rem;
}

.m7-mem-static {
    border-left: 2px solid #a78bfa;
}

.m7-mem-separator {
    text-align: center;
    font-size: 0.75rem;
    color: #64748b;
    padding: 0.25rem;
    letter-spacing: 0.05em;
}

@media (max-width: 700px) {
    .m7-mem-objs-row {
        flex-direction: column;
    }
}

/* ─── M8: IS-A Tree (rebuilt) ─── */
.m8-isa-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin: 1rem 0;
}

.m8-isa-row {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.m8-isa-node {
    padding: 0.4rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid;
}

.m8-isa-root {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.4);
    color: #c4b5fd;
}

.m8-isa-child {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
    color: #a5b4fc;
}

.m8-isa-leaf {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

.m8-isa-connectors {
    display: flex;
    gap: 3rem;
    color: #475569;
    font-size: 0.85rem;
}

.m8-isa-line::before {
    content: "↓";
}

/* ═══════════════════════════════════════════════════════ */
/* MODULE 12: OOP TRACING                                 */
/* ═══════════════════════════════════════════════════════ */

/* Question Tabs */
.tracer-question-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.tracer-qtab {
    padding: 0.45rem 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.tracer-qtab:hover {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.tracer-qtab-active {
    color: #fbbf24 !important;
    background: rgba(250, 204, 21, 0.1) !important;
    border-color: rgba(250, 204, 21, 0.3) !important;
}

/* Controls Bar */
.tracer-controls-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 12px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.tracer-controls-left {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.tracer-controls-right {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.tracer-ctrl-btn {
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #e2e8f0;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.tracer-ctrl-btn:hover:not(:disabled) {
    background: rgba(99, 102, 241, 0.2);
    border-color: #6366f1;
    transform: translateY(-1px);
}

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

.tracer-play-btn {
    background: #6366f1;
    border-color: #6366f1;
    font-weight: 600;
}

.tracer-play-btn:hover {
    background: #4f46e5 !important;
}

.tracer-step-counter {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: #94a3b8;
    background: rgba(0, 0, 0, 0.3);
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
}

.tracer-speed-btns {
    display: flex;
    gap: 3px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    padding: 2px;
}

.tracer-speed-btn {
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.tracer-speed-btn:hover {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.08);
}

.tracer-speed-active {
    color: #fbbf24 !important;
    background: rgba(250, 204, 21, 0.15) !important;
}

/* Main Grid */
.tracer-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
    min-height: 500px;
}

/* Panel Header */
.tracer-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-weight: 600;
    font-size: 0.85rem;
    color: #cbd5e1;
}

.tracer-file-badge {
    font-size: 0.7rem;
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
    padding: 0.15rem 0.6rem;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
}

.tracer-memory-badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.6rem;
    border-radius: 4px;
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

.tracer-badge-running {
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
}

.tracer-badge-done {
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
}

/* Code Panel */
.tracer-code-panel {
    background: #1e1e2e;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
}

.tracer-code-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.78rem;
    line-height: 1.65;
    max-height: 550px;
}

/* Code Lines */
.tracer-line {
    display: flex;
    padding: 0 0.75rem;
    border-left: 3px solid transparent;
    transition: all 0.15s;
    cursor: default;
}

.tracer-line:hover {
    background: rgba(255, 255, 255, 0.03);
}

.tracer-line-empty {
    height: 1.65em;
}

.tracer-ln {
    min-width: 2rem;
    text-align: right;
    padding-right: 0.75rem;
    color: #4a5568;
    user-select: none;
    flex-shrink: 0;
}

.tracer-lc {
    white-space: pre;
    color: #cdd6f4;
}

/* Current line */
.tracer-active {
    background: rgba(250, 204, 21, 0.12) !important;
    border-left-color: #facc15 !important;
}

.tracer-active .tracer-ln {
    color: #facc15;
    font-weight: 700;
}

/* Executed lines */
.tracer-executed {
    opacity: 0.55;
}

/* Syntax tokens */
.tk-kw {
    color: #cba6f7;
    font-weight: 600;
    font-style: normal;
}

.tk-fn {
    color: #89b4fa;
    font-style: normal;
}

.tk-num {
    color: #fab387;
    font-style: normal;
}

.tk-str {
    color: #a6e3a1;
    font-style: normal;
}

.tk-cmt {
    color: #585b70;
    font-style: italic;
}

/* ====== Tracing Spreadsheet Table ====== */
.tracer-sheet-panel {
    background: rgba(15, 23, 42, 0.5);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
}

.tracer-sheet-scroll {
    flex: 1;
    overflow: auto;
    max-height: 480px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Phase Blocks (per-method tables) */
.ts-phase-block {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

.ts-phase-active {
    border-color: rgba(250, 204, 21, 0.2);
    background: rgba(250, 204, 21, 0.03);
}

.ts-phase-done {
    opacity: 0.7;
}

.ts-phase-init {
    border-color: rgba(56, 189, 248, 0.2);
}

.ts-phase-title {
    padding: 0.35rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    letter-spacing: 0.3px;
}

.tracer-sheet {
    width: 100%;
    border-collapse: collapse;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
}

/* Header Row (Group) */
.ts-row-group th {
    padding: 0.5rem 0.4rem;
    text-align: center;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.3px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.08);
}

.ts-corner {
    width: 60px;
    min-width: 60px;
    background: rgba(15, 23, 42, 0.8);
}

.ts-hdr-static {
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
    border-left: 2px solid rgba(56, 189, 248, 0.3);
    border-right: 2px solid rgba(56, 189, 248, 0.15);
}

.ts-hdr-b1 {
    background: rgba(74, 222, 128, 0.12);
    color: #4ade80;
    border-left: 2px solid rgba(74, 222, 128, 0.3);
    border-right: 2px solid rgba(74, 222, 128, 0.15);
}

.ts-hdr-b2 {
    background: rgba(168, 85, 247, 0.12);
    color: #c084fc;
    border-left: 2px solid rgba(168, 85, 247, 0.3);
    border-right: 2px solid rgba(168, 85, 247, 0.15);
}

/* Header Row (Field names) */
.ts-row-fields th {
    padding: 0.35rem 0.3rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-align: center;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap;
}

.ts-static-col {
    color: #7dd3fc;
    background: rgba(56, 189, 248, 0.05);
}

.ts-b1-col {
    color: #86efac;
    background: rgba(74, 222, 128, 0.05);
}

.ts-b2-col {
    color: #d8b4fe;
    background: rgba(168, 85, 247, 0.05);
}

.ts-local-col {
    color: #fde68a;
    background: rgba(250, 204, 21, 0.05);
}

/* Step label column */
.ts-step-label {
    padding: 0.4rem 0.5rem;
    background: rgba(15, 23, 42, 0.8);
    color: #64748b;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    white-space: nowrap;
    position: sticky;
    left: 0;
    z-index: 1;
}

.ts-step-active {
    color: #fbbf24;
    background: rgba(250, 204, 21, 0.08);
}

/* Data cells */
.ts-cell {
    padding: 0.4rem 0.35rem;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: #e2e8f0;
    font-weight: 500;
    vertical-align: middle;
    white-space: nowrap;
    transition: background 0.3s;
}

.ts-empty {
    color: #334155;
    font-style: italic;
    font-weight: 400;
}

.ts-unchanged {
    color: #475569;
}

/* Init row */
.ts-init-row {
    background: rgba(255, 255, 255, 0.02);
}

.ts-init-row .ts-cell {
    color: #94a3b8;
    font-weight: 400;
}

/* Data row */
.ts-data-row {
    background: rgba(250, 204, 21, 0.02);
}

/* ====== Strikethrough Values (Vertical) ====== */
.ts-val {
    display: block;
    line-height: 1.3;
}

.ts-val-old {
    text-decoration: line-through;
    text-decoration-color: #ef4444;
    text-decoration-thickness: 2px;
    color: #64748b;
    opacity: 0.7;
    font-weight: 400;
    font-size: 0.68rem;
}

.ts-val-current {
    font-weight: 700;
    color: #e2e8f0;
}

.ts-val-new {
    color: #fbbf24 !important;
    animation: tsValPulse 0.6s ease;
}

.ts-cell-changed {
    background: rgba(250, 204, 21, 0.1) !important;
}

/* Current step row highlight */
.ts-row-current {
    background: rgba(250, 204, 21, 0.04);
}

/* Static (unchanged) values */
.ts-val-static {
    color: #475569;
    font-weight: 400;
    font-size: 0.68rem;
}

@keyframes tsValPulse {
    0% {
        color: #fde047;
        transform: scale(1.3);
        text-shadow: 0 0 8px rgba(250, 204, 21, 0.5);
    }

    100% {
        color: #fbbf24;
        transform: scale(1);
        text-shadow: none;
    }
}

/* Locals row */
.ts-locals-row {
    background: rgba(99, 102, 241, 0.05);
}

.ts-locals-cell {
    text-align: left !important;
    padding-left: 0.75rem !important;
}

.ts-local-badge {
    display: inline-block;
    background: rgba(250, 204, 21, 0.12);
    color: #fde68a;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    margin-right: 0.5rem;
    font-weight: 600;
}

/* ====== Inline Call Stack ====== */
.tracer-callstack-compact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(15, 23, 42, 0.4);
    flex-wrap: wrap;
}

.tracer-cs-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.tracer-cs-inline {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.tracer-cs-empty {
    color: #475569;
    font-size: 0.75rem;
    font-style: italic;
}

.tracer-cs-frame {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    color: #94a3b8;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.tracer-cs-top {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.3);
    color: #c7d2fe;
    font-weight: 700;
}

.tracer-cs-arrow {
    color: #475569;
    font-size: 0.7rem;
    margin: 0 0.1rem;
}

/* Bottom Grid */
.tracer-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Console */
.tracer-console-panel {
    background: #0f172a;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.tracer-console-body {
    padding: 0.75rem 1rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: #4ade80;
    min-height: 80px;
    max-height: 140px;
    overflow-y: auto;
}

.tracer-console-placeholder {
    color: #475569;
    font-style: italic;
}

.tracer-console-line {
    padding: 0.15rem 0;
    animation: tracerConsoleFade 0.3s ease;
}

@keyframes tracerConsoleFade {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Description Panel */
.tracer-desc-panel {
    background: rgba(15, 23, 42, 0.5);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.tracer-desc-body {
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    color: #cbd5e1;
    line-height: 1.5;
    min-height: 80px;
}

/* Responsive */
@media (max-width: 900px) {
    .tracer-main-grid {
        grid-template-columns: 1fr;
    }

    .tracer-bottom-grid {
        grid-template-columns: 1fr;
    }

    .tracer-code-body {
        max-height: 350px;
    }

    .tracer-sheet-scroll {
        max-height: 400px;
    }
}

/* ═══════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES — Module Intro Card
   ═══════════════════════════════════════════════════════════ */
[data-theme="light"] .oop-module-intro {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(109, 40, 217, 0.05));
    border-color: rgba(99, 102, 241, 0.25);
}

[data-theme="light"] .oop-module-intro::before {
    background: linear-gradient(180deg, #3b82f6, #7c3aed);
}

[data-theme="light"] .oop-module-intro-title {
    color: #2563eb;
}

[data-theme="light"] .oop-module-intro-desc {
    color: #475569;
}

[data-theme="light"] .oop-module-intro-desc strong {
    color: #1e293b;
}

[data-theme="light"] .oop-module-intro-desc code {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
}

[data-theme="light"] .oop-module-intro-real {
    background: rgba(217, 119, 6, 0.08);
    border-color: rgba(217, 119, 6, 0.2);
    color: #b45309;
}

[data-theme="light"] .oop-module-intro-title code {
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
}

[data-theme="light"] .oop-module-intro-real code {
    background: rgba(217, 119, 6, 0.12);
    color: inherit;
}

/* ═══════════════════════════════════════════════════════════
   MODULE 11: ABSTRACTION — Step-Through Simulation Styles
   ═══════════════════════════════════════════════════════════ */

/* Object state boxes */
.m11-sim-obj {
    background: rgba(30, 30, 50, 0.5);
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: 10px;
    padding: 0.75rem;
    transition: opacity 0.4s ease, border-color 0.3s ease;
}

.m11-sim-obj:hover {
    border-color: rgba(139, 92, 246, 0.5);
}

.m11-obj-title {
    font-weight: 700;
    font-size: 0.82rem;
    color: #cba6f7;
    margin-bottom: 0.4rem;
}

.m11-obj-field {
    font-size: 0.78rem;
    color: #94a3b8;
    font-family: 'JetBrains Mono', monospace;
    padding: 2px 0;
}

.m11-obj-val {
    color: #585b70;
    transition: color 0.3s ease;
}

/* Call stack */
.m11-sim-stack {
    background: rgba(30, 30, 50, 0.4);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
}

.m11-stack-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: #38bdf8;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.4rem;
}

.m11-stack-frames {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.m11-frame {
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    font-size: 0.75rem;
    font-family: 'JetBrains Mono', monospace;
    color: #a5b4fc;
    transition: all 0.3s ease;
}

.m11-frame-new {
    animation: m11FramePush 0.35s ease;
}

.m11-frame-pop {
    animation: m11FramePop 0.3s ease forwards;
}

@keyframes m11FramePush {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes m11FramePop {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(30px);
    }
}

/* Console output */
.m11-sim-console {
    background: rgba(10, 10, 20, 0.5);
    border: 1px solid rgba(88, 91, 112, 0.3);
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
}

.m11-console-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: #a6e3a1;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.3rem;
}

.m11-console-body {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    color: #cdd6f4;
    min-height: 1.8rem;
}

.m11-console-line {
    padding: 1px 0;
    animation: m11ConsoleFade 0.3s ease;
}

@keyframes m11ConsoleFade {
    from {
        opacity: 0;
        color: #a6e3a1;
    }

    to {
        opacity: 1;
        color: #cdd6f4;
    }
}

/* ─── Light mode overrides for M11 simulation ─── */
[data-theme="light"] .m11-sim-obj {
    background: rgba(240, 240, 255, 0.7);
    border-color: rgba(139, 92, 246, 0.2);
}

[data-theme="light"] .m11-obj-title {
    color: #7c3aed;
}

[data-theme="light"] .m11-obj-field {
    color: #475569;
}

[data-theme="light"] .m11-obj-val {
    color: #94a3b8;
}

[data-theme="light"] .m11-sim-stack {
    background: rgba(240, 248, 255, 0.7);
    border-color: rgba(56, 189, 248, 0.2);
}

[data-theme="light"] .m11-frame {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.2);
    color: #4f46e5;
}

[data-theme="light"] .m11-sim-console {
    background: rgba(245, 245, 250, 0.8);
    border-color: rgba(100, 116, 139, 0.2);
}

[data-theme="light"] .m11-console-body {
    color: #1e293b;
}

[data-theme="light"] .m11-console-title {
    color: #16a34a;
}