/* =========================================================
   itechnicalearning — C Programming lab ("watch your code run")
   Builds on dsa.css (the visualizer shell, playback, narration).
   ========================================================= */

/* ---------- Program choice + fields ---------- */
.c-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 10px;
}

.c-fields[hidden] {
    display: none;
}

.c-input-wide {
    flex: 1;
    min-width: 200px;
    max-width: 320px;
    font-family: var(--mono);
}

.c-input-num {
    width: 72px;
    font-family: var(--mono);
}

.c-field-note {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.c-field-note code {
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--background-alt);
    font-family: var(--mono);
}

.c-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    cursor: pointer;
}

.c-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--danger);
}

/* ---------- The program (stage) ---------- */
.c-stage {
    padding: 12px 20px;
}

.c-code-panel {
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--dark-section);
    box-shadow: var(--shadow-sm);
}

.c-code-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--dark-section-light);
}

.c-file-icon {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: #3B82F6;
    font-size: 0.7rem;
    font-weight: 800;
    color: #fff;
}

.c-file-name {
    font-family: var(--mono);
    font-size: 0.8rem;
    font-weight: 700;
    color: #E2E8F0;
}

.c-code {
    border-radius: 0;
    font-size: 0.86rem;
    line-height: 1.8;
}

.c-code .code-line.active {
    background: rgba(255, 178, 0, 0.22);
}

.tok-preproc { color: #F0ABFC; }
.tok-func    { color: #93C5FD; }
.tok-escape  { color: #FDBA74; font-weight: 700; }

/* ---------- Right side ---------- */
.c-lab-side .viz-panel {
    padding: 14px 18px;
}

.c-side-panel {
    flex: 1;
    min-height: 0;
}

.c-side-body {
    max-height: 260px;
    overflow-y: auto;
}

/* Memory: one box per variable */
.c-mem-empty {
    margin: 4px 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.c-side-body:has(.c-var) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}

.c-var {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 2px 8px;
    padding: 8px 10px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    transition: border-color 0.2s, background 0.2s;
}

.c-var-type {
    padding: 1px 6px;
    border-radius: 4px;
    background: #DBEAFE;
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 700;
    color: #1E40AF;
}

.c-var-name {
    font-family: var(--mono);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-dark);
}

.c-var-value {
    grid-column: 1 / -1;
    font-family: var(--mono);
    font-size: 1.25rem;
    color: var(--text-dark);
}

.c-var-meta {
    grid-column: 1 / -1;
    font-family: var(--mono);
    font-size: 0.68rem;
    color: var(--text-secondary);
}

.c-var.is-new {
    border-color: var(--success);
    background: #F0FDF4;
    animation: c-pop 0.35s ease-out;
}

.c-var.is-changed {
    border-color: var(--primary);
    background: var(--primary-light);
    animation: c-pop 0.35s ease-out;
}

.c-var.is-read {
    border-color: #3B82F6;
    background: #EFF6FF;
}

@keyframes c-pop {
    from { transform: scale(0.9); }
    to   { transform: scale(1); }
}

/* Output console */
.c-console-panel {
    background: var(--background-soft);
}

.c-console-head .c-console-dots {
    display: inline-flex;
    gap: 5px;
}

.c-console-dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--border-strong);
}

.c-console {
    min-height: 118px;
    max-height: 190px;
    margin: 0;
    padding: 12px 14px;
    overflow: auto;
    border-radius: var(--radius-sm);
    background: #0B1020;
    font-family: var(--mono);
    font-size: 0.82rem;
    line-height: 1.6;
    white-space: pre;
    color: #E2E8F0;
}

.c-out-new {
    color: #FFC94D;
    font-weight: 700;
}

.c-cursor {
    display: inline-block;
    width: 8px;
    height: 1.05em;
    margin-bottom: -2px;
    background: #E2E8F0;
    animation: c-blink 1s steps(1) infinite;
}

@keyframes c-blink {
    50% { opacity: 0; }
}

.c-exit {
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 700;
}

.c-exit.is-success { background: #DCFCE7; color: #166534; }
.c-exit.is-error   { background: #FEE2E2; color: #991B1B; }

/* Build pipeline */
.c-pipeline {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.c-step {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
}

.c-step-dot {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 2px solid var(--border-strong);
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 800;
}

.c-step-text {
    display: grid;
    min-width: 0;
}

.c-step-text strong {
    font-size: 0.82rem;
    color: var(--text-dark);
}

.c-step-text small {
    overflow: hidden;
    font-size: 0.72rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.c-step-file {
    font-family: var(--mono);
    font-size: 0.72rem;
}

.c-step.is-done .c-step-dot   { border-color: var(--success); background: var(--success); color: #fff; }
.c-step.is-active             { background: var(--primary-light); }
.c-step.is-active .c-step-dot { border-color: var(--primary); background: var(--primary); color: var(--text-dark); }
.c-step.is-active .c-step-file { font-weight: 800; color: var(--text-dark); }
.c-step.is-failed             { background: #FEE2E2; }
.c-step.is-failed .c-step-dot { border-color: var(--danger); background: var(--danger); color: #fff; }
.c-step.is-skipped            { opacity: 0.45; }
.c-step.is-skipped .c-step-text strong { text-decoration: line-through; }

.c-preview {
    max-height: 120px;
    margin: 8px 0 0;
    padding: 8px 10px;
    overflow: auto;
    border-radius: var(--radius-sm);
    background: var(--dark-section);
    font-family: var(--mono);
    font-size: 0.72rem;
    line-height: 1.5;
    color: #CBD5E1;
}

/* ---------- Lesson sections ---------- */
/* Walkthrough: a program with every line explained */
.c-walk {
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--dark-section);
    box-shadow: var(--shadow-md);
}

.c-walk-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: baseline;
    gap: 0 16px;
    padding: 7px 18px 7px 0;
    border-left: 3px solid transparent;
    outline: none;
}

.c-walk-row:hover,
.c-walk-row:focus-visible {
    border-left-color: var(--primary);
    background: rgba(255, 178, 0, 0.12);
}

.c-walk-row.is-blank {
    padding: 2px 0;
}

.c-walk-num {
    text-align: right;
    font-family: var(--mono);
    font-size: 0.8rem;
    color: #5B6B85;
}

.c-walk-code {
    font-family: var(--mono);
    font-size: 0.9rem;
    white-space: pre;
    color: #E2E8F0;
    overflow-x: auto;
}

.c-walk-note {
    font-size: 0.86rem;
    line-height: 1.5;
    color: #CBD5E1;
}

/* Common mistakes */
.c-mistakes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.c-mistake {
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.c-mistake h3 {
    margin: 0 0 10px;
    font-size: 1.02rem;
}

.c-mistake-pair {
    display: grid;
    gap: 8px;
}

.c-mistake-code {
    overflow: hidden;
    border-radius: var(--radius-sm);
}

.c-mistake-code span {
    display: block;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.c-mistake-code.is-wrong span { background: #FEE2E2; color: #991B1B; }
.c-mistake-code.is-right span { background: #DCFCE7; color: #166534; }

.c-mistake-code pre {
    margin: 0;
    padding: 8px 10px;
    overflow-x: auto;
    background: var(--dark-section);
    font-family: var(--mono);
    font-size: 0.8rem;
    line-height: 1.55;
    color: #E2E8F0;
}

.c-mistake p {
    margin: 10px 0 0;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

/* ---------- Track page: hero preview ---------- */
.c-preview-card {
    gap: 12px;
}

.c-preview-code {
    margin: 0;
    padding: 12px 0;
    border-radius: var(--radius-sm);
    background: var(--dark-section);
    font-family: var(--mono);
    font-size: 0.85rem;
    line-height: 1.8;
    color: #E2E8F0;
}

.c-preview-code span {
    display: block;
    padding: 0 14px;
    border-left: 3px solid transparent;
}

.c-preview-code .is-now {
    border-left-color: var(--primary);
    background: rgba(255, 178, 0, 0.22);
}

.c-preview-mem {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.c-preview-mem span {
    padding: 6px 10px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-family: var(--mono);
    font-size: 0.85rem;
}

.c-preview-mem small {
    margin-right: 4px;
    color: #1E40AF;
}

.c-preview-mem .is-new {
    border-color: var(--success);
    background: #F0FDF4;
}

/* ---------- Classroom mode (projector) ---------- */
body.classroom-mode .c-code {
    font-size: 1.15rem;
}

body.classroom-mode .c-console {
    font-size: 1.05rem;
}

body.classroom-mode .c-var-value {
    font-size: 1.6rem;
}

/* ---------- Smaller screens ---------- */
@media (max-width: 900px) {
    .c-walk-row {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .c-walk-note {
        grid-column: 2;
        padding: 2px 0 4px;
    }
}

@media (max-width: 600px) {
    .c-stage {
        padding: 10px 12px;
    }

    .c-code {
        font-size: 0.78rem;
    }
}

/* Build view: compact steps (only the current step shows its description), preview always visible */
.c-side-body:has(.c-pipeline) {
    max-height: none;
}

.c-step {
    padding: 3px 8px;
}

.c-step-dot {
    width: 20px;
    height: 20px;
}

.c-step small {
    display: none;
}

.c-step.is-active small,
.c-step.is-failed small {
    display: block;
}

/* Keep the whole lab on one 1366×768 screen */
.c-console {
    min-height: 100px;
}

.c-preview {
    max-height: 104px;
}

/* Program tabs and their fields on one row */
.c-lab .viz-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.c-lab .viz-controls .c-fields {
    margin-top: 0;
}

.c-lab .viz-controls .op-error {
    flex-basis: 100%;
    margin: 0;
}

/* Code: a little tighter */
.c-code {
    padding: 8px 0;
    line-height: 1.5;
}

/* Narration: counters next to the text, not under it */
.c-lab .viz-narration {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.c-lab .narration-text {
    flex: 1;
    margin: 0;
}

.c-lab .narration-chips {
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.c-lab .stat-chips {
    flex-direction: column;
    align-items: flex-end;
}

/* The console scrolls after about 6 lines */
.c-console {
    max-height: 140px;
}

@media (max-width: 760px) {
    .c-lab .viz-narration {
        flex-direction: column;
    }

    .c-lab .narration-chips,
    .c-lab .stat-chips {
        flex-direction: row;
        align-items: center;
    }
}

.c-lab .viz-controls .op-row {
    min-width: 0;
    max-width: 100%;
    margin: 0;
}

.c-lab .viz-controls .op-tab {
    padding-left: 12px;
    padding-right: 12px;
}

/* ---------- Memory boxes: bytes, bits, notes, const (Module 2+) ---------- */
.c-bytes {
    grid-column: 1 / -1;
    display: flex;
    gap: 2px;
}

.c-bytes i {
    width: 12px;
    height: 8px;
    border-radius: 2px;
    background: #93C5FD;
}

.c-var.is-new .c-bytes i {
    background: var(--success);
}

.c-var.is-changed .c-bytes i {
    background: var(--primary);
}

.c-var-bits {
    grid-column: 1 / -1;
    font-family: var(--mono);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #1E40AF;
}

.c-var-note {
    grid-column: 1 / -1;
    font-size: 0.68rem;
    color: var(--text-secondary);
}

.c-var.is-const .c-var-type {
    background: #EDE9FE;
    color: #5B21B6;
}

/* ---------- Table of types (How it works) ---------- */
.c-table-wrap {
    overflow-x: auto;
    margin-bottom: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.c-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.c-table caption {
    padding: 14px 16px 4px;
    text-align: left;
    font-weight: 700;
    color: var(--text-dark);
}

.c-table th,
.c-table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
}

.c-table th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.c-table tr:last-child td {
    border-bottom: 0;
}

.c-table td.is-code {
    font-family: var(--mono);
    font-weight: 700;
    color: var(--text-dark);
}

.c-input-char {
    width: 48px;
    font-family: var(--mono);
    text-align: center;
}

.c-lab .viz-controls {
    column-gap: 12px;
}

.c-lab .viz-controls .c-fields {
    column-gap: 6px;
}

.c-lab .viz-controls .op-tab {
    padding-left: 10px;
    padding-right: 10px;
}

.c-input-small {
    width: 56px;
    font-family: var(--mono);
}

/* ---------- Setting up lab: OS switch, folder, terminal ---------- */
.c-toolbar-extra {
    margin-left: auto;
}

.c-toolbar-extra + .viz-classroom-btn {
    margin-left: 0;
}

.c-os-switch {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
}

.c-os-switch label {
    cursor: pointer;
}

.c-os-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.c-os-switch span {
    display: block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.c-os-switch input:checked + span {
    background: var(--text-dark);
    color: #fff;
}

.c-os-switch input:focus-visible + span {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.c-select {
    width: auto;
    min-width: 220px;
    font-size: 0.85rem;
}

/* The terminal needs room: a wider right-hand column */
.c-lab#setupLab .viz-body {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

.c-lab#setupLab .c-console {
    min-height: 210px;
    max-height: 250px;
    font-size: 0.76rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.t-prompt {
    color: #4ADE80;
}

.t-cmd {
    color: #fff;
    font-weight: 700;
}

.t-cmd.c-out-new {
    color: #FFC94D;
}

.t-out.is-new {
    color: #FDE68A;
}

.t-out.t-err {
    color: #F87171;
}

.t-out.t-warn {
    color: #FBBF24;
}

.c-files {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.c-file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.c-file.is-new {
    border-color: var(--success);
    background: #F0FDF4;
    animation: c-pop 0.35s ease-out;
}

.c-file.is-changed {
    border-color: var(--primary);
    background: var(--primary-light);
    animation: c-pop 0.35s ease-out;
}

.c-file.is-stale {
    border-color: var(--danger, #DC2626);
    border-style: dashed;
}

.c-file-icon-big {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #DBEAFE;
    font-family: var(--mono);
    font-size: 0.8rem;
    font-weight: 700;
    color: #1E40AF;
}

.c-file-icon-big.is-program {
    background: #DCFCE7;
    color: #166534;
}

.c-file-main {
    display: grid;
    min-width: 0;
}

.c-file-main strong {
    font-family: var(--mono);
    font-size: 0.85rem;
    color: var(--text-dark);
}

.c-file-main small {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.c-file-note {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: #FEE2E2;
    font-size: 0.7rem;
    font-weight: 700;
    color: #991B1B;
    white-space: nowrap;
}

@media (max-width: 960px) {
    .c-lab#setupLab .viz-body {
        grid-template-columns: 1fr;
    }
}

/* ---------- Building blocks lab: token kinds, scanned line, rules ---------- */
.k-keyword { --tok: #7C3AED; --tok-bg: #EDE9FE; }
.k-identifier { --tok: #1D4ED8; --tok-bg: #DBEAFE; }
.k-constant { --tok: #047857; --tok-bg: #D1FAE5; }
.k-string { --tok: #C2410C; --tok-bg: #FFEDD5; }
.k-operator { --tok: #BE123C; --tok-bg: #FFE4E6; }
.k-separator { --tok: #475569; --tok-bg: #E2E8F0; }
.k-comment { --tok: #64748B; --tok-bg: #F1F5F9; }
.k-preproc { --tok: #A21CAF; --tok-bg: #FAE8FF; }
.k-header { --tok: #A21CAF; --tok-bg: #FAE8FF; }

.c-tok-chip {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--tok-bg);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--tok);
    white-space: nowrap;
}

.c-token-list {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: tok;
}

.c-token-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    counter-increment: tok;
}

.c-token-list li::before {
    content: counter(tok);
    min-width: 16px;
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.c-token-list li.is-last {
    outline: 2px solid var(--primary);
}

.c-token-list code {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-family: var(--mono);
    font-size: 0.85rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-dark);
}

.c-scan {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.c-scan-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.c-scan-line {
    font-family: var(--mono);
    font-size: 1rem;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--text-dark);
}

.c-scan-tok {
    padding: 1px 0;
    border-radius: 3px;
    background: var(--tok-bg);
    color: var(--tok);
    font-weight: 700;
}

.c-scan-tok.k-comment {
    font-style: italic;
    font-weight: 400;
    text-decoration: line-through;
}

.c-scan-tok.is-current {
    outline: 2px solid var(--tok);
    outline-offset: 1px;
}

.c-scan-tok.is-error {
    background: #FEE2E2;
    color: #B91C1C;
    outline: 2px solid #DC2626;
}

.c-scan-rest {
    color: #94A3B8;
}

.c-checks {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.c-checks li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.c-checks li span {
    display: grid;
    place-items: center;
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #E2E8F0;
    font-size: 0.75rem;
    font-weight: 700;
}

.c-checks li.is-ok { border-color: var(--success); color: var(--text-dark); }
.c-checks li.is-ok span { background: var(--success); color: #fff; }
.c-checks li.is-fail { border-color: #DC2626; background: #FEF2F2; color: var(--text-dark); }
.c-checks li.is-fail span { background: #DC2626; color: #fff; }
.c-checks li.is-warn { border-color: var(--primary); background: var(--primary-light); color: var(--text-dark); }
.c-checks li.is-warn span { background: var(--primary); color: var(--text-dark); }

.c-lab#tokensLab .c-console {
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---------- Storage lab: the "Working" panel ---------- */
.c-lab#storageLab .c-side-body {
    max-height: 330px;
}

.c-ladder {
    width: 100%;
    margin-bottom: 8px;
    border-collapse: collapse;
    font-family: var(--mono);
    font-size: 0.8rem;
}

.c-ladder td {
    padding: 2px 6px;
    border-bottom: 1px dashed var(--border);
    white-space: nowrap;
    color: var(--text-dark);
}

.c-ladder b {
    display: inline-block;
    min-width: 18px;
    border-radius: 4px;
    background: #DBEAFE;
    text-align: center;
    color: #1E40AF;
}

.c-ladder tr.is-current td {
    background: var(--primary-light);
}

.c-bitrow {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin: 6px 0;
}

.c-bitrow-label {
    flex: none;
    width: 64px;
    padding-bottom: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.c-bits {
    display: flex;
    gap: 3px;
}

.c-bit {
    display: grid;
    justify-items: center;
    width: 28px;
    padding: 3px 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    font-family: var(--mono);
    font-size: 0.95rem;
    font-weight: 700;
    color: #94A3B8;
}

.c-bit small {
    font-size: 0.58rem;
    letter-spacing: -0.03em;
    font-weight: 600;
    color: var(--text-secondary);
}

.c-bit.is-one {
    border-color: #3B82F6;
    background: #DBEAFE;
    color: #1E40AF;
}

.c-bit.is-mark {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.c-bit.gap-before {
    margin-left: 8px;
}

.c-bitrow.is-flipped .c-bit.is-one {
    border-color: #A855F7;
    background: #F3E8FF;
    color: #6B21A8;
}

.c-bitrow.is-result .c-bit.is-one,
.c-bitrow.is-check .c-bit.is-one {
    border-color: var(--success);
    background: #DCFCE7;
    color: #166534;
}

.c-work-result {
    margin: 6px 0 0;
    font-family: var(--mono);
    font-size: 0.95rem;
    color: var(--text-dark);
}

.c-work-result b {
    color: #1D4ED8;
}

.c-charbox {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
    font-family: var(--mono);
}

.c-charbox-char {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 2px solid var(--primary);
    border-radius: var(--radius-sm);
    background: var(--primary-light);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--text-dark);
}

.c-charbox-eq {
    font-size: 1.3rem;
    color: var(--text-secondary);
}

.c-charbox-code {
    font-size: 1.7rem;
    font-weight: 700;
    color: #1D4ED8;
}

.c-ranges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
}

.c-ranges span {
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.c-ranges span.is-here {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--text-dark);
}

@media (max-width: 420px) {
    .c-bit { width: 24px; }
    .c-bitrow-label { width: 48px; }
}

/* ---------- Constants lab ---------- */
.c-input-mid {
    width: 180px;
    font-family: var(--mono);
}

.c-lit-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 2px;
    border-bottom: 1px dashed var(--border);
    font-size: 0.85rem;
}

.c-lit-row span {
    color: var(--text-secondary);
}

.c-lit-row strong {
    font-family: var(--mono);
    color: var(--text-dark);
    text-align: right;
    word-break: break-all;
}

.c-lit-row.is-big strong {
    font-size: 1.2rem;
}

.c-lit-row.is-type strong {
    padding: 0 8px;
    border-radius: 4px;
    background: #EDE9FE;
    color: #5B21B6;
}

.c-bytes-lg {
    margin-top: 10px;
    gap: 4px;
}

.c-bytes-lg i {
    width: 22px;
    height: 14px;
}

.c-str-cells {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 10px;
}

.c-str-cells span {
    display: grid;
    justify-items: center;
    min-width: 30px;
    padding: 3px 4px;
    border: 1px solid #93C5FD;
    border-radius: 4px;
    background: #EFF6FF;
    font-family: var(--mono);
}

.c-str-cells b {
    font-size: 0.85rem;
    color: var(--text-dark);
    white-space: pre;
}

.c-str-cells small {
    font-size: 0.62rem;
    color: var(--text-secondary);
}

.c-str-cells .is-null {
    border-color: #F59E0B;
    background: #FEF3C7;
}

.c-side-sub {
    margin: 2px 0 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.c-macros {
    display: grid;
    gap: 4px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.c-macros li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border: 1px dashed #A855F7;
    border-radius: var(--radius-sm);
    background: #FAF5FF;
    font-family: var(--mono);
    font-size: 0.85rem;
}

.c-macros span {
    color: var(--text-secondary);
}

.c-define-mem {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}

.c-cursor-block {
    background: #FFC94D;
    color: #0B1020;
}

.c-lab#constLab .c-console {
    white-space: pre;
}

/* The Names panel stacks macros above variables (not the memory-box grid) */
.c-lab#constLab .c-side-body {
    display: block;
}

/* ---------- printf lab ---------- */
.c-printf-fields {
    flex-wrap: wrap;
    row-gap: 6px;
}

.c-select-small {
    width: auto;
    font-family: var(--mono);
    font-size: 0.85rem;
}

.c-input-tiny {
    width: 46px;
    font-family: var(--mono);
    text-align: center;
}

.c-flag-boxes {
    display: inline-flex;
    gap: 3px;
}

.c-flag-boxes label {
    cursor: pointer;
}

.c-flag-boxes input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.c-flag-boxes span {
    display: grid;
    place-items: center;
    width: 26px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    font-family: var(--mono);
    font-weight: 700;
    color: var(--text-secondary);
}

.c-flag-boxes input:checked + span {
    border-color: var(--text-dark);
    background: var(--text-dark);
    color: #fff;
}

.c-flag-boxes input:focus-visible + span {
    outline: 2px solid var(--primary);
}

.c-spec {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}

.c-spec-part {
    display: grid;
    flex: 1;
    justify-items: center;
    gap: 2px;
    padding: 6px 2px;
    border: 1px dashed var(--border);
    border-radius: 6px;
    background: var(--surface);
}

.c-spec-part b {
    font-family: var(--mono);
    font-size: 1.05rem;
    color: #CBD5E1;
}

.c-spec-part small {
    font-size: 0.62rem;
    color: var(--text-secondary);
}

.c-spec-part.is-set {
    border-style: solid;
    border-color: #A855F7;
    background: #FAF5FF;
}

.c-spec-part.is-set b {
    color: #6B21A8;
}

.c-cells {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.c-cell {
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 28px;
    padding: 0 2px;
    border: 1px solid #93C5FD;
    border-radius: 4px;
    background: #EFF6FF;
    font-family: var(--mono);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-dark);
}

.c-cell.is-pad {
    border-style: dashed;
    border-color: #F59E0B;
    background: #FEF3C7;
    color: #B45309;
}

.c-cell.is-zero {
    border-color: #F59E0B;
}

.c-cell.is-empty {
    padding: 0 8px;
    font-weight: 400;
    color: var(--text-secondary);
}

.c-rule-note {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.c-lab#printfLab .c-side-body {
    display: block;
}

.c-lab#printfLab .c-console {
    white-space: pre-wrap;
    word-break: break-word;
}

.c-input-value {
    width: 104px;
    font-family: var(--mono);
}

.c-lab#printfLab .c-printf-fields {
    column-gap: 5px;
}

.c-lab#printfLab .c-printf-fields .field-label {
    margin-left: 4px;
}

/* ---------- scanf lab: the input buffer ---------- */
.c-lab#scanfLab .c-side-body {
    display: block;
}

.c-buffer {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    min-height: 32px;
}

.c-buf {
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 30px;
    border: 1px solid #93C5FD;
    border-radius: 4px;
    background: #EFF6FF;
    font-family: var(--mono);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-dark);
}

.c-buf.is-ws {
    color: #64748B;
}

.c-buf.is-used {
    border-color: var(--border);
    background: #F1F5F9;
    color: #94A3B8;
}

.c-buf.is-next {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.c-buf.is-read,
.c-buf.is-typed {
    border-color: var(--success);
    background: #DCFCE7;
    color: #166534;
}

.c-buf.is-skip {
    border-color: #A855F7;
    background: #F3E8FF;
    color: #6B21A8;
}

.c-buf.is-fail {
    border-color: #DC2626;
    background: #FEE2E2;
    color: #991B1B;
}

.c-buf-empty {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.c-buf-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin: 8px 0 10px;
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.c-buf-legend span {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: -6px;
    border-radius: 3px;
}

.c-buf-legend .lg-used { background: #DCFCE7; border: 1px solid var(--success); }
.c-buf-legend .lg-skip { background: #F3E8FF; border: 1px solid #A855F7; }
.c-buf-legend .lg-next { outline: 2px solid var(--primary); }

.c-scanf-mem {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}

.c-cursor.is-waiting {
    animation-duration: 0.5s;
}

.c-exit.is-waiting {
    background: var(--primary-light);
    color: var(--text-dark);
}

/* ---------- Arithmetic lab: step-by-step evaluation ---------- */
.c-lab#arithLab .c-side-body:has(.c-eval-vars),
.c-lab#arithLab .c-side-body:has(.c-eval) {
    display: block;
}

.c-input-expr {
    width: 210px;
    font-family: var(--mono);
}

.c-eval-vars {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    font-family: var(--mono);
    font-size: 0.8rem;
}

.c-eval-vars small {
    margin-left: auto;
    font-family: var(--font, inherit);
}

.c-eval-vars small i {
    font-style: normal;
    margin-left: 4px;
}

.c-eval {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.c-eval li {
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: #94A3B8;
}

.c-eval li.is-last {
    outline: 2px solid var(--primary);
    color: var(--text-dark);
}

.c-eval code {
    font-family: var(--mono);
    font-size: 0.95rem;
    font-weight: 600;
    white-space: pre-wrap;
    word-break: break-word;
}

.c-eval mark {
    padding: 1px 3px;
    border-radius: 4px;
    background: #FEF3C7;
    box-shadow: 0 0 0 1px #F59E0B;
    color: inherit;
}

.t-int { color: #1D4ED8; }
.t-double { color: #047857; }
.t-name { color: #7C3AED; }

.c-eval li:not(.is-last) .t-int,
.c-eval li:not(.is-last) .t-double,
.c-eval li:not(.is-last) .t-name {
    color: inherit;
}

/* ---------- Logic lab: skipped parts, truth tables ---------- */
.c-lab#logicLab .c-side-body:has(.c-eval-vars),
.c-lab#logicLab .c-side-body:has(.c-truth) {
    display: block;
}

.t-skip {
    color: #94A3B8 !important;
    text-decoration: line-through;
    text-decoration-color: #DC2626;
}

.c-truth {
    width: 100%;
    margin-bottom: 10px;
    border-collapse: collapse;
    font-family: var(--mono);
    text-align: center;
}

.c-truth th {
    padding: 6px;
    border-bottom: 2px solid var(--border);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.c-truth td {
    padding: 6px;
    border-bottom: 1px solid var(--border);
    font-size: 1rem;
    color: var(--text-dark);
}

.c-truth tr.is-current td {
    background: var(--primary-light);
}

.c-truth .c-tt-res b {
    display: inline-block;
    min-width: 26px;
    border-radius: 4px;
}

.c-truth .c-tt-res b.r1 { background: #DCFCE7; color: #166534; }
.c-truth .c-tt-res b.r0 { background: #FEE2E2; color: #991B1B; }

.c-truth th,
.c-truth td {
    padding-top: 3px;
    padding-bottom: 3px;
}

/* ---------- Bitwise lab: rows of bits ---------- */
.c-lab#bitsLab .c-side-body {
    display: block;
    max-height: 320px;
}

.c-brows {
    display: grid;
    gap: 4px;
    margin-bottom: 8px;
    --cell: 26px;
}

.c-brows.is-wide {
    --cell: 15px;
}

.c-brow {
    display: flex;
    align-items: center;
    gap: 8px;
}

.c-brow-label {
    flex: none;
    width: 62px;
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.c-brow-bits {
    display: flex;
    gap: 2px;
}

.c-brow-bits b,
.c-brow-bits i {
    display: grid;
    place-items: center;
    width: var(--cell);
    font-family: var(--mono);
}

.c-brow-bits i {
    font-size: 0.55rem;
    font-style: normal;
    color: var(--text-secondary);
}

.c-brow-bits b {
    height: 26px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    font-size: 0.85rem;
    color: #94A3B8;
}

.c-brows.is-wide .c-brow-bits b {
    height: 22px;
    font-size: 0.7rem;
}

.c-brow-bits .gap,
.c-brow-head .c-brow-bits i:nth-child(4n + 1):not(:first-child) {
    margin-left: 5px;
}

.c-brow-bits b.one {
    border-color: #3B82F6;
    background: #DBEAFE;
    color: #1E40AF;
}

.c-brow-bits b.todo {
    border-style: dashed;
    color: #CBD5E1;
}

.c-brow-bits b.focus {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.c-brow-bits b.enter {
    background: #FEF3C7;
}

.c-brow.is-result .c-brow-bits b.one {
    border-color: var(--success);
    background: #DCFCE7;
    color: #166534;
}

.c-brow.is-mask .c-brow-bits b.one,
.c-brow.is-flipped .c-brow-bits b.one {
    border-color: #A855F7;
    background: #F3E8FF;
    color: #6B21A8;
}

.c-brow-val {
    min-width: 36px;
    font-family: var(--mono);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-dark);
    text-align: right;
}

.c-brow-head .c-brow-val {
    font-size: 0.6rem;
    font-weight: 400;
    color: var(--text-secondary);
}

@media (max-width: 420px) {
    .c-brows { --cell: 22px; }
    .c-brows.is-wide { --cell: 12px; }
    .c-brow-label { width: 48px; }
}

.c-brows.is-wide {
    --cell: 12px;
}

.c-brows.is-wide .c-brow-bits {
    gap: 1px;
}

.c-brows.is-wide .c-brow-label {
    width: 46px;
}

.c-brows.is-wide .c-brow-bits .gap,
.c-brows.is-wide .c-brow-head .c-brow-bits i:nth-child(4n + 1):not(:first-child) {
    margin-left: 4px;
}

.c-brows.is-wide .c-brow-head .c-brow-bits i {
    font-size: 0.48rem;
}

@media (max-width: 420px) {
    .c-brows.is-wide { --cell: 11px; }
    .c-brows.is-wide .c-brow-label { width: 40px; }
    .c-brows.is-wide .c-brow-bits .gap,
    .c-brows.is-wide .c-brow-head .c-brow-bits i:nth-child(4n + 1):not(:first-child) { margin-left: 3px; }
}

/* ---------- Precedence lab: grouping parentheses and the operator tree ---------- */
.c-lab#precLab .c-side-body:has(.c-paren-line),
.c-lab#precLab .c-side-body:has(.c-mem-empty) {
    display: block;
}

.c-lab#precLab .c-side-body {
    max-height: 270px;
}

.c-paren-line {
    margin: 0 0 12px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.c-paren-line code {
    font-family: var(--mono);
    font-size: 0.95rem;
    font-weight: 600;
    white-space: pre-wrap;
    word-break: break-word;
}

.c-grp {
    color: inherit;
}

.c-paren-line mark {
    padding: 1px 2px;
    border-radius: 4px;
    background: #FEF3C7;
    box-shadow: 0 0 0 1px #F59E0B;
    color: inherit;
}

.c-tree,
.c-tree ul {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.c-tree ul {
    position: relative;
    margin-top: 14px;
}

.c-tree ul::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    height: 8px;
    border-left: 1px solid #94A3B8;
}

.c-tree li {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.c-tnode {
    min-width: 26px;
    padding: 2px 6px;
    border: 1px solid #A855F7;
    border-radius: 6px;
    background: #FAF5FF;
    font-family: var(--mono);
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
    color: #6B21A8;
}

.c-tnode.is-leaf {
    border-color: #93C5FD;
    background: #EFF6FF;
    color: #1E40AF;
}

.c-tnode.is-mark {
    border-color: #F59E0B;
    background: #FEF3C7;
    color: var(--text-dark);
}

.c-tree ul {
    margin-top: 9px;
}

.c-tree ul::before {
    top: -7px;
    height: 5px;
}

.c-tnode {
    padding: 0 5px;
    font-size: 0.75rem;
    line-height: 1.5;
}

.c-lab#precLab .c-paren-line {
    margin-bottom: 8px;
    padding: 6px 10px;
}

/* ---------- Decisions: dimmed / done code lines, flowchart ---------- */
.c-lab .code-line.is-skipped {
    opacity: 0.35;
    text-decoration: line-through;
    text-decoration-color: #F87171;
}

.c-lab .code-line.is-done .code-num::after {
    content: "✓";
    margin-left: 2px;
    color: #4ADE80;
    font-size: 0.65rem;
}

.c-lab#ifLab .c-side-body {
    display: block;
    max-height: none;
}

.c-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.c-fpart {
    display: grid;
    gap: 3px;
    width: 80%;
}

.c-fbox {
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    font-family: var(--mono);
    font-size: 0.72rem;
    text-align: center;
    color: var(--text-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c-fbox.is-empty {
    border-style: dashed;
    color: var(--text-secondary);
}

.c-farrow {
    width: 2px;
    height: 10px;
    background: #94A3B8;
}

.c-fdiamond {
    display: grid;
    place-items: center;
    min-width: 60%;
    padding: 6px 18px;
    clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
    background: #EDE9FE;
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 700;
    color: #5B21B6;
}

.c-fbranches {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
}

.c-fbranch {
    display: grid;
    gap: 3px;
    padding: 6px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
}

.c-fbranch b {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.c-fpart.is-active .c-fbox,
.c-fbranch.is-active {
    border-color: var(--primary);
    background: var(--primary-light);
}

.c-fdiamond.is-active {
    background: var(--primary);
    color: var(--text-dark);
}

.c-fpart.is-done .c-fbox,
.c-fbranch.is-done {
    border-color: var(--success);
}

.c-fdiamond.is-done {
    background: #DCFCE7;
    color: #166534;
}

.c-fbranch.is-skipped {
    opacity: 0.4;
    border-style: dashed;
}

/* ---------- else-if lab: ladder, decision tree, else pairing ---------- */
.c-lab#elseIfLab .c-side-body {
    display: block;
    max-height: none;
}

.c-ladder-list {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.c-ladder-list li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 8px;
    padding: 6px 10px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.c-lad-cond {
    font-family: var(--mono);
    font-size: 0.8rem;
    font-weight: 700;
    color: #5B21B6;
}

.c-lad-act {
    font-size: 0.8rem;
    color: var(--text-dark);
}

.c-lad-state {
    grid-column: 1 / -1;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.c-ladder-list li.is-true { border-color: var(--success); background: #F0FDF4; }
.c-ladder-list li.is-true .c-lad-state { color: #166534; }
.c-ladder-list li.is-false { border-color: #FCA5A5; }
.c-ladder-list li.is-false .c-lad-state { color: #B91C1C; }
.c-ladder-list li.is-skipped { opacity: 0.4; border-style: dashed; }

.c-dtree {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.c-dkids {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 100%;
}

.c-dbranch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 5px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
}

.c-dbranch b {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.c-dbranch.is-off {
    opacity: 0.35;
}

.c-dnode {
    padding: 4px 12px;
    border-radius: 6px;
    background: #EDE9FE;
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 700;
    color: #5B21B6;
}

.c-dnode.is-true { background: #DCFCE7; color: #166534; }
.c-dnode.is-false { background: #FEE2E2; color: #991B1B; }

.c-dleaf {
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    font-size: 0.75rem;
    text-align: center;
}

.c-dleaf.is-hit {
    border-color: var(--success);
    background: #DCFCE7;
    font-weight: 700;
}

.c-pairing {
    display: grid;
    gap: 6px;
    margin-bottom: 10px;
}

.c-pair-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.c-pair-row.is-indent {
    margin-left: 24px;
}

.c-pair-row code {
    font-family: var(--mono);
    font-weight: 700;
}

.c-pair-row span {
    font-size: 0.8rem;
    font-weight: 700;
    color: #B45309;
}

.c-pair-row.is-owner {
    border-color: var(--primary);
    background: var(--primary-light);
}

/* ---------- switch lab: case labels ---------- */
.c-lab#switchLab .c-side-body {
    display: block;
    max-height: none;
}

.c-case-list {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.c-case-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.c-case-list li span {
    flex: 1;
    font-family: var(--mono);
    font-size: 0.82rem;
    font-weight: 700;
    color: #5B21B6;
}

.c-case-list li b {
    font-size: 0.7rem;
    color: #B45309;
}

.c-case-list li b.brk {
    color: #166534;
}

.c-case-list li.is-target {
    border-color: var(--primary);
    background: var(--primary-light);
}

.c-case-list li.is-fell {
    border-color: #FCA5A5;
    background: #FEF2F2;
}

.c-case-list li.is-stop {
    box-shadow: inset 0 -3px 0 var(--success);
}

.c-case-list li.c-case-end {
    border-style: dashed;
}

.c-case-list li.c-case-end span {
    color: var(--text-secondary);
}

.c-rule-card ul {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 18px;
    font-size: 0.85rem;
    color: var(--text-dark);
}

/* ---------- Loops: the trace table ---------- */
.c-lab#whileLab .c-side-body {
    display: block;
    max-height: 230px;
}

.c-trace {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--mono);
    font-size: 0.8rem;
    text-align: center;
}

.c-trace th {
    position: sticky;
    top: 0;
    padding: 4px 6px;
    border-bottom: 2px solid var(--border);
    background: var(--background-soft, #F8FAFC);
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.c-trace td {
    padding: 3px 6px;
    border-bottom: 1px solid var(--border);
    color: var(--text-dark);
}

.c-trace tr.is-last td {
    background: var(--primary-light);
    font-weight: 700;
}

.c-trace tr.is-exit td {
    color: #B91C1C;
}

.c-trace-empty {
    color: var(--text-secondary) !important;
    font-family: var(--font, inherit);
}

.c-trace-inf {
    margin: 8px 0 0;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    color: #B91C1C;
}

/* ---------- for lab: the three parts ---------- */
.c-lab#forLab .c-side-body {
    display: block;
    max-height: 230px;
}

.c-forparts {
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    gap: 4px;
    margin-bottom: 8px;
}

.c-forparts span {
    display: grid;
    gap: 1px;
    justify-items: center;
    padding: 4px 4px;
    border: 2px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--text-dark);
    text-align: center;
    word-break: break-word;
}

.c-forparts b {
    font-size: 0.8rem;
    color: #7C3AED;
}

.c-forparts .is-on {
    border-color: var(--primary);
    background: var(--primary-light);
}

.c-forbody {
    min-width: 46px;
}

.c-forwhile {
    margin: 0 0 8px;
    padding: 6px 10px;
    border-radius: 6px;
    background: #0B1020;
    font-family: var(--mono);
    font-size: 0.72rem;
    line-height: 1.45;
    color: #E2E8F0;
}

.c-forwhile i {
    font-style: normal;
    color: #C4B5FD;
}

.c-lab#doWhileLab .c-side-body {
    display: block;
    max-height: 230px;
}

/* ---------- Nested loops: pattern grid, (i, j) grid ---------- */
.c-lab#nestedLab .c-side-body {
    display: block;
    max-height: 250px;
}

.c-pgrid {
    display: grid;
    gap: 3px;
}

.c-prow {
    display: flex;
    align-items: center;
    gap: 3px;
    min-height: 28px;
    padding: 1px 4px;
    border-radius: 4px;
}

.c-prow.is-cur {
    background: var(--primary-light);
}

.c-plabel {
    width: 34px;
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.c-pcell {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid #93C5FD;
    border-radius: 4px;
    background: #EFF6FF;
    font-family: var(--mono);
    font-weight: 700;
    color: #1E40AF;
}

.c-pcell.is-cur {
    border-color: var(--primary);
    background: #FEF3C7;
    color: var(--text-dark);
}

.c-ijgrid {
    display: grid;
    grid-template-columns: 40px repeat(3, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}

.c-ijgrid .h {
    display: grid;
    place-items: center;
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.c-ij {
    display: grid;
    place-items: center;
    height: 34px;
    border: 1px dashed var(--border);
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 0.8rem;
    font-weight: 700;
}

.c-ij.is-printed { border-style: solid; border-color: var(--success); background: #DCFCE7; color: #166534; }
.c-ij.is-break,
.c-ij.is-goto { border-style: solid; border-color: #DC2626; background: #FEE2E2; color: #991B1B; }
.c-ij.is-never { color: #CBD5E1; }
.c-ij.is-cur { outline: 2px solid var(--primary); outline-offset: 1px; }

/* ---------- Problem solving lab ---------- */
.c-lab#problemsLab .c-side-body {
    display: block;
    max-height: 250px;
}

.c-idea {
    margin: 0 0 8px;
    padding: 8px 10px;
    border-left: 3px solid var(--primary);
    border-radius: 4px;
    background: var(--primary-light);
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-dark);
}

.c-inline-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.c-inline-field[hidden] {
    display: none;
}

/* ---------- Functions: the call stack (c-stack.js) ---------- */
.c-lab#functionsLab .c-side-body {
    display: block;
    max-height: 250px;
}

.c-fields-note {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.c-stack-label {
    display: block;
    margin: 0 0 4px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.c-stack {
    display: grid;
    gap: 5px;
}

.c-sframe {
    padding: 5px 8px;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    opacity: 0.7;
}

.c-sframe.is-top {
    border-color: var(--primary);
    background: var(--primary-light);
    opacity: 1;
}

.c-sframe.is-new {
    animation: c-frame-in 0.35s ease-out;
}

@keyframes c-frame-in {
    from { transform: translateY(-8px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.c-sframe.is-returning {
    border-color: var(--success);
    background: #F0FDF4;
}

.c-sframe-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--text-dark);
}

.c-sframe-head span {
    font-family: var(--font, inherit);
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.c-sframe-vars {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.c-svar {
    padding: 1px 7px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--text-dark);
}

.c-svar i {
    font-style: normal;
    color: #7C3AED;
}

.c-svar small {
    font-family: var(--font, inherit);
    color: var(--text-secondary);
}

.c-svar.is-new     { border-color: var(--success); background: #DCFCE7; }
.c-svar.is-changed { border-color: #F59E0B; background: #FEF3C7; }

.c-svar-none {
    font-size: 0.72rem;
    font-style: italic;
    color: var(--text-secondary);
}

.c-sframe-ret {
    margin-top: 4px;
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 700;
    color: #166534;
}

.c-callexpr {
    margin: 0 0 8px;
    padding: 5px 10px;
    border-radius: 6px;
    background: #0B1020;
    font-family: var(--mono);
    font-size: 0.78rem;
    color: #FDE68A;
    word-break: break-word;
}

.c-globals {
    margin-bottom: 8px;
    padding: 5px 8px;
    border: 2px dashed #A78BFA;
    border-radius: 8px;
    background: #F5F3FF;
}

.c-known {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 8px;
}

.c-known span {
    padding: 2px 8px;
    border: 1px solid var(--success);
    border-radius: 999px;
    background: #DCFCE7;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: #166534;
}

.c-compile-error {
    margin: 0;
    padding: 6px 10px;
    border-left: 3px solid #DC2626;
    border-radius: 4px;
    background: #FEE2E2;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: #991B1B;
    word-break: break-word;
}

.c-lab#paramsLab .c-side-body,
.c-lab#scopeLab .c-side-body,
.c-lab#recursionLab .c-side-body {
    display: block;
    max-height: 250px;
}

.c-svar.is-read { border-color: #3B82F6; background: #DBEAFE; }

/* ---------- Recursion: compact stack, call tree, pegs ---------- */
.c-stack.is-compact {
    gap: 3px;
}

.c-stack.is-compact .c-sframe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    padding: 2px 8px;
}

.c-stack.is-compact .c-sframe-head span {
    display: none;
}

.c-stack.is-compact .c-sframe-vars,
.c-stack.is-compact .c-sframe-ret {
    margin-top: 0;
}

.c-tree {
    display: block;
    width: 100%;
    max-height: 225px;
}

.c-tree-edge {
    stroke: transparent;
    stroke-width: 2;
}

.c-tree-edge.is-shown { stroke: #CBD5E1; }
.c-tree-edge.is-stack { stroke: #F59E0B; stroke-width: 3; }

.c-tree-node circle {
    fill: transparent;
    stroke: transparent;
    stroke-width: 2;
}

.c-tree-node text {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    text-anchor: middle;
    fill: transparent;
}

.c-tree-node.is-stack circle { fill: #FEF3C7; stroke: #F59E0B; }
.c-tree-node.is-stack text   { fill: #92400E; }
.c-tree-node.is-done circle  { fill: #DCFCE7; stroke: var(--success); }
.c-tree-node.is-done text    { fill: #166534; font-size: 12px; }
.c-tree-node.is-current circle { stroke: var(--primary); stroke-width: 3; }

.c-pegs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 8px;
}

.c-peg {
    display: grid;
    justify-items: center;
    gap: 2px;
}

.c-peg-disks {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
    width: 100%;
    height: 66px;
    border-bottom: 3px solid #64748B;
    background: linear-gradient(#94A3B8, #94A3B8) center / 4px 100% no-repeat;
}

.c-peg b {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.c-disk {
    display: grid;
    place-items: center;
    max-width: 100%;
    height: 18px;
    border-radius: 9px;
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
}

.c-disk-1 { background: #3B82F6; }
.c-disk-2 { background: #8B5CF6; }
.c-disk-3 { background: #EC4899; }
.c-disk.is-moved { outline: 2px solid #F59E0B; outline-offset: 1px; }

.c-overflow {
    margin-bottom: 8px;
}

/* 13-line programs (Tower of Hanoi) still fit on one screen */
.c-lab.is-tight .c-code {
    line-height: 1.36;
}

.c-stack.is-compact .c-svar i {
    display: none;
}

/* ---------- Arrays & strings: memory cells (c-array.js) ---------- */
.c-lab#arraysLab .c-side-body,
.c-lab#matrixLab .c-side-body,
.c-lab#stringsLab .c-side-body,
.c-lab#strfnLab .c-side-body {
    display: block;
    max-height: 250px;
}

.c-arr {
    margin-bottom: 8px;
}

.c-arr-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--text-dark);
}

.c-arr-head i {
    font-style: normal;
    color: #7C3AED;
}

.c-arr-head span + span {
    font-family: var(--font, inherit);
    font-size: 0.68rem;
    color: var(--text-secondary);
}

.c-arr-note {
    margin: -2px 0 4px;
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.c-arr-cells {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.c-mcell {
    display: grid;
    justify-items: center;
    min-width: 38px;
    padding: 1px 3px 0;
    border: 2px solid #93C5FD;
    border-radius: 6px;
    background: #EFF6FF;
}

.c-mcell small {
    font-family: var(--mono);
    font-size: 0.6rem;
    color: var(--text-secondary);
}

.c-mcell b {
    font-family: var(--mono);
    font-size: 0.85rem;
    color: #1E3A8A;
}

.c-mcell em {
    min-height: 0.9em;
    font-family: var(--mono);
    font-size: 0.62rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.2;
    color: #B45309;
}

.c-mcell.is-nul      { border-color: #A78BFA; background: #F5F3FF; }
.c-mcell.is-nul b    { color: #6D28D9; }
.c-mcell.is-garbage  { border-style: dashed; border-color: #CBD5E1; background: #F8FAFC; }
.c-mcell.is-garbage b { color: #94A3B8; }
.c-mcell.is-read     { border-color: #3B82F6; background: #DBEAFE; }
.c-mcell.is-write    { border-color: #F59E0B; background: #FEF3C7; }
.c-mcell.is-found    { border-color: var(--success); background: #DCFCE7; }
.c-mcell.is-bad      { border-color: #DC2626; background: #FEE2E2; }
.c-mcell.is-bad b    { color: #991B1B; }
.c-mcell.is-dim      { opacity: 0.4; }
.c-mcell.is-cur      { outline: 2px solid var(--primary); outline-offset: 1px; }

.c-mcell.is-beyond {
    margin-left: 6px;
    border-style: dashed;
    border-color: #F87171;
    background: repeating-linear-gradient(135deg, #FFF1F2, #FFF1F2 4px, #FFE4E6 4px, #FFE4E6 8px);
}

.c-mcell.is-beyond + .c-mcell.is-beyond {
    margin-left: 0;
}

.c-arr-grid {
    display: grid;
    gap: 3px;
}

.c-arr-row {
    display: flex;
    align-items: center;
    gap: 3px;
}

.c-arr-rowlabel {
    width: 40px;
    font-family: var(--mono);
    font-size: 0.68rem;
    color: var(--text-secondary);
}

.c-arr-row .c-mcell {
    min-width: 52px;
}

.c-strip-label {
    margin: 6px 0 3px;
    font-size: 0.68rem;
    color: var(--text-secondary);
}

.c-strip {
    display: flex;
    gap: 2px;
}

.c-strip-cell {
    flex: 1;
    padding: 2px 0;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    color: #1E293B;
}

.c-strip-cell.row-0 { background: #DBEAFE; }
.c-strip-cell.row-1 { background: #FCE7F3; }
.c-strip-cell.row-2 { background: #DCFCE7; }
.c-strip-cell.row-3 { background: #FEF3C7; }
.c-strip-cell.is-read,
.c-strip-cell.is-write,
.c-strip-cell.is-cur { outline: 2px solid var(--primary); }

.c-arr-scalars {
    margin-top: 2px;
}

.c-arr-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 14px;
}

.c-arr.is-compact .c-arr-row .c-mcell {
    min-width: 40px;
}

.c-arr.is-char .c-mcell {
    min-width: 26px;
    padding: 1px 2px 0;
}

/* ---------- Pointers: boxes with addresses (c-pointer.js) ---------- */
.c-lab#ptrLab .c-side-body,
.c-lab#ptrFnLab .c-side-body,
.c-lab#ptrArrLab .c-side-body,
.c-lab#ptrAdvLab .c-side-body,
.c-lab#heapLab .c-side-body {
    display: block;
    max-height: 250px;
}

.c-pgroup {
    margin-bottom: 5px;
    padding: 3px 5px 5px;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.c-pgroup.is-heap { border: 2px dashed #F59E0B; background: #FFFBEB; }
.c-pgroup.is-data { border-style: dashed; background: #F8FAFC; }
.c-pgroup.is-code { border-style: dashed; background: #F0F9FF; }

.c-pboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.c-pbox-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 5px;
}

.c-pbox {
    display: grid;
    gap: 0;
    min-width: 58px;
    padding: 2px 6px;
    border: 2px solid #93C5FD;
    border-radius: 7px;
    background: #fff;
}

.c-pbox.is-ptr {
    border-color: var(--pc);
}

.c-pbox-head {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--text-dark);
}

.c-pbox-head i {
    font-style: normal;
    color: #7C3AED;
}

.c-pbox-val {
    font-family: var(--mono);
    font-size: 0.88rem;
    color: #1E3A8A;
}

.c-pbox.is-ptr .c-pbox-val {
    font-size: 0.8rem;
    color: var(--pc);
}

.c-pto {
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--pc, var(--text-dark));
}

.c-pto.is-bad {
    color: #DC2626;
}

.c-pbox-addr {
    font-size: 0.62rem;
    color: var(--text-secondary);
}

.c-pin {
    justify-self: start;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--pc);
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 700;
    color: #fff;
}

.c-pbox.is-new     { background: #F0FDF4; border-color: var(--success); }
.c-pbox.is-changed { background: #FEF3C7; border-color: #F59E0B; }
.c-pbox.is-read    { background: #DBEAFE; border-color: #3B82F6; }
.c-pbox.is-bad     { background: #FEE2E2; border-color: #DC2626; }
.c-pbox.is-ptr.is-new,
.c-pbox.is-ptr.is-changed { border-color: var(--pc); }
.c-pbox.is-freed {
    border-style: dashed;
    border-color: #94A3B8;
    background: repeating-linear-gradient(135deg, #F1F5F9, #F1F5F9 4px, #E2E8F0 4px, #E2E8F0 8px);
    opacity: 0.75;
}
.c-pbox.is-leaked { border-color: #DC2626; background: #FEE2E2; }

.c-pmcells {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.c-pmcell {
    display: grid;
    justify-items: center;
    min-width: 30px;
    padding: 0 3px;
    border: 1px solid #93C5FD;
    border-radius: 5px;
    background: #EFF6FF;
}

.c-pmcell small {
    font-family: var(--mono);
    font-size: 0.58rem;
    color: var(--text-secondary);
}

.c-pmcell b {
    font-family: var(--mono);
    font-size: 0.8rem;
    color: #1E3A8A;
}

.c-pmcell .c-pin {
    justify-self: center;
    margin-bottom: 2px;
}

.c-pmcell.is-garbage { border-style: dashed; background: #F8FAFC; }
.c-pmcell.is-garbage b { color: #94A3B8; }
.c-pmcell.is-read  { border-color: #3B82F6; background: #DBEAFE; }
.c-pmcell.is-write { border-color: #F59E0B; background: #FEF3C7; }
.c-pmcell.is-found { border-color: var(--success); background: #DCFCE7; }

.c-pgroup.is-static { border-style: dashed; border-color: #A78BFA; background: #F5F3FF; }

/* string literals: a compact row of characters */
.c-pbox.is-literal .c-pmcell {
    min-width: 17px;
    padding: 0 2px;
}

.c-pbox.is-literal .c-pmcell small {
    display: none;
}

.c-pbox.is-literal .c-pbox-addr {
    display: none;
}

.c-pbox.is-narrow .c-pbox-line {
    display: grid;
}

.c-pbox.is-literal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 6px;
    width: 100%;
}

.c-pbox,
.c-pmcell {
    line-height: 1.25;
}

/* ---------- Structures: members, byte map (c-pointer.js) ---------- */
.c-lab#structLab .c-side-body,
.c-lab#structPtrLab .c-side-body,
.c-lab#unionLab .c-side-body {
    display: block;
    max-height: 250px;
}

.c-pbox.is-struct {
    border-color: #A78BFA;
}

.c-pfields {
    display: grid;
    gap: 2px;
    margin: 2px 0;
}

.c-pfield {
    padding: 1px 6px;
    border-left: 3px solid var(--fc, #93C5FD);
    border-radius: 3px;
    background: #F8FAFC;
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--text-dark);
}

.c-pfield i {
    font-style: normal;
    color: #7C3AED;
}

.c-pfield b {
    color: #1E3A8A;
}

.c-pfield small {
    font-family: var(--font, inherit);
    font-size: 0.62rem;
    color: var(--text-secondary);
}

.c-pfield.is-write { background: #FEF3C7; }
.c-pfield.is-read  { background: #DBEAFE; }
.c-pfield.is-found { background: #DCFCE7; }
.c-pfield.is-bad   { background: #FEE2E2; }

.c-fcol-0 { --fc: #3B82F6; }
.c-fcol-1 { --fc: #EC4899; }
.c-fcol-2 { --fc: #10B981; }
.c-fcol-3 { --fc: #F59E0B; }

.c-bytes-strip {
    display: flex;
    gap: 2px;
    margin: 3px 0 1px;
}

.c-byte {
    flex: 1;
    min-width: 12px;
    padding: 1px 0;
    border-radius: 3px;
    background: var(--fc);
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 700;
    text-align: center;
    color: #fff;
}

.c-byte.is-pad {
    background: repeating-linear-gradient(135deg, #E2E8F0, #E2E8F0 3px, #CBD5E1 3px, #CBD5E1 6px);
    color: #64748B;
}

.c-pbox.is-struct.has-bytes {
    width: 100%;
}

.c-pbox.has-bytes .c-byte {
    padding: 3px 0;
    font-size: 0.72rem;
}

/* ---------- Unions: shared bytes ---------- */
.c-ubytes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-bottom: 6px;
}

.c-ubyte {
    display: grid;
    justify-items: center;
    padding: 2px 0;
    border: 2px solid #A78BFA;
    border-radius: 6px;
    background: #F5F3FF;
    line-height: 1.25;
}

.c-ubyte small {
    font-size: 0.6rem;
    color: var(--text-secondary);
}

.c-ubyte b {
    font-family: var(--mono);
    font-size: 0.9rem;
    color: #5B21B6;
}

.c-ubyte.is-write {
    border-color: #F59E0B;
    background: #FEF3C7;
}

.c-urows {
    display: grid;
    gap: 3px;
}

.c-urow {
    display: grid;
    grid-template-columns: 70px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 2px 6px;
    border-radius: 5px;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.c-urow i {
    font-style: normal;
    color: #7C3AED;
}

.c-urow-bar {
    height: 8px;
    border-radius: 4px;
    background: #E2E8F0;
}

.c-urow-bar span {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: #A78BFA;
}

.c-urow.is-active {
    background: #DCFCE7;
    color: #166534;
    font-weight: 700;
}

.c-urow.is-read {
    background: #DBEAFE;
    color: #1E3A8A;
}

.c-unote {
    margin: 6px 0 0;
    font-size: 0.72rem;
    color: var(--text-secondary);
}

/* ---------- Files on disk (c-file.js) ---------- */
.c-lab#fileLab .c-side-body,
.c-lab#fileAdvLab .c-side-body,
.c-lab#ppLab .c-side-body {
    display: block;
    max-height: 250px;
}

.c-dfile-vars {
    margin-bottom: 6px;
}

.c-dfile {
    margin-bottom: 6px;
    padding: 4px 6px 6px;
    border: 2px solid #CBD5E1;
    border-radius: 8px;
    background: #F8FAFC;
}

.c-dfile.is-open {
    border-color: var(--primary);
    background: #FFFBEB;
}

.c-dfile.is-missing {
    border-style: dashed;
    opacity: 0.7;
}

.c-dfile-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 0.75rem;
}

.c-dfile-head b {
    font-family: var(--mono);
    color: var(--text-dark);
}

.c-dfile-head span {
    font-size: 0.68rem;
    color: var(--text-secondary);
}

.c-dcells {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.c-dcell {
    min-width: 17px;
    padding: 1px 2px;
    border: 1px solid #CBD5E1;
    border-radius: 3px;
    background: #fff;
    font-family: var(--mono);
    font-size: 0.75rem;
    line-height: 1.3;
    text-align: center;
    color: var(--text-dark);
}

.c-dcells.is-binary .c-dcell {
    min-width: 22px;
    color: #5B21B6;
}

.c-dcell.is-nl    { color: #94A3B8; }
.c-dcell.is-read  { border-color: #3B82F6; background: #DBEAFE; }
.c-dcell.is-write { border-color: #F59E0B; background: #FEF3C7; }
.c-dcell.is-cur   { outline: 2px solid var(--primary); outline-offset: 1px; }
.c-dcell.is-end   { border-style: dashed; font-size: 0.62rem; color: var(--text-secondary); }

.c-dfile-note {
    margin-top: 4px;
    font-size: 0.68rem;
    color: var(--text-secondary);
}

/* ---------- Preprocessor ---------- */
.c-pp-macros {
    display: grid;
    gap: 3px;
    margin-bottom: 6px;
}

.c-pp-macros span {
    padding: 2px 8px;
    border-left: 3px solid #A78BFA;
    border-radius: 3px;
    background: #F5F3FF;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--text-dark);
}

.c-pp-macros b {
    color: #6D28D9;
}

.c-pp-after {
    margin: 0 0 6px;
    padding: 6px 8px;
    border-radius: 6px;
    background: #0B1020;
    font-family: var(--mono);
    font-size: 0.72rem;
    line-height: 1.5;
    color: #E2E8F0;
    white-space: pre-wrap;
    word-break: break-word;
}

.c-pp-after .is-write {
    color: #FDE68A;
}

.c-pp-after .is-removed {
    color: #64748B;
    text-decoration: line-through;
}

.c-pgroup.is-args .c-pbox.is-literal {
    width: auto;
}

/* argc / argv: addresses do not matter here — keep the picture small */
.c-lab#ppLab .c-pbox-addr {
    display: none;
}

.c-lab#ppLab .c-pbox.is-literal .c-pmcell {
    min-width: 14px;
}