/* root css custom properties and design tokens - Enhanced for visibility */
:root {
  --primary-bg: linear-gradient(135deg, #f8f9fa, #e9ecef);
  --panel-bg: #ffffff;
  --panel-bg-hover: #f8f9fa;
  --panel-border: #dee2e6;
  --panel-border-hover: #adb5bd;

  --panel-bg-alpha: rgba(255, 255, 255, 0.9);
  --panel-bg-alpha-hover: rgba(248, 249, 250, 0.9);
  --panel-border-alpha: rgba(222, 226, 230, 0.8);
  --panel-border-hover-alpha: rgba(173, 181, 189, 0.9);

  --text-color: #212529;
  --text-muted: #6c757d;
  --accent-color: #e9ecef;
  --accent-bg: #f8f9fa;
  --accent-border: #dee2e6;
  --button-bg-light: #f8f9fa;
  --input-bg: #ffffff;
  --error-color: #dc3545;
  --success-color: #28a745;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
  --transition: all 0.3s ease;
  --control-bg: #ffffff;
  --control-panel-bg: #ffffff;
  /* windows 11 design system variables */
  --ui_element_uniform_height: 48px;
  --ui_element_uniform_width: 48px;
  --ui_icon_uniform_size: 16px;
  --control-button-ring-fill: var(--text-color);
  --ui_text_uniform_size: 14px;
  --ui_spacing_uniform: 5px;
  --ui_spacing_vertical: 5px;
  --ui_spacing_horizontal: 5px;
  --ui_border_uniform_width: 1px;
  --ui_border_radius_none: 0px;
  --ui_border_radius_small: 0px;
  --ui_panel_width_standard: 336px;
  --ui_navbar_width_standard: 58px;
  --ui_checkbox_uniform_size: 32px;
  /* black, white, and grey color scheme */
  --color_background_primary: #f8f8f8;
  --color_background_secondary: #ffffff;
  --color_background_tertiary: #f0f0f0;
  --color_background_quaternary: #e0e0e0;
  --color_background_active: #e0e0e0;
  --color_background_hover: #f0f0f0;
  --color_background_input: #ffffff;
  --color_background_navbar: #ffffff;
  --color_text_primary: #000000;
  --color_text_secondary: #333333;
  --color_text_muted: #666666;
  --color_text_inverse: #ffffff;
  --color_border_primary: #cccccc;
  --color_border_secondary: #999999;
  --color_border_focus: #000000;
  --color_border_active: #000000;
  --color_accent_blue: #000000;
  --color_accent_blue_hover: #333333;
  --color_accent_blue_light: #f0f0f0;
  --color_accent_green: #000000;
  --color_accent_green_hover: #333333;
  --color_accent_green_light: #f0f0f0;
  --color_accent_orange: #000000;
  --color_accent_orange_hover: #333333;
  --color_accent_orange_light: #f0f0f0;
  --color_accent_red: #000000;
  --color_accent_red_hover: #333333;
  --color_accent_red_light: #f0f0f0;
  --color_accent_purple: #000000;
  --color_accent_purple_hover: #333333;
  --color_accent_purple_light: #f0f0f0;
  --color_accent_yellow: #000000;
  --color_accent_yellow_hover: #333333;
  --color_accent_yellow_light: #f0f0f0;
  --color_scrollbar_track: #f0f0f0;
  --color_scrollbar_thumb: #cccccc;
  --color_scrollbar_thumb_hover: #999999;
  --color_text_on_dark_surface: #ffffff;
  --color_text_on_accent: #000000;
  --font_family_primary: "segoe ui", -apple-system, BlinkMacSystemFont, Arial,
    sans-serif;
  --font_weight_normal: 400;
  --font_weight_medium: 500;
  --font_weight_semibold: 600;
  --font_weight_bold: 700;
  --shadow_sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);
  --shadow_md: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
  --shadow_lg: 0px 4px 16px 0px rgba(0, 0, 0, 0.12);
  --z_index_map: 1;
  --z_index_navbar: 20000;
  --z_index_navbar_controls: 20100;
  --z_index_panel: 1000;
  --z_index_sticky: 1010;
  --scroll_button_bg: rgba(160, 160, 160, 0.95);
  --scroll_button_bg_hover: rgba(130, 130, 130, 0.95);
}

/* Geolocate tracking spinner and speed indicator */
.control_button.geolocate_toggle.spinning,
.control_button.geolocate_toggle.tracking.spinning {
  animation: none;
}
.control_button.geolocate_toggle.spinning::before {
  content: "";
  position: absolute;
  inset: 6px 6px auto auto;
  width: 18px;
  height: 18px;
  border: 2px solid var(--accent-color, #0b84ff);
  border-top-color: transparent;
  border-radius: 50%;
  animation: geolocate-spin 1s linear infinite;
  pointer-events: none;
}
@keyframes geolocate-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes geolocate-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Rotate inner icon when tracking */
.control_button.geolocate_toggle.tracking i {
  animation: geolocate-rotate 1s linear infinite;
}

.geo_track_marker {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-color, #0b84ff);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
  border: 2px solid white;
}

#speed_indicator {
  position: fixed;
  right: 12px;
  bottom: 86px;
  display: none;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: 600;
  z-index: 2147483647;
}
#speed_indicator .speed-value {
  font-size: 16px;
}
#speed_indicator.high {
  background: rgba(200, 30, 30, 0.9);
}

/* Subcategory containers for Layers panel */
.cs_subcategory_container {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-top: 1px solid var(--panel-border);
  cursor: pointer;
  user-select: none;
  background: var(--panel-bg);
}
.cs_subcategory_container .cs_subcategory_text {
  margin-left: 8px;
  font-weight: 600;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 6px;
}
.cs_subcategory_container .cs_sub_count {
  font-weight: 400;
  font-size: 12px;
  color: var(--text-muted);
}
.cs_subcategory_content_wrapper {
  padding: 6px 6px 12px 6px;
  border-bottom: 1px solid var(--panel-border);
  background: var(--panel-bg);
}

body.light-mode {
  --primary-bg: linear-gradient(135deg, #f0f0f0, #e0e0e0);
  --panel-bg: rgba(255, 255, 255, 0.95);
  --panel-bg-hover: rgba(240, 240, 240, 0.9);
  --panel-border: rgba(150, 150, 150, 0.8);
  --panel-border-hover: rgba(130, 130, 130, 0.9);
  --text-color: rgba(0, 0, 0, 0.95);
  --text-muted: rgba(50, 50, 50, 0.75);
  --accent-color: rgba(220, 220, 220, 1);
  --accent-bg: rgba(230, 230, 230, 0.3);
  --accent-border: rgba(200, 200, 200, 0.8);
  --button-bg-light: rgba(230, 230, 230, 0.6);
  --input-bg: rgba(255, 255, 255, 0.9);
  --control-bg: rgba(255, 255, 255, 0.95);
  --control-panel-bg: rgba(255, 255, 255, 0.95);
  --error-color: #dc3545;
  --success-color: #28a745;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
}

[data-theme="dark"],
body.dark-mode {
  --primary-bg: linear-gradient(135deg, #1e1e1e, #2d2d2d);
  --panel-bg: #1e1e1e;
  --panel-bg-hover: #333333;
  --panel-border: #666666;
  --panel-border-hover: #999999;
  --text-color: #ffffff;
  --text-muted: #cccccc;
  --accent-color: #333333;
  --accent-bg: #666666;
  --accent-border: #999999;
  --button-bg-light: #333333;
  --input-bg: #333333;
  --control-bg: #000000;
  --control-panel-bg: #000000;
  --error-color: #ff6b6b;
  --success-color: #51cf66;
  --warning-color: #ffd43b;
  --info-color: #339af0;
  /* dark mode overrides for black/white color scheme */
  --color_background_primary: #1a1a1a;
  --color_background_secondary: #2d2d2d;
  --color_background_tertiary: #333333;
  --color_background_quaternary: #404040;
  --color_background_active: #404040;
  --color_background_hover: #333333;
  --color_background_input: #1a1a1a;
  --color_background_navbar: #1a1a1a;
  --color_text_primary: #ffffff;
  --color_text_secondary: #e0e0e0;
  --color_text_muted: #b0b0b0;
  --color_text_inverse: #000000;
  --color_border_primary: #666666;
  --color_border_secondary: #888888;
  --color_border_focus: #ffffff;
  --color_border_active: #ffffff;
  --color_accent_blue: #4dabf7;
  --color_accent_blue_hover: #339af0;
  --color_accent_blue_light: #1a4d7a;
  --color_accent_green: #51cf66;
  --color_accent_green_hover: #37b24d;
  --color_accent_green_light: #1a4d2e;
  --color_accent_orange: #ff922b;
  --color_accent_orange_hover: #fd7e14;
  --color_accent_orange_light: #7a3e1a;
  --color_accent_red: #ff6b6b;
  --color_accent_red_hover: #fa5252;
  --color_accent_red_light: #7a1f1f;
  --color_accent_purple: #cc5de8;
  --color_accent_purple_hover: #ae3ec9;
  --color_accent_purple_light: #4a1f5a;
  --color_accent_yellow: #ffd43b;
  --color_accent_yellow_hover: #fcc419;
  --color_accent_yellow_light: #7a5a1a;
  --color_scrollbar_track: #2d2d2d;
  --color_scrollbar_thumb: #666666;
  --color_scrollbar_thumb_hover: #888888;
  --scroll_button_bg: rgba(160, 160, 160, 0.95);
  --scroll_button_bg_hover: rgba(130, 130, 130, 0.95);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  touch-action: manipulation;
}

/* Ensure control buttons contain any halo/ring inside the button box */
.control_button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.control_button::after {
  content: "";

  .bottom_nav_button i {
    font-size: var(--ui_icon_uniform_size);
  }
  position: absolute;
  width: calc(var(--ui_icon_uniform_size) + 12px);
  height: calc(var(--ui_icon_uniform_size) + 12px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  box-sizing: border-box;
  display: block;
}

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100vh;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--text-color);
  background: var(--primary-bg);
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Ensure space canvas is always behind map but visible */
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--text-color);
  background: #000;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Optional blur effect toggle */
body.no-blur .fading_border,
body.no-blur .control-button,
body.no-blur .side-panel,
body.no-blur .control_panel,
body.no-blur .zoom_pill,
body.no-blur .rotation_pill,
body.no-blur .coordinates_container,
body.no-blur .north_control,
body.no-blur .mini_map_container,
body.no-blur #info_container {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Straight border effect */
.fading_border {
  position: relative;
  border: 1px solid var(--panel-border);
  box-sizing: border-box;
  transition: border-color 0.3s ease;
  border-radius: 0;
}

.fading_border::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: 1px solid var(--panel-border-hover);
  border-radius: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.fading_border:hover::after {
  opacity: 1;
}

/* ========================================
   Global Viewport Frame Constraints
   All popups, overlays, and panels must stay within
   the 48px navbar frame on all sides
   ======================================== */
:root {
  --viewport-frame-top: 48px;
  --viewport-frame-bottom: 48px;
  --viewport-frame-left: 48px;
  --viewport-frame-right: 48px;
  --viewport-content-width: calc(100vw - 96px);
  --viewport-content-height: calc(100vh - 96px);
}

/* Global popup/overlay container constraints */
.popup-constrained,
.overlay-constrained,
[data-constrain-viewport="true"] {
  max-width: var(--viewport-content-width) !important;
  max-height: var(--viewport-content-height) !important;
}

/* Ensure all fixed positioned elements with high z-index respect frame */
.panel-fixed-frame {
  position: fixed;
  top: var(--viewport-frame-top);
  left: var(--viewport-frame-left);
  max-width: var(--viewport-content-width);
  max-height: var(--viewport-content-height);
  overflow: auto;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: var(--primary-bg);
  transition: background-color 1s ease;
  z-index: 1;
}

/* Space Canvas for Globe Mode */
#spaceCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: var(--color_background_primary);
  pointer-events: none;
  display: block;
  transform: scale(1.02);
}

#map.globe-mode {
  background: transparent !important;
  transition: background-color 0.6s ease,
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#map {
  transition: background-color 0.6s ease,
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#spaceCanvas.active {
  opacity: 1 !important;
  transform: scale(1);
}

#spaceCanvas.transitioning-in {
  opacity: 0;
  transform: scale(1.02);
}

#spaceCanvas.transitioning-out {
  opacity: 0;
  transform: scale(0.98);
}

/* left sidebar navigation container */
.cs_navbar_container_left_sidebar {
  /* primary navigation sidebar */
  position: fixed;
  top: 0px;
  left: 0px;
  width: var(--ui_navbar_width_standard);
  min-width: var(--ui_navbar_width_standard);
  max-width: var(--ui_navbar_width_standard);
  height: 100vh;
  background-color: var(--color_background_navbar);
  border-right: var(--ui_border_uniform_width) solid var(--color_border_primary);
  border-top: var(--ui_border_uniform_width) solid var(--color_border_primary);
  border-bottom: var(--ui_border_uniform_width) solid
    var(--color_border_primary);
  border-left: var(--ui_border_uniform_width) solid var(--color_border_primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--ui_spacing_vertical);
  padding-bottom: var(--ui_spacing_vertical);
  z-index: var(--z_index_navbar);
  transition: all 0.3s ease;
} /* end navbar container */
/* uniform navigation button styling */
.cs_navbar_button_container_uniform {
  /* standardized navbar button component with control ring */
  width: var(--ui_element_uniform_width);
  height: var(--ui_element_uniform_height);
  background-color: var(--panel-bg);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  touch-action: manipulation;
  margin-left: var(--ui_spacing_horizontal);
  margin-right: var(--ui_spacing_horizontal);
  /* box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.1); */
} /* end navbar button */
.cs_navbar_button_container_uniform:hover {
  /* navbar button hover state */
  background-color: var(--color_background_hover);
} /* end button hover */
.cs_navbar_button_container_uniform i {
  /* navbar button icon styling */
  font-size: var(--ui_icon_uniform_size);
  color: var(--color_text_primary);
  transition: color 0.3s ease;
} /* end button icon */
.cs_navbar_button_container_uniform.state_active {
  /* active navigation button state */
  background-color: var(--color_border_focus);
  border-color: var(--color_border_focus);
} /* end active button */
.cs_navbar_button_container_uniform.state_active i {
  /* active button icon color */
  color: var(--color_text_inverse);
} /* end active icon */
/* layers panel overlay container */
.cs_layers_panel_container_overlay {
  /* expandable layers panel sidebar */
  position: absolute;
  top: 0px;
  left: var(--ui_navbar_width_standard);
  width: var(--ui_panel_width_standard);
  height: 100vh;
  background-color: var(--color_background_secondary);
  border-right: var(--ui_border_uniform_width) solid var(--color_border_primary);
  border-top: var(--ui_border_uniform_width) solid var(--color_border_primary);
  border-bottom: var(--ui_border_uniform_width) solid
    var(--color_border_primary);
  display: none;
  flex-direction: column;
  z-index: var(--z_index_panel);
  transition: all 0.3s ease;
} /* end layers panel */
.cs_layers_panel_container_overlay.state_visible {
  /* visible panel state */
  display: flex;
} /* end visible state */
.cs_layers_panel_container_overlay.state_collapsed {
  /* collapsed panel state */
  height: auto;
  overflow: hidden;
} /* end collapsed state */
.cs_layers_panel_container_overlay.state_collapsed .cs_panel_content_wrapper {
  /* hidden content in collapsed state */
  display: none;
} /* end hidden content */
/* sticky panel header component */
.cs_panel_header_container_sticky {
  /* fixed position panel header */
  position: sticky;
  top: 0px;
  z-index: var(--z_index_sticky);
  background-color: var(--color_background_secondary);
  border-bottom: var(--ui_border_uniform_width) solid
    var(--color_border_primary);
  border-left: var(--ui_border_uniform_width) solid var(--color_border_primary);
  border-right: var(--ui_border_uniform_width) solid var(--color_border_primary);
  padding-top: var(--ui_spacing_vertical);
  padding-bottom: var(--ui_spacing_vertical);
  padding-left: var(--ui_spacing_horizontal);
  padding-right: var(--ui_spacing_horizontal);
  display: grid;
  grid-template-columns:
    var(--ui_element_uniform_width) 1fr var(--ui_element_uniform_width)
    var(--ui_element_uniform_width);
  align-items: center;
  height: calc(
    var(--ui_element_uniform_height) + var(--ui_spacing_vertical) * 2
  );
} /* end panel header */
/* search container component */
.cs_search_container_sticky {
  /* sticky search interface */
  position: sticky;
  z-index: var(--z_index_sticky);
  background-color: var(--color_background_secondary);
  border: var(--ui_border_uniform_width) solid var(--color_border_primary);
  padding-top: var(--ui_spacing_vertical);
  padding-bottom: var(--ui_spacing_vertical);
  padding-left: var(--ui_spacing_horizontal);
  padding-right: var(--ui_spacing_horizontal);
  display: none;
  grid-template-columns: var(--ui_element_uniform_width) 1fr var(
      --ui_element_uniform_width
    );
  align-items: center;
  height: calc(
    var(--ui_element_uniform_height) + var(--ui_spacing_vertical) * 2
  );
  gap: 0px;
  overflow: hidden;
} /* end search container */
.cs_search_container_sticky.state_visible {
  /* visible search state */
  display: grid;
} /* end visible search */
/* search controls wrapper */
.cs_search_controls_container {
  /* search action buttons container */
  display: flex;
  align-items: center;
  gap: 0px;
  width: var(--ui_element_uniform_width);
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
} /* end search controls */
.cs_search_controls_container.state_clear_hidden {
  /* hidden clear button state */
  width: var(--ui_element_uniform_width);
} /* end clear hidden */
.cs_search_controls_container.state_clear_visible {
  /* visible clear button state */
  width: calc(var(--ui_element_uniform_width) * 2);
} /* end clear visible */
.cs_search_controls_container.state_has_content {
  /* search with content state */
  transform: translateX(-48px);
} /* end has content */
/* uniform icon container component */
.cs_icon_container_uniform {
  /* standardized clickable icon wrapper */
  width: var(--ui_element_uniform_width);
  height: var(--ui_element_uniform_height);
  background-color: transparent;
  border: none;
  border-radius: var(--ui_border_radius_small);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  touch-action: manipulation;
  padding-right: 0px;
} /* end icon container */
.cs_icon_container_uniform:hover {
  /* icon container hover effect */
  background-color: var(--color_background_hover);
} /* end icon hover */
.cs_icon_container_uniform i {
  /* icon container symbol styling */
  font-size: var(--ui_icon_uniform_size);
  color: var(--color_text_primary);
  transition: color 0.3s ease;
} /* end icon symbol */

.cs_count_text {
  /* count text styling positioned left of category text */
  font-size: var(--ui_icon_uniform_size);
  color: var(--color_text_primary);
  font-weight: 700;
  margin-right: 8px;
  line-height: var(--ui_element_uniform_height);
  height: var(--ui_element_uniform_height);
  display: inline-flex;
  align-items: center;
} /* end count text */

/* panel dropdown arrow component */
.cs_panel_dropdown_arrow {
  /* expandable panel arrow button */
  background-color: var(--color_background_secondary);
  border-color: var(--color_border_primary);
} /* end dropdown arrow */
.cs_panel_dropdown_arrow:hover {
  /* dropdown arrow hover state */
  background-color: var(--color_background_hover);
  border-color: var(--color_border_primary);
} /* end arrow hover */
.cs_panel_dropdown_arrow i {
  /* dropdown arrow icon styling */
  color: var(--color_text_primary);
  transition: transform 0.3s ease;
} /* end arrow icon */
.cs_panel_dropdown_arrow.state_expanded i {
  /* expanded arrow rotation */
  transform: rotate(180deg);
} /* end expanded arrow */
/* panel content wrapper component */
.cs_panel_content_wrapper {
  /* animated content container */
  transition: max-height 0.3s ease, opacity 0.3s ease;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 2000px;
  opacity: 1;
} /* end content wrapper */
.cs_panel_content_wrapper.state_collapsed {
  /* collapsed content state */
  max-height: 0px;
  opacity: 0;
} /* end collapsed content */
/* search toggle button styling */
.cs_search_toggle_button {
  /* search activation button */
  background-color: var(--color_accent_blue_light);
  border-color: var(--color_accent_blue);
} /* end search toggle */
.cs_search_toggle_button:hover {
  /* search toggle hover state */
  background-color: var(--color_background_hover);
  border-color: var(--color_accent_blue_hover);
} /* end toggle hover */
.cs_search_toggle_button i {
  /* search toggle icon styling */
  color: var(--color_accent_blue);
  transition: color 0.3s ease;
} /* end toggle icon */
.cs_search_toggle_button:hover i {
  /* search toggle icon hover */
  color: var(--color_accent_blue_hover);
} /* end icon hover */
.cs_search_toggle_button.state_active {
  /* active search toggle state */
  background-color: var(--color_accent_blue);
  border-color: var(--color_accent_blue);
} /* end active toggle */
.cs_search_toggle_button.state_active i {
  /* active toggle icon color */
  color: var(--color_text_on_accent);
} /* end active icon */
.cs_search_toggle_button.state_active:hover {
  /* active toggle hover state */
  background-color: var(--color_accent_blue_hover);
  border-color: var(--color_accent_blue_hover);
} /* end active hover */
.cs_search_toggle_button.state_active:hover i {
  /* active toggle icon hover */
  color: var(--color_text_on_accent);
} /* end active icon hover */
/* settings button styling */
.cs_settings_button {
  /* settings panel activation button */
  background-color: var(--color_accent_purple_light);
  border-color: var(--color_accent_purple);
} /* end settings button */
.cs_settings_button:hover {
  /* settings button hover state */
  background-color: var(--color_background_hover);
  border-color: var(--color_accent_purple_hover);
} /* end settings hover */
.cs_settings_button i {
  /* settings button icon styling */
  color: var(--color_accent_purple);
  transition: color 0.3s ease;
} /* end settings icon */
.cs_settings_button:hover i {
  /* settings icon hover color */
  color: var(--color_accent_purple_hover);
} /* end settings icon hover */
/* settings panel dropdown */
.cs_settings_panel_container {
  /* settings dropdown menu */
  position: absolute;
  top: calc(var(--ui_element_uniform_height) + var(--ui_spacing_vertical) * 2);
  right: 0px;
  width: 200px;
  background-color: var(--color_background_secondary);
  border: var(--ui_border_uniform_width) solid var(--color_border_primary);
  border-radius: var(--ui_border_radius_small);
  display: none;
  flex-direction: column;
  padding: var(--ui_spacing_vertical);
  z-index: 1020;
} /* end settings panel */
.cs_settings_panel_container.state_visible {
  /* visible settings panel */
  display: flex;
} /* end visible settings */
.cs_settings_panel_item {
  /* individual settings menu item */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ui_spacing_vertical);
  min-height: 48px;
  cursor: pointer;
  border-radius: var(--ui_border_radius_small);
  transition: all 0.3s ease;
} /* end settings item */
.cs_settings_panel_item:hover {
  /* settings item hover effect */
  background-color: var(--color_background_hover);
} /* end item hover */
.cs_settings_panel_text {
  /* settings item text styling */
  font-size: var(--ui_text_uniform_size);
  color: var(--color_text_primary);
} /* end settings text */
.cs_settings_panel_item.cs_close_panel_button i {
  /* close button icon color */
  color: var(--color_accent_red);
} /* end close icon */
.cs_settings_panel_item.cs_close_panel_button:hover i {
  /* close button hover icon */
  color: var(--color_accent_red_hover);
} /* end close hover icon */
/* close panel button styling */
.cs_close_panel_button {
  /* panel close button component */
  background-color: var(--color_accent_red_light);
  border-color: var(--color_accent_red);
} /* end close button */
.cs_close_panel_button:hover {
  /* close button hover state */
  background-color: var(--color_background_hover);
  border-color: var(--color_accent_red_hover);
} /* end close hover */
.cs_close_panel_button i {
  /* close button icon styling */
  color: var(--color_accent_red);
  transition: color 0.3s ease;
} /* end close icon */
.cs_close_panel_button:hover i {
  /* close icon hover color */
  color: var(--color_accent_red_hover);
} /* end close icon hover */
/* panel title text component */
.cs_panel_title_text {
  /* panel header title styling */
  font-size: var(--ui_text_uniform_size);
  font-weight: var(--font_weight_semibold);
  color: var(--color_text_primary);
  height: var(--ui_element_uniform_height);
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: var(--ui_border_uniform_width) solid var(--color_border_primary);
  background-color: transparent;
  padding-left: var(--ui_spacing_horizontal);
  padding-right: var(--ui_spacing_horizontal);
} /* end panel title */
/* search input wrapper component */
.cs_search_input_wrapper {
  /* search field container */
  height: var(--ui_element_uniform_height);
  background-color: var(--color_background_input);
  border: var(--ui_border_uniform_width) solid var(--color_border_primary);
  border-radius: var(--ui_border_radius_small);
  display: flex;
  align-items: center;
  padding-left: var(--ui_spacing_horizontal);
  padding-right: var(--ui_spacing_horizontal);
  transition: all 0.3s ease;
  width: 100%;
  overflow: hidden;
  margin-right: var(--ui_spacing_horizontal);
} /* end search wrapper */
.cs_search_input_wrapper.state_has_content {
  /* search wrapper with content */
  width: calc(100% - 48px);
} /* end wrapper content */
.cs_search_input_wrapper.state_clear_visible {
  /* search wrapper with clear button */
  width: calc(
    100% - var(--ui_element_uniform_width) - var(--ui_spacing_horizontal)
  );
} /* end wrapper clear */
.cs_search_input_wrapper:focus-within {
  /* focused search wrapper */
  border-color: var(--color_border_focus);
} /* end wrapper focus */
/* search input field styling */
.cs_search_input_field {
  /* actual search text input */
  width: 100%;
  height: 100%;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font_family_primary);
  font-size: var(--ui_text_uniform_size);
  color: var(--color_text_primary);
} /* end search field */
.cs_search_input_field::placeholder {
  /* search placeholder text */
  color: var(--color_text_muted);
} /* end placeholder */
/* search action buttons */
.cs_search_submit_button {
  /* search submit button styling */
  background-color: var(--color_accent_green_light);
  border-color: var(--color_accent_green);
} /* end submit button */
.cs_search_submit_button:hover {
  /* submit button hover state */
  background-color: var(--color_background_hover);
  border-color: var(--color_accent_green_hover);
} /* end submit hover */
.cs_search_submit_button i {
  /* submit button icon styling */
  color: var(--color_accent_green);
  transition: color 0.3s ease;
} /* end submit icon */
.cs_search_submit_button:hover i {
  /* submit icon hover color */
  color: var(--color_accent_green_hover);
} /* end submit icon hover */
.cs_search_clear_button {
  /* search clear button styling */
  background-color: var(--color_accent_orange_light);
  border-color: var(--color_accent_orange);
} /* end clear button */
.cs_search_clear_button:hover {
  /* clear button hover state */
  background-color: var(--color_background_hover);
  border-color: var(--color_accent_orange_hover);
} /* end clear hover */
.cs_search_clear_button i {
  /* clear button icon styling */
  color: var(--color_accent_orange);
  transition: color 0.3s ease;
} /* end clear icon */
.cs_search_clear_button:hover i {
  /* clear icon hover color */
  color: var(--color_accent_orange_hover);
} /* end clear icon hover */
.cs_search_clear_button_hidden {
  /* hidden clear button state */
  display: none;
} /* end clear hidden */
/* scrollable content area */
.cs_content_scrollable_area,
.cs_scrollable_content_container {
  /* main content scrolling region */
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  max-height: calc(85vh - 150px);
} /* end scrollable area */
/* layer list container */
.cs_layer_list_container {
  /* layers content container */
  overflow-y: auto;
  overflow-x: hidden;
} /* end layer list */
/* category container component */
.cs_category_container {
  /* background-color: var(--color_background_secondary); */
  border-radius: var(--ui_border_radius_small);
  transition: all 0.3s ease;
  /* margin-bottom: var(--ui_spacing_vertical); */
} /* end category container */
.cs_category_container.state_expanded {
  /* expanded category state */
  background-color: transparent;
  border-color: var(--color_border_active);
} /* end expanded category */
.cs_category_container.state_expanded .cs_category_header {
  /* expanded category header */
  background-color: transparent;
} /* end expanded header 
            
            /* category header component */
.cs_category_header {
  cursor: pointer;
  display: grid;
  grid-template-columns:
    var(--ui_element_uniform_width) var(--ui_element_uniform_width) var(
      --ui_element_uniform_width
    )
    1fr;
  align-items: center;
  min-height: 48px;
  /* padding-top: var(--ui_spacing_vertical); */
  /* padding-bottom: var(--ui_spacing_vertical); */
  /* padding-left: var(--ui_spacing_horizontal); */
  /* padding-right: var(--ui_spacing_horizontal); */
  border-bottom: 1px solid var(--panel-border);
  transition: all 0.3s ease;
} /* end category header */
.cs_category_header:hover {
  /* category header hover effect */
  background-color: var(--color_background_hover);
} /* end header hover */
/* checkbox container component */
.cs_checkbox_container {
  /* category checkbox wrapper */
  width: var(--ui_element_uniform_width);
  height: var(--ui_element_uniform_height);
  border: none;
  border-right: 1px solid var(--panel-border);
  border-radius: var(--ui_border_radius_small);
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
} /* end checkbox container */
.cs_checkbox_input {
  width: 38px;
  height: 38px;
  accent-color: var(--color_accent_blue);
  cursor: pointer;
  margin: 0px;
  border: var(--ui_border_uniform_width) solid var(--color_border_primary);
  background-color: var(--color_background_secondary);
} /* end checkbox input */
/* category text styling */
.cs_category_text {
  /* category name text display */
  font-size: var(--ui_text_uniform_size);
  font-weight: 600;
  color: var(--color_text_primary);
  height: var(--ui_element_uniform_height);
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 1px solid var(--panel-border);
  background-color: transparent;
  padding-left: 5px;
} /* end category text */
/* category count styling */
.cs_category_count {
  /* category layer count display */
  color: #888888;
  font-weight: 600;
  font-size: var(--ui_text_uniform_size);
  margin-left: 1px;
} /* end category count */

/* expansion arrow container */
.cs_expansion_arrow_container {
  /* category expand collapse button */
  width: var(--ui_element_uniform_width);
  height: var(--ui_element_uniform_height);
  border: none;
  border-left: 1px solid var(--panel-border);
  border-radius: var(--ui_border_radius_small);
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  cursor: pointer;
} /* end expansion arrow */
.cs_expansion_arrow_container i {
  /* expansion arrow icon */
  font-size: var(--ui_icon_uniform_size);
  color: var(--color_text_primary);
  transition: all 0.3s ease;
} /* end arrow icon */
.cs_category_container.state_expanded .cs_expansion_arrow_container {
  /* expanded arrow container */
  background-color: transparent;
  /* border-color: var(--color_accent_green); */
} /* end expanded container */
.cs_category_container.state_expanded .cs_expansion_arrow_container i {
  /* expanded arrow icon */
  /* color: var(--color_accent_green); */
  transform: rotate(180deg);
} /* end expanded icon */
/* layer alignment container */
.cs_layer_alignment_container {
  /* layer item alignment wrapper */
  width: var(--ui_element_uniform_width);
  height: var(--ui_element_uniform_height);
  border: var(--ui_border_uniform_width) solid var(--color_border_secondary);
  border-radius: var(--ui_border_radius_small);
  background-color: var(--color_background_quaternary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
} /* end alignment container */
/* category content wrapper */
.cs_category_content_wrapper {
  /* expandable category content */
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background-color: rgba(0, 0, 0, 0.15);
  align-items: center;
  justify-content: center;
} /* end content wrapper */
.cs_category_container.state_expanded .cs_category_content_wrapper {
  /* expanded content wrapper */
  max-height: 2000px;
} /* end expanded wrapper */
/* layer item component */
.cs_layer_item {
  /* background-color: var(--color_background_secondary); */
  /* border-radius: var(--ui_border_radius_small); */
  cursor: pointer;
  display: grid;
  grid-template-columns:
    var(--ui_element_uniform_width) var(--ui_element_uniform_width) var(
      --ui_element_uniform_width
    )
    1fr;
  align-items: center;
  /* padding-top: var(--ui_spacing_vertical); */
  /* padding-bottom: var(--ui_spacing_vertical); */
  /* padding-left: var(--ui_spacing_horizontal); */
  /* padding-right: var(--ui_spacing_horizontal); */
  /* margin-bottom: var(--ui_spacing_vertical); */
  transition: all 0.3s ease;
} /* end layer item */
.cs_layer_item:hover {
  /* layer item hover effect */
  background-color: var(--color_background_hover);
} /* end layer hover */
/* legend symbol container */
.cs_legend_symbol_container {
  /* layer legend symbol wrapper */
  width: var(--ui_element_uniform_width);
  height: var(--ui_element_uniform_height);
  border: var(--ui_border_uniform_width) solid var(--color_border_primary);
  border-radius: var(--ui_border_radius_small);
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.3s ease;
} /* end legend container */
.cs_legend_symbol_image {
  /* legend symbol image */
  width: var(--ui_icon_uniform_size);
  height: var(--ui_icon_uniform_size);
  object-fit: contain;
  object-position: center;
  display: block;
} /* end legend image */
.cs_legend_symbol_fallback {
  /* legend fallback icon */
  font-size: var(--ui_icon_uniform_size);
  color: var(--color_text_secondary);
  transition: color 0.3s ease;
} /* end legend fallback */
/* layer text styling */
.cs_layer_text {
  /* layer name text display */
  font-size: 12px;
  font-weight: var(--font_weight_normal);
  color: var(--color_text_primary);
  height: var(--ui_element_uniform_height);
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: var(--ui_border_uniform_width) solid var(--color_border_primary);
  background-color: transparent;
  padding-left: var(--ui_spacing_horizontal);
  padding-right: var(--ui_spacing_horizontal);
} /* end layer text */
/* loading container component */
.cs_loading_container {
  /* loading state display */
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: var(--ui_spacing_vertical);
  padding-bottom: var(--ui_spacing_vertical);
  padding-left: var(--ui_spacing_horizontal);
  padding-right: var(--ui_spacing_horizontal);
  background-color: var(--color_background_secondary);
  border: var(--ui_border_uniform_width) solid var(--color_border_primary);
  border-radius: var(--ui_border_radius_small);
  margin-top: var(--ui_spacing_vertical);
  margin-bottom: var(--ui_spacing_vertical);
  margin-left: var(--ui_spacing_horizontal);
  margin-right: var(--ui_spacing_horizontal);
  text-align: center;
  color: var(--color_text_primary);
} /* end loading container */
/* progress bar component */
.cs_progress_bar_container {
  /* progress indicator wrapper */
  width: 100%;
  height: var(--ui_element_uniform_height);
  background-color: var(--color_background_quaternary);
  border: var(--ui_border_uniform_width) solid var(--color_border_primary);
  border-radius: var(--ui_border_radius_small);
  overflow: hidden;
  margin-top: var(--ui_spacing_vertical);
  transition: all 0.3s ease;
  position: relative;
} /* end progress container */
.cs_progress_bar_fill,
.cs_progress_bar {
  /* progress bar fill element */
  width: 0%;
  height: 100%;
  background-color: var(--color_accent_green);
  color: var(--color_text_on_accent);
  font-size: var(--ui_text_uniform_size);
  font-weight: var(--font_weight_semibold);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.3s ease;
  border-right: var(--ui_border_uniform_width) solid var(--color_accent_green);
} /* end progress bar */
/* perfect scrollbar styling */
.ps {
  /* perfect scrollbar container */
  position: relative;
} /* end ps container */
.ps__rail-y {
  /* vertical scrollbar track */
  position: absolute;
  right: 0px;
  top: 0px;
  bottom: 0px;
  width: 8px;
  background-color: var(--color_scrollbar_track);
  border-radius: var(--ui_border_radius_small);
  right: 4px;
  border: var(--ui_border_uniform_width) solid var(--color_border_primary);
} /* end scrollbar rail */
.ps__thumb-y {
  /* scrollbar thumb element */
  position: absolute;
  right: 0px;
  width: 8px;
  background-color: var(--color_scrollbar_thumb);
  border-radius: var(--ui_border_radius_small);
  transition: none;
  border: var(--ui_border_uniform_width) solid var(--color_border_primary);
} /* end scrollbar thumb */
.ps__thumb-y:hover {
  /* scrollbar thumb hover */
  background-color: var(--color_scrollbar_thumb_hover);
} /* end thumb hover */
.ps__rail-y:hover .ps__thumb-y {
  /* rail hover thumb */
  background-color: var(--color_scrollbar_thumb_hover);
} /* end rail hover */
/* top navigation container */
.top_nav_container {
  /* main navigation bar */
  position: fixed;
  top: 0px;
  left: 48px;
  right: 48px;
  height: 48px;
  padding: 0px;
  z-index: var(--z_index_navbar);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  background-color: var(--panel-bg);
  border: 1px solid var(--panel-border);
  transition: var(--transition);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
} /* end top nav */
.top_nav {
  /* navigation items container */
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0px 48px;
  gap: 0px;
  margin: 0px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  width: 100%;
} /* end nav items */
.top_nav::-webkit-scrollbar {
  /* hide webkit scrollbar */
  display: none;
} /* end scrollbar hide */
.nav_left_container::-webkit-scrollbar {
  /* hide left navbar scrollbar */
  display: none;
}
.nav_right_container::-webkit-scrollbar {
  /* hide right navbar scrollbar */
  display: none;
}
.bottom_nav::-webkit-scrollbar {
  /* hide bottom nav scrollbar */
  display: none;
}
/* top buttons container */
.top_buttons_container {
  /* navigation action buttons */
  display: flex;
  align-items: center;
  gap: 0px;
  z-index: 2002;
} /* end top buttons */
/* navigation divider component */
.nav_div {
  /* navigation button divider */
  background-color: var(--panel-bg);
  border: 2px solid var(--panel-border);
  border-radius: 0px;
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: var(--text-color);
  transition: var(--transition);
  font-size: 16px;
  min-width: 48px;
  min-height: 48px;
  margin: 0px;
  padding: 0px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-sizing: border-box;
  flex-direction: column;
  overflow: hidden;
} /* end nav div */
.nav_div:first-child {
  /* first navigation button */
  border-left: none;
} /* end first nav */
.nav_div:last-child {
  /* last navigation button */
  border-right: none;
} /* end last nav */
.nav_div:hover {
  /* navigation button hover */
  background-color: var(--text-color);
  color: var(--panel-bg);
  border: var(--ui_border_uniform_width) solid var(--panel-border);
} /* end nav hover */
.nav_div i {
  /* nav div icon - 1/3 container size */
  font-size: 16px;
  margin-bottom: 4px;
  color: var(--text-color);
  transition: color 0.3s ease;
} /* end nav div icon */
.nav_div:hover i {
  /* nav div icon hover */
  color: var(--panel-bg);
} /* end nav div icon hover */
.nav_div .button_label {
  /* nav div text label */
  font-size: 8px;
  margin-top: 4px;
  margin-bottom: 4px;
  text-align: center;
  border-radius: 0px;
  line-height: 1;
  font-weight: 700;
  color: var(--text-color);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
} /* end nav div label */
.nav_div:hover .button_label {
  /* nav div label hover */
  color: var(--panel-bg);
} /* end nav div label hover */
.nav_div.active {
  /* active navigation button */
  background-color: var(--text-color);
  color: var(--panel-bg);
  border: var(--ui_border_uniform_width) solid var(--panel-border);
} /* end nav active */
.nav_div.active i,
.nav_div.active .button_label {
  /* active nav div icon and label */
  color: var(--panel-bg);
} /* end nav active elements */
/* navigation content container */
.nav_content_container {
  /* navigation item wrapper */
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  overflow: hidden;
} /* end nav content */
.nav_content_container.hidden {
  /* hidden navigation content */
  display: none;
} /* end hidden content */
/* search container component */
.search_container {
  /* search interface container */
  position: relative;
  flex: 1;
  max-width: 100%;
  display: none;
  align-items: center;
  margin: 0px;
  transition: var(--transition);
  border: 1px solid var(--panel-border);
  border-radius: 0px;
  box-sizing: border-box;
} /* end search container */
.search_container.active {
  /* active search container */
  display: flex;
  width: 100%;
} /* end active search */
.search_container.full-width {
  /* full width search overlay */
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: var(--panel-bg);
  z-index: 2003;
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-sizing: border-box;
  padding: 5px;
  height: 48px;
} /* end full width search */
/* search input styling */
.search_input {
  /* main search text input */
  width: 100%;
  height: 48px;
  padding: 10px 48px;
  border: 1px solid var(--panel-border);
  border-radius: 0px;
  background-color: var(--input-bg);
  color: var(--text-color);
  font-size: 16px;
  transition: border-color 0.3s ease;
  outline: none;
  border-left: 1px solid var(--panel-border);
  border-right: 1px solid var(--panel-border);
  box-sizing: border-box;
} /* end search input */
.search_input::placeholder {
  /* search placeholder styling */
  color: var(--text-muted);
  opacity: 0.7;
} /* end placeholder */
.search_input:focus {
  /* focused search input */
  border: 1px solid var(--panel-border);
} /* end input focus */
.search_input.error {
  /* error state search input */
  border: 1px solid var(--error-color);
  animation: shake 0.5s;
} /* end input error */
/* search back button */
.search_back_button {
  /* search mode back button */
  width: 48px;
  height: 48px;
  background: var(--panel-bg);
  border: 2px solid var(--panel-border);
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-color);
  transition: var(--transition);
  font-size: 16px;
  box-sizing: border-box;
} /* end back button */
.search_back_button:hover {
  /* back button hover state */
  background: var(--text-color);
  color: var(--panel-bg);
  border: 1px solid var(--panel-border);
} /* end back hover */
/* search icon positioning */
.search_icon_left,
.search-icon {
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-color);
  font-size: 16px;
  opacity: 0.8;

  z-index: 2;
  left: 0px;
  font-weight: 600;
  width: 48px;
  height: 48px;
  border: solid 1px;
  text-align: center;
  padding-top: 16px;
  border: solid 1px transparent;
} /* end search icon */
/* search action buttons */
.search_div {
  /* search submit button */
  position: absolute;
  right: 0px;
  top: 0px;
  background-color: var(--panel-bg);
  border: 2px solid var(--panel-border);
  border-radius: 0px;
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: var(--text-color);
  transition: var(--transition);
  border-left: 2px solid var(--panel-border);
  box-sizing: border-box;
} /* end search div */
.search_div:hover {
  /* search button hover */
  background-color: var(--panel-bg-hover);
  border: 1px solid var(--panel-border);
} /* end search hover */
.clear_search {
  /* clear search button */
  position: absolute;
  right: 48px;
  top: 0px;
  background-color: var(--panel-bg);
  border: 2px solid var(--panel-border);
  border-left: 2px solid var(--panel-border);
  border-right: 2px solid var(--panel-border);
  width: 48px;
  height: 48px;
  border-radius: 0px;
  display: none;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 16px;
  z-index: 2;
  transition: var(--transition);
  box-sizing: border-box;
} /* end clear search */
.clear_search:hover {
  /* clear search hover */
  background-color: var(--panel-bg-hover);
  color: var(--text-color);
  border: 1px solid var(--panel-border);
} /* end clear hover */
/* search results container */
.search_results_container {
  /* search dropdown results */
  position: fixed;
  top: 48px;
  left: 0px;
  right: 0px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-top: 1px solid var(--panel-border);
  border-radius: 0px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  z-index: 3000;
  display: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-sizing: border-box;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
} /* end results container */
.search_results_container.active {
  /* active results container */
  display: block;
} /* end active results */
/* search result item styling */
.search_result_item {
  /* individual search result */
  padding: 12px 16px;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--panel-border);
  min-height: 48px;
  box-sizing: border-box;
} /* end result item */
.search_result_item:hover {
  /* result item hover */
  background-color: var(--panel-bg-hover);
} /* end result hover */
.search_result_icon {
  /* result item icon */
  width: 48px;
  height: 48px;
  background: var(--accent-bg);
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  color: var(--text-color);
} /* end result icon */
/* small badge displayed for recent searches */
.search_result_recent_badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 50%;
  margin-left: 6px;
  font-size: 10px;
  color: var(--text-muted);
}
.search_result_text {
  /* result item text container */
  flex-grow: 1;
} /* end result text */
.search_result_name {
  /* result item name */
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 2px;
  color: var(--text-color);
} /* end result name */
.search_result_address {
  /* result item address */
  font-size: 12px;
  color: var(--text-muted);
} /* end result address */
/* menu corner containers */
.menu_corner_container {
  /* corner positioned menu button */
  position: fixed;
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  background: var(--panel-bg);
  z-index: 10010;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--panel-border);
  border-radius: 0px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
} /* end corner container */
.menu_corner_top_left {
  /* top left corner position */
  top: 0px;
  left: 0px;
  border: 1px solid var(--panel-border);
} /* end top left */
.menu_corner_top_right {
  /* top right corner position */
  top: 0px;
  right: 0px;
  border: 1px solid var(--panel-border);
} /* end top right */
.menu_corner_bottom_left {
  /* bottom left corner position */
  bottom: 0px;
  left: 0px;
  border: 1px solid var(--panel-border);
} /* end bottom left */
.menu_corner_bottom_right {
  /* bottom right corner position */
  bottom: 0px;
  right: 0px;
  border: 1px solid var(--panel-border);
} /* end bottom right */
/* control button styling */
.control-button,
.control_button {
  /* standard control button component with circular outline */
  width: 48px;
  height: 48px;
  border-radius: 0px;
  background: var(--panel-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  flex-direction: column;
  border: 1px solid var(--panel-border);
  transition: var(--transition);
  z-index: 2;
  color: var(--text-color);
  margin: 0px;
  padding: 0px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  min-width: 48px;
  min-height: 48px;
  box-sizing: border-box;
  /* box-shadow: none !important; */
  position: relative;
} /* end control button */
.control-button::before,
.control_button::before {
  /* removed circular outline */
  display: none;
} /* end control button outline */
.control-button:hover,
.control_button:hover {
  /* control button hover with theme colors */
  background: var(--text-color);
  color: var(--panel-bg);
  border: 1px solid var(--text-color);
} /* end button hover */
.control-button:hover::before,
.control_button:hover::before {
  /* hover state outline removed */
  display: none;
} /* end hover outline */
.control-button.active,
.control_button.active {
  /* active control button with theme colors */
  background: var(--text-color);
  color: var(--panel-bg);
  border: 1px solid var(--text-color);
  position: relative;
} /* end active button */
.control-button.active::before,
.control_button.active::before {
  /* active state outline removed */
  display: none;
} /* end active outline */
.control_button.popup_open {
  /* popup open button state with theme colors */
  background: var(--accent-bg);
  color: var(--text-color);
  border: 1px solid var(--text-color);
  position: relative;
} /* end popup open */
.control_button.popup_open::before {
  /* popup open outline removed */
  display: none;
} /* end popup outline */

/* Active toggle: show circular outline around the icon for accessibility */
.control-button.active::after,
.control_button.active::after,
.control_button.popup_open::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(48px / 1.618);
  height: calc(48px / 1.618);
  border-radius: 50%;
  border: 1px solid var(--accent, rgba(255, 255, 255, 0.9));
  box-sizing: border-box;
  pointer-events: none;
  opacity: 1;
  transition: opacity 180ms var(--ease, ease), transform 180ms var(--ease, ease);
  z-index: 1;
}

/* Slightly bigger halo on hover/active for emphasis */
.control-button:hover::after,
.control_button:hover::after,
.control_button.active:hover::after {
  width: calc(48px / 1.618);
  height: calc(48px / 1.618);
}
.cs_measurement_marker_circular.state_dragging.selected_marker {
  position: relative;
} /* end selected marker base */
.cs_measurement_marker_circular.state_dragging.selected_marker::before {
  /* golden glow outer ring animation */
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 1px solid var(--color_accent_yellow);
  border-radius: 50%;
  opacity: 0.8;
  animation: golden_glow_pulse 2s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
} /* end golden glow outer */
.cs_measurement_marker_circular.state_dragging.selected_marker::after {
  /* golden glow inner ring animation */
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 1px solid var(--color_accent_yellow);
  border-radius: 50%;
  opacity: 0.6;
  animation: golden_glow_pulse 2s ease-in-out infinite 0.5s;
  pointer-events: none;
  z-index: -1;
} /* end golden glow inner */
@keyframes golden_glow_pulse {
  /* golden glow pulsing animation keyframes */
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.4;
  }
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
} /* end golden glow animation */
/* dot separator styling */
.cs_category_separator {
  /* dot separator between category and count text */
  margin: 0px 4px;
  color: var(--color_text_muted);
  font-weight: bold;
  opacity: 0.7;
} /* end category separator */
/* navigation side containers */
.nav_left_container {
  /* left navigation sidebar */
  position: fixed;
  top: 48px;
  bottom: 48px;
  left: 0px;
  width: 48px;
  min-width: 48px;
  z-index: var(--z_index_navbar);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0px;
  margin: 0px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 0px;
  box-sizing: border-box;
} /* end left nav */
.nav_right_container {
  /* right navigation sidebar */
  position: fixed;
  top: 48px;
  bottom: 48px;
  right: 0px;
  width: 48px;
  min-width: 48px;
  z-index: var(--z_index_navbar);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0px;
  margin: 0px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 0px;
  box-sizing: border-box;
} /* end right nav */
/* navigation controls styling */
.left_nav_controls,
.right_nav_controls {
  /* navigation control groups */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 0px;
  margin: 0px;
  padding: 48px 0px;
  border: 1px solid var(--panel-border);
  z-index: 1001;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
} /* end nav controls */
.left_nav_controls::-webkit-scrollbar {
  display: none;
}
.right_nav_controls::-webkit-scrollbar {
  display: none;
}
.left_nav_controls .control_button,
.right_nav_controls .control_button {
  /* nav control buttons */
  width: 48px;
  height: 48px;
  border-radius: 0px;
  margin: 0px;
  padding: 0px;
  border: var(--ui_border_uniform_width) solid var(--panel-border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-sizing: border-box;
  flex-direction: column;
  font-size: 16px;
  overflow: hidden;
} /* end nav buttons */
.left_nav_controls .control_button:first-child,
.right_nav_controls .control_button:first-child {
  /* first nav button */
  border-top: var(--ui_border_uniform_width) solid var(--panel-border);
} /* end first button */
.left_nav_controls .control_button:last-child,
.right_nav_controls .control_button:last-child {
  /* last nav button */
  border-bottom: var(--ui_border_uniform_width) solid var(--panel-border);
} /* end last button */
.control_button .button_label {
  /* text label for control buttons */
  font-size: 8px;
  margin-top: 4px;
  margin-bottom: 4px;
  text-align: center;
  border-radius: 5px;
  line-height: 1;
  font-weight: 700;
  color: var(--text-color);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
} /* end button label */
.control_button:hover .button_label,
.control_button:hover i {
  /* button label and icon hover state */
  color: var(--panel-bg);
} /* end hover label */
.control_button.active .button_label,
.control_button.active i {
  /* button label and icon active state */
  color: var(--panel-bg);
} /* end active label */
.control_button i {
  /* button icon adjustments for labels - 1/3 container size */
  font-size: 16px;
  /* margin-bottom: 4px; */
  color: var(--text-color);
  transition: color 0.3s ease;
} /* end button icon */
/* menu button styling */
.menu_button {
  /* general menu button component */
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  border-radius: 0px;
  background: var(--panel-bg);
  color: var(--text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: var(--ui_border_uniform_width) solid var(--panel-border);
  transition: var(--transition);
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  flex-direction: column;
} /* end menu button */
.menu_button:hover {
  /* menu button hover */
  background: var(--text-color);
  color: var(--panel-bg);
  border: var(--ui_border_uniform_width) solid var(--panel-border);
} /* end menu hover */
.menu_button i {
  /* menu button icon - 1/3 container size */
  font-size: 16px;
  margin-bottom: 4px;
  color: var(--text-color);
  transition: color 0.3s ease;
} /* end menu button icon */
.menu_button:hover i {
  /* menu button icon hover */
  color: var(--panel-bg);
} /* end menu button icon hover */
.menu_button .button_label {
  /* menu button text label */
  font-size: 8px;
  margin-top: 4px;
  margin-bottom: 4px;
  text-align: center;
  line-height: 1;
  border-radius: 5px;
  font-weight: 700;
  color: var(--text-color);
  text-transform: uppercase;
  letter-spacing: 0.3px;
} /* end menu button label */
.menu_button:hover .button_label {
  /* menu button label hover */
  color: var(--panel-bg);
} /* end menu button label hover */
/* bottom navigation container */
.bottom_nav_container {
  /* bottom navigation bar */
  position: fixed;
  bottom: 0px;
  left: 48px;
  right: 48px;
  height: 48px;
  z-index: var(--z_index_navbar);
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-top: 1px solid var(--panel-border);
  border-left: 1px solid var(--panel-border);
  border-right: 1px solid var(--panel-border);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  transition: var(--transition);
  margin: 0px;
  padding: 0px;
  border-radius: 0px;
  box-sizing: border-box;
} /* end bottom nav */
.bottom_nav {
  /* bottom navigation items */
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0px 48px;
  gap: 0px;
  margin: 0px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  width: 100%;
} /* end bottom nav items */
.bottom_nav::-webkit-scrollbar {
  /* hide bottom nav scrollbar */
  display: none;
} /* end scrollbar hide */
.bottom_nav_button {
  /* bottom navigation button */
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 0px;
  background: var(--panel-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  border: 1px solid var(--panel-border);
  transition: var(--transition);
  color: var(--text-color);
  margin: 0px;
  padding: 0px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-sizing: border-box;
  flex-direction: column;
  overflow: hidden;
} /* end bottom button */
.bottom_nav_button:first-child {
  /* first bottom button */
  border-left: none;
} /* end first bottom */
.bottom_nav_button:last-child {
  /* last bottom button */
  border-right: none;
} /* end last bottom */
.bottom_nav_button:hover {
  /* bottom button hover */
  background: var(--text-color);
  color: var(--panel-bg);
  border: 1px solid var(--panel-border);
} /* end bottom hover */
.bottom_nav_button i {
  /* bottom nav button icon - 1/3 container size */
  font-size: 16px;
  margin-bottom: 4px;
  color: var(--text-color);
  transition: color 0.3s ease;
} /* end bottom nav icon */
.bottom_nav_button:hover i {
  /* bottom nav button icon hover */
  color: var(--panel-bg);
} /* end bottom nav icon hover */
.bottom_nav_button .button_label {
  /* bottom nav button text label */
  font-size: 8px;
  margin-top: 4px;
  margin-bottom: 4px;
  text-align: center;
  line-height: 1;
  font-weight: 700;
  color: var(--text-color);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-radius: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
} /* end bottom nav label */
.bottom_nav_button:hover .button_label {
  /* bottom nav button label hover */
  color: var(--panel-bg);
} /* end bottom nav label hover */
.bottom_nav_button.active {
  /* active bottom button */
  background: var(--text-color);
  color: var(--panel-bg);
  border: 1px solid var(--panel-border);
} /* end bottom active */
.bottom_nav_button.active i,
.bottom_nav_button.active .button_label {
  /* active bottom nav button icon and label */
  color: var(--panel-bg);
} /* end bottom nav active elements */

/* show circle around active bottom-nav icons for emphasis */
.bottom_nav_button.active::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  border-radius: 50%;
  border: 2px solid var(--accent, rgba(255, 255, 255, 0.9));
  box-sizing: border-box;
  pointer-events: none;
  z-index: 1;
  transition: width 180ms var(--ease, ease), height 180ms var(--ease, ease);
}

/* bottom popup container */
.bottom_popup_container {
  /* bottom expandable popup with relative positioning for scroll buttons */
  position: fixed;
  bottom: 48px;
  left: 48px;
  right: 48px;
  height: calc(33vh);
  max-height: calc(
    100vh - 144px
  ); /* Ensure doesn't overlap with top navbar + 48px buffer */
  background-color: var(--panel-bg);
  z-index: 1999;
  display: none;
  flex-direction: column;
  overflow: hidden;
  border-top: 1px solid var(--panel-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: var(--transition);
  box-sizing: border-box;
} /* end popup container */
/* unified popup header styles */
.cs_unified_popup_header {
  /* unified header for all popups */
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 48px;
  background-color: rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid var(--panel-border);
  padding: 0px 16px;
  flex-shrink: 0;
  box-sizing: border-box;
  z-index: var(--z_index_navbar);
} /* end unified header */
/* popup header title styles */
.cs_popup_header_title {
  /* header title text */
  font-weight: 600;
  font-size: 16px;
  color: var(--text-color);
} /* end header title */
/* popup close button styles */
.cs_popup_close_button {
  /* circular close button */
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
} /* end close button */
.cs_popup_close_button:hover {
  /* close button hover state */
  background-color: rgba(255, 255, 255, 1);
  border-color: rgba(0, 0, 0, 0.3);
} /* end close hover */
.cs_popup_close_button i {
  /* close button icon */
  font-size: 12px;
  color: rgba(0, 0, 0, 0.7);
} /* end close icon */
/* popup content area styles */
.cs_popup_content_area {
  /* content area below header with horizontal scrolling */
  display: flex;
  flex-direction: row;
  gap: 0px;
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  box-sizing: border-box;
  position: relative;
  scroll-behavior: smooth;
  padding: 0px;
  margin: 0px;
  border-top: 1px solid var(--panel-border);
  z-index: var(--z_index_navbar);
  scrollbar-width: none;
  -ms-overflow-style: none;
} /* end content area */
.cs_popup_content_area::-webkit-scrollbar {
  /* hide popup content scrollbar */
  display: none;
}
/* horizontal scroll buttons for popup content area */
/* Bottom navbar controls for active panels and close button */
.cs_bottom_navbar_controls {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  background: var(--panel-bg);
  border-bottom: 1px solid var(--panel-border);
  z-index: var(--z_index_navbar);
}

.cs_close_all_button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 0px;
  border: 1px solid var(--panel-border);
  cursor: pointer;
  margin-right: 12px;
  background-color: rgba(0, 0, 0, 0.05);
}

.cs_close_all_button:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.cs_close_all_button i {
  font-size: 12px;
  color: var(--text-color);
}

.cs_active_panel_count {
  display: flex;
  align-items: center;
}

.active_panel_count_text {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-color);
}

.cs_popup_scroll_button {
  /* 48px scroll button styling positioned relative to popup container */
  position: absolute;
  top: calc(50% + 24px);
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background-color: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: var(--z_index_navbar);
  transition: all 0.2s ease;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
} /* end scroll button */
.cs_popup_scroll_button.state_visible {
  /* visible scroll button state */
  opacity: 1;
  visibility: visible;
} /* end visible state */
.cs_popup_scroll_button:hover {
  /* scroll button hover state */
  background-color: var(--panel-bg-hover);
  border-color: var(--panel-border);
} /* end hover state */
.cs_popup_scroll_button.cs_scroll_left {
  /* left scroll button positioning */
  left: 8px;
} /* end left button */
.cs_popup_scroll_button.cs_scroll_right {
  /* right scroll button positioning */
  right: 8px;
} /* end right button */
.cs_popup_scroll_button i {
  /* scroll button icon styling */
  font-size: 16px;
  color: var(--text-color);
} /* end scroll icon */
.cs_navbar_scroll_button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background-color: var(--scroll_button_bg);
  border: 1px solid var(--panel-border);
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: var(--z_index_navbar_controls);
  transition: all 0.2s ease;
  box-sizing: border-box;
  margin: 0px;
  opacity: 0;
  visibility: hidden;
}
.cs_navbar_scroll_button.state_visible {
  opacity: 1;
  visibility: visible;
}
.cs_navbar_scroll_button:hover {
  background-color: var(--scroll_button_bg_hover);
  border-color: var(--panel-border);
}
.cs_navbar_scroll_button.cs_scroll_left {
  left: 0px;
}
.cs_navbar_scroll_button.cs_scroll_right {
  right: 0px;
}
.cs_navbar_scroll_button i {
  font-size: 16px;
  color: var(--text-color);
}
.cs_navbar_scroll_button_vertical {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  background-color: var(--scroll_button_bg);
  border: 1px solid var(--panel-border);
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: var(--z_index_navbar_controls);
  transition: all 0.2s ease;
  box-sizing: border-box;
  margin: 0px;
  opacity: 0;
  visibility: hidden;
}
.cs_navbar_scroll_button_vertical.state_visible {
  opacity: 1;
  visibility: visible;
}
.cs_navbar_scroll_button_vertical:hover {
  background-color: var(--scroll_button_bg_hover);
  border-color: var(--panel-border);
}
.cs_navbar_scroll_button_vertical.cs_scroll_up {
  top: 0px;
}
.cs_navbar_scroll_button_vertical.cs_scroll_down {
  bottom: 0px;
}
.cs_navbar_scroll_button_vertical i {
  font-size: 16px;
  color: var(--text-color);
}
.bottom_popup {
  /* individual popup panel */
  z-index: var(--z_index_navbar);
  flex: 0 0 auto;
  min-width: 300px;
  max-width: 400px;
  margin: 0px;
  background-color: var(--panel-bg);
  border-right: 1px solid var(--panel-border);
  border-radius: 0px;
  padding: 16px;
  overflow-y: auto;
  color: var(--text-color);
  transition: var(--transition);
  box-sizing: border-box;
  height: 100%;
} /* end popup panel */
.bottom_popup:last-child {
  /* last popup panel */
  border-right: none;
} /* end last popup */
.bottom_popup_title {
  /* popup panel title */
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
  padding: 8px;
  border: 1px solid var(--panel-border);
  color: var(--text-color);
  background-color: var(--panel-bg-hover);
  box-sizing: border-box;
} /* end popup title */
.bottom_popup_content {
  /* popup panel content */
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-color);
} /* end popup content */
/* zoom control pill */
.zoom_pill {
  /* zoom control widget */
  width: 48px;
  background-color: var(--control-bg);
  border-radius: 0px;
  display: none;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--panel-border);
  position: fixed;
  top: 250px;
  left: 48px;
  z-index: 800;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: var(--transition);
  box-sizing: border-box;
  box-shadow: none !important;
} /* end zoom pill */
.zoom_btn {
  /* zoom control button */
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background: none;
  padding: 0px;
  color: var(--text-color);
  transition: var(--transition);
  flex-direction: column;
} /* end zoom button */
.zoom_btn i {
  /* zoom button icon - 1/3 container size */
  font-size: 16px;
  margin-bottom: 4px;
  color: var(--text-color);
  transition: color 0.3s ease;
} /* end zoom icon */
.zoom_btn:hover {
  /* zoom button hover */
  background: var(--panel-bg-hover);
  color: var(--text-color);
} /* end zoom hover */
.zoom_btn .button_label {
  /* zoom button text label */
  border-radius: 5px;
  font-size: 8px;
  margin-top: 4px;
  margin-bottom: 4px;
  text-align: center;
  border-radius: 5px;
  line-height: 1;
  font-weight: 700;
  color: var(--text-color);
  text-transform: uppercase;
  letter-spacing: 0.3px;
} /* end zoom button label */
.zoom_level_container {
  /* zoom level input container */
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
} /* end zoom level */
.zoom_level_input {
  /* zoom level text input */
  width: 48px;
  height: 48px;
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  color: var(--text-color);
  border: 1px solid var(--panel-border);
  border-radius: 0px;
  background-color: var(--input-bg);
  outline: none;
  box-sizing: border-box;
} /* end zoom input */
.zoom_submit {
  /* zoom submit button */
  position: absolute;
  right: -48px;
  width: 48px;
  height: 48px;
  border-radius: 0px;
  background-color: var(--control-bg);
  border: 1px solid var(--panel-border);
  display: none;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: var(--text-color);
  box-sizing: border-box;
} /* end zoom submit */
.zoom_submit i {
  /* zoom submit icon */
  font-size: 12px;
} /* end submit icon */
/* rotation control pill */
.rotation_pill {
  /* rotation control widget */
  width: 48px;
  background-color: var(--control-bg);
  border-radius: 0px;
  display: none;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--panel-border);
  position: fixed;
  top: 48px;
  left: 48px;
  z-index: 800;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: var(--transition);
  box-sizing: border-box;
} /* end rotation pill */
.rotation_btn {
  /* rotation control button */
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background: none;
  padding: 0px;
  color: var(--text-color);
  transition: var(--transition);
  flex-direction: column;
} /* end rotation button */
.rotation_btn i {
  /* rotation button icon - 1/3 container size */
  font-size: 16px;
  margin-bottom: 4px;
  color: var(--text-color);
  transition: color 0.3s ease;
} /* end rotation icon */
.rotation_btn:hover {
  /* rotation button hover */
  background: var(--panel-bg-hover);
  color: var(--text-color);
} /* end rotation hover */
.rotation_btn .button_label {
  /* rotation button text label */
  border-radius: 5px;
  font-size: 8px;
  margin-top: 4px;
  margin-bottom: 4px;
  text-align: center;
  line-height: 1;
  font-weight: 700;
  color: var(--text-color);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-radius: 5px;
} /* end rotation button label */
.rotation_level_container {
  /* rotation level input container */
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
} /* end rotation level */
.rotation_level_input {
  /* rotation level text input */
  width: 48px;
  height: 48px;
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  color: var(--text-color);
  border: 1px solid var(--panel-border);
  border-radius: 0px;
  background-color: var(--input-bg);
  outline: none;
  box-sizing: border-box;
} /* end rotation input */
.rotation_submit {
  /* rotation submit button */
  position: absolute;
  right: -48px;
  width: 48px;
  height: 48px;
  border-radius: 0px;
  background-color: var(--control-bg);
  border: 1px solid var(--panel-border);
  display: none;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: var(--text-color);
  box-sizing: border-box;
} /* end rotation submit */
.rotation_submit i {
  /* rotation submit icon */
  font-size: 12px;
} /* end rotation submit icon */
/* cardinal direction display */
#cardinal_direction {
  /* cardinal direction indicator */
  text-align: center;
  font-size: 16px;
  color: var(--text-color);
  margin: 4px 0px;
  font-weight: 500;
  background: var(--input-bg);
  padding: 8px;
  border: 1px solid var(--panel-border);
  border-radius: 0px;
  letter-spacing: 1px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
} /* end cardinal direction */
/* control panel styling */
.control_panel {
  /* expandable control panel */
  position: fixed;
  left: 48px;
  top: 130px;
  background-color: var(--panel-bg);
  border-radius: 0px;
  padding: 16px;
  width: 280px;
  display: none;
  z-index: 999;
  border: 1px solid var(--panel-border);
  transition: opacity 0.3s ease;
  opacity: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-sizing: border-box;
} /* end control panel */
.control_panel.active {
  /* active control panel */
  display: block;
  opacity: 1;
} /* end active panel */
.control_panel_grid {
  /* control panel grid layout */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0px;
} /* end panel grid */
.control_panel_title {
  /* control panel section title */
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border: 1px solid var(--panel-border);
  box-sizing: border-box;
} /* end panel title */
.control_panel_title i {
  /* panel title icon */
  font-size: 16px;
  color: var(--text-color);
} /* end title icon */
.control_panel input[type="number"],
.control_panel input[type="text"] {
  /* panel form inputs */
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--panel-border);
  border-radius: 0px;
  margin: 6px 0px;
  font-size: 16px;
  background: var(--input-bg);
  color: var(--text-color);
  transition: var(--transition);
  outline: none;
  min-height: 48px;
  box-sizing: border-box;
} /* end panel inputs */
.control_panel input[type="number"]:focus,
.control_panel input[type="text"]:focus {
  /* focused panel inputs */
  border: 1px solid var(--panel-border);
} /* end input focus */
.control_panel select {
  /* panel select dropdown */
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--panel-border);
  border-radius: 0px;
  margin: 6px 0px;
  font-size: 16px;
  background: var(--input-bg);
  color: var(--text-color);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
  padding-right: 32px;
  outline: none;
  min-height: 48px;
  box-sizing: border-box;
} /* end panel select */
.control_panel_row {
  /* panel form row */
  display: flex;
  align-items: center;
  margin: 8px 0px;
  gap: 8px;
} /* end panel row */
.control_panel_row label {
  /* panel row label */
  margin-left: 8px;
  font-size: 16px;
  color: var(--text-color);
} /* end row label */
.reset_btn {
  /* panel reset button */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background-color: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 0px;
  font-size: 16px;
  color: var(--text-color);
  cursor: pointer;
  transition: var(--transition);
  margin-top: 10px;
  min-height: 48px;
  box-sizing: border-box;
} /* end reset button */
.reset_btn:hover {
  /* reset button hover */
  background-color: var(--text-color);
  color: var(--panel-bg);
  border: 1px solid var(--panel-border);
} /* end reset hover */
.reset_btn:hover i {
  /* reset button icon hover */
  color: var(--panel-bg);
} /* end reset icon hover */
.reset_btn i {
  /* reset button icon */
  margin-right: 8px;
  font-size: 16px;
  color: var(--text-color);
  transition: var(--transition);
} /* end reset icon */
/* altitude scale component */
.altitude_scale {
  position: fixed;
  right: var(--ui_element_uniform_width);
  top: 48px;
  bottom: 48px;
  width: var(--ui_element_uniform_width);
  display: none;
  z-index: 5;
  border-left: 1px solid var(--panel-border);
  background: none;
  pointer-events: none;
  box-sizing: border-box;
}
.altitude_scale.active {
  /* active altitude scale */
  display: block;
} /* end active altitude */

.measurement_line {
  /* measurement line element */
  position: absolute;
  top: 50%;
  left: 0px;
  right: 0px;
  height: 1px;
  background: #ffffff;
  transform: translateY(-50%);
  opacity: 1;
  background: #ffffff;
} /* end measurement line */
.measurement_arrow_left,
.measurement_arrow_right {
  /* measurement arrows */
  position: absolute;
  top: 50%;
  width: 0px;
  height: 0px;
  transform: translateY(-50%);
} /* end arrows */
.measurement_arrow_left {
  /* left measurement arrow */
  left: 0px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 8px solid #ffffff;
  border-right: 8px solid #ffffff;
} /* end left arrow */
.measurement_arrow_right {
  /* right measurement arrow */
  right: 0px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid #ffffff;
  border-left: 8px solid #ffffff;
} /* end right arrow */
.measurement_value {
  /* measurement value display */
  background: var(--control-bg);
  border: 1px solid var(--panel-border);
  box-sizing: border-box;
  border-radius: 0px;
  padding: 4px 12px;
  color: var(--color_text_on_dark_surface);
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.6) 50%,
    rgba(0, 0, 0, 0.8) 100%
  );
  border: 1px solid var(--color_border_secondary);
  color: var(--color_text_on_dark_surface);
} /* end measurement value */
/* custom scales wrapper */
.cs_measurement_ruler_wrap {
  position: fixed;
  top: 48px;
  left: 48px;
  right: 48px;
  bottom: 48px;
  width: auto;
  height: auto;
  pointer-events: none;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.3);
} /* end custom scales wrapper */
.cs_measurement_ruler_grid_wrap {
  /* triple scale measurement container with 5x5 grid layout */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 240px;
  height: 240px;
  transform: translate(-50%, -50%);
  z-index: 700;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(5, 48px);
  grid-template-rows: repeat(5, 48px);
  gap: 0px;
  background: transparent;
  border: none;
  border-radius: 0px;
  display: none;
} /* end triple container */
.cs_measurement_ruler_grid_box {
  /* individual grid cell with uniform white border and semi-transparent background */
  width: 48px;
  height: 48px;
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid #ffffff;
  box-sizing: border-box;
  position: relative;
} /* end grid cell */
.cs_measurement_ruler_grid_box::before {
  /* vertical cross line spanning full height of grid cell */
  content: "";
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 100%;
  background: #ffffff;
  box-shadow: none;
} /* end cs_measurement_ruler_grid_box vertical cross line */
.cs_measurement_ruler_grid_box::after {
  /* horizontal cross line spanning full width of grid cell */
  content: "";
  position: absolute;
  top: 50%;
  left: 0px;
  transform: translateY(-50%);
  width: 100%;
  height: 1px;
  background: #ffffff;
  box-shadow: none;
} /* end cs_measurement_ruler_grid_box horizontal cross line */
.cs_scale_connection_line {
  /* connection line removed - no longer needed */
  display: none;
} /* end connection line */
.cs_measurement_ruler_value_scale {
  position: relative;
  width: 28px;
  height: 1px;
  /* background: rgba(0, 0, 0, 0.3); */
  /* border-radius: 0px; */
  /* box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.6); */
  align-self: center;
} /* end scale ruler line */

.cs_scale_arrow_line {
  /* horizontal line with arrows above scale container */
  position: absolute;
  top: 0px;
  left: 0px;
  width: 144px;
  height: 1px;
  background: #ffffff;
  z-index: 699;
} /* end scale arrow line */
.cs_scale_arrow_line::before,
.cs_scale_arrow_line::after {
  /* arrow markers at line ends */
  content: "";
  position: absolute;
  width: 0px;
  height: 0px;
  top: 50%;
  transform: translateY(-50%);
  border-style: solid;
  filter: drop-shadow(0px 0px 1px #ffffff);
} /* end arrow markers */
.cs_scale_arrow_line::before {
  /* left arrow pointing outward */
  left: 0px;
  border-width: 3px 6px 3px 0px;
  border-color: transparent #ffffff transparent transparent;
} /* end left arrow */
.cs_scale_arrow_line::after {
  /* right arrow pointing outward */
  right: 0px;
  border-width: 3px 0px 3px 6px;
  border-color: transparent transparent transparent #ffffff;
} /* end right arrow */

.cs_measurement_ruler_line {
  position: absolute;
  top: calc(50% - 24px);
  left: 50%;
  transform: translateX(-50%);
  width: 144px;
  height: 48px;
  z-index: 702;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px;
  box-sizing: border-box;
  border: solid 3px #ffffff;
  border-radius: 7px;
  /* background: rgba(0, 0, 0, 0.3); */
} /* end measurement scale ruler bar container */

.cs_measurement_ruler_container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 240px;
  height: 240px;
  z-index: 99;
  pointer-events: auto;
  border: 1px solid #ffffff;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.cs_measurement_ruler_value_wrap {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 144px;
  height: 48px;
  z-index: 701;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px;
  box-sizing: border-box;
} /* end measurement scale container */
.cs_measurement_ruler_value_measurement {
  background: rgba(0, 0, 0, 0.3);
  color: var(--color_text_on_dark_surface);
  padding: 10px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  box-sizing: border-box;
  text-align: center;
  border-radius: 5px;
  border: solid 1px var(--color_border_secondary);
  position: absolute;
  z-index: 999;
  width: 144px;
  height: 48px;
}
.cs_measurement_ruler_select_wrapper {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 144px;
  z-index: 701;
  pointer-events: auto;
}
.cs_measurement_ruler_unit_select {
  width: 100%;
  height: 48px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--color_text_on_dark_surface);
  border: solid 1px var(--color_border_secondary);
  border-radius: 7px;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  padding: 10px 40px 10px 10px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.cs_measurement_ruler_select_arrow {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color_text_on_dark_surface);
  font-size: 16px;
  pointer-events: none;
  transition: transform 0.3s ease;
}
.cs_measurement_ruler_unit_select:focus ~ .cs_measurement_ruler_select_arrow,
.cs_measurement_ruler_select_wrapper:hover .cs_measurement_ruler_select_arrow {
  transform: translateY(-50%) rotate(180deg);
}
/* info container styling */
#info_container {
  /* information display container */
  position: fixed;
  bottom: 96px;
  right: 56px;
  display: none;
  z-index: 705;
  background-color: var(--control-bg);
  border-radius: 0px;
  padding: 12px 16px;
  color: var(--text-color);
  font-size: 12px;
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  max-width: calc(100vw - 160px);
  max-height: calc(100vh - 160px);
  overflow: auto;
  transition: var(--transition);
  box-sizing: border-box;
} /* end info container */
.coordinates_title {
  /* coordinates section title */
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--text-color);
  border: 1px solid var(--panel-border);
  padding-bottom: 6px;
  box-sizing: border-box;
} /* end coordinates title */
.coordinates_row {
  /* coordinates display row */
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  position: relative;
  height: 30px;
} /* end coordinates row */
.coordinates_label {
  /* coordinate label text */
  width: 80px;
  font-size: 13px;
  color: var(--text-color);
  opacity: 0.8;
} /* end coordinate label */
.coordinates_value {
  /* coordinate value text */
  font-size: 13px;
  font-family: Consolas, monospace;
  font-weight: 500;
  flex: 1;
  color: var(--text-color);
} /* end coordinate value */
.copy_btn {
  /* copy to clipboard button */
  width: 30px;
  height: 30px;
  background-color: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: var(--text-color);
  transition: var(--transition);
  margin-left: 8px;
  box-sizing: border-box;
} /* end copy button */
.copy_btn:hover {
  /* copy button hover state */
  background-color: var(--text-color);
  color: var(--panel-bg);
  border: 1px solid var(--panel-border);
} /* end copy hover */
.copy_btn.copied {
  /* copied state button */
  background-color: var(--accent-bg);
  border-color: var(--accent-border);
  color: var(--success-color);
} /* end copied state */
.location_controls {
  /* location action controls */
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  border-top: 1px solid var(--panel-border);
  padding-top: 8px;
  box-sizing: border-box;
} /* end location controls */
.location_btn {
  /* location action button */
  flex: 1;
  height: 48px;
  min-height: 48px;
  background-color: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: var(--text-color);
  transition: var(--transition);
  margin: 0px 4px;
  box-sizing: border-box;
} /* end location button */
.location_btn:hover {
  /* location button hover */
  background-color: var(--text-color);
  color: var(--panel-bg);
  border: 1px solid var(--panel-border);
} /* end location hover */
.location_btn.active {
  /* active location button */
  background-color: var(--accent-bg);
  border-color: var(--accent-border);
  color: var(--accent-color);
} /* end active location */

.compass_container {
  /* compass display container */
  width: 48px;
  height: 48px;
  background-color: var(--control-bg);
  border: 1px solid var(--panel-border);
  border-radius: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: var(--transition);
  box-shadow: none !important;
  color: var(--text-color);
} /* end compass container */
.compass_dial {
  /* compass dial background */
  width: 44px;
  height: 44px;
  border: 1px solid var(--text-color);
  box-sizing: border-box;
  border-radius: 50%;
  position: absolute;
  background-color: transparent;
}
.compass_dial::before {
  /* inner circle - 4px smaller */
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border: 1px solid var(--text-color);
  border-radius: 50%;
  z-index: 1;
} /* end compass dial */
.compass_needle {
  /* compass needle container */
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
} /* end compass needle */
.needle_north {
  /* north needle indicator - clear bg with white border */
  width: 4px;
  height: 16px;
  background-color: transparent;
  border: 1px solid var(--text-color);
  border-radius: 2px;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
} /* end north needle */
.needle_south {
  /* south needle indicator - clear bg with white border */
  width: 4px;
  height: 16px;
  background-color: transparent;
  border: 1px solid var(--text-color);
  border-radius: 2px;
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
} /* end south needle */
.needle_center {
  /* compass center point - white */
  width: 4px;
  height: 4px;
  background-color: var(--text-color);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
} /* end needle center */
.cardinal_indicator,
.bottom_cardinal_indicator,
.azimuth_indicator,
.bearing_indicator,
.bottom_azimuth_indicator,
.bottom_bearing_indicator {
  /* compass direction indicators */
  width: 48px;
  height: 48px;
  background-color: var(--control-bg);
  border: 1px solid #ffffff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  position: relative;
  transition: var(--transition);
  box-sizing: border-box;
  box-shadow: none !important;
  z-index: 1013;
} /* end direction indicators */
.indicator_input_container {
  /* container for editable indicators */
  position: relative;
  display: inline-block;
  pointer-events: auto;
  cursor: pointer;
} /* end indicator container */
.indicator_input {
  /* input styling to match indicators */
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: inherit;
  font-weight: inherit;
  text-align: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: var(--transition);
  pointer-events: auto;
} /* end indicator input */
.indicator_input:focus {
  /* focused input styling */
  cursor: text;
  background-color: var(--control-bg);
} /* end focused input */
.submit_div {
  /* submit button for indicators */
  position: absolute;
  top: 50%;
  left: 100%;
  width: 24px;
  height: 24px;
  background-color: var(--control-bg);
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  z-index: 1014;
  box-shadow: none;
  transition: var(--transition);
  pointer-events: auto;
  transform: translateY(-50%);
  margin-left: 8px;
  opacity: 0.8;
} /* end submit div */
.submit_div:hover {
  /* submit hover state */
  background-color: var(--control-bg-hover);
  transform: translateY(-50%) scale(1.1);
  opacity: 1;
} /* end submit hover */
.azimuth_indicator,
.bearing_indicator {
  /* numeric direction indicators */
  font-size: 16px;
} /* end numeric indicators */
.compass_reset_btn {
  /* compass reset button */
  width: 48px;
  height: 48px;
  background-color: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: var(--text-color);
  font-size: 16px;
  font-weight: 600;
  position: relative;
  transition: var(--transition);
  box-sizing: border-box;
} /* end reset button */
.compass_reset_btn:hover {
  /* reset button hover */
  background-color: var(--panel-bg-hover);
  border-color: var(--panel-border-hover);
} /* end reset hover */
/* mini map component */
.mini_map_container {
  /* miniature map overlay in top left corner - pointer events none */
  position: fixed;
  top: 48px;
  left: 48px;
  transform: none;
  width: 240px;
  height: 160px;
  border-radius: 0;
  overflow: hidden;
  display: none;
  z-index: 899;
  border: 1px solid var(--text-color);
  background: var(--panel-bg);
  box-sizing: border-box;
  padding: 5px;
  pointer-events: auto;
} /* end mini map */
#mini_map {
  /* mini map canvas contained within rectangular container - pointer events none */
  width: 228px;
  height: 148px;
  border-radius: 0;
  border: 1px solid var(--text-color);
  box-sizing: border-box;
  pointer-events: none;
}
.mini_map_crosshair {
  /* mini map crosshair centered in container */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  pointer-events: none;
} /* end crosshair */
.mini_map_crosshair::after,
.mini_map_crosshair::before {
  /* crosshair lines */
  content: "";
  position: absolute;
  background-color: var(--text-color);
} /* end crosshair lines */
.mini_map_crosshair::before {
  /* horizontal line */
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
} /* end horizontal line */
.mini_map_crosshair::after {
  /* vertical line */
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
} /* end vertical line */
.mini_map_controls {
  /* mini map control buttons - round and balanced placement */
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  gap: 5px;
} /* end mini map controls */
.mini_map_crosshair {
  /* mini map center crosshair - styled like main map with filters */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 0 1px #ffffff) drop-shadow(0 0 1px rgba(0, 0, 0, 0.8));
} /* end mini crosshair */
.mini_map_crosshair::after,
.mini_map_crosshair::before {
  /* crosshair lines - styled like main map */
  content: "";
  position: absolute;
  background: #ffffff;
  filter: brightness(1.2) contrast(1.1);
} /* end crosshair lines */
.mini_map_crosshair::before {
  /* horizontal crosshair line */
  width: 100%;
  height: 1px;
  top: 50%;
  left: 0px;
  transform: translateY(-50%);
} /* end horizontal line */
.mini_map_crosshair::after {
  /* vertical crosshair line */
  width: 1px;
  height: 100%;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
} /* end vertical line */
.mini_map_controls {
  /* mini map control buttons - round and balanced placement */
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: auto;
} /* end mini controls */
.mini_zoom_controls {
  /* mini zoom button group */
  display: flex;
  flex-direction: column;
  gap: 2px;
} /* end mini zoom */
.mini_zoom_btn {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  max-width: 48px;
  max-height: 48px;
  border-radius: 0;
  background: var(--panel-bg);
  border: 1px solid var(--text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-color);
  font-size: 16px;
  font-weight: 700;
  box-sizing: border-box;
}
.mini_zoom_btn i {
  font-size: 16px;
}
.mini_layers_btn {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  max-width: 48px;
  max-height: 48px;
  border-radius: 0;
  background: var(--panel-bg);
  border: 1px solid var(--text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-color);
  font-size: 16px;
  font-weight: 700;
  box-sizing: border-box;
}
.mini_layers_btn i {
  font-size: 16px;
}
.mini_layers_btn.active {
  /* active mini layers */
  background: var(--text-color);
  color: var(--panel-bg);
} /* end active layers */
/* close button component */
.close-button {
  /* generic close button */
  background: none;
  border: 1px solid var(--panel-border);
  cursor: pointer;
  /* color: var(--text-color); */
  /* font-size: 16px; */
  /* font-weight: 700; */
  /* width: 32px; */
  /* height: 32px; */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0px;
  transition: var(--transition);
  box-sizing: border-box;
  color: var(--text-muted);
  font-size: 16px;
  width: 48px;
  height: 48px;
} /* end close button */
.close-button:hover {
  /* close button hover */
  color: var(--panel-bg);
  background: var(--text-color);
  border: 1px solid var(--panel-border);
  color: var(--text-color);
  background: var(--panel-bg-hover);
} /* end close hover */
/* crosshair canvas overlay */
.crosshair_canvas {
  /* crosshair overlay canvas */
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  display: none;
} /* end crosshair canvas */
/* theme toggle component */

/* side panel component */
.side-panel {
  /* expandable side panel */
  position: fixed;
  left: 48px;
  top: 48px;
  background: var(--panel-bg);
  border-radius: 0px;
  height: calc(100vh - 96px);
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  z-index: 1001;
  width: 336px;
  min-width: 336px;
  max-width: 336px;
  padding: 0px;
  display: none;
  transition: opacity 0.3s ease;
  opacity: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--panel-border);
  border-top: none;
  box-sizing: border-box;
} /* end side panel */
.side-panel.active {
  /* active side panel */
  display: block;
  opacity: 1;
} /* end active panel */
/* panel header styling */
.panel-header {
  /* panel header component */
  margin: 5px;
  /* padding: 5px; */
  color: var(--text-color);
  font-size: 16px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--panel-border);
  box-sizing: border-box;
  background-color: var(--panel-bg);
  position: sticky;
  top: 0px;
  z-index: 2;
  height: 48px;
  /* min-height: 48px; */
} /* end panel header */
.panel-content {
  /* panel main content */
  max-height: calc(85vh - 100px);
  padding: 0px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
} /* end panel content */
/* panel tabs component */
.panel-tabs {
  /* panel tab navigation */
  display: flex;
  background: var(--panel-bg);
  position: sticky;
  top: 48px;
  z-index: 2;
  border: 1px solid var(--panel-border);
  box-sizing: border-box;
  margin: 5px;
} /* end panel tabs */
.panel-tab {
  /* individual panel tab */
  flex: 1;
  text-align: center;
  padding: 12px 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 3px solid transparent;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  background: var(--panel-bg);
} /* end panel tab */
.panel-tab i {
  /* panel tab icon */
  margin-right: 6px;
  font-size: 16px;
} /* end tab icon */
.panel-tab.active {
  /* active panel tab */
  color: var(--text-color);
  border-bottom-color: var(--text-color);
  background-color: var(--accent-bg);
  font-weight: 700;
} /* end active tab */
.panel-tab:hover:not(.active) {
  /* panel tab hover */
  background-color: var(--text-color);
  color: var(--panel-bg);
} /* end tab hover */
/* coordinates container */
.coordinates_container {
  /* hidden - coordinates now integrated into popup system */
  display: none !important;
} /* end coordinates container */
/* tab content sections */
.tab-content {
  /* tab content container */
  display: none;
  flex: 1;
  flex-direction: column;
} /* end tab content */
.tab-content.active {
  /* active tab content */
  display: flex;
} /* end active content */
/* search container in panels */
.search-container {
  background: var(--panel-bg);
  z-index: 1;
  border-bottom: 1px solid var(--panel-border);
  box-sizing: border-box;
  height: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
} /* end search container */
.search-box {
  width: 100%;
  padding: 12px;
  padding-left: 44px;
  border: 1px solid var(--panel-border);
  box-sizing: border-box;
  border-radius: 0px;
  font-size: 16px;
  font-weight: 500;
  transition: var(--transition);
  background: var(--input-bg);
  color: var(--text-color);
  height: 48px;
} /* end search box */
.search-box:focus {
  /* focused search box */
  border-color: var(--text-color);
  /* box-shadow: 0px 0px 0px 3px var(--accent-bg); */
} /* end search focus */
/* layer item styling */
.layer-item {
  /* layer list item */
  padding: 8px 16px 8px 48px;
  border: 1px solid var(--panel-border);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  transition: var(--transition);
  height: 48px;
  background: var(--panel-bg);
  border-left: 3px solid transparent;
  margin: 5px;
} /* end layer item */
.layer-item:hover {
  /* layer item hover */
  background-color: var(--panel-bg-hover);
  background-color: var(--text-color);
  color: var(--panel-bg);
  border-left-color: var(--panel-bg);
} /* end layer hover */
.layer-item label {
  /* layer item label */
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
  width: 100%;
  color: var(--text-color);
  font-size: 13px;
  font-weight: 500;
} /* end layer label */
.layer-item:hover label {
  /* layer label hover */
  color: var(--panel-bg);
} /* end label hover */
.layer-checkbox {
  /* margin-right: 12px; */
  width: 38px;
  height: 38px;
  /* margin-right: 10px; */
  /* width: 16px; */
  /* height: 16px; */
  cursor: pointer;
  accent-color: var(--text-color);
} /* end layer checkbox */
.layer-icon {
  /* layer icon display */
  width: 24px;
  height: 24px;
  border-radius: 0px;
  background-color: var(--panel-bg-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  color: var(--text-color);
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border: 1px solid var(--panel-border);
  box-sizing: border-box;
  font-size: 12px;
} /* end layer icon */
.layer-item:hover .layer-icon {
  /* layer icon hover */
  background-color: var(--panel-bg);
  color: var(--text-color);
  border-color: var(--panel-bg);
} /* end icon hover */
.layer-item.layer-hidden {
  /* hidden layer item */
  display: none;
} /* end hidden layer */
.layer-item.layer-visible {
  /* visible layer item */
  display: flex;
} /* end visible layer */
/* layer category header */
.layer-category-header {
  /* category header container */
  margin: 5px;
  user-select: none;
  transition: var(--transition);
  border: 1px solid var(--panel-border);
  box-sizing: border-box;
  background: var(--panel-bg);
  height: 48px;
} /* end category header */
.layer-category-header:hover .layer-category-content {
  /* category header hover */
  background-color: var(--panel-bg-hover);
} /* end header hover */
.layer-category-content {
  /* category content wrapper */
  padding: 0px;
  background: var(--panel-bg);
  box-sizing: border-box;
  font-weight: 600;
  display: flex;
  align-items: center;
  height: 48px;
  position: relative;
  transition: var(--transition);
} /* end category content */
.layer-category-arrow-box {
  /* category arrow button */
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-bg);
  border-right: 1px solid var(--panel-border);
  box-sizing: border-box;
  cursor: pointer;
  transition: var(--transition);
} /* end arrow box */
.layer-category-arrow-box:hover {
  /* arrow box hover */
  background: var(--text-color);
  color: var(--panel-bg);
} /* end arrow hover */
.layer-category-arrow {
  /* category arrow icon */
  font-size: 16px;
  color: inherit;
  transition: transform 0.2s ease;
  transform: rotate(0deg);
} /* end category arrow */
.layer-category-header.expanded .layer-category-arrow {
  /* expanded arrow rotation */
  transform: rotate(90deg);
} /* end expanded arrow */
.layer-category-checkbox-box {
  /* category checkbox container */
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-bg);
  border-right: 1px solid var(--panel-border);
  cursor: pointer;
  transition: var(--transition);
} /* end checkbox box */
.layer-category-checkbox-box:hover {
  /* checkbox box hover */
  background: var(--text-color);
  color: var(--panel-bg);
} /* end checkbox hover */
.layer-category-checkbox {
  /* category checkbox input */
  width: 38px;
  height: 38px;
  cursor: pointer;
  accent-color: var(--text-color);
} /* end category checkbox */
.layer-category-checkbox:indeterminate {
  /* indeterminate checkbox state */
  background-color: var(--accent-bg);
  border: 1px solid var(--text-color);
} /* end indeterminate */
.layer-category-checkbox:indeterminate::after {
  /* indeterminate checkbox indicator */
  content: "";
  display: block;
  width: 12px;
  height: 2px;
  background: var(--text-color);
  margin: 7px auto;
} /* end indeterminate indicator */
.layer-category-info {
  /* category information area */
  display: flex;
  align-items: center;
  flex: 1;
  padding: 12px 16px;
  background: var(--accent-bg);
  cursor: pointer;
  transition: var(--transition);
} /* end category info */
.layer-category-layers {
  /* category layers container */
  max-height: 0px;
  overflow: hidden;
  background: var(--panel-bg);
  transition: max-height 0.3s ease;
} /* end category layers */
.layer-category-header.expanded .layer-category-layers {
  /* expanded category layers */
  max-height: 1000px;
} /* end expanded layers */
.layer-category-layers.category-hidden {
  /* hidden category layers */
  display: none !important;
} /* end hidden category */
.layer-category-count {
  /* category layer count */
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--panel-bg);
  padding: 2px 8px;
  border-radius: 0px;
  border: 1px solid var(--panel-border);
  box-sizing: border-box;
} /* end category count */
/* features navigation */
.features-nav-container {
  /* features navigation container */
  padding: 0px;
  background: var(--panel-bg);
  border-bottom: 1px solid var(--panel-border);
  box-sizing: border-box;
} /* end features nav */
.features-nav {
  /* features navigation bar */
  display: flex;
  background: var(--panel-bg);
} /* end features nav bar */
.features-nav-button {
  /* features navigation button */
  flex: 1;
  text-align: center;
  padding: 12px 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 3px solid transparent;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  max-height: 48px;
  background: var(--panel-bg);
  border-right: 1px solid var(--panel-border);
  box-sizing: border-box;
} /* end features button */
.features-nav-button:last-child {
  /* last features button */
  border-right: none;
} /* end last features */
.features-nav-button i {
  /* features button icon */
  font-size: 16px;
  margin-bottom: 4px;
} /* end features icon */
.features-nav-button.active {
  /* active features button */
  color: var(--text-color);
  border-bottom-color: var(--text-color);
  background-color: var(--accent-bg);
  font-weight: 700;
} /* end active features */
.features-nav-button:hover:not(.active) {
  /* features button hover */
  background-color: var(--text-color);
  color: var(--panel-bg);
} /* end features hover */
.features-content {
  /* features content area */
  padding: 16px;
  max-height: 400px;
  overflow-y: auto;
} /* end features content */
.feature-content {
  /* individual feature content */
  display: none;
} /* end feature content */
.feature-content.active {
  /* active feature content */
  display: block;
} /* end active feature */
.feature-list {
  /* feature items list */
  display: flex;
  flex-direction: column;
  gap: 8px;
} /* end feature list */
.feature-item {
  /* individual feature item */
  display: flex;
  align-items: center;
  padding: 12px;
  min-height: 48px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-sizing: border-box;
  border-radius: 0px;
  transition: var(--transition);
} /* end feature item */
.feature-item:hover {
  /* feature item hover */
  background: var(--text-color);
  color: var(--panel-bg);
} /* end feature hover */
.feature-icon {
  /* feature item icon */
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-bg);
  border-radius: 0px;
  margin-right: 12px;
  color: var(--text-color);
  font-size: 16px;
} /* end feature icon */
.feature-item:hover .feature-icon {
  /* feature icon hover */
  background: var(--panel-bg);
  color: var(--text-color);
} /* end icon hover */
.feature-info {
  /* feature information area */
  flex: 1;
} /* end feature info */
.feature-name {
  /* feature name text */
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 2px;
  color: inherit;
} /* end feature name */
.feature-coords {
  /* feature coordinates text */
  font-size: 12px;
  color: var(--text-muted);
  font-family: monospace;
} /* end feature coords */
.feature-item:hover .feature-coords {
  /* feature coords hover */
  color: var(--panel-bg);
  opacity: 0.8;
} /* end coords hover */
.feature-visibility {
  /* feature visibility control */
  margin-left: 12px;
} /* end feature visibility */
.feature-visibility input[type="checkbox"] {
  /* feature visibility checkbox */
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--text-color);
} /* end visibility checkbox */
.no-features {
  /* no features message */
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
  padding: 20px;
} /* end no features */
/* basemap options */
.basemap-option {
  display: flex;
  align-items: center;
  padding: 5px;
  cursor: pointer;
  border-bottom: 1px solid var(--panel-border);
  box-sizing: border-box;
  transition: var(--transition);
  min-height: 60px;
} /* end basemap option */
.basemap-option:hover {
  /* basemap option hover */
  background-color: var(--panel-bg-hover);
} /* end basemap hover */
.basemap-option.active {
  /* active basemap option */
  background-color: var(--text-color);
  color: var(--panel-bg);
  border: 1px solid var(--text-color);
} /* end active basemap */
.basemap-option.active .basemap-name {
  /* active basemap name */
  color: var(--panel-bg);
  font-weight: 700;
} /* end active name */
.basemap-option.active .basemap-description {
  /* active basemap description */
  color: var(--panel-bg);
  opacity: 0.8;
} /* end active description */
.basemap-option.active .basemap-thumbnail {
  /* active basemap thumbnail */
  border: 1px solid var(--panel-bg);
  /* box-shadow: 0px 0px 0px 1px var(--text-color); */
} /* end active thumbnail */
.basemap-thumbnail {
  /* basemap preview thumbnail */
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  max-width: 48px;
  max-height: 48px;
  border: 1px solid var(--panel-border);
  box-sizing: border-box;
  border-radius: 0px;
  margin-right: 5px;
  background-size: cover;
  background-position: center;
} /* end basemap thumbnail */
.basemap-info {
  /* basemap information area */
  flex-grow: 1;
} /* end basemap info */
.basemap-name {
  /* basemap name text */
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 4px;
  color: var(--text-color);
} /* end basemap name */
.basemap-description {
  /* basemap description text */
  font-size: 12px;
  color: var(--text-muted);
} /* end basemap description */
/* marker styling */
.marker {
  /* generic map marker */
  width: 48px;
  height: 48px;
  background: var(--color_background_primary);
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
} /* end marker */
.marker-content {
  /* marker content area */
  width: 32px;
  height: 32px;
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color);
} /* end marker content */
.user-marker .marker-content {
  /* user location marker */
  background: #4285f4;
} /* end user marker */
.geocoder-marker .marker-content {
  /* geocoder result marker */
  background: #666666;
} /* end geocoder marker */
.custom_marker,
.map_marker,
.search_result_marker {
  /* custom map markers */
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  max-width: 48px;
  max-height: 48px;
  background-color: var(--accent-bg);
  border: 1px solid var(--text-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color);
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.2s ease;
  position: relative;
} /* end custom markers */
.custom_marker::before,
.search_result_marker::before {
  /* marker label tooltip */
  content: attr(data-label);
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: var(--color_text_on_dark_surface);
  padding: 2px 6px;
  border-radius: 0px;
  font-size: 12px;
  white-space: nowrap;
  border: 1px solid var(--panel-border);
  /* box-shadow: 0px 0px 0px 1px #ffffff; */
  z-index: 2;
} /* end marker tooltip */
.search_result_marker {
  /* search result specific marker */
  background-color: rgba(0, 120, 255, 0.8);
} /* end search marker */
.custom_marker:hover,
.map_marker:hover,
.search_result_marker:hover {
  /* marker hover state */
  background-color: var(--text-color);
  color: var(--panel-bg);
} /* end marker hover */
/* marker action buttons */
.cs_marker_button_container {
  /* marker actions overlay */
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 10;
} /* end marker buttons */
.cs_marker_action_button {
  /* marker action button base */
  position: absolute;
  touch-action: manipulation;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  max-width: 48px;
  max-height: 48px;
  background-color: var(--text-color);
  border: 1px solid var(--panel-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--panel-bg);
  font-size: 16px;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 3;
  /* box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3); */
} /* end action button */
.cs_marker_action_button:hover {
  /* action button hover */
  transform: scale(1.1);
  /* box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.4); */
} /* end button hover */
/* marker action button grid layout system */
.cs_marker_button_container {
  /* button container with compass circumference positioning */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 240px;
  height: 240px;
  pointer-events: none;
  z-index: 2;
} /* end button container */
.cs_marker_button_visible {
  /* visible marker button */
  opacity: 1;
  transform: scale(1);
} /* end button visible */
/* compass circumference position: north */
.cs_marker_edit_button {
  /* marker edit button - north position on compass circumference */
  top: 3px;
  left: 50%;
  transform: translateX(-50%) scale(0.5);
  background-color: #4caf50;
  border-color: var(--panel-bg);
} /* end edit button */
.cs_marker_edit_button:hover {
  /* edit button hover */
  background-color: #45a049;
  transform: translateX(-50%) scale(1.1);
} /* end edit hover */
.cs_marker_edit_button.cs_marker_button_visible {
  /* visible edit button */
  transform: translateX(-50%) scale(1);
} /* end visible edit */
/* compass circumference position: northeast */
.cs_marker_drag_button {
  /* marker drag button - northeast position on compass circumference */
  top: 27px;
  right: 27px;
  transform: scale(0.5);
  background-color: #2196f3;
  border-color: var(--panel-bg);
} /* end drag button */
.cs_marker_drag_button:hover {
  /* drag button hover */
  background-color: #1976d2;
  transform: scale(1.1);
} /* end drag hover */
.cs_marker_drag_button.cs_marker_button_visible {
  /* visible drag button */
  transform: scale(1);
} /* end visible drag */
.cs_marker_drag_button.cs_marker_button_active {
  /* active drag button */
  background-color: #ff9800;
  border-color: var(--panel-bg);
} /* end active drag */
/* compass circumference position: east */
.cs_marker_center_camera_button {
  /* marker center camera button - east position on compass circumference */
  top: 50%;
  right: 3px;
  transform: translateY(-50%) scale(0.5);
  background-color: #ff5722;
  border-color: var(--panel-bg);
} /* end center camera button */
.cs_marker_center_camera_button:hover {
  /* center camera button hover */
  background-color: #e64a19;
  transform: translateY(-50%) scale(1.1);
} /* end center camera hover */
.cs_marker_center_camera_button.cs_marker_button_visible {
  /* visible center camera button */
  transform: translateY(-50%) scale(1);
} /* end visible center camera */
/* compass circumference position: southeast */
.cs_marker_gps_button {
  /* marker gps button - southeast position on compass circumference */
  bottom: 27px;
  right: 27px;
  transform: scale(0.5);
  background-color: #9c27b0;
  border-color: var(--panel-bg);
} /* end gps button */
.cs_marker_gps_button:hover {
  /* gps button hover */
  background-color: #7b1fa2;
  transform: scale(1.1);
} /* end gps hover */
.cs_marker_gps_button.cs_marker_button_visible {
  /* visible gps button */
  transform: scale(1);
} /* end visible gps */
/* compass circumference position: south */
.cs_marker_delete_button {
  /* marker delete button - south position on compass circumference */
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%) scale(0.5);
  background-color: #f44336;
  border-color: var(--panel-bg);
} /* end delete button */
.cs_marker_delete_button:hover {
  /* delete button hover */
  background-color: #da190b;
  transform: translateX(-50%) scale(1.1);
} /* end delete hover */
.cs_marker_delete_button.cs_marker_button_visible {
  /* visible delete button */
  transform: translateX(-50%) scale(1);
} /* end visible delete */
/* compass circumference position: southwest */
.cs_marker_measure_button {
  /* marker measure button - southwest position on compass circumference */
  bottom: 27px;
  left: 27px;
  transform: scale(0.5);
  background-color: #ff9800;
  border-color: var(--panel-bg);
} /* end measure button */
.cs_marker_measure_button:hover {
  /* measure button hover */
  background-color: #f57c00;
  transform: scale(1.1);
} /* end measure hover */
.cs_marker_measure_button.cs_marker_button_visible {
  /* visible measure button */
  transform: scale(1);
} /* end visible measure */
/* compass circumference position: west */
.cs_marker_info_button {
  /* marker info button - west position on compass circumference */
  top: 50%;
  left: 3px;
  transform: translateY(-50%) scale(0.5);
  background-color: #607d8b;
  border-color: var(--panel-bg);
} /* end info button */
.cs_marker_info_button:hover {
  /* info button hover */
  background-color: #455a64;
  transform: translateY(-50%) scale(1.1);
} /* end info hover */
.cs_marker_info_button.cs_marker_button_visible {
  /* visible info button */
  transform: translateY(-50%) scale(1);
} /* end visible info */
/* compass circumference position: northwest */
.cs_marker_share_button {
  /* marker share button - northwest position on compass circumference */
  top: 27px;
  left: 27px;
  transform: scale(0.5);
  background-color: #795548;
  border-color: var(--panel-bg);
} /* end share button */
.cs_marker_share_button:hover {
  /* share button hover */
  background-color: #5d4037;
  transform: scale(1.1);
} /* end share hover */
.cs_marker_share_button.cs_marker_button_visible {
  /* visible share button */
  transform: scale(1);
} /* end visible share */
/* secondary ring positions aligned with compass inner ring circumference */
.cs_marker_north_outer_button {
  /* north outer button positioned on compass inner ring circumference */
  top: 48px;
  left: 50%;
  transform: translateX(-50%) scale(0.5);
} /* end north outer position */
.cs_marker_northeast_outer_button {
  /* northeast outer button positioned on compass inner ring circumference */
  top: 72px;
  right: 72px;
  transform: translate(50%, -50%) scale(0.5);
} /* end northeast outer position */
.cs_marker_east_outer_button {
  /* east outer button positioned on compass inner ring circumference */
  top: 50%;
  right: 48px;
  transform: translateY(-50%) scale(0.5);
} /* end east outer position */
.cs_marker_southeast_outer_button {
  /* southeast outer button positioned on compass inner ring circumference */
  bottom: 72px;
  right: 72px;
  transform: translate(50%, 50%) scale(0.5);
} /* end southeast outer position */
.cs_marker_south_outer_button {
  /* south outer button positioned on compass inner ring circumference */
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%) scale(0.5);
} /* end south outer position */
.cs_marker_southwest_outer_button {
  /* southwest outer button positioned on compass inner ring circumference */
  bottom: 72px;
  left: 72px;
  transform: translate(-50%, 50%) scale(0.5);
} /* end southwest outer position */
.cs_marker_west_outer_button {
  /* west outer button positioned on compass inner ring circumference */
  top: 50%;
  left: 48px;
  transform: translateY(-50%) scale(0.5);
} /* end west outer position */
.cs_marker_northwest_outer_button {
  /* northwest outer button positioned on compass inner ring circumference */
  top: 72px;
  left: 72px;
  transform: translate(-50%, -50%) scale(0.5);
} /* end northwest outer position */
/* visible state classes for outer buttons */
.cs_marker_north_outer_button.cs_marker_button_visible {
  /* visible north outer button */
  transform: translateX(-50%) scale(1);
} /* end north outer visible */
.cs_marker_northeast_outer_button.cs_marker_button_visible {
  /* visible northeast outer button */
  transform: translate(50%, -50%) scale(1);
} /* end northeast outer visible */
.cs_marker_east_outer_button.cs_marker_button_visible {
  /* visible east outer button */
  transform: translateY(-50%) scale(1);
} /* end east outer visible */
.cs_marker_southeast_outer_button.cs_marker_button_visible {
  /* visible southeast outer button */
  transform: translate(50%, 50%) scale(1);
} /* end southeast outer visible */
.cs_marker_south_outer_button.cs_marker_button_visible {
  /* visible south outer button */
  transform: translateX(-50%) scale(1);
} /* end south outer visible */
.cs_marker_southwest_outer_button.cs_marker_button_visible {
  /* visible southwest outer button */
  transform: translate(-50%, 50%) scale(1);
} /* end southwest outer visible */
.cs_marker_west_outer_button.cs_marker_button_visible {
  /* visible west outer button */
  transform: translateY(-50%) scale(1);
} /* end west outer visible */
.cs_marker_northwest_outer_button.cs_marker_button_visible {
  /* visible northwest outer button */
  transform: translate(-50%, -50%) scale(1);
} /* end northwest outer visible */
/* glowing golden light ring effect for selected markers */
.cs_marker_golden_glow_ring {
  /* golden luminous ring animation for selected marker */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  border: 2px solid #ffd700;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: none;
  animation: cs_golden_pulse 2s ease-in-out infinite;
  pointer-events: none;
  z-index: 1000;
} /* end golden glow ring */
@keyframes cs_golden_pulse {
  0% {
    opacity: 1;
    box-shadow: none;
  }
  50% {
    opacity: 0.7;
    box-shadow: none;
  }
  100% {
    opacity: 1;
    box-shadow: none;
  }
} /* end golden pulse animation */
/* dark radial overlay for marker button container */
.cs_marker_dark_radial_overlay {
  /* transparent overlay for marker button container */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 50%;
} /* end dark radial overlay */
.cs_marker_dark_radial_overlay.active {
  /* active state for dark overlay */
  opacity: 1;
} /* end active overlay */
/* loading spinner component */
.loading-spinner {
  /* loading indicator overlay */
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  background-color: var(--panel-bg);
  padding: 20px;
  border-radius: 0px;
  text-align: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--panel-border);
  box-sizing: border-box;
} /* end loading spinner */
.loading-spinner.active {
  /* active loading spinner */
  display: block;
} /* end active spinner */
.spinner {
  /* spinning animation element */
  width: 40px;
  height: 40px;
  margin: 0px auto 10px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: var(--text-color);
  border-radius: 0px;
  animation: spin 1s linear infinite;
} /* end spinner */
@keyframes spin {
  /* spinner rotation animation */
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} /* end spin animation */
/* toast notification component */
.toast-container {
  /* toast notifications container */
  position: fixed;
  bottom: 48px;
  left: 48px;
  right: 48px;
  z-index: 1000;
} /* end toast container */
.toast {
  /* individual toast notification */
  background-color: var(--panel-bg);
  color: var(--text-color);
  padding: 12px 16px;
  border-radius: 0px;
  margin-top: 0px;
  display: flex;
  align-items: center;
  max-width: 320px;
  animation: fadeIn 0.3s, fadeOut 0.3s 4.7s;
  opacity: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--panel-border);
  box-sizing: border-box;
} /* end toast */
.toast.active {
  /* active toast notification */
  opacity: 1;
} /* end active toast */
.toast-icon {
  /* toast notification icon */
  margin-right: 12px;
  font-size: 16px;
} /* end toast icon */
@keyframes fadeIn {
  /* toast fade in animation */
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
} /* end fade in */
@keyframes fadeOut {
  /* toast fade out animation */
  from {
    opacity: 1;
    transform: translateY(0px);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
} /* end fade out */
/* error container styling */
#map_error_container {
  /* map error display */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  background-color: var(--control-panel-bg);
  border-radius: 0px;
  padding: 20px;
  color: var(--text-color);
  border: 1px solid var(--error-color);
  max-width: 80%;
  text-align: center;
  display: none;
} /* end error container */
/* debug container styling */
#debug_container {
  /* debug information display */
  position: fixed;
  top: 130px;
  right: 74px;
  background: var(--control-panel-bg);
  border-radius: 0px;
  padding: 10px;
  color: var(--text-color);
  border: 1px solid var(--panel-border);
  box-sizing: border-box;
  max-width: 300px;
  z-index: 2004;
  font-size: 12px;
  display: none;
} /* end debug container */
@keyframes shake {
  /* shake error animation */
  0%,
  100% {
    transform: translateX(0px);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-5px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(5px);
  }
} /* end shake animation */
/* maplibre gl overrides */
.maplibregl-ctrl-bottom-left,
.maplibregl-ctrl-bottom-right,
.maplibregl-ctrl-top-left,
.maplibregl-ctrl-top-right {
  /* hide default maplibre controls */
  display: none !important;
} /* end maplibre hide */
#map {
  /* map touch behavior */
  touch-action: pan-x pan-y;
} /* end map touch */
.maplibregl-canvas {
  /* maplibre canvas touch */
  touch-action: pan-x pan-y;
} /* end canvas touch */
.maplibregl-popup {
  /* maplibre popup styling - constrained within navbar frame */
  max-width: calc(100vw - 96px);
  max-height: calc(100vh - 96px);
  /* Ensure popup stays within 48px navbar boundaries */
}
.maplibregl-popup .maplibregl-popup-content {
  /* Limit popup content dimensions */
  max-width: calc(100vw - 112px);
  max-height: calc(100vh - 112px);
  overflow: auto;
} /* end popup width */
.maplibregl-popup-content {
  /* popup content styling */
  background-color: var(--control-panel-bg) !important;
  border: 1px solid var(--panel-border) !important;
  box-sizing: border-box;
  border-radius: 0px !important;
  color: var(--text-color) !important;
  font-size: 13px !important;
  padding: 12px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
} /* end popup content */
.maplibregl-popup-tip {
  /* popup tip styling */
  border-top-color: var(--control-panel-bg) !important;
  border-bottom-color: var(--control-panel-bg) !important;
} /* end popup tip */
.popup_content {
  /* popup text content */
  font-weight: 500;
} /* end popup text */
/* utility classes */
.hidden {
  /* hidden element utility */
  display: none !important;
} /* end hidden */
/* grid overlay component */
.grid_overlay_container {
  /* grid overlay display */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 240px;
  height: 240px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 999;
  display: grid;
  grid-template-columns: repeat(5, 48px);
  grid-template-rows: repeat(5, 48px);
  gap: 0px;
} /* end grid overlay */

.grid_overlay {
  /* individual grid cell */
  width: 48px;
  height: 48px;
  border: 1px solid #ffffff;
  box-sizing: border-box;
  background-color: transparent;
  position: relative;
} /* end grid cell */
.grid_overlay::before {
  /* vertical cross line for grid overlay cells */
  content: "";
  position: absolute;
  top: 0px;
  left: 50%;
  width: 1px;
  height: 100%;
  background: #ffffff;
  box-shadow: none;
  transform: translateX(-50%);
  pointer-events: none;
} /* end grid_overlay vertical cross line */
.grid_overlay::after {
  /* horizontal cross line for grid overlay cells */
  content: "";
  position: absolute;
  top: 50%;
  left: 0px;
  width: 100%;
  height: 1px;
  background: #ffffff;
  box-shadow: none;
  transform: translateY(-50%);
  pointer-events: none;
} /* end grid_overlay horizontal cross line */
/* crosshair dom component */
.crosshair_dom_container {
  /* crosshair overlay container - within navbar frame */
  position: fixed;
  top: 48px;
  left: 48px;
  right: 48px;
  bottom: 48px;
  pointer-events: none;
  z-index: 900;
} /* end crosshair container */
.crosshair_element {
  /* crosshair center element */
  position: fixed;
  width: 24px;
  height: 24px;
  pointer-events: none;
  z-index: 1000;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
} /* end crosshair element */
.crosshair_element::before,
.crosshair_element::after {
  /* crosshair lines with css filter styling */
  content: "";
  position: absolute;
  background: transparent;
  backdrop-filter: invert(1) contrast(2) brightness(2);
  -webkit-backdrop-filter: invert(1) contrast(2) brightness(2);
  border: 1px solid #ffffff;
  box-shadow: none;
} /* end crosshair lines */
.crosshair_element::before {
  /* horizontal crosshair line */
  top: 50%;
  left: calc(-50vw + 48px);
  width: calc(100vw - 96px);
  height: 1px;
  transform: translateY(-50%);
} /* end horizontal line */
.crosshair_element::after {
  /* vertical crosshair line */
  left: 50%;
  top: calc(-50vh + 48px);
  width: 1px;
  height: calc(100vh - 96px);
  transform: translateX(-50%);
} /* end vertical line */
/* altitude scale dom component */
.altitude_scale_dom {
  position: fixed;
  right: var(--ui_element_uniform_width);
  top: 48px;
  bottom: 48px;
  width: var(--ui_element_uniform_width);
  z-index: 5;
  background: none;
  pointer-events: none;
}
.altitude_scale_background {
  /* altitude scale background */
  position: absolute;
  top: 48px;
  left: 0px;
  right: 0px;
  bottom: 48px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
} /* end scale background */
.altitude_scale_title_box {
  /* altitude scale title */
  position: absolute;
  top: 0px;
  left: 0px;
  width: 48px;
  height: 48px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
} /* end title box */
.altitude_title {
  /* altitude title text */
  font: bold 14px var(--font-family), Arial;
  color: var(--text-color);
  text-align: center;
  font-size: 11px;
  line-height: 1;
} /* end altitude title */
.altitude_unit {
  /* altitude unit text */
  font: 12px var(--font-family), Arial;
  color: var(--text-color);
  text-align: center;
  font-size: 10px;
  line-height: 1;
} /* end altitude unit */
.altitude_scale_ticks {
  /* altitude scale tick marks */
  position: absolute;
  top: 48px;
  left: 0px;
  right: 0px;
  bottom: 48px;
} /* end scale ticks */
.altitude_tick_major {
  /* major altitude tick */
  position: absolute;
  left: 0px;
  width: 15px;
  height: 2px;
  background: var(--text-color);
  display: flex;
  align-items: center;
} /* end major tick */
.altitude_tick_label {
  /* altitude tick label */
  position: absolute;
  left: 20px;
  color: var(--text-color);
  font: bold 12px var(--font-family), Arial;
  font-size: 10px;
  white-space: nowrap;

  transform: translateY(-50%);
} /* end tick label */
.altitude_current_marker {
  /* current altitude marker */
  position: absolute;
  left: 0px;
  right: 0px;
  height: 2px;
  background: var(--text-color);
  z-index: 10;
} /* end current marker */
.altitude_value_box {
  /* altitude value display */
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 48px;
  height: 48px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
} /* end value box */
.altitude_current_value {
  /* current altitude value */
  font: bold 14px var(--font-family), Arial;
  color: var(--text-color);
  text-align: center;
  font-size: 12px;
  line-height: 1;
} /* end current value */
.altitude_current_unit {
  /* current altitude unit */
  font: 12px var(--font-family), Arial;
  color: var(--text-color);
  text-align: center;
  font-size: 10px;
  line-height: 1;
} /* end current unit */
/* ruler dom component */
.ruler_dom_container {
  /* dom based ruler container */
  position: fixed;
  left: 74px;
  right: 74px;
  bottom: 74px;
  height: 48px;
  z-index: 5;
  pointer-events: none;
} /* end ruler dom */
.ruler_background_dom {
  /* ruler background element */
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 48px;
  background: var(--panel-bg-alpha);
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
} /* end ruler background */
.ruler_ticks_dom {
  /* ruler tick marks container */
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 48px;
} /* end ruler ticks */
.ruler_tick {
  /* individual ruler tick */
  position: absolute;
  bottom: 0px;
  width: 1px;
  background: var(--text-color);
} /* end ruler tick */
.ruler_tick_major {
  /* major ruler tick */
  height: 25px;
} /* end major tick */
.ruler_tick_medium {
  /* medium ruler tick */
  height: 18px;
} /* end medium tick */
.ruler_tick_minor {
  /* minor ruler tick */
  height: 12px;
} /* end minor tick */
.ruler_tick_label {
  /* ruler tick label */
  position: absolute;
  bottom: 28px;
  transform: translateX(-50%);
  font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--text-color);
  font-size: 10px;
} /* end tick label */
/* mini compass component */
.mini_compass_container {
  /* mini compass display with increased space between rings */
  width: 48px;
  height: 48px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 0px;
} /* end mini compass */
.mini_compass_dial {
  /* mini compass inner ring - 4px smaller than outer */
  width: 24px;
  height: 24px;
  border: 1px solid var(--text-color);
  border-radius: 50%;
  position: absolute;
  background-color: transparent;
} /* end mini dial */
.mini_compass_needle {
  /* mini compass needle with rounded ends and 2px spacing */
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
} /* end mini needle */
.mini_needle_north {
  /* mini north needle - 4px thick rounded bar touching edge */
  width: 2px;
  height: 13px;
  background-color: var(--text-color);
  border-radius: 5px;
  position: absolute;
  top: 13px;
} /* end mini north */
.mini_needle_south {
  /* mini south needle - 4px thick rounded bar touching edge */
  width: 2px;
  height: 13px;
  background-color: var(--text-color);
  border-radius: 5px;
  position: absolute;
  bottom: 13px;
} /* end mini south */
.mini_needle_center {
  /* mini needle center - 1px thick opaque line */
  width: 1px;
  height: 1px;
  background-color: var(--text-color);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
} /* end mini center */
/* large compass overlay */
.large_compass_overlay {
  /* large compass overlay container */
  background-color: rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  z-index: 998;
  display: none;
  pointer-events: none;
} /* end large overlay */
.large_compass_container {
  /* large compass display matching grid size with most transparent outer ring */
  background-color: rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 50%;
  left: 50%;
  width: 240px;
  height: 240px;
  transform: translate(-50%, -50%);
  /* background: rgba(0, 0, 0, 0.1); */
  border: 3px solid #ffffff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
} /* end large container */
.large_compass_outermost_ring {
  /* large compass outermost ring - 5th layer with least transparency */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 240px;
  height: 240px;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.2);
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-sizing: border-box;
} /* end outermost ring */
.large_compass_outer_ring {
  /* large compass outer ring - 4th layer with low transparency */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 192px;
  height: 192px;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.15);
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-sizing: border-box;
} /* end outer ring */
.large_compass_inner_ring {
  /* large compass inner ring - 3rd layer with medium transparency */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 144px;
  height: 144px;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.1);
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-sizing: border-box;
} /* end inner ring */
.large_compass_center_circle {
  /* large compass center circle - 2nd layer with higher transparency */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96px;
  height: 96px;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.05);
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-sizing: border-box;
} /* end center circle */
.large_compass_innermost_circle {
  /* large compass innermost circle - 1st layer completely transparent center */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
  background: transparent;
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-sizing: border-box;
} /* end innermost circle */
.large_compass_dial {
  /* large compass dial */
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  background: none;
} /* end large dial */
.large_compass_dial::before {
  /* compass dial markings with detailed degree tick marks every 10 degrees */
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    #ffffff 1deg,
    transparent 2deg,
    transparent 8deg,
    #ffffff 9deg,
    transparent 11deg,
    transparent 18deg,
    #ffffff 19deg,
    transparent 21deg,
    transparent 28deg,
    #ffffff 29deg,
    transparent 31deg,
    transparent 38deg,
    #ffffff 39deg,
    transparent 41deg,
    transparent 48deg,
    #ffffff 49deg,
    transparent 51deg,
    transparent 58deg,
    #ffffff 59deg,
    transparent 61deg,
    transparent 68deg,
    #ffffff 69deg,
    transparent 71deg,
    transparent 78deg,
    #ffffff 79deg,
    transparent 81deg,
    transparent 88deg,
    #ffffff 89deg,
    transparent 91deg,
    transparent 98deg,
    #ffffff 99deg,
    transparent 101deg,
    transparent 108deg,
    #ffffff 109deg,
    transparent 111deg,
    transparent 118deg,
    #ffffff 119deg,
    transparent 121deg,
    transparent 128deg,
    #ffffff 129deg,
    transparent 131deg,
    transparent 138deg,
    #ffffff 139deg,
    transparent 141deg,
    transparent 148deg,
    #ffffff 149deg,
    transparent 151deg,
    transparent 158deg,
    #ffffff 159deg,
    transparent 161deg,
    transparent 168deg,
    #ffffff 169deg,
    transparent 171deg,
    transparent 178deg,
    #ffffff 179deg,
    transparent 181deg,
    transparent 188deg,
    #ffffff 189deg,
    transparent 191deg,
    transparent 198deg,
    #ffffff 199deg,
    transparent 201deg,
    transparent 208deg,
    #ffffff 209deg,
    transparent 211deg,
    transparent 218deg,
    #ffffff 219deg,
    transparent 221deg,
    transparent 228deg,
    #ffffff 229deg,
    transparent 231deg,
    transparent 238deg,
    #ffffff 239deg,
    transparent 241deg,
    transparent 248deg,
    #ffffff 249deg,
    transparent 251deg,
    transparent 258deg,
    #ffffff 259deg,
    transparent 261deg,
    transparent 268deg,
    #ffffff 269deg,
    transparent 271deg,
    transparent 278deg,
    #ffffff 279deg,
    transparent 281deg,
    transparent 288deg,
    #ffffff 289deg,
    transparent 291deg,
    transparent 298deg,
    #ffffff 299deg,
    transparent 301deg,
    transparent 308deg,
    #ffffff 309deg,
    transparent 311deg,
    transparent 318deg,
    #ffffff 319deg,
    transparent 321deg,
    transparent 328deg,
    #ffffff 329deg,
    transparent 331deg,
    transparent 338deg,
    #ffffff 339deg,
    transparent 341deg,
    transparent 348deg,
    #ffffff 349deg,
    transparent 351deg,
    transparent 358deg,
    #ffffff 359deg,
    transparent 360deg
  );
  mask: radial-gradient(circle, transparent 85%, #ffffff 90%, #ffffff 100%);
  -webkit-mask: radial-gradient(
    circle,
    transparent 85%,
    #ffffff 90%,
    #ffffff 100%
  );
} /* end dial markings */
.large_compass_dial::after {
  /* large inner circle - 4px smaller */
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border: 1px solid #ffffff;
  border-radius: 50%;
  z-index: 1;
}
.large_compass_needle {
  position: absolute;
  width: 240px;
  height: 240px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(-50%, -50%);
} /* end large needle */
/* large needle north styles */
.large_needle_north {
  /* clear bg with white border */
  position: absolute;
  top: 0px;
  left: 50%;
  width: 3px;
  height: 96px;
  background: transparent;
  border: 1px solid #ffffff;
  border-radius: 2px;
  transform: translateX(-50%);
  z-index: 1004;
} /* end large_needle_north */
/* large needle south styles */
.large_needle_south {
  /* clear bg with white border */
  position: absolute;
  bottom: 0px;
  left: 50%;
  width: 3px;
  height: 96px;
  background: transparent;
  border: 1px solid #ffffff;
  border-radius: 2px;
  transform: translateX(-50%);
  z-index: 1004;
} /* end large_needle_south */
/* north needle letter indicator */
.large_needle_north_indicator {
  /* 48px circular indicator with N letter at north needle tip */
  position: absolute;
  top: 3px;
  left: 50%;
  width: 48px;
  height: 48px;
  background: transparent;
  border: 1px solid #ffffff;
  border-radius: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  z-index: 1005;
} /* end north indicator */
/* south needle letter indicator */
.large_needle_south_indicator {
  /* 48px circular indicator with S letter at south needle tip */
  position: absolute;
  bottom: 3px;
  left: 50%;
  width: 48px;
  height: 48px;
  background: transparent;
  border: 1px solid #ffffff;
  border-radius: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  z-index: 1005;
} /* end south indicator */
.large_needle_center {
  /* center dot - white */
  width: 4px;
  height: 4px;
  background-color: #ffffff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1005;
} /* end large center */
/* large compass secondary navbar */
.large_compass_navbar {
  /* secondary navigation bar for large compass */
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 48px;
  background-color: var(--panel-bg);
  border: 1px solid #ffffff;
  border-radius: 0px;
  display: none;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 0px 20px;
  z-index: var(--z_index_navbar);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-sizing: border-box;
} /* end large compass navbar */
.large_compass_nav_button {
  /* large compass navigation button */
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  max-width: 48px;
  max-height: 48px;
  background-color: var(--panel-bg);
  border: 1px solid #ffffff;
  border-radius: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: #ffffff;
  font-size: 16px;
  transition: var(--transition);
  box-sizing: border-box;
} /* end large compass nav button */
.large_compass_nav_button:hover {
  /* large compass nav button hover */
  background-color: var(--panel-bg-hover);
  border-color: var(--panel-border-hover);
} /* end nav button hover */
.large_compass_nav_title {
  /* large compass navigation title */
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
} /* end nav title */
/* basemap search container override */
#basemap-tab > div.search-container > div {
  /* basemap search override */
  position: relative;
  width: 100%;
} /* end basemap search */

#layers-tab > div.search-container > div {
  /* layer search override */
  position: relative;
  width: 100%;
}

#layers-panel > div.panel-header > span {
  padding: 5px;
}
/* Container overlay for compass circles with dark overlay */
.cs_compass_overlay_container {
  position: fixed;
  top: 48px;
  bottom: 48px;
  left: 48px;
  right: 48px;
  z-index: 999;
  display: none;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid #ffffff;
} /* end cs_compass_overlay_container */
.cs_compass_overlay_container.active {
  display: block;
}
/* Top horizontal bar - extended to touch left and right navbars */
.cs_compass_top_bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  border: 1px solid #ffffff;
  border-radius: 0;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.1);
} /* end cs_compass_top_bar */
/* Bottom horizontal bar - extended to touch left and right navbars */
.cs_compass_bottom_bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  border: 1px solid #ffffff;
  border-radius: 0;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.1);
} /* end cs_compass_bottom_bar */
/* Left vertical bar - extended to touch top and bottom navbars */
.cs_compass_left_bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 48px;
  border: 1px solid #ffffff;
  border-radius: 0;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.1);
} /* end cs_compass_left_bar */
/* Right vertical bar - extended to touch top and bottom navbars */
.cs_compass_right_bar {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 48px;
  border: 1px solid #ffffff;
  border-radius: 0;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.1);
} /* end cs_compass_right_bar */
/* New outer ring that touches top and bottom navbars */
.cs_compass_outer_ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100vh - 96px);
  height: calc(100vh - 96px);
  min-width: 400px;
  min-height: 400px;
  border: 1px solid #ffffff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.1);
} /* end cs_compass_outer_ring */
/* compass north south line styles */
.cs_compass_north_south_line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: calc(100vh - 96px);
  min-height: 400px;
  background: linear-gradient(to bottom, #ff0000 0%, #ffff00 100%);
  transform: translate(-50%, -50%);
  transform-origin: center center;
  pointer-events: none;
  z-index: 999;
} /* end cs_compass_north_south_line */
/* north south line container styles */
.cs_compass_north_south_line_container {
  /* north south line container styles */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: calc(
    100vh - 96px
  ); /* Adjusted height to match the red vertical line */
  border-left: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  border-radius: 24px;
  background-color: transparent;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Place indicators at the ends */
  align-items: center;
  pointer-events: none;
  z-index: 999;
} /* end cs_compass_north_south_line_container */
/* north indicator styles */
.cs_compass_indicator_n {
  /* styles for the north indicator within the compass */
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 24px;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.1);
  border: 1px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  z-index: 1010;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
} /* end cs_compass_indicator_n */
/* south indicator styles */
.cs_compass_indicator_s {
  /* styles for the south indicator within the compass */
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 24px;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.1);
  border: 1px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  z-index: 1010;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
} /* end cs_compass_indicator_s */

/* Viewport-sized circle extending to navbar boundaries - 96px smaller */
.cs_compass_viewport_circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100vh - 192px);
  height: calc(100vh - 192px);
  min-width: 304px;
  min-height: 304px;
  border: 1px solid #ffffff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.05);
} /* end cs_compass_viewport_circle */
/* Center circle (48x48px) */
.cs_compass_center_circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  border: 1px solid #ffffff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.01);
} /* end cs_compass_center_circle */
/* inner center circle (240x240px) - 3rd ring */
.cs_compass_inner_center_circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 240px;
  height: 240px;
  border: 1px solid #ffffff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1010;
  background-color: rgba(0, 0, 0, 0.02);
} /* end cs_compass_inner_center_circle */
/* 48px wide vertical bar extending to fill height of resized outermost circle */
.cs_compass_center_bar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: calc(100vh - 96px);
  border-left: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  border-radius: 24px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 999;
} /* end cs_compass_center_bar */
/* gradient fade effects for compass center bar ends */
.cs_compass_center_bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: transparent;
  border-radius: 24px 24px 0 0;
  pointer-events: none;
} /* end cs_compass_center_bar::before */
.cs_compass_center_bar::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: transparent;
  border-radius: 0 0 24px 24px;
  pointer-events: none;
} /* end cs_compass_center_bar::after */
/* Clear circles with 1px white borders for vertical bar ends */
.cs_compass_top_circle {
  position: absolute;
  top: 0px;
  left: 50%;
  width: 48px;
  height: 48px;
  background: transparent;
  border: 1px solid #ffffff;
  border-radius: 50%;
  transform: translateX(-50%);
  pointer-events: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1015;
  background-color: rgba(0, 0, 0, 0.01);
} /* end cs_compass_top_circle */
.cs_compass_indicators_container {
  position: absolute;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 96px;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  z-index: 1012;
  pointer-events: auto;
  background-color: rgba(0, 0, 0, 0.01);
}
.cs_compass_indicators_container .bearing_indicator,
.cs_compass_indicators_container .azimuth_indicator {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  max-width: 48px;
  max-height: 48px;
  background-color: rgba(0, 0, 0, 0.01);
  border: 1px solid #ffffff;
  border-radius: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}
.cs_compass_bottom_indicators_container {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 96px;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  z-index: 1007;
  pointer-events: auto;
}
.cs_compass_bottom_indicators_container .bottom_bearing_indicator,
.cs_compass_bottom_indicators_container .bottom_azimuth_indicator {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  max-width: 48px;
  max-height: 48px;
  background-color: rgba(0, 0, 0, 0.01);
  border: 1px solid #ffffff;
  border-radius: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}
.cs_compass_top_circle .cardinal_indicator {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 34px;
  margin: 0;
  transform: none;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  z-index: 1010;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}
.cs_compass_bottom_circle {
  position: absolute;
  bottom: 0px;
  left: 50%;
  width: 48px;
  height: 48px;
  background: transparent;
  border: 1px solid #ffffff;
  border-radius: 34px;
  transform: translateX(-50%);
  pointer-events: auto;
  z-index: 1014;
} /* end cs_compass_bottom_circle */
.cs_compass_bottom_circle .bottom_cardinal_indicator {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 34px;
  margin: 0;
  transform: none;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  z-index: 1011;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
} /* end bottom circle cardinal indicator */
/* Medium circle with 48px gap from center circle - adjusted for new sizing */
.cs_compass_medium_circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 144px;
  height: 144px;
  border: 1px solid #ffffff;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.06);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1012;
} /* end cs_compass_medium_circle */
/* Large circle with 48px gap from viewport circle - 96px smaller */
.cs_compass_large_circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100vh - 288px);
  height: calc(100vh - 288px);
  border: 1px solid #ffffff;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.07);
  transform: translate(-50%, -50%);
  pointer-events: none;
  min-width: 208px;
  min-height: 208px;
  z-index: 1011;
} /* end cs_compass_large_circle */
/* small circle inside large circle */
.cs_compass_small_circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100vh - 384px);
  height: calc(100vh - 384px);
  border: 1px solid #ffffff;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.04);
  transform: translate(-50%, -50%);
  pointer-events: none;
  min-width: 112px;
  min-height: 112px;
  z-index: 1010;
} /* end cs_compass_small_circle */
/* Cross section for compass - white 1px lines extending to outermost circle */
.cs_compass_cross_section_horizontal {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.7) 0%,
    #ffffff 50%,
    rgba(255, 255, 255, 0.7) 100%
  );
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1005;
} /* end cs_compass_cross_section_horizontal */
.cs_compass_cross_section_vertical {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.7) 0%,
    #ffffff 50%,
    rgba(255, 255, 255, 0.7) 100%
  );
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1005;
} /* end cs_compass_cross_section_vertical */
.large_compass_overlay.rings-hidden .cs_compass_outer_ring,
.large_compass_overlay.rings-hidden .cs_compass_top_bar,
.large_compass_overlay.rings-hidden .cs_compass_bottom_bar,
.large_compass_overlay.rings-hidden .cs_compass_left_bar,
.large_compass_overlay.rings-hidden .cs_compass_right_bar,
.large_compass_overlay.rings-hidden .cs_compass_viewport_circle,
.large_compass_overlay.rings-hidden .cs_compass_center_bar,
.large_compass_overlay.rings-hidden .cs_compass_large_circle,
.large_compass_overlay.rings-hidden .cs_compass_medium_circle,
.large_compass_overlay.rings-hidden .cs_compass_center_circle,
.large_compass_overlay.rings-hidden .cs_compass_inner_center_circle,
.large_compass_overlay.rings-hidden .cs_compass_cross_section_horizontal,
.large_compass_overlay.rings-hidden .cs_compass_cross_section_vertical {
  display: none;
}
.large_compass_red_line {
  position: absolute;
  top: 48px;
  left: 50%;
  width: 1px;
  height: calc(50% - 48px);
  background-color: red;
  transform: translateX(-50%);
  z-index: 1006;
}
/* Speed Limit Overlay - Enhanced US DOT style */
.speed_limit_overlay {
  position: fixed;
  top: 58px;
  right: 10px;
  width: 64px;
  height: 72px;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.speed_limit_overlay.visible {
  display: flex;
}
.speed_limit_sign {
  width: 56px;
  height: 64px;
  background: #ffffff;
  border: 4px solid #cc0000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}
.speed_limit_sign.loading {
  border-color: #999999;
}
.speed_limit_sign.no_data {
  border-color: #666666;
  opacity: 0.6;
}
.speed_limit_value {
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: #000000;
  line-height: 1;
  letter-spacing: -1px;
}
.speed_limit_value.small {
  font-size: 16px;
}
.speed_limit_unit {
  font-family: Arial, sans-serif;
  font-size: 8px;
  font-weight: 700;
  color: #000000;
  text-transform: uppercase;
  margin-top: 2px;
  letter-spacing: 0.5px;
}
.speed_limit_sign.loading .speed_limit_value {
  font-size: 12px;
  color: #666666;
}
.speed_limit_sign.loading .speed_limit_value::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid #999999;
  border-top-color: transparent;
  border-radius: 50%;
  animation: speed_spin 0.8s linear infinite;
}
@keyframes speed_spin {
  to {
    transform: rotate(360deg);
  }
}
/* US-style rectangular sign variant - Official DOT styling */
.speed_limit_sign.us_style {
  border-radius: 6px;
  border: 3px solid #000000;
  width: 56px;
  height: 68px;
  flex-direction: column;
  padding: 4px;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.25);
}
.speed_limit_sign.us_style .speed_limit_label {
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 7px;
  font-weight: 700;
  color: #000000;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 2px;
  text-align: center;
}
.speed_limit_sign.us_style .speed_limit_value {
  font-size: 28px;
  font-weight: 900;
  margin-top: 0;
  letter-spacing: -1px;
}
/* Dark mode adjustments */
[data-theme="dark"] .speed_limit_sign {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3);
  background: #f5f5f5;
}
/* Sliding Menu Styles */
.sliding_menu {
  position: fixed;
  top: 48px;
  height: calc(100vh - 96px);
  max-height: calc(100vh - 96px);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  z-index: 10005;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.sliding_menu_left {
  left: 48px;
  width: 280px;
  transform: translateX(calc(-100% - 48px));
  border-top: none;
}
.sliding_menu_left.open {
  transform: translateX(0);
}
.sliding_menu_right {
  right: 48px;
  width: 280px;
  transform: translateX(calc(100% + 48px));
  border-top: none;
}
.sliding_menu_right.open {
  transform: translateX(0);
}
.sliding_menu_header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--panel-border);
  min-height: 48px;
  box-sizing: border-box;
  flex-shrink: 0;
  background: var(--panel-bg);
}
.sliding_menu_header .sliding_menu_title {
  flex: 1;
}
.sliding_menu_header_right {
  flex-direction: row;
  justify-content: space-between;
}
.sliding_menu_header_right .sliding_menu_title {
  flex: 1;
}
.sliding_menu_title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
}
.sliding_menu_close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  color: var(--text-color);
  transition: var(--transition);
}
.sliding_menu_close:hover {
  background: var(--accent-bg);
}
.sliding_menu_content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 0;
  padding-bottom: 20px;
  -webkit-overflow-scrolling: touch;
}
.sliding_menu_item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: var(--transition);
  color: var(--text-color);
  font-size: 16px;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}
.sliding_menu_item:hover {
  background: var(--accent-bg);
}
.sliding_menu_item.active {
  background: var(--text-color);
  color: var(--panel-bg);
}
.sliding_menu_item i {
  width: 20px;
  text-align: center;
  font-size: 16px;
}
.sliding_menu_item span {
  flex: 1;
}
.sliding_menu_divider {
  height: 1px;
  background: var(--panel-border);
  margin: 8px 16px;
}
.sliding_menu_section_title {
  padding: 8px 16px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sliding_menu_toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  transition: var(--transition);
  color: var(--text-color);
  font-size: 16px;
}
.sliding_menu_toggle:hover {
  background: var(--accent-bg);
}
.sliding_menu_toggle_label {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sliding_menu_toggle_label i {
  width: 20px;
  text-align: center;
  font-size: 16px;
}
.sliding_menu_switch {
  width: 40px;
  height: 22px;
  background: var(--panel-border);
  border-radius: 11px;
  position: relative;
  transition: var(--transition);
}
.sliding_menu_switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--panel-bg);
  border-radius: 50%;
  transition: var(--transition);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.sliding_menu_toggle.active .sliding_menu_switch {
  background: var(--text-color);
}
.sliding_menu_toggle.active .sliding_menu_switch::after {
  left: 20px;
}
.menu_overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.menu_overlay.visible {
  opacity: 1;
  visibility: visible;
}
/* Menu button active state */
.menu_corner_container.menu_open .menu_button {
  background: var(--text-color);
  color: var(--panel-bg);
}
/* View Controls Panel Styles */
.view_controls_panel {
  position: fixed;
  top: 48px;
  left: 48px;
  width: 336px;
  min-width: 336px;
  max-width: 336px;
  height: calc(100vh - 96px);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  z-index: 1500;
  display: none;
  flex-direction: column;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.view_controls_panel.active {
  display: flex;
}
.view_controls_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--panel-border);
  min-height: 48px;
  background: var(--panel-bg);
  flex-shrink: 0;
}
.view_controls_title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 8px;
}
.view_controls_close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  color: var(--text-color);
  transition: var(--transition);
}
.view_controls_close:hover {
  background: var(--accent-bg);
}
.view_controls_tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--panel-border);
  flex-shrink: 0;
}
.view_controls_tab {
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-color);
  border: none;
  background: transparent;
  border-right: 1px solid var(--panel-border);
  transition: var(--transition);
}
.view_controls_tab:last-child {
  border-right: none;
}
.view_controls_tab:hover {
  background: var(--accent-bg);
}
.view_controls_tab.active {
  background: var(--text-color);
  color: var(--panel-bg);
}
.view_controls_tab i {
  font-size: 16px;
}
.view_controls_content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
  display: none;
}
.view_controls_content.active {
  display: block;
}
.vc_control_block {
  border: 1px solid var(--panel-border);
  background: var(--accent-bg);
  margin-bottom: 12px;
  padding: 12px;
}
.vc_block_label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-color);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--panel-border);
}
.vc_input_row {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  height: 40px;
  margin-bottom: 8px;
}
.vc_input_btn {
  background: var(--panel-bg);
  border: none;
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: var(--transition);
}
.vc_input_btn:first-child {
  border-right: 1px solid var(--panel-border);
}
.vc_input_btn:last-child {
  border-left: 1px solid var(--panel-border);
}
.vc_input_btn:hover {
  background: var(--accent-bg);
}
.vc_input_field {
  border: none;
  text-align: center;
  padding: 8px;
  background: var(--panel-bg);
  color: var(--text-color);
  font-size: 16px;
  outline: none;
  width: 100%;
}
.vc_input_field:focus {
  background: var(--accent-bg);
}
.vc_action_btn {
  width: 100%;
  height: 40px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  color: var(--text-color);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: var(--transition);
}
.vc_action_btn:hover {
  background: var(--text-color);
  color: var(--panel-bg);
}
.vc_select_field {
  width: 100%;
  height: 40px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  color: var(--text-color);
  font-size: 13px;
  padding: 0 12px;
  cursor: pointer;
  margin-bottom: 8px;
}
.vc_direction_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
}
.vc_direction_btn {
  height: 44px;
  background: var(--accent-bg);
  border: 1px solid var(--panel-border);
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: var(--transition);
}
.vc_direction_btn:hover {
  background: var(--text-color);
  color: var(--panel-bg);
}
.vc_direction_center {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}
.vc_distance_row {
  display: grid;
  grid-template-columns: 1fr 80px;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  height: 40px;
  margin-bottom: 8px;
}
.vc_distance_select {
  border: none;
  border-left: 1px solid var(--panel-border);
  background: var(--accent-bg);
  color: var(--text-color);
  padding: 0 8px;
  cursor: pointer;
  font-size: 13px;
}
.vc_angle_input {
  display: none;
  width: 100%;
  height: 40px;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  color: var(--text-color);
  text-align: center;
  font-size: 16px;
  margin-bottom: 8px;
}
.vc_angle_input.visible {
  display: block;
}

/* ========================================
         Aerial Overlay Panel Styles
         ======================================== */
.overlay_panel {
  position: fixed;
  top: 48px;
  left: 48px;
  width: 336px;
  min-width: 336px;
  max-width: 336px;
  height: calc(100vh - 96px);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  z-index: 1500;
  display: none;
  flex-direction: column;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.overlay_panel.active {
  display: flex;
}
.overlay_panel_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--panel-border);
  min-height: 48px;
  background: var(--panel-bg);
  flex-shrink: 0;
}
.overlay_panel_title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 8px;
}
.overlay_panel_close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-color);
  transition: var(--transition);
  border: 1px solid var(--panel-border);
}
.overlay_panel_close:hover {
  background: var(--text-color);
  color: var(--panel-bg);
}
.overlay_panel_content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
/* Upload area styling */
.overlay_upload_area {
  padding: 24px 16px;
  border-bottom: 1px solid var(--panel-border);
  text-align: center;
  background: var(--accent-bg);
  cursor: pointer;
  transition: var(--transition);
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.overlay_upload_area:hover,
.overlay_upload_area.drag_over {
  background: var(--text-color);
  color: var(--panel-bg);
}
.overlay_upload_icon {
  font-size: 32px;
  color: var(--text-muted);
  transition: var(--transition);
}
.overlay_upload_area:hover .overlay_upload_icon,
.overlay_upload_area.drag_over .overlay_upload_icon {
  color: var(--panel-bg);
}
.overlay_upload_text {
  font-size: 16px;
  font-weight: 500;
}
.overlay_upload_subtext {
  font-size: 12px;
  color: var(--text-muted);
}
.overlay_upload_area:hover .overlay_upload_subtext,
.overlay_upload_area.drag_over .overlay_upload_subtext {
  color: var(--panel-bg);
}
/* Overlay items list */
.overlay_list_container {
  padding: 8px;
}
.overlay_list_item {
  border: 1px solid var(--panel-border);
  margin-bottom: 8px;
  background: var(--panel-bg);
}
.overlay_item_header {
  display: flex;
  align-items: center;
  padding: 8px;
  gap: 8px;
  background: var(--accent-bg);
  border-bottom: 1px solid var(--panel-border);
  min-height: 56px;
}
.overlay_item_thumbnail {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  overflow: hidden;
}
.overlay_item_thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.overlay_item_info {
  flex: 1;
  overflow: hidden;
}
.overlay_item_name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.overlay_item_stats {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.overlay_item_actions {
  display: flex;
  gap: 4px;
}
.overlay_item_btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  color: var(--text-color);
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.overlay_item_btn:hover {
  background: var(--text-color);
  color: var(--panel-bg);
}
.overlay_item_btn.active {
  background: var(--text-color);
  color: var(--panel-bg);
}
.overlay_item_btn.danger:hover {
  background: #f44336;
  border-color: #f44336;
  color: #fff;
}
.overlay_item_btn.expand {
  background: transparent;
  border: none;
}
.overlay_item_content {
  padding: 12px;
  background: var(--panel-bg);
}
.overlay_item_footer {
  font-size: 10px;
  color: var(--text-muted);
  padding: 8px;
  text-align: center;
  line-height: 1.4;
  background: var(--accent-bg);
  border-top: 1px solid var(--panel-border);
}
/* Overlay control groups */
.overlay_control_group {
  padding: 12px;
  border: 1px solid var(--panel-border);
  margin-bottom: 12px;
  background: var(--accent-bg);
}
.overlay_control_title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
}
.overlay_control_row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 8px;
}
.overlay_control_row:last-child {
  margin-bottom: 0;
}
.overlay_control_input {
  width: 64px;
  height: 40px;
  padding: 4px;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  color: var(--text-color);
  font-size: 13px;
  text-align: center;
}
.overlay_control_btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  color: var(--text-color);
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.overlay_control_btn:hover {
  background: var(--text-color);
  color: var(--panel-bg);
}
.overlay_control_btn.danger:hover {
  background: #f44336;
  border-color: #f44336;
  color: #fff;
}
.overlay_control_slider {
  width: 100%;
  height: 8px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--panel-border);
  outline: none;
  cursor: pointer;
}
.overlay_control_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--text-color);
  cursor: pointer;
}
.overlay_control_slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--text-color);
  cursor: pointer;
  border: none;
}
/* Movement gamepad grid */
.overlay_gamepad {
  display: grid;
  grid-template-columns: repeat(3, 40px);
  grid-template-rows: repeat(3, 40px);
  gap: 4px;
  justify-content: center;
  margin-top: 8px;
}
.overlay_gamepad_btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  color: var(--text-color);
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.overlay_gamepad_btn:hover {
  background: var(--text-color);
  color: var(--panel-bg);
}
.overlay_gamepad_btn.up {
  grid-column: 2;
  grid-row: 1;
}
.overlay_gamepad_btn.left {
  grid-column: 1;
  grid-row: 2;
}
.overlay_gamepad_btn.right {
  grid-column: 3;
  grid-row: 2;
}
.overlay_gamepad_btn.down {
  grid-column: 2;
  grid-row: 3;
}
.overlay_gamepad_center {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--text-muted);
  border: 1px solid var(--panel-border);
  background: var(--accent-bg);
}
.overlay_control_unit {
  font-size: 12px;
  color: var(--text-muted);
}
/* Overlay stats */
.overlay_stats {
  font-size: 10px;
  color: var(--text-muted);
  padding: 8px;
  text-align: center;
  line-height: 1.4;
  background: var(--accent-bg);
  border-top: 1px solid var(--panel-border);
}
/* Export section */
.overlay_export_section {
  padding: 16px;
  border-top: 1px solid var(--panel-border);
  background: var(--panel-bg);
  margin-top: auto;
}
.overlay_export_toggle {
  width: 100%;
  height: 48px;
  background: #9c27b0;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: var(--transition);
  box-shadow: 0 0 20px rgba(156, 39, 176, 0.4);
}
.overlay_export_toggle:hover {
  opacity: 0.9;
}
.overlay_export_controls {
  display: none;
  margin-top: 12px;
  border: 1px solid var(--panel-border);
}
.overlay_export_controls.visible {
  display: block;
}
.overlay_export_options {
  display: flex;
  gap: 4px;
  padding: 8px;
  border-bottom: 1px solid var(--panel-border);
}
.overlay_export_option {
  flex: 1;
  height: 40px;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  color: var(--text-color);
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.overlay_export_option:hover,
.overlay_export_option.active {
  background: #9c27b0;
  color: #fff;
  border-color: #9c27b0;
}
.overlay_export_execute {
  width: 100%;
  height: 48px;
  background: #4caf50;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: var(--transition);
}
.overlay_export_execute:hover {
  opacity: 0.9;
}
/* Export progress modal */
.overlay_export_modal {
  position: fixed;
  top: 48px;
  left: 48px;
  right: 48px;
  bottom: 48px;
  background: rgba(0, 0, 0, 0.8);
  z-index: 10020;
  display: none;
  align-items: center;
  justify-content: center;
}
.overlay_export_modal.visible {
  display: flex;
}
.overlay_export_modal_content {
  background: var(--panel-bg);
  padding: 24px;
  border: 1px solid var(--panel-border);
  text-align: center;
  min-width: 300px;
  max-width: calc(100vw - 160px);
  max-height: calc(100vh - 160px);
  overflow: auto;
  backdrop-filter: blur(15px);
}
.overlay_export_progress {
  width: 100%;
  height: 8px;
  background: var(--panel-border);
  margin: 16px 0;
  overflow: hidden;
}
.overlay_export_progress_bar {
  height: 100%;
  background: #9c27b0;
  width: 0%;
  transition: width 0.3s ease;
}

/* ========================================
         File Manager Panel Styles
         ======================================== */
.filemanager_panel {
  position: fixed;
  top: 48px;
  left: 48px;
  width: 336px;
  min-width: 336px;
  max-width: 336px;
  height: calc(100vh - 96px);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  z-index: 1500;
  display: none;
  flex-direction: column;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.filemanager_panel.active {
  display: flex;
}
.filemanager_panel_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--panel-border);
  min-height: 48px;
  background: var(--panel-bg);
  flex-shrink: 0;
}
.filemanager_panel_title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 8px;
}
.filemanager_panel_close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-color);
  transition: var(--transition);
  border: 1px solid var(--panel-border);
}
.filemanager_panel_close:hover {
  background: var(--text-color);
  color: var(--panel-bg);
}
.filemanager_panel_tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--panel-border);
}
.filemanager_panel_tab {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--panel-bg);
  border-bottom: 2px solid transparent;
  transition: var(--transition);
}
.filemanager_panel_tab.active {
  color: var(--text-color);
  border-bottom-color: var(--text-color);
  background: var(--accent-bg);
}
.filemanager_panel_tab:hover:not(.active) {
  background: var(--text-color);
  color: var(--panel-bg);
}
.filemanager_panel_content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.filemanager_tab_content {
  display: none;
  flex-direction: column;
  height: 100%;
}
.filemanager_tab_content.active {
  display: flex;
}
/* File upload section */
.filemanager_upload_area {
  padding: 20px 16px;
  text-align: center;
  background: var(--accent-bg);
  cursor: pointer;
  transition: var(--transition);
  border-bottom: 1px solid var(--panel-border);
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.filemanager_upload_area:hover,
.filemanager_upload_area.drag_over {
  background: var(--text-color);
  color: var(--panel-bg);
}
.filemanager_upload_icon {
  font-size: 28px;
  color: var(--text-muted);
  transition: var(--transition);
}
.filemanager_upload_area:hover .filemanager_upload_icon,
.filemanager_upload_area.drag_over .filemanager_upload_icon {
  color: var(--panel-bg);
}
.filemanager_upload_text {
  font-size: 13px;
  font-weight: 500;
}
.filemanager_upload_subtext {
  font-size: 11px;
  color: var(--text-muted);
}
.filemanager_upload_area:hover .filemanager_upload_subtext,
.filemanager_upload_area.drag_over .filemanager_upload_subtext {
  color: var(--panel-bg);
}
/* Project list */
.filemanager_project_list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.filemanager_project_item {
  border: 1px solid var(--panel-border);
  margin-bottom: 8px;
  background: var(--panel-bg);
}
.filemanager_project_header {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  padding: 12px;
  cursor: pointer;
  transition: var(--transition);
  gap: 12px;
  min-height: 48px;
}
.filemanager_project_header:hover {
  background: var(--accent-bg);
}
.filemanager_project_header.active {
  background: var(--text-color);
  color: var(--panel-bg);
}
.filemanager_project_color {
  width: 12px;
  height: 12px;
  border: 1px solid var(--panel-border);
}
.filemanager_project_info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.filemanager_project_name {
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.filemanager_project_stats {
  font-size: 11px;
  color: var(--text-muted);
}
.filemanager_project_header.active .filemanager_project_stats {
  color: var(--panel-bg);
  opacity: 0.8;
}
.filemanager_project_actions {
  display: flex;
  gap: 4px;
}
.filemanager_project_btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  color: var(--text-color);
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.filemanager_project_btn:hover {
  background: var(--text-color);
  color: var(--panel-bg);
}
.filemanager_project_btn.danger:hover {
  background: #f44336;
  border-color: #f44336;
  color: #fff;
}
.filemanager_project_header.active .filemanager_project_btn {
  border-color: var(--panel-bg);
  color: var(--panel-bg);
  background: transparent;
}
.filemanager_project_header.active .filemanager_project_btn:hover {
  background: var(--panel-bg);
  color: var(--text-color);
}
/* Feature list */
.filemanager_feature_list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.filemanager_feature_item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  padding: 10px 12px;
  gap: 10px;
  border: 1px solid var(--panel-border);
  margin-bottom: 6px;
  background: var(--panel-bg);
  cursor: pointer;
  transition: var(--transition);
  min-height: 44px;
}
.filemanager_feature_item:hover {
  background: var(--accent-bg);
}
.filemanager_feature_icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border: 1px solid var(--panel-border);
  background: var(--accent-bg);
}
.filemanager_feature_info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.filemanager_feature_name {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.filemanager_feature_type {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
}
.filemanager_feature_actions {
  display: flex;
  gap: 4px;
}
.filemanager_feature_btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  color: var(--text-color);
  cursor: pointer;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.filemanager_feature_btn:hover {
  background: var(--text-color);
  color: var(--panel-bg);
}
.filemanager_feature_btn.danger:hover {
  background: #f44336;
  border-color: #f44336;
  color: #fff;
}
/* Active project header */
.filemanager_active_project {
  padding: 12px 16px;
  border-bottom: 1px solid var(--panel-border);
  background: var(--accent-bg);
}
.filemanager_active_project_title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.filemanager_active_project_name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
}
/* Add project/feature buttons */
.filemanager_add_btn {
  width: 100%;
  height: 44px;
  border: 2px dashed var(--panel-border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: var(--transition);
  margin: 8px;
  width: calc(100% - 16px);
}
.filemanager_add_btn:hover {
  background: var(--text-color);
  color: var(--panel-bg);
  border-color: var(--text-color);
}
/* Export buttons */
.filemanager_export_section {
  padding: 12px;
  border-top: 1px solid var(--panel-border);
  background: var(--panel-bg);
  display: flex;
  gap: 6px;
}
.filemanager_export_btn {
  flex: 1;
  height: 40px;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  color: var(--text-color);
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: var(--transition);
}
.filemanager_export_btn:hover {
  background: var(--text-color);
  color: var(--panel-bg);
}
/* Empty state */
.filemanager_empty_state {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
}
.filemanager_empty_icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}
.filemanager_empty_text {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
}
.filemanager_empty_subtext {
  font-size: 12px;
}
/* Modal styles */
.filemanager_modal_overlay {
  position: fixed;
  top: 48px;
  left: 48px;
  right: 48px;
  bottom: 48px;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10030;
  display: none;
  align-items: center;
  justify-content: center;
}
.filemanager_modal_overlay.visible {
  display: flex;
}
.filemanager_modal {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  width: 360px;
  max-width: calc(100vw - 160px);
  max-height: calc(100vh - 160px);
  overflow: auto;
}
.filemanager_modal_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--panel-border);
}
.filemanager_modal_title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
}
.filemanager_modal_close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-color);
  border: 1px solid var(--panel-border);
  transition: var(--transition);
}
.filemanager_modal_close:hover {
  background: var(--text-color);
  color: var(--panel-bg);
}
.filemanager_modal_content {
  padding: 16px;
}
.filemanager_modal_field {
  margin-bottom: 16px;
}
.filemanager_modal_label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.filemanager_modal_input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--panel-border);
  background: var(--input-bg);
  color: var(--text-color);
  font-size: 16px;
}
.filemanager_modal_input:focus {
  border-color: var(--text-color);
  outline: none;
}
.filemanager_modal_actions {
  display: flex;
  gap: 8px;
  padding: 16px;
  border-top: 1px solid var(--panel-border);
}
.filemanager_modal_btn {
  flex: 1;
  height: 40px;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  color: var(--text-color);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: var(--transition);
}
.filemanager_modal_btn:hover {
  background: var(--text-color);
  color: var(--panel-bg);
}
.filemanager_modal_btn.primary {
  background: var(--text-color);
  color: var(--panel-bg);
}
.filemanager_modal_btn.primary:hover {
  opacity: 0.9;
}
.filemanager_modal_btn.danger {
  background: #f44336;
  color: #fff;
  border-color: #f44336;
}
.filemanager_modal_btn.danger:hover {
  opacity: 0.9;
}
/* Progress indicator */
.filemanager_progress {
  padding: 16px;
  border: 1px solid var(--panel-border);
  margin: 8px;
  background: var(--accent-bg);
  display: none;
}
.filemanager_progress.visible {
  display: block;
}
.filemanager_progress_text {
  font-size: 12px;
  margin-bottom: 8px;
  color: var(--text-color);
}
.filemanager_progress_bar_container {
  height: 8px;
  background: var(--panel-border);
  overflow: hidden;
}
.filemanager_progress_bar {
  height: 100%;
  background: var(--text-color);
  width: 0%;
  transition: width 0.3s ease;
}

/* ========================================
   Overlay Panel Styles
   ======================================== */
.overlay_panel {
  position: fixed;
  top: 48px;
  left: 48px;
  width: 336px;
  min-width: 336px;
  max-width: 336px;
  height: calc(100vh - 96px);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  z-index: 1500;
  display: none;
  flex-direction: column;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.overlay_panel.active {
  display: flex;
}
.overlay_panel_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--panel-border);
  min-height: 48px;
  background: var(--panel-bg);
  flex-shrink: 0;
}
.overlay_panel_title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 8px;
}
.overlay_panel_close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-color);
  transition: var(--transition);
  border: 1px solid var(--panel-border);
}
.overlay_panel_close:hover {
  background: var(--text-color);
  color: var(--panel-bg);
}
.overlay_panel_content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.overlay_upload_area {
  padding: 24px 16px;
  border-bottom: 1px solid var(--panel-border);
  text-align: center;
  background: var(--accent-bg);
  cursor: pointer;
  transition: var(--transition);
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.overlay_upload_area:hover,
.overlay_upload_area.dragover {
  background: var(--text-color);
  color: var(--panel-bg);
}
.overlay_upload_icon {
  font-size: 32px;
  color: var(--text-muted);
  transition: var(--transition);
}
.overlay_upload_area:hover .overlay_upload_icon,
.overlay_upload_area.dragover .overlay_upload_icon {
  color: var(--panel-bg);
}
.overlay_upload_text {
  font-size: 16px;
  font-weight: 500;
}
.overlay_upload_subtext {
  font-size: 12px;
  color: var(--text-muted);
}
.overlay_upload_area:hover .overlay_upload_subtext,
.overlay_upload_area.dragover .overlay_upload_subtext {
  color: var(--panel-bg);
}
.overlay_list_container {
  padding: 8px;
}
.overlay_list_item {
  border: 1px solid var(--panel-border);
  margin-bottom: 8px;
  background: var(--panel-bg);
}
.overlay_item_header {
  display: flex;
  align-items: center;
  padding: 12px;
  gap: 12px;
  background: var(--accent-bg);
  border-bottom: 1px solid var(--panel-border);
}
.overlay_item_visibility {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  transition: var(--transition);
}
.overlay_item_visibility:hover {
  background: var(--text-color);
  color: var(--panel-bg);
}
.overlay_item_name {
  flex: 1;
  font-weight: 500;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overlay_item_delete {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  color: #dc3545;
  transition: var(--transition);
}
.overlay_item_delete:hover {
  background: #dc3545;
  color: #fff;
  border-color: #dc3545;
}
.overlay_item_controls {
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.overlay_item_controls label {
  font-size: 12px;
  color: var(--text-muted);
  min-width: 50px;
}
.overlay_opacity_slider {
  flex: 1;
  height: 8px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--panel-border);
  outline: none;
  cursor: pointer;
}
.overlay_opacity_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--text-color);
  cursor: pointer;
}
.overlay_opacity_slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--text-color);
  cursor: pointer;
  border: none;
}
.overlay_export_section {
  padding: 16px;
  border-top: 1px solid var(--panel-border);
  background: var(--panel-bg);
  margin-top: auto;
}
.overlay_export_toggle {
  width: 100%;
  height: 48px;
  background: var(--text-color);
  color: var(--panel-bg);
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: var(--transition);
}
.overlay_export_toggle:hover {
  opacity: 0.9;
}
.overlay_export_controls {
  display: none;
  margin-top: 12px;
  border: 1px solid var(--panel-border);
}
.overlay_export_controls.open {
  display: block;
}
.overlay_export_options {
  display: flex;
  gap: 4px;
  padding: 8px;
  border-bottom: 1px solid var(--panel-border);
}
.overlay_export_option {
  flex: 1;
  height: 40px;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  color: var(--text-color);
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.overlay_export_option:hover,
.overlay_export_option.active {
  background: var(--text-color);
  color: var(--panel-bg);
}
.overlay_export_execute {
  width: 100%;
  height: 48px;
  background: #28a745;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  transition: var(--transition);
}
.overlay_export_execute:hover {
  opacity: 0.9;
}
.overlay_export_modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
}
.overlay_export_modal.active {
  display: flex;
}
.overlay_export_modal_content {
  background: var(--panel-bg);
  padding: 24px;
  border: 1px solid var(--panel-border);
  text-align: center;
  min-width: 300px;
}
.overlay_export_modal_content h3 {
  margin-bottom: 16px;
  font-size: 16px;
}
.overlay_export_progress {
  width: 100%;
  height: 8px;
  background: var(--panel-border);
  margin: 16px 0;
  overflow: hidden;
}
.overlay_export_progress_bar {
  height: 100%;
  background: var(--text-color);
  width: 0%;
  transition: width 0.3s ease;
}

/* ========================================
   Project Marker Styles (matching measurement markers)
   ======================================== */
.cs_project_marker_circular {
  width: 48px;
  height: 48px;
  min-width: 48px;
  max-width: 48px;
  min-height: 48px;
  max-height: 48px;
  background: var(--cs_color_background_primary, var(--panel-bg, #ffffff));
  color: var(--cs_color_text_primary, var(--text-color, #000000));
  border: 3px solid var(--cs_color_border_primary, var(--text-color, #000000));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--cs_font_weight_bold, 600);
  font-size: var(--cs_font_size_normal, 14px);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 1000;
  /* Ensure proper positioning for MapLibre markers */
  transform-origin: center center;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  /* Fix positioning issues */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.cs_project_marker_circular:hover {
  background: var(--cs_color_accent_primary, var(--text-color, #000000));
  color: var(--cs_color_background_primary, var(--panel-bg, #ffffff));
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  z-index: 1001;
}

.cs_project_marker_circular i {
  font-size: 16px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.cs_project_marker_circular .marker-number {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 700;
  font-size: 16px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
}

/* Dark mode support */
body.dark-mode .cs_project_marker_circular {
  background: var(--panel-bg, #1a1a1a);
  color: var(--text-color, #ffffff);
  border-color: var(--text-color, #ffffff);
}

body.dark-mode .cs_project_marker_circular:hover {
  background: var(--text-color, #ffffff);
  color: var(--panel-bg, #1a1a1a);
}

/* Selected state */
.cs_project_marker_circular.state_selected {
  background: var(--text-color, #000000);
  color: var(--panel-bg, #ffffff);
  transform: scale(1.15);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  z-index: 1002;
}

/* Cluster marker styles */
.cs_project_marker_circular.cluster-marker {
  background: #ff6b35;
  color: #ffffff;
  border-color: #d63031;
  position: relative;
  /* Ensure proper positioning for cluster markers */
  transform-origin: center center;
}

.cs_project_marker_circular.cluster-marker:hover {
  background: #d63031;
  color: #ffffff;
}

.cs_project_marker_circular.cluster-marker .cluster-count {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #2d3436;
  color: #ffffff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  /* Ensure proper positioning for count badge */
  transform: translate(0, 0);
  pointer-events: none;
}

/* ========================================
   File Manager Panel Styles
   ======================================== */
.filemanager_panel {
  position: fixed;
  top: 48px;
  left: 48px;
  width: 336px;
  min-width: 336px;
  max-width: 336px;
  height: calc(100vh - 96px);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  z-index: 1500;
  display: none;
  flex-direction: column;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.filemanager_panel.active {
  display: flex;
}
.filemanager_panel_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--panel-border);
  min-height: 48px;
  background: var(--panel-bg);
  flex-shrink: 0;
}
.filemanager_panel_title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 8px;
}
.filemanager_panel_close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-color);
  transition: var(--transition);
  border: 1px solid var(--panel-border);
}
.filemanager_panel_close:hover {
  background: var(--text-color);
  color: var(--panel-bg);
}
.filemanager_panel_tabs {
  display: flex;
  border-bottom: 1px solid var(--panel-border);
  background: var(--accent-bg);
}
.filemanager_panel_tab {
  flex: 1;
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  transition: var(--transition);
  border-bottom: 2px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.filemanager_panel_tab:hover {
  color: var(--text-color);
  background: var(--panel-bg);
}
.filemanager_panel_tab.active {
  color: var(--text-color);
  background: var(--panel-bg);
  border-bottom-color: var(--text-color);
}
.filemanager_panel_tab i {
  font-size: 16px;
}
.filemanager_tab_content {
  display: none;
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.filemanager_tab_content.active {
  display: flex;
  flex-direction: column;
}
.fm_upload_section {
  padding: 16px;
  border-bottom: 1px solid var(--panel-border);
}
.fm_file_upload_area {
  padding: 24px 16px;
  text-align: center;
  background: var(--accent-bg);
  cursor: pointer;
  transition: var(--transition);
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px dashed var(--panel-border);
}
.fm_file_upload_area:hover,
.fm_file_upload_area.dragover {
  background: var(--text-color);
  color: var(--panel-bg);
  border-color: var(--text-color);
}
.fm_upload_icon {
  font-size: 28px;
  color: var(--text-muted);
  transition: var(--transition);
}
.fm_file_upload_area:hover .fm_upload_icon,
.fm_file_upload_area.dragover .fm_upload_icon {
  color: var(--panel-bg);
}
.fm_upload_text {
  font-size: 13px;
  font-weight: 500;
}
.fm_upload_subtext {
  font-size: 11px;
  color: var(--text-muted);
}
.fm_file_upload_area:hover .fm_upload_subtext,
.fm_file_upload_area.dragover .fm_upload_subtext {
  color: var(--panel-bg);
}
.fm_projects_section {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.fm_projects_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  margin-bottom: 8px;
}
.fm_projects_title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
}
.fm_new_project_btn {
  height: 32px;
  padding: 0 12px;
  background: var(--text-color);
  color: var(--panel-bg);
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
}
.fm_new_project_btn:hover {
  opacity: 0.9;
}
.fm_project_list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fm_no_projects {
  padding: 24px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
.fm_project_item {
  display: flex;
  align-items: center;
  padding: 12px;
  gap: 12px;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  cursor: pointer;
  transition: var(--transition);
}
.fm_project_item:hover {
  background: var(--accent-bg);
}
.fm_project_item.active {
  border-color: var(--text-color);
  background: var(--accent-bg);
}
.fm_project_icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--text-color);
  color: var(--panel-bg);
  font-size: 16px;
}
.fm_project_info {
  flex: 1;
  min-width: 0;
}
.fm_project_name {
  font-weight: 600;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fm_project_details {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}
.fm_project_actions {
  display: flex;
  gap: 4px;
}
.fm_project_btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  color: var(--text-color);
  transition: var(--transition);
}
.fm_project_btn:hover {
  background: var(--text-color);
  color: var(--panel-bg);
}
.fm_project_btn[data-action="delete"]:hover {
  background: #dc3545;
  color: #fff;
  border-color: #dc3545;
}
.fm_project_btn[data-action="toggle"]:hover {
  background: #17a2b8;
  color: #fff;
  border-color: #17a2b8;
}

/* ===== UI STANDARDIZATION OVERRIDES ===== */
/* standardize all panel headers to 48px height and 14px font */
.panel-header,
.view_controls_header,
.overlay_panel_header,
.fm_panel_header,
.cs_panel_header_collapsible {
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  font-size: 16px;
}

/* standardize all tab elements to 14px font */
.panel-tab,
.view_controls_tab,
.cs_measurement_panel_header {
  font-size: 16px;
}

/* standardize all labels and text to 14px */
.panel-header-title span,
.view_controls_title span,
.overlay_panel_title span,
.fm_panel_title span,
.cs_section_label_typography,
.cs_panel_header_title span,
.tab-content label,
.vc_block_label span {
  font-size: 16px;
}

/* standardize all input elements */
.search-box,
.vc_input_field,
.cs_select_dropdown_input,
.cs_inline_input_field,
input[type="text"],
input[type="number"],
select {
  font-size: 16px;
  height: 36px;
}

/* standardize all buttons */
.vc_action_btn,
.vc_input_btn,
.cs_control_button_circular,
.cs_clear_all_button_action,
button {
  font-size: 16px;
}

/* standardize icons to 16px */
.panel-header i,
.view_controls_title i,
.view_controls_tab i,
.panel-tab i,
.overlay_panel_title i,
.fm_panel_title i,
.left_nav_controls i,
.vc_block_label i {
  font-size: 16px;
}

/* GIS Widget Styles for Bottom Navbar Popups */
.gis_widget_content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px;
}

.gis_stat_row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background-color: rgba(0, 0, 0, 0.04);
  border-radius: 6px;
  font-size: 16px;
}

.gis_stat_row i {
  width: 20px;
  color: var(--color-primary, #3a86ff);
  font-size: 16px;
}

.gis_stat_label {
  flex: 1;
  font-weight: 500;
  color: var(--text-color, #333);
}

.gis_stat_value {
  font-family: monospace;
  font-size: 13px;
  color: var(--text-secondary, #666);
  background: rgba(0, 0, 0, 0.06);
  padding: 2px 8px;
  border-radius: 4px;
}

.gis_info_note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary, #888);
  padding: 8px;
  background: rgba(59, 130, 246, 0.08);
  border-radius: 6px;
  margin-top: 4px;
}

.gis_info_note i {
  color: var(--color-primary, #3a86ff);
}

.gis_empty_state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px;
  color: var(--text-secondary, #888);
}

.gis_empty_state i {
  font-size: 32px;
  opacity: 0.5;
}

.gis_widget_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--color-primary, #3a86ff);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}

.gis_widget_btn:hover {
  background: var(--color-primary-hover, #2563eb);
}

.gis_share_url_container {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.gis_share_url_input {
  flex: 1;
  padding: 8px 12px;
  font-family: monospace;
  font-size: 12px;
  border: 1px solid var(--panel-border, #ddd);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.03);
}

.gis_copy_btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-bg, #fff);
  border: 1px solid var(--panel-border, #ddd);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.gis_copy_btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.gis_share_buttons {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.gis_share_buttons .gis_widget_btn {
  flex: 1;
  background: var(--panel-bg, #fff);
  color: var(--text-color, #333);
  border: 1px solid var(--panel-border, #ddd);
}

.gis_share_buttons .gis_widget_btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.gis_help_section {
  margin-bottom: 12px;
}

.gis_help_section strong {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--text-color, #333);
}

.gis_help_item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 13px;
  color: var(--text-secondary, #666);
}

.gis_help_item kbd {
  display: inline-block;
  padding: 2px 8px;
  font-family: monospace;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  min-width: 80px;
  text-align: center;
}

/* Dark mode adjustments for GIS widgets */
[data-theme="dark"] .gis_stat_row {
  background-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .gis_stat_value {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary, #aaa);
}

[data-theme="dark"] .gis_info_note {
  background: rgba(59, 130, 246, 0.15);
}

[data-theme="dark"] .gis_share_url_input {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .gis_help_item kbd {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
}