body {
  margin: 0; font: 14px system-ui, sans-serif;
  height: 100vh; display: flex; flex-direction: column;
}
header {
  display: flex; gap: 12px; align-items: center; padding: 8px 12px;
  border-bottom: 1px solid #ccc; position: sticky; top: 0; background: #fff; z-index: 2;
}
header .spacer { flex: 1; }
header button.active { background: #ffd54f; }
#status { color: #666; }
main { display: flex; flex: 1; min-height: 0; }
/* The photo pane: a fixed window onto the photo, which zooms and pans inside it. */
#stage {
  position: relative; flex: 1 1 65%; margin: 12px; overflow: hidden;
  background: #eee; user-select: none; touch-action: none;
}
#stage.drawing { cursor: crosshair; }
#stage.space, #stage.space * { cursor: grab; }
#stage.panning, #stage.panning * { cursor: grabbing; }
#view { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
#photo { display: block; width: 100%; height: 100%; }
#overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.zoom { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; }
.zoom button { min-width: 32px; }
aside { flex: 0 0 34%; overflow-y: auto; padding: 0 12px; }
h2 { font-size: 15px; margin: 12px 0 4px; }
ol { padding-left: 24px; margin: 0; }
li { padding: 6px 4px; border-bottom: 1px solid #eee; }
li.selected { background: #fff8e1; }
li .row { display: flex; gap: 6px; align-items: center; margin: 2px 0; flex-wrap: wrap; }
li input[type=text] { flex: 1; min-width: 120px; }
li input[type=number] { width: 52px; }
li .work { color: #333; }
li .work.none { color: #b00; }
li .work.confirmed { color: #1b5e20; font-weight: 600; }
li.confirmed { border-left: 4px solid #43a047; }
.orphans {
  display: flex; gap: 8px; align-items: center; margin: 12px 0 0; padding: 6px 8px;
  background: #fff3e0; border: 1px solid #ff9100;
}
.orphans[hidden] { display: none; }
.matches { display: flex; gap: 12px; align-items: center; margin: 0 0 4px; }
li .hits { margin: 4px 0; padding: 0; list-style: none; }
li .hits li { cursor: pointer; padding: 3px 4px; border: 0; }
li .hits li:hover { background: #e3f2fd; }

.box { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; cursor: pointer; }
.box.spine { stroke: #00e5ff; }
.box.shelf { stroke: #76ff03; stroke-dasharray: 6 4; }
/* A shelf the photo cuts off: orange, in short dashes. */
.box.shelf.partial { stroke: #ff9100; stroke-dasharray: 2 4; }
.box.selected { stroke: #ff1744; stroke-width: 3; }
.handle { fill: #ff1744; stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; }
.handle { cursor: nwse-resize; }
.handle.rotate { fill: #fff; stroke: #ff1744; stroke-width: 2; cursor: grab; }
.rotator line { stroke: #ff1744; stroke-width: 1; vector-effect: non-scaling-stroke; }
.guide {
  stroke: #ffd54f; stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none;
}