* { box-sizing: border-box; } body { margin: 0; font: 13px system-ui, sans-serif; height: 100vh; display: flex; flex-direction: column; }
header { padding: 6px 10px; background: #222; color: #eee; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
main { flex: 1; display: flex; min-height: 0; }
#side { width: 520px; overflow: auto; border-right: 1px solid #ccc; }
#plan { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#pagebar { padding: 4px 8px; border-bottom: 1px solid #ccc; } #page { max-width: 420px; }
#scroller { flex: 1; overflow: auto; background: #888; }
#stage { position: relative; transform-origin: 0 0; margin: 0; }
#cv { display: block; background: #fff; } #ov { position: absolute; left: 0; top: 0; }
table { border-collapse: collapse; width: 100%; } th, td { padding: 3px 5px; border-bottom: 1px solid #eee; text-align: left; white-space: nowrap; }
th { position: sticky; top: 0; background: #f4f4f4; }
tr.row { cursor: pointer; } tr.row:hover { background: #eef; }
tr.nr td.st { color: #c25e00; font-weight: 600; } tr.nr { background: #fff6ec; }
tr.sel, tr.sel.nr { background: #cfe0ff; }
.sp { stroke: #333; stroke-width: .4; fill-opacity: .28; } .sp:hover { fill-opacity: .5; }
.it { cursor: pointer; stroke: #000; stroke-width: 1; } .it.ok { fill: #1a9e3a; } .it.nr { fill: #ff8c00; }
.it.sel { fill: #1565ff; stroke: #1565ff; } .ring { fill: none; stroke: #1565ff; stroke-width: 3; }
.lg { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 3px 0 10px; }