.mesh-overlay { position: fixed; inset: 0; z-index: 900; background: #e7e9e8; color: #283831; font: 13px/1.5 system-ui, sans-serif; }
.mesh-overlay > canvas { display: block; cursor: grab; touch-action: none; }
.mesh-hud { position: absolute; top: 20px; left: 20px; z-index: 5; max-width: min(500px, calc(100vw - 155px)); padding: 16px 18px; background: rgba(253,254,252,.94); border: 1px solid rgba(34,55,44,.1); border-radius: 16px; box-shadow: 0 4px 24px #26382c0c; }
.mesh-title { font-size: 16px; font-weight: 600; letter-spacing: -.025em; margin-bottom: 10px; }
.mesh-height-modes { display: flex; gap: 4px; margin-top: 8px; }
.mesh-overlay button:disabled { opacity: .45; cursor: default; }
.mesh-floors { display: flex; gap: 4px; flex-wrap: wrap; }
.mesh-overlay button { color: #3f5148; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 7px 11px; font: inherit; cursor: pointer; white-space: nowrap; }
.mesh-overlay button:hover { background: #e8eee9; }
.mesh-overlay button[aria-pressed="true"] { background: #314d40; color: white; }
.mesh-overlay button:focus-visible, .mesh-overlay summary:focus-visible { outline: 2px solid #42785c; outline-offset: 3px; }
.mesh-meta { margin-top: 10px; color: #78857c; font-size: 11px; }
.mesh-options { margin-top: 8px; }
.mesh-options summary { color: #617268; cursor: pointer; font-size: 12px; }
.mesh-options label { display: block; margin-top: 9px; cursor: pointer; }
.mesh-options input { accent-color: #42664f; }
.mesh-options input[type="checkbox"] { vertical-align: -2px; margin-right: 5px; }
.mesh-range { display: flex; gap: 10px; align-items: center; padding-left: 22px; }
.mesh-range input { width: 120px; }
.mesh-note { max-width: 290px; font-size: 11px; color: #77837c; margin: 8px 0 0; }
.mesh-overlay .mesh-close { position: absolute; top: 20px; right: 20px; z-index: 5; background: #fdfefcf0; border-color: #26382c19; padding: 10px 15px; }
.mesh-toolbar { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; padding: 6px; border: 1px solid #26382c19; border-radius: 12px; background: #fdfefcf0; box-shadow: 0 4px 24px #26382c0c; }
.mesh-tooltip { position: absolute; z-index: 6; pointer-events: none; border-radius: 6px; background: #283e33; color: white; padding: 6px 10px; font-size: 12px; }
@media (max-width: 600px) {
  .mesh-hud { top: 12px; left: 12px; padding: 12px; max-width: calc(100vw - 126px); }
  .mesh-overlay .mesh-close { top: 12px; right: 12px; padding: 8px; }
  .mesh-floors button { padding: 5px 7px; font-size: 11px; }
}

/* Primary navigation stays in the same place in the model and panorama. */
.mesh-hud { max-width: 264px; padding: 14px; }
.mesh-title { margin-bottom: 9px; }
.mesh-floors { gap: 2px; }
.mesh-floors button { padding: 6px 8px; font-size: 12px; }
.mesh-modes, .pano-view-modes { position: absolute; z-index: 6; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; padding: 6px; border-radius: 14px; background: #fdfefcf5; border: 1px solid #26382c19; box-shadow: 0 5px 24px #26382c15; }
.pano-view-modes button { color: #3f5148; background: transparent; border: 1px solid transparent; border-radius: 9px; padding: 9px 15px; font: 13px/1.5 system-ui,sans-serif; cursor: pointer; white-space: nowrap; }
.pano-view-modes button:hover { background: #e8eee9; }
.pano-view-modes button[aria-pressed="true"] { background: #314d40; color: white; }
.pano-view-modes button:focus-visible { outline: 2px solid #42785c; outline-offset: 3px; }
.mesh-modes button { padding: 9px 15px; }
.mesh-toolbar { left: auto; right: 20px; bottom: 24px; transform: none; }
.mesh-scan-label { display: block; margin-top: 12px; font-size: 11px; color: #617268; }
.mesh-scan-label select { display: block; width: 100%; margin-top: 4px; padding: 8px; border: 1px solid #ccd5ce; border-radius: 8px; background: #fff; color: #283831; font: 12px system-ui,sans-serif; }
.mesh-options[open] { max-height: min(45vh, 340px); overflow-y: auto; }
@media (max-width: 800px) {
  .mesh-toolbar { bottom: 86px; right: 12px; padding: 3px; }
  .mesh-toolbar button { padding: 5px 7px; font-size: 12px; }
  .mesh-hud { max-width: min(264px, calc(100vw - 130px)); }
  .mesh-modes, .pano-view-modes { bottom: max(16px, env(safe-area-inset-bottom)); }
}

.pano-has-model .mm-panel { bottom: 88px; }
@media (max-width: 800px) {
  .pano-has-model .pano-bar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .pano-has-model .pano-title { flex: 1; }
  .pano-has-model .pano-legend { order: 2; flex-basis: 100%; font-size: 11px; gap: 12px; }
  .pano-has-model .pano-close { margin-left: 0; }
}

.mesh-height-modes { flex-wrap: wrap; }
.mesh-height-modes button { font-size: 11px; padding: 6px 8px; }
.mesh-overlay [hidden] { display: none !important; }