:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, sans-serif; font-size: 13px; }
header { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #ccc; }
header h1 { margin: 0; font-size: 17px; }
.badge { padding: 2px 8px; border-radius: 3px; font-size: 11px; font-weight: 600; }
.badge.sim { background: #fff2c0; color: #7a5a00; }
.badge.readonly { background: #d4d4ff; color: #22228a; }
.spacer { flex: 1; }
.chips { display: flex; gap: 6px; }
.chip { padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; border: 1px solid transparent; }
.chip.up   { background: #d4f4d4; color: #0f5c1e; border-color: #a0d0a0; }
.chip.down { background: #ffd6d6; color: #7a0000; border-color: #f0a0a0; }
.chip.warn { background: #fff2c0; color: #7a5a00; border-color: #d0b060; }
.autoref { font-size: 12px; opacity: 0.85; }

nav#tabs { display: flex; gap: 4px; padding: 6px 14px; border-bottom: 1px solid #ccc; background: rgba(0,0,0,0.02); }
.tab { padding: 4px 12px; cursor: pointer; background: transparent; border: 1px solid transparent; border-radius: 4px 4px 0 0; }
.tab.active { background: rgba(0,0,0,0.05); border-color: #ccc #ccc transparent; font-weight: 600; }

main#panels { padding: 12px 14px 16px; }
.panel { display: none; }
.panel.active { display: block; }

.filters { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; margin-bottom: 10px; }
.filters label { display: flex; flex-direction: column; font-size: 11px; opacity: 0.85; }
.filters input, .filters select { padding: 3px 6px; font-size: 12px; }
.filters button { padding: 4px 10px; cursor: pointer; }
.counter { margin-left: auto; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; opacity: 0.9; }

.tablewrap { max-height: calc(100vh - 260px); overflow: auto; border: 1px solid #ccc; border-radius: 4px; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
table th, table td { padding: 4px 6px; border-bottom: 1px solid rgba(0,0,0,0.06); text-align: left; vertical-align: top; }
table th { position: sticky; top: 0; background: rgba(255,255,255,0.95); }
table td.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
table td.detail { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; white-space: pre-wrap; word-break: break-all; max-width: 640px; }

.err { color: #7a0000; background: #ffe0e0; padding: 6px 8px; border-radius: 4px; white-space: pre-wrap; }

#traceGrid.tracegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tracecol { border: 1px solid #ccc; border-radius: 4px; padding: 8px; }
.tracecol h3 { margin: 0 0 6px 0; font-size: 12px; }
.tracecol pre { margin: 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; white-space: pre-wrap; word-break: break-all; max-height: calc(100vh - 260px); overflow: auto; }