.training-main {
  display: grid;
  grid-template-columns: 320px 1fr 320px;
  gap: 16px;
  padding: 16px;
  align-items: start;
}

.side-panel { max-height: calc(100vh - 80px); overflow-y: auto; }
.rooms-panel { max-height: calc(100vh - 80px); overflow-y: auto; }

.side-panel h3 { margin: 14px 0 4px 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #6a6660; }
.side-panel label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: #444; margin-bottom: 6px; }
.side-panel input[type=text], .side-panel input[type=number] { padding: 4px 6px; border: 1px solid #c7c2b8; border-radius: 3px; }

.page-list { list-style: none; padding: 0; margin: 0; }
.page-list li {
  padding: 4px 8px; cursor: pointer; border-radius: 3px;
  font-size: 12px; color: #444;
}
.page-list li:hover { background: #ece8de; }
.page-list li.active { background: #2b3a4a; color: #fff; }

.scale-row { display: flex; flex-direction: column; gap: 4px; }
.scale-row .hint { font-size: 11px; color: #6a6660; }

.actions-row { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.actions-row button { padding: 4px 10px; font-size: 12px; border: 1px solid #c7c2b8; background: #fff; border-radius: 3px; cursor: pointer; }
.actions-row button.primary { background: #2b3a4a; color: #fff; border: none; }

.library { list-style: none; padding: 0; margin: 0; max-height: 140px; overflow-y: auto; }
.library li { font-size: 11px; padding: 2px 4px; color: #6a6660; }

.priors-pre {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 10px;
  background: #fbfaf6;
  border: 1px solid #e6e2d8;
  border-radius: 3px;
  padding: 4px 6px;
  max-height: 160px; overflow-y: auto;
  white-space: pre;
}

.canvas-area { display: flex; flex-direction: column; gap: 8px; }
.canvas-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 8px; background: #fbfaf6; border: 1px solid #e6e2d8; border-radius: 3px; font-size: 12px; color: #6a6660; }
.zoom-controls { display: flex; align-items: center; gap: 4px; }
.zoom-controls button { width: 26px; height: 22px; padding: 0; font-size: 13px; border: 1px solid #c7c2b8; background: #fff; border-radius: 3px; cursor: pointer; }
.zoom-controls button:hover { background: #ece8de; }
.zoom-controls button#btn-zoom-fit, .zoom-controls button#btn-zoom-100 { width: auto; padding: 0 6px; font-size: 11px; }
#zoom-readout { font-variant-numeric: tabular-nums; font-size: 11px; color: #6a6660; min-width: 38px; text-align: center; }
.canvas-toolbar em { color: #2b3a4a; font-style: normal; font-weight: 500; }
.canvas-wrap {
  position: relative;
  background: #fff;
  border: 1px solid #d8d4ca;
  border-radius: 3px;
  overflow: auto;
  max-height: calc(100vh - 140px);
}
.canvas-wrap img { display: block; max-width: none; }
.canvas-wrap .overlay {
  position: absolute; top: 0; left: 0;
  pointer-events: none;
}
/* Marker / text / handle visual sizes are set via SVG attributes from JS so
   they scale with 1/zoom and read as a constant size on screen. Don't set
   font-size or stroke-width here — that would override the JS attributes. */
.canvas-wrap .overlay .label-marker {
  fill: #d4845a; stroke: #fff; cursor: pointer;
  pointer-events: auto;
}
.canvas-wrap .overlay .label-marker.faint {
  fill: #aaa; opacity: 0.5;
}
.canvas-wrap .overlay .label-marker:hover { opacity: 1; fill: #d4845a; }
.canvas-wrap .overlay .label-text {
  font-family: -apple-system, sans-serif;
  font-weight: 600;
  fill: #2b3a4a;
  pointer-events: none;
  paint-order: stroke;
  stroke: #fff;
  stroke-linejoin: round;
}
.canvas-wrap .overlay .label-text.faint { fill: #888; opacity: 0.7; }
.canvas-wrap .overlay .label-text.text-fg { stroke: none; }
.canvas-wrap .overlay polygon.room {
  fill: rgba(212,132,90,0.18);
  stroke: #d4845a;
  pointer-events: auto;
}
.canvas-wrap .overlay polygon.room.active {
  fill: rgba(43,58,74,0.18);
  stroke: #2b3a4a;
}
.canvas-wrap .overlay circle.handle {
  fill: #fff; stroke: #2b3a4a; cursor: grab;
  pointer-events: auto;
}
.canvas-wrap .overlay circle.midpoint {
  fill: #fbfaf6; stroke: #5a87b8; cursor: copy;
  opacity: 0.55;
  pointer-events: auto;
}
.canvas-wrap .overlay circle.midpoint:hover { opacity: 1; }

#rooms-tbl { width: 100%; border-collapse: collapse; font-size: 11px; }
#rooms-tbl th, #rooms-tbl td { padding: 3px 4px; border-bottom: 1px solid #f0ede6; text-align: left; }
#rooms-tbl select, #rooms-tbl input { width: 100%; font-size: 11px; padding: 2px; border: 1px solid #d8d4ca; border-radius: 2px; }
#rooms-tbl button { background: none; border: none; color: #b34b4b; cursor: pointer; }