/* ===================================
   Module 2 — Data Structures & Async
   Extra component styles
   =================================== */

/* =============================
   0. DETAILS / SUMMARY STYLING
   ============================= */
.lesson-card details {
    background: var(--bg-tertiary, rgba(26,31,54,0.6));
    border: 1px solid var(--border-color, rgba(255,255,255,0.06));
    border-radius: 10px;
    margin: 0.75rem 0;
    overflow: hidden;
    transition: border-color 0.2s;
}

.lesson-card details:hover {
    border-color: var(--border-hover, rgba(58,68,112,0.8));
}

.lesson-card details[open] {
    border-color: rgba(122,162,255,0.25);
}

.lesson-card details > summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary, #e2e8f0);
    cursor: pointer;
    list-style: none;
    transition: background 0.2s, color 0.2s;
    user-select: none;
}

.lesson-card details > summary::-webkit-details-marker { display: none; }
.lesson-card details > summary::marker { display: none; content: ''; }

.lesson-card details > summary::before {
    content: '▶';
    font-size: 0.65rem;
    color: var(--text-tertiary, #94a3b8);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.lesson-card details[open] > summary::before {
    transform: rotate(90deg);
}

.lesson-card details > summary:hover {
    background: rgba(122,162,255,0.06);
}

.lesson-card details > summary:focus-visible {
    outline: 2px solid var(--accent-primary, #7aa2ff);
    outline-offset: -2px;
    border-radius: 10px 10px 0 0;
}

.lesson-card details > *:not(summary) {
    padding: 0 1.25rem;
}

.lesson-card details > *:not(summary):last-child {
    padding-bottom: 1rem;
}

.lesson-card details > .code-block {
    margin: 0.5rem 1rem 0.75rem;
    padding: 1rem;
}

.lesson-card details > p {
    margin: 0.5rem 0 0.75rem;
    font-size: 0.9rem;
}

[data-theme="light"] .lesson-card details {
    background: rgba(0,0,0,0.015);
    border-color: rgba(0,0,0,0.08);
}

[data-theme="light"] .lesson-card details:hover {
    border-color: rgba(0,0,0,0.15);
}

[data-theme="light"] .lesson-card details[open] {
    border-color: rgba(37,99,235,0.2);
}

[data-theme="light"] .lesson-card details > summary:hover {
    background: rgba(37,99,235,0.04);
}

/* JSON problem-box nested details (override generic card bg) */
.m2-json-problem-box details {
    background: rgba(0,0,0,0.12);
    border-color: rgba(245,158,11,0.15);
}

.m2-json-problem-box details > summary {
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
}

[data-theme="light"] .m2-json-problem-box details {
    background: rgba(0,0,0,0.03);
    border-color: rgba(217,119,6,0.12);
}

/* =============================
   1. SPREAD / REST VISUAL GRID
   ============================= */
.m2-spread-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin: 1.5rem 0;
}

.m2-spread-card {
    text-align: center;
    padding: 1.5rem 1rem;
    border-radius: 14px;
    background: var(--card-bg, rgba(30,41,59,0.5));
    border: 2px solid;
    transition: transform 0.2s, box-shadow 0.2s;
}

.m2-spread-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

.m2-spread-card--rest {
    border-color: rgba(34,197,94,0.4);
    background: rgba(34,197,94,0.06);
}

.m2-spread-card--spread {
    border-color: rgba(59,130,246,0.4);
    background: rgba(59,130,246,0.06);
}

.m2-spread-card__icon {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
}

.m2-spread-card__label {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
    color: var(--text-primary, #e2e8f0);
}

.m2-spread-card--rest .m2-spread-card__label { color: #4ade80; }
.m2-spread-card--spread .m2-spread-card__label { color: #60a5fa; }

.m2-spread-card__direction {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    color: var(--text-secondary, #cbd5e1);
    margin-bottom: 0.5rem;
}

.m2-spread-card__syntax {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    background: rgba(0,0,0,0.25);
    color: var(--text-secondary, #cbd5e1);
    margin-bottom: 0.4rem;
}

.m2-spread-card__desc {
    font-size: 0.82rem;
    color: var(--text-tertiary, #94a3b8);
    font-weight: 500;
}

.m2-hl--rest { color: #4ade80; font-weight: 700; }
.m2-hl--spread { color: #60a5fa; font-weight: 700; }
.m2-hl--obj { color: #fbbf24; font-weight: 600; }
.m2-hl--arr { color: #c084fc; font-weight: 600; }

/* =============================
   2. QUICK REFERENCE
   ============================= */
.m2-quick-ref {
    background: var(--card-bg, rgba(15,23,42,0.7));
    border-radius: 12px;
    padding: 1.25rem;
    margin: 1.5rem 0;
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}

.m2-quick-ref__title {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 1rem;
    color: var(--text-primary, #e2e8f0);
}

.m2-quick-ref__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.m2-quick-ref__item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.75rem;
    border-radius: 8px;
    background: rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.04);
}

.m2-quick-ref__code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    color: var(--text-primary, #e2e8f0);
}

.m2-quick-ref__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-tertiary, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* =============================
   3. TEMPLATE LITERAL COMPARE
   ============================= */
.m2-tl-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1.5rem 0;
}

.m2-tl-compare__old,
.m2-tl-compare__new {
    padding: 1.25rem;
    border-radius: 12px;
    text-align: center;
}

.m2-tl-compare__old {
    background: rgba(239,68,68,0.06);
    border: 2px solid rgba(239,68,68,0.25);
}

.m2-tl-compare__new {
    background: rgba(34,197,94,0.06);
    border: 2px solid rgba(34,197,94,0.25);
}

.m2-tl-compare__label {
    display: block;
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.m2-tl-compare__label--old { color: #f87171; }
.m2-tl-compare__label--new { color: #4ade80; }

.m2-tl-compare__code {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    background: rgba(0,0,0,0.25);
    color: var(--text-primary, #e2e8f0);
}

/* =============================
   4. FEATURE BADGES
   ============================= */
.m2-feature-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 1.5rem;
}

.m2-feature-badge {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    background: rgba(122,162,255,0.12);
    color: #93b4ff;
    border: 1px solid rgba(122,162,255,0.2);
    letter-spacing: 0.02em;
}

.m2-tl-decision {
    background: rgba(59,130,246,0.08);
    border-left: 4px solid #3b82f6;
    border-radius: 0 8px 8px 0;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    font-size: 0.92rem;
    color: var(--text-secondary, #cbd5e1);
}

/* =============================
   5. DESTRUCTURING CARDS
   ============================= */
.m2-destr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin: 1.5rem 0;
}

.m2-destr-card {
    text-align: center;
    padding: 1.5rem 1rem;
    border-radius: 14px;
    background: var(--card-bg, rgba(30,41,59,0.5));
    border: 2px solid rgba(168,85,247,0.25);
    transition: transform 0.2s, box-shadow 0.2s;
}

.m2-destr-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}

.m2-destr-card__icon {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
}

.m2-destr-card__label {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: #c084fc;
}

.m2-destr-card__syntax {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    background: rgba(0,0,0,0.25);
    color: var(--text-secondary, #cbd5e1);
}

/* =============================
   6. JSON SECTION
   ============================= */

/* Origin / Problem Box */
.m2-json-origin {
    margin: 1.5rem 0;
}

.m2-json-problem-box {
    background: var(--card-bg, rgba(15,23,42,0.7));
    border-radius: 12px;
    padding: 1.25rem;
    border: 1px solid rgba(245,158,11,0.25);
}

.m2-json-problem-box h4 {
    color: #f59e0b;
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

/* XML vs JSON comparison */
.m2-json-compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin: 1.5rem 0;
}

.m2-json-compare-card {
    position: relative;
    padding: 1.5rem;
    border-radius: 16px;
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
}

.m2-json-compare-card:hover {
    transform: translateY(-3px);
}

.m2-json-compare-card--xml {
    background: linear-gradient(145deg, rgba(148,163,184,0.08), rgba(148,163,184,0.02));
    border: 2px solid rgba(148,163,184,0.18);
}

.m2-json-compare-card--xml:hover {
    box-shadow: 0 8px 24px rgba(148,163,184,0.1);
}

.m2-json-compare-card--json {
    background: linear-gradient(145deg, rgba(34,197,94,0.1), rgba(34,197,94,0.03));
    border: 2px solid rgba(34,197,94,0.3);
    box-shadow: 0 0 0 1px rgba(34,197,94,0.05);
}

.m2-json-compare-card--json:hover {
    box-shadow: 0 8px 28px rgba(34,197,94,0.15), 0 0 0 1px rgba(34,197,94,0.1);
}

/* Winner badge */
.m2-json-compare-card__winner {
    position: absolute;
    top: 12px;
    right: -28px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.25rem 2.2rem;
    transform: rotate(35deg);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(34,197,94,0.3);
    z-index: 1;
}

/* Header with icon + label */
.m2-json-compare-card__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.m2-json-compare-card__icon {
    font-size: 1.5rem;
    line-height: 1;
}

.m2-json-compare-card__label {
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--text-primary, #e8ecff);
    letter-spacing: -0.02em;
}

/* Code block — multi-line formatted */
.m2-json-compare-card__code {
    display: block;
    text-align: left;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.82rem;
    line-height: 1.65;
    padding: 1rem 1.1rem;
    border-radius: 10px;
    margin-bottom: 0.75rem;
    overflow-x: auto;
}

.m2-json-compare-card__code pre {
    margin: 0;
    padding: 0;
    background: transparent;
}

.m2-json-compare-card__code code {
    background: transparent;
    padding: 0;
    font-size: inherit;
    color: inherit;
}

.m2-json-compare-card--xml .m2-json-compare-card__code {
    background: rgba(148,163,184,0.08);
    border: 1px solid rgba(148,163,184,0.12);
    color: #94a3b8;
}

.m2-json-compare-card--json .m2-json-compare-card__code {
    background: rgba(34,197,94,0.06);
    border: 1px solid rgba(34,197,94,0.15);
    color: #86efac;
}

/* Size indicator */
.m2-json-compare-card__size {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    margin-bottom: 0.75rem;
}

.m2-json-compare-card--xml .m2-json-compare-card__size {
    background: rgba(148,163,184,0.1);
    color: #94a3b8;
}

.m2-json-compare-card--json .m2-json-compare-card__size {
    background: rgba(34,197,94,0.12);
    color: #4ade80;
}

.m2-json-compare-card--json .m2-json-compare-card__size strong {
    color: #22c55e;
}

/* Description text */
.m2-json-compare-card p {
    font-size: 0.88rem;
    color: var(--text-secondary, #cbd5e1);
    line-height: 1.5;
    margin: 0 0 0.75rem;
}

/* Feature tags */
.m2-json-compare-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
}

.m2-json-tag {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    letter-spacing: 0.02em;
}

.m2-json-tag--pro {
    background: rgba(34,197,94,0.12);
    color: #4ade80;
    border: 1px solid rgba(34,197,94,0.2);
}

.m2-json-tag--con {
    background: rgba(239,68,68,0.08);
    color: #f87171;
    border: 1px solid rgba(239,68,68,0.15);
}

.m2-json-tag--neutral {
    background: rgba(148,163,184,0.1);
    color: #94a3b8;
    border: 1px solid rgba(148,163,184,0.15);
}

/* JSON Data Types Grid */
.m2-json-types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin: 1.5rem 0;
}

.m2-json-type-badge {
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    text-align: center;
}

.m2-json-type-badge code {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    margin-top: 0.2rem;
    opacity: 0.8;
}

.m2-json-type-badge--allowed {
    background: rgba(34,197,94,0.08);
    color: #4ade80;
    border: 1px solid rgba(34,197,94,0.2);
}

.m2-json-type-badge--forbidden {
    background: rgba(239,68,68,0.08);
    color: #f87171;
    border: 1px solid rgba(239,68,68,0.2);
}

/* JSON vs JS Differences Table */
.m2-json-diff-table {
    margin: 1.5rem 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}

.m2-json-diff-row {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1.5fr;
    gap: 0;
}

.m2-json-diff-row span {
    padding: 0.65rem 0.75rem;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.m2-json-diff-row--header {
    background: rgba(122,162,255,0.1);
}

.m2-json-diff-row--header span {
    font-weight: 700;
    color: #93b4ff;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.m2-json-diff-row:not(.m2-json-diff-row--header) {
    background: rgba(0,0,0,0.1);
}

.m2-json-diff-row:not(.m2-json-diff-row--header):hover {
    background: rgba(122,162,255,0.04);
}

/* JSON Use Cases */
.m2-json-usecases {
    background: var(--card-bg, rgba(15,23,42,0.7));
    border-radius: 12px;
    padding: 1.25rem;
    margin: 1.5rem 0;
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}

.m2-json-usecases h4 {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary, #e2e8f0);
}

.m2-json-usecases__grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.m2-json-usecase-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    background: rgba(0,0,0,0.12);
    font-size: 0.88rem;
    color: var(--text-secondary, #cbd5e1);
}

.m2-json-usecase-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* =============================
   7. ARRAYS SECTION
   ============================= */

/* Array panel / decision guide */
.m2-arr-panel {
    background: var(--card-bg, rgba(15,23,42,0.7));
    border-radius: 14px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}

.m2-arr-panel__title {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 1rem;
    color: var(--text-primary, #e2e8f0);
}

.m2-arr-decision-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.m2-arr-method-card {
    text-align: center;
    padding: 1rem 0.5rem;
    border-radius: 10px;
    background: rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.04);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: default;
}

.m2-arr-method-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.m2-arr-method-card__icon { font-size: 1.5rem; margin-bottom: 0.3rem; }

.m2-arr-method-card__code {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.m2-arr-method-card--map     .m2-arr-method-card__code { color: #60a5fa; }
.m2-arr-method-card--filter  .m2-arr-method-card__code { color: #4ade80; }
.m2-arr-method-card--reduce  .m2-arr-method-card__code { color: #fbbf24; }
.m2-arr-method-card--find    .m2-arr-method-card__code { color: #f472b6; }
.m2-arr-method-card--foreach .m2-arr-method-card__code { color: #c084fc; }
.m2-arr-method-card--sort    .m2-arr-method-card__code { color: #f87171; }

.m2-arr-method-card__desc {
    font-size: 0.78rem;
    color: var(--text-tertiary, #94a3b8);
}

/* Array Methods Reference */
.m2-arr-methods-ref {
    background: var(--card-bg, rgba(15,23,42,0.7));
    border-radius: 14px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}

.m2-arr-methods-ref h4 {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-primary, #e2e8f0);
    margin-bottom: 0.25rem;
}

.m2-arr-methods-hint {
    font-size: 0.82rem;
    color: var(--text-tertiary, #94a3b8);
    margin-bottom: 1rem;
}

.m2-arr-category {
    margin-bottom: 1rem;
    padding: 1rem 1.15rem;
    border-radius: 12px;
    background: rgba(0,0,0,0.12);
    border: 1px solid rgba(255,255,255,0.04);
    transition: border-color 0.2s, background 0.2s;
}

.m2-arr-category:hover {
    border-color: rgba(255,255,255,0.08);
}

/* Category-specific left accent border */
.m2-arr-category--search   { border-left: 3px solid rgba(96,165,250,0.5); }
.m2-arr-category--transform { border-left: 3px solid rgba(74,222,128,0.5); }
.m2-arr-category--mutating  { border-left: 3px solid rgba(248,113,113,0.5); }
.m2-arr-category--safe      { border-left: 3px solid rgba(167,139,250,0.5); }
.m2-arr-category--static    { border-left: 3px solid rgba(251,191,36,0.5); }

.m2-arr-category__title {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--text-primary, #e2e8f0);
    margin-bottom: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.m2-arr-category--search   .m2-arr-category__title { color: #60a5fa; }
.m2-arr-category--transform .m2-arr-category__title { color: #4ade80; }
.m2-arr-category--mutating  .m2-arr-category__title { color: #f87171; }
.m2-arr-category--safe      .m2-arr-category__title { color: #a78bfa; }
.m2-arr-category--static    .m2-arr-category__title { color: #fbbf24; }

.m2-arr-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.m2-arr-badge {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(122,162,255,0.1);
    color: #93b4ff;
    border: 1px solid rgba(122,162,255,0.15);
    cursor: help;
    position: relative;
    transition: all 0.2s ease;
}

.m2-arr-badge:hover {
    background: rgba(122,162,255,0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Tooltip on hover */
.m2-arr-badge[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #1a1f36, #1e293b);
    color: #e2e8f0;
    font-family: 'JetBrains Mono', 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5;
    padding: 0.6rem 0.85rem;
    border-radius: 10px;
    max-width: 260px;
    width: max-content;
    white-space: normal;
    text-align: left;
    z-index: 200;
    border: 1px solid rgba(122,162,255,0.2);
    box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(122,162,255,0.08);
    pointer-events: none;
    animation: m2-tooltip-in 0.15s ease-out;
}

@keyframes m2-tooltip-in {
    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.m2-arr-badge[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1a1f36;
    z-index: 200;
    pointer-events: none;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2));
}

/* Category-specific badge colors */
.m2-arr-category--search .m2-arr-badge   { background: rgba(59,130,246,0.1); color: #60a5fa; border-color: rgba(59,130,246,0.2); }
.m2-arr-category--transform .m2-arr-badge { background: rgba(34,197,94,0.1); color: #4ade80; border-color: rgba(34,197,94,0.2); }
.m2-arr-category--mutating .m2-arr-badge  { background: rgba(239,68,68,0.1); color: #f87171; border-color: rgba(239,68,68,0.2); }
.m2-arr-category--safe .m2-arr-badge      { background: rgba(167,139,250,0.1); color: #a78bfa; border-color: rgba(167,139,250,0.2); }
.m2-arr-category--static .m2-arr-badge    { background: rgba(251,191,36,0.1); color: #fbbf24; border-color: rgba(251,191,36,0.2); }

/* Category-specific hover glow */
.m2-arr-category--search .m2-arr-badge:hover   { background: rgba(59,130,246,0.22); box-shadow: 0 4px 14px rgba(59,130,246,0.2); }
.m2-arr-category--transform .m2-arr-badge:hover { background: rgba(34,197,94,0.22); box-shadow: 0 4px 14px rgba(34,197,94,0.2); }
.m2-arr-category--mutating .m2-arr-badge:hover  { background: rgba(239,68,68,0.22); box-shadow: 0 4px 14px rgba(239,68,68,0.2); }
.m2-arr-category--safe .m2-arr-badge:hover      { background: rgba(167,139,250,0.22); box-shadow: 0 4px 14px rgba(167,139,250,0.2); }
.m2-arr-category--static .m2-arr-badge:hover    { background: rgba(251,191,36,0.22); box-shadow: 0 4px 14px rgba(251,191,36,0.2); }

/* Sort Warning */
.m2-arr-warning {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.2);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    font-size: 0.88rem;
    color: var(--text-secondary, #cbd5e1);
}

.m2-arr-warning__icon { font-size: 1.25rem; flex-shrink: 0; }

.m2-arr-warning__code--bad { color: #f87171; font-weight: 700; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; }
.m2-arr-warning__code--good { color: #4ade80; font-weight: 600; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; }
.m2-arr-warning__text { color: var(--text-secondary, #cbd5e1); }

/* =============================
   8. ERROR HANDLING SECTION
   ============================= */

/* Error Panel */
.m2-error-panel {
    background: var(--card-bg, rgba(15,23,42,0.7));
    border-radius: 14px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}

.m2-error-panel__title {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 1rem;
    color: var(--text-primary, #e2e8f0);
}

/* Error Flow Diagram */
.m2-error-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.m2-error-block {
    text-align: center;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    min-width: 180px;
}

.m2-error-block__title {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 0.9rem;
}

.m2-error-block__desc {
    font-size: 0.78rem;
    color: var(--text-tertiary, #94a3b8);
    margin-top: 0.2rem;
}

.m2-error-block--try {
    background: rgba(59,130,246,0.12);
    border: 2px solid rgba(59,130,246,0.35);
    width: 100%;
    max-width: 300px;
}

.m2-error-block--try .m2-error-block__title { color: #60a5fa; }

.m2-error-block--success {
    background: rgba(34,197,94,0.1);
    border: 1px solid rgba(34,197,94,0.25);
}

.m2-error-block--success .m2-error-block__title { color: #4ade80; }

.m2-error-block--catch {
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.25);
}

.m2-error-block--catch .m2-error-block__title { color: #f87171; }

.m2-error-block--finally {
    background: rgba(168,85,247,0.1);
    border: 1px dashed rgba(168,85,247,0.35);
    width: 100%;
    max-width: 300px;
}

.m2-error-block--finally .m2-error-block__title { color: #c084fc; }

.m2-error-outcomes {
    display: flex;
    gap: 3rem;
    justify-content: center;
}

.m2-error-outcome {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.m2-error-outcome__icon--success { color: #4ade80; font-size: 1.1rem; }
.m2-error-outcome__icon--error { color: #f87171; font-size: 1.1rem; }
.m2-error-outcome__label { color: var(--text-secondary, #cbd5e1); }

.m2-error-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    width: 100%;
    max-width: 400px;
}

.m2-error-arrow {
    font-size: 1.25rem;
    color: var(--text-tertiary, #94a3b8);
}

/* Error Type Badges */
.m2-error-types {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.5rem;
}

.m2-error-badge {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    font-weight: 600;
}

.m2-error-badge--type      { background: rgba(59,130,246,0.12); color: #60a5fa; border: 1px solid rgba(59,130,246,0.2); }
.m2-error-badge--range     { background: rgba(34,197,94,0.12);  color: #4ade80; border: 1px solid rgba(34,197,94,0.2); }
.m2-error-badge--syntax    { background: rgba(251,191,36,0.12); color: #fbbf24; border: 1px solid rgba(251,191,36,0.2); }
.m2-error-badge--reference { background: rgba(239,68,68,0.12);  color: #f87171; border: 1px solid rgba(239,68,68,0.2); }

/* =============================
   9. PROMISES & ASYNC SECTION
   ============================= */

/* Intro Box (Pizza) */
.m2-promise-intro-box {
    background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(251,191,36,0.04));
    border: 2px solid rgba(245,158,11,0.2);
    border-radius: 14px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.m2-promise-intro-heading {
    font-weight: 700;
    font-size: 1.1rem;
    color: #fbbf24;
    margin-bottom: 0.75rem;
}

.m2-promise-intro-box p {
    font-size: 0.92rem;
    color: var(--text-secondary, #cbd5e1);
    margin-bottom: 0.5rem;
}

/* Blocking vs Non-Blocking Comparison */
.m2-promise-compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1.5rem 0;
}

.m2-promise-compare-box {
    padding: 1.25rem;
    border-radius: 12px;
}

.m2-promise-compare-box--blocking {
    background: rgba(239,68,68,0.06);
    border: 2px solid rgba(239,68,68,0.2);
}

.m2-promise-compare-box--nonblocking {
    background: rgba(34,197,94,0.06);
    border: 2px solid rgba(34,197,94,0.2);
}

.m2-promise-compare-title {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.m2-promise-compare-box--blocking .m2-promise-compare-title { color: #f87171; }
.m2-promise-compare-box--nonblocking .m2-promise-compare-title { color: #4ade80; }

.m2-promise-compare-steps {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-secondary, #cbd5e1);
}

/* Timeline Visualization */
.m2-timeline-box {
    background: var(--card-bg, rgba(15,23,42,0.7));
    border-radius: 14px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}

.m2-timeline-box h3 {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 1rem;
    color: var(--text-primary, #e2e8f0);
}

.m2-timeline-section {
    padding: 1rem;
    border-radius: 10px;
    margin-bottom: 1rem;
}

.m2-timeline-section--sync {
    background: rgba(239,68,68,0.05);
    border: 1px solid rgba(239,68,68,0.15);
}

.m2-timeline-section--async {
    background: rgba(34,197,94,0.05);
    border: 1px solid rgba(34,197,94,0.15);
}

.m2-timeline-section__header {
    font-weight: 700;
    font-size: 0.88rem;
    margin-bottom: 0.75rem;
}

.m2-timeline-section--sync .m2-timeline-section__header { color: #f87171; }
.m2-timeline-section--async .m2-timeline-section__header { color: #4ade80; }

.m2-task-flow {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.m2-task-badge {
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(59,130,246,0.15);
    color: #60a5fa;
}

.m2-task-arrow { color: var(--text-tertiary, #94a3b8); font-size: 0.9rem; }

.m2-wait-badge {
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
    font-size: 0.78rem;
    background: rgba(239,68,68,0.1);
    color: #f87171;
}

.m2-parallel-tasks { margin-bottom: 0.75rem; }

.m2-parallel-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.m2-start-badge {
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(34,197,94,0.15);
    color: #4ade80;
}

.m2-parallel-arrow { font-size: 0.9rem; }

.m2-running-label {
    font-size: 0.78rem;
    color: var(--text-tertiary, #94a3b8);
    font-style: italic;
}

.m2-time-calc {
    font-size: 0.85rem;
    color: var(--text-secondary, #cbd5e1);
}

.m2-time-calc code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
}

.m2-time-result { font-weight: 700; }
.m2-time-result--slow { color: #f87171; }
.m2-time-result--fast { color: #4ade80; }

/* Insight Box */
.m2-insight-box {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background: rgba(59,130,246,0.08);
    border: 1px solid rgba(59,130,246,0.2);
    font-size: 0.88rem;
    color: var(--text-secondary, #cbd5e1);
}

.m2-insight-icon { font-size: 1.25rem; flex-shrink: 0; }

/* Section headings with color accents */
.m2-section-heading {
    font-weight: 700;
    font-size: 1.15rem;
    margin: 2rem 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid;
}

.m2-section-heading--amber  { color: #fbbf24; border-color: rgba(251,191,36,0.3); }
.m2-section-heading--purple { color: #c084fc; border-color: rgba(192,132,252,0.3); }
.m2-section-heading--green  { color: #4ade80; border-color: rgba(74,222,128,0.3); }

/* Note boxes (colored) */
.m2-note-purple,
.m2-note-indigo,
.m2-note-green,
.m2-note-amber,
.m2-note-red {
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin: 1rem 0;
    font-size: 0.92rem;
    color: var(--text-secondary, #cbd5e1);
}

.m2-note-purple {
    background: rgba(168,85,247,0.08);
    border-left: 4px solid #a855f7;
}

.m2-note-indigo {
    background: rgba(99,102,241,0.08);
    border-left: 4px solid #6366f1;
}

.m2-note-green {
    background: rgba(34,197,94,0.08);
    border-left: 4px solid #22c55e;
}

.m2-note-amber {
    background: rgba(245,158,11,0.08);
    border-left: 4px solid #f59e0b;
}

.m2-note-red {
    background: rgba(239,68,68,0.08);
    border-left: 4px solid #ef4444;
}

.m2-note-indigo h3 { color: #818cf8; margin-bottom: 0.5rem; }

/* Note list (for bulleted takeaways inside note boxes) */
.m2-note-list {
    padding-left: 1.25rem;
    margin: 0.5rem 0 0;
    list-style: disc;
}

.m2-note-list li {
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
}

/* Evolution footnote */
.m2-evolution-footnote {
    font-size: 0.88rem;
    color: var(--text-muted, #94a3b8);
    margin-top: 0.5rem;
}

.m2-evolution-list {
    padding-left: 1.25rem;
    margin: 0.5rem 0 0;
}

.m2-evolution-list li {
    margin-bottom: 0.5rem;
    font-size: 0.88rem;
}

/* =============================
   10. PROMISE LIFECYCLE DIAGRAM
   ============================= */
.m2-promise-lifecycle {
    background: var(--card-bg, rgba(15,23,42,0.7));
    border-radius: 16px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}

/* --- Scenario Picker --- */
.m2-promise-scenario-picker {
    background: linear-gradient(135deg, rgba(122,162,255,0.08), rgba(99,102,241,0.06));
    border: 1px solid rgba(122,162,255,0.15);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.m2-scenario-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.m2-scenario-header__icon {
    font-size: 1.15rem;
}

.m2-scenario-header__text {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #7aa2ff;
}

.m2-promise-demo-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.m2-promise-demo-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border-radius: 10px;
    border: 1.5px solid rgba(122,162,255,0.2);
    background: rgba(122,162,255,0.06);
    color: #93b4ff;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.m2-demo-btn__icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.m2-demo-btn__label {
    white-space: nowrap;
}

.m2-promise-demo-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(122,162,255,0.15), rgba(99,102,241,0.1));
    opacity: 0;
    transition: opacity 0.25s ease;
}

.m2-promise-demo-btn:hover {
    border-color: rgba(122,162,255,0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(122,162,255,0.15);
}

.m2-promise-demo-btn:hover::before {
    opacity: 1;
}

.m2-promise-demo-btn.active {
    background: rgba(122,162,255,0.2);
    border-color: #7aa2ff;
    color: #e2e8f0;
    box-shadow: 0 0 0 2px rgba(122,162,255,0.15), 0 4px 16px rgba(122,162,255,0.2);
}

.m2-promise-demo-btn.active::before {
    opacity: 1;
    background: linear-gradient(135deg, rgba(122,162,255,0.2), rgba(99,102,241,0.15));
}

/* --- Playback Toolbar --- */
.m2-promise-playback-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: rgba(0,0,0,0.25);
    border-radius: 10px;
    padding: 0.6rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(255,255,255,0.05);
}

.m2-playback-left {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.m2-promise-ctrl-btn {
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    border: 1px solid rgba(122,162,255,0.2);
    background: rgba(122,162,255,0.08);
    color: #93b4ff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.m2-promise-ctrl-btn:hover:not(:disabled) {
    background: rgba(122,162,255,0.18);
    border-color: rgba(122,162,255,0.35);
}

.m2-promise-ctrl-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.m2-reset-btn {
    border-color: rgba(239,68,68,0.2);
    background: rgba(239,68,68,0.06);
    color: #f87171;
}

.m2-reset-btn:hover {
    background: rgba(239,68,68,0.15) !important;
    border-color: rgba(239,68,68,0.35) !important;
}

.m2-hidden { display: none !important; }

.m2-playback-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.m2-playback-step-dots {
    display: flex;
    align-items: center;
    gap: 5px;
}

.m2-step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(122,162,255,0.15);
    border: 1.5px solid rgba(122,162,255,0.25);
    transition: all 0.3s ease;
}

.m2-step-dot.active {
    background: #7aa2ff;
    border-color: #7aa2ff;
    box-shadow: 0 0 6px rgba(122,162,255,0.5);
    transform: scale(1.3);
}

.m2-step-dot.done {
    background: #22c55e;
    border-color: #22c55e;
}

.m2-promise-step-text {
    font-size: 0.78rem;
    color: var(--text-tertiary, #94a3b8);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* --- Explanation box --- */
.m2-promise-explanation {
    background: linear-gradient(135deg, rgba(0,0,0,0.2), rgba(122,162,255,0.03));
    border-radius: 10px;
    border-left: 3px solid #7aa2ff;
    padding: 0.85rem 1.15rem;
    margin-bottom: 0.75rem;
    min-height: 50px;
}

.m2-promise-explanation__title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary, #e2e8f0);
    margin-bottom: 0.3rem;
}

.m2-promise-explanation__text {
    font-size: 0.82rem;
    color: var(--text-tertiary, #94a3b8);
    line-height: 1.5;
}

.m2-promise-step-desc {
    font-size: 0.85rem;
    font-weight: 500;
    color: #93b4ff;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(122,162,255,0.05);
    border-radius: 8px;
    min-height: 1.25rem;
    transition: color 0.3s;
}

/* SVG element interactions — rich animation system */
@keyframes m2-promisePulse {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(122,162,255,0.4)); }
    50%      { filter: drop-shadow(0 0 20px rgba(122,162,255,0.8)); }
}

@keyframes m2-handlerGlow {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(91,227,125,0.4)); }
    50%      { filter: drop-shadow(0 0 20px rgba(91,227,125,0.9)); }
}

.m2-promise-state {
    transition: all 0.4s ease;
    transform-origin: center;
    opacity: 1;
}

.m2-promise-state.active {
    filter: drop-shadow(0 0 16px rgba(122,162,255,0.7));
    animation: m2-promisePulse 1.5s ease-in-out infinite;
    opacity: 1;
}

.m2-promise-state.dimmed {
    opacity: 0.25;
    filter: grayscale(0.5);
}

.m2-promise-state.active rect {
    transform: scale(1.03);
    transform-origin: center;
    transform-box: fill-box;
    transition: transform 0.3s ease;
}

.m2-promise-handler {
    transition: all 0.4s ease;
    transform-origin: center;
    opacity: 1;
}

.m2-promise-handler.active {
    filter: drop-shadow(0 0 14px rgba(91,227,125,0.6));
    animation: m2-handlerGlow 1s ease-in-out;
    opacity: 1;
}

.m2-promise-handler.dimmed {
    opacity: 0.2;
}

/* Flow arrows — stroke-dashoffset draw animation */
.m2-promise-flow {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    opacity: 0;
    transition: stroke-dashoffset 1s ease-in-out, opacity 0.3s ease;
    marker-end: none;
}

.m2-promise-flow[data-flow="chain-to-pending"] {
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
}

.m2-promise-flow.animate {
    stroke-dashoffset: 0;
    opacity: 1;
    marker-end: none;
}

.m2-promise-flow.complete {
    opacity: 0.85;
}

/* Show arrowheads only when animation completes */
.m2-promise-flow[data-flow="resolve"].complete    { marker-end: url(#m2-arrow-green); }
.m2-promise-flow[data-flow="reject"].complete     { marker-end: url(#m2-arrow-red); }
.m2-promise-flow[data-flow="then"].complete       { marker-end: url(#m2-arrow); }
.m2-promise-flow[data-flow="catch"].complete      { marker-end: url(#m2-arrow-red); }
.m2-promise-flow[data-flow="chain-then"].complete { marker-end: url(#m2-arrow-purple); }
.m2-promise-flow[data-flow="chain-to-pending"].complete { marker-end: url(#m2-arrow-yellow); }
.m2-promise-flow[data-flow="resolve-2"].complete  { marker-end: url(#m2-arrow-green); }
.m2-promise-flow[data-flow="then-2"].complete     { marker-end: url(#m2-arrow); }
.m2-promise-flow[data-flow="then-finally"].complete  { marker-end: url(#m2-arrow-violet); }
.m2-promise-flow[data-flow="catch-finally"].complete { marker-end: url(#m2-arrow-violet); }

.m2-promise-label {
    opacity: 0;
    transition: opacity 0.4s ease;
    font-weight: 600;
}

.m2-promise-label.show { opacity: 1; }

/* Diagram overlay */
.m2-promise-diagram-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15,18,32,0.7);
    backdrop-filter: blur(4px);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.m2-promise-diagram-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.m2-promise-diagram-overlay .overlay-content {
    text-align: center;
}

.m2-promise-diagram-overlay .overlay-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
}

.m2-promise-diagram-overlay .overlay-text {
    color: var(--text-secondary, #cbd5e1);
    font-size: 0.95rem;
}

.m2-promise-diagram-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

.m2-promise-diagram-container.blurred .m2-promise-svg {
    filter: blur(3px);
    opacity: 0.5;
}

[data-theme="light"] .m2-promise-diagram-overlay {
    background: rgba(255,255,255,0.7);
}

[data-theme="light"] .m2-promise-diagram-overlay .overlay-text {
    color: #475569;
}

/* =============================
   11. PROMISE TABS (Examples)
   ============================= */
.m2-promise-examples {
    background: var(--card-bg, rgba(15,23,42,0.7));
    border-radius: 14px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}

.m2-promise-examples h4 {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary, #e2e8f0);
}

.m2-promise-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid rgba(255,255,255,0.06);
    padding-bottom: 0.5rem;
}

.m2-promise-tab {
    padding: 0.4rem 0.85rem;
    border-radius: 8px 8px 0 0;
    border: none;
    background: transparent;
    color: var(--text-tertiary, #94a3b8);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.m2-promise-tab:hover {
    background: rgba(122,162,255,0.08);
    color: var(--text-secondary, #cbd5e1);
}

.m2-promise-tab.active {
    background: rgba(122,162,255,0.15);
    color: #93b4ff;
    border-bottom: 2px solid #7aa2ff;
    margin-bottom: -2px;
}

.m2-promise-tab-content {
    display: none;
}

.m2-promise-tab-content.active {
    display: block;
}

/* =============================
   12. PROMISE STATIC METHODS
   ============================= */
.m2-promise-static-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1.5rem 0;
}

.m2-promise-static-box {
    padding: 1.25rem;
    border-radius: 12px;
    min-width: 0;
    overflow: hidden;
}

.m2-promise-static-box h5 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.m2-promise-static-box p {
    font-size: 0.85rem;
    color: var(--text-secondary, #cbd5e1);
    margin-bottom: 0.75rem;
}

.m2-promise-static-box--resolve {
    background: rgba(34,197,94,0.06);
    border: 2px solid rgba(34,197,94,0.2);
}

.m2-promise-static-box--resolve h5 { color: #4ade80; }

.m2-promise-static-box--reject {
    background: rgba(239,68,68,0.06);
    border: 2px solid rgba(239,68,68,0.2);
}

.m2-promise-static-box--reject h5 { color: #f87171; }

/* Code blocks inside static boxes need reduced margin */
.m2-promise-static-box .code-block {
    margin: 0.5rem 0 0;
    padding: 0.85rem;
    font-size: 0.78rem;
    overflow-x: auto;
    max-width: 100%;
}

.m2-promise-static-box .code-block pre {
    margin: 0;
    white-space: pre;
    overflow-x: auto;
}

/* =============================
   13. COMPARISON TABLE
   ============================= */
.m2-comparison-table {
    background: var(--card-bg, rgba(15,23,42,0.7));
    border-radius: 16px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}

.m2-compare-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.m2-compare-category {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 1rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(0,0,0,0.15), rgba(0,0,0,0.05));
    border: 1px solid rgba(255,255,255,0.04);
    align-items: start;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.m2-compare-category:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.m2-compare-category__icon {
    font-size: 1.6rem;
    grid-row: span 2;
    align-self: center;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(122,162,255,0.08);
    border: 1px solid rgba(122,162,255,0.12);
}

.m2-compare-category__label {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text-primary, #e2e8f0);
    letter-spacing: 0.01em;
}

.m2-compare-values {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.m2-compare-item {
    font-size: 0.84rem;
    color: var(--text-secondary, #cbd5e1);
    padding: 0.3rem 0;
    line-height: 1.5;
}

.m2-compare-item code {
    background: rgba(122,162,255,0.1);
    color: #93b4ff;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-family: 'JetBrains Mono', monospace;
}

.m2-compare-key {
    font-weight: 700;
    color: var(--text-primary, #e2e8f0);
    margin-right: 0.25rem;
}

/* =============================
   14. COMMON MISTAKES
   ============================= */
.m2-warn-mistakes {
    background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(239,68,68,0.04));
    border: 2px solid rgba(245,158,11,0.2);
    border-radius: 16px;
    padding: 1.75rem;
    margin: 1.5rem 0;
    position: relative;
}

.m2-warn-mistakes::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #f59e0b, #ef4444);
    border-radius: 4px 0 0 4px;
}

.m2-warn-mistakes h4 {
    color: #f59e0b;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    padding-left: 0.5rem;
}

.m2-mistake-list {
    padding-left: 1.5rem;
    counter-reset: mistake;
    list-style: none;
}

.m2-mistake-list li {
    margin-bottom: 1rem;
    font-size: 0.88rem;
    color: var(--text-secondary, #cbd5e1);
    line-height: 1.6;
    position: relative;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    background: rgba(0,0,0,0.12);
    border-radius: 10px;
    border: 1px solid rgba(245,158,11,0.1);
}

.m2-mistake-list li::before {
    counter-increment: mistake;
    content: counter(mistake);
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(245,158,11,0.2);
    color: #fbbf24;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.m2-mistake-list li:last-child {
    margin-bottom: 0;
}

.m2-mistake-list li code {
    background: rgba(245,158,11,0.12);
    color: #fbbf24;
    padding: 0.15rem 0.45rem;
    border-radius: 5px;
    font-size: 0.8rem;
    font-family: 'JetBrains Mono', monospace;
    border: 1px solid rgba(245,158,11,0.1);
    white-space: nowrap;
}

/* Code blocks inside mistake list items */
.m2-mistake-list li .code-block {
    margin: 0.75rem -0.5rem 0.25rem;
    border-radius: 8px;
}

.m2-mistake-list li .code-block pre code {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    white-space: pre;
    font-size: 0.82rem;
}

/* =============================
   15. WHEN TO USE / RECOMMENDATIONS
   ============================= */
.m2-when-container {
    margin: 1.5rem 0;
}

.m2-when-container h4 {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: var(--text-primary, #e2e8f0);
}

.m2-when-grid {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.m2-recommendation-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    font-size: 0.9rem;
    color: var(--text-secondary, #cbd5e1);
    line-height: 1.5;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.m2-recommendation-box:hover {
    transform: translateX(4px);
}

.m2-recommendation-emoji {
    font-size: 1.5rem;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.m2-recommendation-box--green {
    background: linear-gradient(135deg, rgba(34,197,94,0.1), rgba(34,197,94,0.04));
    border: 1.5px solid rgba(34,197,94,0.2);
}

.m2-recommendation-box--green .m2-recommendation-emoji {
    background: rgba(34,197,94,0.12);
}

.m2-recommendation-box--green strong { color: #4ade80; }

.m2-recommendation-box--green:hover {
    box-shadow: 0 4px 16px rgba(34,197,94,0.1);
}

.m2-recommendation-box--blue {
    background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(59,130,246,0.04));
    border: 1.5px solid rgba(59,130,246,0.2);
}

.m2-recommendation-box--blue .m2-recommendation-emoji {
    background: rgba(59,130,246,0.12);
}

.m2-recommendation-box--blue strong { color: #60a5fa; }

.m2-recommendation-box--blue:hover {
    box-shadow: 0 4px 16px rgba(59,130,246,0.1);
}

.m2-recommendation-box--amber {
    background: linear-gradient(135deg, rgba(245,158,11,0.1), rgba(245,158,11,0.04));
    border: 1.5px solid rgba(245,158,11,0.2);
}

.m2-recommendation-box--amber .m2-recommendation-emoji {
    background: rgba(245,158,11,0.12);
}

.m2-recommendation-box--amber strong { color: #fbbf24; }

.m2-recommendation-box--amber:hover {
    box-shadow: 0 4px 16px rgba(245,158,11,0.1);
}

/* Remember Box */
.m2-remember-box {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(99,102,241,0.04));
    border: 2px solid rgba(99,102,241,0.2);
    margin: 1.5rem 0;
    font-size: 0.92rem;
    color: var(--text-secondary, #cbd5e1);
    line-height: 1.6;
}

.m2-remember-box > .m2-recommendation-emoji {
    background: rgba(99,102,241,0.12);
}

.m2-remember-box strong { color: #a5b4fc; }

.m2-remember-box p { margin: 0.35rem 0 0; }

/* =============================
   15b. ADVANTAGES BOX
   ============================= */
.m2-advantages-box {
    background: linear-gradient(135deg, rgba(168,85,247,0.08), rgba(99,102,241,0.06));
    border: 2px solid rgba(168,85,247,0.2);
    border-radius: var(--radius, 14px);
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.m2-advantages-box h4 {
    margin: 0 0 1rem;
    font-size: 1.15rem;
    color: #c084fc;
}

.m2-advantages-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.m2-advantage-card {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    background: rgba(168,85,247,0.06);
    border: 1px solid rgba(168,85,247,0.12);
    border-radius: 10px;
    padding: 1rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.m2-advantage-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(168,85,247,0.15);
}

.m2-advantage-card__icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1.2rem;
    background: rgba(168,85,247,0.12);
    flex-shrink: 0;
}

.m2-advantage-card__content strong {
    color: #c084fc;
    font-size: 0.95rem;
    display: block;
    margin-bottom: 0.3rem;
}

.m2-advantage-card__content p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary, #cbd5e1);
    line-height: 1.5;
}

.m2-advantage-card__content code {
    background: rgba(168,85,247,0.12);
    color: #c084fc;
    padding: 0.1em 0.35em;
    border-radius: 4px;
    font-size: 0.82em;
}

/* =============================
   15c. COMBINATOR SPEC + COMPARISON
   ============================= */
.m2-combinator-heading {
    margin: 1.5rem 0 0.5rem;
    font-size: 1.05rem;
    color: var(--text-primary, #e8ecff);
    border-bottom: 2px solid rgba(122,162,255,0.15);
    padding-bottom: 0.5rem;
}

.m2-combinator-heading code {
    color: #7aa2ff;
    font-size: 0.95em;
}

.m2-combinator-spec {
    background: linear-gradient(135deg, rgba(122,162,255,0.06), rgba(122,162,255,0.02));
    border: 1px solid rgba(122,162,255,0.12);
    border-radius: 10px;
    padding: 0.8rem 1rem;
    margin-bottom: 0.75rem;
}

.m2-combinator-spec p {
    margin: 0.25rem 0;
    font-size: 0.88rem;
    color: var(--text-secondary, #cbd5e1);
    line-height: 1.5;
}

.m2-combinator-spec strong {
    color: #7aa2ff;
    min-width: 80px;
    display: inline-block;
}

.m2-combinator-spec code {
    background: rgba(122,162,255,0.1);
    color: #93b4ff;
    padding: 0.1em 0.35em;
    border-radius: 4px;
    font-size: 0.85em;
}

.m2-combinator-comparison {
    background: linear-gradient(135deg, rgba(251,191,36,0.08), rgba(251,191,36,0.03));
    border: 2px solid rgba(251,191,36,0.2);
    border-radius: var(--radius, 14px);
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
}

.m2-combinator-comparison h4 {
    margin: 0 0 0.75rem;
    color: #fbbf24;
    font-size: 1.05rem;
}

.m2-combinator-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.m2-combinator-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(251,191,36,0.1);
    font-size: 0.9rem;
    color: var(--text-secondary, #cbd5e1);
    line-height: 1.5;
}

.m2-combinator-list li:last-child { border-bottom: none; }

.m2-combinator-list code {
    background: rgba(251,191,36,0.12);
    color: #fbbf24;
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 600;
}

.m2-combinator-list em {
    color: var(--text-tertiary, #8891a8);
}

/* =============================
   PROMISE LIFECYCLE PIPELINE
   ============================= */
.m2-pipeline-diagram {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem 1.5rem;
    margin: 1.5rem 0;
}
.m2-pipeline-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    border-left: 4px solid var(--accent);
    transition: box-shadow 0.2s;
}
.m2-pipeline-step:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.18); }
.m2-pipeline-step--amber { border-left-color: #f59e0b; }
.m2-pipeline-step--green { border-left-color: #22c55e; }
.m2-pipeline-step--red { border-left-color: #ef4444; }
.m2-pipeline-icon { font-size: 1.6rem; min-width: 40px; text-align: center; padding-top: 2px; }
.m2-pipeline-content { flex: 1; min-width: 0; }
.m2-pipeline-content strong { font-size: 1.1rem; color: var(--text-primary); display: block; margin-bottom: 0.4rem; }
.m2-pipeline-content p { font-size: 0.92rem; color: var(--text-secondary); line-height: 1.65; margin: 0; }
.m2-pipeline-content code { background: rgba(99,102,241,0.13); padding: 1px 5px; border-radius: 4px; font-size: 0.85em; color: var(--accent); }
.m2-pipeline-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 0;
    color: var(--accent);
    font-size: 0.85rem;
}
.m2-pipeline-arrow span { font-size: 1.1rem; }
.m2-pipeline-arrow em { font-style: italic; font-family: 'Fira Code', monospace; font-size: 0.8rem; opacity: 0.8; }

/* Light theme pipeline overrides */
[data-theme="light"] .m2-pipeline-diagram { background: #f1f5f9; }
[data-theme="light"] .m2-pipeline-step { background: #ffffff; }
[data-theme="light"] .m2-pipeline-content code { background: rgba(99,102,241,0.1); color: #4f46e5; }

/* =============================
   16. LIGHT THEME OVERRIDES
   ============================= */
[data-theme="light"] .m2-spread-card,
[data-theme="light"] .m2-destr-card,
[data-theme="light"] .m2-arr-method-card,
[data-theme="light"] .m2-error-block,
[data-theme="light"] .m2-quick-ref__item {
    background: rgba(0,0,0,0.025);
}

[data-theme="light"] .m2-arr-category {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.06);
}

[data-theme="light"] .m2-arr-category:hover {
    border-color: rgba(0,0,0,0.1);
}

[data-theme="light"] .m2-arr-category--search   { border-left-color: rgba(37,99,235,0.4); }
[data-theme="light"] .m2-arr-category--transform { border-left-color: rgba(22,163,106,0.4); }
[data-theme="light"] .m2-arr-category--mutating  { border-left-color: rgba(220,38,38,0.4); }
[data-theme="light"] .m2-arr-category--safe      { border-left-color: rgba(124,58,237,0.4); }
[data-theme="light"] .m2-arr-category--static    { border-left-color: rgba(217,119,6,0.4); }

[data-theme="light"] .m2-arr-category--search   .m2-arr-category__title { color: #2563eb; }
[data-theme="light"] .m2-arr-category--transform .m2-arr-category__title { color: #16a34a; }
[data-theme="light"] .m2-arr-category--mutating  .m2-arr-category__title { color: #dc2626; }
[data-theme="light"] .m2-arr-category--safe      .m2-arr-category__title { color: #7c3aed; }
[data-theme="light"] .m2-arr-category--static    .m2-arr-category__title { color: #d97706; }

[data-theme="light"] .m2-spread-card__syntax,
[data-theme="light"] .m2-destr-card__syntax,
[data-theme="light"] .m2-tl-compare__code {
    background: rgba(0,0,0,0.06);
    color: #334155;
}

[data-theme="light"] .m2-hl--rest { color: #16a34a; }
[data-theme="light"] .m2-hl--spread { color: #2563eb; }
[data-theme="light"] .m2-hl--obj { color: #d97706; }
[data-theme="light"] .m2-hl--arr { color: #9333ea; }

[data-theme="light"] .m2-arr-method-card--map     .m2-arr-method-card__code { color: #2563eb; }
[data-theme="light"] .m2-arr-method-card--filter  .m2-arr-method-card__code { color: #15803d; }
[data-theme="light"] .m2-arr-method-card--reduce  .m2-arr-method-card__code { color: #d97706; }
[data-theme="light"] .m2-arr-method-card--find    .m2-arr-method-card__code { color: #db2777; }
[data-theme="light"] .m2-arr-method-card--foreach .m2-arr-method-card__code { color: #7e22ce; }
[data-theme="light"] .m2-arr-method-card--sort    .m2-arr-method-card__code { color: #dc2626; }

[data-theme="light"] .m2-quick-ref,
[data-theme="light"] .m2-arr-panel,
[data-theme="light"] .m2-arr-methods-ref,
[data-theme="light"] .m2-error-panel,
[data-theme="light"] .m2-timeline-box,
[data-theme="light"] .m2-promise-lifecycle,
[data-theme="light"] .m2-promise-examples,
[data-theme="light"] .m2-comparison-table,
[data-theme="light"] .m2-json-usecases {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.08);
}

[data-theme="light"] .m2-arr-badge {
    background: rgba(59,130,246,0.07);
    color: #2563eb;
    border-color: rgba(59,130,246,0.15);
}

[data-theme="light"] .m2-arr-badge:hover {
    background: rgba(59,130,246,0.14);
    box-shadow: 0 4px 12px rgba(59,130,246,0.12);
}

[data-theme="light"] .m2-arr-badge[data-tooltip]:hover::after {
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    color: #1e293b;
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(37,99,235,0.08);
}

[data-theme="light"] .m2-arr-badge[data-tooltip]:hover::before {
    border-top-color: #ffffff;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.06));
}

[data-theme="light"] .m2-arr-category--search .m2-arr-badge   { background: rgba(59,130,246,0.08); color: #2563eb; border-color: rgba(59,130,246,0.15); }
[data-theme="light"] .m2-arr-category--transform .m2-arr-badge { background: rgba(34,197,94,0.08); color: #16a34a; border-color: rgba(34,197,94,0.15); }
[data-theme="light"] .m2-arr-category--mutating .m2-arr-badge  { background: rgba(239,68,68,0.08); color: #dc2626; border-color: rgba(239,68,68,0.15); }
[data-theme="light"] .m2-arr-category--safe .m2-arr-badge      { background: rgba(139,92,246,0.08); color: #7c3aed; border-color: rgba(139,92,246,0.15); }
[data-theme="light"] .m2-arr-category--static .m2-arr-badge    { background: rgba(217,119,6,0.08); color: #d97706; border-color: rgba(217,119,6,0.15); }

[data-theme="light"] .m2-arr-category--search .m2-arr-badge:hover   { background: rgba(59,130,246,0.14); box-shadow: 0 4px 14px rgba(59,130,246,0.1); }
[data-theme="light"] .m2-arr-category--transform .m2-arr-badge:hover { background: rgba(34,197,94,0.14); box-shadow: 0 4px 14px rgba(34,197,94,0.1); }
[data-theme="light"] .m2-arr-category--mutating .m2-arr-badge:hover  { background: rgba(239,68,68,0.14); box-shadow: 0 4px 14px rgba(239,68,68,0.1); }
[data-theme="light"] .m2-arr-category--safe .m2-arr-badge:hover      { background: rgba(139,92,246,0.14); box-shadow: 0 4px 14px rgba(139,92,246,0.1); }
[data-theme="light"] .m2-arr-category--static .m2-arr-badge:hover    { background: rgba(217,119,6,0.14); box-shadow: 0 4px 14px rgba(217,119,6,0.1); }

[data-theme="light"] .m2-arr-warning {
    background: rgba(239,68,68,0.05);
    border-color: rgba(239,68,68,0.15);
}

[data-theme="light"] .m2-arr-warning__code--bad { color: #dc2626; }
[data-theme="light"] .m2-arr-warning__code--good { color: #16a34a; }

[data-theme="light"] .m2-error-badge--type      { background: rgba(59,130,246,0.08); color: #2563eb; }
[data-theme="light"] .m2-error-badge--range     { background: rgba(34,197,94,0.08);  color: #16a34a; }
[data-theme="light"] .m2-error-badge--syntax    { background: rgba(217,119,6,0.08);  color: #d97706; }
[data-theme="light"] .m2-error-badge--reference { background: rgba(239,68,68,0.08);  color: #dc2626; }

[data-theme="light"] .m2-error-block--try     .m2-error-block__title { color: #2563eb; }
[data-theme="light"] .m2-error-block--success .m2-error-block__title { color: #15803d; }
[data-theme="light"] .m2-error-block--catch   .m2-error-block__title { color: #dc2626; }
[data-theme="light"] .m2-error-block--finally .m2-error-block__title { color: #7e22ce; }

[data-theme="light"] .m2-error-block--try     { border-color: rgba(37,99,235,0.3); background: rgba(37,99,235,0.04); }
[data-theme="light"] .m2-error-block--success { border-color: rgba(22,163,74,0.3); background: rgba(22,163,74,0.04); }
[data-theme="light"] .m2-error-block--catch   { border-color: rgba(220,38,38,0.3); background: rgba(220,38,38,0.04); }
[data-theme="light"] .m2-error-block--finally { border-color: rgba(126,34,206,0.3); background: rgba(126,34,206,0.04); }

[data-theme="light"] .m2-error-outcome__icon--success { color: #15803d; }
[data-theme="light"] .m2-error-outcome__icon--error   { color: #dc2626; }

[data-theme="light"] .m2-promise-intro-box {
    background: linear-gradient(135deg, rgba(245,158,11,0.06), rgba(251,191,36,0.03));
    border-color: rgba(245,158,11,0.15);
}

[data-theme="light"] .m2-promise-intro-heading { color: #d97706; }

[data-theme="light"] .m2-promise-scenario-picker {
    background: linear-gradient(135deg, rgba(59,130,246,0.06), rgba(99,102,241,0.04));
    border-color: rgba(59,130,246,0.15);
}

[data-theme="light"] .m2-scenario-header__text {
    color: #2563eb;
}

[data-theme="light"] .m2-promise-demo-btn {
    background: rgba(59,130,246,0.05);
    color: #2563eb;
    border-color: rgba(59,130,246,0.18);
}

[data-theme="light"] .m2-promise-demo-btn:hover {
    border-color: rgba(59,130,246,0.35);
    box-shadow: 0 4px 12px rgba(59,130,246,0.1);
}

[data-theme="light"] .m2-promise-demo-btn::before {
    background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(99,102,241,0.06));
}

[data-theme="light"] .m2-promise-demo-btn.active {
    background: rgba(59,130,246,0.12);
    border-color: #3b82f6;
    color: #1d4ed8;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.1), 0 4px 16px rgba(59,130,246,0.12);
}

[data-theme="light"] .m2-promise-playback-bar {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.06);
}

[data-theme="light"] .m2-promise-ctrl-btn {
    background: rgba(59,130,246,0.06);
    border-color: rgba(59,130,246,0.15);
    color: #2563eb;
}

[data-theme="light"] .m2-reset-btn {
    background: rgba(239,68,68,0.05);
    border-color: rgba(239,68,68,0.15);
    color: #dc2626;
}

[data-theme="light"] .m2-step-dot {
    background: rgba(59,130,246,0.1);
    border-color: rgba(59,130,246,0.2);
}

[data-theme="light"] .m2-step-dot.active {
    background: #3b82f6;
    border-color: #3b82f6;
    box-shadow: 0 0 6px rgba(59,130,246,0.35);
}

[data-theme="light"] .m2-step-dot.done {
    background: #16a34a;
    border-color: #16a34a;
}

[data-theme="light"] .m2-promise-explanation {
    background: linear-gradient(135deg, rgba(0,0,0,0.02), rgba(59,130,246,0.02));
    border-left-color: #3b82f6;
}

[data-theme="light"] .m2-promise-step-desc {
    color: #2563eb;
    background: rgba(59,130,246,0.04);
}

[data-theme="light"] .m2-promise-tab.active {
    background: rgba(59,130,246,0.1);
    color: #2563eb;
    border-bottom-color: #2563eb;
}

[data-theme="light"] .m2-section-heading--amber  { color: #d97706; border-color: rgba(217,119,6,0.25); }
[data-theme="light"] .m2-section-heading--purple { color: #9333ea; border-color: rgba(147,51,234,0.25); }
[data-theme="light"] .m2-section-heading--green  { color: #16a34a; border-color: rgba(22,163,106,0.25); }

[data-theme="light"] .m2-note-purple {
    background: rgba(147,51,234,0.05);
    border-left-color: #9333ea;
}

[data-theme="light"] .m2-note-indigo {
    background: rgba(79,70,229,0.05);
    border-left-color: #4f46e5;
}

[data-theme="light"] .m2-note-indigo h3 { color: #4f46e5; }

[data-theme="light"] .m2-note-green {
    background: rgba(22,163,106,0.05);
    border-left-color: #16a34a;
}

[data-theme="light"] .m2-note-amber {
    background: rgba(217,119,6,0.05);
    border-left-color: #d97706;
}

[data-theme="light"] .m2-note-red {
    background: rgba(220,38,38,0.05);
    border-left-color: #dc2626;
}

[data-theme="light"] .m2-warn-mistakes {
    background: linear-gradient(135deg, rgba(217,119,6,0.05), rgba(220,38,38,0.02));
    border-color: rgba(217,119,6,0.18);
}

[data-theme="light"] .m2-warn-mistakes::before {
    background: linear-gradient(180deg, #d97706, #dc2626);
}

[data-theme="light"] .m2-warn-mistakes h4 { color: #d97706; }

[data-theme="light"] .m2-mistake-list li {
    background: rgba(0,0,0,0.03);
    border-color: rgba(217,119,6,0.08);
}

[data-theme="light"] .m2-mistake-list li::before {
    background: rgba(217,119,6,0.15);
    color: #b45309;
}

[data-theme="light"] .m2-mistake-list li code {
    background: rgba(217,119,6,0.08);
    color: #b45309;
    border-color: rgba(217,119,6,0.1);
}

[data-theme="light"] .m2-mistake-list li .code-block pre code {
    background: none;
    border: none;
    color: inherit;
}

[data-theme="light"] .m2-compare-category {
    background: linear-gradient(135deg, rgba(0,0,0,0.025), rgba(0,0,0,0.01));
    border-color: rgba(0,0,0,0.05);
}

[data-theme="light"] .m2-compare-category__icon {
    background: rgba(59,130,246,0.06);
    border-color: rgba(59,130,246,0.1);
}

[data-theme="light"] .m2-compare-item code {
    background: rgba(59,130,246,0.06);
    color: #2563eb;
}

[data-theme="light"] .m2-recommendation-box--green {
    background: linear-gradient(135deg, rgba(22,163,106,0.06), rgba(22,163,106,0.02));
    border-color: rgba(22,163,106,0.18);
}
[data-theme="light"] .m2-recommendation-box--green .m2-recommendation-emoji { background: rgba(22,163,106,0.08); }
[data-theme="light"] .m2-recommendation-box--green strong { color: #16a34a; }

[data-theme="light"] .m2-recommendation-box--blue {
    background: linear-gradient(135deg, rgba(37,99,235,0.06), rgba(37,99,235,0.02));
    border-color: rgba(37,99,235,0.18);
}
[data-theme="light"] .m2-recommendation-box--blue .m2-recommendation-emoji { background: rgba(37,99,235,0.08); }
[data-theme="light"] .m2-recommendation-box--blue strong { color: #2563eb; }

[data-theme="light"] .m2-recommendation-box--amber {
    background: linear-gradient(135deg, rgba(217,119,6,0.06), rgba(217,119,6,0.02));
    border-color: rgba(217,119,6,0.18);
}
[data-theme="light"] .m2-recommendation-box--amber .m2-recommendation-emoji { background: rgba(217,119,6,0.08); }
[data-theme="light"] .m2-recommendation-box--amber strong { color: #d97706; }

[data-theme="light"] .m2-remember-box {
    background: linear-gradient(135deg, rgba(79,70,229,0.06), rgba(79,70,229,0.02));
    border-color: rgba(79,70,229,0.18);
}

[data-theme="light"] .m2-remember-box > .m2-recommendation-emoji { background: rgba(79,70,229,0.08); }
[data-theme="light"] .m2-remember-box strong { color: #4f46e5; }

/* Advantages box - light */
[data-theme="light"] .m2-advantages-box {
    background: linear-gradient(135deg, rgba(126,34,206,0.06), rgba(79,70,229,0.04));
    border-color: rgba(126,34,206,0.18);
}

[data-theme="light"] .m2-advantages-box h4 { color: #7e22ce; }

[data-theme="light"] .m2-advantage-card {
    background: rgba(126,34,206,0.04);
    border-color: rgba(126,34,206,0.1);
}

[data-theme="light"] .m2-advantage-card:hover {
    box-shadow: 0 4px 16px rgba(126,34,206,0.1);
}

[data-theme="light"] .m2-advantage-card__icon { background: rgba(126,34,206,0.08); }
[data-theme="light"] .m2-advantage-card__content strong { color: #7e22ce; }
[data-theme="light"] .m2-advantage-card__content p { color: #475569; }
[data-theme="light"] .m2-advantage-card__content code {
    background: rgba(126,34,206,0.08);
    color: #7e22ce;
}

/* Combinator spec + comparison - light */
[data-theme="light"] .m2-combinator-heading {
    color: #1e293b;
    border-bottom-color: rgba(37,99,235,0.12);
}

[data-theme="light"] .m2-combinator-heading code { color: #2563eb; }

[data-theme="light"] .m2-combinator-spec {
    background: linear-gradient(135deg, rgba(37,99,235,0.04), rgba(37,99,235,0.01));
    border-color: rgba(37,99,235,0.1);
}

[data-theme="light"] .m2-combinator-spec p { color: #475569; }
[data-theme="light"] .m2-combinator-spec strong { color: #2563eb; }
[data-theme="light"] .m2-combinator-spec code {
    background: rgba(37,99,235,0.06);
    color: #2563eb;
}

[data-theme="light"] .m2-combinator-comparison {
    background: linear-gradient(135deg, rgba(217,119,6,0.06), rgba(217,119,6,0.02));
    border-color: rgba(217,119,6,0.18);
}

[data-theme="light"] .m2-combinator-comparison h4 { color: #b45309; }

[data-theme="light"] .m2-combinator-list li {
    color: #475569;
    border-bottom-color: rgba(217,119,6,0.08);
}

[data-theme="light"] .m2-combinator-list code {
    background: rgba(217,119,6,0.08);
    color: #b45309;
}

[data-theme="light"] .m2-combinator-list em { color: #64748b; }

[data-theme="light"] .m2-promise-static-box--resolve {
    background: rgba(22,163,106,0.04);
    border-color: rgba(22,163,106,0.15);
}
[data-theme="light"] .m2-promise-static-box--resolve h5 { color: #15803d; }

[data-theme="light"] .m2-promise-static-box--reject {
    background: rgba(220,38,38,0.04);
    border-color: rgba(220,38,38,0.15);
}
[data-theme="light"] .m2-promise-static-box--reject h5 { color: #dc2626; }

[data-theme="light"] .m2-promise-state text,
[data-theme="light"] .m2-promise-handler text {
    fill: #1e293b;
}

[data-theme="light"] .m2-promise-state text:nth-child(3),
[data-theme="light"] .m2-promise-handler text:nth-child(3),
[data-theme="light"] .m2-promise-handler text:nth-child(4) {
    fill: #64748b;
}

[data-theme="light"] .m2-json-diff-row:not(.m2-json-diff-row--header) {
    background: rgba(0,0,0,0.02);
}

[data-theme="light"] .m2-json-diff-row--header {
    background: rgba(37,99,235,0.06);
}

[data-theme="light"] .m2-json-diff-row--header span {
    color: #2563eb;
}

/* --- Additional Light-Theme Overrides --- */

[data-theme="light"] .m2-json-problem-box {
    background: rgba(217,119,6,0.04);
    border-color: rgba(217,119,6,0.18);
}

[data-theme="light"] .m2-json-problem-box h4 { color: #b45309; }

[data-theme="light"] .m2-tl-decision {
    background: rgba(37,99,235,0.04);
    border-left-color: #3b82f6;
}

[data-theme="light"] .m2-tl-compare__label--old { color: #dc2626; }
[data-theme="light"] .m2-tl-compare__label--new { color: #16a34a; }

[data-theme="light"] .m2-json-compare-card p {
    color: #475569;
}

[data-theme="light"] .m2-json-compare-card--xml {
    background: linear-gradient(145deg, rgba(100,116,139,0.06), rgba(100,116,139,0.01));
    border-color: rgba(100,116,139,0.2);
}

[data-theme="light"] .m2-json-compare-card--xml:hover {
    box-shadow: 0 8px 24px rgba(100,116,139,0.08);
}

[data-theme="light"] .m2-json-compare-card--json {
    background: linear-gradient(145deg, rgba(22,163,74,0.06), rgba(22,163,74,0.02));
    border-color: rgba(22,163,74,0.25);
}

[data-theme="light"] .m2-json-compare-card--json:hover {
    box-shadow: 0 8px 28px rgba(22,163,74,0.1);
}

[data-theme="light"] .m2-json-compare-card__label { color: #1e293b; }

[data-theme="light"] .m2-json-compare-card--xml .m2-json-compare-card__code {
    background: rgba(100,116,139,0.06);
    border-color: rgba(100,116,139,0.12);
    color: #475569;
}

[data-theme="light"] .m2-json-compare-card--json .m2-json-compare-card__code {
    background: rgba(22,163,74,0.05);
    border-color: rgba(22,163,74,0.12);
    color: #166534;
}

[data-theme="light"] .m2-json-compare-card--xml .m2-json-compare-card__size {
    background: rgba(100,116,139,0.08);
    color: #64748b;
}

[data-theme="light"] .m2-json-compare-card--json .m2-json-compare-card__size {
    background: rgba(22,163,74,0.08);
    color: #16a34a;
}

[data-theme="light"] .m2-json-compare-card--json .m2-json-compare-card__size strong {
    color: #15803d;
}

[data-theme="light"] .m2-json-tag--pro {
    background: rgba(22,163,74,0.08);
    color: #16a34a;
    border-color: rgba(22,163,74,0.18);
}

[data-theme="light"] .m2-json-tag--con {
    background: rgba(220,38,38,0.06);
    color: #dc2626;
    border-color: rgba(220,38,38,0.12);
}

[data-theme="light"] .m2-json-tag--neutral {
    background: rgba(100,116,139,0.08);
    color: #64748b;
    border-color: rgba(100,116,139,0.12);
}

[data-theme="light"] .m2-json-usecase-row {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.06);
}

[data-theme="light"] .m2-json-type-badge--allowed {
    background: rgba(22,163,106,0.08);
    color: #16a34a;
}

[data-theme="light"] .m2-json-type-badge--forbidden {
    background: rgba(220,38,38,0.06);
    color: #dc2626;
}

[data-theme="light"] .m2-task-badge { background: rgba(37,99,235,0.08); color: #2563eb; }
[data-theme="light"] .m2-wait-badge { background: rgba(217,119,6,0.08); color: #d97706; }
[data-theme="light"] .m2-start-badge { background: rgba(22,163,106,0.08); color: #16a34a; }

[data-theme="light"] .m2-time-calc {
    background: rgba(0,0,0,0.03);
    color: #64748b;
}

[data-theme="light"] .m2-insight-box {
    background: rgba(79,70,229,0.04);
    border-color: rgba(79,70,229,0.15);
}

[data-theme="light"] .m2-insight-box h4 { color: #4f46e5; }

[data-theme="light"] .m2-promise-ctrl-btn {
    background: rgba(59,130,246,0.08);
    color: #2563eb;
    border-color: rgba(59,130,246,0.15);
}

[data-theme="light"] .m2-evolution-list li {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.06);
}

[data-theme="light"] .m2-parallel-row {
    background: rgba(0,0,0,0.015);
}

[data-theme="light"] .m2-running-label {
    color: #64748b;
}

[data-theme="light"] .m2-promise-intro-box p {
    color: #475569;
}

[data-theme="light"] .m2-promise-compare-box--blocking .m2-promise-compare-title    { color: #dc2626; }
[data-theme="light"] .m2-promise-compare-box--nonblocking .m2-promise-compare-title { color: #16a34a; }

[data-theme="light"] .m2-timeline-section:first-child h4 { color: #dc2626; }
[data-theme="light"] .m2-timeline-section:last-child h4  { color: #16a34a; }

[data-theme="light"] .m2-timeline-section--sync .m2-timeline-section__header  { color: #dc2626; }
[data-theme="light"] .m2-timeline-section--async .m2-timeline-section__header { color: #15803d; }

[data-theme="light"] .m2-time-result--slow { color: #dc2626; }
[data-theme="light"] .m2-time-result--fast { color: #15803d; }

[data-theme="light"] .m2-spread-card--rest .m2-spread-card__label   { color: #16a34a; }
[data-theme="light"] .m2-spread-card--spread .m2-spread-card__label { color: #2563eb; }

[data-theme="light"] .m2-destr-card__label { color: #7c3aed; }

[data-theme="light"] .m2-feature-badge {
    background: rgba(37,99,235,0.06);
    color: #2563eb;
    border-color: rgba(37,99,235,0.12);
}

[data-theme="light"] .m2-note-purple h3 { color: #9333ea; }
[data-theme="light"] .m2-note-green h3  { color: #16a34a; }
[data-theme="light"] .m2-note-red h3    { color: #dc2626; }

[data-theme="light"] .m2-comparison-table td,
[data-theme="light"] .m2-comparison-table th {
    border-color: rgba(0,0,0,0.06);
}

[data-theme="light"] .m2-comparison-table thead th {
    background: rgba(37,99,235,0.06);
    color: #2563eb;
}

/* SVG: override all text fills for light mode */
[data-theme="light"] .m2-promise-lifecycle svg text {
    fill: #1e293b;
}

[data-theme="light"] .m2-promise-lifecycle svg text[fill="#94a3b8"],
[data-theme="light"] .m2-promise-lifecycle svg text[fill="#e2e8f0"] {
    fill: #64748b;
}

[data-theme="light"] .m2-promise-lifecycle svg rect[fill="rgba(15,18,32,0.7)"],
[data-theme="light"] .m2-promise-lifecycle svg rect[fill="rgba(122,162,255,0.05)"] {
    fill: rgba(0,0,0,0.03);
}

[data-theme="light"] .m2-promise-lifecycle svg line,
[data-theme="light"] .m2-promise-lifecycle svg path {
    stroke: #94a3b8;
}

/* =============================
   17. RESPONSIVE BREAKPOINTS
   ============================= */
@media (max-width: 768px) {
    .m2-spread-grid,
    .m2-destr-grid,
    .m2-tl-compare,
    .m2-json-compare-grid,
    .m2-promise-compare-grid,
    .m2-promise-static-grid {
        grid-template-columns: 1fr;
    }

    .m2-quick-ref__grid {
        grid-template-columns: 1fr;
    }

    .m2-arr-decision-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .m2-json-types-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .m2-error-grid {
        grid-template-columns: 1fr;
    }

    .m2-error-outcomes {
        gap: 1.5rem;
    }

    .m2-compare-category {
        grid-template-columns: 1fr;
    }

    .m2-compare-category__icon {
        grid-row: auto;
    }

    .m2-compare-values {
        grid-column: 1;
    }

    .m2-promise-scenario-picker {
        padding: 0.75rem 1rem;
    }

    .m2-promise-demo-controls {
        gap: 0.35rem;
    }

    .m2-promise-demo-btn {
        padding: 0.4rem 0.7rem;
        font-size: 0.78rem;
    }

    .m2-promise-playback-bar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .m2-promise-tabs {
        gap: 0.25rem;
    }

    .m2-promise-tab {
        padding: 0.35rem 0.65rem;
        font-size: 0.75rem;
    }

    .m2-advantages-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .m2-arr-decision-grid {
        grid-template-columns: 1fr;
    }

    .m2-json-types-grid {
        grid-template-columns: 1fr;
    }

    .m2-json-diff-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .m2-json-diff-row span {
        padding: 0.4rem 0.6rem;
    }

    .m2-json-diff-row--header span:not(:first-child) {
        display: none;
    }

    /* Collapse data rows into stacked label:value pairs */
    .m2-json-diff-row:not(.m2-json-diff-row--header) span {
        display: block;
        padding: 0.3rem 0.6rem;
    }

    .m2-json-diff-row:not(.m2-json-diff-row--header) span::before {
        font-weight: 600;
        font-size: 0.75rem;
        color: var(--text-tertiary, #94a3b8);
        margin-right: 0.4rem;
    }

    .m2-json-diff-row:not(.m2-json-diff-row--header) span:nth-child(2)::before {
        content: 'JSON: ';
    }

    .m2-json-diff-row:not(.m2-json-diff-row--header) span:nth-child(3)::before {
        content: 'XML: ';
    }

    /* SVG: allow horizontal scroll on very small screens */
    .m2-promise-lifecycle {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .m2-promise-lifecycle svg {
        min-width: 600px;
    }

    .m2-task-flow {
        gap: 0.2rem;
    }

    .m2-promise-scenario-picker {
        padding: 0.6rem 0.75rem;
    }

    .m2-promise-demo-controls {
        flex-direction: column;
    }

    .m2-promise-demo-btn {
        width: 100%;
        justify-content: center;
    }

    .m2-promise-playback-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .m2-playback-left {
        justify-content: center;
    }

    .m2-playback-progress {
        justify-content: center;
    }

    .m2-feature-badges {
        gap: 0.35rem;
    }

    .m2-feature-badge {
        padding: 0.25rem 0.6rem;
        font-size: 0.75rem;
    }
}