.parent-level-link-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 12000;
}

.parent-level-link-dialog {
  width: min(940px, 92vw);
  max-height: 90vh;
  background: linear-gradient(160deg, #0f172a 0%, #0b1224 100%);
  color: #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 28px 60px rgba(8, 15, 31, 0.65);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.parent-link-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px 16px 26px;
  border-bottom: 1px solid rgba(59, 130, 246, 0.18);
  background: rgba(11, 18, 36, 0.9);
}

.parent-link-title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
  color: #f8fafc;
}

.parent-link-subtitle {
  margin: 6px 0 0 0;
  font-size: 0.82rem;
  color: rgba(148, 163, 184, 0.85);
}

.parent-link-close {
  border: none;
  background: rgba(30, 41, 59, 0.78);
  color: #cbd5f5;
  border-radius: 999px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}

.parent-link-close:hover {
  background: rgba(51, 65, 85, 0.95);
  color: #ffffff;
}

.parent-link-body {
  flex: 1 1 auto;
  padding: 20px 26px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  background: rgba(15, 23, 42, 0.6);
}

/* Custom scrollbar styling for parent-link-body */
.parent-link-body::-webkit-scrollbar {
  width: 10px;
}

.parent-link-body::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.7);
  border-radius: 10px;
  margin: 6px 0;
}

.parent-link-body::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.45);
  border-radius: 10px;
  border: 2px solid rgba(15, 23, 42, 0.7);
}

.parent-link-body::-webkit-scrollbar-thumb:hover {
  background: rgba(59, 130, 246, 0.65);
}

.parent-link-body::-webkit-scrollbar-thumb:active {
  background: rgba(96, 165, 250, 0.75);
}

.parent-link-count {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(148, 163, 184, 0.95);
}

.parent-link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.parent-link-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid rgba(59, 130, 246, 0.22);
  background: rgba(11, 18, 36, 0.85);
  box-shadow: 0 12px 24px rgba(8, 15, 31, 0.35);
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.parent-link-card:hover {
  border-color: rgba(96, 165, 250, 0.75);
  box-shadow: 0 16px 28px rgba(15, 23, 42, 0.45);
  transform: translateY(-2px);
}

.parent-link-card.selected {
  border-color: rgba(96, 165, 250, 0.95);
  box-shadow: 0 18px 32px rgba(30, 64, 175, 0.55);
}

.parent-link-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.parent-link-card-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.parent-link-card-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: #f1f5f9;
  /* FIX: Truncate long filenames with ellipsis */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.parent-link-card-description {
  font-size: 0.82rem;
  color: rgba(203, 213, 225, 0.85);
  line-height: 1.35;
}

.parent-link-card-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  font-size: 0.75rem;
  color: rgba(148, 163, 184, 0.9);
}

.parent-link-meta-line {
  display: block;
}

.parent-link-meta-id {
  grid-column: 1 / -1;
  font-family: 'Fira Code', 'Source Code Pro', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(125, 211, 252, 0.9);
}

.parent-link-meta-file {
  grid-column: 1 / -1;
  font-size: 0.74rem;
  color: rgba(148, 163, 184, 0.8);
}

.parent-link-empty-state {
  padding: 20px;
  border-radius: 14px;
  border: 1px dashed rgba(96, 165, 250, 0.45);
  background: rgba(15, 23, 42, 0.6);
  font-size: 0.85rem;
  color: rgba(148, 163, 184, 0.9);
  text-align: center;
}

.parent-link-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 26px 24px 26px;
  border-top: 1px solid rgba(59, 130, 246, 0.18);
  background: rgba(11, 18, 36, 0.92);
}

.parent-link-btn {
  padding: 9px 20px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.parent-link-btn.primary {
  background: linear-gradient(120deg, #2563eb, #4f46e5);
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.35);
}

.parent-link-btn.primary:hover {
  background: linear-gradient(120deg, #1d4ed8, #4338ca);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.45);
}

.parent-link-btn.primary:disabled {
  background: rgba(59, 130, 246, 0.35);
  color: rgba(203, 213, 225, 0.6);
  cursor: not-allowed;
  box-shadow: none;
}

.parent-link-btn.secondary {
  background: rgba(15, 23, 42, 0.65);
  color: rgba(203, 213, 225, 0.88);
  border-color: rgba(148, 163, 184, 0.3);
}

.parent-link-btn.secondary:hover {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(148, 163, 184, 0.45);
}

@media (max-width: 860px) {
  .parent-link-card-meta {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .parent-level-link-dialog {
    width: min(100vw, 520px);
  }

  .parent-link-header,
  .parent-link-body,
  .parent-link-footer {
    padding-left: 18px;
    padding-right: 18px;
  }
}
.parent-level-edit-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 17, 33, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 12000;
}

.parent-level-edit-dialog {
  width: min(960px, 90vw);
  max-height: 90vh;
  background: linear-gradient(160deg, #0f172a 0%, #111c34 100%);
  color: #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 28px 60px rgba(8, 15, 31, 0.65);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.parent-level-edit-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px 12px 28px;
  background: rgba(15, 23, 42, 0.65);
}

.parent-level-edit-title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: #f8fafc;
}

.parent-level-edit-subtitle {
  margin: 6px 0 0 0;
  font-size: 0.85rem;
  color: rgba(226, 232, 240, 0.75);
}

.parent-level-edit-close {
  border: none;
  background: rgba(30, 41, 59, 0.8);
  color: #cbd5f5;
  border-radius: 999px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.parent-level-edit-close:hover {
  background: rgba(51, 65, 85, 0.95);
  color: #ffffff;
}

.parent-level-edit-body {
  display: flex;
  gap: 24px;
  padding: 20px 28px 24px 28px;
  overflow-y: auto;
  flex: 1 1 auto;
}

/* Custom scrollbar styling for parent-level-edit-body */
.parent-level-edit-body::-webkit-scrollbar {
  width: 10px;
}

.parent-level-edit-body::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.7);
  border-radius: 10px;
  margin: 6px 0;
}

.parent-level-edit-body::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.45);
  border-radius: 10px;
  border: 2px solid rgba(15, 23, 42, 0.7);
}

.parent-level-edit-body::-webkit-scrollbar-thumb:hover {
  background: rgba(59, 130, 246, 0.65);
}

.parent-level-edit-body::-webkit-scrollbar-thumb:active {
  background: rgba(96, 165, 250, 0.75);
}

.parent-level-edit-form {
  flex: 1 1 360px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.parent-level-form-section {
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(59, 130, 246, 0.12);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.parent-level-section-heading {
  margin: 0 0 6px 0;
  font-size: 0.95rem;
  color: #bfdbfe;
}

.parent-level-form-section label {
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: #cbd5f5;
}

.parent-level-form-section input {
  margin-top: 2px;
  margin-bottom: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.9);
  color: #e2e8f0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.parent-level-form-section input:focus {
  outline: none;
  border-color: rgba(96, 165, 250, 0.85);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
}

.parent-level-meta-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.parent-level-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.78rem;
  color: rgba(203, 213, 225, 0.85);
}

.parent-level-meta-label {
  font-weight: 600;
}

.parent-level-meta-value {
  color: rgba(226, 232, 240, 0.9);
  text-align: right;
}

.parent-level-edit-preview {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(59, 130, 246, 0.12);
  border-radius: 12px;
  padding: 16px;
  min-height: 400px; /* CRITICAL FIX: Ensure minimum height to prevent squishing */
  max-height: 85vh; /* Allow growth but cap at viewport height */
  overflow-y: auto; /* Enable vertical scrolling if content exceeds max-height */
  overflow-x: hidden; /* FIX: Prevent horizontal scrollbar */
}

/* Custom scrollbar styling for parent-level-edit-preview */
.parent-level-edit-preview::-webkit-scrollbar {
  width: 8px;
}

.parent-level-edit-preview::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.6);
  border-radius: 10px;
  margin: 4px 0;
}

.parent-level-edit-preview::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.4);
  border-radius: 10px;
  border: 2px solid rgba(15, 23, 42, 0.6);
}

.parent-level-edit-preview::-webkit-scrollbar-thumb:hover {
  background: rgba(59, 130, 246, 0.6);
}

.parent-level-edit-preview::-webkit-scrollbar-thumb:active {
  background: rgba(96, 165, 250, 0.7);
}

.parent-level-preview-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 180px; /* CRITICAL FIX: Prevent preview stage from collapsing */
  flex-shrink: 0; /* CRITICAL FIX: Prevent stage from shrinking in flex container */
  border-radius: 12px;
  background: radial-gradient(circle at center, rgba(59, 130, 246, 0.18) 0%, rgba(15, 23, 42, 0.9) 65%);
  overflow: hidden;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid rgba(59, 130, 246, 0.18);
}

.parent-level-preview-stage.has-image {
  border-color: rgba(96, 165, 250, 0.35);
}

.parent-level-preview-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  color: rgba(148, 163, 184, 0.8);
  font-size: 0.85rem;
  background: rgba(15, 23, 42, 0.65);
}

.parent-level-preview-marker {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--marker-color, #fb923c);
  border: 2px solid rgba(15, 23, 42, 0.85);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f172a;
  font-weight: 700;
  font-size: 0.6rem;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.4);
}

.parent-level-preview-marker-label {
  pointer-events: none;
}

.parent-level-preview-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: 10px;
  padding: 12px;
  flex-shrink: 0; /* CRITICAL FIX: Prevent meta section from being compressed */
  min-height: fit-content; /* Allow natural content height */
}

.parent-level-preview-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.82rem;
}

.preview-label {
  color: rgba(148, 163, 184, 0.85);
  font-weight: 500;
}

.preview-value {
  color: #f8fafc;
  font-weight: 600;
  text-align: right;
}

/* Children section in preview meta */
.parent-level-preview-divider {
  height: 1px;
  background: rgba(59, 130, 246, 0.2);
  margin: 6px 0;
}

.parent-level-children-header {
  margin-top: 4px;
  font-weight: 600;
}

.parent-level-children-empty {
  opacity: 0.6;
}

.parent-level-children-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  max-height: 280px; /* CRITICAL FIX: Cap children list height to prevent excessive growth */
  overflow-y: auto; /* Enable scrolling for long child lists */
  padding-right: 4px; /* Space for scrollbar */
}

/* Custom scrollbar styling for children list */
.parent-level-children-list::-webkit-scrollbar {
  width: 6px;
}

.parent-level-children-list::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.4);
  border-radius: 6px;
  margin: 2px 0;
}

.parent-level-children-list::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.35);
  border-radius: 6px;
  border: 1px solid rgba(15, 23, 42, 0.4);
}

.parent-level-children-list::-webkit-scrollbar-thumb:hover {
  background: rgba(59, 130, 246, 0.5);
}

.parent-level-children-list::-webkit-scrollbar-thumb:active {
  background: rgba(96, 165, 250, 0.65);
}

.parent-level-child-item {
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.78rem;
}

.child-item-title {
  color: #f8fafc;
  font-weight: 600;
  margin-bottom: 4px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.child-item-badges {
  display: flex;
  gap: 8px;
  font-size: 0.72rem;
  color: rgba(148, 163, 184, 0.9);
  font-weight: 500;
}

.parent-level-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 28px 24px 28px;
  background: rgba(15, 23, 42, 0.65);
  border-top: 1px solid rgba(59, 130, 246, 0.12);
}

@media (max-width: 1100px) {
  .parent-level-edit-body {
    flex-direction: column;
  }

  .parent-level-edit-preview,
  .parent-level-edit-form {
    flex: 1 1 auto;
  }
}

@media (max-width: 720px) {
  .parent-level-edit-dialog {
    width: min(100vw, 560px);
  }

  .parent-level-edit-header,
  .parent-level-edit-body,
  .parent-level-edit-actions {
    padding-left: 18px;
    padding-right: 18px;
  }

  .parent-level-form-section input {
    font-size: 0.85rem;
  }
}
/* Grid Display System - CSS */

/* Main grid overlay container */
.grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50; /* Above video, below modals */
  pointer-events: auto;
  box-sizing: border-box;
  overflow: hidden;
}

/* Mobile container wrappers (used when rendering grid in mobile mode) */
.grid-mobile-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: none;
}
.grid-viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.grid-mobile-content,
.grid-content {
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  /* will-change: transform removed — it creates a compositing layer that iOS WebKit
     clips aggressively, cutting off head-label text on the left side of the viewport.
     The browser auto-promotes to a compositing layer when transform is actually set
     (pinch-zoom or fallback centering), so GPU acceleration is preserved when needed.
     See grid_mobile_display.js applyTransform() for the dynamic will-change toggle. */
}

@media (max-width: 900px) {
  /* Make grid controls more touch friendly on mobile */
  .grid-control {
    width: 42px;
    height: 42px;
    font-size: 20px;
  }
}

/* Grid background container */
.grid-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

/* Grid boundary polygon */
.grid-boundary {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.grid-boundary svg {
  width: 100%;
  height: 100%;
}

/* Grid title and subtitle container */
.grid-header {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 52;
  padding: 8px 12px;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  max-width: 70%;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 220ms ease, transform 220ms ease;
}

/* Animated visibility states for grid header */
.grid-header.visible {
  opacity: 1;
  transform: translateY(0);
}

.grid-header.hidden {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}

/* Toggle button that shows when the header is hidden */
.grid-header-toggle {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 24px;
  height: 24px;
  display: none; /* shown only when header is hidden */
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  color: #fff;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  cursor: pointer;
  z-index: 55; /* above markers (53), below marker cards (65) */
  transition: opacity 180ms ease, transform 180ms ease, background 180ms ease;
  opacity: 0.85;
}

.grid-header-toggle:hover {
  background: rgba(0,0,0,0.65);
  opacity: 1;
}

.grid-header-toggle.visible {
  display: flex;
}

/* Navigation breadcrumbs */
.grid-breadcrumbs {
  display: none; /* Hidden permanently but code preserved for future use */
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.breadcrumb-item {
  transition: color 0.2s ease;
}

.breadcrumb-item:hover {
  color: #ffffff !important;
  text-decoration: underline;
}

.breadcrumb-separator {
  color: rgba(255, 255, 255, 0.6);
  margin: 0 4px;
}

.breadcrumb-current {
  color: #ffffff;
  font-weight: 600;
}

.grid-nav-info {
  margin-top: 4px;
  opacity: 0.8;
}

.grid-title {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 4px 0;
  color: white;
}

.grid-subtitle {
  font-size: 14px;
  margin: 0;
  opacity: 0.9;
}

/* Grid markers */
.grid-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 53;
  cursor: pointer;
  transition: transform 0.2s ease;
  /* will-change: transform removed — on iOS WebKit it creates a compositing layer
     sized to the marker's box (31×31px for head, 26×39px for pin). The head-label
     (up to ~102px wide) overflows this box and iOS clips it at the layer boundary.
     During the intro animation, the keyframe filter forces iOS to expand the paint
     area to include overflow children — that's why labels are visible while animating
     but clipped after. Without will-change, the browser auto-promotes on hover/animation
     only when needed, and doesn't clip overflow in the static state. */
}

/* Marker types */
.grid-marker.pin {
  /* Increased 30% (base 20x30 -> 26x39) */
  width: 26px;
  height: 39px;
  /* filter moved to ::before — on iOS WebKit, filter on the parent creates a compositing
     buffer sized to the marker box that clips the marker-label. Same fix as .grid-marker.head. */
  overflow: visible;
}

/* Create the red sphere with line pin design */
.grid-marker.pin::before {
  content: '';
  position: absolute;
  top: -16px; /* Move sphere up so pin bottom is at origin */
  left: 50%;
  transform: translateX(-50%);
  /* Sphere diameter +30% (16 -> 21) */
  width: 21px;
  height: 21px;
  /* Shadow moved from parent .grid-marker.pin to here — prevents iOS WebKit
     compositing-buffer clipping of marker-label on the parent element */
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.15)) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
  /* Multi-layered glossy sphere with dynamic colors and specular highlight */
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.28) 26%, rgba(255, 255, 255, 0) 36%), /* softened specular, slightly offset */
    radial-gradient(circle at 50% 54%, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.08) 32%, rgba(0, 0, 0, 0) 60%), /* gentle center darkening for number contrast */
    radial-gradient(circle at 70% 70%, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 55%), /* lower-right soft shadow */
    linear-gradient(135deg, var(--marker-color, #ff4444) 0%, var(--marker-color-dark, #cc0000) 100%); /* base color */
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5); /* slightly softer rim for less glare */
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.35), /* inner sheen */
    inset 2px -2px 4px rgba(0, 0, 0, 0.28), /* depth shade */
    0 1px 2px rgba(0, 0, 0, 0.25), /* lift */
    0 0 0 1px rgba(255, 255, 255, 0.3); /* outer glow */
  z-index: 2; /* ensure sphere sits above stem */
}

/* Create the line underneath the sphere */
.grid-marker.pin::after {
  content: '';
  position: absolute;
  top: 3px; /* Re-aligned based on larger sphere */
  left: 50%;
  transform: translateX(-50%);
  /* Stem scales +30% height (16 -> ~21) keep width for sharpness */
  width: 2px;
  height: 21px;
  /* Stem with center highlight and subtle taper illusion */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.45) 0%, /* softer rim near sphere */
    var(--marker-color-dark, #aa0000) 10%,
    var(--marker-color-dark, #8c0000) 50%,
    #6b6b6b 100%
  );
  border-radius: 1px;
  box-shadow:
    0 0 0 0.5px rgba(255, 255, 255, 0.4), /* subtle outline */
    0 1px 2px rgba(0, 0, 0, 0.35); /* depth */
  z-index: 1; /* place stem behind the sphere */
}

/* Slight sheen boost on hover for a polished feel */
.grid-marker.pin:hover::before {
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.34) 26%, rgba(255, 255, 255, 0) 38%),
    radial-gradient(circle at 50% 54%, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.08) 32%, rgba(0, 0, 0, 0) 60%),
    radial-gradient(circle at 70% 70%, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 55%),
    linear-gradient(135deg, var(--marker-color, #ff4444) 0%, var(--marker-color-dark, #cc0000) 100%);
}

/* Keyboard accessibility cue */
.grid-marker.pin:focus-visible::before {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.6),
    0 0 0 4px rgba(255, 82, 82, 0.35),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.35),
    inset 2px -2px 4px rgba(0, 0, 0, 0.28);
}

/* Pin pigeon variant */
/* Pigeon variant replaces entire pin visuals with a white bird SVG */
.grid-marker.pin.pigeon::before,
.grid-marker.pin.pigeon::after {
  /* Override default pin sphere & stem; will redefine below */
  content: none;
}

.grid-marker.pin.pigeon {
  /* Base pigeon pin footprint +30% (30 -> 39) */
  width: 39px; /* Larger footprint to match visual weight */
  height: 39px;
}

.grid-marker.pin.pigeon .number {
  position: absolute;
  top: -6px; /* Overlap halo edge */
  right: -6px;
  transform: none;
  background: linear-gradient(
    145deg,
    rgba(var(--pigeon-bg-rgb, 0,0,0), 0.72) 0%,
    rgba(var(--pigeon-bg-rgb, 0,0,0), 0.56) 100%
  );
  border-radius: 50%;
  width: 21px;
  height: 21px;
  padding: 0; /* Fixed circle */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.25px;
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.55), 0 2px 2px rgba(0,0,0,0.4);
  text-shadow: 0 0 2px rgba(0,0,0,0.85);
  backdrop-filter: blur(2px);
  pointer-events: none;
  z-index: 3;
}

/* Slightly reduce font for double-digit counts to fit circle */
.grid-marker.pin.pigeon .number.double {
  font-size: 8px;
  letter-spacing: 0.1px;
}

/* Inline bird graphic using mask so color can be managed; default white, fallback to currentColor */
/* Halo background for contrast on any imagery */
.grid-marker.pin.pigeon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    rgba(var(--pigeon-bg-rgb, 0,0,0), 0.65) 0%,
    rgba(var(--pigeon-bg-rgb, 0,0,0), 0.55) 70%,
    rgba(var(--pigeon-bg-rgb, 0,0,0), 0.45) 100%
  );
  box-shadow: 0 0 2px rgba(255,255,255,0.35), 0 2px 4px rgba(0,0,0,0.5);
  pointer-events: none;
  z-index: 1; /* ensure halo sits below the bird silhouette */
}

/* Bird silhouette centered */
.grid-marker.pin.pigeon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scaleX(-1); /* Flip horizontally to face left */
  width: 30px; /* +30% */
  height: 30px;
  background: var(--pigeon-bird-color, #ffffff);
  -webkit-mask: url('https://app.ultimxtechnologies.com/assets/Bird-4.svg') center/contain no-repeat, url('image/Bird-4.svg') center/contain no-repeat;
  mask: url('https://app.ultimxtechnologies.com/assets/Bird-4.svg') center/contain no-repeat, url('image/Bird-4.svg') center/contain no-repeat;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.9)) drop-shadow(0 2px 3px rgba(0,0,0,0.5));
  opacity: 1; /* keep the bird fully opaque for crisp appearance */
  pointer-events: none;
  z-index: 2; /* ensure bird renders above its halo */
}

.grid-marker.dot {
  /* +30% (16 -> 21) */
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background-color: currentColor; /* Honor JS-assigned color */
  overflow: visible; /* Prevents iOS WebKit clipping of marker-label */
}

.grid-marker.circle {
  /* +30% (24 -> 31.2 -> 31) */
  width: 31px;
  height: 31px;
  border-radius: 50%;
  border: 3px solid; /* Uses currentColor for stroke */
  overflow: visible; /* Prevents iOS WebKit clipping of marker-label */
}

.grid-marker.head {
  /* +30% (24 -> 31) */
  width: 31px;
  height: 31px;
  /* Explicit overflow:visible ensures iOS WebKit does not clip the head-label
     that extends well beyond the 31px marker boundary */
  overflow: visible;
  /* IMPORTANT: filter: drop-shadow was REMOVED from this element.
     On iOS WebKit, filter on a parent creates a fixed-size rendering buffer based
     on the element's dimensions (31×31px). The head-label (up to ~102px wide,
     positioned at top:34px below the badge) falls outside this buffer and gets
     clipped. During the intro animation, the animated filter+scale forces iOS to
     recalculate and expand the buffer each frame — that's why labels are visible
     while animating but clipped after. The shadow is now on ::before instead. */
}

/* Glossy circular badge background with sophisticated gradients */
.grid-marker.head::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* Multi-layered glossy badge with dynamic colors similar to pin spheres */
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 28%, rgba(255, 255, 255, 0) 38%), /* specular highlight */
    radial-gradient(circle at 50% 54%, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.05) 35%, rgba(0, 0, 0, 0) 65%), /* center darkening for contrast */
    radial-gradient(circle at 70% 70%, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 50%), /* lower-right shadow */
    linear-gradient(135deg, var(--marker-color, #4a90e2) 0%, var(--marker-color-dark, #2171b5) 100%); /* base color with fallback blue */
  border: 1px solid rgba(255, 255, 255, 0.5);
  /* Shadow moved from parent .grid-marker.head to here — applying filter on the
     parent element causes iOS WebKit to create a clipping buffer that cuts off the
     head-label. Applying it on ::before keeps the same visual shadow on the badge
     without creating a clipping region around the parent's children. */
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.15)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.4), /* inner sheen */
    inset 2px -2px 3px rgba(0, 0, 0, 0.25), /* depth shade */
    0 1px 2px rgba(0, 0, 0, 0.2), /* lift shadow */
    0 0 0 1px rgba(255, 255, 255, 0.25); /* outer glow */
}

/* Enhanced head silhouette with better contrast and styling */
.grid-marker.head::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.95); /* High contrast white for silhouette */
  /* More detailed person silhouette optimized for small size */
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="28" r="12"/><path d="M50 45c-12 0-22 8-22 18v12c0 2 1.5 3.5 3.5 3.5h37c2 0 3.5-1.5 3.5-3.5V63c0-10-10-18-22-18z"/></svg>') center/75% no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="28" r="12"/><path d="M50 45c-12 0-22 8-22 18v12c0 2 1.5 3.5 3.5 3.5h37c2 0 3.5-1.5 3.5-3.5V63c0-10-10-18-22-18z"/></svg>') center/75% no-repeat;
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.3));
}

/* Head marker label shown under the marker */
.grid-marker.head .head-label {
  position: absolute;
  top: 34px; /* slightly below the 31px badge */
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 12px; /* default size; overridden by data-size */
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap; /* single-line default */
  pointer-events: none;
  /* Pill background for universal readability */
  background: rgba(0, 0, 0, 0.6);
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 2px rgba(0,0,0,0.8);
  /* Fit content with max-width constraint for ellipsis */
  display: inline-block;
  min-width: 0;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Allow two-line stacking when content contains <br> */
.grid-marker.head .head-label[data-lines="2"] {
  line-height: 1.15;
  /* Only allow the explicit <br> to create the second line; do NOT break within words */
  white-space: normal; /* respect <br> */
  text-align: center;
  overflow-wrap: normal; /* do not force per-character wraps */
  word-break: keep-all;  /* keep words intact; long tokens will be clipped instead of stacked */
  hyphens: none;
}

/* Font size variants based on data-size */
.grid-marker.head .head-label[data-size="md"] { font-size: 12px; }
.grid-marker.head .head-label[data-size="sm"] { font-size: 11px; }
.grid-marker.head .head-label[data-size="xs"] { font-size: 10px; }
.grid-marker.head .head-label[data-size="xxs"] { font-size: 9px; }

/* Slightly increase vertical padding for two-line labels */
.grid-marker.head .head-label[data-lines="2"] {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* ═══════════════════════════════════════════════════════════════════
   UNIVERSAL MARKER LABEL — works for all marker types (pin, pigeon, circle, dot, head)
   Uses the same pill-badge visual style as head-label.
   The existing .head-label rules above are kept for backward compatibility.
   ═══════════════════════════════════════════════════════════════════ */

/* Base label style (shared across all types) */
.grid-marker .marker-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 2px rgba(0,0,0,0.8);
  display: inline-block;
  min-width: 0;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 54; /* above marker (53) */
}

/* Per-type top positioning — DEFAULT = "under" (below marker) */
.grid-marker.head .marker-label    { top: 34px; } /* below 31px badge + 3px gap */
.grid-marker.pin .marker-label     { top: 28px; } /* below stem tip (3px+21px) + 4px gap */
.grid-marker.pin.pigeon .marker-label { top: 42px; } /* below 36px halo (bottom edge ~37.5px) + 4.5px gap */
.grid-marker.circle .marker-label  { top: 34px; } /* same as head (31px) */
.grid-marker.dot .marker-label     { top: 15px; } /* below 21px dot + 4.5px gap */

/* Label position = "over" — ABOVE the marker using translateY(-100%) */
.grid-marker.head .marker-label[data-position="over"]    { top: -4px;  transform: translateX(-50%) translateY(-100%); } /* above 31px badge */
.grid-marker.pin .marker-label[data-position="over"]     { top: -20px; transform: translateX(-50%) translateY(-100%); } /* above sphere (sphere top at -16px, 4px gap) */
.grid-marker.pin.pigeon .marker-label[data-position="over"] { top: -4px; transform: translateX(-50%) translateY(-100%); } /* above 36px halo (top edge ~-1.5px) */
.grid-marker.circle .marker-label[data-position="over"]  { top: -4px;  transform: translateX(-50%) translateY(-100%); } /* above 31px circle */
.grid-marker.dot .marker-label[data-position="over"]     { top: -4px;  transform: translateX(-50%) translateY(-100%); } /* above 21px dot */

/* Two-line stacking for marker-label */
.grid-marker .marker-label[data-lines="2"] {
  line-height: 1.15;
  white-space: normal;
  text-align: center;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Font size variants for marker-label */
.grid-marker .marker-label[data-size="md"]  { font-size: 12px; }
.grid-marker .marker-label[data-size="sm"]  { font-size: 11px; }
.grid-marker .marker-label[data-size="xs"]  { font-size: 10px; }
.grid-marker .marker-label[data-size="xxs"] { font-size: 9px; }

/* Marker hover effects */
.grid-marker:hover {
  transform: translate(-50%, -50%) scale(1.2);
}

/* Touch-specific: disable hover scale on touch devices to avoid jumpiness */
body.touch-enabled .grid-marker:hover {
  transform: translate(-50%, -50%);
}

/* Mobile tap animation feedback (short pulse) */
body.touch-enabled .grid-marker.mobile-tap-anim {
  transition: transform 0.18s ease;
  transform: translate(-50%, -50%) scale(1.12);
}

/* First-load marker intro animation (scale + glow pulse, staggered) */
.grid-marker.marker-intro-flash {
  animation: markerIntroPulse 1.6s cubic-bezier(0.65, 0, 0.35, 1) var(--intro-stagger, 0ms) 2;
}
/* Pigeon override: use filter-free keyframes.
   The pigeon ::after has mask + filter + transform (triple compositing trigger) which
   causes the browser to promote it to a separate GPU layer. When the parent ALSO has
   animated filter, .number and .marker-label get implicitly promoted to maintain
   z-order above ::after — but those orphaned layers don't follow the parent's
   animated transform, so they stay static while the pigeon body scales.
   Removing filter from the keyframes avoids the filter-bitmap compositing path;
   plain transform compositing correctly propagates scale to all child layers.
   The pigeon's own halo provides sufficient visual presence during the pulse. */
.grid-marker.pin.pigeon.marker-intro-flash {
  animation-name: markerIntroPulseNoFilter;
}

@keyframes markerIntroPulse {
  0% { transform: translate(-50%, -50%) scale(0.85); filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  15% { transform: translate(-50%, -50%) scale(1.35); filter: drop-shadow(0 0 6px rgba(255,255,255,0.85)); }
  32% { transform: translate(-50%, -50%) scale(1.0); filter: drop-shadow(0 0 2px rgba(255,255,255,0.55)); }
  48% { transform: translate(-50%, -50%) scale(1.22); filter: drop-shadow(0 0 5px rgba(255,255,255,0.75)); }
  65% { transform: translate(-50%, -50%) scale(1.0); filter: drop-shadow(0 0 2px rgba(0,0,0,0.35)); }
  100% { transform: translate(-50%, -50%) scale(1.0); filter: drop-shadow(0 1px 0 rgba(255,255,255,0.15)) drop-shadow(0 3px 4px rgba(0,0,0,0.35)); }
}

/* Filter-free variant for pigeon (same scale curve, no filter bitmap compositing) */
@keyframes markerIntroPulseNoFilter {
  0%   { transform: translate(-50%, -50%) scale(0.85); }
  15%  { transform: translate(-50%, -50%) scale(1.35); }
  32%  { transform: translate(-50%, -50%) scale(1.0);  }
  48%  { transform: translate(-50%, -50%) scale(1.22); }
  65%  { transform: translate(-50%, -50%) scale(1.0);  }
  100% { transform: translate(-50%, -50%) scale(1.0);  }
}
/* Marker hover cards */
.grid-marker-card {
  position: absolute;
  z-index: 65; /* Higher than child grid cards (60) for priority */
  background-color: rgba(0, 0, 0, 0.70); /* Dark theme like thumbnail-hover-overlay */
  border-radius: 12px; /* Slightly smaller than overlay's 15px */
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.6); /* Similar depth to overlay */
  padding: 12px 15px; /* Similar to overlay padding */
  width: 300px; /* Smaller than overlay's 400px to fit video-section */
  min-height: 90px; /* Smaller than overlay's 106px */
  max-height: 150px; /* Allow for variable content */
  pointer-events: auto;
  border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle white border */
  backdrop-filter: blur(8px); /* Subtle blur effect */
  cursor: default;
  transform-origin: center;
  color: white; /* White text for dark theme */
  /* CRITICAL: Default hidden state to prevent ANY flash */
  opacity: 0 !important;
  transform: scale(0.95) !important; /* Subtle scale for smooth entrance */
  visibility: hidden !important;
  /* Remove all transitions by default */
  transition: none !important;
  /* Add will-change for better performance */
  will-change: opacity, transform, visibility;
  /* MOBILE FIX: Prevent scaling with grid zoom - force normal size */
  font-size: 13px !important; /* Lock font size */
  max-width: 300px !important; /* Lock max width */
  min-width: 250px !important; /* Ensure readable minimum */
}

/* Mobile fixed UI mounting: cards mounted outside scaled content */
.grid-fixed-ui .grid-marker-card {
  /* Reset any inherited transforms that might scale the card */
  transform: scale(0.95) !important; /* Initial state */
  font-size: 12.5px !important; /* Slightly smaller */
  width: 252px !important; /* 10% smaller */
  max-width: 252px !important;
  min-width: 216px !important;
  /* Ensure positioning is relative to fixed UI container */
  position: absolute !important;
  /* Enable pointer events for interaction */
  pointer-events: auto !important;
}

.grid-fixed-ui .grid-marker-card.visible {
  transform: scale(1) !important; /* Normal size when visible */
}

.grid-fixed-ui .grid-marker-card.visible:hover {
  transform: scale(1.02) !important; /* Slight hover scale */
}

/* State when card is being shown */
.grid-marker-card.showing {
  visibility: visible !important;
}

/* State when card is fully visible with animation */
.grid-marker-card.visible {
  opacity: 1 !important;
  transform: scale(1) !important;
  /* Only apply transitions when animating */
  transition: opacity 0.25s ease-out, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Enhanced hover state for the entire card */
.grid-marker-card.visible:hover {
  background-color: rgba(10, 10, 10, 0.80); /* Darker on hover like overlay */
  border-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.02) !important; /* Slight scale like overlay hover */
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.7); /* Enhanced shadow */
}

/* Mini confirmation card (mobile): visible immediately without .showing/.visible */
.grid-marker-card.grid-marker-card--confirm-mini {
  opacity: 1 !important;
  visibility: visible !important;
  transform: scale(1) !important;
  pointer-events: auto !important;
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  min-height: unset !important;
  padding: 6px 8px !important;
  font-size: 12px !important;
  z-index: 102100 !important; /* Ensure above other cards */
  box-sizing: border-box !important;
  /* animated entrance */
  transition: opacity 140ms ease-out, transform 160ms ease-out !important;
}
.grid-marker-card.grid-marker-card--confirm-mini.is-hidden {
  opacity: 0 !important;
  transform: translateY(6px) scale(0.98) !important;
  visibility: hidden !important;
}

.grid-marker-card.grid-marker-card--confirm-mini::before,
.grid-marker-card.grid-marker-card--confirm-mini::after {
  display: none !important; /* Hide pointer triangle for compact variant */
}

.grid-marker-card.grid-marker-card--confirm-mini .grid-marker-card-content {
  display: grid !important;
  grid-template-columns: 1fr 32px !important; /* text + compact icon column */
  grid-auto-rows: auto !important;
  column-gap: 6px !important;
  align-items: center !important;
}

.grid-marker-card.grid-marker-card--confirm-mini .grid-marker-card-title {
  font-size: 13px !important;
  margin: 0 0 4px 0 !important;
  grid-column: 1 / -1 !important; /* span full width */
  grid-row: 1 !important;
  /* Override global single-line title to allow wrapping to two lines */
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  overflow: hidden !important;
  white-space: normal !important;
}

.grid-marker-card.grid-marker-card--confirm-mini .grid-marker-card-subtitle {
  font-size: 10px !important;
  margin: 0 0 2px 0 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  line-clamp: 3 !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
}

.grid-marker-card.grid-marker-card--confirm-mini .grid-marker-card-actions {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  padding-left: 2px !important;
  justify-self: end !important;
  margin-top: 20px;
}

.grid-marker-card.grid-marker-card--confirm-mini .grid-marker-card-actions {
  gap: 6px !important;
}

.grid-marker-card.grid-marker-card--confirm-mini .grid-marker-card-action {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important; /* override global touch min */
  min-height: 28px !important; /* override global touch min */
  padding: 0 !important;
  font-size: 16px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Mobile sticky identification (no visual change by default; hook for scripts/selectors) */
.grid-marker-card.mobile-sticky { outline: none; }

/* Ensure card action buttons meet touch target minimums on mobile */
body.touch-enabled .grid-marker-card-action {
  min-width: 44px;
  min-height: 44px;
  padding: 6px; /* ensure 44x44 touch hitbox while visuals can be smaller */
}

.grid-marker-card::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: var(--arrow-left, 50%);
  transform: translateX(-50%); /* Center the arrow tip precisely */
  border-width: 10px 10px 0;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.85) transparent transparent; /* Match dark background */
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); /* Simplified: glow + depth shadow only */
  /* Hide arrow if card is positioned below marker */
  display: var(--arrow-display, block);
  pointer-events: none; /* Ensure arrow doesn't interfere with hover */
}

/* Arrow for cards positioned above marker */
.grid-marker-card.above::after {
  --arrow-display: block;
}

/* Arrow for cards positioned below marker */  
.grid-marker-card.below::after {
  --arrow-display: none;
}

.grid-marker-card.below::before {
  content: '';
  position: absolute;
  top: -10px;
  left: var(--arrow-left, 50%);
  transform: translateX(-50%); /* Center the arrow tip precisely */
  pointer-events: none; /* Ensure arrow doesn't interfere with hover */
  border-width: 0 10px 10px;
  border-style: solid;
  border-color: transparent transparent rgba(0, 0, 0, 0.85); /* Match dark background */
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5)) drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.3)); /* Simplified: glow + depth shadow only */
}

.grid-marker-card-title {
  font-size: 13px; /* Smaller than overlay's 14px */
  font-weight: bold; /* Keep bold like overlay */
  margin: 0 0 6px 0;
  color: white; /* White text for dark theme */
  line-height: 1.2;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8); /* Text shadow like overlay */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grid-marker-card-subtitle {
  font-size: 11px; /* Smaller than overlay's 12px */
  margin: 0 0 12px 0;
  color: rgba(255, 255, 255, 0.9); /* Light white text like overlay */
  line-height: 1.3;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8); /* Text shadow like overlay */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2; /* Standard property for compatibility */
  -webkit-box-orient: vertical;
}

/* Horizontal layout for cards with video thumbnails */
.grid-marker-card.has-video {
  display: flex;
  flex-direction: row-reverse; /* Thumbnail on the right side */
  align-items: center;
  padding: 10px 12px; /* Slightly smaller padding */
}

/* Wrapper that holds a static thumbnail and (optionally) a layered animated
   preview.  Sized to match the thumbnail so flex layout is unaffected. */
.grid-marker-card .grid-marker-card-thumb-wrap {
  position: relative;
  width: 110px;
  height: 90px;
  flex-shrink: 0;
  margin-left: 12px;
  margin-right: 0;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

/* When a wrapper is used, the thumbnail no longer needs its own margins,
   shadow, or cursor — the wrapper provides them. */
.grid-marker-card .grid-marker-card-thumb-wrap > .grid-marker-card-thumbnail {
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-shadow: none !important;
  border: none !important;
  cursor: inherit !important;
  transition: none !important;
}

/* Animated video preview layered on top of the static thumbnail.
   Starts at opacity 0 and transitions to 1 once the first frame is decoded. */
.grid-marker-card .grid-marker-card-thumb-video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 110px !important;
  height: 90px !important;
  transition: opacity 0.18s ease;
}

.grid-marker-card .grid-marker-card-thumbnail {
  position: relative !important; /* Changed to relative for play icon overlay positioning */
  width: 110px !important; /* Updated dimensions, override #video-container video */
  height: 90px !important; /* Updated dimensions, override #video-container video */
  top: auto !important; /* Override .video-section img top */
  left: auto !important; /* Override .video-section img left */
  object-fit: cover !important; /* Override #video-container video object-fit: contain */
  border-radius: 5px;
  margin-left: 12px; /* Changed from margin-right to margin-left for right positioning */
  margin-right: 0; /* Remove right margin */
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  flex-shrink: 0; /* Prevent thumbnail from shrinking */
  z-index: auto !important; /* Override .video-section img z-index */
  /* Removed filter: invert(1) as requested */
  /* Ensure video elements also get proper styling */
  display: block;
  background: transparent;
  /* Clickable thumbnail styles */
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

/* Hover effect for clickable thumbnails */
.grid-marker-card .grid-marker-card-thumbnail:hover {
  transform: scale(1.05);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 
    0 0 8px rgba(0, 0, 0, 0.4),
    0 0 0 2px rgba(255, 255, 255, 0.3);
  filter: brightness(1.1);
}

/* Hover on the wrapper — applies scale/glow to the container so the
   effect isn't clipped by overflow:hidden when using the wrapper */
.grid-marker-card .grid-marker-card-thumb-wrap:hover {
  transform: scale(1.05);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 
    0 0 8px rgba(0, 0, 0, 0.4),
    0 0 0 2px rgba(255, 255, 255, 0.3);
  filter: brightness(1.1);
}

.grid-marker-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0; /* Allow text to overflow properly */
}

.grid-marker-card-image {
  width: 100%;
  margin-bottom: 10px;
  border-radius: 6px;
  transition: transform 0.2s ease;
}

.grid-marker-card-image:hover {
  transform: scale(1.02);
}

.grid-marker-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px; /* Smaller gap */
  margin-top: 3px; /* Smaller margin */
}

.grid-marker-card-action {
  padding: 3px; /* Equal padding for square icon buttons */
  padding-bottom: 4px; /* Slightly larger bottom padding for better click area */
  background: rgba(255, 255, 255, 0.1); /* Semi-transparent white for dark theme */
  color: white;
  border-radius: 6px; /* Slightly larger radius for bigger buttons */
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 18px; /* Larger font size for bigger icons */
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  /* Enhanced clickable appearance */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  min-width: 30px; /* Ensure minimum button size */
  min-height: 30px; /* Ensure minimum button size */
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-marker-card-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.2); /* Lighter on hover */
  border-color: rgba(255, 255, 255, 0.4);
}

.grid-marker-card-action:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.15);
}

/* Add a subtle animation when card appears */
@keyframes cardAppear {
  from {
    opacity: 0;
    transform: translateY(-100%) translateY(-10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(-100%) translateY(-10px) scale(1);
  }
}

/* Grid loading overlay - positioned within video-section only */
.grid-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.408);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60; /* Higher than grid overlay (50) but contained within video-section */
  backdrop-filter: blur(4px);
}

.grid-loading-content {
  text-align: center;
}

.grid-loading-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid #00ffcc;
  border-radius: 50%;
  animation: gridLoadingSpin 1s linear infinite;
}

@keyframes gridLoadingSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* === Grid Image Preload Overlay === */
/* Shown while the grid background image is loading from network.
   Different from .grid-loading-overlay which is for video loading after grid hide. */
.grid-image-preload-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 60;
    backdrop-filter: blur(4px);
    pointer-events: none;
}

.grid-image-preload-content {
    text-align: center;
}

.grid-image-preload-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top: 3px solid #00ffcc;
    border-radius: 50%;
    animation: gridLoadingSpin 1s linear infinite;
}

/* Grid controls */
.grid-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 55;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.grid-control {
  width: 36px;
  height: 36px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  transition: background-color 0.2s;
}

.grid-control:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

.grid-control.active {
  background-color: rgba(50, 150, 255, 0.8);
  color: white;
}

/* Info text display */
.info-text {
  position: absolute;
  bottom: 10px;
  left: 10px;
  max-width: 60%;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 10px;
  border-radius: 4px;
  font-size: 14px;
  z-index: 54;
}

/* Grid boundary hidden state */
.grid-boundary.hidden {
  display: none !important;
}

/* Child grid outline hidden state */
.child-grid-outline.hidden {
  display: none !important;
}

/* Pin number display inside the red sphere */
.grid-marker.pin .number {
  position: absolute;
  top: -16px; /* Same position as the sphere */
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  font-weight: 700;
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.15px;
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.55),
    0 -1px 1px rgba(0, 0, 0, 0.35),
    1px 0 1px rgba(0, 0, 0, 0.35),
    -1px 0 1px rgba(0, 0, 0, 0.35);
  -webkit-text-stroke: 0.4px rgba(0, 0, 0, 0.35);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  pointer-events: none;
  z-index: 3; /* ensure number sits above the sphere */
}

/* Ensure two-digit numbers fit elegantly in the sphere */
.grid-marker.pin .number.double {
  font-size: 9px;
  letter-spacing: 0.05px;
}

/* Three-digit numbers fallback */
.grid-marker.pin .number.triple {
  font-size: 8px;
  letter-spacing: 0;
}

/* ===== G-TAG CREATOR STYLES ===== */

/* Pin variant radio buttons */
.variant-btn[role="radio"] {
  appearance: none;
  border: 1px solid #cfd7e3;
  background: #fff;
  color: #333;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}
.variant-btn[role="radio"]:hover {
  border-color: #9fb3cc;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.variant-btn[role="radio"].selected,
.variant-btn[role="radio"][aria-checked="true"] {
  background: linear-gradient(180deg, #e9f3ff 0%, #d8ebff 100%);
  border-color: #2a7de1;
  color: #0f488f;
  box-shadow: 0 0 0 2px rgba(42,125,225,0.15) inset, 0 1px 2px rgba(0,0,0,0.08);
}
.variant-btn[role="radio"]:focus-visible {
  outline: 2px solid #2a7de1;
  outline-offset: 2px;
}

/* Main creator overlay */
#gtag-creator-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  z-index: 10000;
  display: flex;
  overflow: auto;
}

/* Creator container */
.gtag-creator-container {
  display: flex;
  width: 100%;
  height: 100%;
  max-width: 1400px;
  margin: 0 auto;
  background: white;
}

/* Canvas panel */
.gtag-creator-canvas-panel {
  flex: 1;
  padding: 20px;
  background: #f8f9fa;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.gtag-creator-canvas-panel h3 {
  margin: 0 0 20px 0;
  color: #333;
}

.gtag-creator-canvas {
  border: 2px solid #333;
  cursor: crosshair;
  background: white;
  border-radius: 4px;
}

/* Title container with controls */
.gtag-title-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  position: relative;
  min-height: 40px;
}

.gtag-title-container h3 {
  margin: 0;
  color: #333;
  flex-grow: 1;
  line-height: 1.3;
}

/* Canvas controls overlay */
.gtag-canvas-controls-overlay {
  position: absolute;
  top: -2px;
  left: 270px;
  background: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 11px;
  z-index: 100;
  min-width: 180px;
  max-width: 220px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
  backdrop-filter: blur(4px);
  display: flex;
  gap: 12px;
}

.gtag-canvas-controls-overlay:hover {
  background: rgba(0, 0, 0, 0.9);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Two-column layout for controls */
.gtag-controls-left {
  flex: 1;
  min-width: 80px;
}

.gtag-controls-right {
  flex: 1;
  min-width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gtag-canvas-controls-overlay label {
  display: block;
  margin-bottom: 3px;
  font-weight: 500;
  font-size: 11px;
}

.gtag-canvas-controls-overlay #opacity-value {
  font-weight: bold;
  color: #4CAF50;
  font-size: 11px;
}

.gtag-canvas-controls-overlay input[type="range"] {
  width: 100%;
  margin: 4px 0 6px 0;
  cursor: pointer;
  height: 4px;
  border-radius: 2px;
  background: #444;
  outline: none;
  appearance: none;
}

.gtag-canvas-controls-overlay input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
  border: 1px solid white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.gtag-canvas-controls-overlay input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
  border: 1px solid white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.gtag-checkbox-label {
  display: flex !important;
  align-items: center;
  margin: 0 !important;
  cursor: pointer;
  justify-content: flex-start;
}

.gtag-checkbox-label input[type="checkbox"] {
  margin-right: 6px;
  transform: scale(1.1);
}

/* Persistent autosave wrapper - holds status badge + toggle side-by-side */
.persistent-autosave-wrapper {
  position: absolute;
  top: 0;
  left: -320px; /* Position to the left of the title (same as old status position) */
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 95;
}

/* Persistent autosave status - inside wrapper now */
.persistent-autosave-status {
  background: rgba(45, 85, 145, 0.9);
  color: white !important;
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 10px;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  min-width: 120px;
  max-width: 160px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease;
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Status badge: autosave enabled (blue) */
.persistent-autosave-status.autosave-enabled {
  background: rgba(45, 85, 145, 0.9);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Status badge: autosave disabled (red) */
.persistent-autosave-status.autosave-disabled {
  background: rgba(180, 40, 40, 0.9);
  border-color: rgba(255, 80, 80, 0.25);
}

.persistent-autosave-status:hover {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
}

/* ===== Autosave Toggle Button ===== */
.autosave-toggle-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  outline: none;
  flex-shrink: 0;
}

.autosave-toggle-track {
  display: block;
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 20px;
  transition: background 0.25s ease, box-shadow 0.25s ease;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.autosave-toggle-knob {
  display: block;
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Toggle OFF state (red track, knob left) */
.autosave-toggle-btn.autosave-toggle-off .autosave-toggle-track {
  background: rgba(180, 40, 40, 0.85);
}

.autosave-toggle-btn.autosave-toggle-off .autosave-toggle-knob {
  transform: translateX(0);
}

/* Toggle ON state (green track, knob right) */
.autosave-toggle-btn.autosave-toggle-on .autosave-toggle-track {
  background: #2dd4a8;
}

.autosave-toggle-btn.autosave-toggle-on .autosave-toggle-knob {
  transform: translateX(16px);
}

.autosave-toggle-btn:hover .autosave-toggle-track {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 6px rgba(255, 255, 255, 0.15);
}

.gtag-checkbox-label span {
  font-size: 11px;
  color: white;
}

.gtag-creator-instructions {
  margin-top: 10px;
  color: #666;
  text-align: center;
}

.gtag-creator-instructions strong {
  color: #333;
}

/* Control panel */
.gtag-creator-control-panel {
  width: 400px;
  padding: 20px;
  background: white;
  overflow-y: auto;
  border-left: 1px solid #ddd;
}

.gtag-creator-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.gtag-creator-header h3 {
  margin: 0;
  color: #333;
}

#close-creator {
  padding: 5px 10px;
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

/* Form sections */
.form-section {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

/* Thumbnail Override specific styling */
.form-section #thumb-override-status {
  font-size: 11px;
  font-weight: normal;
  padding: 2px 4px;
  border-radius: 3px;
  display: inline-block;
  min-width: 80px;
}

.form-section #thumb-override-preview {
  background: #f8f9fa;
  border: 1px solid #e1e5ea;
  border-radius: 4px;
  padding: 8px;
  margin-top: 8px;
}

.form-section #thumb-override-preview-img {
  max-width: 150px;
  max-height: 85px;
  border: 1px solid #ddd;
  border-radius: 3px;
  background: white;
  display: block;
}

.form-section h4 {
  margin: 0 0 10px 0;
  color: #333;
}

.form-section label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #555;
}

.form-section input,
.form-section textarea,
.form-section select {
  width: 100%;
  padding: 5px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-family: inherit;
}

.form-section textarea {
  resize: vertical;
  font-family: inherit;
}

/* Mode buttons */
.mode-btn {
  flex: 1;
  min-width: 120px;
  padding: 8px;
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.2s;
}

.mode-btn.active {
  background: #007bff;
}

.mode-btn:hover {
  opacity: 0.9;
}

/* Marker items */
/* Base marker item styles - applies to ALL marker items */
.marker-item {
  background: #02482fff;
  color: #ffffff;
  padding: 10px 12px;
  margin-bottom: 6px;
  border-radius: 6px;
  position: relative;
}

/* Child grid items - separate styling from markers */
#child-grids-list .marker-item {
  display: flex;
  justify-content: space-between;
  align-items: stretch; /* allow content to stretch vertically */
  grid-template-columns: none; /* override grid layout */
  gap: 15px; /* increased gap for more breathing room */
  min-height: auto;
  margin-bottom: 8px; /* increased gap between items */
  border-radius: 8px; /* more rounded corners */
}

#child-grids-list .marker-item > div:first-child {
  flex: 1;
  align-self: stretch;
  display: block; /* override flexbox from marker styling */
  color: #ffffff; /* ensure white text */
  min-width: 0; /* allow text to wrap if needed */
}

#child-grids-list .marker-item > div:first-child strong {
  color: #ffffff; /* white title text */
}

#child-grids-list .marker-item > div:first-child small {
  color: #e9ecef; /* light gray for secondary text */
}

#child-grids-list .marker-item > div:last-child {
  flex-shrink: 0;
  display: flex;
  flex-direction: column; /* stack buttons vertically */
  gap: 9px; /* small gap between buttons */
  align-items: stretch; /* make buttons same width */
  width: 120px; /* fixed width for button column */
  justify-content: center; /* center buttons vertically */
}

#child-grids-list .marker-item button {
  padding: 6px 8px; /* slightly larger padding */
  font-size: 11px;
  height: auto;
  white-space: nowrap;
  margin: 0;
  width: 100%; /* full width of button column */
}

/* Level markers inherit child grid styling */
#level-markers-list .marker-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  grid-template-columns: none;
  gap: 10px;
  min-height: auto;
  margin-bottom: 8px;
  border-radius: 8px;
}

/* Improved marker item layout - ONLY for main markers list */
#markers-list .marker-item {
  background: #02482fff;
  color: #ffffff;
  padding: 10px 12px;
  margin-bottom: 5px;
  border-radius: 6px;
  display: grid;
  grid-template-columns: 1fr 50px 85px; /* info | move-group | main actions */
  gap: 10px;
  align-items: center; /* center all columns vertically */
  line-height: 0.8;
  min-height: 60px; /* ensure consistent height */
  position: relative;
}
/* Apply marker grid styles only to markers in the main markers list */
#markers-list .marker-item .marker-info { 
  grid-column: 1; 
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#markers-list .marker-item .marker-info strong {
  display: block;
  font-size: 14px;
  margin-bottom: 3px;
  font-weight: 600;
}
#markers-list .marker-item .marker-info small {
  display: block;
  font-size: 11px;
  color: #d0e2dc;
  margin-bottom: 1px;
}
#markers-list .marker-item .marker-info small[style*="Arrow Path"] { 
  margin-top: 2px;
  margin-bottom: 0;
}
#markers-list .marker-item .move-group { 
  grid-column: 2; 
  display: flex; 
  flex-direction: column; 
  gap: 3px; 
  align-items: stretch;
  justify-self: center;
}
#markers-list .marker-item .move-group button { 
  width: 100%; 
  height: 24px;
  font-size: 12px;
  font-weight: bold;
  margin: 5px;
}
#markers-list .marker-item .main-actions { 
  grid-column: 3; 
  display: flex; 
  flex-direction: column; 
  gap: 5px; 
  align-items: stretch;
}
#markers-list .marker-item .main-actions button {
  height: 26px;
  font-size: 10px;
  font-weight: 500;
}
.marker-item button { 
  padding: 4px 8px; 
  background: #495057; 
  color: #fff; 
  border: none; 
  border-radius: 4px; 
  cursor: pointer; 
  font-size: 11px; 
  line-height: 1.1; 
  display: inline-flex; 
  justify-content: center; 
  align-items: center; 
  gap: 2px; 
  box-shadow: 0 1px 2px rgba(0,0,0,0.3); 
  transition: background-color .15s ease, transform .15s ease;
  white-space: nowrap;
}
.marker-item button[disabled] { opacity: .45; cursor: not-allowed; }
.marker-item button:hover:not([disabled]) { background: #5c636a; transform: translateY(-1px); }
.marker-item button:active:not([disabled]) { transform: translateY(0); }

/* Color intent overrides */
.marker-item button[style*="#dc3545"], .marker-item button.delete-btn { background:#dc3545; }
.marker-item button[style*="#007bff"], .marker-item button.edit-btn { background:#007bff; }
.marker-item button[style*="#17a2b8"], .marker-item button.path-btn.include { background:#17a2b8; }
.marker-item button[style*="#ffc107"], .marker-item button.path-btn.exclude { background:#ffc107; color:#212529; }
.marker-item button[style*="#28a745"], .marker-item button.ok-btn { background:#28a745; }

/* Manual number pill */
.marker-item .manual-number-pill {
  background: #ffc107;
  color: #212529;
  font-size: 14px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 12px;
  display: inline-block;
  margin: -6px 0 8px;
  width: fit-content;
}

.marker-item button {
  padding: 2px 6px;
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  font-size: 10px;
  margin-left: 5px;
}

.marker-item button:hover {
  opacity: 0.8;
}

/* Level marker editor specific styles */
/* Level markers inherit .marker-item styling */

#level-markers-list .marker-item strong {
  color: white;
}

#level-markers-list .marker-item small {
  color: #e9ecef;
}

#level-markers-list .marker-item button {
  padding: 2px 6px;
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  font-size: 10px;
  margin-left: 5px;
}

#level-markers-list .marker-item button:hover {
  opacity: 0.8;
}

/* Coordinates display */
#coordinates-display,
#child-coordinates-display {
  background: #1e3a5f;
  color: white;
  padding: 10px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 12px;
  max-height: 120px;
  overflow-y: auto;
  white-space: pre-wrap;
}

/* Action buttons */
.gtag-creator-action-btn {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 10px;
  font-weight: bold;
  transition: all 0.2s ease;
}

.gtag-creator-action-btn.primary {
  background: #007bff;
  color: white;
}

.gtag-creator-action-btn.success {
  background: #28a745;
  color: white;
}

.gtag-creator-action-btn.warning {
  background: #ffc107;
  color: #212529;
}

.gtag-creator-action-btn.info {
  background: #17a2b8;
  color: white;
}

.gtag-creator-action-btn.secondary {
  background: #6c757d;
  color: white;
}

.gtag-creator-action-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Show More Actions Styling */
#toggle-more-actions {
  background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
  border: 1px solid rgba(255,255,255,0.1);
  position: relative;
  overflow: hidden;
}

#toggle-more-actions:hover {
  background: linear-gradient(135deg, #138496 0%, #117a8b 100%);
}

#toggle-more-actions .toggle-icon {
  transition: transform 0.3s ease;
}

#toggle-more-actions.expanded .toggle-icon {
  transform: rotate(180deg);
}

/* Secondary actions animation */
.secondary-actions {
  display: block;
  overflow: hidden;
  transition: all 0.3s ease;
  max-height: 0;
  opacity: 0;
}

.secondary-actions.show {
  display: block !important;
  max-height: 600px; /* enough for all buttons */
  opacity: 1;
  margin-top: 5px;
}

/* Subtle separator between primary and secondary actions */
.secondary-actions.show::before {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(0,0,0,0.1), transparent);
  margin: 8px 0 12px;
}

.gtag-creator-action-btn:hover {
  opacity: 0.9;
}

/* ===== DIALOG STYLES ===== */

/* Marker edit dialog */
#marker-edit-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  color: #333;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  z-index: 10000;
  width: 700px;
  max-height: 80vh;
  overflow-y: auto;
}

#marker-edit-dialog h3 {
  margin: 0 0 20px 0;
  color: #222;
}

#marker-edit-dialog textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font-family: monospace;
  font-size: 12px;
}

#marker-edit-dialog input[type="text"] {
  width: 100%;
  min-width: 400px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

#marker-edit-dialog input[type="text"].mirroring {
  background-color: #e6f3ff;
  border-color: #0066cc;
  border-width: 2px;
  position: relative;
  padding-right: 35px;
}

#marker-edit-dialog input[type="text"].mirroring::placeholder {
  color: #0066cc;
  font-style: italic;
}

/* Mirroring state wrapper for better positioning */
.mirroring-field-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.mirroring-indicator {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: #0066cc;
  pointer-events: none;
  z-index: 10;
  background: #e6f3ff;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 600;
  border: 1px solid #0066cc;
  opacity: 0.9;
}

.mirroring-watermark {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #0066cc;
  font-style: italic;
  font-size: 13px;
  pointer-events: none;
  z-index: 5;
  opacity: 0.7;
}

#marker-edit-dialog #edit-manual-number {
  width: 30% !important;
  max-width: 150px;
  min-width: 100px;
}

/* Level edit dialog */
#level-edit-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  color: #333;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 4px 25px rgba(0,0,0,0.3);
  z-index: 10000;
  width: 600px;
  max-height: 80vh;
  overflow-y: auto;
}

#level-edit-dialog h3 {
  color: #222;
  margin: 0 0 20px 0;
}

#level-edit-dialog h4 {
  color: #444;
  margin: 15px 0 10px 0;
}

#level-edit-dialog label {
  color: #555;
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

#level-edit-dialog p {
  color: #666;
}

#level-edit-dialog input,
#level-edit-dialog textarea {
  color: #333;
  background: white;
  border: 1px solid #ddd;
  width: 100%;
  box-sizing: border-box;
}

#level-edit-dialog textarea {
  resize: vertical;
  font-family: monospace;
  font-size: 12px;
}

#level-edit-dialog .edit-section {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

/* Dialog overlays */
#marker-edit-overlay,
#level-edit-overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
}

[id^="level-marker-edit-overlay"] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 10002;
}

/* Edit sections */
.edit-section {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.edit-section label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

.edit-section h4 {
  margin: 0 0 10px 0;
  color: #333;
}

/* Type buttons */
.type-btn {
  padding: 8px 12px;
  border: 2px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  color: #333;
}

.type-btn.selected {
  border-color: #007bff;
  background: #e7f3ff;
  color: #007bff;
}

.type-btn:hover {
  border-color: #007bff;
}

/* Child grid specific styles */
.child-grid-editor {
  background: #e3f2fd;
  padding: 15px;
  border-radius: 4px;
}

.child-grid-editor h4 {
  margin: 0 0 15px 0;
  color: #333;
}

/* Button groups */
.button-group {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.button-group button {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}

.btn-primary {
  background: #007bff;
  color: white;
}

.btn-success {
  background: #28a745;
  color: white;
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-danger {
  background: #dc3545;
  color: white;
}

.btn-warning {
  background: #ffc107;
  color: #000;
}

.btn-info {
  background: #17a2b8;
  color: white;
}

/* Overview displays */
#level-relationships-display,
#horizontal-relationships-display {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 4px;
  min-height: 100px;
  color: #333;
}

/* Grid buttons container */
[data-grid-buttons] {
  position: fixed;
  bottom: 250px;
  right: 20px;
  z-index: 9999;
  display: none; /* Hidden by default */
  flex-direction: column;
  gap: 10px;
}

/* Show when grid admin is enabled */
[data-grid-buttons].grid-admin-enabled {
  display: flex;
}

[data-grid-buttons] button {
  padding: 8px 12px;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s ease;
  text-align: center;
  min-height: 32px;
}

/* CRITICAL FIX: Use specific classes instead of nth-child selectors */
/* This prevents styling issues when button order changes */

/* Test Grid Display button */
[data-grid-buttons] .grid-test-display-btn {
  background: #007bff; /* Blue */
}

/* Hide Grid Display button */
[data-grid-buttons] .grid-hide-display-btn {
  background: #dc3545; /* Red */
}

/* Toggle Boundary button */
[data-grid-buttons] .grid-toggle-boundary-btn {
  background: #6f42c1; /* Purple */
}

/* Toggle Polygons button */
[data-grid-buttons] .grid-toggle-polygons-btn {
  background: #fd7e14; /* Orange */
}

/* G-tag Creator button */
[data-grid-buttons] .gtag-creator-btn {
  background: #6c757d; /* Gray */
}

/* Show Grid button */
[data-grid-buttons] .show-grid-btn {
  background: #28a745; /* Green - already set inline but adding for consistency */
}

/* Hover effects for each button using specific classes */
[data-grid-buttons] .grid-test-display-btn:hover {
  background: #0056b3;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

[data-grid-buttons] .grid-hide-display-btn:hover {
  background: #c82333;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

[data-grid-buttons] .grid-toggle-boundary-btn:hover {
  background: #5a2d91;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(111, 66, 193, 0.3);
}

[data-grid-buttons] .grid-toggle-polygons-btn:hover {
  background: #e55100;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(253, 126, 20, 0.3);
}

[data-grid-buttons] .gtag-creator-btn:hover {
  background: #545b62;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3);
}

[data-grid-buttons] .show-grid-btn:hover {
  background: #218838;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

/* Active state for all buttons */
[data-grid-buttons] button:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Fix label visibility in child grid editor */
.child-grid-editor label {
  color: #333 !important;
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}

.child-grid-editor input,
.child-grid-editor textarea,
.child-grid-editor select {
  color: #333;
  background: white;
  border: 1px solid #ddd;
}

/* Level marker edit dialog (uses unique IDs */
[id^="level-marker-edit-dialog"] {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  color: #333;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  z-index: 10004;
  width: 500px;
  max-height: 80vh;
  overflow-y: auto;
}

[id^="level-marker-edit-dialog"] h3 {
  margin: 0 0 20px 0;
  color: #222;
}

[id^="level-marker-edit-dialog"] h4 {
  color: #444;
  margin: 15px 0 10px 0;
}

[id^="level-marker-edit-dialog"] label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #444;
}

[id^="level-marker-edit-dialog"] input,
[id^="level-marker-edit-dialog"] select,
[id^="level-marker-edit-dialog"] textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 10px;
  box-sizing: border-box;
}

[id^="level-marker-edit-dialog"] input[type="text"] {
  min-width: 400px;
  font-size: 14px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

[id^="level-marker-edit-dialog"] input[type="text"].mirroring {
  background-color: #e6f3ff;
  border-color: #0066cc;
  border-width: 2px;
  padding-right: 35px;
}

[id^="level-marker-edit-dialog"] input[type="text"].mirroring::placeholder {
  color: #0066cc;
  font-style: italic;
}

[id^="level-marker-edit-dialog"] input[id*="manual-number"] {
  width: 30% !important;
  max-width: 150px;
  min-width: 100px;
}

[id^="level-marker-edit-dialog"] textarea {
  resize: vertical;
  font-family: monospace;
  font-size: 12px;
}

[id^="level-marker-edit-dialog"] .edit-section {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

/* Level marker dialog buttons */
[id^="level-marker-edit-dialog"] button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  margin-right: 8px;
}

[id^="level-marker-edit-dialog"] button:last-child {
  margin-right: 0;
}

/* Ensure type buttons work properly in level marker dialogs */
[id^="level-marker-edit-dialog"] .type-btn {
  padding: 8px 12px;
  border: 2px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  color: #333;
  margin-right: 8px;
}

[id^="level-marker-edit-dialog"] .type-btn:hover {
  border-color: #007bff;
  background: #f8f9fa;
}

[id^="level-marker-edit-dialog"] .type-btn.selected,
[id^="level-marker-edit-dialog"] .type-btn[aria-checked="true"] {
  border-color: #007bff;
  background: #007bff;
  color: white;
}

/* Level Information Display in Level Marker Editor */
.gtag-creator-control-panel .form-section p {
  color: #333;
  margin: 8px 0;
  line-height: 1.4;
}

.gtag-creator-control-panel .form-section p strong {
  color: #222;
  font-weight: bold;
}

/* Ensure all text in form sections is visible */
.gtag-creator-control-panel .form-section {
  color: #333;
}

.gtag-creator-control-panel h4 {
  color: #222;
  margin-bottom: 10px;
}

/* ===== GRID CREATOR DIALOG STYLES ===== */

/* Load Grid Dialog */
/* Enhanced Load Grid Dialog (parent-centric with expandable children) */
.load-grid-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  /* Apply scale AFTER translate so dialog + contents enlarge uniformly by 15% */
  transform: translate(-50%, -50%) scale(1.15);
  background: #ffffff;
  border: 2px solid #007bff;
  border-radius: 14px;
  padding: 18px 22px 12px 22px;
  max-width: 760px; /* base logical width before scale; visual = 760 * 1.15 */
  width: 90%;
  max-height: 560px; /* base logical height before scale */
  overflow-y: auto;
  z-index: 10001;
  box-shadow: 0 8px 28px rgba(0,0,0,0.25);
  color: #333;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.load-grid-dialog .load-grid-header { 
  position: sticky; 
  top: 0; 
  background: linear-gradient(135deg,#007bff 0%,#0056b3 100%);
  padding: 12px 18px; 
  border-radius: 10px; 
  box-shadow: 0 2px 4px rgba(0,0,0,0.15); 
  color: #fff; 
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.load-grid-dialog .load-grid-title { 
  margin: 0; 
  font-size: 18px; 
  font-weight: 600; 
  letter-spacing: .5px;
}

.load-grid-close-btn {
  background: transparent;
  border: none;
  font-size: 32px;
  line-height: 1;
  color: #ffffff;
  cursor: pointer;
  padding: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background-color 0.2s, transform 0.1s;
  opacity: 0.9;
}

.load-grid-close-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
  opacity: 1;
  transform: scale(1.1);
}

.load-grid-close-btn:active {
  transform: scale(0.95);
}

.parent-grids-container { 
  display: flex; 
  flex-direction: column; 
  gap: 12px; 
}

.parent-grid-item { 
  background: #f8faff; 
  border: 1px solid #d4e5f9; 
  border-radius: 10px; 
  padding: 14px 16px 10px 16px; 
  position: relative; 
  overflow: hidden; 
  transition: border-color .25s, box-shadow .25s, background .25s; 
}
.parent-grid-item:hover { 
  border-color: #6cb3ff; 
  box-shadow: 0 4px 12px rgba(0, 123, 255, .18);
  background: #f0f7ff;
}

.parent-grid-header { 
  display: flex; 
  align-items: flex-end; 
  justify-content: space-between; 
  gap: 14px; 
}
.parent-grid-info { 
  display: flex; 
  flex-direction: column; 
  gap: 3px; 
  min-width: 0; 
  flex: 1;
}
.parent-grid-title { 
  font-size: 18px; /* Increased for better readability */
  font-weight: 600; 
  color: #1d4f91; 
  white-space: nowrap; 
  text-overflow: ellipsis; 
  overflow: hidden; 
  max-width: 320px;
}

/* Enhanced filename display with OS number badge */
.parent-grid-filename {
  font-size: 16px;
  font-weight: 600;
  color: #1d4f91;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.filename-base {
  font-weight: 600;
}

/* Children count badge on Show Children button */
.children-count-badge {
  display: inline-block;
  background: linear-gradient(135deg, #28a745, #1e7e34);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 12px;
  margin-left: 6px;
  vertical-align: middle;
  box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
}

/* Grid title as secondary identifier */
.grid-secondary-title {
  font-size: 14px;
  font-weight: 500;
  color: #2d3e50;
  margin-bottom: 4px;
}

/* Grid description display */
.grid-description {
  font-size: 11px;
  color: #495057;
  font-style: italic;
  line-height: 1.4;
  margin-bottom: 6px;
  max-width: 450px;
}

.grid-description.placeholder {
  color: #6c757d;
  opacity: 0.8;
}

/* Grid ID reference at bottom - more visible */
.grid-id-ref {
  display: block;
  font-family: 'Courier New', Courier, monospace;
  font-size: 10px;
  color: #495057;
  margin-top: 6px;
  padding: 3px 6px;
  background: #e9ecef;
  border-radius: 4px;
  border: 1px solid #ced4da;
  width: fit-content;
  font-weight: 500;
}

.modified-date { 
  display: block; 
  font-size: 12px;
  color: #495057;
  font-weight: 500;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid #e5e9f0;
}
.parent-grid-actions { 
  display: flex; 
  align-items: flex-end; 
  gap: 6px; 
  flex-wrap: wrap; 
  align-self: flex-end;
  margin-bottom: 2px;
}
.toggle-children-btn { 
  background: #ffffff; 
  color: #0056b3; 
  border: 1px solid #80bfff; 
  padding: 4px 10px; 
  font-size: 12px; 
  font-weight: 600; 
  border-radius: 16px; 
  cursor: pointer; 
  transition: all .25s; 
  box-shadow: 0 1px 2px rgba(0,0,0,.1);
  position: relative;
}
.toggle-children-btn:hover { 
  background: #0056b3; 
  color: #fff; 
  border-color: #0056b3; 
  box-shadow: 0 3px 6px rgba(0,0,0,.18);
}
.toggle-children-btn[aria-expanded="true"] { 
  background: #0056b3; 
  color: #fff;
}

/* Notification-style badge on Show Children button (using ::after pseudo-element) */
.toggle-children-btn.has-badge::after {
  content: attr(data-children-count);
  position: absolute;
  top: -15px;
  right: -14px;
  background: linear-gradient(135deg, #dc3545, #c82333);
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(220, 53, 69, 0.4);
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  border: 1.5px solid #ffffff;
  z-index: 1;
}

.children-wrapper { 
  margin-top: 12px; 
  background: #ffffff; 
  border: 1px dashed #c2d9ef; 
  padding: 12px 12px 4px 12px; 
  border-radius: 8px; 
  animation: fadeSlideIn .35s ease; 
}
.no-children-state { 
  font-size: 12px; 
  color: #6c757d; 
  font-style: italic; 
  text-align: center; 
  padding: 6px 0;
}

.child-grid-list { 
  display: grid; 
  grid-template-columns: repeat(auto-fill,minmax(180px,1fr));
  gap: 10px 12px; 
  width: 100%;
}
.child-grid-item { 
  background: linear-gradient(135deg,#f6faff,#eef6ff); 
  border: 1px solid #d5e6f9; 
  border-radius: 8px; 
  padding: 8px 10px 6px 10px; 
  display: flex; 
  flex-direction: column; 
  gap: 4px; 
  position: relative; 
  min-height: 70px; 
  transition: border-color .25s, box-shadow .25s; 
}
.child-grid-item:hover { 
  border-color: #6cb3ff; 
  box-shadow: 0 3px 10px rgba(0,123,255,.18);
}
.child-grid-top { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 6px; 
}
.child-grid-title { 
  font-size: 14px; 
  font-weight: 600; 
  color: #17457d; 
  line-height: 1.15; 
  flex: 1 1 auto; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  max-width: 130px; 
}

/* Child grid description */
.child-grid-description {
  font-size: 10px;
  color: #495057;
  font-style: italic;
  line-height: 1.3;
  margin: 2px 0 4px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.child-grid-label-row { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 6px; 
}
.child-grid-name { 
  font-size: 13px; /* Increased font size */
  font-family: monospace; 
  font-weight: 600; 
  color: #1d4f91; 
  white-space: nowrap; 
  text-overflow: ellipsis; 
  overflow: hidden; 
  max-width: 140px;
}
.child-grid-status { 
  font-size: 11px; /* Not critical but adjusted */
  line-height: 1; 
  padding: 0; 
  margin-left: auto; 
  display: inline-block; 
  width: 16px; /* Enlarged indicator */
  height: 16px; /* Enlarged indicator */
  border-radius: 50%; 
  box-shadow: 0 0 0 2px #fff inset, 0 0 0 1px rgba(0,0,0,.15);
}
.child-grid-status.ok { 
  background: #28a745; 
}
.child-grid-status.missing { 
  background: #ffc107; 
}
.child-grid-actions { 
  display: flex; 
  align-items: center; 
  gap: 4px; 
  margin-top: auto; 
  flex-wrap: wrap; 
}
.child-grid-meta { 
  display: flex; 
  align-items: center; 
  flex-wrap: wrap; 
  gap: 4px 6px; 
  font-size: 11px; 
  margin-top: 2px; 
}
.child-grid-id { 
  font-size: 10px; 
  background: #fff; 
  padding: 2px 4px; 
  border-radius: 4px; 
  border: 1px solid #d5e6f9; 
  color: #396298; 
  max-width: 100%; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}
.child-grid-stats { 
  display: flex; 
  flex-direction: column; 
  gap: 2px; 
  margin: 4px 0 2px 0; 
}
.stat-row { 
  display: flex; 
  justify-content: space-between; 
  font-size: 11px; 
  background: #ffffff; 
  border: 1px solid #d5e6f9; 
  padding: 2px 6px; 
  border-radius: 4px; 
  line-height: 1.2; 
  font-weight: 500; 
}
.stat-row.stat-elements { background: #eef7ff; }
.stat-row.stat-children { background: #fff5e8; border-color: #f3dcc0; }
.stat-row.stat-levels { background: #6efd7c93; border-color: #d7e2fb; }
.stat-label { 
  color: #1d4f91; 
}
.stat-value { 
  color: #084298; 
  font-weight: 600; 
}
.child-grid-chains { 
  display: flex; 
  flex-direction: column; 
  gap: 4px; 
  padding: 6px 8px 8px 8px; 
  background: #f0f7ff; 
  border: 1px solid #cfe3f9; 
  border-radius: 6px; 
  margin-bottom: 10px; 
  animation: fadeSlideIn .4s ease; 
}
.chains-header { 
  font-size: 12px; 
  font-weight: 600; 
  color: #17457d; 
  margin: 2px 0 4px 2px; 
  letter-spacing: .3px; 
}
.chain-row { 
  display: flex; 
  align-items: center; 
  gap: 4px; 
  flex-wrap: wrap; 
}
.chain-node { 
  background: #ffffff; 
  border: 1px solid #b9d6f5; 
  border-radius: 14px; 
  padding: 3px 10px; 
  font-size: 11px; 
  font-weight: 600; 
  color: #0b4c91; 
  cursor: pointer; 
  transition: background .25s, color .25s, box-shadow .25s; 
  max-width: 160px; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}
.chain-node:hover { 
  background: #0b4c91; 
  color: #fff; 
  box-shadow: 0 2px 6px rgba(0,0,0,.18); 
}
.chain-arrow { 
  font-size: 14px; 
  color: #0b4c91; 
  opacity: .75; 
}
.highlight-flash { 
  animation: highlightFlash 1.2s ease; 
}
@keyframes highlightFlash { 
  0% { box-shadow: 0 0 0 0 rgba(0,123,255,.8); }
  50% { box-shadow: 0 0 0 6px rgba(0,123,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,123,255,0); }
}
.meta-pill { 
  background: #e1efff; 
  color: #15406f; 
  padding: 2px 6px; 
  font-size: 10px; 
  font-weight: 600; 
  border-radius: 12px; 
  line-height: 1.2; 
  letter-spacing: .3px; 
  display: inline-flex; 
  align-items: center; 
  gap: 2px; 
  border: 1px solid #c6def9; 
}
.meta-pill.coc { 
  background: #ffe9d9; 
  color: #8b3d00; 
  border-color: #ffd0ad; 
}
.mini-btn { 
  background: #007bff; 
  color: #fff; 
  border: none; 
  font-size: 11px; 
  padding: 4px 8px; 
  border-radius: 4px; 
  cursor: pointer; 
  font-weight: 600; 
  letter-spacing: .3px; 
  box-shadow: 0 1px 2px rgba(0,0,0,.15); 
  transition: background .2s, transform .2s;
}
.mini-btn:hover { 
  background: #0056b3; 
  transform: translateY(-1px);
}
.mini-btn.danger { 
  background: #dc3545; 
}
.mini-btn.danger:hover { 
  background: #a71d2a; 
}

.drafts-section { 
  border-top: 1px solid #e2e8f0; 
  padding-top: 10px; 
}
.drafts-toggle { 
  background: #e9f3ff; 
  border: 1px solid #bdd9f8; 
  padding: 6px 14px; 
  font-size: 13px; 
  border-radius: 20px; 
  font-weight: 600; 
  cursor: pointer; 
  transition: all .25s; 
  color: #1d4f91; 
  display: inline-block; 
  margin-bottom: 8px; 
}
.drafts-toggle:hover { 
  background: #1d4f91; 
  color: #fff; 
  border-color: #1d4f91;
}
.drafts-toggle[data-expanded="true"] { 
  background: #1d4f91; 
  color: #fff;
}
.drafts-list { 
  display: flex; 
  flex-direction: column; 
  gap: 8px; 
  animation: fadeSlideIn .35s ease;
}

.grid-item-main-row { 
  display: flex; 
  justify-content: space-between; 
  align-items: flex-start; 
  gap: 10px;
}
.grid-item-text { 
  display: flex; 
  flex-direction: column; 
  gap: 3px; 
  font-size: 13px;
}
.grid-item-actions { 
  display: flex; 
  gap: 4px; 
  flex-wrap: wrap; 
  align-items: center;
}

.load-grid-footer { 
  display: flex; 
  justify-content: flex-end; 
  padding-top: 6px; 
  border-top: 1px solid #d9e2ec; 
  margin-top: 4px; 
}

@keyframes fadeSlideIn { 
  0% { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Grid Items in Load Dialog */
.grid-item {
  border: 1px solid #ddd;
  padding: 10px;
  margin: 5px 0;
  border-radius: 4px;
}

.grid-item.draft {
  border: 1px solid #ffc107;
  background: #fff8e1;
}

/* Dialog Buttons */
.grid-dialog-btn {
  border: none;
  padding: 5px 10px;
  border-radius: 3px;
  margin-top: 5px;
  color: white;
  cursor: pointer;
  font-weight: normal;
}

.grid-dialog-btn.load {
  background: #28a745;
}

.grid-dialog-btn.load-draft {
  background: #17a2b8;
}

.grid-dialog-btn.delete {
  background: #dc3545;
}

.grid-dialog-btn.close {
  background: #6c757d;
  padding: 10px 20px;
}

.grid-dialog-btn.edit {
  background: #007bff;
  margin-right: 5px;
}

/* Level Marker Editor Overlay */
.level-marker-editor-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  z-index: 10001;
  display: flex;
  overflow: auto;
}

/* Level Editor Enhancements */
.level-marker-editor-container .mode-btn {
  background:#2f3b45;
  color:#ddd;
  border:1px solid #44535f;
  padding:6px 10px;
  font-size:12px;
  border-radius:4px;
  cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
.level-marker-editor-container .mode-btn.active {
  background:#0d6efd;
  color:#fff;
  border-color:#0d6efd;
  box-shadow:0 0 0 1px rgba(255,255,255,0.15) inset;
}
.level-marker-editor-container .mode-btn:hover:not(.active) { background:#394854; color:#fff; }
.level-marker-editor-container #level-editor-instructions { font-size:12px; line-height:1.4; }
.level-marker-editor-container #level-editor-instructions strong { font-size:12px; }

/* Relationship Display Containers */
.relationship-group {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.relationship-group h5 {
  margin: 0 0 10px 0;
  color: #333;
}

.relationship-group .base-grid-info {
  margin-bottom: 10px;
}

.relationship-group .levels-list {
  margin: 5px 0;
  padding-left: 20px;
}

/* Horizontal Links */
.horizontal-links-container h5 {
  margin: 0 0 15px 0;
  color: #333;
}

.horizontal-link-item {
  margin-bottom: 10px;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 4px;
}

.horizontal-link-arrow {
  color: #666;
}

.horizontal-link-details {
  color: #666;
}

/* Empty State Messages */
.empty-state-message {
  color: #666;
  text-align: center;
  padding: 20px;
}

/* ===== RESPONSIVE DESIGN ===== */

@media (max-width: 768px) {
  .load-grid-dialog {
    max-width: 90%;
    max-height: 80%;
    padding: 15px;
  }
  
  .grid-dialog-btn {
    padding: 8px 12px;
    margin: 3px;
  }
}

/* ===== GRID HIERARCHY SUPPORT STYLES ===== */

/* Child Grid Boundaries */
.child-grid-boundary {
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.child-grid-boundary:hover {
  opacity: 0.8;
}

/* Child Grid Polygon Outlines */
.child-grid-outline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
}

/* Child Grid Labels */
.child-grid-label {
  position: absolute;
  background: rgba(0, 150, 255, 0.9);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  pointer-events: none;
  z-index: 55;
  font-family: Arial, sans-serif;
}

/* Navigation Controls Container */
.grid-navigation-controls {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 56;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 30px;
  height: 52px;
}

.grid-navigation-controls.collapsed {
  width: 30px !important;
  padding: 0;
}

.grid-navigation-controls.expanded {
  width: auto;
  padding: 8px 8px 2px 2px;
}

/* Collapse Toggle - Integrated into Container */
.nav-collapse-toggle {
  width: 20px;
  height: 90%;
  background: transparent;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  padding: 0 0 4px 0;
  margin: 0;
}

.nav-collapse-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  border-right-color: rgba(255, 255, 255, 0.2);
}

.nav-collapse-toggle:active {
  background: rgba(255, 255, 255, 0.12);
}

.nav-collapse-toggle.collapsed {
  width: 25px;
  border-right: none;
  border-radius: 8px;
  margin: 2px;
}

.nav-collapse-toggle.collapsed:hover {
  background: rgba(255, 255, 255, 0.15);
}

.nav-collapse-toggle .collapse-icon {
  width: 10px !important;
  height: 10px !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  opacity: 0.7;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  filter: brightness(0) invert(1); /* Makes the arrow white */
  user-select: none;
  display: block;
  object-fit: contain !important;
  z-index: auto !important;
}

/* Specific class for navigation arrow icons to override global img styles */
.nav-arrow-icon {
  width: 16px !important;
  height: 16px !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  object-fit: contain !important;
  z-index: auto !important;
}

.nav-collapse-toggle:hover .collapse-icon {
  opacity: 0.9;
  transform: scale(1.1);
  filter: brightness(0) invert(1) drop-shadow(0 0 2px rgba(255, 255, 255, 0.3));
}

.nav-collapse-toggle.collapsed .collapse-icon {
  opacity: 0.9;
  transform: scale(1.1);
  filter: brightness(0) invert(1) drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
}

/* Navigation Content Container - Fixed Animation */
.nav-controls-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  transform: translateX(0);
  overflow: hidden;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.grid-navigation-controls.collapsed .nav-controls-content {
  opacity: 0;
  transform: translateX(100%);
  pointer-events: none;
  width: 0;
  min-width: 0;
  padding: 0;
  margin: 0;
}

/* Navigation Sections */
.level-navigation,
.horizontal-navigation,
.child-navigation {
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.level-navigation:last-child,
.horizontal-navigation:last-child,
.child-navigation:last-child {
  margin-bottom: 0;
}

/* Navigation Labels */
.nav-label {
  color: #ccc;
  font-size: 11px;
  font-weight: bold;
  margin-right: 6px;
  white-space: nowrap;
  font-family: Arial, sans-serif;
  flex-shrink: 0; /* Prevent label from shrinking */
  min-width: max-content; /* Ensure label takes minimum required width */
}

/* Navigation Buttons */
.nav-button {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: white;
  padding: 8px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  font-family: Arial, sans-serif;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-button:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.6);
}

.nav-button.active {
  background: rgba(0, 123, 255, 0.6);
  border-color: rgba(0, 86, 179, 0.8);
  color: white;
}

.nav-button.back-button {
  background: rgba(220, 53, 69, 0.6);
  border-color: rgba(220, 53, 69, 0.8);
  margin-bottom: 0;
  padding: 8px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  width: 50px;
  height: 50px;
  margin-bottom: 5px !important;
}

.nav-button.back-button:hover {
  background: rgba(220, 53, 69, 0.8);
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
  transform: translateY(-1px);
}

.back-button-text {
  font-weight: bold;
  font-size: 12px;
}

/* Thumbnail back button styling */
.nav-button.back-button.has-thumbnail {
  padding: 4px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.back-button-thumbnail {
  width: 40px !important;
  height: 40px !important;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: block;
  object-fit: cover !important;
  /* Override any video-section img styles */
  max-width: none !important;
  max-height: none !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  transition: transform 0.2s ease, border-color 0.2s ease !important;
}

.nav-button.back-button.has-thumbnail:hover .back-button-thumbnail {
  border-color: rgba(255, 255, 255, 0.6);
  transform: scale(1.05);
}

/* Arrow Paths Button Styling */
.nav-button.arrow-paths-btn {
  /* Default inactive state - grey styling */
  background: rgba(128, 128, 128, 0.18);
  border: 1px solid rgba(128, 128, 128, 0.38);
  color: #888888;
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-right: 4px;
  margin-left: 0;
  margin-bottom: 6px;
  position: relative;
  overflow: hidden;
}
.nav-button.arrow-paths-btn:hover {
  /* Hover state for inactive button */
  background: rgba(128, 128, 128, 0.28);
  border-color: rgba(128, 128, 128, 0.55);
  color: #aaaaaa;
}
.nav-button.arrow-paths-btn.active {
  /* Active state - green styling */
  background: rgba(0, 255, 200, 0.38);
  border-color: #00ffd0;
  color: #00ffd0;
}
.nav-button.arrow-paths-btn.active:hover {
  /* Active hover state - brighter green */
  background: rgba(0, 255, 200, 0.48);
  border-color: #00ffe0;
  color: #00ffe0;
}
.nav-button.arrow-paths-btn .path-icon {
  width: 32px;
  height: 32px;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  transition: filter 0.2s;
}
.nav-button.arrow-paths-btn:hover .path-icon {
  /* Subtle grey glow for inactive hover */
  filter: drop-shadow(0 0 4px #888888);
}
.nav-button.arrow-paths-btn.active:hover .path-icon {
  /* Bright green glow for active hover */
  filter: drop-shadow(0 0 6px #00ffd0);
}

/* Grid Tour Play Button — inactive matches level/view button white-translucent family */
.nav-button.grid-tour-play-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: white;
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-right: 4px;
  margin-left: 0;
  margin-bottom: 6px;
  position: relative;
}
.nav-button.grid-tour-play-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.6);
  color: white;
}
.nav-button.grid-tour-play-btn.active {
  background: rgba(0, 255, 200, 0.38);
  border-color: #00ffd0;
  color: #00ffd0;
}
.nav-button.grid-tour-play-btn.active:hover {
  background: rgba(0, 255, 200, 0.48);
  border-color: #00ffe0;
  color: #00ffe0;
}

/* Desktop Tour Marker Highlight */
.grid-marker.desktop-tour-highlight {
  position: relative;
  /* Removed size increase – keep original marker size */
  transition: filter 220ms ease;
  z-index: 55; /* above arrow-path-container (52) and normal markers (53), below marker cards (65) */
  filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 10px rgba(255,255,255,0.85));
}
/* Dedicated glow element to avoid clashing with existing ::before/::after (e.g. pigeon bird) */
.grid-marker .desktop-tour-highlight-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180%;
  height: 180%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  /* Soft inner glow (slightly visible center) to avoid harsh ring/wave */
  background: radial-gradient(circle,
    rgba(255,255,255,0.35) 0%,
    rgba(255,255,255,0.28) 35%,
    rgba(255,255,255,0.18) 55%,
    rgba(255,255,255,0.08) 70%,
    rgba(255,255,255,0) 100%);
  animation: desktopMarkerPulse 1400ms ease-out forwards;
  z-index: -1; /* behind primary marker visuals */
}

/* Pigeon variant: keep center fully transparent so bird silhouette stays crisp */
.grid-marker.pin.pigeon > .desktop-tour-highlight-glow {
  background: radial-gradient(circle,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 38%,
    rgba(255,255,255,0.65) 60%,
    rgba(255,255,255,0.25) 78%,
    rgba(255,255,255,0) 100%);
}
@keyframes desktopMarkerPulse {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); }
}

/* Temporarily locked during Tour */
.nav-button.arrow-paths-btn.temporarily-locked {
  background: rgba(90,90,90,0.25) !important;
  border-color: rgba(120,120,120,0.35) !important;
  color: #666666 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.5) brightness(0.85);
  pointer-events: none !important;
}
.nav-button.arrow-paths-btn.temporarily-locked .path-icon {
  opacity: 0.55;
  filter: none !important;
}
.nav-button.arrow-paths-btn.temporarily-locked:hover {
  background: rgba(90,90,90,0.28) !important;
  border-color: rgba(120,120,120,0.45) !important;
  color: #666666 !important;
}

/* Specific override for grid navigation thumbnail to prevent video-section img interference */
.grid-nav-thumbnail {
  /* Reset all potential video-section img styles */
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: auto !important;
  user-select: none !important;
}

/* Level navigation styling */
.grid-navigation-controls .level-navigation {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.grid-navigation-controls .level-button {
    padding: 5px;
    background: rgba(40, 167, 69, 0.7);
    border-color: rgba(40, 167, 69, 1);
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    position: relative;
}

.grid-navigation-controls .level-button:hover {
    background: rgba(40, 167, 69, 0.9);
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    transform: translateY(-1px);
}

/* Horizontal navigation styling */
.grid-navigation-controls .horizontal-navigation {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.grid-navigation-controls .view-button {
    padding: 10px;
    background: rgba(255, 193, 7, 0.7);
    border-color: rgba(255, 193, 7, 1);
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    position: relative;
}

.grid-navigation-controls .view-button:hover {
    background: rgba(255, 193, 7, 0.9);
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    transform: translateY(-1px);
}

/* Alternative view navigation styling */
.grid-navigation-controls .alternative-view-navigation {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    scale: 90%;
}

.grid-navigation-controls .alternative-view-button {
    padding: 6px 10px;
    background: rgba(108, 117, 125, 0.7);
    border-color: rgba(108, 117, 125, 1);
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    position: relative;
    color: white;
    font-size: 12px;
    white-space: nowrap;
    border: 1px solid rgba(108, 117, 125, 1);
}

.grid-navigation-controls .alternative-view-button:hover {
    background: rgba(108, 117, 125, 0.9);
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    transform: translateY(-1px);
}

.grid-navigation-controls .alternative-view-button:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Disabled navigation buttons */
.grid-navigation-controls .nav-button.disabled {
    background: rgba(128, 128, 128, 0.3);
    border-color: rgba(128, 128, 128, 0.5);
    cursor: not-allowed;
    opacity: 0.5;
}

.grid-navigation-controls .nav-button.disabled:hover {
    background: rgba(128, 128, 128, 0.3);
    box-shadow: none;
    transform: none;
}

.grid-navigation-controls .nav-button.disabled .nav-icon {
    opacity: 0.5;
}

/* Navigation icon styling */
.grid-navigation-controls .nav-icon {
    width: 24px;
    height: 24px;
    display: block;
    transition: all 0.2s ease;
    object-fit: contain;
    margin: 0 auto; /* Center the image */
    /* Override any .video-section img styles */
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
  float: none !important;
    max-width: none !important;
    max-height: none !important;
}

.grid-navigation-controls .nav-button:hover .nav-icon {
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
}

/* Specific icon adjustments */
.grid-navigation-controls .level-up .nav-icon,
.grid-navigation-controls .level-down .nav-icon {
    width: 28px;
    height: 28px;
}

.grid-navigation-controls .view-left .nav-icon,
.grid-navigation-controls .view-right .nav-icon {
    width: 20px;
    height: 20px;
}

/* Show All Accessible Grids button */
.grid-navigation-controls .show-all-grids-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 6px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: white;
    font-size: 11px;
    margin: 0 4px;
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
    margin-top: 4px;
}

.grid-navigation-controls .show-all-grids-btn .grid-icon {
    z-index: 1;
    transition: all 0.3s ease;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2px;
    width: 20px;
    height: 20px;
}

.grid-navigation-controls .show-all-grids-btn .grid-cell {
    background-color: currentColor;
    border-radius: 1px;
    transition: all 0.3s ease;
}

.grid-navigation-controls .show-all-grids-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.6);
    transform: none;
    filter: none;
}

.grid-navigation-controls .show-all-grids-btn:hover .grid-icon {
    filter: none;
}

.grid-navigation-controls .show-all-grids-btn.active {
    background: rgba(0, 123, 255, 0.6);
    border-color: rgba(0, 86, 179, 0.8);
    color: white;
}

.grid-navigation-controls .show-all-grids-btn.active:hover {
    background: rgba(0, 123, 255, 0.7);
    transform: none;
}



.nav-button.level-button {
  background: rgba(100, 255, 100, 0.1);
  border-color: rgba(100, 255, 100, 0.3);
}

.nav-button.level-button:hover {
  background: rgba(100, 255, 100, 0.2);
}

.nav-button.level-button.active {
  background: #28a745;
  border-color: #1e7e34;
}

.nav-button.level-button.disabled {
  background: rgba(128, 128, 128, 0.1);
  border-color: rgba(128, 128, 128, 0.3);
  color: #888;
  cursor: not-allowed;
  opacity: 0.5;
}

.nav-button.level-button.disabled:hover {
  background: rgba(128, 128, 128, 0.1);
  border-color: rgba(128, 128, 128, 0.3);
  cursor: not-allowed;
}

.nav-button.level-button.disabled img {
  opacity: 0.4;
}

.nav-button.view-button {
  background: rgba(255, 200, 100, 0.1);
  border-color: rgba(255, 200, 100, 0.3);
}

.nav-button.view-button:hover {
  background: rgba(255, 200, 100, 0.2);
}

.nav-button.child-button {
  background: rgba(100, 150, 255, 0.1);
  border-color: rgba(100, 150, 255, 0.3);
}

.nav-button.child-button:hover {
  background: rgba(100, 150, 255, 0.2);
}

/* Responsive Design for Navigation */
@media (max-width: 768px) {
  .grid-navigation-controls {
    top: auto;
    bottom: 10px;
    right: 10px;
    left: 10px;
    min-width: unset;
    max-width: none;
  }
  
  .level-navigation,
  .horizontal-navigation,
  .child-navigation {
    flex-direction: column;
    align-items: stretch;
  }
  
  .nav-button {
    margin: 2px 0;
    text-align: center;
  }
  
  /* Mobile responsive styles for Show All Accessible Grids button */
  .grid-navigation-controls .show-all-grids-btn {
    width: 36px;
    height: 36px;
    font-size: 11px;
    margin: 2px;
  }
  
  .grid-navigation-controls .show-all-grids-btn .grid-icon {
    width: 18px;
    height: 18px;
  }
  
  .nav-label {
    margin-bottom: 4px;
    margin-right: 0;
  }
}

/* Enhanced marker card for level-specific content */
.grid-marker-card.level-marker {
  border-left: 4px solid #FF6B35;
}

.grid-marker-card.child-marker {
  border-left: 4px solid #0096ff;
}

/* Special styling for different content types */
.grid-marker-card.has-comparison {
  border-left: 4px solid #e74c3c; /* Red for comparisons */
}

.grid-marker-card.has-text {
  border-left: 4px solid #2ecc71; /* Green for text content */
}

.grid-marker-card.has-chat {
  border-left: 4px solid #9b59b6; /* Purple for AI chat */
}


/* === Child Grid Hover Interactions === */

/* Child grid boundary container for hover detection */
.child-grid-boundary {
  position: absolute;
  border: 2px dashed transparent;
  background: rgba(0, 150, 255, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  z-index: 40;
}

.child-grid-boundary:hover {
  border-color: rgba(0, 150, 255, 0.5);
  background: rgba(0, 150, 255, 0.2);
}

/* Dimming overlay for parent grid when hovering child areas */
.child-grid-dimming-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  transition: background 0.3s ease;
  pointer-events: none;
  z-index: 35;
}

.child-grid-dimming-overlay.active {
  background: rgba(0, 0, 0, 0.4);
}

/* Child grid information card */
.child-grid-card {
  position: absolute;
  background: rgba(0, 0, 0, 0.75); /* Dark theme to match marker cards */
  border: 2px solid rgba(0, 150, 255, 0.4); /* Distinctive blue border */
  border-radius: 8px; /* Less rounded, more square-ish than marker cards (12px) */
  padding: 12px;
  min-width: 160px; /* More square proportions */
  max-width: 180px; /* More constrained width for square-ish look */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); /* Darker shadow to match theme */
  z-index: 60; /* Lower than marker cards (65) for proper layering */
  opacity: 0;
  transform: translateY(10px) scale(0.95);
  transition: opacity 0.25s ease-out, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  backdrop-filter: blur(10px);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  pointer-events: none; /* Disable interaction when hidden */
  /* Add will-change for better performance */
  will-change: opacity, transform;
}

.child-grid-card.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto; /* Enable interaction when visible */
}

/* Enhanced hover state for child grid cards */
.child-grid-card.visible:hover {
  background: rgba(10, 10, 10, 0.85); /* Darker on hover like marker cards */
  border-color: rgba(0, 150, 255, 0.6); /* Brighter blue border on hover */
  transform: scale(1.02); /* Slight scale on hover */
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); /* Enhanced shadow on hover */
}

.child-grid-card-title {
  margin: 0 0 6px 0;
  font-size: 12px; /* Slightly larger for better readability on dark theme */
  font-weight: 600;
  color: white; /* White text for dark theme */
  line-height: 1.3;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8); /* Text shadow like marker cards */
}

.child-grid-card-subtitle {
  margin: 0 0 6px 0;
  font-size: 11px; /* Slightly larger */
  color: rgba(255, 255, 255, 0.8); /* Light white text like marker cards */
  line-height: 1.4;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8); /* Text shadow */
}

.child-grid-card-description {
  margin: 0 0 8px 0;
  font-size: 10px; /* Slightly larger */
  color: rgba(255, 255, 255, 0.7); /* Lighter white text */
  line-height: 1.4;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8); /* Text shadow */
}

.child-grid-card-levels {
  margin: 0;
  font-size: 13px;
  color: #00ffcc; /* Accent color to match grid system theme */
  font-weight: 600;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8); /* Text shadow */
}

.child-grid-card-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  gap: 6px;
}

.child-grid-card-info {
  margin: 0 0 8px 0;
  font-size: 9px; /* Slightly larger */
  color: rgba(255, 255, 255, 0.6); /* Light white text */
  font-weight: 500;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8); /* Text shadow */
}

.child-grid-card-move-btn {
  width: 100%;
  padding: 8px 12px; /* Slightly larger padding */
  background: rgba(0, 150, 255, 0.8); /* Match the border color theme */
  color: white;
  border: 1px solid rgba(0, 150, 255, 0.6); /* Subtle border */
  border-radius: 6px; /* Less rounded to match square-ish theme */
  font-size: 11px; /* Slightly larger */
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8); /* Text shadow */
}

.child-grid-card-move-btn:hover {
  background: rgba(0, 150, 255, 1); /* Full opacity on hover */
  border-color: rgba(0, 150, 255, 0.8);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 150, 255, 0.3); /* Blue glow */
}

.child-grid-card-move-btn:active {
  transform: translateY(0);
}

.child-grid-card-move-btn::before {
  content: '👁️';
  font-size: 11px; /* Slightly larger to match button size */
  text-shadow: inherit; /* Inherit text shadow */
}

.child-grid-navigate-btn {
  padding: 6px 8px;
  background: linear-gradient(135deg, #0096ff 0%, #00b4d8 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
}

.child-grid-navigate-btn:hover {
  background: linear-gradient(135deg, #007acc 0%, #0096d4 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 150, 255, 0.3);
}

.child-grid-navigate-btn:active {
  transform: translateY(0);
}

.navigate-icon {
  font-size: 16px;
}

/* Child Grid Card Arrows */
.child-grid-card::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  z-index: 1;
}

/* Arrow pointing down (for cards above child grid) */
.child-grid-card.above::before {
  bottom: -10px;
  left: var(--arrow-left, 50%);
  transform: translateX(-50%);
  border-width: 10px 10px 0 10px;
  border-color: rgba(0, 0, 0, 0.75) transparent transparent transparent; /* Match dark background */
  filter: drop-shadow(0 0 0 rgba(0, 150, 255, 0.8)) drop-shadow(1px 0 0 rgba(0, 150, 255, 0.6)) drop-shadow(-1px 0 0 rgba(0, 150, 255, 0.6)) drop-shadow(0 1px 0 rgba(0, 150, 255, 0.6)); /* Blue border effect */
}

/* Arrow pointing up (for cards below child grid) */
.child-grid-card.below::before {
  top: -10px;
  left: var(--arrow-left, 50%);
  transform: translateX(-50%);
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent rgba(0, 0, 0, 0.75) transparent; /* Match dark background */
  filter: drop-shadow(0 0 0 rgba(0, 150, 255, 0.8)) drop-shadow(1px 0 0 rgba(0, 150, 255, 0.6)) drop-shadow(-1px 0 0 rgba(0, 150, 255, 0.6)) drop-shadow(0 -1px 0 rgba(0, 150, 255, 0.6)); /* Blue border effect */
}

/* Arrow pointing right (for cards to the left of child grid) */
.child-grid-card.left::before {
  right: -10px;
  top: var(--arrow-top, 50%);
  transform: translateY(-50%);
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent rgba(0, 0, 0, 0.75); /* Match dark background */
  filter: drop-shadow(0 0 0 rgba(0, 150, 255, 0.8)) drop-shadow(0 1px 0 rgba(0, 150, 255, 0.6)) drop-shadow(0 -1px 0 rgba(0, 150, 255, 0.6)) drop-shadow(-1px 0 0 rgba(0, 150, 255, 0.6)); /* Blue border effect */
}

/* Arrow pointing left (for cards to the right of child grid) */
.child-grid-card.right::before {
  left: -10px;
  top: var(--arrow-top, 50%);
  transform: translateY(-50%);
  border-width: 10px 10px 10px 0;
  border-color: transparent rgba(0, 0, 0, 0.75) transparent transparent; /* Match dark background */
  filter: drop-shadow(0 0 0 rgba(0, 150, 255, 0.8)) drop-shadow(0 1px 0 rgba(0, 150, 255, 0.6)) drop-shadow(0 -1px 0 rgba(0, 150, 255, 0.6)) drop-shadow(1px 0 0 rgba(0, 150, 255, 0.6)); /* Blue border effect */
}

/* Responsive child grid card */
@media (max-width: 768px) {
  .child-grid-card {
    min-width: 126px;
    max-width: 168px;
    padding: 8px;
  }
  
  .child-grid-card-title {
    font-size: 11px;
  }
  
  .child-grid-card-subtitle {
    font-size: 9px;
  }
  
  .child-grid-card-description {
    font-size: 8px;
  }
  
  .child-grid-card-move-btn {
    padding: 6px 8px;
    font-size: 9px;
  }
}

/* Child grid card responsive sizing based on video-container states */
/* Normal state - default sizing (already defined above) */

/* Enlarged state - slightly larger */
#video-container.enlarged .child-grid-card {
  min-width: 168px;
  max-width: 210px;
  padding: 13px;
  border-radius: 14px;
}

#video-container.enlarged .child-grid-card-title {
  font-size: 12px;
}

#video-container.enlarged .child-grid-card-subtitle {
  font-size: 11px;
}

#video-container.enlarged .child-grid-card-description {
  font-size: 10px;
}

#video-container.enlarged .child-grid-navigate-btn {
  padding: 7px 10px;
  font-size: 9px;
  height: 25px;
  min-width: 31px;
}

/* Very-large state - largest sizing */
#video-container.very-large .child-grid-card {
  min-width: 182px;
  max-width: 224px;
  padding: 14px;
  border-radius: 16px;
}

#video-container.very-large .child-grid-card-title {
  font-size: 13px;
  margin-bottom: 7px;
}

#video-container.very-large .child-grid-card-subtitle {
  font-size: 11px;
  margin-bottom: 7px;
}

#video-container.very-large .child-grid-card-description {
  font-size: 11px;
  margin-bottom: 10px;
}

#video-container.very-large .child-grid-card-levels {
  font-size: 16px;
}

#video-container.very-large .child-grid-card-actions {
  margin-top: 10px;
  gap: 7px;
}

#video-container.very-large .child-grid-navigate-btn {
  padding: 8px 11px;
  font-size: 10px;
  height: 28px;
  min-width: 34px;
}

/* ===== CHILD-OF-CHILD GRID STYLES ===== */

/* Child-of-child grid boundary container for hover detection */
.child-of-child-grid-boundary {
  position: absolute;
  border: 2px dashed transparent;
  background: rgba(255, 107, 53, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  z-index: 41; /* Higher than child grids */
}

.child-of-child-grid-boundary:hover {
  border-color: rgba(255, 107, 53, 0.5);
  background: rgba(255, 107, 53, 0.2);
}

/* Child-of-child grid outline (SVG) */
.child-of-child-grid-outline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 41;
}

.child-of-child-grid-outline polygon {
  fill: rgba(255, 107, 53, 0);
  stroke: rgba(255, 107, 53, 0);
  stroke-width: 0.5;
  stroke-dasharray: 1,1;
  transition: all 0.3s ease;
}

.child-of-child-grid-outline:hover polygon {
  fill: rgba(255, 107, 53, 0.15);
  stroke: rgba(255, 107, 53, 0.8);
}

/* Child-of-child grid information card */
.child-of-child-grid-card {
  position: fixed;
  background: linear-gradient(135deg, #ffffff 0%, #fff5f2 100%);
  border: 1px solid #ffdbcc;
  border-radius: 12px;
  padding: 16px;
  min-width: 200px;
  max-width: 320px;
  box-shadow: 0 8px 32px rgba(255, 107, 53, 0.15);
  z-index: 10000;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  backdrop-filter: blur(10px);
}

.child-of-child-grid-card .grid-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ffdbcc;
}

.child-of-child-grid-card .grid-card-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #d2691e;
  flex: 1;
}

.child-of-child-grid-card .grid-card-close {
  background: none;
  border: none;
  font-size: 18px;
  color: #ff6b35;
  cursor: pointer;
  padding: 0;
  margin-left: 8px;
  transition: color 0.2s ease;
}

.child-of-child-grid-card .grid-card-close:hover {
  color: #d2691e;
}

.child-of-child-grid-card .grid-card-content p {
  margin: 6px 0;
  font-size: 14px;
  color: #8b4513;
}

.child-of-child-grid-card .grid-card-content strong {
  color: #d2691e;
  font-weight: 600;
}

.child-of-child-grid-card .grid-card-actions {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #ffdbcc;
}

.child-of-child-grid-navigate-btn {
  width: 100%;
  padding: 10px 16px;
  background: linear-gradient(135deg, #ff6b35 0%, #ff8a50 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.child-of-child-grid-navigate-btn:hover {
  background: linear-gradient(135deg, #e55a2b 0%, #ff7043 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.child-of-child-grid-navigate-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(255, 107, 53, 0.2);
}

/* ===== CHILD GRID DESIGNER STYLES ===== */

/* Main overlay for Child Grid Designer - higher z-index than grid overlay (50) */
.child-grid-designer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 10010; /* 5 higher than grid overlay */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

/* Main container for Child Grid Designer */
.child-grid-designer-container {
  display: flex;
  width: 95%;
  height: 97%;
  max-width: 1400px;
  max-height: 800px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  color: #333;
}

/* Responsive adjustments for very wide screens */
@media (min-width: 1600px) {
  .child-grid-designer-container {
    max-width: 1600px;
  }
}

/* Ensure all text content in child grid designer is dark */
.child-grid-designer-container,
.child-grid-designer-container p,
.child-grid-designer-container div,
.child-grid-designer-container span,
.child-grid-designer-container strong {
  color: #333 !important;
}

/* Left panel - Canvas area */
.child-grid-designer-canvas-panel {
  flex: 2;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: #f8f9fa;
  border-right: 1px solid #dee2e6;
  color: #333;
  min-width: 400px;
  max-width: 800px;
}

.child-grid-designer-canvas-panel h3 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 18px;
}

.child-designer-subtitle {
  margin: 0 0 15px 0;
  color: #666;
  font-size: 14px;
  line-height: 1.4;
}

/* Canvas styling */
.child-grid-designer-canvas {
  flex: 1;
  border: 2px solid #dee2e6;
  border-radius: 4px;
  background: white;
  cursor: crosshair;
  margin-bottom: 15px;
}

.child-grid-designer-canvas:hover {
  border-color: #28a745;
}

/* Instructions panel */
.child-grid-designer-instructions {
  padding: 15px;
  background: #e3f2fd;
  border-radius: 4px;
  border-left: 4px solid #2196f3;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.child-grid-designer-instructions p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #333;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.child-grid-designer-instructions .highlight {
  font-weight: bold;
  color: #2196f3;
}

/* Right panel - Controls */
.child-grid-designer-control-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: white;
  overflow-y: auto;
  max-height: 100%;
  color: #333;
}

/* Ensure all text elements in child grid designer have proper color */
.child-grid-designer-control-panel p,
.child-grid-designer-control-panel div,
.child-grid-designer-control-panel span,
.child-grid-designer-control-panel strong {
  color: #333;
}

/* Header section */
.child-grid-designer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #dee2e6;
}

.child-grid-designer-header h3 {
  margin: 0;
  color: #333;
  font-size: 16px;
}

.child-grid-designer-header button {
  padding: 8px 16px;
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.child-grid-designer-header button:hover {
  background: #c82333;
}

/* Form sections */
.form-section {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.form-section:last-child {
  border-bottom: none;
}

.form-section h4 {
  margin: 0 0 12px 0;
  color: #333;
  font-size: 14px;
  font-weight: 600;
}

.form-section p {
  margin: 0 0 8px 0;
  font-size: 13px;
  line-height: 1.4;
  color: #333;
}

/* Mode buttons */
.mode-btn {
  padding: 8px 16px;
  margin-right: 8px;
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.2s;
}

.mode-btn:hover {
  background: #5a6268;
}

.mode-btn.active {
  background: #007bff !important;
}

/* Coordinate and marker displays */
#child-display-coordinates-display {
  background: #f8f9fa;
  padding: 12px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  line-height: 1.3;
  max-height: 150px;
  overflow-y: auto;
  border: 1px solid #dee2e6;
  white-space: pre;
  color: #333;
}

#child-display-markers-list {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  background: #f8f9fa;
}

.child-display-marker-item {
  padding: 10px;
  border-bottom: 1px solid #dee2e6;
  background: white;
  margin-bottom: 0;
  color: #333;
}

.child-display-marker-item:last-child {
  border-bottom: none;
}

.child-display-marker-item:hover {
  background: #f8f9fa;
}

/* Action buttons */
.child-designer-action-btn {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  transition: all 0.2s;
  display: block;
  text-align: center;
}

.child-designer-action-btn:hover {
  opacity: 0.9;
}

.child-designer-action-btn.primary {
  background: #007bff;
  color: white;
}

.child-designer-action-btn.success {
  background: #28a745;
  color: white;
}

.child-designer-action-btn.success:hover {
  background: #218838;
}

.child-designer-action-btn.warning {
  background: #ffc107;
  color: black;
}

.child-designer-action-btn.warning:hover {
  background: #e0a800;
}

.child-designer-action-btn.info {
  background: #17a2b8;
  color: white;
}

.child-designer-action-btn.info:hover {
  background: #138496;
}

.child-designer-action-btn.secondary {
  background: #6c757d;
  color: white;
}

.child-designer-action-btn.secondary:hover {
  background: #5a6268;
}

/* Context information panel */
.form-section .context-info {
  background: #e3f2fd;
  padding: 12px;
  border-radius: 4px;
  border-left: 4px solid #2196f3;
}

.form-section .context-info p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}

/* Responsive design for smaller screens */
@media (max-width: 1200px) {
  .child-grid-designer-container {
    width: 98%;
    height: 95%;
    flex-direction: column;
  }
  
  .child-grid-designer-canvas-panel {
    flex: 1;
    border-right: none;
    border-bottom: 1px solid #dee2e6;
  }
  
  .child-grid-designer-control-panel {
    flex: 1;
    max-height: 40%;
  }
  
  .child-grid-designer-canvas {
    height: 300px;
    flex: none;
  }
}

@media (max-width: 768px) {
  .child-grid-designer-canvas-panel {
    padding: 15px;
  }
  
  .child-grid-designer-control-panel {
    padding: 15px;
  }
  
  .child-designer-action-btn {
    width: 100%;
    margin: 2px 0;
  }
  
  .mode-btn {
    width: calc(50% - 4px);
    margin-right: 4px;
  }
}

/* ===== CHILD MARKER EDIT DIALOG STYLES ===== */

/* Child Marker Edit Dialog - use same styles as parent with child-specific IDs */
#child-marker-edit-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    padding: 20px;
    width: 500px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 10012; /* Higher than child designer overlay (55) */
}

#child-marker-edit-dialog h3 {
    margin: 0 0 20px 0;
    color: #333;
    border-bottom: 2px solid #e3f2fd;
    padding-bottom: 10px;
}

#child-marker-edit-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 10011; /* One less than dialog */
}

/* Child marker edit sections inherit from parent styles */
#child-marker-edit-dialog .edit-section {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
}

#child-marker-edit-dialog .edit-section:last-child {
    border-bottom: none;
}

#child-marker-edit-dialog label {
    display: block;
    margin: 10px 0 5px 0;
    font-weight: bold;
    color: #333;
}

#child-marker-edit-dialog h4 {
    margin: 0 0 10px 0;
    color: #666;
    font-size: 14px;
}

#child-marker-edit-dialog input,
#child-marker-edit-dialog select,
#child-marker-edit-dialog textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

#child-marker-edit-dialog input[type="text"] {
  min-width: 400px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

#child-marker-edit-dialog input[type="text"].mirroring {
  background-color: #e6f3ff;
  border-color: #0066cc;
  border-width: 2px;
  padding-right: 35px;
}

#child-marker-edit-dialog input[type="text"].mirroring::placeholder {
  color: #0066cc;
  font-style: italic;
}

#child-marker-edit-dialog input[id*="manual-number"] {
  width: 30% !important;
  max-width: 150px;
  min-width: 100px;
}#child-marker-edit-dialog textarea {
    resize: vertical;
    font-family: monospace;
    font-size: 12px;
}

#child-marker-edit-dialog input[type="color"] {
    width: 50px;
    height: 40px;
    padding: 0;
    border: none;
    cursor: pointer;
}

#child-marker-edit-dialog textarea {
    resize: vertical;
    min-height: 60px;
}

#child-marker-edit-dialog .button-group {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
}

#child-marker-edit-dialog .btn-success {
    background: #28a745;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

#child-marker-edit-dialog .btn-success:hover {
    background: #218838;
}

#child-marker-edit-dialog .btn-secondary {
    background: #6c757d;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

#child-marker-edit-dialog .btn-secondary:hover {
    background: #5a6268;
}

/* Child marker type buttons */
#child-marker-edit-dialog .type-btn {
    padding: 8px 12px;
    margin-right: 5px;
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

#child-marker-edit-dialog .type-btn:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

#child-marker-edit-dialog .type-btn.selected,
#child-marker-edit-dialog .type-btn[aria-checked="true"] {
    background: #007bff !important;
    color: white !important;
    border-color: #007bff !important;
}

/* Child marker edit responsive design */
@media (max-width: 600px) {
    #child-marker-edit-dialog {
        width: 95%;
        padding: 15px;
    }
    
    #child-marker-edit_dialog .button-group {
        flex-direction: column;
    }
    
    #child-marker-edit-dialog .type-btn {
        margin-bottom: 5px;
        margin-right: 0;
        width: 100%;
    }
}

/* ===== CHILD-OF-CHILD MARKER EDIT DIALOG STYLES ===== */

/* Child-of-Child Marker Edit Dialog - based on child marker styles */
#coc-marker-edit-modal.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 10013; /* Higher than child marker dialog */
    display: flex;
    align-items: center;
    justify-content: center;
}

#coc-marker-edit-modal .modal-content {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    padding: 20px;
    width: 500px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

#coc-marker-edit-modal h3 {
    margin: 0 0 20px 0;
    color: #333;
    border-bottom: 2px solid #fce4ec;
    padding-bottom: 10px;
}

/* Child-of-child marker edit sections */
#coc-marker-edit-modal .edit-section {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
}

#coc-marker-edit-modal .edit-section:last-child {
    border-bottom: none;
}

#coc-marker-edit-modal label {
    display: block;
    margin: 10px 0 5px 0;
    font-weight: bold;
    color: #333;
}

#coc-marker-edit-modal h4 {
    margin: 0 0 10px 0;
    color: #666;
    font-size: 14px;
}

#coc-marker-edit-modal input,
#coc-marker-edit-modal select,
#coc-marker-edit-modal textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

#coc-marker-edit-modal input[type="text"] {
  min-width: 400px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

#coc-marker-edit-modal input[type="text"].mirroring {
  background-color: #e6f3ff;
  border-color: #0066cc;
  border-width: 2px;
  padding-right: 35px;
}

#coc-marker-edit-modal input[type="text"].mirroring::placeholder {
  color: #0066cc;
  font-style: italic;
}

#coc-marker-edit-modal input[id*="manual-number"] {
  width: 30% !important;
  max-width: 150px;
  min-width: 100px;
}#coc-marker-edit-modal textarea {
    resize: vertical;
    font-family: monospace;
    font-size: 12px;
}

#coc-marker-edit-modal input[type="color"] {
    width: 50px;
    height: 40px;
    padding: 0;
    border: none;
    cursor: pointer;
}

#coc-marker-edit-modal textarea {
    resize: vertical;
    min-height: 60px;
}

#coc-marker-edit-modal .button-group {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
}

#coc-marker-edit-modal .btn-success {
    background: #28a745;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

#coc-marker-edit-modal .btn-success:hover {
    background: #218838;
}

#coc-marker-edit-modal .btn-secondary {
    background: #6c757d;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

#coc-marker-edit-modal .btn-secondary:hover {
    background: #5a6268;
}

/* Child-of-child marker type buttons */
#coc-marker-edit-modal .type-btn {
    padding: 8px 12px;
    margin-right: 5px;
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

#coc-marker-edit-modal .type-btn:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

#coc-marker-edit-modal .type-btn.selected,
#coc-marker-edit-modal .type-btn[aria-checked="true"] {
    background: #e91e63 !important;
    color: white !important;
    border-color: #e91e63 !important;
}

/* Child-of-child marker edit responsive design */
@media (max-width: 600px) {
    #coc-marker-edit-modal .modal-content {
        width: 95%;
        padding: 15px;
    }
    
    #coc-marker-edit-modal .button-group {
        flex-direction: column;
    }
    
    #coc-marker-edit-modal .type-btn {
        margin-bottom: 5px;
        margin-right: 0;
        width: 100%;
    }
}

/* ===== CHILD-OF-CHILD DISPLAY MARKER ITEM STYLES ===== */

/* Child-of-child display marker list container */
.child-of-child-display-markers-container {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  background: #fce4ec;
}

.child-of-child-display-marker-item {
  padding: 10px;
  border-bottom: 1px solid #f8bbd9;
  background: white;
  margin-bottom: 0;
  color: #333;
  position: relative;
}

.child-of-child-display-marker-item:last-child {
  border-bottom: none;
}

.child-of-child-display-marker-item:hover {
  background: #fce4ec;
}

/* Child-of-child marker item buttons */
.child-of-child-display-marker-item button {
  margin-right: 5px;
  background: #e91e63;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.2s;
}

.child-of-child-display-marker-item button:hover {
  background: #ad1457;
}

.child-of-child-display-marker-item button.delete-btn {
  background: #dc3545;
}

.child-of-child-display-marker-item button.delete-btn:hover {
  background: #c82333;
}

/* Child-of-child marker indicator */
.child-of-child-display-marker-item::before {
  content: "🏃";
  font-size: 14px;
  margin-right: 8px;
  opacity: 0.7;
}

/* Child-of-child action buttons */
.child-of-child-designer-action-btn {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  transition: all 0.2s;
  display: block;
  text-align: center;
}

.child-of-child-designer-action-btn:hover {
  opacity: 0.9;
}

.child-of-child-designer-action-btn.primary {
  background: #e91e63;
  color: white;
}

.child-of-child-designer-action-btn.success {
  background: #28a745;
  color: white;
}

.child-of-child-designer-action-btn.warning {
  background: #ffc107;
  color: #212529;
}

/* === Grid Loading Overlay === */
.grid-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 45; /* Below grid overlay but above video */
    display: flex;
    align-items: center;
    justify-content: center;
}

.grid-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.grid-loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid #ffffff;
    border-radius: 50%;
    animation: grid-loading-spin 1s linear infinite;
}

@keyframes grid-loading-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===== Prem ARROW FEATURES TOGGLE STYLES ===== */
.prem-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
    flex-shrink: 0;
}

.toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ccc;
    border-radius: 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    top: 3px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.prem-toggle input:checked + .toggle-slider {
    background: #2dd4a8;
}

.prem-toggle input:checked + .toggle-slider:before {
    transform: translateX(20px);
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.prem-toggle:hover .toggle-slider {
    opacity: 0.9;
}

/* ===== ARROW PATH ANIMATION STYLES ===== */
.arrow-path-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 52; /* Below markers (53) but above grid */
}

.arrow-paths-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Moving arrow with glow */
.moving-arrow {
    transition: all 0.1s ease-out;
    filter: drop-shadow(0 0 8px rgba(0, 255, 136, 0.6)) 
            drop-shadow(0 0 16px rgba(0, 255, 136, 0.3));
}

.arrow-head {
    transition: all 0.1s ease-out;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
}

/* Comet-like trailing line */
.trailing-line {
    transition: all 0.05s ease-out;
    filter: drop-shadow(0 0 4px rgba(0, 255, 136, 0.4));
    stroke-dasharray: none;
}

/* Glow animation for moving elements */
@keyframes arrowPulse {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(0, 255, 136, 0.6)) 
                drop-shadow(0 0 16px rgba(0, 255, 136, 0.3));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(0, 255, 136, 0.8)) 
                drop-shadow(0 0 24px rgba(0, 255, 136, 0.5));
        transform: scale(1.05);
    }
}

.moving-arrow {
    animation: arrowPulse 2s ease-in-out infinite;
}

/* Smooth movement transitions */
.arrow-path-container * {
    will-change: transform, opacity;
}

.arrow-path.animate-in {
    animation: arrowDrawIn 2s ease-out forwards;
}

@keyframes arrowDrawIn {
    0% {
        stroke-dasharray: 0 1000;
        opacity: 0;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        stroke-dasharray: 20 10;
        opacity: 1;
    }
}

/* === Grid Control Button Styles === */
.grid-control-button {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.grid-control-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.grid-control-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Show Grid button specific styling */
#show-grid-button {
    animation: grid-button-appear 0.3s ease-out;
}

@keyframes grid-button-appear {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== CHILD-OF-CHILD GRID DESIGNER STYLES ===== */

/* Main overlay for Child-of-Child Grid Designer - higher z-index than child grid designer */
.child-of-child-designer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 10010; /* Same as child grid designer */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

/* Main container for Child-of-Child Grid Designer */
.child-of-child-designer-container {
  display: flex;
  width: 95%;
  height: 96%;
  max-width: 1400px;
  max-height: 800px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  color: #333;
}

/* Responsive adjustments for very wide screens */
@media (min-width: 1600px) {
  .child-of-child-designer-container {
    max-width: 1600px;
  }
}

/* Ensure all text content in child-of-child grid designer is dark */
.child-of-child-designer-container,
.child-of-child-designer-container p,
.child-of-child-designer-container div,
.child-of-child-designer-container span,
.child-of-child-designer-container strong {
  color: #333 !important;
}

/* Left panel - Canvas area */
.child-of-child-designer-canvas-panel {
  flex: 2;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: #f8f9fa;
  border-right: 1px solid #dee2e6;
  color: #333;
  min-width: 400px;
  max-width: 800px;
}

.child-of-child-designer-canvas-panel h3 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 18px;
}

.child-of-child-designer-subtitle {
  margin: 0 0 15px 0;
  color: #666;
  font-size: 14px;
  line-height: 1.4;
}

/* Canvas styling */
.child-of-child-designer-canvas {
  flex: 1;
  border: 2px solid #dee2e6;
  border-radius: 4px;
  background: white;
  cursor: crosshair;
  margin-bottom: 15px;
}

.child-of-child-designer-canvas:hover {
  border-color: #28a745;
}

/* Instructions panel */
.child-of-child-designer-instructions {
  padding: 15px;
  background: #e3f2fd;
  border-radius: 4px;
  border-left: 4px solid #2196f3;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.child-of-child-designer-instructions p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #333;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.child-of-child-designer-instructions .highlight {
  font-weight: bold;
  color: #2196f3;
}

/* Right panel - Controls */
.child-of-child-designer-control-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: white;
  overflow-y: auto;
  max-height: 100%;
  color: #333;
}

/* Ensure all text elements in child-of-child grid designer have proper color */
.child-of-child-designer-control-panel p,
.child-of-child-designer-control-panel div,
.child-of-child-designer-control-panel span,
.child-of-child-designer-control-panel strong {
  color: #333;
}

/* Header section */
.child-of-child-designer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #dee2e6;
}

.child-of-child-designer-header h3 {
  margin: 0;
  color: #333;
  font-size: 16px;
}

.child-of-child-designer-header button {
  padding: 8px 16px;
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.child-of-child-designer-header button:hover {
  background: #c82333;
}

/* Alternative View Navigation Styling */
.alternative-view-navigation {
  display: flex;
  align-items: center;
  gap: 8px;
}

.alternative-view-button {
    position: relative;
    padding: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: 14px;
}

.alternative-view-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

.alternative-view-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    background: rgba(255, 255, 255, 0.15);
}

.alt-view-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-family: Arial, sans-serif;
}

.alt-view-current-number {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1;
    min-width: 8px;
    text-align: center;
}

.alt-view-arrow {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: normal;
    line-height: 1;
    margin: 0 1px;
    font-family: Arial, sans-serif;
}

.alt-view-next-number {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1;
    min-width: 8px;
    text-align: center;
}

/* ================= Marker Access Tracking (grayed out after accessed) ================= */
.grid-marker.accessed {
/*  filter: grayscale(85%) brightness(0.75) contrast(0.85);*/
  opacity: 1;
  transition: filter 160ms ease, opacity 160ms ease;
}
.grid-marker.accessed .number { opacity: 0.85; }
.grid-marker.accessed:hover,
.grid-marker.accessed:focus-visible {
/*  filter: grayscale(65%) brightness(0.82) contrast(0.9);*/
  opacity: 0.75;
}

/* Reset Marker Access development button */
[data-grid-buttons] .grid-reset-marker-access-btn {
  background: #6c757d;
  color: #fff;
}
[data-grid-buttons] .grid-reset-marker-access-btn:hover { background:#5c636a; }
[data-grid-buttons] .grid-reset-marker-access-btn:active { background:#4b5257; }