/* ==========================================================================
   ApexImplant 3D - High-End Surgical Guide & CBCT Styling System
   ========================================================================== */

:root {
  --bg-core: #090c14;
  --bg-surface: #0f1523;
  --bg-card: #141c2e;
  --bg-card-hover: #1a243b;
  --bg-elevated: #1e2942;
  --bg-input: #0b0f1a;

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-light: rgba(255, 255, 255, 0.12);
  --border-active: rgba(0, 229, 255, 0.4);

  --text-main: #f1f5f9;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
  --text-inverse: #020617;

  /* Clinical Viewport Identity Colors */
  --axial-color: #00e5ff;
  --coronal-color: #c084fc;
  --sagittal-color: #fbbf24;
  --view3d-color: #10b981;
  --nerve-color: #facc15;
  --implant-color: #38bdf8;
  --guide-color: #34d399;
  --danger-color: #ef4444;

  --accent-cyan: #00e5ff;
  --accent-blue: #2563eb;
  --accent-glow: rgba(0, 229, 255, 0.25);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 9999px;

  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 20px rgba(0, 229, 255, 0.2);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-brand: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* Base Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-core);
  color: var(--text-main);
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

/* ================= Top Navigation Bar (Shrunk to 38px / 32px Mobile) ================= */
.app-header {
  height: 38px;
  background: linear-gradient(180deg, #111728 0%, #0c111e 100%);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-icon {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #00e5ff 0%, #2563eb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.85rem;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.35);
  position: relative;
}

.brand-pulse {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  border: 1px solid var(--accent-cyan);
  animation: pulse-ring 2.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.4); opacity: 0; }
}

.brand-titles {
  display: flex;
  flex-direction: column;
}

.brand-name {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.brand-accent {
  color: var(--accent-cyan);
  margin-left: 2px;
}

.brand-badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  font-weight: 600;
}

/* Mode Switcher Tabs (Diagnostic & Implant Studio removed from header) */
.mode-nav,
#modeNav,
.mode-tab {
  display: none !important;
}

.mode-tab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.mode-tab i {
  font-size: 0.95rem;
  transition: transform 0.2s ease;
}

.mode-tab:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.04);
}

.mode-tab:hover i {
  transform: translateY(-1px);
}

.mode-tab.active {
  color: #ffffff;
  background: var(--bg-card);
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.mode-tab.active .tab-indicator {
  position: absolute;
  bottom: 0px;
  left: 20%;
  width: 60%;
  height: 2px;
  background: var(--accent-cyan);
  border-radius: var(--radius-full);
  box-shadow: 0 0 8px var(--accent-cyan);
}

/* Header Right */
.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.action-btn {
  border: none;
  padding: 8px 15px;
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.presentation-btn {
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.4);
  color: #d8b4fe;
}

.presentation-btn:hover {
  background: rgba(168, 85, 247, 0.25);
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.3);
  color: #ffffff;
}

.presentation-btn.active {
  background: #9333ea;
  color: #ffffff;
  box-shadow: 0 0 20px rgba(147, 51, 234, 0.5);
}

.secondary-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  color: var(--text-main);
}

.secondary-btn:hover {
  background: var(--bg-card-hover);
  border-color: rgba(255, 255, 255, 0.25);
}

.primary-btn {
  background: linear-gradient(135deg, #00e5ff 0%, #0284c7 100%);
  color: #020617;
  font-weight: 700;
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.3);
}

.primary-btn:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 24px rgba(0, 229, 255, 0.5);
  transform: translateY(-1px);
}

/* Patient Pill */
.patient-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.4);
  padding: 5px 12px 5px 6px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
}

.patient-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
}

.patient-meta {
  display: flex;
  flex-direction: column;
}

.patient-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: #ffffff;
}

.patient-sub {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-dim);
}

/* ================= Workflow Stepper ================= */
.workflow-stepper {
  height: 38px;
  background: #0b0f1b;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 20px;
  z-index: 90;
}

.step-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.2s;
}

.step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
}

.step-item.completed .step-num {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}

.step-item.completed .step-label {
  color: var(--text-muted);
}

.step-item.active .step-num {
  background: var(--accent-cyan);
  color: #000;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
}

.step-item.active .step-label {
  color: #ffffff;
  font-weight: 600;
}

.step-divider {
  width: 24px;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

/* ================= Main App Layout ================= */
.app-layout {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  height: calc(100vh - 38px);
  max-height: calc(100vh - 38px);
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* Left Clinical Toolbar */
.left-toolbar {
  width: 48px;
  height: 100%;
  align-self: stretch;
  background: #0d1220;
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  gap: 8px;
  z-index: 80;
  flex-shrink: 0;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.left-toolbar.collapsed {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-right: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.tool-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
}

.toolbar-divider {
  width: 28px;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  margin: 4px 0;
  box-shadow: 0 0 6px rgba(0, 229, 255, 0.25);
}

.tool-btn {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  font-size: 0.90rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}

.tool-btn:hover {
  background: rgba(0, 229, 255, 0.15);
  color: #ffffff;
  border-color: rgba(0, 229, 255, 0.4);
}

.tool-btn.active {
  background: rgba(0, 229, 255, 0.22);
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.35);
}

.tool-tooltip {
  position: absolute;
  left: 48px;
  background: #020617;
  color: #ffffff;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.2s ease;
  border: 1px solid var(--border-light);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.tool-btn:hover .tool-tooltip {
  opacity: 1;
  transform: translateX(0);
}

.tool-separator {
  width: 24px;
  height: 1px;
  background: var(--border-subtle);
}

/* ================= Center Viewports Grid ================= */
.viewports-container {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  background: #070a12;
  overflow: hidden;
  position: relative;
  display: flex;
}

.mobile-scroll-skirt,
.mobile-viewport-bar,
.mobile-only {
  display: none !important;
}

.viewport-grid.four-views {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  width: 100%;
  height: 100%;
  background: #05070d;
}

/* Maximized View Style */
.viewport-grid.maximized {
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
}
.viewport-grid.maximized .viewport-box:not(.is-maximized) {
  display: none !important;
}

.viewport-box {
  background: #0a0e1a;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  width: 100%;
  height: 100%;
}

/* Fix Mobile Fullscreen Covering Entire Screen */
.viewport-box.is-maximized {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  z-index: 9999999 !important;
  background: #04060e !important;
  margin: 0 !important;
}

.viewport-box.is-maximized .viewport-canvas-wrap {
  width: 100vw !important;
  height: calc(100vh - 28px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #000 !important;
}

.viewport-box.is-maximized .mpr-canvas {
  width: 100% !important;
  height: 100% !important;
  max-width: 100vw !important;
  max-height: calc(100vh - 28px) !important;
  object-fit: contain !important;
}

.viewport-box.is-maximized #threeContainer canvas {
  width: 100vw !important;
  height: calc(100vh - 28px) !important;
}

.viewport-box:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

/* Corner Overlay Viewport Headers - Maximizes CT slice area to 100% of quadrant */
.viewport-header {
  position: absolute;
  top: 6px;
  left: 8px;
  right: 8px;
  height: auto;
  min-height: 0;
  background: transparent;
  border: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0;
  z-index: 25;
  pointer-events: none;
}

#vp3D .viewport-header {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.vp-title-col {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  pointer-events: auto;
}

.vp-plane-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 20px;
  border-radius: 4px;
  background: rgba(11, 16, 29, 0.78);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #64748b;
  font-size: 0.62rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
}

.vp-plane-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
  border-color: rgba(255, 255, 255, 0.35);
}

.vp-plane-btn.active#btnPlane3dAxial {
  background: rgba(0, 229, 255, 0.25);
  border-color: #00e5ff;
  color: #00e5ff;
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
}

.vp-plane-btn.active#btnPlane3dCoronal {
  background: rgba(59, 130, 246, 0.25);
  border-color: #3b82f6;
  color: #3b82f6;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}

.vp-plane-btn.active#btnPlane3dSagittal {
  background: rgba(245, 158, 11, 0.25);
  border-color: #f59e0b;
  color: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

.vp-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(11, 16, 29, 0.78);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 2px 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}

.vp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.vp-axial-dot { background: var(--axial-color); box-shadow: 0 0 6px var(--axial-color); }
.vp-coronal-dot { background: var(--coronal-color); box-shadow: 0 0 6px var(--coronal-color); }
.vp-sagittal-dot { background: var(--sagittal-color); box-shadow: 0 0 6px var(--sagittal-color); }
.vp-3d-dot { background: var(--view3d-color); box-shadow: 0 0 6px var(--view3d-color); }

.vp-name {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #e2e8f0;
}

.vp-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(11, 16, 29, 0.78);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 2px 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}

.vp-slice-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-dim);
}

.vp-icon-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 0.72rem;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: var(--radius-sm);
  transition: all 0.2s;
}

.vp-icon-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.vp-chip-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s;
}

.vp-chip-btn.active {
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.5);
  color: #34d399;
}

/* Canvas Viewport Area - 100% Height Fill */
.viewport-canvas-wrap {
  width: 100%;
  height: 100%;
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #04060e;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mpr-canvas {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated; /* Crisp DICOM edge sharpness without bilinear blur */
  cursor: crosshair;
  border-radius: 2px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.95);
  touch-action: pan-y pinch-zoom;
}

/* Linear / Smooth Bilinear 2D Canvas Interpolation Mode */
.mpr-canvas.interpolation-linear {
  image-rendering: auto !important;
  image-rendering: smooth !important;
}

/* Slice Range Sliders on Bottom of Canvases - High Visibility Capsule */
.slice-slider-container {
  position: absolute;
  bottom: 8px;
  left: 15%;
  width: 70%;
  height: 22px;
  z-index: 35;
  opacity: 0.95;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  background: rgba(11, 16, 29, 0.88);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0, 229, 255, 0.35);
  border-radius: 999px;
  padding: 0 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.viewport-box:hover .slice-slider-container {
  opacity: 1;
}

.slice-slider {
  width: 100%;
  height: 5px;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  outline: none;
}

.slice-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #00e5ff;
  border: 1.5px solid #ffffff;
  cursor: pointer;
  box-shadow: 0 0 10px #00e5ff;
}

/* HUD Overlays */
.viewport-hud {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 0.52rem !important;
  color: rgba(255, 255, 255, 0.65);
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  padding: 2px 5px !important;
  border-radius: var(--radius-sm);
  pointer-events: none;
  z-index: 25;
}

.hud-top-left { top: 8px; left: 8px; }
.hud-bottom-left { bottom: 8px; left: 8px; }
.hud-bottom-right { bottom: 8px; right: 8px; }

.badge-status {
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
}

.badge-success {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.5);
  color: #34d399;
}

.badge-danger {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.6);
  color: #f87171;
  animation: blink-danger 1s infinite;
}

@keyframes blink-danger {
  50% { opacity: 0.5; }
}

/* Three.js Camera Gizmo */
.three-view-gizmo {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 3px;
  z-index: 30;
}

.gizmo-btn {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  font-size: 0.52rem !important;
  font-weight: 600;
  padding: 2px 5px !important;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
}

.gizmo-btn:hover {
  background: var(--accent-cyan);
  color: #000;
}

/* ================= TMJ Workspace Mode (Ultra-Compact Single-Page Layout) ================= */
.tmj-workspace {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 4px 8px;
  gap: 4px;
  height: calc(100vh - 38px);
  max-height: calc(100vh - 38px);
  overflow: hidden !important;
  background: #090c15;
  box-sizing: border-box;
}

.tmj-workspace.hidden {
  display: none !important;
}

.tmj-banner {
  background: linear-gradient(135deg, rgba(30, 41, 66, 0.7) 0%, rgba(15, 23, 42, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
  min-height: 28px;
}

.tmj-banner-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tmj-banner-title i {
  font-size: 0.95rem;
  color: #a855f7;
}

.tmj-banner-title h3 {
  font-size: 0.74rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  margin: 0;
}

.tmj-banner-title p {
  font-size: 0.54rem;
  color: var(--text-muted);
  line-height: 1.05;
  margin: 0;
}

.tmj-banner-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tmj-banner-actions button {
  font-size: 0.60rem !important;
  padding: 2px 7px !important;
  height: 22px !important;
  border-radius: 4px !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.tmj-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 4px;
  overflow: hidden;
}

.tmj-card {
  background: #0e1424;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tmj-card-wide {
  grid-column: span 2;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 4px 6px;
  gap: 3px;
}

.tmj-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 18px;
}

.badge-tag {
  font-size: 0.58rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.03em;
}

.left-tag { background: rgba(59, 130, 246, 0.2); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.4); }
.right-tag { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.4); }
.3d-tag { background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.4); }

.tmj-metric {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--text-dim);
}

.tmj-canvas-holder {
  height: 96px;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.tmj-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.tmj-scrub-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

.tmj-scrub-row span {
  font-size: 0.58rem !important;
}

.tmj-scrub-row input[type="range"] {
  height: 3px;
}

.tmj-measurements-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}

.meas-pill {
  background: rgba(0, 0, 0, 0.35);
  padding: 1px 4px;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.meas-pill label {
  font-size: 0.48rem;
  color: var(--text-dim);
  text-transform: uppercase;
  line-height: 1.1;
}

.meas-pill span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.1;
}

.meas-pill.status-good span { color: #10b981; }
.meas-pill.status-warn span { color: #f59e0b; }

.tmj-layer-toggles {
  display: flex;
  align-items: center;
  gap: 6px;
}

.layer-chk {
  font-size: 0.58rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
}

.layer-chk input { display: none; }

.chk-box {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid var(--border-light);
  background: rgba(255, 255, 255, 0.05);
  display: inline-block;
  transition: all 0.2s;
}

.layer-chk input:checked + .chk-box {
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
}

.chk-heat { border-color: #f59e0b; }
.layer-chk input:checked + .chk-heat { background: #f59e0b; }
.chk-disc { border-color: #06b6d4; }
.layer-chk input:checked + .chk-disc { background: #06b6d4; }
.chk-muscle { border-color: #ef4444; }
.layer-chk input:checked + .chk-muscle { background: #ef4444; }
.chk-fluid { border-color: #f59e0b; }
.layer-chk input:checked + .chk-fluid { background: #eab308; }

.tmj-3d-wrap {
  flex: 1;
  min-height: 0;
  background: #000;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.heatmap-legend {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 3px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 10;
  min-width: 150px;
}

.legend-title {
  font-size: 0.54rem;
  color: var(--text-dim);
  font-weight: 600;
}

.legend-bar {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, #ef4444 0%, #f59e0b 25%, #10b981 50%, #06b6d4 75%, #3b82f6 100%);
}

.legend-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.50rem;
  color: var(--text-muted);
}

/* ================= Right Sidebar Controls ================= */
.right-sidebar {
  width: 330px;
  min-width: 280px;
  height: 100%;
  align-self: stretch;
  box-sizing: border-box;
  background: #0d1220;
  border-left: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 12px;
  gap: 14px;
  z-index: 80;
  scrollbar-gutter: stable;
  flex-shrink: 0;
  transition: width 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.right-sidebar.collapsed {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-left: none !important;
}

.sidebar-section {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sec-header h4 {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sec-subtitle {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  gap: 6px;
}

.control-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.control-row label {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 500;
}

.slider-title-val {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.slider-title-val span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent-cyan);
}

.preset-pill-group {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  background: var(--bg-input);
  padding: 3px;
  border-radius: var(--radius-sm);
}

.preset-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 5px 0;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.preset-btn.active {
  background: var(--bg-elevated);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.preset-btn[data-wl="vessels"].active {
  background: linear-gradient(135deg, #f43f5e, #be123c);
  color: #fff;
  box-shadow: 0 0 10px rgba(244, 63, 94, 0.45);
}

.clut-pill-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: var(--bg-input);
  padding: 3px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.clut-pill-group .preset-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 2px;
  font-size: 0.69rem;
  font-weight: 600;
  border-radius: 4px;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.clut-pill-group .preset-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.clut-pill-group .preset-btn.active {
  background: var(--bg-elevated);
  color: #fff;
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.clut-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.clut-dot-gray {
  background: linear-gradient(135deg, #cbd5e1, #475569);
  box-shadow: 0 0 3px rgba(203, 213, 225, 0.5);
}

.clut-dot-misch {
  background: linear-gradient(135deg, #ef4444 0%, #f97316 35%, #10b981 70%, #06b6d4 100%);
  box-shadow: 0 0 5px rgba(249, 115, 22, 0.6);
}

.clut-dot-hotiron {
  background: linear-gradient(135deg, #7c2d12, #ea580c, #facc15, #ffffff);
  box-shadow: 0 0 5px rgba(234, 88, 12, 0.6);
}

.clut-dot-invert {
  background: linear-gradient(135deg, #ffffff 50%, #0f172a 50%);
  border: 1px solid #94a3b8;
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);
}

.interpolation-pill-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--bg-input);
  padding: 3px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.interpolation-pill-group .preset-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 6px;
  font-size: 0.70rem;
  font-weight: 600;
  border-radius: 4px;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.interpolation-pill-group .preset-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.interpolation-pill-group .preset-btn.active {
  background: var(--bg-elevated);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.preset-btn[data-slab] {
  flex: 1 1 auto;
  min-width: 44px;
  padding: 4px 6px;
  font-size: 0.68rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.6);
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.preset-btn[data-slab]:hover {
  background: rgba(56, 189, 248, 0.15);
  color: #f1f5f9;
  border-color: rgba(56, 189, 248, 0.4);
}

.preset-btn[data-slab].active {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #ffffff;
  border-color: #38bdf8;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.35);
}

.app-range {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  outline: none;
}

.app-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-cyan);
  cursor: pointer;
  box-shadow: 0 0 6px var(--accent-cyan);
}

.density-box {
  background: #090e1c;
  border: 1px solid rgba(0, 229, 255, 0.15);
  border-radius: var(--radius-sm);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.density-title {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.density-val {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent-cyan);
}

.density-class {
  font-size: 0.68rem;
  color: #94a3b8;
  line-height: 1.3;
}

.density-progress-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}

.density-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #00e5ff);
}

.grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.app-select, .app-input {
  background: var(--bg-input);
  border: 1px solid var(--border-light);
  color: #fff;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  outline: none;
  transition: border-color 0.2s;
}

.app-select:focus, .app-input:focus {
  border-color: var(--accent-cyan);
}

.divider-sub {
  height: 1px;
  background: var(--border-subtle);
  margin: 4px 0;
}

.btn-block {
  width: 100%;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: none;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.primary-glow {
  background: linear-gradient(135deg, #00e5ff 0%, #0284c7 100%);
  color: #020617;
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.35);
}

.primary-glow:hover {
  filter: brightness(1.1);
  box-shadow: 0 0 24px rgba(0, 229, 255, 0.5);
  transform: translateY(-1px);
}

.guide-status-box {
  background: rgba(0, 0, 0, 0.3);
  padding: 8px;
  border-radius: var(--radius-sm);
}

.status-indicator {
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-indicator.ready { color: #10b981; }

.status-desc {
  font-size: 0.65rem;
  color: var(--text-dim);
  margin-top: 3px;
  line-height: 1.3;
}

.checklist-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.checklist-items li {
  font-size: 0.7rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.checklist-items li.checked i {
  color: #10b981;
}

/* ================= Notification Toast ================= */
.toast-notification {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #0f172a;
  border: 1px solid var(--accent-cyan);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(0, 229, 255, 0.3);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 9999;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.toast-notification.show {
  transform: translateY(0);
  opacity: 1;
}

/* ================= Modal ================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  transition: opacity 0.2s;
}

.modal-overlay.hidden {
  display: none !important;
}

.modal-card {
  width: 580px;
  max-width: 95vw;
  background: #0f1628;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  transition: width 0.25s ease;
}

.modal-card.wide-mode {
  width: 720px;
}

.modal-header {
  padding: 16px 20px;
  background: #131c33;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-close-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 1.1rem;
  cursor: pointer;
}

.modal-close-btn:hover { color: #fff; }

.modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.upload-dropzones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.dropzone {
  border: 2px dashed rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  transition: all 0.2s;
}

.dropzone:hover {
  border-color: var(--accent-cyan);
  background: rgba(0, 229, 255, 0.05);
}

.modal-type-tab:hover {
  color: #ffffff !important;
}

.tmj-slot-card {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1.5px dashed rgba(255, 255, 255, 0.16) !important;
}

.tmj-slot-card:hover {
  border-color: #00e5ff !important;
  background: rgba(0, 229, 255, 0.06) !important;
  transform: translateY(-2px);
}

.drop-icon {
  font-size: 2rem;
  color: var(--accent-cyan);
  margin-bottom: 4px;
}

.dropzone h4 {
  font-size: 0.82rem;
  font-weight: 700;
}

.dropzone p {
  font-size: 0.68rem;
  color: var(--text-dim);
}

.file-hidden { display: none; }

.sample-case-box {
  background: rgba(37, 99, 235, 0.1);
  border: 1px solid rgba(37, 99, 235, 0.3);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sample-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sample-info i {
  font-size: 1.4rem;
  color: #38bdf8;
}

.sample-info div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sample-info strong {
  font-size: 0.8rem;
  color: #fff;
}

.sample-info span {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.btn-sm {
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-sm.primary {
  background: var(--accent-cyan);
  color: #000;
}

.btn-sm.secondary {
  background: var(--bg-card);
  color: #fff;
  border: 1px solid var(--border-light);
}

/* Upload & Extraction Progress Container */
.upload-progress-container {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 229, 255, 0.25);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.upload-progress-container.hidden {
  display: none !important;
}

.progress-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
}

.progress-label-row i {
  color: var(--accent-cyan);
  margin-right: 6px;
}

.progress-bar-track {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #00e5ff);
  border-radius: 4px;
  transition: width 0.2s ease;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
}

.progress-status-text {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* ================= CBCT Global High-Speed Streaming HUD Overlay ================= */
.cbct-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(5, 10, 20, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.cbct-loading-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.cbct-loading-card {
  width: 520px;
  max-width: 95vw;
  background: rgba(13, 22, 38, 0.95);
  border: 1px solid rgba(0, 229, 255, 0.45);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(0, 229, 255, 0.25);
  padding: 22px 24px;
  display: flex;
  gap: 18px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.cbct-loading-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2563eb, #00e5ff, #38bdf8);
}

.loading-icon-pulse {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(0, 229, 255, 0.12);
  border: 1px solid rgba(0, 229, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00e5ff;
  font-size: 1.5rem;
  flex-shrink: 0;
  animation: pulse-glow 2s infinite ease-in-out;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(0, 229, 255, 0.3); transform: scale(1); }
  50% { box-shadow: 0 0 22px rgba(0, 229, 255, 0.6); transform: scale(1.05); }
}

.loading-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.loading-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.loading-header-row h4 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.loading-percent-badge {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: #00e5ff;
  background: rgba(0, 229, 255, 0.15);
  border: 1px solid rgba(0, 229, 255, 0.35);
  padding: 2px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}

.loading-track {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.loading-fill {
  height: 100%;
  background: linear-gradient(90deg, #2563eb, #00e5ff);
  border-radius: 6px;
  transition: width 0.18s ease;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.6);
}

.loading-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
}

.loading-status-text {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.btn-skip-loading {
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.3);
  color: #94a3b8;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.btn-skip-loading:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

/* ================= Patient Presentation Mode Class ================= */
body.patient-mode-active .workflow-stepper,
body.patient-mode-active .left-toolbar,
body.patient-mode-active .right-sidebar,
body.patient-mode-active .viewport-box:not(#vp3D),
body.patient-mode-active .viewport-header,
body.patient-mode-active .viewport-hud {
  display: none !important;
}

body.patient-mode-active .viewport-grid {
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
}

body.patient-mode-active .viewport-box#vp3D {
  border: none;
}

/* ================= 3D Anatomical Orientation Cube ================= */
.orientation-cube-wrap {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 54px;
  height: 54px;
  perspective: 280px;
  z-index: 45;
  pointer-events: auto;
}

.orientation-cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateY(30deg);
  transition: transform 0.05s linear;
}

.cube-face {
  position: absolute;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-brand);
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
  backface-visibility: visible;
}

.cube-face:hover {
  filter: brightness(1.3);
  border-color: #ffffff;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.6), inset 0 0 14px rgba(255, 255, 255, 0.5);
  transform: scale(1.05);
}

/* Colors matching Carestream & clinical 3D orientation cubes */
.cube-face.face-front  { background: rgba(37, 99, 235, 0.92); transform: rotateY(0deg) translateZ(27px); }       /* A: Anterior - Blue */
.cube-face.face-back   { background: rgba(30, 58, 138, 0.92); transform: rotateY(180deg) translateZ(27px); }     /* P: Posterior - Dark Blue */
.cube-face.face-right  { background: rgba(225, 29, 72, 0.92); transform: rotateY(90deg) translateZ(27px); }      /* L: Patient Left - Red */
.cube-face.face-left   { background: rgba(190, 18, 60, 0.92); transform: rotateY(-90deg) translateZ(27px); }     /* R: Patient Right - Crimson */
.cube-face.face-top    { background: rgba(217, 119, 6, 0.92); transform: rotateX(90deg) translateZ(27px); }      /* S: Superior - Amber/Gold */
.cube-face.face-bottom { background: rgba(180, 83, 9, 0.92); transform: rotateX(-90deg) translateZ(27px); }     /* I: Inferior - Brown/Ochre */

/* ================= 3D Render Presets Dropdown Menu ================= */
.preset-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  width: 220px;
  max-width: calc(100vw - 20px);
  max-height: 420px;
  overflow-y: auto;
  background: #0b101d;
  border: 1px solid rgba(0, 229, 255, 0.35);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.9), 0 0 15px rgba(0, 229, 255, 0.25);
  z-index: 2500;
  padding: 6px 0;
  display: flex;
  flex-direction: column;
}

.preset-dropdown-menu.hidden {
  display: none !important;
}

.preset-group-title {
  padding: 8px 14px 4px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent-cyan);
  text-transform: uppercase;
}

.preset-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px;
  background: transparent;
  border: none;
  color: #cbd5e1;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  width: 100%;
}

.preset-menu-item:hover {
  background: rgba(0, 229, 255, 0.12);
  color: #ffffff;
  padding-left: 18px;
}

.preset-menu-item.active {
  background: rgba(0, 229, 255, 0.18);
  color: #00e5ff;
  font-weight: 700;
}

.preset-menu-item .preset-check {
  font-size: 0.75rem;
  color: #00e5ff;
  opacity: 0;
  transition: opacity 0.15s;
}

.preset-menu-item.active .preset-check {
  opacity: 1 !important;
}

.preset-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 0;
}

/* Series Tab in Header */
.series-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1e293b;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #f8fafc;
}

.series-tab i {
  color: var(--accent-cyan);
}

.slider-with-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.btn-xs {
  padding: 4px 8px;
  font-size: 0.72rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  color: var(--text-main);
  white-space: nowrap;
}

.btn-xs:hover {
  background: var(--bg-card-hover);
  color: #fff;
}

/* Mobile Link Button in Header */
.mobile-link-btn {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.25) 0%, rgba(16, 185, 129, 0.35) 100%);
  border: 1px solid rgba(34, 197, 94, 0.6);
  color: #4ade80;
  font-weight: 600;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.25);
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobile-link-btn:hover {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.4) 0%, rgba(16, 185, 129, 0.5) 100%);
  border-color: #22c55e;
  color: #ffffff;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.45);
  transform: translateY(-1px);
}

/* 3-Axis Oblique MPR Card */
.oblique-section-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.oblique-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 6px;
}

.oblique-section-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #38bdf8;
  display: flex;
  align-items: center;
  gap: 6px;
}

.control-row-sm {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.control-row-sm .slider-title-val {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.control-row-sm .slider-title-val label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.dot-cyan { background: #00e5ff; box-shadow: 0 0 6px #00e5ff; }
.dot-purple { background: #c084fc; box-shadow: 0 0 6px #c084fc; }
.dot-amber { background: #fbbf24; box-shadow: 0 0 6px #fbbf24; }

/* Wide Modal for Mobile Access */
.modal-card-wide {
  width: 660px !important;
  max-width: 95vw;
}

.mobile-modal-grid {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  align-items: center;
}

@media (max-width: 640px) {
  .mobile-modal-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.qr-preview-box {
  background: #ffffff;
  padding: 6px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.mobile-qr-img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  display: block;
}

.qr-caption {
  font-size: 0.72rem;
  color: #334155;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}

.links-column {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.link-item-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.link-item-label {
  display: flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 600;
}

.badge-status.online {
  color: #4ade80;
  display: flex;
  align-items: center;
  gap: 6px;
}

.badge-status.local {
  color: #38bdf8;
  display: flex;
  align-items: center;
  gap: 6px;
}

.link-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.link-input {
  flex: 1;
  background: #020617;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: #f1f5f9;
  outline: none;
}

.link-input:focus {
  border-color: #38bdf8;
}

.link-hint {
  font-size: 0.7rem;
  color: var(--text-dim);
}

.mobile-features-callout {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.feature-chip {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  font-size: 0.7rem;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 6px;
}

.feature-chip i {
  color: #38bdf8;
}

/* ================= Top Center Remote Link / QR Button & Modal Extensions ================= */
.header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex: 1;
}

.remote-link-header-btn {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.16) 0%, rgba(14, 165, 233, 0.28) 100%);
  border: 1.5px solid rgba(6, 182, 212, 0.65);
  color: #00e5ff;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 0.80rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
  transition: all 0.22s ease;
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.25);
  font-family: var(--font-sans);
}

.remote-link-header-btn:hover {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.32) 0%, rgba(14, 165, 233, 0.45) 100%);
  border-color: #38bdf8;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
}

.remote-btn-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulse-emerald-glow 2s infinite;
}

@keyframes pulse-emerald-glow {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.remote-btn-badge {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.5);
  color: #34d399;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.modal-download-btn:hover {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.35), rgba(2, 132, 199, 0.5)) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(14, 165, 233, 0.35) !important;
}

@media (max-width: 680px) {
  .remote-btn-badge { display: none; }
  .remote-link-header-btn { padding: 3px 8px; font-size: 0.72rem; gap: 5px; }
}



/* ================= Embedded / Responsive Studio Optimizations ================= */
@media (max-width: 1100px) {
  .patient-pill { display: none !important; }
  .action-btn span { font-size: 0.75rem; }
  .action-btn { padding: 5px 9px; }
  .right-sidebar { width: 280px; }
  .app-header { padding: 0 10px; }
}
@media (max-width: 768px) {
  .left-toolbar { width: 44px; }
}

/* ================= Mobile Landscape Fullscreen & Phone Upload Styles ================= */
.mobile-landscape-btn {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.2), rgba(14, 165, 233, 0.3));
  border-color: rgba(0, 229, 255, 0.5);
  color: #00e5ff;
}
.mobile-landscape-btn:hover {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.35), rgba(14, 165, 233, 0.45));
  color: #ffffff;
}

/* Forced Landscape Rotation for Mobile Portrait Mode */
@media (max-width: 900px) and (orientation: portrait) {
  body.mobile-forced-landscape {
    transform: rotate(90deg);
    transform-origin: top left;
    position: fixed !important;
    top: 0 !important;
    left: 100vw !important;
    width: 100vh !important;
    height: 100vw !important;
    overflow: hidden !important;
    z-index: 999999;
  }
  body.mobile-forced-landscape .main-container {
    height: 100vw !important;
  }
  body.mobile-forced-landscape .viewport-grid {
    height: calc(100vw - 52px) !important;
  }
  body.mobile-forced-landscape .modal-card {
    max-width: 92vh !important;
    max-height: 88vw !important;
    padding: 14px 18px !important;
  }
  body.mobile-forced-landscape .upload-dropzones {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  body.mobile-forced-landscape .dropzone {
    padding: 12px !important;
  }
  body.mobile-forced-landscape .dropzone p {
    display: none !important;
  }
  body.mobile-forced-landscape .mobile-rotate-prompt {
    display: none !important;
  }
}

/* Floating Mobile Rotate Prompt */
.mobile-rotate-prompt {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.95), rgba(14, 165, 233, 0.95));
  color: #030712;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.82rem;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 30px rgba(0, 229, 255, 0.55);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
  animation: pulseRotatePrompt 2s infinite ease-in-out;
}
.mobile-rotate-prompt.hidden {
  display: none !important;
}
@keyframes pulseRotatePrompt {
  0%, 100% { transform: translateX(-50%) scale(1); box-shadow: 0 8px 25px rgba(0, 229, 255, 0.45); }
  50% { transform: translateX(-50%) scale(1.05); box-shadow: 0 12px 35px rgba(0, 229, 255, 0.75); }
}

/* Responsive Landscape Upload Modal */
@media (max-height: 520px) {
  .modal-card {
    max-height: 94vh !important;
    padding: 12px 18px !important;
  }
  .modal-header h3 {
    font-size: 0.92rem !important;
  }
  .upload-dropzones {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .dropzone {
    padding: 10px !important;
  }
  .drop-icon {
    font-size: 1.5rem !important;
    margin-bottom: 4px !important;
  }
  .dropzone h4 {
    font-size: 0.8rem !important;
  }
  .dropzone p {
    display: none !important;
  }
  .sample-case-box {
    margin-top: 8px !important;
    padding: 6px 12px !important;
  }
}

/* Community Smile Fund Button in CBCT Header */
.fund-btn {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.22), rgba(225, 29, 72, 0.35)) !important;
  border-color: rgba(244, 63, 94, 0.6) !important;
  color: #fecdd3 !important;
  text-decoration: none;
  font-weight: 800 !important;
  transition: all 0.2s ease !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fund-btn:hover {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.4), rgba(225, 29, 72, 0.6)) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(244, 63, 94, 0.45);
}

/* ================= Clean Responsive & Layout Enhancements ================= */

/* 2. Hide Mobile Elements on Desktop (screens wider than 768px) */
@media (min-width: 769px) {
  .mobile-only,
  .mobile-viewport-bar,
  .mobile-landscape-btn,
  .mobile-tools-toggle,
  .mobile-scroll-skirt,
  #btnMobileLandscape,
  #mobileViewportBar,
  #mobileScrollSkirt {
    display: none !important;
  }
}

/* 4. Fix Orientation Cube & Camera Gizmo Overlap */
.three-view-gizmo.bottom-right {
  top: auto !important;
  bottom: 12px !important;
  right: 14px !important;
  z-index: 35 !important;
}

.orientation-cube-wrap {
  top: 48px !important;
  right: 12px !important;
  width: 36px !important;
  height: 36px !important;
  perspective: 180px !important;
  z-index: 25 !important;
}


/* 5. Mobile Layout & Fullscreen Optimization */
.mobile-tools-toggle {
  display: none;
  background: rgba(14, 165, 233, 0.2);
  border: 1px solid rgba(14, 165, 233, 0.5);
  color: #38bdf8;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  align-items: center;
  gap: 5px;
}

/* Sidebar Case Card & Moved Action Pills */
.sidebar-case-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 14px;
}

.case-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.case-card-header i {
  color: var(--accent-cyan);
  font-size: 1.1rem;
}

.case-card-header div {
  display: flex;
  flex-direction: column;
}

.case-card-header strong {
  font-size: 0.82rem;
  color: #ffffff;
}

.case-card-header span {
  font-size: 0.68rem;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

.case-actions-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.case-actions-row .btn-sm {
  padding: 5px 9px;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.fund-pill-btn {
  background: rgba(244, 63, 94, 0.2) !important;
  color: #fb7185 !important;
  border: 1px solid rgba(244, 63, 94, 0.5) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Slim Viewport Headers to give maximum space to CT Slices */
.viewport-header {
  height: 24px !important;
  min-height: 24px !important;
  padding: 2px 8px !important;
}

.vp-name {
  font-size: 0.70rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

.vp-slice-label {
  font-size: 0.65rem !important;
}

/* Prominent 3D Fullscreen Button */
.vp-fullscreen-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: rgba(14, 165, 233, 0.25) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(14, 165, 233, 0.6) !important;
  padding: 2px 7px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 0.70rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.vp-fullscreen-btn:hover {
  background: rgba(14, 165, 233, 0.45) !important;
}

/* Mobile Portrait & Narrow Screen Rules */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: 100% !important;
  }

  /* 2-Line Mobile Clinical Navigation Header (Total ~60px, Zero Clipping) */
  .app-header {
    height: auto !important;
    min-height: 58px !important;
    max-height: 64px !important;
    padding: 4px 8px !important;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 3px 6px !important;
    background: #0b101d !important;
    box-sizing: border-box !important;
  }

  /* Row 1, Col 1: Brand Logo & Title */
  .header-left {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  .app-brand {
    gap: 6px !important;
  }

  .brand-icon {
    width: 20px !important;
    height: 20px !important;
    font-size: 0.70rem !important;
  }

  .brand-name {
    font-size: 0.78rem !important;
  }

  .brand-badge {
    display: none !important;
  }

  .patient-pill {
    display: none !important;
  }

  /* Row 1, Col 2: Remote Link & QR Button */
  .header-center {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }

  .remote-link-header-btn {
    padding: 2px 7px !important;
    font-size: 0.65rem !important;
    height: 24px !important;
  }

  .remote-btn-badge {
    display: none !important;
  }

  /* Row 2: Full Width Scrollable Action Bar with Zero Clipping */
  .header-right {
    grid-column: 1 / -1 !important;
    grid-row: 2 / 3 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 1px !important;
  }

  .header-right::-webkit-scrollbar {
    display: none !important;
  }

  .header-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
  }

  .mobile-tools-toggle {
    display: inline-flex !important;
    height: 25px !important;
    padding: 2px 7px !important;
    font-size: 0.68rem !important;
    flex-shrink: 0 !important;
  }

  .action-btn {
    padding: 2px 7px !important;
    font-size: 0.68rem !important;
    height: 25px !important;
    border-radius: var(--radius-sm) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .desktop-only {
    display: none !important;
  }

  /* Landscape button: prominent, high-contrast cyan on mobile */
  .mobile-landscape-btn {
    display: inline-flex !important;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.35), rgba(2, 132, 199, 0.5)) !important;
    color: #38bdf8 !important;
    border: 1px solid #0ea5e9 !important;
    box-shadow: 0 0 8px rgba(14, 165, 233, 0.4) !important;
    font-weight: 700 !important;
    height: 25px !important;
    padding: 2px 7px !important;
    font-size: 0.68rem !important;
    flex-shrink: 0 !important;
  }

  /* Full Height Fixed Mobile App Layout (Compensating for 60px 2-line header) */
  html, body {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }

  .app-layout {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100dvh - 60px) !important;
    max-height: calc(100dvh - 60px) !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .viewports-container {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: calc(100% - 48px) !important;
    max-height: calc(100% - 48px) !important;
    overflow: hidden !important;
    padding: 2px 2px 0 2px !important;
    position: relative !important;
  }

  /* Retire Mobile Scroll Skirt (Unneeded in App-like Single/2x2 Viewports) */
  .mobile-scroll-skirt {
    display: none !important;
  }

  /* Mobile Bottom Navigation Bar */
  .mobile-viewport-bar {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 48px !important;
    background: rgba(11, 16, 29, 0.96) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    z-index: 9999 !important;
    align-items: center !important;
    justify-content: space-around !important;
    padding: 2px 6px !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.6) !important;
  }

  .mobile-vp-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #94a3b8 !important;
    padding: 4px 6px !important;
    border-radius: 8px !important;
    font-size: 0.64rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
    flex: 1 !important;
    max-width: 68px !important;
    height: 40px !important;
  }

  .mobile-vp-btn i {
    font-size: 0.92rem !important;
  }

  .mobile-vp-dot {
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    display: inline-block !important;
  }

  .mobile-vp-btn.active {
    background: rgba(14, 165, 233, 0.22) !important;
    color: #38bdf8 !important;
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.3) !important;
    border: 1px solid rgba(14, 165, 233, 0.45) !important;
  }

  /* Single View Mode on Mobile: Only the active quadrant is shown and fills 100% */
  .viewport-grid.mobile-single-view {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    flex: 1 !important;
  }

  .viewport-grid.mobile-single-view[data-mobile-active="vp3D"] #vp3D,
  .viewport-grid.mobile-single-view[data-mobile-active="vpAxial"] #vpAxial,
  .viewport-grid.mobile-single-view[data-mobile-active="vpCoronal"] #vpCoronal,
  .viewport-grid.mobile-single-view[data-mobile-active="vpSagittal"] #vpSagittal {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    flex: 1 !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
  }

  .viewport-grid.mobile-single-view[data-mobile-active="vp3D"] .viewport-box:not(#vp3D),
  .viewport-grid.mobile-single-view[data-mobile-active="vpAxial"] .viewport-box:not(#vpAxial),
  .viewport-grid.mobile-single-view[data-mobile-active="vpCoronal"] .viewport-box:not(#vpCoronal),
  .viewport-grid.mobile-single-view[data-mobile-active="vpSagittal"] .viewport-box:not(#vpSagittal) {
    display: none !important;
  }

  /* 2x2 Grid Mode on Mobile */
  .viewport-grid:not(.mobile-single-view) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    height: 100% !important;
    gap: 3px !important;
  }

  .viewport-grid:not(.mobile-single-view) .viewport-box {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    cursor: pointer !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 4px !important;
  }

  .viewport-canvas-wrap {
    width: 100% !important;
    height: 100% !important;
    flex: 1 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .mpr-canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  #threeContainer canvas {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  /* CT Slice Sliders permanently visible at bottom of each canvas */
  .slice-slider-container {
    display: block !important;
    opacity: 0.95 !important;
    bottom: 6px !important;
    left: 6% !important;
    width: 88% !important;
    height: 20px !important;
    z-index: 50 !important;
  }

  .slice-slider {
    width: 100% !important;
    height: 6px !important;
    cursor: pointer !important;
  }

  .slice-slider::-webkit-slider-thumb {
    width: 20px !important;
    height: 20px !important;
  }

  /* Compact Viewport HUDs to not obstruct CT anatomy */
  .viewport-hud {
    font-size: 0.62rem !important;
    padding: 1px 4px !important;
    background: rgba(0, 0, 0, 0.65) !important;
    border-radius: 3px !important;
  }

  /* Left floating toolbar slides from off-screen as a clear readable drawer */
  .left-toolbar {
    position: fixed !important;
    left: 0 !important;
    top: 32px !important;
    bottom: 48px !important;
    width: 210px !important;
    z-index: 9999 !important;
    background: rgba(11, 16, 29, 0.98) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-right: 1px solid rgba(0, 229, 255, 0.3) !important;
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.85) !important;
    transition: transform 0.22s ease-out !important;
    transform: translateX(-100%) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 8px 6px !important;
    overflow-y: auto !important;
  }

  .left-toolbar.mobile-open {
    transform: translateX(0) !important;
  }

  .left-toolbar .tool-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    width: 100% !important;
  }

  .left-toolbar .tool-btn {
    width: 100% !important;
    height: 36px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 0 10px !important;
    font-size: 0.76rem !important;
  }

  .left-toolbar .tool-btn .tool-tooltip {
    display: inline-block !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    color: inherit !important;
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }

  /* Right sidebar slides from off-screen */
  .right-sidebar {
    position: fixed !important;
    right: 0 !important;
    top: 32px !important;
    bottom: 48px !important;
    width: 275px !important;
    z-index: 9999 !important;
    background: rgba(11, 16, 29, 0.98) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.85) !important;
    transition: transform 0.22s ease-out !important;
    transform: translateX(100%) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
  }

  .right-sidebar.mobile-open {
    transform: translateX(0) !important;
  }

  /* Responsive Floating Toolbars (Tooth Isolator, Nerve Tracer, Pulp Tracer) */
  .slicer-brush-bar, .nerve-tracer-bar {
    width: 96% !important;
    max-width: 96% !important;
    bottom: 54px !important;
    padding: 6px 10px !important;
    font-size: 0.70rem !important;
    max-height: 48vh !important;
    overflow-y: auto !important;
    border-radius: 14px !important;
  }

  .brush-row {
    gap: 6px !important;
  }

  .brush-actions-cluster {
    width: 100% !important;
    justify-content: space-between !important;
    margin-left: 0 !important;
  }
}

/* When in Mobile Forced Landscape: Switch back to Grid View */
body.mobile-forced-landscape .app-layout {
  display: flex !important;
  height: 100vh !important;
  overflow: hidden !important;
}

body.mobile-forced-landscape .viewports-container {
  display: flex !important;
  height: 100% !important;
}

body.mobile-forced-landscape .viewport-grid.four-views {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: 1fr 1fr !important;
  height: 100% !important;
  gap: 2px !important;
}

body.mobile-forced-landscape .viewport-box {
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
}


/* ========================================================
   LANDSCAPE BUTTON PULSE & 60% FONT REDUCTION (EXCEPT FUNDS)
   ======================================================== */
@keyframes landscapePulseBlink {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 16px rgba(14, 165, 233, 0.9), inset 0 0 8px rgba(14, 165, 233, 0.4);
    background: rgba(14, 165, 233, 0.45) !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
  }
  50% {
    opacity: 0.35;
    transform: scale(0.96);
    box-shadow: 0 0 4px rgba(14, 165, 233, 0.2);
    background: rgba(14, 165, 233, 0.08) !important;
    border-color: rgba(14, 165, 233, 0.3) !important;
    color: #38bdf8 !important;
  }
}

@media (max-width: 768px) {
  .mobile-landscape-btn,
  #btnMobileLandscape {
    animation: landscapePulseBlink 1.4s infinite ease-in-out !important;
    display: inline-flex !important;
  }
}

@media (min-width: 769px) {
  .mobile-landscape-btn,
  #btnMobileLandscape {
    display: none !important;
  }
}

#btnMobileLandscape.no-blink,
.mobile-landscape-btn.no-blink {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  background: rgba(56, 189, 248, 0.22) !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
}

/* 4. Keep Orientation Cube below top toolbar so it never obscures buttons */
.orientation-cube-wrap {
  top: 48px !important;
  right: 12px !important;
  width: 26px !important;
  height: 26px !important;
  perspective: 140px !important;
  z-index: 25 !important;
  transform: scale(0.48) !important;
  transform-origin: top right !important;
  opacity: 0.88 !important;
}

.orientation-cube-wrap:hover {
  opacity: 1 !important;
  transform: scale(0.72) !important;
}

/* 3. Reduce fonts of all buttons and texts to 60%, EXCEPT FOR FUNDS */
.app-brand .brand-name {
  font-size: 0.78rem !important;
}

.app-brand .brand-badge {
  font-size: 0.50rem !important;
}

.action-btn:not(.fund-btn) {
  font-size: 0.65rem !important;
  padding: 3px 7px !important;
  height: 26px !important;
}

.fund-btn,
.fund-pill-btn,
#btnFundCbct {
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  padding: 5px 12px !important;
  background: rgba(244, 63, 94, 0.25) !important;
  color: #fb7185 !important;
  border: 1.5px solid rgba(244, 63, 94, 0.7) !important;
  box-shadow: 0 0 12px rgba(244, 63, 94, 0.35) !important;
}

.fda-caution-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fde68a;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.2px;
}

@media (max-width: 900px) {
  .fda-caution-pill { display: none; }
}

/* 5. Reduce Viewport Headings to 50% ('axial, coronal, cross-section, 3D') */
.viewport-header {
  height: 20px !important;
  min-height: 20px !important;
  padding: 1px 6px !important;
}

.vp-name {
  font-size: 0.50rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

.vp-slice-label {
  font-size: 0.48rem !important;
}

.vp-icon-btn,
.vp-chip-btn {
  font-size: 0.55rem !important;
  padding: 1px 4px !important;
}

/* Scale down Right Sidebar text to 60% */
.right-sidebar .sec-header h4 {
  font-size: 0.72rem !important;
}

.right-sidebar .control-row label,
.right-sidebar .slider-title-val label {
  font-size: 0.65rem !important;
}

.right-sidebar .slider-title-val span,
.right-sidebar .preset-btn {
  font-size: 0.60rem !important;
}

.density-title {
  font-size: 0.68rem !important;
}

.density-val {
  font-size: 0.95rem !important;
}

.density-desc {
  font-size: 0.62rem !important;
}

/* ================= IAN Vessels & Nerve Pulse Controls ================= */
.tool-btn.nerve-btn.active {
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  background: rgba(239, 68, 68, 0.15) !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.3) !important;
}

.tool-btn.nerve-pulse-btn.active {
  color: #f87171 !important;
  border-color: rgba(248, 113, 113, 0.5) !important;
  animation: pulse-heart 1.5s infinite ease-in-out;
}

@keyframes pulse-heart {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.08); opacity: 1; box-shadow: 0 0 14px rgba(239, 68, 68, 0.55); }
}

/* ================= 3D Slicer Segment Editor Brush Bar ================= */
.slicer-brush-bar {
  position: absolute;
  bottom: 18px;
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(10, 15, 30, 0.96);
  border: 1.5px solid #00e5ff;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 229, 255, 0.25), 0 0 20px rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(14px);
  z-index: 10000;
  max-width: 96%;
  box-sizing: border-box;
}

.slicer-brush-bar.hidden {
  display: none !important;
}

.brush-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.brush-row-main {
  justify-content: flex-start;
}

.brush-row-actions {
  justify-content: space-between;
}

.brush-actions-cluster {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.brush-drag-handle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: grab;
  padding: 3px 8px;
  border-radius: 14px;
  background: rgba(0, 229, 255, 0.08);
  border: 1px dashed rgba(0, 229, 255, 0.35);
  user-select: none;
  touch-action: none;
  transition: all 0.2s ease;
}

.brush-drag-handle:hover {
  background: rgba(0, 229, 255, 0.16);
  border-color: #00e5ff;
}

.brush-drag-handle:active, .slicer-brush-bar.is-dragging .brush-drag-handle {
  cursor: grabbing;
  background: rgba(0, 229, 255, 0.28);
}

.brush-drag-handle i.fa-grip-vertical {
  color: #00e5ff;
  font-size: 0.85rem;
  opacity: 0.8;
}

.brush-bar-left, .brush-bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brush-badge {
  font-size: 0.64rem;
  font-weight: 700;
  color: #00e5ff;
  font-family: 'JetBrains Mono', monospace;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.brush-mode-group {
  display: flex;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 2px;
}

.brush-btn {
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 0.61rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.brush-btn.active {
  background: #00e5ff;
  color: #020617;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
}

.brush-size-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  color: #00e5ff;
  background: rgba(0, 229, 255, 0.12);
  border: 1.5px solid rgba(0, 229, 255, 0.5);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.25);
  padding: 3px 10px;
  border-radius: 16px;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
}

#lblBrushSize {
  display: inline-block;
  min-width: 50px;
  font-variant-numeric: tabular-nums;
  text-align: left;
  font-weight: 800;
  color: #38bdf8;
}

.brush-slider {
  width: 70px;
  accent-color: #00e5ff;
  cursor: pointer;
}

.brush-size-slider {
  width: 125px !important;
  height: 6px !important;
  accent-color: #00e5ff !important;
  cursor: pointer;
}

/* Dedicated Paint Unit: Paint button connected directly to its size slider (word 'Brush' removed) */
.brush-paint-unit {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 229, 255, 0.08);
  border: 1.5px solid rgba(0, 229, 255, 0.35);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.15);
  padding: 2px 8px 2px 3px;
  border-radius: 16px;
  font-family: 'JetBrains Mono', monospace;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.brush-paint-unit:hover {
  border-color: rgba(0, 229, 255, 0.6);
  background: rgba(0, 229, 255, 0.12);
}

.brush-paint-unit.active {
  background: rgba(0, 229, 255, 0.18);
  border-color: #00e5ff;
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.45);
}

.brush-btn-paint {
  border: none;
  background: transparent;
  color: #38bdf8;
  font-size: 0.61rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.brush-btn-paint:hover {
  background: rgba(0, 229, 255, 0.25);
  color: #ffffff;
}

.brush-btn-paint.active {
  background: #00e5ff !important;
  color: #020617 !important;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.55);
}

.brush-paint-slider-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Dedicated Erase Unit: Separate Erase button connected directly to its size slider */
.brush-erase-unit {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(239, 68, 68, 0.08);
  border: 1.5px solid rgba(239, 68, 68, 0.35);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.15);
  padding: 2px 7px 2px 3px;
  border-radius: 14px;
  font-family: 'JetBrains Mono', monospace;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.brush-erase-unit:hover {
  border-color: rgba(239, 68, 68, 0.6);
  background: rgba(239, 68, 68, 0.12);
}

.brush-erase-unit.active {
  background: rgba(239, 68, 68, 0.18);
  border-color: #ef4444;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.45);
}

.brush-btn-erase {
  border: none;
  background: transparent;
  color: #f87171;
  font-size: 0.61rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.brush-btn-erase:hover {
  background: rgba(239, 68, 68, 0.25);
  color: #ffffff;
}

.brush-btn-erase.active {
  background: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.55);
}

.brush-erase-slider-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
}

#lblEraserSize {
  display: inline-block;
  min-width: 42px;
  font-variant-numeric: tabular-nums;
  text-align: left;
  font-weight: 800;
  font-size: 0.61rem;
  color: #f87171;
}

.erase-slider {
  accent-color: #ef4444 !important;
  cursor: pointer;
}

/* Live HU Pill inside Isolator */
.brush-live-hu-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(14, 165, 233, 0.18);
  border: 1px solid #00e5ff;
  padding: 2px 8px;
  border-radius: 14px;
  font-size: 0.60rem;
  font-family: 'JetBrains Mono', monospace;
  color: #a5f3fc;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.25);
  white-space: nowrap;
}

.brush-live-hu-pill .live-hu-title {
  color: #94a3b8;
  font-weight: 600;
}

.brush-live-hu-pill .live-hu-val {
  color: #38bdf8;
  font-weight: 800;
  min-width: 50px;
  text-align: right;
}

/* Quick Zoom Bar for Mobile & Pan/Zoom Tool */
.quick-zoom-bar {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(11, 16, 29, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid #00e5ff;
  box-shadow: 0 4px 18px rgba(0, 229, 255, 0.35);
  padding: 4px 10px;
  border-radius: 20px;
}

.quick-zoom-bar.hidden {
  display: none !important;
}

.zoom-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.zoom-btn:hover, .zoom-btn:active {
  background: #00e5ff;
  color: #0b101d;
  box-shadow: 0 0 10px #00e5ff;
}

.zoom-btn.reset-btn {
  width: auto;
  border-radius: 12px;
  padding: 0 8px;
  font-size: 0.68rem;
  font-weight: 700;
}

.zoom-val-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 800;
  color: #38bdf8;
  min-width: 44px;
  text-align: center;
}

/* Sidebar Primary Tools (Import CBCT & CBCT Window) */
.sidebar-primary-tools {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.sidebar-primary-tools .sidebar-tool-btn {
  height: 32px;
  font-size: 0.76rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
}

.sidebar-primary-tools .primary-btn {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  color: #fff;
  border: 1px solid #38bdf8;
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.3);
  padding: 0 12px;
}

.sidebar-primary-tools .dropdown-btn {
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}

.brush-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.70rem;
  color: #a5f3fc;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.brush-checkbox-label input {
  accent-color: #00e5ff;
  cursor: pointer;
}

.brush-threshold-group {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.25);
  padding: 3px 10px;
  border-radius: 16px;
}

.threshold-label {
  font-size: 0.70rem;
  font-family: 'JetBrains Mono', monospace;
  color: #38bdf8;
  font-weight: 700;
  white-space: nowrap;
  display: inline-block;
  min-width: 155px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.threshold-slider {
  width: 80px;
}

.threshold-slider.long-slider {
  width: 140px !important;
}

/* Unified Dual-Range Slider (Alone slider with two scrubbable buttons) */
.dual-range-slider-wrapper {
  position: relative;
  width: 175px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  margin: 0 4px;
}

.dual-range-track {
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 4px;
  pointer-events: none;
}

.dual-range-highlight {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  background: linear-gradient(90deg, #0284c7, #00e5ff);
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.55);
  pointer-events: none;
  z-index: 2;
}

.dual-range-thumb {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: none !important;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  border: none;
}

.dual-range-thumb::-webkit-slider-runnable-track {
  background: transparent;
  border: none;
}

.dual-range-thumb::-moz-range-track {
  background: transparent;
  border: none;
}

.dual-range-thumb::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  border: 2.5px solid #00e5ff;
  cursor: grab;
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.8), 0 2px 5px rgba(0, 0, 0, 0.6);
  transition: transform 0.1s ease, border-color 0.15s ease;
  margin-top: 2px;
}

.dual-range-thumb:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.25);
  border-color: #38bdf8;
  box-shadow: 0 0 14px rgba(56, 189, 248, 1);
}

.dual-range-thumb::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  border: 2.5px solid #00e5ff;
  cursor: grab;
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.8), 0 2px 5px rgba(0, 0, 0, 0.6);
  transition: transform 0.1s ease;
}

.dual-range-thumb:active::-moz-range-thumb {
  cursor: grabbing;
  transform: scale(1.25);
  border-color: #38bdf8;
}

/* ================= Virtual Multi-Implant Planning Bar ================= */
.implant-planner-bar {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(11, 16, 29, 0.94);
  backdrop-filter: blur(16px);
  border: 1.5px solid rgba(56, 189, 248, 0.45);
  border-radius: 18px;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.75), 0 0 24px rgba(56, 189, 248, 0.22);
  z-index: 95;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 95vw;
  width: 780px;
  transition: opacity 0.15s ease, box-shadow 0.15s ease;
  touch-action: none;
}

.implant-planner-bar.hidden {
  display: none !important;
}

.implant-bar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 6px;
  cursor: grab;
  user-select: none;
}

.implant-bar-header:active {
  cursor: grabbing;
}

.implant-bar-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.implant-badge-lock {
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid #10b981;
  color: #34d399;
  font-size: 0.65rem;
  padding: 3px 8px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
  outline: none;
}

.implant-badge-lock:hover {
  background: rgba(16, 185, 129, 0.35);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
  transform: translateY(-1px);
}

.implant-badge-lock.unlocked {
  background: rgba(245, 158, 11, 0.20);
  border-color: #f59e0b;
  color: #fbbf24;
}

.implant-badge-lock.unlocked:hover {
  background: rgba(245, 158, 11, 0.38);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.45);
  transform: translateY(-1px);
}

.implant-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.implant-tool-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #cbd5e1;
  font-size: 0.70rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}

.implant-tool-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.implant-add-btn {
  background: linear-gradient(135deg, #0284c7, #38bdf8);
  color: #fff;
  border: none;
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}

.implant-add-btn:hover {
  transform: scale(1.03);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.6);
}

.implant-guide-btn {
  background: linear-gradient(135deg, #059669, #10b981);
  color: #fff;
  border: none;
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.35);
}

.implant-guide-btn:hover {
  transform: scale(1.03);
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.65);
}

/* Real-time 3D Anatomical Nerve Clearance & Collision Status Badge */
.implant-nerve-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.70rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.3px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  user-select: none;
}

.implant-nerve-status-badge.safe {
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.55);
  color: #34d399;
}

.implant-nerve-status-badge.warning {
  background: rgba(245, 158, 11, 0.22);
  border: 1px solid rgba(245, 158, 11, 0.65);
  color: #fbbf24;
}

.implant-nerve-status-badge.clash {
  background: rgba(239, 68, 68, 0.35);
  border: 1.5px solid #ef4444;
  color: #ffffff;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.6);
  animation: nerveClashGlow 0.9s infinite alternate ease-in-out;
}

@keyframes nerveClashGlow {
  0% {
    box-shadow: 0 0 4px rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.30);
    transform: scale(1);
  }
  100% {
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.95), 0 0 28px rgba(239, 68, 68, 0.6);
    background: rgba(239, 68, 68, 0.65);
    transform: scale(1.05);
  }
}

/* Floating Window Prominent Close 'X' Button */
.implant-window-close-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #94a3b8;
  font-size: 0.95rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  margin-left: 6px;
  flex-shrink: 0;
  outline: none;
}

.implant-window-close-btn:hover {
  background: #ef4444;
  border-color: #ef4444;
  color: #ffffff;
  transform: scale(1.12);
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.65);
}

.implant-window-close-btn:active {
  transform: scale(0.92);
}

.implant-tabs-list {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 0;
  min-height: 28px;
}

.implant-tab-chip {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #94a3b8;
  padding: 3px 8px 3px 10px;
  border-radius: 12px;
  font-size: 0.70rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}

.implant-tab-chip:hover {
  background: rgba(56, 189, 248, 0.12);
  color: #fff;
}

.implant-tab-chip.active {
  background: rgba(56, 189, 248, 0.22);
  border-color: #38bdf8;
  color: #fff;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.35);
}

.implant-chip-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-size: 0.60rem;
  margin-left: 2px;
  transition: all 0.15s ease;
}

.implant-chip-del:hover {
  background: #ef4444;
  color: #fff;
  transform: scale(1.15);
}

.implant-controls-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.implant-control-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.implant-control-label {
  font-size: 0.70rem;
  color: #94a3b8;
  font-weight: 600;
  min-width: 82px;
}

.implant-wer-row {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 8px;
  padding: 4px 8px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.implant-wer-group {
  display: flex;
  align-items: center;
  gap: 5px;
}

.implant-wer-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  font-size: 0.70rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.implant-wer-btn:hover {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

.implant-wer-btn.active {
  background: linear-gradient(135deg, #d97706, #b45309);
  border-color: #f59e0b;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.45);
}

.wer-badge {
  background: rgba(0, 0, 0, 0.4);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
  padding: 1px 4px;
  border-radius: 3px;
  font-family: monospace;
  font-size: 0.65rem;
  font-weight: 800;
}

.implant-wer-btn.active .wer-badge {
  background: #ffffff;
  color: #b45309;
  border-color: #ffffff;
}

.wer-hint-badge {
  font-size: 0.64rem;
  color: #94a3b8;
  white-space: nowrap;
}

.wer-hint-badge b {
  color: #f59e0b;
}

.implant-pill-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.implant-pill-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #cbd5e1;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.implant-pill-btn:hover {
  background: rgba(56, 189, 248, 0.15);
  color: #fff;
}

.implant-pill-btn.active {
  background: #0284c7;
  border-color: #38bdf8;
  color: #fff;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.45);
}

.implant-custom-wrap {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 6px;
  padding: 1px 3px;
}

.implant-custom-input {
  width: 50px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
  font-family: monospace;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 4px;
  border-radius: 4px;
  text-align: center;
}

.implant-custom-input:focus {
  outline: none;
  border-color: #38bdf8;
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.4);
}

.implant-custom-btn {
  background: rgba(56, 189, 248, 0.2);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.implant-custom-btn:hover {
  background: #0284c7;
  color: #fff;
}

.implant-flip-btn {
  background: rgba(168, 85, 247, 0.16);
  border: 1px solid rgba(168, 85, 247, 0.4);
  color: #d8b4fe;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}

.implant-flip-btn:hover {
  background: rgba(168, 85, 247, 0.3);
  color: #fff;
}

.implant-flip-btn.active {
  background: #9333ea;
  border-color: #c084fc;
  color: #fff;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.55);
}

.implant-sliders-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
}

.implant-slider-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 110px;
}

.implant-slider-item label {
  font-size: 0.65rem;
  color: #94a3b8;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
}

.implant-slider-item label span {
  color: #38bdf8;
  font-weight: 700;
}

.implant-del-btn {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
  height: 28px;
}

.implant-del-btn:hover {
  background: #dc2626;
  color: #fff;
  border-color: #ef4444;
}

.brush-opacity-group {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 3px 10px;
  border-radius: 16px;
  font-size: 0.70rem;
  color: #cbd5e1;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
}

.opacity-slider {
  width: 65px;
}

.brush-color-group {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
}

.color-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  cursor: pointer;
  padding: 0;
  outline: none;
  transition: all 0.15s ease;
}

.color-dot:hover {
  transform: scale(1.25);
}

.color-dot.active {
  border-color: #ffffff;
  transform: scale(1.3);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
}

.brush-action-btn {
  border: none;
  border-radius: 14px;
  padding: 4px 9px;
  font-size: 0.61rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
}

.brush-action-btn.primary {
  background: linear-gradient(135deg, #00e5ff, #0284c7);
  color: #020617;
}

.brush-action-btn.primary:hover {
  filter: brightness(1.15);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.5);
}

.brush-action-btn.secondary {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.brush-action-btn.secondary:hover {
  background: rgba(239, 68, 68, 0.3);
}

.brush-action-btn.teal {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.brush-action-btn.teal:hover {
  background: rgba(16, 185, 129, 0.32);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.45);
}

.brush-action-btn.stl-export {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(16, 185, 129, 0.7) !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
  font-weight: 800 !important;
}

.brush-action-btn.stl-export:hover {
  filter: brightness(1.2);
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.65);
  transform: translateY(-1px);
}

.brush-action-btn.obj-export {
  background: rgba(14, 165, 233, 0.18) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(14, 165, 233, 0.5) !important;
  font-weight: 700 !important;
}

.brush-action-btn.obj-export:hover {
  background: rgba(14, 165, 233, 0.35) !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.45);
}

.iso-presets-cluster {
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(15, 23, 42, 0.65);
  padding: 2px 5px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.iso-presets-cluster .iso-preset-btn {
  padding: 3px 7px;
  font-size: 0.59rem;
  border-radius: 8px;
}

.brush-close-btn {
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 50%;
}

.brush-close-btn:hover {
  color: #f87171;
}

/* ================= 3D Slicer Style Tooth Isolator Studio Card ================= */
.tooth-isolator-card {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 440px;
  max-width: 92vw;
  max-height: 88vh;
  background: rgba(10, 14, 26, 0.96);
  border: 1.5px solid #00e5ff;
  border-radius: 12px;
  box-shadow: 0 15px 45px rgba(0, 229, 255, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(12px);
  z-index: 999999;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tooth-isolator-card.hidden {
  display: none !important;
}

.tooth-isolator-card.is-dragging {
  transition: none !important;
  user-select: none !important;
  box-shadow: 0 25px 65px rgba(0, 229, 255, 0.45), 0 0 0 2px #00e5ff !important;
}

.tooth-isolator-header {
  padding: 10px 14px;
  background: rgba(0, 229, 255, 0.12);
  border-bottom: 1px solid rgba(0, 229, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.tooth-isolator-card.is-dragging .tooth-isolator-header {
  cursor: grabbing !important;
}

.tooth-iso-drag-grip {
  cursor: grab;
}

.tooth-isolator-card.is-dragging .tooth-iso-drag-grip {
  cursor: grabbing !important;
}

.tooth-isolator-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #00e5ff;
  font-family: 'JetBrains Mono', monospace;
}

.iso-print-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid #10b981;
  color: #34d399;
  font-family: 'JetBrains Mono', monospace;
}

/* Anatomical Presets Bar on Floating Card */
.iso-presets-bar {
  display: flex;
  gap: 4px;
  padding: 6px 10px;
  background: rgba(15, 23, 42, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow-x: auto;
}

.iso-preset-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 6px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.iso-preset-btn:hover {
  color: #fff;
  background: rgba(0, 229, 255, 0.12);
  border-color: rgba(0, 229, 255, 0.3);
}

.iso-preset-btn.active {
  color: #00e5ff;
  background: rgba(0, 229, 255, 0.2);
  border-color: #00e5ff;
  font-weight: 700;
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.3);
}

.tooth-isolator-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tooth-view-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  align-items: center;
}

.tooth-micro-canvas-wrap {
  width: 160px;
  height: 160px;
  background: #020409;
  border: 1px solid #1e293b;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

#toothMicroCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

.tooth-details-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.72rem;
  color: #cbd5e1;
}

.tooth-stat-pill {
  display: flex;
  justify-content: space-between;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
}

.canal-highlight {
  color: #00e5ff;
  font-weight: 700;
}

.decay-highlight {
  color: #f97316;
  font-weight: 700;
}

/* Physical 3D Print Metrics Strip */
.iso-print-metrics-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 6px;
  padding: 6px 8px;
  font-family: 'JetBrains Mono', monospace;
}

.iso-metric-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.iso-metric-lbl {
  font-size: 0.60rem;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 3px;
}

.iso-metric-val {
  font-size: 0.74rem;
  font-weight: 700;
  color: #38bdf8;
}

.tooth-scrub-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.tooth-scrub-row label {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  color: #94a3b8;
}

.tooth-scrub-slider {
  width: 100%;
  height: 5px;
  accent-color: #00e5ff;
  cursor: pointer;
}

.tooth-actions-row {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#btnExportCardSTL {
  background: linear-gradient(135deg, #00e5ff 0%, #0284c7 100%) !important;
  color: #020617 !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.45) !important;
  padding: 6px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
}

#btnExportCardSTL:hover {
  background: linear-gradient(135deg, #38bdf8 0%, #0369a1 100%) !important;
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.65) !important;
}

/* ================= Smart Canal Tracers UI (Nerve & Pulp) ================= */
.nerve-tracer-bar {
  border: 1.5px solid #ff9800 !important;
  box-shadow: 0 10px 30px rgba(255, 152, 0, 0.28), 0 0 25px rgba(0, 0, 0, 0.88) !important;
}

.pulp-tracer-bar {
  border: 1.5px solid #f43f5e !important;
  box-shadow: 0 10px 30px rgba(244, 63, 94, 0.28), 0 0 25px rgba(0, 0, 0, 0.88) !important;
}

.tracer-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #f1f5f9;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.working-length-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(56, 189, 248, 0.16);
  border: 1px solid rgba(56, 189, 248, 0.45);
  border-radius: 12px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #38bdf8;
  font-family: 'JetBrains Mono', monospace;
  white-space: nowrap;
}

/* 3D Crop / Sculpt / Lasso Tool Styles */
.crop-toolbar {
  position: absolute;
  top: 34px;
  left: 50%;
  transform: translateX(-50%) scale(0.78);
  transform-origin: top center;
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 229, 255, 0.35);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 10px rgba(0, 229, 255, 0.15);
  user-select: none;
  animation: fadeInDown 0.2s ease-out;
}

.crop-toolbar.hidden {
  display: none !important;
}

.crop-toolbar-handle {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.58rem !important;
  font-weight: 700;
  color: #00e5ff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding-right: 5px;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.crop-btn-group, .crop-actions-group {
  display: flex;
  align-items: center;
  gap: 3px;
}

.crop-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 5px !important;
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  font-size: 0.56rem !important;
  font-weight: 600;
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.15s ease;
}

.crop-tool-btn:hover {
  background: rgba(51, 65, 85, 0.85);
  color: #fff;
  border-color: rgba(0, 229, 255, 0.4);
}

.crop-tool-btn.active {
  background: rgba(0, 229, 255, 0.22);
  border-color: #00e5ff;
  color: #00e5ff;
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.3);
}

.crop-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 5px !important;
  border-radius: 4px;
  font-size: 0.56rem !important;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}

.crop-action-btn.cut-inside {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(220, 38, 38, 0.4));
  border-color: rgba(239, 68, 68, 0.55);
  color: #fca5a5;
}

.crop-action-btn.cut-inside:hover {
  background: rgba(239, 68, 68, 0.4);
  color: #fff;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.35);
}

.crop-action-btn.cut-outside {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.4));
  border-color: rgba(16, 185, 129, 0.55);
  color: #6ee7b7;
}

.crop-action-btn.cut-outside:hover {
  background: rgba(16, 185, 129, 0.4);
  color: #fff;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.35);
}

.crop-action-btn.secondary {
  background: rgba(30, 41, 59, 0.7);
  border-color: rgba(255, 255, 255, 0.15);
  color: #94a3b8;
}

.crop-action-btn.secondary:hover {
  background: rgba(51, 65, 85, 0.85);
  color: #f1f5f9;
}

.crop-close-btn {
  position: static !important;
  margin-left: 6px !important;
  padding: 3px 8px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  background: rgba(239, 68, 68, 0.22) !important;
  border: 1px solid rgba(239, 68, 68, 0.55) !important;
  color: #fca5a5 !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all 0.18s ease !important;
}

.crop-close-btn:hover {
  color: #ffffff !important;
  background: rgba(239, 68, 68, 0.85) !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.6) !important;
  transform: scale(1.05);
}

.crop-canvas-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 45;
  cursor: crosshair !important;
  pointer-events: auto;
}

.crop-canvas-overlay.hidden {
  display: none !important;
  pointer-events: none !important;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Remote Link Pop-up Copy Button Glowing Pulse */
.btn-copy-glow {
  background: linear-gradient(135deg, #00e5ff 0%, #0284c7 100%) !important;
  color: #020617 !important;
  font-weight: 800 !important;
  border: 1px solid #38bdf8 !important;
  animation: copyGlowPulse 1.8s infinite ease-in-out !important;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.3px;
}

.btn-copy-glow:hover {
  transform: scale(1.06);
  box-shadow: 0 0 22px rgba(0, 229, 255, 0.95) !important;
}

@keyframes copyGlowPulse {
  0% {
    box-shadow: 0 0 5px 1px rgba(0, 229, 255, 0.5), 0 0 0 0 rgba(0, 229, 255, 0.7);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 16px 5px rgba(0, 229, 255, 0.9), 0 0 25px 8px rgba(14, 165, 233, 0.45);
    transform: scale(1.04);
  }
  100% {
    box-shadow: 0 0 5px 1px rgba(0, 229, 255, 0.5), 0 0 0 0 rgba(0, 229, 255, 0);
    transform: scale(1);
  }
}

/* Generic global .hidden rule to guarantee concealment across all views */
.hidden {
  display: none !important;
}

/* ================= Eye-Candy Remote Share Options (Both Colors Active at All Times) ================= */
.share-options-dual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 2px;
}

.share-option-pill {
  position: relative;
  border-radius: 10px;
  padding: 9px 12px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: left;
  overflow: hidden;
  user-select: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.share-option-pill .pill-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.share-option-pill .pill-icon-circle {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.90rem;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.share-option-pill .pill-text-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.share-option-pill .pill-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.share-option-pill .pill-main-title {
  font-size: 0.80rem;
  font-weight: 800;
  white-space: nowrap;
  color: #ffffff;
}

.share-option-pill .pill-tag {
  font-size: 0.58rem;
  font-family: monospace;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.share-option-pill .pill-sub-desc {
  font-size: 0.64rem;
  margin-top: 2px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
  text-overflow: ellipsis;
}

/* Option 1 Theme: Electric Cyber-Cyan (Always Vibrant & Active!) */
.share-option-pill.opt1-theme {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.42) 0%, rgba(0, 229, 255, 0.22) 100%) !important;
  border: 1.5px solid rgba(0, 229, 255, 0.55) !important;
  box-shadow: 0 4px 16px rgba(0, 229, 255, 0.18);
}
.share-option-pill.opt1-theme .opt1-icon {
  background: linear-gradient(135deg, #00e5ff 0%, #0284c7 100%);
  color: #020617;
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.85);
}
.share-option-pill.opt1-theme .opt1-tag {
  background: rgba(0, 229, 255, 0.22);
  color: #38bdf8;
  border: 1px solid rgba(0, 229, 255, 0.45);
}
.share-option-pill.opt1-theme .pill-sub-desc {
  color: #bae6fd;
}
.share-option-pill.opt1-theme:hover {
  transform: translateY(-2px);
  border-color: #00e5ff !important;
  box-shadow: 0 0 24px rgba(0, 229, 255, 0.6) !important;
}
/* Option 1 When Selected (Glowing Halo Ring & Elevation) */
.share-option-pill.opt1-theme.is-selected {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.65) 0%, rgba(0, 229, 255, 0.38) 100%) !important;
  border: 2px solid #00e5ff !important;
  box-shadow: 0 0 28px rgba(0, 229, 255, 0.7), inset 0 0 14px rgba(0, 229, 255, 0.3) !important;
  transform: translateY(-2px) scale(1.02);
}
.share-option-pill.opt1-theme.is-selected .opt1-tag {
  background: #00e5ff;
  color: #020617;
  border: 1px solid #ffffff;
  font-weight: 800;
}

/* Option 2 Theme: Emerald Mint Cloud (Always Vibrant & Active!) */
.share-option-pill.opt2-theme {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.42) 0%, rgba(16, 185, 129, 0.22) 100%) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.55) !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.18);
}
.share-option-pill.opt2-theme .opt2-icon {
  background: linear-gradient(135deg, #34d399 0%, #059669 100%);
  color: #020617;
  box-shadow: 0 0 14px rgba(52, 211, 153, 0.85);
}
.share-option-pill.opt2-theme .opt2-tag {
  background: rgba(16, 185, 129, 0.22);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.45);
}
.share-option-pill.opt2-theme .pill-sub-desc {
  color: #a7f3d0;
}
.share-option-pill.opt2-theme:hover {
  transform: translateY(-2px);
  border-color: #34d399 !important;
  box-shadow: 0 0 24px rgba(52, 211, 153, 0.6) !important;
}
/* Option 2 When Selected (Glowing Halo Ring & Elevation) */
.share-option-pill.opt2-theme.is-selected {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.65) 0%, rgba(16, 185, 129, 0.38) 100%) !important;
  border: 2px solid #34d399 !important;
  box-shadow: 0 0 28px rgba(52, 211, 153, 0.7), inset 0 0 14px rgba(52, 211, 153, 0.3) !important;
  transform: translateY(-2px) scale(1.02);
}
.share-option-pill.opt2-theme.is-selected .opt2-tag {
  background: #34d399;
  color: #020617;
  border: 1px solid #ffffff;
  font-weight: 800;
}

/* ================= Patient Study Box (Complete Design Elements from Screenshot) ================= */
.patient-vault-box {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.85));
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.patient-vault-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.patient-vault-desc {
  font-size: 0.72rem;
  color: #cbd5e1;
  line-height: 1.4;
}

.vault-badge-p2p {
  font-size: 0.68rem;
  color: #38bdf8;
  font-family: monospace;
  font-weight: 700;
  background: rgba(0, 229, 255, 0.15);
  padding: 2px 8px;
  border-radius: 5px;
  border: 1px solid rgba(0, 229, 255, 0.35);
}

.vault-badge-24h {
  font-size: 0.68rem;
  color: #34d399;
  font-family: monospace;
  font-weight: 700;
  background: rgba(16, 185, 129, 0.15);
  padding: 2px 8px;
  border-radius: 5px;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

/* Option 1 Live Ready Bar */
.p2p-live-ready-bar {
  background: rgba(0, 229, 255, 0.1);
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: 7px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Option 2 Eye-Candy Generate Button */
.btn-generate-24h-vault {
  background: linear-gradient(135deg, #0284c7 0%, #00e5ff 100%) !important;
  color: #020617 !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  padding: 9px 16px !important;
  border-radius: 8px !important;
  border: 1px solid #38bdf8 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.4) !important;
  transition: all 0.2s ease !important;
  letter-spacing: 0.2px;
}
.btn-generate-24h-vault:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 24px rgba(0, 229, 255, 0.65) !important;
}

/* Option 2 24h Live Ready Bar */
.p24-live-ready-bar {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.35);
  border-radius: 7px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.vault-state-section.hidden,
.p24-progress-container.hidden,
.p24-live-ready-bar.hidden,
.btn-generate-24h-vault.hidden {
  display: none !important;
}

/* ================= Floating Windows & Toolbars Uniform Compact UI (15% Reduced Scale) ================= */
.slicer-brush-bar, .nerve-tracer-bar, .pulp-tracer-bar, .crop-toolbar, .implant-planner-bar {
  font-size: 0.61rem !important; /* 15% reduction */
}

.slicer-brush-bar .brush-close-btn,
.nerve-tracer-bar .brush-close-btn,
.pulp-tracer-bar .brush-close-btn,
.crop-toolbar .crop-close-btn,
.implant-planner-bar .implant-close-btn {
  position: absolute !important;
  top: 5px !important;
  right: 7px !important;
  z-index: 100 !important;
  width: 19px !important;
  height: 19px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  border-radius: 4px !important;
  font-size: 0.72rem !important;
  transition: all 0.15s ease !important;
}

.slicer-brush-bar .brush-close-btn:hover,
.nerve-tracer-bar .brush-close-btn:hover,
.pulp-tracer-bar .brush-close-btn:hover,
.crop-toolbar .crop-close-btn:hover,
.implant-planner-bar .implant-close-btn:hover {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.2) !important;
}

.slicer-brush-bar button, .nerve-tracer-bar button, .pulp-tracer-bar button, .crop-toolbar button, .implant-planner-bar button {
  font-size: 0.60rem !important; /* 15% reduction */
  padding: 3px 8px !important;
}

.slicer-brush-bar label, .nerve-tracer-bar label, .pulp-tracer-bar label, .crop-toolbar label, .implant-planner-bar label {
  font-size: 0.58rem !important; /* 15% reduction */
}

.slicer-brush-bar span, .nerve-tracer-bar span, .pulp-tracer-bar span, .crop-toolbar span, .implant-planner-bar span {
  font-size: 0.60rem;
}

.slicer-brush-bar .brush-badge, .nerve-tracer-bar .brush-badge, .pulp-tracer-bar .brush-badge, .crop-toolbar-handle, .implant-bar-title {
  font-size: 0.65rem !important;
}

/* ================= Agricultural Harvest Screensaver Overlay ================= */
.crop-screensaver-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999999 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  cursor: pointer;
  background: #020617 url('lush-paddy-field.jpg') center/cover no-repeat !important;
  animation: screensaverFadeIn 0.15s ease-out;
}

.crop-screensaver-overlay.hidden {
  display: none !important;
}

.screensaver-close-btn {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 100;
  background: rgba(15, 23, 42, 0.90);
  border: 1.5px solid rgba(74, 222, 128, 0.6);
  color: #dcfce7;
  padding: 7px 18px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.screensaver-close-btn:hover {
  background: rgba(34, 197, 94, 0.9);
  color: #ffffff;
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.6);
}

.screensaver-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0.98;
  filter: hue-rotate(85deg) saturate(1.85) brightness(1.05);
  pointer-events: none;
}

.screensaver-video-tint {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(circle at center, rgba(2, 6, 23, 0.05) 0%, rgba(2, 6, 23, 0.35) 100%);
  pointer-events: none;
}

.screensaver-backdrop {
  display: none;
}

.screensaver-scene {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 900px;
  padding: 30px;
}

.screensaver-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.4);
  color: #fef08a;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 999px;
  box-shadow: 0 0 15px rgba(251, 191, 36, 0.2);
}

.screensaver-card-container {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.screensaver-card {
  width: 155px;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  padding: 14px 10px;
  text-align: center;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  cursor: pointer;
}

.screensaver-card:hover, .screensaver-card.active {
  transform: translateY(-8px) scale(1.04);
  border-color: #4ade80;
  box-shadow: 0 16px 35px rgba(74, 222, 128, 0.25);
}

.screensaver-img-wrap {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

.screensaver-big-icon {
  font-size: 1.8rem;
}

.screensaver-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: #f1f5f9;
  margin-bottom: 4px;
}

.screensaver-sub {
  font-size: 0.65rem;
  color: #94a3b8;
  line-height: 1.35;
}

.screensaver-ticker {
  font-size: 0.82rem;
  color: #94a3b8;
  font-style: italic;
  max-width: 600px;
  text-align: center;
  line-height: 1.5;
}

.popup-back-to-work {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  background: rgba(11, 16, 29, 0.96);
  border: 1.5px solid #38bdf8;
  color: #f0f9ff;
  font-size: 1.05rem;
  font-weight: 800;
  padding: 16px 28px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1000000;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 25px rgba(56, 189, 248, 0.4);
  backdrop-filter: blur(12px);
  animation: popInOut 1s ease forwards;
  pointer-events: none;
}

.popup-back-to-work.hidden {
  display: none !important;
}

@keyframes screensaverFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes popInOut {
  0% { opacity: 0; transform: translate(-50%, -40%) scale(0.9); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  75% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -55%) scale(0.95); }
}

/* PACS Multi-Series Indexer Styles */
.pacs-series-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  background: rgba(30, 41, 59, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pacs-series-card:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.45);
  transform: translateX(2px);
}

.pacs-series-card.active {
  background: rgba(14, 165, 233, 0.22);
  border-color: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.25);
}

.pacs-series-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pacs-series-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: #f1f5f9;
}

.pacs-series-meta {
  font-size: 0.62rem;
  color: #94a3b8;
}

.pacs-series-badge {
  font-size: 0.60rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(56, 189, 248, 0.18);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
  white-space: nowrap;
}

.pacs-series-card.active .pacs-series-badge {
  background: #38bdf8;
  color: #020617;
}

/* ================= Dental / Medical Mode Switcher ================= */
.clinical-mode-switch {
  display: inline-flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 2px 3px;
  gap: 2px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
  margin-left: 10px;
}

.mode-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 12px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.mode-pill-btn:hover {
  color: #f1f5f9;
}

.mode-pill-btn.active[data-mode="dental"] {
  background: linear-gradient(135deg, #00e5ff 0%, #0284c7 100%);
  color: #020617;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.45);
}

.mode-pill-btn.active[data-mode="medical"] {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: #ffffff;
  box-shadow: 0 0 14px rgba(59, 130, 246, 0.55);
}

.mode-pill-btn.active[data-mode="splat"] {
  background: linear-gradient(135deg, #ec4899 0%, #a855f7 100%);
  color: #ffffff;
  box-shadow: 0 0 16px rgba(236, 72, 153, 0.55);
}

/* ================= Mode 4: Gaussian Splat Photogrammetry Dedicated Workspace ================= */
.splat-workspace {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 6px 12px;
  gap: 8px;
  height: calc(100vh - 44px);
  max-height: calc(100vh - 44px);
  overflow: hidden !important;
  background: #090c15;
  box-sizing: border-box;
}

.splat-workspace.hidden {
  display: none !important;
}

.splat-workspace-banner {
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.75) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1px solid rgba(236, 72, 153, 0.3);
  padding: 6px 12px;
  border-radius: var(--radius-sm, 6px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.splat-banner-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.splat-banner-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(236, 72, 153, 0.2);
  border: 1px solid rgba(236, 72, 153, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f472b6;
  font-size: 1.1rem;
}

.splat-banner-left h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.2px;
}

.splat-banner-left p {
  margin: 2px 0 0 0;
  font-size: 0.72rem;
  color: #94a3b8;
}

.splat-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-splat-demo {
  background: linear-gradient(135deg, #ec4899 0%, #d946ef 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.74rem;
  padding: 5px 12px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 0 10px rgba(236, 72, 153, 0.4);
  transition: all 0.2s;
}

.btn-splat-demo:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 16px rgba(236, 72, 153, 0.6);
}

.btn-splat-export {
  background: rgba(14, 165, 233, 0.2);
  border: 1px solid #0284c7;
  color: #38bdf8;
  font-weight: 700;
  font-size: 0.74rem;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.btn-splat-export:hover {
  background: rgba(14, 165, 233, 0.35);
  color: #ffffff;
}

.btn-splat-action {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #cbd5e1;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-splat-action:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.splat-workspace-body {
  flex: 1;
  display: flex;
  gap: 10px;
  min-height: 0;
  height: 100%;
}

.splat-left-panel {
  width: 330px;
  min-width: 330px;
  max-width: 330px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

.splat-card {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.splat-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #f472b6;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.splat-card-desc {
  margin: 0 0 10px 0;
  font-size: 0.72rem;
  color: #94a3b8;
  line-height: 1.35;
}

.splat-dropzone {
  border: 1.5px dashed rgba(236, 72, 153, 0.45);
  background: rgba(236, 72, 153, 0.04);
  border-radius: 8px;
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.22s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.splat-dropzone:hover {
  border-color: #ec4899;
  background: rgba(236, 72, 153, 0.1);
}

.splat-drop-icon {
  font-size: 1.5rem;
  color: #ec4899;
}

.splat-drop-text strong {
  display: block;
  font-size: 0.76rem;
  color: #f8fafc;
}

.splat-drop-text span {
  font-size: 0.68rem;
  color: #94a3b8;
}

.btn-splat-browse {
  background: rgba(236, 72, 153, 0.2);
  border: 1px solid rgba(236, 72, 153, 0.5);
  color: #f472b6;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 5px;
  margin-top: 4px;
}

.splat-progress-box {
  margin-top: 10px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 6px;
  padding: 8px;
}

.splat-progress-header {
  font-size: 0.72rem;
  color: #38bdf8;
  font-weight: 600;
  margin-bottom: 5px;
}

.splat-progress-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.splat-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #ec4899, #38bdf8);
  transition: width 0.15s;
}

.splat-video-preview {
  width: 100%;
  max-height: 120px;
  object-fit: cover;
  border-radius: 6px;
  margin-top: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-splat-primary {
  width: 100%;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.76rem;
  padding: 8px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.35);
  transition: all 0.2s;
}

.btn-splat-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.55);
}

.splat-sub-box {
  margin-top: 10px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 8px;
}

.splat-sub-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.7rem;
  font-weight: 700;
  color: #f472b6;
}

.splat-badge-live {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid #10b981;
  color: #34d399;
  font-size: 0.6rem;
  padding: 1px 5px;
  border-radius: 4px;
}

.splat-input-group {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.splat-input {
  flex: 1;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  color: #e2e8f0;
  font-size: 0.7rem;
  padding: 4px 6px;
  font-family: monospace;
}

.btn-splat-send {
  background: rgba(236, 72, 153, 0.2);
  border: 1px solid rgba(236, 72, 153, 0.4);
  color: #f472b6;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}

.btn-splat-send:hover {
  background: rgba(236, 72, 153, 0.35);
  color: #ffffff;
}

.splat-sub-note {
  font-size: 0.64rem;
  color: #64748b;
  margin-top: 4px;
}

.splat-control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.72rem;
  color: #cbd5e1;
}

.btn-splat-toggle {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #94a3b8;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-splat-toggle.active {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  color: #38bdf8;
  font-weight: 700;
}

/* Right Viewport */
.splat-right-viewport {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #020617;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.splat-viewport-header {
  height: 34px;
  background: rgba(15, 23, 42, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.splat-vp-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #f8fafc;
}

.splat-vp-badge {
  background: rgba(236, 72, 153, 0.2);
  border: 1px solid rgba(236, 72, 153, 0.4);
  color: #f472b6;
  font-size: 0.62rem;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.splat-vp-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.splat-tool-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  font-size: 0.68rem;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
}

.splat-tool-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #f1f5f9;
}

.splat-tool-btn.active {
  background: rgba(0, 229, 255, 0.2);
  border-color: #00e5ff;
  color: #00e5ff;
}

.splat-canvas-container {
  flex: 1;
  position: relative;
  width: 100%;
  height: calc(100% - 34px);
  overflow: hidden;
}

.splat-3d-canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.splat-canvas-hud {
  position: absolute;
  bottom: 8px;
  left: 10px;
  display: flex;
  gap: 12px;
  font-size: 0.68rem;
  color: #64748b;
  background: rgba(15, 23, 42, 0.7);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.splat-canvas-hud strong {
  color: #cbd5e1;
}

.splat-empty-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(2, 6, 23, 0.88);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  z-index: 10;
  transition: opacity 0.3s;
}

.splat-empty-overlay.hidden {
  display: none !important;
}

.splat-empty-icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: rgba(236, 72, 153, 0.15);
  border: 1px solid rgba(236, 72, 153, 0.35);
  color: #ec4899;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.splat-empty-overlay h4 {
  margin: 0;
  font-size: 1.15rem;
  color: #f8fafc;
  font-weight: 800;
}

.splat-empty-overlay p {
  margin: 6px 0 0 0;
  font-size: 0.82rem;
  color: #94a3b8;
  max-width: 440px;
  line-height: 1.4;
}

/* Visibility toggling between Dental and Medical Modes */
body.mode-medical .dental-only-tool,
body.mode-medical .dental-only-section {
  display: none !important;
}

body.mode-dental .medical-only-tool,
body.mode-dental .medical-only-section {
  display: none !important;
}

/* Medical Mode Theme Accents */
body.mode-medical {
  --accent-cyan: #3b82f6;
  --accent-cyan-glow: rgba(59, 130, 246, 0.4);
}

body.mode-medical .app-header {
  background: linear-gradient(180deg, #0e172a 0%, #0a1120 100%);
  border-bottom-color: rgba(59, 130, 246, 0.3);
}

/* ================= Medical Radiology PACS Sidebar (Screenshot 1 Match) ================= */
.medical-pacs-sidebar {
  width: 250px;
  min-width: 250px;
  max-width: 250px;
  height: 100%;
  background: #0b0f19;
  border-right: 1px solid rgba(255, 255, 255, 0.09);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: 85;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.4);
}

.med-patient-card {
  padding: 12px 14px 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.6);
}

.med-patient-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(59, 130, 246, 0.4);
  color: #60a5fa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.med-patient-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.med-patient-name {
  font-size: 0.78rem;
  font-weight: 800;
  color: #f8fafc;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.med-study-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.64rem;
  color: #94a3b8;
  font-family: var(--font-mono);
}

.med-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.8);
}

.med-search-wrap {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(2, 6, 23, 0.4);
  color: #64748b;
}

.med-search-input {
  background: transparent;
  border: none;
  color: #f1f5f9;
  font-size: 0.72rem;
  width: 100%;
  outline: none;
}

.med-search-input::placeholder {
  color: #64748b;
}

.med-series-scroller {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.med-series-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 7px;
  background: rgba(30, 41, 59, 0.35);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.med-series-item:hover {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.3);
  transform: translateX(2px);
}

.med-series-item.active {
  background: rgba(37, 99, 235, 0.22);
  border-color: #3b82f6;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.25);
}

.med-series-radio {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.55rem;
  color: transparent;
  transition: all 0.2s;
}

.med-series-item.active .med-series-radio {
  border-color: #f97316;
  background: #f97316;
  color: #ffffff;
  box-shadow: 0 0 8px rgba(249, 115, 22, 0.6);
}

.med-series-thumb {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: rgba(2, 6, 23, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 0.72rem;
  flex-shrink: 0;
}

.med-series-item.active .med-series-thumb {
  border-color: rgba(59, 130, 246, 0.5);
  color: #60a5fa;
}

.med-series-title {
  flex: 1 1 auto;
  font-size: 0.72rem;
  font-weight: 700;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.med-series-item.active .med-series-title {
  color: #ffffff;
}

.med-series-count {
  font-size: 0.64rem;
  font-family: var(--font-mono);
  font-weight: 700;
  color: #94a3b8;
  background: rgba(15, 23, 42, 0.6);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.med-series-item.active .med-series-count {
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.35);
  background: rgba(59, 130, 246, 0.15);
}

.med-sidebar-footer {
  padding: 8px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: rgba(15, 23, 42, 0.5);
}

.med-foot-btn {
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 0.82rem;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.med-foot-btn:hover {
  color: #60a5fa;
  background: rgba(59, 130, 246, 0.12);
}

/* ================= 3D Torso Fullscreen Layout (Screenshot 1 Match) ================= */
#viewportGrid.fullscreen-3d {
  display: block !important;
  position: relative;
  width: 100%;
  height: 100%;
}

#viewportGrid.fullscreen-3d .viewport-box {
  display: none !important;
}

#viewportGrid.fullscreen-3d #vp3D {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  inset: 0;
  z-index: 50;
}

/* ================= Cross-Eye Stereoscopic 3D System ================= */
.stereo-active #threeContainer {
  cursor: none !important; /* Hide operating system 2D cursor */
}

.stereo-active #threeContainer * {
  cursor: none !important;
}

.stereo-active .three-view-gizmo,
.stereo-active #fpsCounter,
.stereo-active .crop-toolbar,
.stereo-active #dvrSliderRow,
.stereo-active .orientation-cube-wrap,
.stereo-active .app-header,
.stereo-active .left-toolbar,
.stereo-active .right-sidebar,
.stereo-active .bottom-shelf,
.stereo-active .workflow-stepper,
.stereo-active .mobile-rotate-prompt,
.stereo-active #vp3D > .viewport-header {
  display: none !important;
}

body.stereo-active {
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #000000 !important;
}

body.stereo-active .main-container {
  width: 100vw !important;
  height: 100vh !important;
  position: fixed !important;
  inset: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 99999 !important;
}

body.stereo-active #viewportGrid {
  width: 100vw !important;
  height: 100vh !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
}

body.stereo-active #vp3D {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  border: none !important;
  border-radius: 0 !important;
}

body.stereo-active #threeContainer {
  width: 100vw !important;
  height: 100vh !important;
}

.stereo-hud-layer {
  position: absolute;
  inset: 0;
  display: flex;
  pointer-events: none;
  z-index: 9999;
}

.stereo-hud-layer.hidden {
  display: none !important;
}

.stereo-half-hud {
  flex: 1;
  position: relative;
  height: 100%;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  box-sizing: border-box;
}

.stereo-center-divider {
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, rgba(236,72,153,0.1), rgba(236,72,153,0.8) 50%, rgba(236,72,153,0.1));
  box-shadow: 0 0 10px rgba(236,72,153,0.5);
  flex-shrink: 0;
  pointer-events: none;
  z-index: 10000;
}

/* Floating Stereo Window Mask - clean, unobtrusive aperture that never obscures tools or model */
.stereo-floating-window-mask {
  display: none; /* Removed heavy overlays that were obscuring 3D tools */
}

.stereo-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}

.btn-stereo-back {
  pointer-events: auto !important;
  cursor: pointer !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(239, 68, 68, 0.25);
  border: 1.5px solid rgba(239, 68, 68, 0.6);
  border-radius: 8px;
  color: #fca5a5;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 7px 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-stereo-back:hover {
  background: rgba(239, 68, 68, 0.45);
  color: #fff;
  border-color: #ef4444;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.35);
}

.stereo-patient-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  background: rgba(11, 16, 29, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 8px;
  padding: 4px 10px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.stereo-mode-tag {
  font-size: 0.62rem;
  font-weight: 800;
  color: #ec4899;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family: var(--font-mono);
}

.stereo-pt-name {
  font-size: 0.82rem;
  color: #ffffff;
  font-weight: 700;
}

.stereo-plan-summary {
  font-size: 0.68rem;
  color: #38bdf8;
  font-family: var(--font-mono);
}

/* 3D Anatomical Orientation Cube in each stereo half */
.stereo-orientation-cube-slot {
  position: absolute;
  top: 68px;
  right: 20px;
  width: 60px;
  height: 60px;
  pointer-events: none;
}

.stereo-cube-wrap {
  width: 100%;
  height: 100%;
  perspective: 400px;
}

.stereo-hud-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  gap: 5px;
  margin-bottom: 24px;
  pointer-events: none;
  box-sizing: border-box;
}

.stereo-fps-pill {
  font-size: 0.68rem;
  color: #4ade80;
  font-family: var(--font-mono);
  background: rgba(0,0,0,0.5);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(74, 222, 128, 0.3);
}

.stereo-fusion-hint {
  font-size: 0.72rem;
  color: #e2e8f0;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(236, 72, 153, 0.4);
  padding: 4px 12px;
  border-radius: 20px;
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.25);
}

/* Dual 3D Reticle Mouse Pointer with Crosshair */
.stereo-pointer {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 100000;
  display: none;
}

.stereo-active .stereo-pointer {
  display: block;
}

.stereo-pointer-ring {
  position: absolute;
  inset: 4px;
  border: 2px solid #ef4444;
  border-radius: 50%;
  box-shadow: 0 0 8px #ef4444, inset 0 0 4px #ef4444;
}

.stereo-pointer-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%);
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 6px #ffffff;
}

.stereo-pointer-crosshair {
  position: absolute;
  inset: 0;
}

.stereo-pointer-crosshair::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1.5px;
  background: #ef4444;
  box-shadow: 0 0 4px #ef4444;
}

.stereo-pointer-crosshair::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: #ef4444;
  box-shadow: 0 0 4px #ef4444;
}

/* Dual Viewport 3D Floating Toolbars (Fuses into single floating 3D bar in room depth) */
.stereo-viewport-toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  background: rgba(11, 16, 29, 0.92);
  border: 1px solid rgba(236, 72, 153, 0.45);
  border-radius: 9px;
  padding: 3px 8px;
  max-width: calc(100% - 16px);
  box-sizing: border-box;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.65), 0 0 14px rgba(236, 72, 153, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: auto !important;
  margin: 0;
}

.stereo-render-mode-wrap {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 2px;
}

.stereo-mini-btn {
  cursor: pointer !important;
  padding: 2px 7px;
  font-size: 0.64rem;
  font-weight: 700;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: #94a3b8;
  transition: all 0.15s ease;
}

.stereo-mini-btn.active {
  background: #00e5ff;
  color: #020617;
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
}

.stereo-select-dvr,
.stereo-select-mesh {
  cursor: pointer !important;
  background: #0f172a;
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 6px;
  font-size: 0.64rem;
  padding: 2px 5px;
  font-weight: 600;
  max-width: 140px;
  outline: none;
}

.stereo-select-mesh {
  color: #c084fc;
  border-color: rgba(192, 132, 252, 0.4);
}

.stereo-master-btn {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(168, 85, 247, 0.25)) !important;
  border-color: rgba(236, 72, 153, 0.5) !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.3) !important;
  border-radius: 6px !important;
}

.stereo-master-btn:hover {
  background: linear-gradient(135deg, #db2777, #ec4899) !important;
  border-color: #f472b6 !important;
  box-shadow: 0 0 16px rgba(236, 72, 153, 0.6) !important;
}

.stereo-mode-toggle-pill {
  cursor: pointer !important;
  pointer-events: auto !important;
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.85), rgba(219, 39, 119, 0.85));
  border: 1px solid #f472b6;
  border-radius: 20px;
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 6px 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px rgba(236, 72, 153, 0.45);
  letter-spacing: 0.02em;
  user-select: none;
}

.stereo-mode-toggle-pill:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 6px 20px rgba(236, 72, 153, 0.6);
}

.stereo-mode-toggle-pill.ar-mode {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.9), rgba(56, 189, 248, 0.9));
  border-color: #7dd3fc;
  color: #030712;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.5);
}

.stereo-mode-toggle-pill.ar-mode:hover {
  box-shadow: 0 6px 20px rgba(56, 189, 248, 0.7);
}

.stereo-tool-pill {
  cursor: pointer !important;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  color: #cbd5e1;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 7px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.stereo-tool-pill:hover {
  background: rgba(236, 72, 153, 0.25);
  border-color: #ec4899;
  color: #fff;
}

.stereo-tool-pill.active {
  background: linear-gradient(135deg, #db2777, #ec4899);
  border-color: #f472b6;
  color: #fff;
  box-shadow: 0 0 10px rgba(236, 72, 153, 0.5);
}

.stereo-tool-pill.exit-pill {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
  color: #fca5a5;
}

.stereo-tool-pill.exit-pill:hover {
  background: rgba(239, 68, 68, 0.4);
  color: #fff;
}

.stereo-ipd-control {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.64rem;
  color: #94a3b8;
  font-family: var(--font-mono);
  padding: 0 2px;
}

.stereo-ipd-control input[type="range"] {
  width: 50px;
  height: 4px;
  accent-color: #ec4899;
  cursor: pointer;
}

/* Stereo DVR Cutoff/Exposure Control */
.stereo-dvr-cutoff-control {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.64rem;
  color: #38bdf8;
  font-family: var(--font-mono);
  padding: 0 4px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 6px;
}

.stereo-dvr-cutoff-control input[type="range"] {
  width: 55px;
  height: 4px;
  accent-color: #38bdf8;
  cursor: pointer;
}

.stereo-cutoff-val {
  font-weight: 700;
  min-width: 38px;
  text-align: right;
  color: #38bdf8;
}

/* Compact 3D Stereo Implant Planning Action Bar */
.stereo-implant-action-bar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  background: rgba(11, 16, 29, 0.95);
  border: 1px solid rgba(56, 189, 248, 0.5);
  border-radius: 8px;
  padding: 3px 6px;
  max-width: calc(100% - 16px);
  box-sizing: border-box;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7), 0 0 12px rgba(56, 189, 248, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: auto !important;
  margin: 0;
  animation: stereoFadeIn 0.2s ease-out;
}

.stereo-implant-action-bar.hidden {
  display: none !important;
}

@keyframes stereoFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.stereo-imp-btn {
  cursor: pointer !important;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 5px;
  color: #cbd5e1;
  font-size: 0.64rem;
  font-weight: 700;
  padding: 2.5px 6px;
  display: inline-flex;
  align-items: center;
  gap: 3.5px;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.stereo-imp-btn:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  color: #fff;
}

.stereo-imp-btn.add-btn {
  background: rgba(16, 185, 129, 0.2);
  border-color: #10b981;
  color: #34d399;
}

.stereo-imp-btn.add-btn:hover {
  background: rgba(16, 185, 129, 0.4);
  color: #fff;
}

.stereo-imp-btn.wer-btn {
  padding: 2px 5px;
}

.stereo-imp-btn.wer-btn.active {
  background: #38bdf8;
  border-color: #7dd3fc;
  color: #020617;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
}

.stereo-wer-tag {
  background: rgba(0, 0, 0, 0.35);
  color: inherit;
  font-family: monospace;
  font-size: 0.58rem;
  font-weight: 800;
  padding: 1px 3.5px;
  border-radius: 3px;
}

.stereo-imp-btn.safety-btn {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.35);
  color: #6ee7b7;
}

.stereo-imp-btn.safety-btn.active {
  background: linear-gradient(135deg, #059669, #10b981);
  border-color: #34d399;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.stereo-imp-btn.del-btn {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #f87171;
}

.stereo-imp-btn.del-btn:hover {
  background: #ef4444;
  color: #fff;
}

.stereo-imp-separator {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.16);
  margin: 0 1px;
}

.stereo-imp-tilt-wrap {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 1px;
}

.stereo-imp-mini-label {
  font-size: 0.60rem;
  color: #94a3b8;
  font-weight: 600;
}

.stereo-nudge-btn {
  cursor: pointer !important;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  color: #38bdf8;
  padding: 2px 5px;
  font-size: 0.65rem;
  transition: all 0.15s ease;
}

.stereo-nudge-btn:hover {
  background: #38bdf8;
  color: #020617;
}

.stereo-hud-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto !important;
  cursor: pointer !important;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #94a3b8;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  font-size: 0.75rem;
  transition: all 0.2s ease;
}

.stereo-hud-toggle-btn:hover {
  background: rgba(56, 189, 248, 0.25);
  color: #38bdf8;
  border-color: #38bdf8;
}

/* Minimized HUD state (Unobstructed 3D Jaw mode) */
.stereo-hud-layer.stereo-hud-minimized .stereo-patient-badge,
.stereo-hud-layer.stereo-hud-minimized .stereo-orientation-cube-slot,
.stereo-hud-layer.stereo-hud-minimized .stereo-hud-footer {
  display: none !important;
}

.stereo-hud-layer.stereo-hud-minimized .stereo-half-hud {
  justify-content: flex-start !important;
}

/* ================= Mobile & Small Screen Optimizations for Split Screen 3D Jaw ================= */
/* Note: Mobile stereoscopic split screen is viewed in LANDSCAPE, where height is <= 500px and width is 800-930px.
   Therefore we MUST trigger on (max-height: 520px) as well as (max-width: 960px) so mobile phones never hit desktop styling! */
@media (max-width: 960px), (max-height: 520px) {
  /* 1. Stereo Split Screen Overlays & Toolbar Clutter Reduction */
  .stereo-half-hud {
    padding: 4px 6px !important;
  }

  .stereo-top-bar {
    gap: 3px !important;
    align-items: center !important;
  }

  .btn-stereo-back {
    padding: 3px 6px !important;
    font-size: 0.65rem !important;
    border-radius: 6px !important;
    background: rgba(239, 68, 68, 0.35) !important;
  }

  .btn-stereo-back span {
    display: none !important; /* Hide 'Exit 3D [Esc]' text on mobile, keep only clean arrow */
  }

  .stereo-hud-toggle-btn {
    width: 24px !important;
    height: 24px !important;
    font-size: 0.68rem !important;
    border-radius: 5px !important;
  }

  /* In mobile stereoscopic cross-eye/SBS, hide duplicate patient badge on right eye to keep 3D view clean */
  .stereo-hud-right .stereo-patient-badge {
    display: none !important;
  }

  /* Compact patient card on left eye so 3D bone is visible */
  .stereo-patient-badge {
    padding: 2px 5px !important;
    max-width: 120px !important;
    background: rgba(11, 16, 29, 0.7) !important;
    border-color: rgba(56, 189, 248, 0.25) !important;
  }

  .stereo-pt-name {
    font-size: 0.62rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .stereo-plan-summary {
    display: none !important; /* Remove verbose subtitle text */
  }

  .stereo-mode-tag {
    font-size: 0.48rem !important;
  }

  /* Hide right eye orientation cube to prevent obscuring ramus/condyle; keep small cube only on left */
  .stereo-hud-right .stereo-orientation-cube-slot {
    display: none !important;
  }

  .stereo-orientation-cube-slot {
    top: 36px !important;
    right: 4px !important;
    width: 28px !important;
    height: 28px !important;
    transform: scale(0.5) !important;
    transform-origin: top right !important;
    opacity: 0.6 !important;
  }

  /* Reticle mouse pointer: scale down on touch devices */
  .stereo-pointer {
    width: 20px !important;
    height: 20px !important;
    opacity: 0.6 !important;
  }

  /* Stereo Footer Toolbar - Compress into minimal translucent dock right at bottom */
  .stereo-hud-footer {
    gap: 2px !important;
    margin-bottom: 2px !important;
  }

  .stereo-viewport-toolbar {
    padding: 2px 4px !important;
    gap: 3px !important;
    max-width: 98% !important;
    background: rgba(11, 16, 29, 0.8) !important;
    border-color: rgba(236, 72, 153, 0.3) !important;
    border-radius: 6px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Hide verbose text inside split buttons so icons stay clean & uncluttered */
  .stereo-tool-pill span,
  .stereo-mode-toggle-pill span,
  .stereo-render-mode-wrap button span,
  .stereo-ipd-control span,
  .stereo-dvr-cutoff-control span:not(.stereo-cutoff-val),
  .stereo-tool-pill.stereo-implant-toggle-btn span {
    display: none !important;
  }

  .stereo-tool-pill {
    padding: 2px 5px !important;
    font-size: 0.60rem !important;
    border-radius: 5px !important;
  }

  .stereo-mode-toggle-pill {
    padding: 2px 6px !important;
    font-size: 0.60rem !important;
    border-radius: 5px !important;
  }

  .stereo-mini-btn {
    padding: 1px 5px !important;
    font-size: 0.58rem !important;
  }

  .stereo-select-mesh,
  .stereo-select-dvr {
    max-width: 72px !important;
    font-size: 0.55rem !important;
    padding: 1px 3px !important;
    border-radius: 4px !important;
  }

  .stereo-ipd-control {
    gap: 2px !important;
  }

  .stereo-ipd-control input[type="range"] {
    width: 32px !important;
    height: 4px !important;
  }

  /* Compact Stereo Implant Action Bar on mobile */
  .stereo-implant-action-bar {
    padding: 2px 3px !important;
    gap: 2px !important;
    background: rgba(11, 16, 29, 0.88) !important;
    border-radius: 6px !important;
    max-width: 98% !important;
    overflow-x: auto !important;
  }

  .stereo-imp-btn {
    padding: 2px 3px !important;
    font-size: 0.55rem !important;
    border-radius: 4px !important;
  }

  .stereo-imp-btn span:not(.stereo-wer-tag) {
    display: none !important; /* Keep only WER tag letters / icons */
  }

  .stereo-imp-tilt-wrap {
    gap: 1px !important;
  }

  .stereo-imp-mini-label {
    display: none !important;
  }

  .stereo-nudge-btn {
    padding: 1px 4px !important;
    font-size: 0.58rem !important;
  }

  /* Completely remove large fusion instructions banner on mobile */
  .stereo-fusion-hint {
    display: none !important;
  }

  /* 2. Standard 3D Viewport Toolbar Header Text Pruning (Avoid covering 3D jaw in standard mobile view) */
  #vp3D .vp-controls .vp-chip-btn span {
    display: none !important; /* Hide 'Crop', 'Crop 🍃', 'Grid', 'Stereo' text, show only sleek micro-icons */
  }

  #wrapPresets3D #currentPresetLabel3D {
    max-width: 65px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: inline-block !important;
  }

  #vp3D .render-mode-btn {
    padding: 2px 4px !important;
    font-size: 0.58rem !important;
  }

  #vp3D .viewport-header {
    height: auto !important;
    min-height: 24px !important;
  }

  /* 3. Virtual Multi-Implant Planning Floating Bar & Sub-Buttons on Mobile */
  .implant-planner-bar {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 48vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 6px 10px !important;
    bottom: 8px !important;
    border-radius: 12px !important;
    gap: 5px !important;
  }

  .implant-bar-header {
    gap: 6px !important;
    padding-bottom: 4px !important;
    flex-wrap: wrap !important;
  }

  .implant-bar-title {
    font-size: 0.70rem !important;
    gap: 5px !important;
  }

  .implant-bar-title > span {
    font-size: 0.68rem !important;
  }

  .implant-badge-lock {
    font-size: 0.58rem !important;
    padding: 2px 6px !important;
    border-radius: 8px !important;
  }

  .implant-header-actions {
    gap: 4px !important;
  }

  .implant-nerve-status-badge {
    font-size: 0.58rem !important;
    padding: 2px 6px !important;
  }

  .implant-tool-btn {
    font-size: 0.60rem !important;
    padding: 3px 6px !important;
    border-radius: 8px !important;
  }

  .implant-add-btn {
    font-size: 0.62rem !important;
    padding: 3px 8px !important;
    border-radius: 8px !important;
  }

  .implant-window-close-btn {
    width: 22px !important;
    height: 22px !important;
    font-size: 0.75rem !important;
    margin-left: 2px !important;
  }

  /* Implant Tabs list */
  .implant-tabs-list {
    min-height: 22px !important;
    gap: 4px !important;
    padding: 1px 0 !important;
  }

  .implant-tab-chip {
    font-size: 0.60rem !important;
    padding: 2px 6px 2px 8px !important;
    border-radius: 8px !important;
  }

  /* Sub-Buttons: WER 3D Mode, Diameter Pills, Length Pills */
  .implant-controls-grid {
    gap: 4px !important;
  }

  .implant-control-row {
    gap: 5px !important;
  }

  .implant-control-label {
    font-size: 0.60rem !important;
    min-width: 62px !important;
  }

  .implant-wer-row {
    padding: 3px 6px !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
  }

  .implant-wer-group {
    gap: 3px !important;
  }

  .implant-wer-btn {
    font-size: 0.58rem !important;
    padding: 2px 6px !important;
    border-radius: 5px !important;
  }

  .wer-badge {
    font-size: 0.54rem !important;
    padding: 1px 3px !important;
  }

  .wer-hint-badge {
    font-size: 0.55rem !important;
  }

  .implant-pill-group {
    gap: 3px !important;
  }

  .implant-pill-btn {
    font-size: 0.58rem !important;
    padding: 2px 5px !important;
    border-radius: 5px !important;
  }

  .implant-custom-wrap {
    padding: 1px 2px !important;
  }

  .implant-custom-input {
    width: 38px !important;
    font-size: 0.58rem !important;
    padding: 1px 2px !important;
  }

  .implant-custom-btn {
    font-size: 0.55rem !important;
    padding: 1px 4px !important;
  }

  /* Row 2: Sliders and Flip Jaw button */
  .implant-sliders-row {
    padding: 3px 6px !important;
    gap: 6px !important;
  }

  .implant-flip-btn {
    font-size: 0.58rem !important;
    padding: 2px 6px !important;
    border-radius: 5px !important;
  }

  .implant-slider-item {
    min-width: 80px !important;
    gap: 1px !important;
  }

  .implant-slider-item label {
    font-size: 0.56rem !important;
  }

  .implant-slider-item input[type="range"] {
    height: 4px !important;
  }

  .implant-del-btn {
    font-size: 0.58rem !important;
    padding: 2px 6px !important;
    height: 22px !important;
    border-radius: 5px !important;
  }

  /* Safety Zone Row */
  #toggleSafetyCover + .toggle-slider-track {
    width: 28px !important;
    height: 15px !important;
  }
}


/* -------------------------------------------------------------
   Oral Lesion 3D Studio & Gaussian Splatting Styling
   ------------------------------------------------------------- */
.lesion-splat-header-btn {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(219, 39, 119, 0.3)) !important;
  border: 1px solid rgba(244, 114, 182, 0.5) !important;
  color: #f472b6 !important;
  position: relative;
  font-weight: 700 !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  padding: 5px 11px !important;
  font-size: 0.76rem !important;
  transition: all 0.25s ease;
}

.lesion-splat-header-btn:hover {
  background: linear-gradient(135deg, #db2777, #ec4899) !important;
  border-color: #fbcfe8 !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(236, 72, 153, 0.6) !important;
  transform: translateY(-1px);
}

.lesion-badge-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f43f5e;
  box-shadow: 0 0 8px #f43f5e;
  animation: pulseLesion 2s infinite;
}

@keyframes pulseLesion {
  0% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 12px #ec4899; }
  100% { transform: scale(0.9); opacity: 0.8; }
}

.lesion-splat-modal-card {
  max-width: 580px;
  width: 90vw;
  background: #0b1120;
  border: 1px solid rgba(244, 114, 182, 0.4);
  border-radius: 14px;
  padding: 20px 24px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8), 0 0 30px rgba(236, 72, 153, 0.2);
}

.lesion-modal-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(236, 72, 153, 0.15);
  border: 1px solid rgba(236, 72, 153, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lesion-tag-pill {
  font-size: 0.62rem;
  background: rgba(236, 72, 153, 0.2);
  color: #f472b6;
  border: 1px solid rgba(236, 72, 153, 0.5);
  border-radius: 20px;
  padding: 2px 7px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.lesion-dropzone {
  border: 2px dashed rgba(236, 72, 153, 0.45);
  background: rgba(15, 23, 42, 0.7);
  border-radius: 12px;
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lesion-dropzone:hover,
.lesion-dropzone.drag-active {
  border-color: #ec4899;
  background: rgba(236, 72, 153, 0.1);
  box-shadow: inset 0 0 20px rgba(236, 72, 153, 0.15);
}

.lesion-drop-icon {
  font-size: 2.2rem;
  color: #f472b6;
  margin-bottom: 8px;
}

.lesion-drop-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #f8fafc;
  margin-bottom: 4px;
}

.lesion-drop-sub {
  font-size: 0.74rem;
  color: #94a3b8;
}

.lesion-step-panel {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 10px;
  padding: 12px 14px;
}

.lesion-progress-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.lesion-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8, #ec4899);
  transition: width 0.2s ease;
}

.lesion-pipeline-box {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 12px 14px;
}

.lesion-pipeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lesion-online-badge {
  font-size: 0.62rem;
  color: #34d399;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  border-radius: 12px;
  padding: 1px 6px;
  font-weight: 700;
}

.lesion-url-input {
  flex: 1;
  background: #020617;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  color: #cbd5e1;
  font-family: monospace;
  font-size: 0.72rem;
  padding: 6px 10px;
  outline: none;
}

.lesion-url-input:focus {
  border-color: #ec4899;
  box-shadow: 0 0 8px rgba(236, 72, 153, 0.3);
}

.lesion-demo-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(236, 72, 153, 0.08);
  border: 1px solid rgba(236, 72, 153, 0.25);
  border-radius: 10px;
  padding: 10px 14px;
}

/* ==========================================================================
   CBCT Voice Dictation Proforma & Medical Reporting Drawer
   ========================================================================== */

.cbct-proforma-drawer {
  position: fixed;
  top: 50px;
  right: -460px;
  width: 440px;
  height: calc(100vh - 54px);
  background: rgba(15, 21, 35, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid rgba(192, 132, 252, 0.35);
  box-shadow: -10px 0 35px rgba(0, 0, 0, 0.65);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  transition: right 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  color: #f1f5f9;
  font-family: var(--font-sans);
}

.cbct-proforma-drawer.open {
  right: 0;
}

/* Header */
.proforma-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: rgba(20, 28, 46, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.proforma-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.proforma-icon-badge {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, #a855f7, #6366f1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.95rem;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.35);
}

.proforma-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: #f8fafc;
  font-family: var(--font-brand);
  letter-spacing: -0.01em;
}

.proforma-subtitle {
  font-size: 0.68rem;
  color: #94a3b8;
  display: block;
}

.proforma-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.proforma-mic-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.45);
  color: #c084fc;
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.proforma-mic-btn:hover {
  background: rgba(168, 85, 247, 0.3);
  border-color: #c084fc;
  color: #ffffff;
}

.proforma-mic-btn.listening {
  background: #ef4444;
  border-color: #f87171;
  color: #ffffff;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.6);
  animation: pulseMic 1.2s infinite ease-in-out;
}

@keyframes pulseMic {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.85; }
}

.proforma-close-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 1.1rem;
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}

.proforma-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* Metadata Strip */
.proforma-meta-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(11, 15, 26, 0.8);
  padding: 6px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.68rem;
  color: #cbd5e1;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.meta-item i {
  color: #38bdf8;
  font-size: 0.7rem;
}

/* Language Selector Bar */
.proforma-lang-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: rgba(15, 23, 42, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  gap: 8px;
}

.lang-bar-left {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.70rem;
  color: #94a3b8;
  font-weight: 600;
  white-space: nowrap;
}

.proforma-lang-select {
  background: rgba(30, 41, 59, 0.95);
  border: 1px solid rgba(168, 85, 247, 0.45);
  color: #f1f5f9;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
  max-width: 220px;
}

.proforma-lang-select:hover,
.proforma-lang-select:focus {
  border-color: #a855f7;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
}

.proforma-lang-select optgroup {
  background: #0f172a;
  color: #38bdf8;
  font-weight: 700;
}

.proforma-lang-select option {
  background: #1e293b;
  color: #f1f5f9;
  font-weight: 500;
}

.mic-hud-lang-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(56, 189, 248, 0.2);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  font-size: 0.65rem;
  font-weight: 700;
  margin-left: 6px;
}

.proforma-output-mode-group {
  display: inline-flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.85);
  padding: 2px;
  border-radius: 14px;
  border: 1px solid rgba(168, 85, 247, 0.3);
  margin-left: auto;
}

.proforma-output-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 0.64rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.proforma-output-btn:hover {
  color: #f1f5f9;
}

.proforma-output-btn.active {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #ffffff;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.5);
}

.proforma-action-btn.translate-btn {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}

.proforma-action-btn.translate-btn:hover {
  background: rgba(56, 189, 248, 0.3);
  color: #ffffff;
}

/* Voice Bar */
.proforma-voice-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  background: rgba(168, 85, 247, 0.08);
  border-bottom: 1px solid rgba(168, 85, 247, 0.2);
}

.voice-indicator-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 12px;
}

.voice-indicator-wave span {
  width: 2px;
  height: 4px;
  background: #a855f7;
  border-radius: 2px;
  transition: height 0.15s;
}

.proforma-mic-btn.listening ~ .voice-indicator-wave span,
.voice-mic-hud.active .voice-indicator-wave span {
  animation: soundWave 0.8s infinite ease-in-out alternate;
}

@keyframes soundWave {
  0% { height: 3px; }
  100% { height: 12px; }
}

.voice-status-text {
  font-size: 0.70rem;
  color: #94a3b8;
  font-weight: 600;
}

/* Templates Bar */
.proforma-templates-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(15, 21, 35, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  overflow-x: auto;
  white-space: nowrap;
}

.template-label {
  font-size: 0.66rem;
  color: #64748b;
  font-weight: 700;
  text-transform: uppercase;
  margin-right: 2px;
}

.template-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.template-pill:hover {
  background: rgba(0, 229, 255, 0.15);
  border-color: rgba(0, 229, 255, 0.4);
  color: #00e5ff;
}

/* Scrollable Body */
.proforma-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.proforma-section-card {
  background: rgba(20, 28, 46, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
  transition: all 0.25s ease;
}

.proforma-section-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(20, 28, 46, 0.85);
}

.proforma-section-card.active-focus {
  border-color: rgba(168, 85, 247, 0.6);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.2);
}

.proforma-section-card.flash-highlight {
  animation: flashCard 1.1s ease-out;
}

@keyframes flashCard {
  0% { background: rgba(168, 85, 247, 0.35); border-color: #c084fc; }
  100% { background: rgba(20, 28, 46, 0.6); border-color: rgba(255, 255, 255, 0.08); }
}

.section-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.section-card-header label {
  font-size: 0.73rem;
  font-weight: 700;
  color: #f1f5f9;
  flex: 1;
  margin-left: 6px;
  cursor: pointer;
}

.section-badge {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 800;
}

.sec-badge-blue { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
.sec-badge-purple { background: rgba(168, 85, 247, 0.2); color: #c084fc; }
.sec-badge-amber { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
.sec-badge-cyan { background: rgba(0, 229, 255, 0.2); color: #00e5ff; }
.sec-badge-emerald { background: rgba(16, 185, 129, 0.2); color: #34d399; }
.sec-badge-rose { background: rgba(244, 63, 94, 0.2); color: #fb7185; }

.section-voice-hint {
  font-size: 0.60rem;
  color: #64748b;
  font-family: var(--font-mono);
}

.proforma-section-card textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(11, 15, 26, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 7px 9px;
  font-size: 0.75rem;
  color: #e2e8f0;
  font-family: inherit;
  line-height: 1.45;
  resize: vertical;
  min-height: 48px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}

.proforma-section-card textarea:focus {
  border-color: #a855f7;
  background: rgba(11, 15, 26, 0.95);
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.25);
}

.proforma-section-card textarea::placeholder {
  color: #475569;
  font-size: 0.70rem;
}

/* Footer */
.proforma-footer {
  padding: 10px 16px;
  background: rgba(20, 28, 46, 0.9);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 8px;
}

.proforma-action-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}

.proforma-action-btn.primary {
  background: #a855f7;
  color: #ffffff;
}

.proforma-action-btn.primary:hover {
  background: #9333ea;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.4);
}

.proforma-action-btn.secondary {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: #f1f5f9;
}

.proforma-action-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.proforma-action-btn.danger {
  flex: 0 0 34px;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
}

.proforma-action-btn.danger:hover {
  background: #ef4444;
  color: #ffffff;
}

/* Floating Push-to-Talk HUD (When holding 'V') */
.voice-mic-hud {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(30px);
  background: rgba(15, 21, 35, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(168, 85, 247, 0.5);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(168, 85, 247, 0.3);
  padding: 10px 18px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.voice-mic-hud.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.mic-hud-icon {
  width: 32px;
  height: 32px;
  background: #a855f7;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  animation: pulseHud 1s infinite alternate;
}

@keyframes pulseHud {
  0% { transform: scale(0.95); box-shadow: 0 0 6px rgba(168, 85, 247, 0.4); }
  100% { transform: scale(1.1); box-shadow: 0 0 16px rgba(168, 85, 247, 0.8); }
}

.mic-hud-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: #c084fc;
}

.mic-hud-text {
  font-size: 0.76rem;
  color: #f1f5f9;
  font-style: italic;
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Toolbar button active listening state */
.tool-btn.active-listening {
  background: rgba(168, 85, 247, 0.25) !important;
  color: #c084fc !important;
  border-color: #a855f7 !important;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.5) !important;
}

/* ==========================================================================
   Professional Medical Print / PDF Layout for Anonymous CBCT Proforma
   ========================================================================== */
@media print {
  body * {
    visibility: hidden;
  }

  .cbct-proforma-drawer,
  .cbct-proforma-drawer * {
    visibility: visible;
  }

  .cbct-proforma-drawer {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
  }

  .proforma-header-actions,
  .proforma-voice-bar,
  .proforma-templates-bar,
  .proforma-footer,
  .voice-mic-hud,
  .section-voice-hint,
  .proforma-close-btn {
    display: none !important;
  }

  .proforma-header {
    background: #f8fafc !important;
    border-bottom: 2px solid #0f172a !important;
    padding: 16px !important;
  }

  .proforma-title {
    color: #0f172a !important;
    font-size: 1.4rem !important;
  }

  .proforma-subtitle {
    color: #475569 !important;
    font-size: 0.85rem !important;
  }

  .proforma-meta-strip {
    background: #f1f5f9 !important;
    color: #1e293b !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid #cbd5e1 !important;
  }

  .proforma-body {
    padding: 16px !important;
    gap: 16px !important;
  }

  .proforma-section-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    page-break-inside: avoid;
  }

  .section-card-header label {
    color: #0f172a !important;
    font-size: 0.95rem !important;
  }

  .section-badge {
    background: #e2e8f0 !important;
    color: #0f172a !important;
  }

  .proforma-section-card textarea {
    background: #ffffff !important;
    border: none !important;
    color: #1e293b !important;
    font-size: 0.85rem !important;
    padding: 4px 0 !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
  }
}

/* Mobile Responsiveness for Drawer */
@media (max-width: 768px) {
  .cbct-proforma-drawer {
    width: 100vw;
    right: -100vw;
  }
}

/* ==========================================================================
   ANATOMY 3D PRINT STUDIO (SPINE, JAW, TEETH, CONDYLE, LESION)
   ========================================================================== */

.anatomy-print-card {
  max-width: 980px;
  width: 95vw;
  max-height: 92vh;
  background: #0b1120;
  border: 1px solid rgba(0, 229, 255, 0.4);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 35px rgba(0, 229, 255, 0.15);
  overflow: hidden;
}

.anatomy-modal-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.anatomy-tag-pill {
  font-size: 0.62rem;
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-radius: 20px;
  padding: 2px 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.anatomy-studio-body {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 16px;
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.anatomy-control-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.anatomy-section-title {
  font-size: 0.76rem;
  font-weight: 700;
  color: #f1f5f9;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.anatomy-presets-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.anatomy-preset-pill {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px 10px;
  color: #cbd5e1;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  text-align: left;
}

.anatomy-preset-pill:hover {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.4);
  color: #ffffff;
}

.anatomy-preset-pill.active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(217, 119, 6, 0.32));
  border-color: #f59e0b;
  color: #fbbf24;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
}

.anatomy-preset-desc {
  font-size: 0.68rem;
  color: #94a3b8;
  background: rgba(245, 158, 11, 0.06);
  border-left: 2px solid #f59e0b;
  padding: 5px 8px;
  border-radius: 0 6px 6px 0;
  margin-top: 4px;
  line-height: 1.35;
}

.anatomy-slider-group {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 7px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.anatomy-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  color: #94a3b8;
}

.anatomy-slider-group input[type="range"] {
  width: 100%;
  accent-color: #f59e0b;
  cursor: pointer;
  height: 4px;
}

.anatomy-metrics-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 10px;
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 0.72rem;
}

.anatomy-metric-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.anatomy-metric-label {
  color: #94a3b8;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.anatomy-metric-val {
  color: #f8fafc;
  font-weight: 700;
  font-size: 0.76rem;
}

.anatomy-preview-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.anatomy-preview-container {
  position: relative;
  width: 100%;
  height: 420px;
  min-height: 360px;
  background: radial-gradient(circle at center, #1e293b 0%, #0a0f1d 100%);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.6);
}

.anatomy-preview-container canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.anatomy-cam-bar {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 4px;
  z-index: 10;
}

.anatomy-cam-btn {
  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  backdrop-filter: blur(6px);
}

.anatomy-cam-btn:hover {
  background: rgba(245, 158, 11, 0.25);
  border-color: #f59e0b;
  color: #fff;
}

.anatomy-toggles-bar {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(8px);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.68rem;
  color: #94a3b8;
  z-index: 10;
}

.anatomy-toggles-bar input[type="checkbox"] {
  accent-color: #f59e0b;
  cursor: pointer;
}

.anatomy-export-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .anatomy-studio-body {
    grid-template-columns: 1fr;
  }
  .anatomy-preview-container {
    height: 320px;
  }
}

.tool-svg-icon {
  display: block;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.tool-btn:hover .tool-svg-icon {
  transform: scale(1.14);
  filter: drop-shadow(0 0 7px rgba(0, 229, 255, 0.75));
}

.anatomy-status-spinner {
  background: rgba(14, 165, 233, 0.2);
  border: 1px solid rgba(56, 189, 248, 0.45);
  color: #38bdf8;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 20px;
  padding: 2px 9px;
  letter-spacing: 0.03em;
  animation: pulseStatus 1.5s infinite;
}

@keyframes pulseStatus {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.anatomy-tooth-inspector-panel {
  display: block;
  animation: fadeInPanel 0.2s ease-in-out;
}

@keyframes fadeInPanel {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ================= PWA Offline Status Badge & Install Button ================= */
.pwa-offline-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  user-select: none;
  cursor: default;
  transition: all 0.3s ease;
}

.pwa-offline-badge.offline-active {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.5);
  color: #fbbf24;
}

.pwa-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 6px #34d399;
  transition: all 0.3s ease;
}

.pwa-offline-badge.offline-active .pwa-dot {
  background: #fbbf24;
  box-shadow: 0 0 6px #fbbf24;
}

.pwa-install-btn {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.18), rgba(14, 165, 233, 0.25)) !important;
  border: 1px solid rgba(0, 229, 255, 0.6) !important;
  color: #00e5ff !important;
  font-weight: 700 !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.74rem;
  transition: all 0.2s ease;
  animation: pwaPulse 2.8s infinite;
}

.pwa-install-btn:hover {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.32), rgba(14, 165, 233, 0.4)) !important;
  transform: translateY(-1px);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.4);
}

@keyframes pwaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.4); }
  50% { box-shadow: 0 0 8px 2px rgba(0, 229, 255, 0.3); }
}