/* floorplan-3d styling. Dark, because an occupied room is drawn LIGHT — the contrast
 * between a lit room and its surroundings is the entire signal, and it only works
 * against a dark stage. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #0a0510;
  color: #eadcff;
  font-family: system-ui, sans-serif;
  overflow: hidden;
}

#bar {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(200, 120, 255, 0.2);
}
#bar h1 { margin: 0; font-size: 18px; }
.muted { color: #a98fc4; font-size: 14px; margin-left: auto; }

#levels { display: flex; gap: 6px; }
#levels button {
  min-height: 32px;
  padding: 2px 12px;
  border-radius: 8px;
  border: 1px solid rgba(200, 120, 255, 0.24);
  background: transparent;
  color: #a98fc4;
  font-size: 13px;
  cursor: pointer;
}
#levels button.active { background: rgba(200, 120, 255, 0.18); color: #eadcff; }

#plan {
  display: block;
  width: 100%;
  height: calc(100% - 54px);
  touch-action: none;   /* the canvas owns drag-to-orbit */
  cursor: grab;
}
#plan:active { cursor: grabbing; }

.error {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
  color: #ff8080;
  font-size: 14px;
}