/* Model Lab — realtime 3D stage */
.mv-host {
  position: relative;
  width: 100%;
  min-height: 460px;
  overflow: hidden;
  background:
    radial-gradient(60% 60% at 50% 45%, rgba(27, 71, 61, .18), transparent 72%),
    #030506;
  border: 1px solid rgba(255,255,255,.1);
  isolation: isolate;
}
.mv-host::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3,5,6,.55), transparent 22%, transparent 74%, rgba(3,5,6,.7)),
    radial-gradient(80% 80% at 50% 50%, transparent 46%, rgba(3,5,6,.62));
}
.mv-host::after {
  content: '';
  position: absolute; inset: 12px;
  z-index: 2; pointer-events: none;
  border: 1px solid rgba(185,255,207,.08);
  clip-path: polygon(0 0, 38px 0, 38px 1px, 1px 1px, 1px 38px, 0 38px, 0 0, 100% 0, 100% 38px, calc(100% - 1px) 38px, calc(100% - 1px) 1px, calc(100% - 38px) 1px, calc(100% - 38px) 0);
}
.mv-canvas {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  cursor: grab;
  touch-action: pan-y;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.mv-host.is-loaded .mv-canvas { opacity: 1; }
.mv-host.is-dragging .mv-canvas { cursor: grabbing; }
.mv-hotspots {
  position: absolute; inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
.mv-hotspot {
  position: absolute;
  left: 0; top: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px 5px 6px;
  background: rgba(3, 7, 6, .72);
  border: 1px solid rgba(255,255,255,.13);
  color: rgba(255,255,255,.78);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  transform-origin: 0 0;
  transition: opacity .3s ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.mv-hotspot i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c, #b9ffcf);
  box-shadow: 0 0 9px var(--c, #b9ffcf);
  flex: none;
}
.mv-caption {
  position: absolute;
  left: 16px; bottom: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.35);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .12em;
  pointer-events: none;
}
.mv-caption::before { content: ''; width: 14px; height: 1px; background: rgba(185,255,207,.5); }
.mv-live {
  position: absolute;
  right: 16px; top: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(185,255,207,.6);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .12em;
  pointer-events: none;
}
.mv-live i {
  width: 5px; height: 5px; border-radius: 50%;
  background: #b9ffcf; box-shadow: 0 0 8px #b9ffcf;
  animation: mvPulse 2s infinite;
}
@keyframes mvPulse { 50% { opacity: .25; } }
.mv-controls {
  position: absolute;
  left: 16px; top: 14px;
  z-index: 4;
  display: flex;
  gap: 6px;
}
.mv-controls button {
  width: 28px; height: 28px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(3,7,6,.55);
  color: rgba(255,255,255,.55);
  font-family: var(--mono);
  font-size: 8px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: color .25s, border-color .25s, background .25s;
}
.mv-controls button:hover { color: #fff; border-color: rgba(185,255,207,.4); background: rgba(185,255,207,.07); }
@media (max-width: 720px) {
  .mv-host { min-height: 330px; }
  .mv-hotspot { font-size: 6px; padding: 4px 6px; }
  .mv-hotspot span { display: none; }
  .mv-hotspot span:first-of-type { display: block; }
  .mv-hotspot { max-width: 100px; }
}