:root { color-scheme: dark; --bg:#1e1f22; --panel:#26282c; --line:#3a3d43; --fg:#d4d4d4; --dim:#8b9099; --accent:#4ea1ff; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; }
body { display: flex; flex-direction: column; }
header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 6px 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
header .opts { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-left: 8px; }
.dim { color: var(--dim); }
.status { margin-left: auto; color: var(--dim); font-size: 12px; }
select, button, input[type=text] { background: #33363c; color: var(--fg); border: 1px solid var(--line); border-radius: 4px; padding: 3px 8px; font: inherit; }
button { cursor: pointer; } button:hover:not(:disabled) { border-color: var(--accent); } button:disabled { opacity: .5; cursor: default; }
main { flex: 1; min-height: 0; display: flex; }
#left { flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
#editor { flex: 1; min-height: 0; }
#editor textarea.fallback { width: 100%; height: 100%; background: var(--bg); color: var(--fg); border: 0; padding: 8px; font: 13px ui-monospace, Menlo, Consolas, monospace; resize: none; }
.problems { max-height: 22%; overflow: auto; border-top: 1px solid var(--line); background: var(--panel); font: 12px ui-monospace, Menlo, Consolas, monospace; }
.problems div { padding: 2px 10px; cursor: pointer; white-space: pre-wrap; } .problems div:hover { background: #30333a; }
.problems .error::before { content: "● "; color: #f14c4c; } .problems .warning::before { content: "▲ "; color: #cca700; } .problems .info::before { content: "ℹ "; color: #3794ff; }
.problems .ok { color: var(--dim); cursor: default; }
#right { flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; }
#tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px 6px 0; background: var(--panel); border-bottom: 1px solid var(--line); }
#tabs button { border-radius: 4px 4px 0 0; border-bottom: 0; background: transparent; }
#tabs button.on { background: var(--bg); border-color: var(--line); color: #fff; }
.level { margin-left: auto; font-size: 12px; color: var(--dim); padding-bottom: 3px; } .level[hidden] { display: none; }
#panes { flex: 1; min-height: 0; position: relative; }
.pane { position: absolute; inset: 0; display: none; overflow: auto; } .pane.on { display: block; }
.outhost { position: absolute; inset: 0; } .outhost pre { margin: 0; padding: 8px; font: 12.5px/1.45 ui-monospace, Menlo, Consolas, monospace; white-space: pre; }
.tree { padding: 6px 4px; font: 12.5px/1.5 ui-monospace, Menlo, Consolas, monospace; }
.tree ul { list-style: none; margin: 0; padding-left: 16px; } .tree > ul { padding-left: 4px; }
.tree .row { display: flex; gap: 4px; align-items: baseline; cursor: pointer; border-radius: 3px; padding: 0 3px; white-space: pre; }
.tree .row:hover { background: #30333a; } .tree .row.sel { background: #094771; }
.tree .tg { width: 12px; color: var(--dim); flex: none; text-align: center; }
.tree .node .k { color: #4ec9b0; } .tree .token .k { color: #9cdcfe; } .tree .trivia .k { color: #6a9955; } .tree .v { color: #ce9178; } .tree .rg { color: var(--dim); margin-left: 6px; font-size: 11px; }
.tree .err .k { color: #f14c4c; }
.bar { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--line); background: var(--panel); }
.runout { margin: 0; padding: 8px; font: 12.5px/1.45 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; }
.runout .err { color: #f48771; } .runout .meta { color: var(--dim); }
.verify { padding: 10px 12px; font: 12.5px/1.5 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; } .verify .ok { color: #89d185; } .verify .bad { color: #f48771; }
.jit { padding: 10px 16px 24px; max-width: 900px; } .jit h3 { margin: 14px 0 4px; } .jit table { border-collapse: collapse; margin: 6px 0; font-size: 13px; } .jit td, .jit th { border: 1px solid var(--line); padding: 3px 8px; text-align: left; vertical-align: top; }
.jit pre { background: var(--panel); padding: 8px; overflow: auto; font: 12px ui-monospace, Menlo, Consolas, monospace; } .jit input[type=text] { width: min(520px, 90%); }
.toast { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); background: #094771; padding: 6px 14px; border-radius: 6px; z-index: 10; }
@media (max-width: 820px) { main { flex-direction: column; } #left { border-right: 0; border-bottom: 1px solid var(--line); flex-basis: 45%; } }
.badge { font-size: 11px; padding: 1px 8px; border-radius: 9px; background: #3a3d43; color: #bbb; white-space: nowrap; margin-left: auto; }
.badge + .status { margin-left: 0; }
.badge.ready { color: #8bd48b; } .badge.loading { color: #9cdcfe; }

/* Layout view */
.layout { padding: 10px 12px; overflow: auto; height: 100%; box-sizing: border-box; font: 12.5px/1.5 ui-monospace, Menlo, Consolas, monospace; }
.layout .lintro { font-family: system-ui, sans-serif; color: #b5b8bd; margin-bottom: 8px; } .layout a { color: #6cb6ff; }
.layout .lmode { display: flex; gap: 6px; margin-bottom: 10px; }
.layout .lmode button { background: #2b2d31; color: #ccc; border: 1px solid #3c3f44; border-radius: 4px; padding: 3px 10px; cursor: pointer; } .layout .lmode button.on { background: #3a5f8f; color: #fff; border-color: #5a8fd0; }
.layout .lcard { border: 1px solid #34373c; border-radius: 6px; padding: 8px 10px; margin-bottom: 12px; background: #1b1c1f; }
.layout h3 { margin: 0 0 6px; font-size: 14px; } .layout .tn { color: #e8e8e8; } .layout .dim { color: #8b9097; font-weight: normal; } .layout .bad { color: #f48771; } .layout .click { cursor: pointer; } .layout .click:hover { background: #2a3140; }
.layout .lnote { margin-top: 4px; font-family: system-ui, sans-serif; font-size: 12px; }
.lbar { display: flex; height: 26px; border: 1px solid #3c3f44; border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.lbar .lseg { overflow: hidden; white-space: nowrap; font-size: 11px; line-height: 26px; text-align: center; color: #101114; border-right: 1px solid #1b1c1f; min-width: 2px; }
.lbar .hdr { background: #6b6f76; color: #fff; } .lbar .pad { background: repeating-linear-gradient(45deg, #5a2a2a, #5a2a2a 4px, #3a1c1c 4px, #3a1c1c 8px); } .lbar .ref { box-shadow: inset 0 -3px 0 #fff8; }
.ltab { border-collapse: collapse; width: 100%; } .ltab th { text-align: left; color: #8b9097; font-weight: normal; border-bottom: 1px solid #34373c; padding: 2px 8px; }
.ltab td { padding: 1px 8px; white-space: nowrap; } .ltab td.num { text-align: right; color: #9cdcfe; } .ltab td.type { color: #4ec9b0; } .ltab tr.padding td { color: #f2a2a2; background: #2a1d1d; } .ltab tr.hdr td { color: #8b9097; }
.ltab td.dim { white-space: normal; font-family: system-ui, sans-serif; font-size: 12px; }
.layout details { margin-top: 6px; } .layout summary { cursor: pointer; color: #8b9097; } .layout .ltext { margin: 6px 0 0; overflow: auto; }