.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;
}

@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;
}

/* Marker types */
.grid-marker.pin {
  /* Increased 30% (base 20x30 -> 26x39) */
  width: 26px;
  height: 39px;
  /* Remove the old SVG background */
  /* Subtle global shadow to anchor the pin on varied backgrounds */
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.15)) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
}

/* 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;
  /* 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 */
}

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

.grid-marker.head {
  /* +30% (24 -> 31) */
  width: 31px;
  height: 31px;
  /* Add global shadow similar to pin markers */
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.15)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* 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);
  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;
}

/* 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;
}

@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)); }
}

/* 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 */
}

.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);
}

.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 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 status - positioned to left of Grid Designer title */
.persistent-autosave-status {
  position: absolute;
  top: 0;
  left: -320px; /* Position to the left of the title */
  background: rgba(45, 85, 145, 0.9); /* Slightly different color from controls overlay */
  color: white !important;
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 10px;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  z-index: 95; /* Below controls overlay but above other elements */
  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);
}

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

.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);
}
/* Desktop Tour Marker Highlight */
.grid-marker.desktop-tour-highlight {
  position: relative;
  /* Removed size increase – keep original marker size */
  transition: filter 220ms ease;
  z-index: 5; /* raise above non-highlighted markers */
  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;
}

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

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

.prem-toggle input:checked + .toggle-slider {
    background: rgba(0, 255, 204, 0.8);
    border-color: rgba(0, 255, 204, 1);
    box-shadow: 0 0 20px rgba(0, 255, 204, 0.4);
}

.prem-toggle input:checked + .toggle-slider:before {
    transform: translateX(20px);
    background: #65c0ae;
    box-shadow: 0 2px 8px rgba(0, 255, 204, 0.4);
}

.prem-toggle:hover .toggle-slider {
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.3);
}

/* ===== 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; }