
.s3d-viewer {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  overflow: hidden;
  background: #f5f7f8;
  border-radius: 8px;
  user-select: none;
}

.s3d-viewer:fullscreen {
  border-radius: 0;
}

.s3d-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  outline: none;
  touch-action: none;
}

.s3d-dim-label {
  padding: 1px 6px;
  font: 600 12px/1.2 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #0071a3;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #a5d9f2;
  border-radius: 4px;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.s3d-dim-label--dia {
  color: #005e88;
  border-color: #8ccdec;
  background: rgba(255, 255, 255, 0.95);
}

.s3d-section-label {
  padding: 1px 6px;
  font: 600 12px/1.2 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #0071a3;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #8ccdec;
  border-radius: 4px;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.s3d-section-label.is-active {
  color: #fff;
  background: #00a0e3;
  border-color: #00a0e3;
}

.s3d-viewcube {
  position: absolute;
  top: 52px;
  right: 12px;
  z-index: 5;
}

.s3d-viewcube__hit {
  touch-action: none;
  cursor: grab;
}

.s3d-viewcube__hit.is-active {
  cursor: pointer;
}

.s3d-viewcube__hit.is-dragging {
  cursor: grabbing;
}

.s3d-hint {
  position: absolute;
  right: 12px;
  bottom: 10px;
  padding: 2px 8px;
  font: 500 12px/1.3 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #55606b;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #dfe4ea;
  border-radius: 4px;
  pointer-events: none;
}

.s3d-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #55606b;
  font: 500 14px/1.2 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: rgba(245, 247, 248, 0.6);
  backdrop-filter: blur(1px);
}

.s3d-spinner__ring {
  width: 34px;
  height: 34px;
  border: 3px solid #d3d8dd;
  border-top-color: #00a0e3;
  border-radius: 50%;
  animation: s3d-spin 0.8s linear infinite;
}

@keyframes s3d-spin {
  to { transform: rotate(360deg); }
}

.s3d-message {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  color: #55606b;
  font: 500 15px/1.4 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: repeating-linear-gradient(45deg, #f5f7f8, #f5f7f8 10px, #eef0f2 10px, #eef0f2 20px);
}

.s3d-message__icon { font-size: 34px; }
.s3d-message__title { font-weight: 600; color: #3a434d; }
.s3d-message__detail { font-size: 12px; color: #949caa; max-width: 320px; word-break: break-word; }
