/**
 * vertcie-components.css
 * Single stylesheet for all Vertcie vanilla JS components.
 *
 * Naming convention:  vtx-{component}-{element}
 *   e.g. .vtx-viewport3-toolbar, .vtx-expanders-chip
 *
 * State modifiers also follow the convention:
 *   .vtx-viewport3-hidden, .vtx-expanders-selected, etc.
 *
 * Theme via CSS custom properties — override on :root or any ancestor element.
 *
 * Usage:
 *   <link rel="stylesheet" href="vertcie-components.css">
 *
 *   Pass { injectStyles: false } to each constructor so the built-in
 *   minified copy is not also injected:
 *
 *   new VertcieViewport3({ container, injectStyles: false, ... });
 *   new VertcieViewport2({ container, injectStyles: false, ... });
 *   new VertcieExpanders({ container, injectStyles: false, ... });
 */

/* ═══════════════════════════════════════════════════════════════════════════
   VertcieViewport3  —  3D model viewer with Three.js
   Classes: .vtx-viewport3-*
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Theme tokens ── */
:root {
  --vtx-viewport3-accent: #ff00aa;   /* toolbar active-tool colour */
  /* --vtx-viewport3-bg: #1a1a2e; */ /* uncomment to override scene background */
}

/* ── Root wrapper ── */
.vtx-viewport3 {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.vtx-viewport3-viewport {
  position: relative;
  width: 100%;
  height: 100%;
}

.vtx-viewport3-canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  background: transparent;
}

/* ── Loading overlay ── */
.vtx-viewport3-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(17, 17, 17, 0.85);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  gap: 12px;
  z-index: 10;
  transition: opacity 0.35s ease;
}

.vtx-viewport3-overlay.vtx-viewport3-hidden {
  opacity: 0;
  pointer-events: none;
}

.vtx-viewport3-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: vtx-viewport3-spin 0.7s linear infinite;
}

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

/* ── Error banner ── */
.vtx-viewport3-error {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--vtx-viewport3-error-bg, #c62828);
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  z-index: 20;
  max-width: 80%;
  text-align: center;
}

/* ── Toolbar ── */
.vtx-viewport3-toolbar {
  position: absolute;
  z-index: 15;
  display: flex;
  gap: 2px;
  padding: 5px;
  border-radius: 10px;
  background: var(--vtx-viewport3-toolbar-bg, rgba(20, 20, 20, 0.72));
  backdrop-filter: blur(8px);
  box-shadow: var(--vtx-viewport3-toolbar-shadow, 0 2px 12px rgba(0, 0, 0, 0.5));
  transition: left 0.2s, right 0.2s, top 0.2s, bottom 0.2s, transform 0.2s;
}

.vtx-viewport3-toolbar[data-dock="top"],
.vtx-viewport3-toolbar[data-dock="bottom"] { flex-direction: row; align-items: center; }

.vtx-viewport3-toolbar[data-dock="left"],
.vtx-viewport3-toolbar[data-dock="right"]  { flex-direction: column; align-items: center; }

.vtx-viewport3-toolbar[data-dock="left"]   { left: 12px; top: 50%; transform: translateY(-50%); }
.vtx-viewport3-toolbar[data-dock="right"]  { right: 12px; top: 50%; transform: translateY(-50%); }
.vtx-viewport3-toolbar[data-dock="top"]    { top: 12px; left: 50%; transform: translateX(-50%); }
.vtx-viewport3-toolbar[data-dock="bottom"] { bottom: 12px; left: 50%; transform: translateX(-50%); }

/* ── Drag handle ── */
.vtx-viewport3-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  cursor: grab;
  opacity: 0.45;
  flex-shrink: 0;
  border-radius: 4px;
  transition: opacity 0.2s;
}

.vtx-viewport3-drag-handle:hover  { opacity: 0.85; }
.vtx-viewport3-drag-handle:active { cursor: grabbing; opacity: 1; }

.vtx-viewport3-drag-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5px;
  width: 10px;
}

.vtx-viewport3-toolbar[data-dock="top"]    .vtx-viewport3-drag-dots,
.vtx-viewport3-toolbar[data-dock="bottom"] .vtx-viewport3-drag-dots {
  flex-direction: column;
  width: auto;
  height: 10px;
}

.vtx-viewport3-drag-dot {
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  background: var(--vtx-viewport3-drag-dot, rgba(255, 255, 255, 0.8));
}

/* ── Tool buttons ── */
.vtx-viewport3-tool-btn {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--vtx-viewport3-btn-color, rgba(255, 255, 255, 0.6));
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.vtx-viewport3-tool-btn:hover { background: var(--vtx-viewport3-btn-hover-bg, rgba(255, 255, 255, 0.1)); color: var(--vtx-viewport3-btn-hover-color, #fff); }
.vtx-viewport3-tool-btn.vtx-viewport3-active { color: var(--vtx-viewport3-accent, #ff00aa); background: var(--vtx-viewport3-accent-bg, rgba(255, 0, 170, 0.18)); }
.vtx-viewport3-tool-btn svg { pointer-events: none; }

/* ── Separator ── */
.vtx-viewport3-tool-sep {
  background: var(--vtx-viewport3-sep, rgba(255, 255, 255, 0.18));
  flex-shrink: 0;
  border-radius: 1px;
}

.vtx-viewport3-toolbar[data-dock="top"]    .vtx-viewport3-tool-sep,
.vtx-viewport3-toolbar[data-dock="bottom"] .vtx-viewport3-tool-sep { width: 1px; height: 18px; margin: 0 3px; }
.vtx-viewport3-toolbar[data-dock="left"]   .vtx-viewport3-tool-sep,
.vtx-viewport3-toolbar[data-dock="right"]  .vtx-viewport3-tool-sep { height: 1px; width: 18px; margin: 3px 0; }

/* ── Drop zones ── */
.vtx-viewport3-drop-zone {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  background: transparent;
  transition: background 0.2s;
}

.vtx-viewport3-drop-zone.vtx-viewport3-drag-active { pointer-events: auto; }
.vtx-viewport3-drop-zone.vtx-viewport3-drag-over   { background: var(--vtx-viewport3-drop-bg, rgba(255, 0, 170, 0.22)); }

.vtx-viewport3-drop-zone-left   { left: 0;   top: 0; bottom: 0; width: 72px; }
.vtx-viewport3-drop-zone-right  { right: 0;  top: 0; bottom: 0; width: 72px; }
.vtx-viewport3-drop-zone-top    { top: 0;    left: 0; right: 0; height: 72px; }
.vtx-viewport3-drop-zone-bottom { bottom: 0; left: 0; right: 0; height: 72px; }


/* ═══════════════════════════════════════════════════════════════════════════
   VertcieViewport2  —  2D image viewer with pan/zoom
   Classes: .vtx-viewport2-*
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Theme tokens ── */
:root {
  --vtx-viewport2-bg:         #111;              /* container background      */
  --vtx-viewport2-overlay-bg: rgba(17,17,17,.85); /* loading overlay bg       */
}

/* ── Root wrapper ── */
.vtx-viewport2 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vtx-viewport2-bg, #111);
  user-select: none;
}

/* ── Image stage ── */
.vtx-viewport2-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  overflow: hidden;
}

.vtx-viewport2-stage.vtx-viewport2-dragging { cursor: grabbing; }

.vtx-viewport2-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  transform-origin: 0 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.vtx-viewport2-img.vtx-viewport2-hidden { opacity: 0; }

/* ── Loading / error overlays ── */
.vtx-viewport2-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--vtx-viewport2-overlay-bg, rgba(17,17,17,.85));
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  gap: 12px;
  z-index: 10;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.vtx-viewport2-overlay.vtx-viewport2-hidden { opacity: 0; }

.vtx-viewport2-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: vtx-viewport2-spin 0.7s linear infinite;
}

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

.vtx-viewport2-error-banner {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: #c62828;
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  z-index: 20;
  max-width: 80%;
  text-align: center;
}

/* ── Nav arrows (multi-image mode) ── */
.vtx-viewport2-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 15;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, opacity 0.15s;
  opacity: 0;
}

.vtx-viewport2:hover .vtx-viewport2-nav { opacity: 1; }
.vtx-viewport2-nav:hover { background: rgba(0, 0, 0, 0.7); }
.vtx-viewport2-nav.vtx-viewport2-hidden { display: none; }

.vtx-viewport2-prev { left: 10px; }
.vtx-viewport2-next { right: 10px; }

/* ── Index dots (multi-image mode) ── */
.vtx-viewport2-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 15;
  opacity: 0;
  transition: opacity 0.15s;
}

.vtx-viewport2:hover .vtx-viewport2-dots { opacity: 1; }

.vtx-viewport2-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}

.vtx-viewport2-dot.vtx-viewport2-active { background: #fff; transform: scale(1.25); }

/* ── Zoom controls ── */
.vtx-viewport2-zoom-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 15;
  opacity: 0;
  transition: opacity 0.15s;
}

.vtx-viewport2:hover .vtx-viewport2-zoom-controls { opacity: 1; }

.vtx-viewport2-zoom-btn {
  width: 28px;
  height: 28px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.vtx-viewport2-zoom-btn:hover { background: rgba(0, 0, 0, 0.7); }


/* ═══════════════════════════════════════════════════════════════════════════
   VertcieExpanders  —  accordion / filter / shader-card UI
   Classes: .vtx-expanders-*
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Theme tokens ── */
:root {
  --vtx-expanders-primary:         #1976d2;          /* brand / accent colour         */
  --vtx-expanders-paper:           #ffffff;           /* card / badge background       */
  --vtx-expanders-divider:         #e0e0e0;           /* borders and dividers          */
  --vtx-expanders-hover:           rgba(0,0,0,0.04);  /* row hover bg                  */
  --vtx-expanders-action-hover:    rgba(0,0,0,0.04);  /* filter header hover bg        */
  --vtx-expanders-action-selected: rgba(0,0,0,0.08);  /* filter header active bg       */
  --vtx-expanders-text-primary:    #212121;           /* primary text                  */
  --vtx-expanders-text-secondary:  #757575;           /* secondary / muted text        */
  --vtx-expanders-text-disabled:   #9e9e9e;           /* disabled / placeholder text   */
}

/* ── Root container ── */
.vtx-expanders {
  font-family: inherit;
  overflow-y: auto;
}

/* ── Loading & error states ── */
.vtx-expanders-loading {
  padding: 20px 16px;
  color: var(--vtx-expanders-text-secondary, #757575);
  font-size: 12px;
}

.vtx-expanders-error {
  padding: 16px;
  color: #c62828;
  font-size: 12px;
}

/* ── Accordion group ── */
.vtx-expanders-group {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.vtx-expanders-group.vtx-expanders-hidden { display: none; }

/* ── Group header ── */
.vtx-expanders-header {
  cursor: pointer;
  padding: 12px 16px;
  border-bottom: 1px solid var(--vtx-expanders-divider, #e0e0e0);
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}

.vtx-expanders-header:hover { background: var(--vtx-expanders-hover, rgba(0,0,0,0.04)); }

.vtx-expanders-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vtx-expanders-header-label {
  font-size: 13px;
  font-weight: 400;
  color: var(--vtx-expanders-text-primary, #212121);
}

.vtx-expanders-header-selected {
  font-size: 13px;
  font-weight: 600;
  font-style: italic;
  color: var(--vtx-expanders-text-primary, #212121);
}

/* ── Chevron icon ── */
.vtx-expanders-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.25s;
  color: var(--vtx-expanders-text-primary, #212121);
}

.vtx-expanders-chevron.vtx-expanders-open { transform: rotate(180deg); }

/* ── Content panel ── */
.vtx-expanders-content {
  display: none;
  flex-direction: column;
  padding: 12px 16px;
}

.vtx-expanders-content.vtx-expanders-open { display: flex; }

/* ── Filter sub-expander ── */
.vtx-expanders-filter-wrap  { margin-bottom: 4px; }

.vtx-expanders-filter-section {
  margin-bottom: 4px;
  border-radius: 4px;
  overflow: hidden;
}

.vtx-expanders-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  cursor: pointer;
  background: var(--vtx-expanders-action-hover, rgba(0,0,0,0.04));
  user-select: none;
}

.vtx-expanders-filter-header:hover { background: var(--vtx-expanders-action-selected, rgba(0,0,0,0.08)); }

.vtx-expanders-filter-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0.5px;
}

.vtx-expanders-filter-chevron {
  width: 14px;
  height: 14px;
  transition: transform 0.2s;
}

.vtx-expanders-filter-chevron.vtx-expanders-open { transform: rotate(180deg); }

.vtx-expanders-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
}

.vtx-expanders-filter-empty {
  font-size: 11px;
  color: var(--vtx-expanders-text-disabled, #9e9e9e);
  padding: 6px 12px;
}

/* ── Filter chips ── */
.vtx-expanders-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 16px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  user-select: none;
  transition: all 0.15s;
  border: 1px solid var(--vtx-expanders-divider, #e0e0e0);
  background: transparent;
  color: var(--vtx-expanders-text-secondary, #757575);
}

.vtx-expanders-chip:hover { border-color: var(--vtx-expanders-primary, #1976d2); opacity: 0.85; }

.vtx-expanders-chip.vtx-expanders-selected {
  border-color: var(--vtx-expanders-primary, #1976d2);
  background: var(--vtx-expanders-primary, #1976d2);
  color: #fff;
}

.vtx-expanders-chip-dismiss { font-weight: 700; line-height: 1; }

/* ── Option rows ── */
.vtx-expanders-option-wrap { margin: 4px 0 4px 16px; }

.vtx-expanders-option {
  display: flex;
  align-items: center;
  position: relative;
  padding: 4px 0;
  cursor: pointer;
  transition: color 0.15s;
}

.vtx-expanders-option-label {
  font-size: 13px;
  color: var(--vtx-expanders-text-secondary, #757575);
  transition: color 0.15s;
}

.vtx-expanders-option.vtx-expanders-selected .vtx-expanders-option-label,
.vtx-expanders-option:hover .vtx-expanders-option-label {
  color: var(--vtx-expanders-text-primary, #212121);
}

.vtx-expanders-option-check {
  position: absolute;
  left: -16px;
  display: none;
  align-items: center;
  line-height: 0;
  color: var(--vtx-expanders-primary, #1976d2);
}

.vtx-expanders-option.vtx-expanders-selected .vtx-expanders-option-check { display: flex; }

/* ── Shader group ── */
.vtx-expanders-shader-group-wrap {
  margin: 4px 0;
  margin-left: 16px;
  padding: 0 8px;
}

.vtx-expanders-shader-group-label {
  font-size: 13px;
  font-weight: 600;
  margin: 8px 0;
  color: var(--vtx-expanders-text-primary, #212121);
}

.vtx-expanders-shader-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

.vtx-expanders-shader-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  padding: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: box-shadow 0.15s;
  max-width: 120px;
}

.vtx-expanders-shader-card:hover { box-shadow: 0 3px 8px rgba(0,0,0,0.25); }
.vtx-expanders-shader-card.vtx-expanders-selected { box-shadow: 0 3px 10px rgba(0,0,0,0.35); }

.vtx-expanders-shader-card img,
.vtx-expanders-shader-card .vtx-expanders-swatch {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.vtx-expanders-shader-img-wrap { display: inline-block; }

.vtx-expanders-swatch {
  display: flex;
  width: 100px;
  height: 100px;
}

.vtx-expanders-shader-check {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  width: 24px;
  height: 24px;
  background: var(--vtx-expanders-paper, #fff);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  pointer-events: none;
  color: var(--vtx-expanders-primary, #1976d2);
}

.vtx-expanders-shader-check.vtx-expanders-hidden { display: none; }

.vtx-expanders-shader-no-match {
  font-size: 13px;
  color: var(--vtx-expanders-text-secondary, #757575);
  padding: 4px 0;
}

/* ── Search bar ── */
.vtx-expanders-search-wrap { margin: 4px 0 4px 16px; }

.vtx-expanders-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid var(--vtx-expanders-divider, #e0e0e0);
  border-radius: 4px;
  outline: none;
}

.vtx-expanders-search-input:focus { border-color: var(--vtx-expanders-primary, #1976d2); }

/* ── Pattern slider ── */
.vtx-expanders-slider-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 4px 16px;
}

.vtx-expanders-slider-label {
  font-size: 11px;
  color: var(--vtx-expanders-text-secondary, #757575);
}

.vtx-expanders-slider { width: 100%; }

/* ── Skeleton loader ── */
.vtx-expanders-skeleton {
  width: 100px;
  height: 100px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: vtx-expanders-shimmer 1.5s infinite;
}

@keyframes vtx-expanders-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   New CSS custom-property tokens — added to support full overridability.
   All injected-style defaults are listed here; override any on :root or
   a scoped ancestor element.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Viewport3 toolbar ── */
  --vtx-viewport3-toolbar-bg:            rgba(20, 20, 20, 0.72);
  --vtx-viewport3-toolbar-shadow:        0 2px 12px rgba(0, 0, 0, 0.5);
  --vtx-viewport3-toolbar-bg-lt:         rgba(248, 248, 252, 0.92);
  --vtx-viewport3-toolbar-shadow-lt:     0 2px 12px rgba(0, 0, 0, 0.15);

  /* ── Viewport3 toolbar buttons ── */
  --vtx-viewport3-btn-color:             rgba(255, 255, 255, 0.6);
  --vtx-viewport3-btn-hover-bg:          rgba(255, 255, 255, 0.1);
  --vtx-viewport3-btn-hover-color:       #fff;
  --vtx-viewport3-accent-bg:            rgba(255, 0, 170, 0.18);
  --vtx-viewport3-btn-color-lt:          rgba(0, 0, 0, 0.52);
  --vtx-viewport3-btn-hover-bg-lt:       rgba(0, 0, 0, 0.07);
  --vtx-viewport3-btn-hover-color-lt:    #000;
  --vtx-viewport3-accent-bg-lt:         rgba(255, 0, 170, 0.12);

  /* ── Viewport3 toolbar separator / drag dot ── */
  --vtx-viewport3-sep:                   rgba(255, 255, 255, 0.18);
  --vtx-viewport3-sep-lt:                rgba(0, 0, 0, 0.16);
  --vtx-viewport3-drag-dot:              rgba(255, 255, 255, 0.8);
  --vtx-viewport3-drag-dot-lt:           rgba(0, 0, 0, 0.55);

  /* ── Free-mode dimming (opacity applied to rotate/pan/zoom when free-mode is on) ── */
  --vtx-viewport3-free-mode-dim:         0.3;

  /* ── Viewport3 loading overlay ── */
  --vtx-viewport3-overlay-bg:            #fff;
  --vtx-viewport3-overlay-color:         #aaa;
  --vtx-viewport3-bar-track:             rgba(255, 0, 170, 0.1);
  --vtx-viewport3-bar-from:              #FF00AA;
  --vtx-viewport3-bar-to:                #00FFFF;
  --vtx-viewport3-error-bg:              #c62828;

  /* ── Viewport3 drop zones ── */
  --vtx-viewport3-drop-bg:               rgba(255, 0, 170, 0.22);

  /* ── Viewport3 AR modal ── */
  --vtx-viewport3-modal-scrim:           rgba(0, 0, 0, 0.55);
  --vtx-viewport3-card-bg:               #fff;
  --vtx-viewport3-card-bg2:              #f5f5f5;
  --vtx-viewport3-card-shadow:           0 8px 32px rgba(0, 0, 0, 0.35);
  --vtx-viewport3-card-text:             #1a1a1a;
  --vtx-viewport3-card-muted:            #888;
  --vtx-viewport3-card-hint:             #bbb;
  --vtx-viewport3-card-hover:            #f0f0f0;

  /* ── Context hotspot pins ── */
  --vtx-ctx-hotspot-bg:                  rgba(255, 255, 255, 0.92);
  --vtx-ctx-hotspot-shadow:              0 2px 10px rgba(0, 0, 0, 0.35);
  --vtx-ctx-hotspot-bg-dark:             rgba(30, 30, 50, 0.92);
  --vtx-ctx-hotspot-icon-dark:           #c0c8ff;
  --vtx-ctx-label-bg:                    rgba(10, 10, 20, 0.72);
  --vtx-ctx-label-color:                 #fff;

  /* ── Context selection accent (hotspot hover + popover selection) ── */
  --vtx-ctx-accent:                      #e91e8c;
  --vtx-ctx-accent-glow:                 rgba(233, 30, 140, 0.5);
  --vtx-ctx-selected-weight:             700;

  /* ── Shader tooltip ── */
  --vtx-shader-tip-bg:                   rgba(50, 50, 50, 0.92);
  --vtx-shader-tip-color:                #fff;

  /* ── Context popover sizing ── */
  --vtx-ctx-pop-min-width:            220px;
  --vtx-ctx-pop-max-width:            360px;
  --vtx-ctx-pop-body-max-height:      420px;
  --vtx-ctx-pop-search-bg:            transparent;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Viewport3 — new tool buttons (freeMode, rotate, pan, zoom, hidePins)
   Override icons or active states here.
   ═══════════════════════════════════════════════════════════════════════════ */

/* All new tool buttons inherit .vtx-viewport3-tool-btn rules automatically.
   Free-mode is a toggle; rotate/pan/zoom are radio-exclusive cam modes.       */

/* Free-mode active — toolbar gets this class; rotate/pan/zoom are dimmed.    */
.vtx-viewport3-toolbar.vtx-free-mode [data-tool-id="rotate"],
.vtx-viewport3-toolbar.vtx-free-mode [data-tool-id="pan"],
.vtx-viewport3-toolbar.vtx-free-mode [data-tool-id="zoom"] {
  opacity: var(--vtx-viewport3-free-mode-dim, 0.3);
  pointer-events: none;
}

[data-theme="light"] .vtx-viewport3-toolbar.vtx-free-mode [data-tool-id="rotate"],
[data-theme="light"] .vtx-viewport3-toolbar.vtx-free-mode [data-tool-id="pan"],
[data-theme="light"] .vtx-viewport3-toolbar.vtx-free-mode [data-tool-id="zoom"] {
  opacity: var(--vtx-viewport3-free-mode-dim, 0.25);
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Viewport3 — Context hotspot pins
   ═══════════════════════════════════════════════════════════════════════════ */

.vtx-ctx-hotspot-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 9;
}

.vtx-ctx-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: all;
  cursor: pointer;
  z-index: 1;
  transition: z-index 0s;
}

.vtx-ctx-hotspot.vtx-ctx-hs-hovered { z-index: 99; }

.vtx-ctx-hotspot-inner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--vtx-ctx-hotspot-bg, rgba(255, 255, 255, 0.92));
  backdrop-filter: blur(4px);
  box-shadow: var(--vtx-ctx-hotspot-shadow, 0 2px 10px rgba(0, 0, 0, 0.35));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s, box-shadow 0.2s;
}

.vtx-ctx-hotspot.vtx-ctx-hs-hovered .vtx-ctx-hotspot-inner {
  background: var(--vtx-ctx-accent, #e91e8c);
  transform: scale(1.32);
  box-shadow: 0 6px 22px var(--vtx-ctx-accent-glow, rgba(233, 30, 140, 0.55));
}

.vtx-ctx-hotspot.vtx-ctx-hs-hovered .vtx-ctx-hotspot-inner svg { stroke: #fff; }

.vtx-ctx-hotspot-label {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  background: var(--vtx-ctx-label-bg, rgba(10, 10, 20, 0.72));
  color: var(--vtx-ctx-label-color, #fff);
  padding: 3px 9px;
  border-radius: 20px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}

.vtx-ctx-hotspot.vtx-ctx-hs-hovered .vtx-ctx-hotspot-label { opacity: 1; }

[data-theme="dark"] .vtx-ctx-hotspot-inner {
  background: var(--vtx-ctx-hotspot-bg-dark, rgba(30, 30, 50, 0.92));
}
[data-theme="dark"] .vtx-ctx-hotspot-inner svg {
  stroke: var(--vtx-ctx-hotspot-icon-dark, #c0c8ff);
}
[data-theme="dark"] .vtx-ctx-hotspot.vtx-ctx-hs-hovered .vtx-ctx-hotspot-inner {
  background: var(--vtx-ctx-accent, #e91e8c);
}
[data-theme="dark"] .vtx-ctx-hotspot.vtx-ctx-hs-hovered .vtx-ctx-hotspot-inner svg { stroke: #fff; }


/* ═══════════════════════════════════════════════════════════════════════════
   Expanders — Context popover selection styles
   (Pink + bold, no checkmark dot)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Selected option row: pink label, bold */
.vtx-exp-ctx-opt.vtx-expanders-selected .vtx-exp-ctx-opt-lbl {
  color: var(--vtx-ctx-accent, #e91e8c);
  font-weight: var(--vtx-ctx-selected-weight, 700);
}

/* Hide the dot/check indicator — selection is communicated by colour alone */
.vtx-exp-ctx-opt-dot { display: none; }
.vtx-exp-ctx-sc-chk  { display: none; }

/* Selected shader swatch: pink ring + pink label */
.vtx-exp-ctx-sc.vtx-expanders-selected {
  box-shadow: 0 0 0 2.5px var(--vtx-ctx-accent, #e91e8c),
              0 3px 10px var(--vtx-ctx-accent-glow, rgba(233, 30, 140, 0.35));
}

.vtx-exp-ctx-sc.vtx-expanders-selected .vtx-exp-ctx-sc-lbl {
  color: var(--vtx-ctx-accent, #e91e8c);
  font-weight: var(--vtx-ctx-selected-weight, 700);
}


/* ═══════════════════════════════════════════════════════════════════════════
   Expanders — Context popover search input
   ═══════════════════════════════════════════════════════════════════════════ */

.vtx-exp-ctx-pop {
  min-width: var(--vtx-ctx-pop-min-width, 220px);
  max-width: var(--vtx-ctx-pop-max-width, 360px);
}

.vtx-exp-ctx-pop-body {
  max-height: var(--vtx-ctx-pop-body-max-height, 420px);
}

/* Search row — magnifier icon + inline text input */
.vtx-exp-ctx-pop-search-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--vtx-expanders-divider, #e0e0e0);
  border-radius: 5px;
  padding: 4px 8px;
  margin: 0 0 8px;
  background: var(--vtx-ctx-pop-search-bg, transparent);
  transition: border-color 0.15s;
}

.vtx-exp-ctx-pop-search-wrap:focus-within {
  border-color: var(--vtx-expanders-primary, #1976d2);
}

.vtx-exp-ctx-pop-search-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--vtx-expanders-text-secondary, #9e9e9e);
}

.vtx-exp-ctx-pop-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 12px;
  line-height: 1.5;
  padding: 0;
  color: var(--vtx-expanders-text-primary, #212121);
}

.vtx-exp-ctx-pop-search-input::placeholder {
  color: var(--vtx-expanders-text-secondary, #9e9e9e);
}


/* ═══════════════════════════════════════════════════════════════════════════
   Expanders — Context popover filter chips
   ═══════════════════════════════════════════════════════════════════════════ */

.vtx-exp-ctx-pop-filter-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 0 8px;
  margin: 0 0 4px;
  border-bottom: 1px solid var(--vtx-expanders-divider, #e0e0e0);
}

.vtx-exp-ctx-pop-filter-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.vtx-exp-ctx-pop-filter-key {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--vtx-expanders-text-secondary, #757575);
}

.vtx-exp-ctx-pop-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Reuses .vtx-expanders-chip / .vtx-expanders-selected styles for chips */


/* ═══════════════════════════════════════════════════════════════════════════
   Expanders — Context popover no-match message
   ═══════════════════════════════════════════════════════════════════════════ */

.vtx-exp-ctx-pop-shader-section {
  min-height: 0;
}

.vtx-exp-ctx-pop-no-match {
  padding: 16px 0 8px;
  text-align: center;
  font-size: 12px;
  color: var(--vtx-expanders-text-secondary, #9e9e9e);
}