/* 模拟回放（sim-core.js）：画布区、控制面板。模拟运行页面、排版页面都用 */
.sim-view-wrap { position: relative; min-width: 0; background: #d8d4cc; }
#sim-view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
#sim-view.dragging { cursor: grabbing; }
.sim-view-wrap .hover { position: absolute; left: 8px; bottom: 8px; background: rgba(255,255,255,.9); border: 1px solid var(--line);
         border-radius: 4px; padding: 2px 8px; font: 12px ui-monospace, Consolas, monospace; pointer-events: none; }
.sim-view-wrap .hover:empty { display: none; }
.sim-view-wrap .empty-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted);
             font-size: 15px; pointer-events: none; text-align: center; padding: 20px; white-space: pre-line; }
.sim-view-wrap .empty-msg:empty { display: none; }
.sim-view-wrap .busy { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid var(--line);
        border-radius: 4px; padding: 4px 12px; }
.sim-view-wrap .zoom { position: absolute; right: 12px; top: 12px; }
.sim-panel section { border-bottom: 1px solid var(--line); padding: 8px 0; }
.sim-panel .play { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 0; }
.sim-panel .play button { min-width: 34px; padding: 4px 6px; }
#sim-speed { margin-left: auto; }
#sim-scrub { width: 100%; margin: 8px 0 2px; }
.sim-panel .row { display: flex; justify-content: space-between; }
#sim-status table, #sim-summary table { width: 100%; border-collapse: collapse; font-size: 13px; }
#sim-status td, #sim-summary td { padding: 1px 4px; vertical-align: top; }
#sim-status td:first-child, #sim-summary td:first-child { color: var(--muted); white-space: nowrap; width: 80px; }
.sim-panel .mono { font-family: ui-monospace, Consolas, monospace; }
.sim-panel .swatch { display: inline-block; width: 10px; height: 10px; border: 1px solid #0003; margin-right: 4px; vertical-align: -1px; }
.sim-panel .toggles label { display: inline-flex; align-items: center; gap: 2px; margin-right: 10px; }
.sim-panel .legend { margin-top: 6px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sim-panel .legend .bar { width: 120px; height: 10px; border: 1px solid var(--line); }
.sim-panel .color-by { display: block; margin-top: 6px; }
.sim-panel .legend-items { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 12px; }
.sim-panel .legend-items span.item { display: inline-flex; align-items: center; gap: 4px; }
.sim-panel .legend-items .swatch { width: 14px; height: 10px; border-radius: 2px; display: inline-block; }
.sim-issues-sec:has(#sim-issues:empty) { display: none; }
.sim-issues-sec h3 { margin: 0 0 4px; font-size: 13px; }
.sim-panel .code-sec { padding: 8px 0; }
.sim-panel .code-sec summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--muted); }
#sim-code { overflow: auto; font: 12px/1.45 ui-monospace, Consolas, monospace; background: #fbfaf7; border: 1px solid var(--line);
        height: 40vh; margin-top: 6px; }
#sim-code div { white-space: pre; padding: 0 6px 0 0; cursor: pointer; }
#sim-code div:hover { background: #eef3fb; }
#sim-code div.cur { background: #ffe9a8; }
#sim-code div.issue { color: var(--danger); }
#sim-code .ln { display: inline-block; width: 46px; text-align: right; color: #aaa; margin-right: 8px; user-select: none; }