/*
 * Simulador de Compilador RISC-V
 * Tema claro e tema escuro definidos por variáveis; o tema é escolhido em <html data-theme="light|dark">.
 * Cores de etiquetas (estações, ROB, instruções) chegam pela variável --tag e são misturadas com o fundo.
 */

:root,
[data-theme='light'] {
    --bg: #f8fafc;
    --panel: #ffffff;
    --panel-2: #f2f4f8;
    --line: #b4bfcf;
    --line-strong: #8796ad;
    --ink: #111827;
    --muted: #475266;
    --faint: #667085;
    --accent: #1650ff;
    --accent-ink: #ffffff;
    --accent-soft: #e3ebff;
    --focus: #d99700;
    --focus-soft: #fff3cf;
    --warn: #b23a12;
    --ok: #1d6e42;
    --ok-soft: #d6f0e0;
    --bad-soft: #f8d9d0;
    --wire: #8f9bb0;
    --c-issue: #e3e7fb;
    --c-id: #e7ebf2;
    --c-exec: #d7f0e3;
    --c-mem: #d6eaf6;
    --c-write: #efe0f6;
    --c-commit: #f8ebcc;
    --c-squash: #f6d6d2;
    --c-stall: #fbe5cc;
    --tag-bg: 18%;
    --tag-fg: 75%;
    --shadow: 0 4px 16px rgba(17, 24, 39, 0.10);
    color-scheme: light;
}

[data-theme='dark'] {
    --bg: #000000;
    --panel: #0d0f14;
    --panel-2: #1a1e27;
    --line: #6b7486;
    --line-strong: #9aa3b5;
    --ink: #ffffff;
    --muted: #dde2ea;
    --faint: #b4bccb;
    --accent: #5294ff;
    --accent-ink: #000000;
    --accent-soft: #0f2a5e;
    --focus: #ffd23f;
    --focus-soft: #3d3200;
    --warn: #ff9e7a;
    --ok: #7ef0ad;
    --ok-soft: #0f3a24;
    --bad-soft: #4a1d1d;
    --wire: #7c869a;
    --c-issue: #22306e;
    --c-id: #2a3140;
    --c-exec: #11452c;
    --c-mem: #0f3c57;
    --c-write: #44255a;
    --c-commit: #574300;
    --c-squash: #5c1f22;
    --c-stall: #5a3410;
    --tag-bg: 40%;
    --tag-fg: 75%;
    --shadow: 0 0 0 1px #6b7486;
    color-scheme: dark;
}

:root {
    --sans: 'IBM Plex Sans', system-ui, 'Segoe UI', Roboto, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
    --radius: 6px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.4;
}

a {
    color: var(--accent);
}

code {
    font-family: var(--mono);
}

.hidden {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.screen {
    position: fixed;
    inset: 0;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Ícones: SVG usados como máscara, para seguirem a cor do texto */

.icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
    flex: none;
}

.i-cpu { --icon: url('../svg/cpu.svg'); }
.i-new { --icon: url('../svg/new.svg'); }
.i-close { --icon: url('../svg/close.svg'); }
.i-moon { --icon: url('../svg/moon.svg'); }
.i-sun { --icon: url('../svg/sun.svg'); }
.i-skip-back { --icon: url('../svg/skipBack.svg'); }
.i-skip-fwd { --icon: url('../svg/skipFwd.svg'); }
.i-step-back { --icon: url('../svg/stepBack.svg'); }
.i-step-fwd { --icon: url('../svg/stepFwd.svg'); }

/* Botões */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: inherit;
    font-size: 0.875rem;
    color: var(--ink);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 5px 10px;
    cursor: pointer;
    white-space: nowrap;
}

.btn:hover {
    background: var(--panel-2);
    border-color: var(--line);
}

.btn.primary {
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 600;
}

.btn.primary:hover {
    background: color-mix(in srgb, var(--accent) 88%, var(--ink));
    border-color: transparent;
}

.btn.small {
    font-size: 0.8rem;
    padding: 2px 8px;
    border-color: var(--line);
}

.icon-btn {
    padding: 6px;
}

/* Estrutura ----------------------------------------------------------------------------------------------- */

#header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 14px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    z-index: 30;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 10px;
    border-right: 1px solid var(--line);
}

.brand-mark {
    width: 26px;
    height: 26px;
    color: var(--accent);
}

.brand-name {
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.brand-name b {
    font-weight: 600;
    color: var(--accent);
}

.actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
}

.tools {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lang select {
    font: inherit;
    font-size: 0.85rem;
    color: var(--ink);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 4px 6px;
}


/* Ajuda */

#readme {
    display: none;
    position: fixed;
    inset: 0;
    overflow: auto;
    z-index: 40;
    background: var(--bg);
    scroll-behavior: smooth;
}

#readme.overlay {
    display: block;
}


.help {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 40px;
    max-width: 1180px;
    padding: 24px 32px 80px;
}

.help-toc {
    position: sticky;
    top: 0;
    align-self: start;
    max-height: calc(100vh - 140px);
    overflow: auto;
    padding-top: 4px;
}

.help-search {
    width: 100%;
    font: inherit;
    font-size: 0.875rem;
    color: var(--ink);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 6px 10px;
}

.help-toc-title {
    margin: 18px 0 6px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--faint);
}

.help-toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: toc;
}

.help-toc li {
    counter-increment: toc;
}

.help-toc a {
    display: block;
    padding: 5px 10px;
    border-left: 2px solid var(--line);
    color: var(--muted);
    text-decoration: none;
    font-size: 0.9rem;
}

.help-toc a::before {
    content: counter(toc) '.';
    display: inline-block;
    width: 2em;
    color: var(--faint);
    font-family: var(--mono);
    font-size: 0.85em;
}

.help-toc a:hover {
    color: var(--ink);
    background: var(--panel-2);
}

.help-toc a.current {
    color: var(--accent);
    border-left-color: var(--accent);
    font-weight: 600;
}

.help-body {
    max-width: 78ch;
    font-size: 0.95rem;
    line-height: 1.6;
}

.help-head {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.help-head h1 {
    font-size: 1.7rem;
    font-weight: 600;
    margin: 0 0 6px;
}

.help-lead {
    margin: 0;
    color: var(--muted);
}

.help-close {
    display: none;
    border-color: var(--line);
}

#readme.overlay .help-close {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    margin-bottom: 10px;
}


.help-section {
    padding-top: 10px;
}

.help-section h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 30px 0 8px;
    color: var(--ink);
}

.help-section h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 22px 0 6px;
    color: var(--accent);
}

.help-section ul,
.help-section ol {
    padding-left: 22px;
}

.help-section li {
    margin: 4px 0;
}

.help-section dt {
    font-weight: 600;
    margin-top: 12px;
}

.help-section dd {
    margin: 2px 0 0 0;
    color: var(--ink);
}

.help-section table {
    border-collapse: collapse;
    margin: 10px 0 14px;
    font-size: 0.9rem;
    width: 100%;
}

.help-section th,
.help-section td {
    border-bottom: 1px solid var(--line);
    padding: 6px 10px;
    text-align: left;
    vertical-align: top;
}

.help-section th {
    background: var(--panel-2);
    font-weight: 600;
    color: var(--muted);
    font-size: 0.85rem;
}

.help-section pre {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px 14px;
    overflow: auto;
    font-size: 0.85rem;
    line-height: 1.5;
}

.help-section pre code {
    background: none;
    border: 0;
    padding: 0;
}

.help-section p.tip {
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    padding: 8px 12px;
}

.help-empty {
    margin-top: 30px;
    color: var(--muted);
}

kbd {
    font-family: var(--mono);
    font-size: 0.82em;
    background: var(--panel);
    border: 1px solid var(--line-strong);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 0 5px;
    white-space: nowrap;
}

#readme code,
.dialog code,
.errors code {
    font-family: var(--mono);
    font-size: 0.9em;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0 4px;
}

@media (max-width: 860px) {
    .help {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px;
    }

    .help-toc {
        position: static;
        max-height: none;
    }
}


/* Editor de código */


.code-box {
    display: flex;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    height: 340px;
    overflow: hidden;
}

.code-gutter {
    flex: 0 0 auto;
    margin: 0;
    padding: 8px 8px;
    min-width: 34px;
    font-family: var(--mono);
    font-size: 14px;
    line-height: 20px;
    text-align: right;
    color: var(--faint);
    background: var(--panel-2);
    border-right: 1px solid var(--line);
    overflow: hidden;
    user-select: none;
}

.code-gutter .err {
    color: #fff;
    background: var(--warn);
    border-radius: 3px;
    padding: 0 3px;
}

.code-area {
    position: relative;
    flex: 1;
    overflow: hidden;
}

.code-area pre,
.code-area textarea {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 8px 10px;
    border: 0;
    font-family: var(--mono);
    font-size: 14px;
    line-height: 20px;
    white-space: pre;
    tab-size: 4;
}

.code-area pre {
    overflow: hidden;
    color: var(--ink);
    pointer-events: none;
}

.code-area textarea {
    color: transparent;
    background: transparent;
    caret-color: var(--ink);
    outline: none;
    resize: none;
    overflow: auto;
}

.code-area textarea::selection {
    background: color-mix(in srgb, var(--accent) 30%, transparent);
    color: transparent;
}

.hl-com { color: var(--faint); font-style: italic; }
.hl-op { color: var(--accent); font-weight: 600; }
.hl-reg { color: #8a4bc2; }
.hl-num { color: #b4532a; }
.hl-label { color: #a8650a; font-weight: 600; }
.hl-dir { color: #1d7fa6; font-weight: 600; }
.hl-str { color: var(--ok); }
.hl-bad { color: var(--warn); text-decoration: underline wavy var(--warn); }
.hl-err { background: color-mix(in srgb, var(--warn) 14%, transparent); text-decoration: underline wavy var(--warn); }

[data-theme='dark'] .hl-reg { color: #dcb6ff; }
[data-theme='dark'] .hl-num { color: #ffb68a; }
[data-theme='dark'] .hl-label { color: #ffd479; }
[data-theme='dark'] .hl-dir { color: #8fdcff; }

ul.errors {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    max-height: 120px;
    overflow: auto;
    color: var(--warn);
    font-size: 0.85rem;
}

ul.errors li {
    padding: 2px 0;
    cursor: pointer;
}

/* Simulador de compilador ------------------------------------------------------------------------------- */

#header .tools { margin-left: auto; }
main { display: grid; grid-template-columns: minmax(360px, 440px) minmax(0, 1fr); gap: 16px; padding: 16px; }
main section, main > div > section { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
main h2 { font-size: 15px; margin: 0 0 8px; font-weight: 600; }
main h3 { font-size: 13px; margin: 0 0 6px; font-weight: 600; color: var(--muted); }
main label { display: block; font-size: 13px; margin: 6px 0; color: var(--muted); }
main select, main input { font: inherit; font-size: 0.85rem; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 3px 6px; }
.btn.outline { border-color: var(--line); }
.ctl .icon-btn { border-color: var(--line); }
.tabs { display: flex; margin: 8px 0 10px; flex-wrap: wrap; }
.tabs .btn { flex: 1; justify-content: center; border-color: var(--line); border-radius: 0; }
.tabs .btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.tabs .btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.tabs .btn.sel { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.code-box { margin-top: 2px; height: 420px; }
.opts label { display: inline-flex; align-items: center; gap: 4px; margin: 6px 12px 0 0; }
.opts input { padding: 0; }
.src-pick label { margin: 0; }
.phases .ph.skip { opacity: .45; text-decoration: line-through; }

table { border-collapse: collapse; font-size: 13px; width: 100%; }
th, td { border-bottom: 1px solid var(--line); padding: 4px 6px; text-align: center; }
th { color: var(--muted); font-weight: 600; }
td.mono, .mono { font-family: var(--mono); }
td.left { text-align: left; }
table.kv th { text-align: left; font-weight: 500; }
table.kv td { text-align: right; }
td.big { font-size: 16px; font-weight: 600; color: var(--ink); }
.note { color: var(--muted); font-size: 13px; }
.note.warn, ul.errors li { color: var(--warn); }
ul.errors li.warn { color: var(--focus); }
[data-theme='light'] ul.errors li.warn { color: #8a5a00; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
@media (max-width: 1000px) { main { grid-template-columns: 1fr; } }

/* Fases */
.phases { display: flex; gap: 0; list-style: none; margin: 0 0 4px; padding: 0; flex-wrap: wrap; counter-reset: ph; }
.phases .ph { flex: 1; min-width: 80px; position: relative; text-align: center; font-size: 12px; font-weight: 600; padding: 5px 10px 5px 14px;
    background: var(--panel-2); color: var(--muted); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%); margin-right: -4px; }
.phases .ph:first-child { clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); }
.phases .ph[data-tab] { cursor: pointer; }
.phases .ph.ok { background: var(--ok-soft); color: var(--ok); }
.phases .ph.ok::before { content: '✓ '; }
.phases .ph.err { background: var(--bad-soft); color: var(--warn); }
.phases .ph.err::before { content: '✗ '; }
.phases .ph.warn { background: var(--focus-soft); color: var(--ink); }

/* Camada de marcas do editor (linha selecionada e trecho em destaque) */
.code-area pre.marks { color: transparent; }
.marks .ml { height: 20px; }
.marks .ml.sel { background: var(--focus-soft); }
.marks .mk { background: color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 3px; outline: 1.5px solid var(--accent); }
.hl-type { color: #0f7b6c; font-weight: 600; }
[data-theme='dark'] .hl-type { color: #6ff0d8; }

/* Tabelas com passo a passo */
.scroll-box { overflow: auto; max-height: 520px; margin-top: 8px; }
#tokTable tr[data-i], #symTable tr[data-line] { cursor: pointer; }
#tokTable tr.cur td, #symTable tr:hover td { background: color-mix(in srgb, var(--accent) 14%, var(--panel)); }
#tokTable tr.future td { color: var(--faint); opacity: 0.45; }
.tk-keyword { color: var(--accent); }
.tk-ident { color: var(--ink); }
.tk-int, .tk-float { color: #b4532a; }
[data-theme='dark'] .tk-int, [data-theme='dark'] .tk-float { color: #ffb68a; }

/* Figuras */
.fig-box { overflow: auto; max-height: 640px; margin-top: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.fig-svg { display: block; }
.fig-svg text { font-family: var(--sans); font-size: 12px; fill: var(--ink); }
.fig-svg .mono { font-family: var(--mono); }
.fig-svg .title { font-size: 13px; font-weight: 600; }
.fig-svg .small { font-size: 11px; }
.fig-svg .muted { fill: var(--muted); }
.fig-svg .bold { font-weight: 600; }
.fig-svg .edge { stroke: var(--wire); stroke-width: 1.3; }
.fig-svg .nd { stroke: var(--line-strong); stroke-width: 1.2; }
.fig-svg .node { cursor: pointer; }
.fig-svg .nd.k-decl, .lg.k-decl { fill: var(--c-commit); }
.fig-svg .nd.k-stmt, .lg.k-stmt { fill: var(--c-issue); }
.fig-svg .nd.k-expr, .lg.k-expr { fill: var(--c-exec); }
.fig-svg .nd.k-leaf, .lg.k-leaf { fill: var(--c-mem); }
.lg { display: inline-block; width: 12px; height: 12px; border: 1px solid var(--line-strong); border-radius: 3px; vertical-align: -2px; margin-left: 8px; }
.lg.k-decl { background: var(--c-commit); } .lg.k-stmt { background: var(--c-issue); } .lg.k-expr { background: var(--c-exec); } .lg.k-leaf { background: var(--c-mem); }
.fig-svg .nd.cur { stroke: var(--accent); stroke-width: 3; }
.fig-svg .nd.sel { stroke: var(--focus); stroke-width: 3; }
.fig-svg .slot { fill: var(--panel); stroke: var(--ink); stroke-width: 1.2; }
.fig-svg .slot.k-ra, .fig-svg .slot.k-fp { fill: var(--c-commit); }
.fig-svg .slot.k-param { fill: var(--c-issue); }
.fig-svg .slot.k-local { fill: var(--c-exec); }
.fig-svg .slot.k-array { fill: var(--c-mem); }
.fig-svg .slot.k-temp { fill: var(--c-write); }
.fig-svg .slot.k-saved { fill: var(--c-commit); fill-opacity: .55; }
.fig-svg .slot.k-spill { fill: var(--c-write); fill-opacity: .55; }
.fig-svg .slot.k-pad { fill: var(--panel-2); stroke-dasharray: 4 3; }
.fig-svg .slot.sel { stroke: var(--accent); stroke-width: 2.4; }
.fig-svg .caller { fill: var(--panel-2); stroke: var(--line-strong); stroke-dasharray: 5 3; }
.fig-svg .ptr { stroke: var(--accent); stroke-width: 2; }

/* IR e assembly lado a lado */
.code-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 1400px) { .code-pair { grid-template-columns: 1fr; } }
.code-view { font-family: var(--mono); font-size: 13px; line-height: 19px; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--panel); max-height: 620px; overflow: auto; padding: 4px 0; }
.code-view .cl { display: flex; white-space: pre; cursor: pointer; min-width: max-content; }
.code-view .ln { flex: 0 0 36px; text-align: right; padding-right: 8px; color: var(--faint); user-select: none; }
.code-view .tx { padding-right: 12px; }
.code-view .cl:hover { background: var(--panel-2); }
.code-view .cl.sel { background: var(--focus-soft); }
.code-view .cl.cur { box-shadow: inset 3px 0 0 var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--panel)); }
.legend { margin-left: 4px; }
.pending-msg { margin: 16px 0; }

/* Grafos de fluxo de controle e de dados */
.graph-pair { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; margin-top: 10px; }
#pane-dfg .graph-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1400px) { .graph-pair, #pane-dfg .graph-pair { grid-template-columns: 1fr; } }
.graph-pair .fig-box { margin-top: 0; }
label.check { display: inline-flex; align-items: center; gap: 4px; }
.fig-svg .wire { fill: none; stroke: var(--wire); stroke-width: 1.4; }
.fig-svg .wire.back { stroke-dasharray: 6 3; }
.fig-svg .wire.on { stroke: var(--accent); stroke-width: 2.4; }
.fig-svg .head { fill: var(--wire); }
.fig-svg .head.on { fill: var(--accent); }
.fig-svg .tlabel { fill: var(--ok); }
.fig-svg .flabel { fill: var(--warn); }
.fig-svg .blk { fill: var(--panel); stroke: var(--line-strong); stroke-width: 1.3; }
.fig-svg .blk.depth1, .lg.depth1 { fill: color-mix(in srgb, var(--accent) 9%, var(--panel)); background: color-mix(in srgb, var(--accent) 9%, var(--panel)); }
.fig-svg .blk.depth2 { fill: color-mix(in srgb, var(--accent) 18%, var(--panel)); }
.fig-svg .blk.depth3 { fill: color-mix(in srgb, var(--accent) 28%, var(--panel)); }
.fig-svg .blk.dom, .lg.dom { fill: var(--focus-soft); background: var(--focus-soft); }
.fig-svg .blk.df { stroke: var(--warn); stroke-width: 2.4; stroke-dasharray: 6 3; }
.lg.df { border: 2px dashed var(--warn); }
.fig-svg .blk.sel { stroke: var(--accent); stroke-width: 3; }
.lg.sel { border: 2px solid var(--accent); }
.fig-svg .grid { stroke: var(--line); stroke-width: 0.6; stroke-dasharray: 2 4; }
.fig-svg .inp { fill: var(--panel-2); stroke: var(--line-strong); stroke-width: 1; }
.fig-svg .wire.input { stroke-dasharray: 2 3; }
.fig-svg .wire.mem { stroke-dasharray: 6 4; }
.fig-svg .wire.crit { stroke: var(--warn); stroke-width: 2.6; }
.fig-svg .head.crit { fill: var(--warn); }
.fig-svg .op { stroke: var(--line-strong); stroke-width: 1.2; fill: var(--c-exec); }
.fig-svg .op.c-load, .fig-svg .op.c-store { fill: var(--c-mem); }
.fig-svg .op.c-mul, .fig-svg .op.c-div, .fig-svg .op.c-fmul, .fig-svg .op.c-fdiv { fill: var(--c-write); }
.fig-svg .op.c-fadd { fill: var(--c-commit); }
.fig-svg .op.c-branch, .fig-svg .op.c-call, .fig-svg .op.c-phi { fill: var(--c-issue); }
.fig-svg .op.crit { stroke: var(--warn); stroke-width: 2.6; }
.fig-svg .op.sel { stroke: var(--accent); stroke-width: 3; }
.fig-svg .node .dim, .fig-svg .op.dim { opacity: 0.35; }
#cfgTable tr[data-block], #dfgTable tr[data-id], #duTable tr[data-line] { cursor: pointer; }
#cfgTable tr.cur td, #dfgTable tr.cur td { background: color-mix(in srgb, var(--accent) 14%, var(--panel)); }
#dfgTable tr.crit td { font-weight: 600; color: var(--warn); }
#cfgTable td, #duTable td { vertical-align: top; }
#loopList ul { margin: 4px 0; padding-left: 20px; }
.legend-line { margin-top: 6px; }

/* Mapa de calor */
:root, [data-theme='light'] { --heat: #e8590c; }
[data-theme='dark'] { --heat: #ff7a2e; }
.code-view.heat .hv { flex: 0 0 64px; text-align: right; padding-right: 10px; color: var(--muted); font-size: 12px; }
.heat-scale { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; }
.heat-bar { display: inline-block; width: 160px; height: 10px; border-radius: 3px; border: 1px solid var(--line);
    background: linear-gradient(90deg, color-mix(in srgb, var(--heat) 4%, var(--panel)), color-mix(in srgb, var(--heat) 80%, var(--panel))); }
#heatTop tr[data-line] { cursor: pointer; }
#heatBlocks td, #heatTop td { white-space: nowrap; }
.fig-svg .blk.heat { stroke: var(--line-strong); }
#pane-heat .fig-box { margin-top: 12px; }

/* Otimizações */
.opt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 8px 0 12px; }
@media (max-width: 1200px) { .opt-grid { grid-template-columns: 1fr; } }
.opt-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; }
.opt-box label.check { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0; color: var(--ink); }
.opt-box label.check input { margin-top: 3px; }
#optTable th.left { text-align: left; color: var(--ink); }
.opt-log { max-height: 260px; overflow: auto; font-family: var(--mono); font-size: 12px; padding-left: 28px; margin: 4px 0 12px; }
.opt-log li { margin: 2px 0; }
.opt-log .tag { font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--accent); margin-right: 4px; }
.fig-svg .axis { stroke: var(--ink); stroke-width: 1.2; }
.fig-svg .series { fill: none; stroke: var(--accent); stroke-width: 2; }
.fig-svg .pt { fill: var(--accent); stroke: var(--panel); stroke-width: 1.5; }
#pane-opt .graph-pair { grid-template-columns: 1fr; }
#pane-opt .graph-pair .fig-box { margin-top: 0; }
.tabs [hidden] { display: none; }