:root {
  --jarvis-ui-scale: 1;
  --jarvis-bg: #0f172a;
  --jarvis-panel: #1e293b;
  --jarvis-border: #334155;
  --jarvis-text: #e2e8f0;
  --jarvis-muted: #94a3b8;
  --jarvis-accent: #00b8d9;
  --jarvis-success: #10b981;
  --jarvis-danger: #ef4444;
}

/* Global scale controls (apply class on html/body/wrapper):
   .ui-scale-90 | .ui-scale-100 | .ui-scale-110 | .ui-scale-125 */
.ui-scale-90 {
  --jarvis-ui-scale: 0.9;
}

.ui-scale-100 {
  --jarvis-ui-scale: 1;
}

.ui-scale-110 {
  --jarvis-ui-scale: 1.1;
}

.ui-scale-125 {
  --jarvis-ui-scale: 1.25;
}

/* Opt-in scaling class for containers/components */

.ui-scale-target {
  font-size: calc(1rem * var(--jarvis-ui-scale));
}

.ui-scale-pad-1 {
  padding: calc(0.25rem * var(--jarvis-ui-scale));
}

.ui-scale-pad-2 {
  padding: calc(0.5rem * var(--jarvis-ui-scale));
}

.ui-scale-gap-1 {
  gap: calc(0.25rem * var(--jarvis-ui-scale));
}

.ui-scale-gap-2 {
  gap: calc(0.5rem * var(--jarvis-ui-scale));
}

html,
body {
  background: var(--jarvis-bg);
  color: var(--jarvis-text);
}

body {
  min-height: 100vh;
}

.jarvis-glass {
  background: rgba(30, 41, 59, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.25);
  backdrop-filter: blur(8px);
}

.jarvis-btn,
.btn.jarvis-btn {
  border: 0;
  border-radius: 999px;
  color: #fff;
  padding: 0.45rem 0.9rem;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.1;
  box-shadow: 0 6px 14px rgba(2, 6, 23, 0.35);
}

.jarvis-btn .bi {
  font-size: 0.95em;
}

.jarvis-btn-support {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.jarvis-btn-instructions {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.jarvis-btn-danger {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
}

.card.jarvis-card {
  border-radius: 1.1rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(30, 41, 59, 0.78);
  color: var(--jarvis-text);
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.35);
}

.jarvis-topbar {
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(6px);
}

.form-control,
.form-select,
textarea.form-control,
input.form-control {
  background-color: rgba(15, 23, 42, 0.9);
  border-color: var(--jarvis-border);
  color: var(--jarvis-text);
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus,
input.form-control:focus {
  border-color: var(--jarvis-accent);
  box-shadow: 0 0 0 0.2rem rgba(0, 184, 217, 0.2);
  background-color: rgba(15, 23, 42, 0.98);
  color: #fff;
}

.table,
.table th,
.table td {
  color: var(--jarvis-text);
  border-color: rgba(148, 163, 184, 0.2);
}

.badge.jarvis-badge-warning {
  background: rgba(245, 158, 11, 0.24);
  color: #fde68a;
  border: 1px solid rgba(245, 158, 11, 0.45);
}

.jarvis-muted {
  color: var(--jarvis-muted) !important;
}

.jarvis-breadcrumb-nav .breadcrumb {
  --bs-breadcrumb-divider-color: rgba(148, 163, 184, 0.75);
  --bs-breadcrumb-divider: '/';
  margin-bottom: 0;
}

.jarvis-breadcrumb-nav .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(148, 163, 184, 0.75);
}

.jarvis-crumb-link {
  color: #93c5fd;
  text-decoration: none;
  font-weight: 600;
}

.jarvis-crumb-link:hover {
  color: #bfdbfe;
  text-decoration: none;
}

.jarvis-crumb-current {
  color: #e2e8f0;
  font-weight: 700;
}

.map-modal-breadcrumb .breadcrumb-item {
  font-size: 1.05rem;
}

#map-modal .map-modal-shell {
  --jm-shell-scale: 1;
  margin: 6px;
  border: 1px solid rgba(122, 150, 196, 0.35);
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(10, 19, 34, 0.7) 0%, rgba(8, 15, 27, 0.62) 100%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
  transform: scale(var(--jm-shell-scale));
  transform-origin: center top;
}

#map-modal .map-modal-shell-header {
  background: linear-gradient(180deg, rgba(20, 31, 51, 0.96) 0%, rgba(15, 24, 41, 0.94) 100%) !important;
  border-bottom-color: rgba(129, 154, 192, 0.34) !important;
}

#map-modal .map-modal-shell-body {
  min-height: 0;
}

#map-modal .jarvis-breadcrumb-nav .breadcrumb {
  --bs-breadcrumb-divider-color: rgba(166, 187, 220, 0.78);
}

#map-modal .jarvis-breadcrumb-nav .breadcrumb-item,
#map-modal .map-modal-title {
  color: #dbe9ff;
}

#map-modal .jarvis-crumb-link {
  color: #8ec5ff;
}

#map-modal .jarvis-crumb-link:hover {
  color: #b6dcff;
}

/* Standalone JarvisMap must be edge-to-edge with no decorative outer shell frame. */
html.standalone-jarvismap,
html.standalone-jarvismap body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

html.standalone-jarvismap #map-modal {
  inset: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html.standalone-jarvismap #map-modal .map-modal-shell {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
}

html.standalone-jarvismap #map-modal .map-modal-shell-body,
html.standalone-jarvismap #map-modal #map,
html.standalone-jarvismap #map-modal #map .leaflet-container {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Validator page: scale controls/table to stay fully inside viewport */
.validator-page {
  --validator-font: 13px;
  --validator-btn-font: 15px;
  --validator-btn-height: 48px;
  --validator-time-height: 44px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
}

.validator-page .validator-toolbar {
  align-items: center;
  justify-content: flex-start;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

.validator-page .validator-main-actions {
  flex: 0 1 auto;
  min-width: 0;
}

.validator-page #save,
.validator-page #show-map,
.validator-page #apply-time-template,
.validator-page #time-template {
  height: var(--validator-time-height);
  font-size: var(--validator-btn-font);
}

.validator-page #save,
.validator-page #show-map {
  min-width: 120px;
  padding: 0 14px;
}

.validator-page .validator-time-controls {
  flex: 0 1 auto;
  min-width: 0;
  gap: 8px !important;
  max-width: min(100%, 720px);
}

.validator-page .validator-time-controls > label {
  margin-bottom: 0;
  white-space: nowrap;
  font-size: 12px;
}

.validator-page #time-template {
  flex: 0 1 clamp(170px, 22vw, 280px);
  width: clamp(170px, 22vw, 280px);
  min-width: 150px;
  max-width: 100%;
}

.validator-page #apply-time-template {
  flex: 0 0 auto;
  white-space: nowrap;
}

.validator-page .validator-table-shell {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.validator-page #support-chat-widget-container,
.validator-page .support-chat-widget,
.validator-page .support-chat-window,
.validator-page .support-chat-trigger {
  display: none !important;
}

.validator-page #custom-table {
  width: 100% !important;
  min-width: 100% !important;
  table-layout: fixed !important;
  font-size: var(--validator-font) !important;
}

.validator-page #custom-table .th-content {
  padding: 3px 6px !important;
  font-size: var(--validator-font) !important;
}

.validator-page #custom-table th,
.validator-page #custom-table td {
  font-size: var(--validator-font) !important;
}

.validator-page #custom-table td {
  padding: 1px 3px !important;
  height: 22px !important;
  line-height: 18px !important;
}

@media (max-width: 1360px) {
  .validator-page {
    --validator-font: 12px;
    --validator-btn-font: 14px;
    --validator-time-height: 40px;
  }

  .validator-page #save,
  .validator-page #show-map {
    min-width: 108px;
    padding: 0 10px;
  }
}

@media (max-width: 1180px) {
  .validator-page {
    --validator-font: 11px;
    --validator-btn-font: 13px;
    --validator-time-height: 36px;
  }

  .validator-page .validator-toolbar {
    gap: 6px !important;
  }

  .validator-page .validator-time-controls {
    gap: 6px !important;
  }

  .validator-page .validator-time-controls > label {
    font-size: 11px;
  }

  .validator-page #save,
  .validator-page #show-map {
    min-width: 96px;
    padding: 0 8px;
  }

  .validator-page #apply-time-template {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Bootstrap Sidebar Skin for map panel */
.map-sidebar-container {
  backdrop-filter: blur(2px);
}

.map-sidebar-tabs {
  width: 64px;
  background: rgba(30, 41, 59, 0.96);
  border-color: rgba(148, 163, 184, 0.22) !important;
}

.map-sidebar-panel {
  width: 320px;
  max-width: calc(100vw - 88px);
  background: rgba(30, 41, 59, 0.97);
  border-color: rgba(148, 163, 184, 0.22) !important;
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.46);
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.map-sidebar-header {
  color: var(--jarvis-text);
  background: rgba(15, 23, 42, 0.5);
}

.sidebar-tab-btn {
  border-left: 3px solid transparent !important;
  color: rgba(203, 213, 225, 0.72) !important;
}

.sidebar-tab-btn:hover {
  color: #e2e8f0 !important;
  background: rgba(71, 85, 105, 0.24);
}

.sidebar-tab-btn.active {
  color: #67e8f9 !important;
  border-left-color: #22d3ee !important;
  background: rgba(34, 211, 238, 0.08);
}

.sidebar-tab-icon {
  font-size: 20px;
  line-height: 1;
}

.map-sidebar-body {
  color: var(--jarvis-text);
  min-height: 0;
  overflow-y: auto;
  overflow-x: visible;
}

#map-modal #sidebar-content-body.sidebar-pane {
  display: flex;
  flex-direction: column;
}

#map-modal #sidebar-content-body.sidebar-pane > .d-flex.flex-column.h-100 {
  flex: 1 1 auto;
  min-height: 0;
}

.sidebar-pane {
  color: var(--jarvis-text);
  padding: 0.5rem;
  box-sizing: border-box;
}

.sidebar-pane-library > .d-flex.flex-column.h-100 > .d-flex.gap-2.mb-2 {
  padding-inline: 2px;
}

.sidebar-pane .list-group-item {
  background: rgba(15, 23, 42, 0.35);
  border-color: rgba(148, 163, 184, 0.2) !important;
}

.sidebar-pane .list-group-item:hover {
  background: rgba(51, 65, 85, 0.52);
}

.sidebar-pane .btn-outline-secondary,
.sidebar-pane .btn-outline-info,
.sidebar-pane .btn-outline-success,
.sidebar-pane .btn-outline-danger {
  --bs-btn-color: #cbd5e1;
  --bs-btn-border-color: rgba(148, 163, 184, 0.35);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(71, 85, 105, 0.45);
  --bs-btn-hover-border-color: rgba(148, 163, 184, 0.6);
}

.sidebar-pane .form-control,
.sidebar-pane .form-select,
.sidebar-pane textarea.form-control {
  background-color: rgba(15, 23, 42, 0.92) !important;
  border-color: rgba(100, 116, 139, 0.5) !important;
  color: #e2e8f0 !important;
}

.sidebar-pane .form-control::placeholder,
.sidebar-pane textarea.form-control::placeholder {
  color: rgba(203, 213, 225, 0.74) !important;
}

.sidebar-pane .form-control:focus,
.sidebar-pane .form-select:focus,
.sidebar-pane textarea.form-control:focus {
  border-color: #22d3ee !important;
  box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.18) !important;
}

.sidebar-pane-library [data-lib-path] {
  border-radius: 0.375rem;
  transition: background-color 0.15s ease;
}

.sidebar-pane-library [data-lib-path]:hover {
  background-color: rgba(71, 85, 105, 0.3);
}

#map-modal .sidebar-pane-library .jm-lib-row-actions {
  position: relative;
  margin-left: var(--jm-sidebar-tree-action-ml, 4px);
  flex-shrink: 0;
}

#map-modal .sidebar-pane-library .jm-lib-row-menu-toggle {
  width: var(--jm-sidebar-tree-action-minw, 20px);
  min-width: var(--jm-sidebar-tree-action-minw, 20px);
  height: var(--jm-sidebar-tree-action-h, 18px);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: var(--jm-sidebar-tree-action-font, 0.72rem);
}

#map-modal .sidebar-pane-library .jm-lib-row-menu {
  position: absolute;
  left: calc(100% + 6px);
  right: auto;
  top: calc(100% + 4px);
  z-index: 12;
  display: none;
  min-width: 146px;
  padding: 6px;
  border-radius: 8px;
  border: 1px solid rgba(100, 116, 139, 0.45);
  background: rgba(15, 23, 42, 0.96);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px);
}

#map-modal .sidebar-pane-library .jm-lib-row-menu.is-open {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#map-modal .sidebar-pane-library .jm-lib-row-menu-item {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  height: 24px;
  padding: 0 8px;
  line-height: 1;
  font-size: calc(0.76rem * var(--jm-scale, 1));
}

#map-modal .sidebar-pane-library .jm-lib-row-menu-item i {
  font-size: calc(0.72rem * var(--jm-scale, 1));
}

#map-modal .sidebar-pane-mbtiles .jm-mb-row-actions {
  position: relative;
  margin-left: var(--jm-sidebar-tree-action-ml, 4px);
  flex-shrink: 0;
}

#map-modal .sidebar-pane-mbtiles .jm-mb-row-menu-toggle {
  width: var(--jm-sidebar-tree-action-minw, 20px);
  min-width: var(--jm-sidebar-tree-action-minw, 20px);
  height: var(--jm-sidebar-tree-action-h, 18px);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: var(--jm-sidebar-tree-action-font, 0.72rem);
}

#map-modal .sidebar-pane-mbtiles .jm-mb-row-menu {
  position: absolute;
  left: calc(100% + 6px);
  right: auto;
  top: calc(100% + 4px);
  z-index: 12;
  display: none;
  min-width: 146px;
  padding: 6px;
  border-radius: 8px;
  border: 1px solid rgba(100, 116, 139, 0.45);
  background: rgba(15, 23, 42, 0.96);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px);
}

#map-modal .sidebar-pane-mbtiles .jm-mb-row-menu.is-open {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#map-modal .sidebar-pane-mbtiles .jm-mb-row-menu-item {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  height: 24px;
  padding: 0 8px;
  line-height: 1;
  font-size: calc(0.76rem * var(--jm-scale, 1));
}

#map-modal .sidebar-pane-mbtiles .jm-mb-row-menu-item i {
  font-size: calc(0.72rem * var(--jm-scale, 1));
}

.map-screenshot-zone-flash {
  position: fixed;
  z-index: 2147483000;
  border: 2px solid rgba(233, 240, 255, 0.95);
  box-shadow: inset 0 0 0 1px rgba(130, 176, 255, 0.42), 0 0 0 9999px rgba(7, 18, 34, 0.08);
  border-radius: 2px;
  pointer-events: none;
  opacity: 0;
  animation: mapScreenshotZoneFlash 0.6s ease-out;
}

.map-screenshot-zone-flash.is-info {
  border-color: rgba(233, 240, 255, 0.95);
  box-shadow: inset 0 0 0 1px rgba(130, 176, 255, 0.42), 0 0 0 9999px rgba(7, 18, 34, 0.08);
  animation: mapScreenshotZoneFlashInfo 0.8s ease-out;
}

.map-screenshot-zone-flash.is-success {
  border-color: rgba(76, 215, 123, 0.96);
  box-shadow: inset 0 0 0 1px rgba(30, 180, 95, 0.65), 0 0 0 9999px rgba(7, 34, 18, 0.12);
  animation: mapScreenshotZoneFlashSuccess 0.82s ease-out;
}

.map-screenshot-zone-flash.is-error {
  border-color: rgba(236, 106, 106, 0.96);
  box-shadow: inset 0 0 0 1px rgba(236, 106, 106, 0.55), 0 0 0 9999px rgba(48, 10, 16, 0.16);
  animation: mapScreenshotZoneFlashError 0.82s ease-out;
}

.process-monitor-dialog {
  max-width: 760px;
}

.mbtiles-convert-options-dialog {
  max-width: 420px;
}

.signal-screenshot-dialog {
  max-width: 760px;
}

.signal-screenshot-dialog .modal-content {
  max-height: calc(100vh - 0.6rem);
}

.signal-screenshot-dialog .modal-header,
.signal-screenshot-dialog .modal-footer {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

.signal-screenshot-dialog .modal-body {
  padding: 0.3rem 0.42rem;
}

.signal-bot-manager-dialog {
  max-width: 920px;
}

.signal-captcha-dialog {
  max-width: 760px;
}

.signal-captcha-dialog .modal-content {
  max-height: calc(100vh - 1.2rem);
}

.signal-captcha-dialog .modal-body {
  padding: 0.55rem;
}

.signal-captcha-iframe {
  width: 100%;
  height: 68vh;
  min-height: 420px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 0.5rem;
  background: #fff;
}

.signal-bot-manager-dialog .modal-content {
  max-height: calc(100vh - 0.9rem);
}

.signal-bot-manager-dialog .modal-header,
.signal-bot-manager-dialog .modal-footer {
  padding-top: 0.26rem;
  padding-bottom: 0.26rem;
}

.signal-bot-manager-dialog .modal-body {
  padding: 0.28rem 0.42rem;
  font-size: 0.68rem;
  max-height: calc(100vh - 98px);
  overflow-y: auto;
}

.signal-bot-manager-dialog .modal-title {
  font-size: 0.96rem;
}

.signal-bot-manager-dialog .form-label {
  font-size: 0.64rem;
  margin-bottom: 0.1rem;
}

.signal-bot-manager-dialog .form-text {
  font-size: 0.62rem;
  line-height: 1.08;
}

.signal-bot-manager-dialog .form-control,
.signal-bot-manager-dialog .form-select,
.signal-bot-manager-dialog .btn {
  font-size: 0.68rem;
}

.signal-bot-manager-dialog .btn,
.signal-bot-manager-dialog .btn.btn-sm {
  padding: 0.14rem 0.3rem;
}

.signal-bot-manager-dialog .form-control,
.signal-bot-manager-dialog .form-select {
  min-height: calc(1.1em + 0.22rem + 2px);
  padding-top: 0.08rem;
  padding-bottom: 0.08rem;
}

.signal-bot-mode-switch {
  display: flex;
  gap: 0.5rem;
}

.signal-bot-mode-switch .btn {
  min-width: 135px;
}

.signal-bot-mode-panel[hidden] {
  display: none !important;
}

.signal-bot-setup-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  grid-template-areas:
    "register members"
    "create groups";
  gap: 0.22rem;
  align-items: start;
}

.signal-bot-card-guide { grid-area: guide; }
.signal-bot-card-create { grid-area: create; }
.signal-bot-card-register { grid-area: register; }
.signal-bot-card-groups { grid-area: groups; }
.signal-bot-card-members { grid-area: members; }

.signal-bot-card-groups {
  min-height: 248px;
}

.signal-bot-section {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 0.55rem;
  padding: 0.24rem;
  background: rgba(15, 23, 42, 0.34);
}

.signal-bot-section-title {
  font-size: 0.64rem;
  font-weight: 600;
  color: #e2ebff;
  margin-bottom: 0.1rem;
}

.signal-bot-inline-guide {
  border: 1px dashed rgba(148, 163, 184, 0.28);
  border-radius: 0.45rem;
  padding: 0.2rem 0.24rem;
  background: rgba(15, 23, 42, 0.25);
}

.signal-bot-code-wrap {
  min-width: 180px;
}

.signal-bot-list {
  min-height: 38px;
  max-height: 72px;
  overflow: auto;
  gap: 0.22rem;
}

.signal-bot-card-groups .signal-bot-list {
  min-height: 190px;
  max-height: 320px;
}

.signal-bot-list .list-group-item {
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.24);
  color: #dbe9ff;
  padding: 0.26rem 0.34rem;
  font-size: 0.72rem;
}

.signal-bot-templates-list .signal-bot-template-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.6rem;
}

.signal-bot-template-main {
  min-width: 0;
  flex: 1;
}

.signal-bot-template-title {
  font-weight: 600;
  color: #e2ebff;
}

.signal-bot-template-key {
  display: inline-block;
  font-size: 0.75rem;
  color: rgba(148, 163, 184, 0.95);
  margin-left: 0.35rem;
}

.signal-bot-template-text {
  margin-top: 0.25rem;
  color: rgba(219, 233, 255, 0.92);
  white-space: pre-wrap;
  word-break: break-word;
}

.signal-bot-template-actions {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.signal-bot-guide-line {
  color: #dbe9ff;
  font-size: 0.6rem;
}

.signal-bot-guide-steps {
  margin: 0;
  padding-left: 0.86rem;
  color: rgba(219, 233, 255, 0.95);
  font-size: 0.6rem;
}

.signal-bot-guide-steps li {
  margin-bottom: 0.05rem;
}

.signal-bot-link-qr-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.signal-bot-link-qr-image {
  width: min(132px, 100%);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 0.55rem;
  background: #fff;
  padding: 0.22rem;
}

@media (max-width: 991.98px) {
  .signal-bot-manager-dialog {
    max-width: 760px;
  }

  .signal-captcha-dialog {
    max-width: 96vw;
  }

  .signal-captcha-iframe {
    height: 62vh;
    min-height: 360px;
  }

  .signal-bot-manager-dialog .modal-body {
    max-height: 62vh;
    overflow-y: auto;
  }

  .signal-bot-setup-grid {
    display: block;
  }

  .signal-bot-list {
    max-height: 170px;
  }

  .signal-bot-card-groups {
    min-height: 0;
  }

  .signal-bot-card-groups .signal-bot-list {
    min-height: 170px;
    max-height: 260px;
  }
}

#signal-screenshot-user-hint {
  color: rgba(203, 213, 225, 0.9);
  font-size: 0.76rem;
}

#signal-screenshot-validation {
  font-size: 0.78rem;
}

#signal-screenshot-modal .modal-title {
  font-size: 0.92rem;
}

#signal-message-history-modal .modal-title {
  font-size: 0.84rem;
}

#signal-screenshot-modal .modal-dialog {
  max-width: 1280px;
  width: min(97vw, 1280px);
}

#signal-message-history-modal .modal-dialog {
  max-width: 820px;
  width: min(94vw, 820px);
}

#signal-message-history-modal .modal-content {
  max-height: calc(100vh - 1.4rem);
}

#signal-message-history-modal .modal-header,
#signal-message-history-modal .modal-footer {
  padding-top: 0.22rem;
  padding-bottom: 0.22rem;
}

#signal-message-history-modal .modal-body {
  padding: 0.28rem 0.38rem;
}

#signal-message-history-modal .modal-body .small,
#signal-message-history-modal .modal-body .btn.btn-sm,
#signal-message-history-modal .modal-body .alert {
  font-size: 0.72rem;
}

#signal-screenshot-modal .modal-content {
  position: relative;
}

.signal-screenshot-send-progress-overlay {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 14, 29, 0.52);
  backdrop-filter: blur(2px);
}

.signal-screenshot-send-progress-card {
  min-width: 180px;
  padding: 14px 18px 12px;
  border-radius: 16px;
  border: 1px solid rgba(118, 221, 255, 0.55);
  background: radial-gradient(120% 120% at 50% 0%, rgba(35, 70, 116, 0.9) 0%, rgba(8, 20, 42, 0.95) 78%);
  box-shadow: 0 10px 34px rgba(0, 9, 24, 0.55), 0 0 20px rgba(79, 215, 255, 0.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.signal-screenshot-send-progress-ring {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  position: relative;
  background:
    radial-gradient(circle at center, rgba(8, 20, 42, 0.95) 53%, transparent 54%),
    conic-gradient(from 0deg, rgba(110, 236, 255, 0.1), rgba(90, 230, 255, 0.96), rgba(69, 191, 255, 0.22));
  animation: signal-send-ring-spin 1.15s linear infinite;
  box-shadow: 0 0 20px rgba(88, 227, 255, 0.38);
}

.signal-screenshot-send-progress-ring::after {
  content: '';
  position: absolute;
  top: 7px;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #9af4ff;
  box-shadow: 0 0 10px rgba(120, 240, 255, 0.95);
}

.signal-screenshot-send-progress-label {
  color: #dcf8ff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 8px rgba(46, 205, 245, 0.25);
}

#signal-screenshot-modal.is-sending .modal-footer .btn {
  pointer-events: none;
}

@keyframes signal-send-ring-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.signal-screenshot-mode-switch .btn {
  font-size: 0.74rem;
  padding: 0.2rem 0.48rem;
}

#signal-screenshot-mode-history.btn.btn-primary {
  border-color: rgba(59, 130, 246, 0.85);
}

.signal-screenshot-mode-switch .btn.btn-primary {
  border-color: rgba(59, 130, 246, 0.85);
}

#signal-screenshot-send-panel .form-label,
#signal-screenshot-send-panel .form-text,
#signal-screenshot-send-panel .btn,
#signal-screenshot-send-panel .form-control,
#signal-screenshot-send-panel .form-select {
  font-size: 0.78rem;
}

#signal-screenshot-send-panel .form-text {
  line-height: 1.2;
}

#signal-screenshot-message {
  min-height: 170px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  box-sizing: border-box;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.78rem;
  line-height: 1.32;
  padding: 0.46rem 0.52rem;
}

.signal-screenshot-message-editor {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: stretch;
}

.signal-screenshot-message-lines {
  min-height: 170px;
  max-height: 260px;
  overflow: hidden;
  white-space: pre;
  padding: 0.46rem 0.42rem;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-right: 0;
  border-top-left-radius: 0.32rem;
  border-bottom-left-radius: 0.32rem;
  background: rgba(15, 23, 42, 0.55);
  color: rgba(148, 163, 184, 0.96);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.78rem;
  line-height: 1.32;
  text-align: right;
  user-select: none;
}

.signal-screenshot-send-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.75fr);
  gap: 0.5rem;
}

.signal-screenshot-send-main,
.signal-screenshot-send-side {
  min-width: 0;
}

.signal-screenshot-send-side {
  border-left: 1px solid rgba(148, 163, 184, 0.28);
  padding-left: 0.5rem;
}

.signal-screenshot-groups-list {
  max-height: 170px;
  overflow-y: auto;
  overflow-x: hidden;
}

.signal-screenshot-group-item {
  padding: 0.26rem 0.42rem;
  font-size: 0.72rem;
  line-height: 1.15;
  width: 100%;
}

.signal-screenshot-group-meta {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  flex: 0 0 auto;
}

.signal-screenshot-group-inline-check {
  display: inline-flex;
  align-items: center;
  gap: 0.16rem;
  margin: 0;
  font-size: 0.66rem;
  color: #d4e2f9;
}

.signal-screenshot-group-inline-check .form-check-input {
  margin: 0;
}

.signal-screenshot-group-item .form-check-input {
  width: 0.82rem;
  height: 0.82rem;
  margin-top: 0.02rem;
}

.signal-screenshot-group-name {
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#signal-screenshot-templates-panel .form-label,
#signal-screenshot-templates-panel .form-text {
  font-size: 0.72rem;
}

#signal-screenshot-templates-panel .form-control,
#signal-screenshot-templates-panel .form-select,
#signal-screenshot-templates-panel .btn {
  font-size: 0.74rem;
}

#signal-screenshot-templates-panel .mb-2 {
  margin-bottom: 0.32rem !important;
}

#signal-screenshot-templates-panel .form-text {
  line-height: 1.12;
}

.signal-screenshot-templates-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.65fr);
  gap: 0.5rem;
  align-items: stretch;
}

.signal-screenshot-templates-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 0.45rem;
  padding: 0.45rem;
  background: rgba(15, 23, 42, 0.2);
  min-height: 100%;
}

.signal-screenshot-templates-col-right {
  min-height: 100%;
}

#signal-screenshot-template-assign-btn {
  border-color: #f59e0b;
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
  color: #fff7ed;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 14px rgba(217, 119, 6, 0.28);
}

#signal-screenshot-template-assign-btn:hover,
#signal-screenshot-template-assign-btn:focus {
  border-color: #fbbf24;
  background: linear-gradient(180deg, #fbbf24 0%, #ea580c 100%);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(234, 88, 12, 0.35);
}

#signal-screenshot-template-assign-btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.35), 0 8px 18px rgba(234, 88, 12, 0.35);
}

#signal-screenshot-template-assign-btn:disabled {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(217, 119, 6, 0.35);
  color: rgba(255, 247, 237, 0.72);
  box-shadow: none;
}

.signal-screenshot-preview-wrap {
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 0.45rem;
  padding: 0.45rem;
  background: rgba(15, 23, 42, 0.24);
  min-height: 320px;
}

.signal-screenshot-preview-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 520px;
  overflow-y: auto;
}

.signal-screenshot-preview-item {
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 0.4rem;
  padding: 0.3rem 0.35rem;
  background: rgba(15, 23, 42, 0.35);
}

.signal-screenshot-preview-item-title {
  margin-bottom: 0.22rem;
  font-size: 0.74rem;
  color: #dbe9ff;
}

.signal-screenshot-preview-item .form-control {
  min-height: 120px;
}

.signal-screenshot-preview-text {
  margin: 0.3rem 0 0;
  font-size: 0.72rem;
  line-height: 1.2;
  color: #d6e2f5;
  white-space: pre-wrap;
  word-break: break-word;
}

.signal-screenshot-history-list {
  max-height: 58vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.34rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 0.4rem;
  padding: 0.3rem;
  background: rgba(15, 23, 42, 0.24);
}

.signal-screenshot-history-group {
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 0.4rem;
  background: rgba(15, 23, 42, 0.32);
}

.signal-screenshot-history-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.26rem 0.38rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  font-size: 0.68rem;
  color: #dbe9ff;
}

.signal-screenshot-history-group-body {
  display: flex;
  flex-direction: column;
  gap: 0.26rem;
  padding: 0.28rem;
}

.signal-screenshot-history-item {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 0.34rem;
  padding: 0.24rem;
  background: rgba(7, 15, 30, 0.45);
}

.signal-screenshot-history-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.24rem;
  margin-bottom: 0.16rem;
  font-size: 0.64rem;
  color: #cfe2ff;
}

.signal-screenshot-history-item-text {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.68rem;
  line-height: 1.16;
  color: #dbe9ff;
  background: rgba(2, 8, 20, 0.34);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 0.28rem;
  padding: 0.24rem;
}

.signal-screenshot-history-item-actions {
  display: flex;
  gap: 0.2rem;
}

.signal-screenshot-history-item-actions .btn {
  font-size: 0.62rem;
  padding: 0.12rem 0.26rem;
}

@media (max-width: 991.98px) {
  .signal-screenshot-send-layout {
    grid-template-columns: 1fr;
  }

  .signal-screenshot-send-side {
    border-left: 0;
    border-top: 1px solid rgba(148, 163, 184, 0.28);
    padding-left: 0;
    padding-top: 0.45rem;
  }

  .signal-screenshot-templates-layout {
    grid-template-columns: 1fr;
  }
}

.signal-screenshot-template-group-bind-list {
  max-height: none;
  min-height: 120px;
  flex: 1 1 auto;
  overflow-y: auto;
}

.signal-screenshot-template-group-bind-list .list-group-item {
  padding: 0.24rem 0.42rem;
}

.signal-screenshot-template-matrix {
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 0.45rem;
  padding: 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.signal-screenshot-template-matrix-head,
.signal-screenshot-template-matrix-row {
  display: grid;
  grid-template-columns: minmax(92px, 0.8fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.8fr);
  gap: 0.35rem;
  align-items: center;
}

.signal-screenshot-template-matrix-head {
  font-size: 0.64rem;
  color: rgba(203, 213, 225, 0.82);
}

.signal-screenshot-template-matrix-row-simple {
  grid-template-columns: 1fr;
}

.signal-screenshot-template-matrix-row .form-check {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.signal-screenshot-template-matrix-row .form-check-label {
  font-size: 0.7rem;
}

.signal-screenshot-template-value-cell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.3rem;
  align-items: center;
}

.signal-screenshot-template-matrix-extra {
  display: flex;
  flex-direction: column;
  gap: 0.24rem;
  margin: -0.08rem 0 0.08rem;
}

.signal-screenshot-template-extra-rule {
  display: grid;
  grid-template-columns: minmax(92px, 0.8fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.8fr);
  gap: 0.35rem;
  align-items: center;
}

.signal-screenshot-template-extra-rule .signal-screenshot-template-extra-spacer {
  height: 1px;
}

.signal-screenshot-template-extra-value {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.3rem;
  align-items: center;
}

.signal-screenshot-template-matrix-row .form-control,
.signal-screenshot-template-extra-rule .form-control {
  min-width: 0;
  min-height: calc(1.05em + 0.18rem + 2px);
  padding-top: 0.08rem;
  padding-bottom: 0.08rem;
}

.signal-screenshot-template-matrix .btn,
.signal-screenshot-template-extra-rule .btn {
  white-space: nowrap;
  padding: 0.1rem 0.26rem;
}

@media (max-width: 767.98px) {
  .signal-screenshot-template-matrix-row {
    grid-template-columns: 1fr;
  }

  .signal-screenshot-template-extra-rule {
    grid-template-columns: 1fr;
  }

  .signal-screenshot-template-matrix-head {
    display: none !important;
  }
}

#signal-screenshot-template-list {
  max-height: 84px;
  overflow-y: auto;
}

.process-monitor-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 120px;
}

.process-monitor-item {
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.24);
}

.process-monitor-item .process-title {
  font-weight: 600;
  color: #dbe9ff;
}

.process-monitor-item .process-meta {
  color: rgba(203, 213, 225, 0.82);
  font-size: 0.82rem;
}

.process-monitor-item .process-error {
  color: #fca5a5;
  font-size: 0.82rem;
}

.process-monitor-empty {
  border: 1px dashed rgba(148, 163, 184, 0.32);
  border-radius: 0.5rem;
  padding: 0.8rem;
  color: rgba(203, 213, 225, 0.82);
  text-align: center;
}

.map-screenshot-toast-host {
  position: fixed;
  right: 16px;
  bottom: 62px;
  z-index: 2147483010;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
  max-width: min(94vw, 440px);
}

.map-screenshot-toast {
  pointer-events: none;
  white-space: pre-line;
  border-radius: 10px;
  border: 1px solid rgba(108, 138, 191, 0.55);
  background: rgba(9, 25, 52, 0.94);
  color: #e6f0ff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(3px);
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.35;
  max-width: 100%;
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.map-screenshot-toast.is-info {
  border-color: rgba(94, 166, 227, 0.6);
}

.map-screenshot-toast.is-success {
  border-color: rgba(46, 204, 113, 0.62);
}

.map-screenshot-toast.is-warn {
  border-color: rgba(245, 173, 64, 0.65);
}

.map-screenshot-toast.is-error {
  border-color: rgba(236, 106, 106, 0.68);
}

.map-screenshot-toast.is-leaving {
  opacity: 0;
  transform: translateY(6px);
}

.map-screenshot-status-banner {
  position: fixed;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  z-index: 2147483030;
  pointer-events: none;
  border-radius: 11px;
  border: 1px solid rgba(108, 138, 191, 0.55);
  background: rgba(9, 25, 52, 0.94);
  color: #e6f0ff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(3px);
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  opacity: 1;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.map-screenshot-status-banner.is-info {
  border-color: rgba(94, 166, 227, 0.68);
}

.map-screenshot-status-banner.is-success {
  border-color: rgba(46, 204, 113, 0.72);
}

.map-screenshot-status-banner.is-error {
  border-color: rgba(236, 106, 106, 0.75);
}

.map-screenshot-status-banner.is-leaving {
  opacity: 0;
  transform: translateX(-50%) translateY(6px);
}

.map-screenshot-permission-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483020;
  background: rgba(3, 10, 22, 0.56);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

.map-screenshot-permission-dialog {
  width: min(94vw, 460px);
  border: 1px solid rgba(103, 146, 214, 0.52);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(12, 28, 56, 0.98) 0%, rgba(9, 22, 45, 0.98) 100%);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.42);
  color: #e2eeff;
  padding: 14px;
}

.map-screenshot-permission-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
}

.map-screenshot-permission-text {
  font-size: 12px;
  line-height: 1.35;
  color: rgba(219, 234, 254, 0.95);
  margin-bottom: 7px;
}

.map-screenshot-permission-status {
  margin-top: 6px;
  border: 1px solid rgba(103, 146, 214, 0.4);
  border-radius: 8px;
  padding: 7px 8px;
  font-size: 12px;
  color: #c8ddff;
  background: rgba(15, 34, 69, 0.62);
}

.map-screenshot-permission-actions {
  margin-top: 11px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

@keyframes mapScreenshotZoneFlash {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes mapScreenshotZoneFlashInfo {
  0% { opacity: 0; }
  18% { opacity: 1; }
  48% { opacity: 0.35; }
  70% { opacity: 0.95; }
  100% { opacity: 0; }
}

@keyframes mapScreenshotZoneFlashSuccess {
  0% { opacity: 0; }
  16% { opacity: 1; }
  42% { opacity: 0.28; }
  66% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes mapScreenshotZoneFlashError {
  0% { opacity: 0; }
  18% { opacity: 1; }
  44% { opacity: 0.22; }
  68% { opacity: 0.95; }
  100% { opacity: 0; }
}

.sidebar-pane-add-point .form-label {
  color: #94a3b8;
}

.sidebar-pane-mbtiles #mbtiles-add-btn,
.sidebar-pane-mbtiles #mbtiles-folder-btn {
  font-weight: 600;
  min-height: 32px;
}

/* JarvisMap responsive scale system */
#map-modal {
  --jm-scale: 1;
  --jm-sidebar-tab-w: 64px;
  --jm-sidebar-panel-w: 320px;
  --jm-sidebar-content-font: calc(13px * var(--jm-scale));
  --jm-sidebar-content-font-sm: calc(12px * var(--jm-scale));
  --jm-sidebar-content-font-xs: calc(11px * var(--jm-scale));
  --jm-sidebar-icon-size: calc(16px * var(--jm-scale));
  --jm-sidebar-btn-size: calc(28px * var(--jm-scale));
  --jm-sidebar-tree-indent: calc(15px * var(--jm-scale));
  --jm-sidebar-tree-gap: calc(4px * var(--jm-scale));
  --jm-sidebar-tree-row-py: calc(1px * var(--jm-scale));
  --jm-sidebar-tree-action-h: calc(18px * var(--jm-scale));
  --jm-sidebar-tree-action-minw: calc(20px * var(--jm-scale));
  --jm-sidebar-tree-action-gap: calc(2px * var(--jm-scale));
  --jm-sidebar-tree-action-ml: calc(2px * var(--jm-scale));
  --jm-sidebar-tree-action-px: calc(4px * var(--jm-scale));
  --jm-sidebar-tree-action-font: calc(0.72rem * var(--jm-scale));
}

#map-modal .map-modal-breadcrumb .breadcrumb-item {
  font-size: calc(1.02rem * var(--jm-scale));
}

#map-modal .map-sidebar-tabs {
  width: var(--jm-sidebar-tab-w);
}

#map-modal .map-sidebar-panel {
  width: min(var(--jm-sidebar-panel-w), calc(100vw - var(--jm-sidebar-tab-w) - 12px));
  max-width: calc(100vw - var(--jm-sidebar-tab-w) - 12px);
}

#map-modal .sidebar-tab-btn {
  min-height: calc(44px * var(--jm-scale));
  padding-top: calc(0.75rem * var(--jm-scale)) !important;
  padding-bottom: calc(0.75rem * var(--jm-scale)) !important;
}

#map-modal .sidebar-tab-icon {
  font-size: calc(20px * var(--jm-scale));
}

#map-modal .map-sidebar-header {
  padding-top: calc(0.5rem * var(--jm-scale)) !important;
  padding-bottom: calc(0.5rem * var(--jm-scale)) !important;
  padding-left: calc(0.75rem * var(--jm-scale)) !important;
  padding-right: calc(0.75rem * var(--jm-scale)) !important;
}

#map-modal #sidebar-active-title {
  font-size: calc(0.93rem * var(--jm-scale));
}

#map-modal #sidebar-close-btn {
  min-height: calc(26px * var(--jm-scale));
  min-width: calc(30px * var(--jm-scale));
  line-height: 1;
  font-size: calc(0.78rem * var(--jm-scale));
}

#map-modal .sidebar-pane {
  padding: calc(0.5rem * var(--jm-scale));
}

#map-modal .sidebar-pane .btn,
#map-modal .sidebar-pane .form-control,
#map-modal .sidebar-pane .form-select,
#map-modal .sidebar-pane textarea.form-control {
  font-size: calc(0.86rem * var(--jm-scale));
}

#map-modal .sidebar-pane .btn {
  min-height: calc(31px * var(--jm-scale));
}

#map-modal .sidebar-pane-library > .d-flex.flex-column.h-100 > .d-flex.gap-2.mb-2 {
  gap: calc(0.5rem * var(--jm-scale)) !important;
}

@media (max-width: 980px) {
  #map-modal {
    --jm-scale: 0.94;
    --jm-sidebar-tab-w: 56px;
    --jm-sidebar-panel-w: 300px;
  }
}

/* Inline-style migration helpers */
.jm-layout-shell {
  max-width: 100%;
  margin: 0;
  height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
}

.jm-min-w-200 {
  min-width: 200px;
}

.jm-toolbar-merged {
  margin-top: -10px;
  border-top: none !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  background: var(--bg-app);
  padding: 0 15px 15px 15px;
  box-shadow: none;
}

.jm-content-stack {
  min-height: 0;
  gap: 20px;
  padding-bottom: 20px;
}

.jm-selection-marquee {
  position: absolute;
  border: 1px solid var(--primary);
  background-color: rgba(59, 130, 246, 0.2);
  z-index: 9999;
  display: none;
  pointer-events: none;
}

.jm-grid-folders {
  align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.jm-grid-points {
  align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 15px;
}

.jm-z-2000 {
  z-index: 2000;
}

.jm-z-3000 {
  z-index: 3000;
}

.jm-z-max {
  z-index: 2147483647;
}

.jm-z-3001 {
  z-index: 3001;
}

.jm-z-999999 {
  z-index: 999999;
}

.jm-z-2100 {
  z-index: 2100;
}

.jm-z-99999 {
  z-index: 99999;
}

.jm-z-100000 {
  z-index: 100000;
}

.jm-z-100005 {
  z-index: 100005;
}

.jm-w-auto {
  width: auto;
}

.jm-w-250 {
  width: 250px;
}

.jm-w-60 {
  width: 60px;
}

.jm-overflow-hidden {
  overflow: hidden;
}

.jm-overflow-y-auto {
  overflow-y: auto;
}

.jm-overflow-x-hidden {
  overflow-x: hidden;
}

.jm-minh-200 {
  min-height: 200px;
}

.jm-minh-150 {
  min-height: 150px;
}

.jm-maxh-100 {
  max-height: 100px;
}

.jm-minw-320 {
  min-width: 320px;
}

.jm-minw-0 {
  min-width: 0;
}

.jm-gap-8 {
  gap: 8px;
}

.jm-pb-40 {
  padding-bottom: 40px;
}

.jm-grid-auto-205 {
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 6px;
  align-items: start;
  min-width: 0;
}

.jm-map-sidebar-wrap {
  height: calc(100% - 26px);
  width: auto;
}

.jm-map-sidebar-tabs {
  width: 60px;
  background: var(--bg-panel);
}

.jm-map-sidebar-panel {
  width: 250px;
  background: var(--bg-panel);
  overflow-y: auto;
  height: 100%;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
}

.jm-text-success {
  color: var(--success);
}

.jm-overlay-50 {
  background: rgba(0, 0, 0, 0.5);
}

.jm-overlay-60 {
  background: rgba(0, 0, 0, 0.6);
}

.jm-overlay-80 {
  background: rgba(0, 0, 0, 0.8);
}

.jm-overlay-blur {
  backdrop-filter: blur(2px);
}

.jm-modal-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  padding: 20px;
}

.jm-modal-panel-lg {
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.jm-modal-panel-overflow-visible {
  overflow: visible;
}

.jm-panel-w-300 {
  width: min(92vw, 300px);
}

.jm-panel-w-320 {
  width: min(92vw, 320px);
}

.jm-panel-w-350 {
  width: min(92vw, 350px);
}

.jm-panel-w-400 {
  width: min(92vw, 400px);
}

.jm-panel-w-450 {
  width: min(92vw, 450px);
}

.jm-panel-w-500 {
  width: min(92vw, 500px);
}

.jm-panel-w-600 {
  width: min(92vw, 600px);
}

.jm-panel-w-28rem {
  width: min(92vw, 28rem);
}

.jm-panel-w-32rem {
  width: min(92vw, 32rem);
}

.jm-panel-w-40rem {
  width: min(92vw, 40rem);
}

.jm-modal-maxh-70 {
  max-height: 70vh;
}

.jm-modal-maxh-80 {
  max-height: 80vh;
}

.jm-modal-maxh-90 {
  max-height: 90vh;
}

.jm-border-var {
  border-color: var(--border) !important;
}

.jm-sidc-preview-30 {
  width: 30px;
  height: 30px;
}

.jm-sidc-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 40px;
  z-index: 99999;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-panel);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  padding: 0;
  font-size: 12px;
}

.jm-h-8 {
  height: 8px;
}

.jm-progress-card {
  background: var(--bg-panel);
  padding: 25px;
  border-radius: 8px;
  border: 1px solid var(--border);
  width: 320px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.jm-table-border {
  border-color: var(--border) !important;
}

.jm-hidden-default {
  display: none;
}

.jm-body-reset {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

.jm-page-shell {
  width: 100vw;
  max-width: none;
  margin: 0;
  padding: 12px 16px 16px;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  box-sizing: border-box;
}

.jm-toolbar-panel {
  background: var(--bg-panel);
  padding: 10px 12px;
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  min-width: 0;
  overflow-x: auto;
}

.jm-grid-stack {
  gap: 12px;
  padding-bottom: 20px;
  min-height: 0;
}

.jm-toggle-pill {
  background: var(--bg-input);
  padding: 2px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  width: 300px;
}

.jm-sidc-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  margin-top: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
  z-index: 1065;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
}

.jm-analysis-shell {
  height: 80vh;
  max-height: 800px;
}

.jm-btn-close-light {
  opacity: 0.95;
  filter: invert(1) grayscale(100%) brightness(180%);
}

.jm-analysis-cols {
  gap: 20px;
  min-height: 0;
}

.jm-analysis-col {
  gap: 10px;
}

.jm-analysis-side {
  width: 300px;
}

.jm-grid-span-full {
  grid-column: 1 / -1;
}

.jm-folder-card-inner {
  padding: 14px 12px;
}

.jm-rule-strip {
  height: 6px;
}

.jm-strip-default {
  background: var(--border);
}

.jm-strip-primary {
  background: #2563eb;
}

.jm-strip-success {
  background: #16a34a;
}

.jm-strip-purple {
  background: #9333ea;
}

.jm-strip-orange {
  background: #f59e0b;
}

.jm-strip-pink {
  background: #ec4899;
}

.jm-strip-cyan {
  background: #06b6d4;
}

.jm-rule-body {
  padding: 20px;
  gap: 15px;
}

.jm-rule-head {
  gap: 10px;
}

.jm-chip-list {
  gap: 6px;
}

.jm-keyword-chip {
  background-color: var(--bg-app);
  color: var(--text-primary);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 13px;
  border: 1px solid var(--border);
}

.jm-priority-low {
  background-color: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

.jm-priority-mid {
  background-color: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

.jm-priority-high {
  background-color: rgba(220, 38, 38, 0.2);
  color: #f87171;
}

.jm-rule-meta {
  gap: 8px;
  background: var(--bg-app);
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.jm-dot-8 {
  width: 8px;
  height: 8px;
}

.jm-dot-primary {
  background-color: var(--primary);
}

.jm-dot-success {
  background-color: var(--success);
}

.jm-dot-purple {
  background-color: #9333ea;
}

.jm-dot-orange {
  background-color: #f59e0b;
}

.jm-dot-pink {
  background-color: #ec4899;
}

.jm-dot-cyan {
  background-color: #06b6d4;
}

.jm-label-min70 {
  min-width: 70px;
}

.jm-break-any {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

/* Smart Triggers: isolated responsive layout */
.smarttriggers-page-body #grid {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow-x: hidden;
}

.smarttriggers-page-body .modal-backdrop.show {
  background: rgba(4, 10, 24, 0.82);
  opacity: 1;
}

.smarttriggers-page-body .modal-content,
.smarttriggers-page-body .modal-content.bg-body-tertiary {
  background: linear-gradient(180deg, #1c2a43 0%, #172640 100%) !important;
  color: var(--text-primary) !important;
  border: 1px solid rgba(112, 143, 194, 0.35) !important;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
}

.smarttriggers-page-body .modal-content .text-body,
.smarttriggers-page-body .modal-content.text-body {
  color: var(--text-primary) !important;
}

.smarttriggers-page-body .modal-content .text-secondary {
  color: rgba(192, 209, 232, 0.78) !important;
}

.smarttriggers-page-body .modal-content hr {
  border-color: rgba(115, 145, 192, 0.35);
}

.smarttriggers-page-body .modal-content .form-control,
.smarttriggers-page-body .modal-content .form-select,
.smarttriggers-page-body .modal-content .input-group-text,
.smarttriggers-page-body .modal-content textarea {
  background: #0e1a2d !important;
  border-color: rgba(100, 131, 179, 0.46) !important;
  color: #e8f1ff !important;
}

.smarttriggers-page-body .modal-content .form-control::placeholder,
.smarttriggers-page-body .modal-content textarea::placeholder {
  color: rgba(171, 191, 220, 0.66) !important;
}

.smarttriggers-page-body .modal-content .form-control:focus,
.smarttriggers-page-body .modal-content .form-select:focus,
.smarttriggers-page-body .modal-content textarea:focus {
  border-color: rgba(57, 174, 255, 0.72) !important;
  box-shadow: 0 0 0 0.2rem rgba(25, 146, 230, 0.2) !important;
}

.smarttriggers-page-body .modal-content .btn-outline-secondary {
  border-color: rgba(118, 147, 192, 0.55);
  color: #c8d9f3;
}

.smarttriggers-page-body .modal-content .btn-outline-secondary:hover {
  background: rgba(119, 146, 188, 0.18);
  border-color: rgba(152, 183, 226, 0.65);
  color: #edf5ff;
}

.smarttriggers-page-body #analysis-results,
.smarttriggers-page-body #analysis-final,
.smarttriggers-page-body #analysis-results.bg-body,
.smarttriggers-page-body #analysis-final.bg-body {
  background: #0e1a2d !important;
  border-color: rgba(100, 131, 179, 0.38) !important;
  color: var(--text-primary);
}

.smarttriggers-page-body .modal-content .btn-close,
.smarttriggers-page-body .modal-content .btn-close:focus {
  filter: invert(1) grayscale(100%) brightness(180%);
  opacity: 0.95;
}

.smarttriggers-page-body .st-section-grid {
  display: grid !important;
  gap: 12px;
  align-content: start;
}

.smarttriggers-page-body .st-section-grid.folder-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.smarttriggers-page-body .st-section-grid.trigger-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.smarttriggers-page-body .st-folder-card {
  min-height: 178px;
  justify-self: stretch;
}

.smarttriggers-page-body .jm-folder-card-inner {
  padding: 16px 14px;
}

.smarttriggers-page-body .st-folder-title {
  width: 100%;
  line-height: 1.25;
  color: var(--text-primary);
  text-align: center;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.smarttriggers-page-body .st-folder-count {
  color: var(--text-secondary);
}

.smarttriggers-page-body .st-trigger-card {
  min-height: 208px;
}

.smarttriggers-page-body .jm-rule-body {
  overflow: visible;
}

.smarttriggers-page-body .jm-rule-meta {
  gap: 10px;
}

.smarttriggers-page-body .jm-rule-meta .d-flex.align-items-center.gap-2.small.text-secondary {
  align-items: flex-start !important;
}

.smarttriggers-page-body .jm-rule-meta .jm-label-min70 {
  min-width: 84px;
  flex: 0 0 84px;
}

.smarttriggers-page-body .jm-rule-meta .jm-break-any {
  flex: 1 1 auto;
  text-align: left !important;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

@media (max-width: 1200px) {
  .smarttriggers-page-body .st-section-grid.trigger-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 992px) {
  .smarttriggers-page-body .st-section-grid.folder-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .smarttriggers-page-body .st-section-grid.trigger-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .smarttriggers-page-body .st-trigger-card {
    min-height: 186px;
  }
}

@media (max-width: 640px) {
  .smarttriggers-page-body .st-section-grid.folder-grid,
  .smarttriggers-page-body .st-section-grid.trigger-grid {
    grid-template-columns: 1fr;
  }

  .smarttriggers-page-body .st-folder-card {
    min-height: 132px;
  }

  .smarttriggers-page-body .jm-folder-card-inner {
    padding: 10px 10px;
    gap: 6px !important;
  }

  .smarttriggers-page-body .st-folder-card .fs-2 {
    font-size: 1.45rem !important;
  }

  .smarttriggers-page-body .st-folder-title {
    font-size: 1.02rem !important;
    line-height: 1.15;
  }

  .smarttriggers-page-body .st-folder-count {
    font-size: 0.78rem;
  }

  .smarttriggers-page-body .st-trigger-card {
    min-height: 0;
  }

  .smarttriggers-page-body .jm-rule-body {
    padding: 12px;
    gap: 10px;
  }

  .smarttriggers-page-body .jm-rule-meta {
    padding: 8px;
    gap: 8px;
  }

  .smarttriggers-page-body .jm-keyword-chip {
    font-size: 12px;
    padding: 3px 7px;
  }

  .smarttriggers-page-body .jm-rule-meta .jm-label-min70 {
    min-width: 72px;
    flex: 0 0 72px;
  }
}

@media (max-width: 420px) {
  .smarttriggers-page-body .st-section-grid {
    gap: 8px;
  }

  .smarttriggers-page-body .st-folder-card {
    min-height: 118px;
  }

  .smarttriggers-page-body .jm-rule-body {
    padding: 10px;
    gap: 8px;
  }

  .smarttriggers-page-body .jm-rule-meta {
    padding: 7px;
    gap: 6px;
  }

  .smarttriggers-page-body .jm-rule-meta .jm-label-min70 {
    min-width: 66px;
    flex: 0 0 66px;
    font-size: 11px;
  }
}

.jm-badge-10 {
  font-size: 10px;
}

.jm-score-chip {
  font-size: 11px;
  background: var(--bg-app);
}

.jm-map-popup {
  min-width: 220px;
  font-family: sans-serif;
}

.jm-map-popup-title {
  font-size: 14px;
  color: #333;
}

.jm-map-popup-meta {
  margin: 8px 0;
  font-size: 12px;
  color: #555;
  line-height: 1.4;
}

.jm-map-popup-chip {
  background: #eee;
  padding: 2px 4px;
  border-radius: 3px;
}

.jm-map-popup-copy {
  margin-top: 4px;
  font-family: monospace;
  color: #777;
  cursor: pointer;
}

.jm-map-popup-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  border-top: 1px solid #eee;
  padding-top: 8px;
}

.jm-map-btn-edit {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  font-size: 12px;
}

.jm-map-btn-delete {
  color: var(--danger);
  border: 1px solid var(--border);
  background: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.jm-confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2147483647 !important;
  backdrop-filter: blur(4px);
}

.jm-confirm-card {
  background: #222;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #444;
  text-align: center;
  min-width: 320px;
  color: #eee;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  font-family: sans-serif;
}

.jm-confirm-title {
  margin-top: 0;
  color: #e74c3c;
  margin-bottom: 15px;
}

.jm-confirm-text {
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 1.5;
  color: #ccc;
}

.jm-confirm-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.jm-confirm-btn {
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s;
  color: #fff;
}

.jm-confirm-btn-cancel {
  padding: 10px 24px;
  background: #444;
}

.jm-confirm-btn-ok {
  padding: 10px 24px;
  background: #e74c3c;
  font-weight: bold;
}

/* JarvisMate renderer helpers */
.jm-muted-text {
  color: var(--text-muted);
}

.jm-text-main {
  color: var(--text-main);
}

.jm-accent-separator {
  color: var(--accent);
}

.jm-source-pill {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.jm-filter-line {
  font-size: 11px;
  color: var(--text-muted);
}

.jm-point-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jm-point-original {
  font-weight: bold;
  color: var(--accent);
}

.jm-point-arrow {
  color: var(--text-muted);
}

.jm-point-coords {
  font-family: monospace;
}

.jm-sidc-item-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.jm-sidc-item-meta {
  min-width: 0;
  gap: 1px;
}

.jm-sidc-item-code {
  font-size: 10px;
  opacity: 0.8;
}

.jm-sidc-item-name {
  font-size: 12px;
}

.jm-update-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #2563eb;
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  display: flex;
  gap: 12px;
  align-items: center;
  font-family: sans-serif;
  cursor: pointer;
  font-size: 14px;
}

.jm-update-toast-btn {
  background: #fff;
  color: #2563eb;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
}

/* Map settings manager */
.msm-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 26px;
  z-index: 200000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.95);
  border-top: 1px solid #334155;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
}

.msm-trigger {
  cursor: pointer;
  color: #00f2ff;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  height: 100%;
  transition: color 0.2s;
}

.msm-trigger:hover {
  color: #fff;
}

.msm-trigger-arrow {
  font-size: 10px;
}

.msm-menu {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid #475569;
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  padding: 12px;
  border-radius: 8px;
  display: none;
  flex-direction: column;
  gap: 8px;
  z-index: 200005;
  backdrop-filter: blur(5px);
}

.msm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.msm-row-clickable {
  cursor: pointer;
}

.msm-label {
  font-size: 11px;
  font-weight: bold;
  color: #94a3b8;
  text-transform: uppercase;
}

.msm-size-group {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  min-width: 136px;
}

.msm-size-btn {
  border: 1px solid #334155;
  background: transparent;
  color: #cbd5e1;
  padding: 0;
  min-width: 34px;
  height: 30px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.msm-size-btn-left {
  border-radius: 4px 0 0 4px;
}

.msm-size-btn-mid {
  border-left: none;
}

.msm-size-btn-right {
  border-left: none;
  border-radius: 0 4px 4px 0;
}

.msm-size-btn.is-active {
  background: #082f49;
  color: #fff;
  border-color: #00f2ff;
  box-shadow: inset 0 0 0 1px rgba(0, 242, 255, 0.45), 0 0 0 1px rgba(0, 242, 255, 0.35);
}

.msm-separator {
  width: 100%;
  height: 1px;
  background: #334155;
  margin: 2px 0;
}

.msm-toggle-btn {
  border: 1px solid #00f2ff;
  background: rgba(0, 242, 255, 0.1);
  color: #00f2ff;
  padding: 0 12px;
  height: 30px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1;
  font-weight: bold;
  cursor: pointer;
  min-width: 46px;
  text-align: center;
}

#labels-status {
  display: inline-block;
  line-height: 1;
}

.msm-toggle-btn.is-off {
  background: transparent;
  color: #64748b;
  border-color: #475569;
}

/* Settlements debug */
.sd-icon-strong {
  font-size: 20px;
  font-weight: bold;
}

.sd-icon-orange {
  color: #ff7800;
}

.sd-icon-green {
  color: #22c55e;
}

.sd-icon-blue {
  color: #2563eb;
}

.sd-icon-gray {
  color: #888;
}

.sd-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
  z-index: 9999;
  pointer-events: none;
  transition: opacity 0.5s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.sd-toast-info {
  background: #333;
}

.sd-toast-success {
  background: #22c55e;
}

.sd-toast-error {
  background: #ef4444;
}

.sd-edit-panel {
  position: absolute;
  top: 10px;
  right: 60px;
  width: 300px;
  background: rgba(30, 41, 59, 0.95);
  color: #fff;
  padding: 15px;
  border-radius: 8px;
  z-index: 5000;
  font-size: 13px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  border: 1px solid #444;
  font-family: sans-serif;
}

.sd-panel-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  align-items: center;
}

.sd-panel-title {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
  color: #00f2ff;
}

.sd-panel-close {
  border: none;
  background: none;
  color: #aaa;
  cursor: pointer;
  font-size: 16px;
}

.sd-field-block {
  margin-bottom: 10px;
}

.sd-field-label {
  font-size: 11px;
  color: #aaa;
}

.sd-select {
  width: 100%;
  background: #222;
  color: #fff;
  border: 1px solid #444;
  padding: 5px;
}

.sd-help {
  margin-bottom: 15px;
  font-size: 11px;
  color: #aaa;
  line-height: 1.4;
}

.sd-save-btn {
  width: 100%;
  padding: 10px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sd-save-status {
  margin-top: 5px;
  font-size: 11px;
  text-align: center;
  min-height: 15px;
  color: #888;
}

.sd-handle {
  border-radius: 50%;
  cursor: grab;
}

.sd-handle-vertex {
  width: 12px;
  height: 12px;
  background: #fff;
  border: 2px solid #ff0000;
}

.sd-handle-midpoint {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.5);
  border: 2px solid #ffa500;
}

/* SIDC manager */
.sidc-page-body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 18% -10%, rgba(0, 184, 217, 0.18), transparent 35%),
    radial-gradient(circle at 82% 0%, rgba(59, 130, 246, 0.17), transparent 38%),
    var(--bg-app);
}

.sidc-page-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 1rem;
  padding-top: 64px;
  height: 100vh;
}

.sidc-hero-card {
  border: 1px solid var(--border);
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
  box-shadow: 0 14px 28px rgba(2, 6, 23, 0.25);
}

.sidc-grid-wrap {
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  padding-right: 0.25rem;
  padding-bottom: 0.5rem;
}

.sidc-page-body #grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.55rem;
  align-items: stretch;
}

.sidc-page-body #grid > .col {
  display: block;
  width: auto;
  max-width: none;
  min-width: 0;
}

.sidc-card {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 10px;
  background: linear-gradient(165deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.96)) !important;
  box-shadow: 0 8px 18px rgba(2, 6, 23, 0.28);
  overflow: hidden;
}

.sidc-card.h-100 {
  height: 100% !important;
}

.sidc-empty-state {
  border: 1px dashed rgba(148, 163, 184, 0.5);
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.44);
}

.sidc-modal-preview {
  max-width: 100px;
  max-height: 100px;
  background: rgba(255, 255, 255, 0.92);
  padding: 0.2rem;
}

.sidc-color-badge {
  border: 1px solid rgba(59, 130, 246, 0.42);
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
}

.sidc-icon-box {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 0.55rem;
  background: rgba(51, 65, 85, 0.7);
}

.sidc-icon-img {
  object-fit: contain;
  padding: 0.2rem;
}

.sidc-card-body {
  padding: 0.62rem;
  min-height: 112px;
}

.sidc-card-title {
  color: var(--text-main);
  font-size: 0.82rem;
  line-height: 1.2;
}

.sidc-code-pill {
  font-size: 0.62rem;
  border: 1px solid rgba(148, 163, 184, 0.42);
  padding: 0.14rem 0.42rem;
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.55);
  max-width: 100%;
}

/* Coordinate manager toolbar parity with SIDC */
.coordinate-page-body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 18% -10%, rgba(0, 184, 217, 0.18), transparent 35%),
    radial-gradient(circle at 82% 0%, rgba(59, 130, 246, 0.17), transparent 38%),
    var(--bg-app);
}

.coordinate-page-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0.9rem;
}

.coordinate-page-title {
  font-size: clamp(1.85rem, 2.05vw, 2.45rem);
  line-height: 1.06;
}

.coordinate-add-btn,
.sidc-create-btn {
  height: 42px;
  padding: 0.42rem 0.88rem;
  font-size: 0.95rem;
  border-radius: 10px;
  white-space: nowrap;
}

.coordinate-hero-card {
  border: 1px solid var(--border);
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
  box-shadow: 0 14px 28px rgba(2, 6, 23, 0.25);
}

.coordinate-hero-body {
  padding: 0.82rem !important;
}

.coordinate-test-title {
  color: #a9bddc;
  font-size: 0.95rem;
}

.coordinate-toolbar-row {
  flex-wrap: nowrap;
}

.coordinate-search-col {
  min-width: 0;
}

.coordinate-action-col {
  flex: 0 0 auto;
}

.coordinate-search-group {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  gap: 0 !important;
}

.coordinate-search-group .input-group-text {
  flex: 0 0 auto;
  min-width: 42px;
  height: 42px;
  justify-content: center;
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.coordinate-search-input {
  height: 42px;
  font-size: 0.95rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.coordinate-page-body #grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  align-items: stretch;
  align-content: start;
}

.coordinate-page-body #grid > .col {
  display: block;
  width: auto;
  max-width: none;
  min-width: 0;
  flex: initial;
}

/* Reliability manager toolbar parity with SIDC/Coordinate */
.reliability-page-body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 18% -10%, rgba(0, 184, 217, 0.18), transparent 35%),
    radial-gradient(circle at 82% 0%, rgba(59, 130, 246, 0.17), transparent 38%),
    var(--bg-app);
}

.reliability-page-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0.9rem;
}

.reliability-page-title {
  font-size: clamp(1.85rem, 2.05vw, 2.45rem);
  line-height: 1.06;
}

.reliability-hero-card {
  border: 1px solid var(--border);
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
  box-shadow: 0 14px 28px rgba(2, 6, 23, 0.25);
}

.reliability-hero-body {
  padding: 0.82rem !important;
}

.reliability-toolbar-row {
  flex-wrap: nowrap;
}

.reliability-input-col {
  min-width: 0;
}

.reliability-action-col {
  flex: 0 0 auto;
}

.reliability-input-group {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  gap: 0 !important;
}

.reliability-input {
  height: 42px;
  font-size: 0.95rem;
}

.reliability-add-btn {
  height: 42px;
  padding: 0.42rem 0.88rem;
  font-size: 0.95rem;
  border-radius: 10px;
  white-space: nowrap;
}

.reliability-page-body #grid {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.45rem;
  align-items: stretch;
  align-content: start;
}

.reliability-page-body #grid > .col {
  display: block;
  width: auto;
  max-width: none;
  min-width: 0;
}

.reliability-option-card {
  border: 1px solid rgba(148, 163, 184, 0.26) !important;
  border-radius: 9px;
  background: linear-gradient(165deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.96)) !important;
  box-shadow: 0 8px 18px rgba(2, 6, 23, 0.28);
  color: #d9e7ff;
}

.reliability-option-card.h-100 {
  height: auto !important;
}

.reliability-option-card-body {
  min-height: 50px;
  padding: 0.4rem;
}

.reliability-option-title {
  color: #dbeafe;
  font-size: 0.72rem;
  line-height: 1.15;
}

.coordinate-format-card {
  border: 1px solid rgba(148, 163, 184, 0.26) !important;
  border-radius: 10px;
  background: linear-gradient(165deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.96)) !important;
  box-shadow: 0 8px 18px rgba(2, 6, 23, 0.28);
  color: #d9e7ff;
}

.coordinate-format-card-body {
  min-height: 132px;
  padding: 0.7rem;
}

.coordinate-format-strip {
  opacity: 0.8;
}

.coordinate-format-title {
  color: #dbeafe;
  font-size: 0.95rem;
  line-height: 1.2;
}

.coordinate-format-id {
  color: #9fb1ce !important;
}

.coordinate-format-label {
  color: #97abc9;
}

.coordinate-format-value {
  color: #d7e4fb;
}

.coordinate-format-card:hover {
  border-color: rgba(34, 211, 238, 0.55) !important;
  box-shadow: 0 12px 22px rgba(2, 6, 23, 0.32), 0 0 0 1px rgba(34, 211, 238, 0.2);
}

/* JarvisMate admin panel */
.manager-admin-page {
  padding: 0;
  background: radial-gradient(circle at 12% -10%, rgba(0, 184, 217, 0.12), transparent 36%),
    radial-gradient(circle at 86% 0%, rgba(59, 130, 246, 0.13), transparent 38%),
    var(--bg-app);
}

.manager-header {
  background: rgba(15, 23, 42, 0.64);
  backdrop-filter: blur(8px);
}

.manager-page-title,
.manager-breadcrumb-link {
  font-size: clamp(1.05rem, 1.15vw, 1.35rem) !important;
}

.manager-sidebar {
  background: linear-gradient(180deg, rgba(12, 22, 40, 0.9) 0%, rgba(10, 19, 34, 0.82) 100%);
  min-width: 220px;
  border-right-color: rgba(148, 163, 184, 0.18) !important;
}

.manager-main {
  min-width: 0;
}

.manager-content-frame {
  background: transparent;
}

.manager-nav-item {
  border-radius: 12px;
  padding: 0.72rem 0.6rem !important;
  gap: 0.22rem;
  min-height: 98px;
  border: 1px solid rgba(135, 160, 197, 0.48) !important;
  background: linear-gradient(180deg, rgba(14, 36, 67, 0.92) 0%, rgba(12, 30, 56, 0.88) 100%) !important;
  color: #d8e8ff !important;
  box-shadow: inset 0 1px 0 rgba(194, 221, 255, 0.08), 0 10px 20px rgba(2, 6, 23, 0.24);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.manager-nav-item.btn-outline-secondary,
.manager-nav-item.btn-outline-secondary:hover,
.manager-nav-item.btn-outline-secondary:focus,
.manager-nav-item.btn-outline-secondary:active {
  background: linear-gradient(180deg, rgba(14, 36, 67, 0.92) 0%, rgba(12, 30, 56, 0.88) 100%) !important;
  color: #d8e8ff !important;
  border-color: rgba(135, 160, 197, 0.48) !important;
}

.manager-nav-item.btn-primary,
.manager-nav-item.btn-primary:hover,
.manager-nav-item.btn-primary:focus,
.manager-nav-item.btn-primary:active {
  background: linear-gradient(180deg, #2f8cff 0%, #1f6ff0 100%) !important;
  color: #eff6ff !important;
  border-color: rgba(98, 178, 255, 0.95) !important;
  box-shadow: 0 12px 24px rgba(21, 95, 212, 0.42), 0 0 0 1px rgba(171, 218, 255, 0.24) inset;
}

.manager-nav-item:hover {
  transform: translateY(-1px);
  border-color: rgba(145, 215, 255, 0.78) !important;
  box-shadow: 0 14px 24px rgba(2, 6, 23, 0.34), 0 0 0 1px rgba(88, 201, 255, 0.22) inset;
}

.manager-nav-item .manager-nav-icon {
  margin-bottom: 0.35rem !important;
  font-size: 1.2rem !important;
  color: #8de8ff;
}

.manager-nav-item .manager-nav-title {
  font-size: 0.93rem;
  line-height: 1.18;
  color: #edf5ff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.22);
}

.manager-nav-item .manager-nav-subtitle {
  font-size: 0.79rem;
  line-height: 1.2;
  color: rgba(188, 209, 240, 0.88) !important;
}

.manager-nav-item.btn-primary .manager-nav-icon,
.manager-nav-item.btn-primary .manager-nav-title,
.manager-nav-item.btn-primary .manager-nav-subtitle {
  color: #f4f9ff !important;
}

/* SIDC manager scaling */
.sidc-page-title {
  font-size: clamp(1.85rem, 2.05vw, 2.45rem);
  line-height: 1.06;
}

.sidc-page-subtitle {
  font-size: clamp(0.92rem, 0.95vw, 1.04rem);
  line-height: 1.35;
}

.sidc-hero-card {
  padding: 0.82rem !important;
}

.sidc-toolbar-row {
  flex-wrap: nowrap;
}

.sidc-search-col {
  min-width: 0;
}

.sidc-action-col {
  flex: 0 0 auto;
}

.sidc-search-group {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  gap: 0 !important;
}

.sidc-hero-card .input-group-text {
  flex: 0 0 auto;
  width: auto;
  min-width: 42px;
  justify-content: center;
  height: 42px;
  font-size: 1rem;
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.sidc-search-input {
  flex: 1 1 auto;
  width: 1%;
  height: 42px;
  font-size: 0.95rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.sidc-create-btn {
  width: auto;
  max-width: 100%;
}

.sidc-modal-content {
  background: linear-gradient(165deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98)) !important;
  border: 1px solid rgba(148, 163, 184, 0.36) !important;
  border-radius: 12px;
  color: #dbe7ff !important;
  box-shadow: 0 20px 44px rgba(2, 6, 23, 0.55);
}

.sidc-modal-header,
.sidc-modal-footer {
  background: rgba(15, 23, 42, 0.64) !important;
  border-color: rgba(148, 163, 184, 0.26) !important;
}

.sidc-modal-header .modal-title {
  font-size: 1.2rem;
  font-weight: 700;
}

.sidc-modal-header .btn-close {
  filter: invert(0.9) brightness(1.1);
  opacity: 0.88;
}

.sidc-modal-header .btn-close:hover {
  opacity: 1;
}

.sidc-modal-body .form-label,
.sidc-modal-body .form-text {
  color: #a9bddc !important;
}

.sidc-modal-body .form-control,
.sidc-modal-body .form-select,
.sidc-modal-body input[type="file"] {
  min-height: 38px;
  background: rgba(51, 65, 85, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #e6eefc;
}

.sidc-modal-body .form-control::placeholder {
  color: #8ea2c5;
}

.sidc-modal-body .form-control:focus,
.sidc-modal-body .form-select:focus,
.sidc-modal-body input[type="file"]:focus {
  border-color: rgba(34, 211, 238, 0.8);
  box-shadow: 0 0 0 0.15rem rgba(34, 211, 238, 0.2);
}

.sidc-modal-footer .btn {
  min-width: 92px;
  height: 38px;
  font-size: 0.92rem;
  padding: 0.4rem 0.8rem;
}

@media (max-width: 1400px) {
  .reliability-page-title {
    font-size: clamp(1.58rem, 1.9vw, 2rem);
  }

  .reliability-input,
  .reliability-add-btn {
    height: 38px;
    font-size: 0.88rem;
  }

  .reliability-hero-body {
    padding: 0.68rem !important;
  }

  .coordinate-page-title {
    font-size: clamp(1.58rem, 1.9vw, 2rem);
  }

  .coordinate-add-btn,
  .sidc-create-btn,
  .coordinate-search-group .input-group-text,
  .coordinate-search-input {
    height: 38px;
    font-size: 0.88rem;
  }

  .coordinate-hero-body {
    padding: 0.68rem !important;
  }

  .manager-nav-item {
    min-height: 92px;
    padding: 0.64rem 0.52rem !important;
  }

  .manager-nav-item .manager-nav-title {
    font-size: 0.88rem;
  }

  .manager-nav-item .manager-nav-subtitle {
    font-size: 0.75rem;
  }

  .sidc-page-title {
    font-size: clamp(1.58rem, 1.9vw, 2rem);
  }

  .sidc-page-subtitle {
    font-size: 0.88rem;
  }

  .sidc-hero-card .input-group-text,
  .sidc-search-input,
  .sidc-create-btn {
    height: 38px;
    font-size: 0.88rem;
  }

  .sidc-page-body #grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .sidc-icon-box {
    width: 42px;
    height: 42px;
  }

  .sidc-card-body {
    min-height: 102px;
    padding: 0.54rem;
  }

  .sidc-card-title {
    font-size: 0.77rem;
  }

  .sidc-code-pill {
    font-size: 0.58rem;
  }
}

@media (max-width: 992px) {
  .coordinate-page-body #grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.42rem;
  }

  .reliability-page-shell {
    padding: 0.72rem;
  }

  .reliability-page-title {
    font-size: clamp(1.28rem, 4.5vw, 1.54rem);
  }

  .reliability-toolbar-row {
    flex-wrap: wrap;
  }

  .reliability-action-col {
    width: 100%;
  }

  .reliability-input,
  .reliability-add-btn {
    height: 34px;
    font-size: 0.82rem;
  }

  .reliability-add-btn {
    width: 100%;
    justify-content: center;
    white-space: normal;
    padding: 0.34rem 0.72rem;
  }

  .coordinate-page-shell {
    padding: 0.72rem;
  }

  .coordinate-page-title {
    font-size: clamp(1.28rem, 4.5vw, 1.54rem);
  }

  .coordinate-header {
    gap: 0.55rem !important;
  }

  .coordinate-add-btn,
  .coordinate-search-group .input-group-text,
  .coordinate-search-input {
    height: 34px;
    font-size: 0.82rem;
  }

  .coordinate-add-btn {
    padding: 0.34rem 0.72rem;
  }

  .coordinate-toolbar-row {
    flex-wrap: wrap;
  }

  .coordinate-action-col {
    width: 100%;
  }

  .coordinate-test-title {
    font-size: 0.82rem;
  }

  .coordinate-format-card-body {
    min-height: 120px;
    padding: 0.56rem;
  }

  .coordinate-format-title {
    font-size: 0.84rem;
  }

  .manager-layout {
    flex-direction: column;
  }

  .manager-sidebar {
    min-width: 0;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
    padding: 0.6rem !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem !important;
    overflow-x: hidden !important;
  }

  .manager-nav-item {
    min-height: 78px;
    padding: 0.52rem 0.42rem !important;
  }

  .manager-nav-item .manager-nav-icon {
    font-size: 1rem !important;
    margin-bottom: 0.2rem !important;
  }

  .manager-nav-item .manager-nav-title {
    font-size: 0.8rem;
  }

  .manager-nav-item .manager-nav-subtitle {
    font-size: 0.68rem;
  }

  .sidc-page-shell {
    padding: 0.72rem;
    padding-top: 0.72rem;
  }

  .sidc-page-body #grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .reliability-page-body #grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
  }

  .reliability-option-card-body {
    min-height: 46px;
    padding: 0.36rem;
  }

  .reliability-option-title {
    font-size: 0.68rem;
  }

  .sidc-page-title {
    font-size: clamp(1.28rem, 4.5vw, 1.54rem);
  }

  .sidc-page-subtitle {
    font-size: 0.8rem;
  }

  .sidc-hero-card {
    padding: 0.62rem !important;
  }

  .sidc-toolbar-row {
    flex-wrap: wrap;
  }

  .sidc-action-col {
    width: 100%;
  }

  .sidc-hero-card .input-group-text,
  .sidc-search-input,
  .sidc-create-btn,
  .coordinate-add-btn {
    height: 34px;
    font-size: 0.82rem;
  }

  .sidc-create-btn,
  .coordinate-add-btn {
    width: 100%;
    justify-content: center;
    white-space: normal;
    padding: 0.34rem 0.72rem;
  }

  .sidc-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 0.48rem;
  }

  .sidc-card-body {
    min-height: 92px;
    padding: 0.48rem;
    gap: 0.38rem !important;
  }

  .sidc-card-title {
    font-size: 0.72rem;
  }

  .sidc-code-pill {
    font-size: 0.54rem;
    padding: 0.12rem 0.36rem;
  }

  .sidc-modal-header .modal-title {
    font-size: 1.05rem;
  }

  .sidc-modal-footer .btn {
    min-width: 84px;
    height: 34px;
    font-size: 0.82rem;
  }
}

@media (max-width: 640px) {
  .coordinate-page-body #grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.34rem;
  }

  .reliability-add-btn {
    width: 100%;
    justify-content: center;
    font-size: 0.8rem;
    height: 32px;
  }

  .reliability-input {
    height: 32px;
    font-size: 0.8rem;
  }

  .coordinate-header {
    align-items: stretch !important;
  }

  .coordinate-toolbar-row {
    flex-wrap: wrap;
  }

  .coordinate-action-col {
    width: 100%;
  }

  .coordinate-add-btn,
  .sidc-create-btn {
    width: 100%;
    justify-content: center;
    font-size: 0.8rem;
    height: 32px;
  }

  .coordinate-search-group .input-group-text,
  .coordinate-search-input {
    height: 32px;
    font-size: 0.8rem;
  }

  .coordinate-format-card-body {
    min-height: 108px;
    padding: 0.48rem;
  }

  .coordinate-format-title {
    font-size: 0.77rem;
  }

  .sidc-toolbar-row {
    flex-wrap: wrap;
  }

  .sidc-action-col {
    width: 100%;
  }

  .sidc-create-btn {
    width: 100%;
    justify-content: center;
    font-size: 0.8rem;
    height: 32px;
  }

  .sidc-page-body #grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
  }

  .reliability-page-body #grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.34rem;
  }

  .reliability-option-card-body {
    min-height: 44px;
    padding: 0.3rem;
  }

  .reliability-option-title {
    font-size: 0.64rem;
  }

  .sidc-icon-box {
    width: 30px;
    height: 30px;
    border-radius: 0.4rem;
  }

  .sidc-card-body {
    min-height: 82px;
    padding: 0.4rem;
    gap: 0.3rem !important;
  }

  .sidc-card-title {
    font-size: 0.66rem;
  }

  .sidc-code-pill {
    font-size: 0.5rem;
    padding: 0.1rem 0.32rem;
  }

  .sidc-modal-body .form-control,
  .sidc-modal-body .form-select,
  .sidc-modal-body input[type="file"] {
    min-height: 34px;
    font-size: 0.84rem;
  }
}

@media (max-width: 420px) {
  .coordinate-page-body #grid {
    grid-template-columns: 1fr;
  }

  .sidc-page-body #grid {
    grid-template-columns: 1fr;
  }

  .reliability-page-body #grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .manager-header {
    padding: 0.54rem 0.72rem !important;
  }

  .manager-breadcrumb-link,
  .manager-page-title,
  .manager-breadcrumb-sep {
    font-size: 1rem !important;
  }

  .manager-sidebar {
    grid-template-columns: 1fr;
  }

  .manager-nav-item {
    min-height: 68px;
  }

  .manager-nav-item .manager-nav-subtitle {
    display: none;
  }
}

/* Points manager renderer helpers */
.pm-folder-actions {
  opacity: 0;
  transition: opacity 0.2s;
}

.pm-folder-icon {
  font-size: 40px;
  color: #fbbf24;
}

.pm-folder-title {
  font-size: 14px;
  color: var(--text-primary);
}

.pm-folder-subtitle {
  font-size: 12px;
}

.pm-item-title {
  font-size: 14px;
  color: var(--text-primary);
}

.pm-item-meta {
  font-size: 12px;
  color: var(--text-secondary);
}

.pm-color-dot {
  width: 8px;
  height: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.pm-empty-grid {
  grid-column: 1 / -1;
  padding: 26px 14px;
  border: 1px dashed rgba(120, 151, 205, 0.35);
  border-radius: 10px;
  color: var(--text-muted, #8da2c7);
}

.pm-load-more {
  grid-column: 1 / -1;
}

.pm-card-checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

/* Validator map SIDC dropdown */
.vm-sidc-row {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text-main);
}

.vm-sidc-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.vm-sidc-meta {
  min-width: 0;
}

.vm-sidc-name {
  font-size: 12px;
}

.vm-sidc-code {
  font-size: 10px;
  opacity: 0.75;
}

.vm-preview-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Admin support page helpers */
.ad-full-shell {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.ad-header-row {
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ad-link-reset {
  text-decoration: none;
}

.ad-refresh-btn {
  float: right;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}

.ad-loading-box {
  padding: 20px;
  text-align: center;
  color: #666;
}

.ad-hidden {
  display: none;
}

.ad-visitor-meta {
  font-size: 12px;
  font-weight: normal;
  color: #aaa;
}

.ad-empty-icon {
  font-size: 50px;
  margin-bottom: 20px;
}

.ad-attach-preview {
  display: none;
  padding: 10px;
  background: #252526;
  border-top: 1px solid #333;
  align-items: center;
}

.ad-preview-img {
  height: 40px;
  border-radius: 4px;
  margin-right: 10px;
}

.ad-file-name {
  color: #aaa;
  font-size: 12px;
  flex: 1;
}

.ad-remove-file {
  cursor: pointer;
  color: #ff5555;
  font-weight: bold;
  padding: 5px;
}

.ad-input-area {
  display: none;
}

.ad-attach-btn {
  margin-right: 10px;
  background: #444;
}

.custom-select__trigger {
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.2s;
}

.custom-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid var(--primary);
  border-top: 0;
  background: var(--bg-panel);
  transition: all 0.2s;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 3000;
  max-height: 200px;
  overflow-y: auto;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

@media (max-width: 760px) {
  #map-modal {
    --jm-scale: 0.88;
    --jm-sidebar-tab-w: 50px;
    --jm-sidebar-panel-w: 280px;
  }

  #map-modal .map-modal-shell {
    --jm-shell-scale: 0.985;
    margin: 4px;
  }

  #map-modal .map-modal-shell-header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
  }

  .map-modal-breadcrumb {
    min-width: 0;
    flex: 1 1 auto;
  }

  .map-modal-breadcrumb .breadcrumb {
    flex-wrap: wrap;
    row-gap: 2px;
  }

  #map-modal .sidebar-pane {
    padding: calc(0.45rem * var(--jm-scale));
  }
}

@media (max-width: 600px) {
  #map-modal {
    --jm-scale: 0.82;
    --jm-sidebar-tab-w: 46px;
    --jm-sidebar-panel-w: 250px;
  }

  #map-modal .map-modal-shell {
    --jm-shell-scale: 0.97;
    margin: 3px;
  }

  #map-modal .map-modal-shell-header {
    padding: 7px;
    gap: 6px;
  }

  #map-modal .map-modal-breadcrumb .breadcrumb {
    row-gap: 1px;
  }
}

@media (max-width: 420px) {
  #map-modal {
    --jm-scale: 0.76;
    --jm-sidebar-tab-w: 42px;
    --jm-sidebar-panel-w: 220px;
  }

  #map-modal .map-modal-shell {
    --jm-shell-scale: 0.95;
    margin: 2px;
  }

  #map-modal .map-modal-shell-header {
    padding: 6px;
    gap: 4px;
  }

  #map-modal .map-modal-breadcrumb .breadcrumb-item {
    font-size: 0.74rem;
  }
}

.sidebar-pane-mbtiles .mbtiles-node-icon {
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#map-modal .sidebar-pane-mbtiles .mbtiles-node-icon {
  font-size: calc(13px * var(--jm-scale));
}

.sidebar-pane-mbtiles .mbtiles-folder-icon {
  color: rgba(203, 213, 225, 0.9);
}

.sidebar-pane-mbtiles .mbtiles-file-icon {
  color: rgba(148, 163, 184, 0.9);
}

.sidebar-pane-base-layers .base-layers-title {
  padding: 0.35rem 0.2rem 0.48rem;
  font-size: 0.86rem;
  color: rgba(195, 212, 236, 0.78);
}

#map-modal .sidebar-pane-base-layers .base-layers-title {
  padding: calc(0.35rem * var(--jm-scale)) calc(0.2rem * var(--jm-scale)) calc(0.48rem * var(--jm-scale));
  font-size: calc(0.86rem * var(--jm-scale));
}

.sidebar-pane-base-layers .base-layers-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

#map-modal .sidebar-pane-base-layers .base-layers-list {
  gap: calc(0.55rem * var(--jm-scale));
}

.sidebar-pane-base-layers .base-layer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.62rem 0.7rem;
  border: 1px solid rgba(136, 162, 201, 0.42);
  border-radius: 0.58rem;
  background: linear-gradient(180deg, rgba(18, 33, 58, 0.9) 0%, rgba(16, 29, 50, 0.84) 100%);
  box-shadow: 0 8px 16px rgba(2, 6, 23, 0.2);
}

#map-modal .sidebar-pane-base-layers .base-layer-row {
  gap: calc(0.6rem * var(--jm-scale));
  padding: calc(0.62rem * var(--jm-scale)) calc(0.7rem * var(--jm-scale));
}

.sidebar-pane-base-layers .base-layer-row.is-visible {
  border-color: rgba(34, 211, 238, 0.62);
  box-shadow: 0 10px 18px rgba(2, 6, 23, 0.28), 0 0 0 1px rgba(34, 211, 238, 0.16) inset;
}

.sidebar-pane-base-layers .base-layer-name {
  flex: 1 1 auto;
  min-width: 0;
  color: #dbe9ff;
  font-size: 0.93rem;
  font-weight: 620;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

#map-modal .sidebar-pane-base-layers .base-layer-name {
  font-size: calc(0.93rem * var(--jm-scale));
}

.sidebar-pane-base-layers .base-layer-eye {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(129, 153, 191, 0.45);
  border-radius: 0.5rem;
  background: rgba(15, 23, 42, 0.62);
  color: #b7c9e6;
  padding: 0;
  flex: 0 0 auto;
}

#map-modal .sidebar-pane-base-layers .base-layer-eye {
  width: calc(30px * var(--jm-scale));
  height: calc(30px * var(--jm-scale));
}

.sidebar-pane-base-layers .base-layer-eye:hover {
  border-color: rgba(125, 211, 252, 0.72);
  background: rgba(30, 41, 59, 0.8);
  color: #e2efff;
}

.sidebar-pane-base-layers .base-layer-eye svg {
  width: 18px;
  height: 18px;
}

/* Map/library search inputs: enforce high-contrast text and placeholder on dark background. */
#map-search-input,
#library-search-input {
  color: #e2ecff !important;
  background-color: rgba(15, 23, 42, 0.92) !important;
  border-color: rgba(112, 142, 194, 0.78) !important;
}

#map-search-input::placeholder,
#library-search-input::placeholder {
  color: rgba(214, 228, 252, 0.95) !important;
  opacity: 1 !important;
}

#map-search-input:focus,
#library-search-input:focus {
  color: #ffffff !important;
  border-color: #7fb2ff !important;
  box-shadow: 0 0 0 0.2rem rgba(66, 140, 255, 0.28) !important;
}

.sidebar-pane-object-list .object-list-header {
  border-color: rgba(148, 163, 184, 0.22) !important;
}

.sidebar-pane-object-list .object-list-stats {
  color: rgba(203, 213, 225, 0.84) !important;
}

.sidebar-pane-object-list .object-list-filter-row {
  min-height: 1.4rem;
}

.sidebar-pane-object-list .object-list-exact-match-label {
  color: #dbe6f7 !important;
  cursor: pointer;
  user-select: none;
  opacity: 1 !important;
}

.sidebar-pane-object-list .object-list-exact-match-text {
  color: inherit;
  font-weight: 550;
  line-height: 1.1;
}

.sidebar-pane-object-list .object-list-toggle-all {
  --bs-btn-color: #cbd5e1;
  --bs-btn-border-color: rgba(148, 163, 184, 0.4);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: rgba(71, 85, 105, 0.5);
  --bs-btn-hover-border-color: rgba(148, 163, 184, 0.66);
  padding: 0.2rem 0.45rem;
  line-height: 1;
}

.sidebar-pane-object-list .object-list-group {
  background: transparent;
  gap: 0.45rem;
}

.sidebar-pane-object-list .object-list-item {
  background: rgba(17, 25, 40, 0.28);
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  border-radius: 0.7rem !important;
  color: #e2e8f0;
  padding: 0.62rem 0.68rem;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(2, 6, 23, 0.18);
}

.sidebar-pane-object-list .object-list-item:hover {
  background: rgba(51, 65, 85, 0.36);
  border-color: rgba(125, 211, 252, 0.46) !important;
}

.sidebar-pane-object-list .object-list-settlement {
  background: linear-gradient(135deg, rgba(25, 44, 88, 0.52), rgba(19, 34, 63, 0.32));
  border: 1px solid rgba(96, 165, 250, 0.34) !important;
  box-shadow: inset 0 0 0 1px rgba(148, 197, 255, 0.08), 0 8px 16px rgba(6, 12, 24, 0.24);
}

.sidebar-pane-object-list .object-list-settlement-icon {
  font-size: 1.05rem;
  color: #93c5fd;
  width: 1.25rem;
  text-align: center;
  opacity: 0.92;
}

.sidebar-pane-object-list .object-list-item-title {
  font-size: 0.95rem;
  color: #dbe6f7;
  font-weight: 650;
  line-height: 1.1;
}

.sidebar-pane-object-list .object-list-item-title.is-active {
  color: #ffd700;
  font-weight: 700;
}

.sidebar-pane-object-list .object-list-item-layer {
  font-size: 0.75rem;
  opacity: 0.74;
}

.sidebar-pane-object-list .object-list-item-subtitle {
  font-size: 0.84rem;
  color: rgba(176, 191, 213, 0.92);
  line-height: 1.18;
}

.sidebar-pane-object-list .object-list-item-main {
  min-width: 0;
  gap: 0.12rem;
}

.sidebar-pane-object-list .object-list-sidc-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.sidebar-pane-object-list .object-list-pan-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.34);
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.4);
  cursor: pointer;
}

.sidebar-pane-object-list .object-list-pan-btn:hover {
  background: rgba(51, 65, 85, 0.58);
  color: #fff;
}

.sidebar-pane-object-list .settlement-toggle-btn {
  width: 34px;
  height: 30px;
  padding: 0;
  border-radius: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(30, 41, 59, 0.55);
  color: #e2e8f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}

.sidebar-pane-object-list .settlement-toggle-btn svg {
  width: 16px;
  height: 16px;
}

.sidebar-pane-object-list .settlement-toggle-btn.active {
  border-color: rgba(16, 185, 129, 0.54);
  background: rgba(16, 185, 129, 0.16);
}

.sidebar-pane-object-list .settlement-toggle-btn.is-loading {
  --settlement-progress: 0%;
  border-color: rgba(59, 130, 246, 0.45);
  background: linear-gradient(
    90deg,
    rgba(59, 130, 246, 0.35) var(--settlement-progress),
    rgba(30, 41, 59, 0.55) var(--settlement-progress)
  );
}

/* Responsive scaling for sidebar object rows and dropdown lists inside map modal. */
#map-modal .sidebar-pane-object-list .object-list-toggle-all {
  padding: calc(0.2rem * var(--jm-scale)) calc(0.45rem * var(--jm-scale));
  font-size: var(--jm-sidebar-content-font-xs);
}

#map-modal .sidebar-pane-object-list .object-list-item {
  padding: calc(0.62rem * var(--jm-scale)) calc(0.68rem * var(--jm-scale));
}

#map-modal .sidebar-pane-object-list .object-list-settlement-icon {
  font-size: calc(1.05rem * var(--jm-scale));
  width: calc(1.25rem * var(--jm-scale));
}

#map-modal .sidebar-pane-object-list .object-list-item-title {
  font-size: calc(0.95rem * var(--jm-scale));
}

#map-modal .sidebar-pane-object-list .object-list-item-layer {
  font-size: calc(0.75rem * var(--jm-scale));
}

#map-modal .sidebar-pane-object-list .object-list-item-subtitle {
  font-size: calc(0.84rem * var(--jm-scale));
}

#map-modal .sidebar-pane-object-list .object-list-sidc-icon {
  width: calc(24px * var(--jm-scale));
  height: calc(24px * var(--jm-scale));
}

#map-modal .sidebar-pane-object-list .object-list-pan-btn {
  width: calc(28px * var(--jm-scale));
  height: calc(28px * var(--jm-scale));
  min-width: calc(28px * var(--jm-scale));
  min-height: calc(28px * var(--jm-scale));
  flex: 0 0 auto;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  padding: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

#map-modal .sidebar-pane-object-list .object-list-pan-btn .object-list-pan-icon {
  width: calc(14px * var(--jm-scale));
  height: calc(14px * var(--jm-scale));
  font-size: calc(14px * var(--jm-scale));
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#map-modal .sidebar-pane-object-list .object-list-pan-btn .object-list-pan-icon-svg {
  width: calc(14px * var(--jm-scale));
  height: calc(14px * var(--jm-scale));
  stroke: currentColor;
  fill: none;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
  pointer-events: none;
  shape-rendering: geometricPrecision;
}

#map-modal .sidebar-pane-object-list .object-list-item-layer.has-full-name {
  cursor: help;
}

#map-modal .sidebar-pane-object-list .object-list-item-layer.has-full-name:hover {
  color: #ffd46b;
  text-decoration: underline dotted;
}

#map-modal .sidebar-pane-object-list .settlement-toggle-btn {
  width: calc(34px * var(--jm-scale));
  height: calc(30px * var(--jm-scale));
}

#map-modal .sidebar-pane-object-list .settlement-toggle-btn svg {
  width: calc(16px * var(--jm-scale));
  height: calc(16px * var(--jm-scale));
}

#map-modal .sidebar-pane .dropdown-menu,
#map-modal .custom-options,
#map-modal .validator-info-sidc-dropdown,
#map-modal .validator-source-type-dropdown-list,
#map-modal .sidc-dropdown-list {
  font-size: var(--jm-sidebar-content-font-sm) !important;
  max-height: calc(240px * var(--jm-scale));
}

/* Validator v2 migration helpers */
.validator-editor-input,
.validator-editor-textarea {
  border: 1px solid #aaa;
  background: transparent;
  padding: 4px;
  width: 100%;
  box-sizing: border-box;
  height: 100%;
}

.validator-editor-textarea {
  resize: none;
}

.validator-empty-base-layers {
  color: var(--text-muted);
  font-style: italic;
}

.validator-share-subdivision {
  color: #a4b0be;
  margin-left: 8px;
}

.validator-share-username {
  font-weight: 600;
  color: #fff;
}

.validator-share-only-you {
  color: #7f8fa6;
  font-style: italic;
  padding: 5px;
}

.validator-share-access-level {
  color: #00a8ff;
}

.validator-share-error-text {
  color: #ff6b6b;
}

.validator-info-sidc-preview {
  width: 36px;
  height: 36px;
}

.validator-info-sidc-dropdown {
  display: none;
  right: 40px;
  z-index: 99999;
  max-height: 200px;
}

.validator-source-type-display {
  min-height: 38px;
  cursor: pointer;
}

.validator-source-type-arrow {
  opacity: 0.7;
}

.validator-source-type-dropdown-list {
  display: none;
  max-height: 250px;
  z-index: 10000;
}

.validator-info-point-desc {
  height: 80px;
  resize: vertical;
}

.validator-cross-marker-wrap {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.temp-cross-marker,
.temp-cross-marker .validator-cross-marker-wrap,
.temp-cross-marker .validator-cross-marker-icon {
  pointer-events: auto !important;
}

.validator-cross-marker-icon {
  font-size: 60px;
  line-height: 1;
  color: #ff3b30;
  text-shadow: 0 0 2px #fff, 0 0 8px rgba(255, 0, 0, 0.75);
}

.map-draw-modal-content {
  background: #10243f;
  border: 1px solid rgba(127, 170, 235, 0.45);
}

.validator-search-status {
  padding: 6px;
}

.validator-popup-card-body {
  min-width: 220px;
}

.session-warning-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #ff4757;
  color: #fff;
  z-index: 9999999;
  padding: 10px;
  text-align: center;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  font-family: sans-serif;
}

.session-warning-btn {
  background: #fff;
  color: #ff4757;
  border: none;
  padding: 5px 15px;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
}

.ol-settlement-name {
  color: #60a5fa;
  font-weight: 500;
}

.ol-settlement-region {
  opacity: 0.7;
}

.validator-confirm-overlay {
  z-index: 1000000 !important;
  background: rgba(0, 0, 0, 0.5);
}

.validator-confirm-card {
  min-width: 300px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.validator-confirm-message {
  margin-bottom: 20px;
  color: var(--text-main, #eee);
}

.validator-confirm-actions {
  gap: 10px;
}

.validator-confirm-ok {
  padding: 8px 20px;
}

.validator-confirm-cancel {
  padding: 8px 20px;
  background: #555;
}

.validator-add-point-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
}

.validator-add-point-card {
  background: var(--bg-panel);
  padding: 24px;
  border-radius: 8px;
  width: min(92vw, 340px);
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.validator-add-point-title {
  margin: 0 0 16px;
  color: var(--text-main);
}

.validator-add-point-label {
  display: block;
  font-size: 12px;
  margin-bottom: 4px;
  color: var(--text-muted);
}

.validator-add-point-input {
  width: 100%;
  padding: 8px;
  margin-bottom: 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-main);
  border-radius: 4px;
  box-sizing: border-box;
}

.validator-add-point-select {
  margin-bottom: 16px;
}

.validator-add-point-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.validator-add-point-btn {
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.validator-add-point-btn-cancel {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-main);
}

.validator-add-point-btn-save {
  padding: 8px 20px;
  background: var(--primary);
  border: none;
  color: #fff;
  font-weight: 600;
}

.validator-dup-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2147483647;
}

.validator-dup-card {
  width: min(1200px, 98vw);
  height: min(86vh, 860px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-panel);
  color: var(--text-main);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
}

.validator-dup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.validator-dup-title {
  font-weight: 700;
  font-size: 16px;
}

.validator-dup-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.validator-dup-actions {
  display: flex;
  gap: 8px;
}

.validator-dup-summary {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
}

.validator-dup-grid {
  display: grid;
  grid-template-columns: minmax(420px, 1.1fr) minmax(360px, 0.9fr);
  gap: 0;
  min-height: 0;
  flex: 1;
}

.validator-dup-content {
  padding: 10px 14px;
  overflow: auto;
  border-right: 1px solid var(--border);
}

.validator-dup-map-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.validator-dup-map-title {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}

.validator-dup-map {
  min-height: 220px;
  height: 100%;
  background: #0f172a;
}

.validator-dup-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
}

.validator-dup-selected-count {
  font-size: 12px;
  color: var(--text-muted);
}

.validator-savepoints-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2147483647;
  backdrop-filter: blur(2px);
}

.validator-savepoints-card {
  background: var(--bg-panel);
  padding: 24px;
  border-radius: 12px;
  border: 1px solid var(--border);
  width: min(92vw, 400px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.validator-savepoints-title {
  margin-top: 0;
  color: var(--text-bright);
}

.validator-savepoints-subtitle {
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 15px;
}

.validator-savepoints-label {
  display: block;
  margin-bottom: 5px;
  color: var(--text-main);
  font-size: 12px;
}

.validator-savepoints-select {
  width: 100%;
  padding: 8px;
  margin-bottom: 15px;
  background: var(--bg-input);
  color: var(--text-main);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.validator-savepoints-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.validator-layer-create-card {
  background: #2f3640;
  padding: 20px;
  border-radius: 8px;
  width: min(92vw, 350px);
  border: 1px solid #7f8fa6;
  color: #f5f6fa;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}

.validator-layer-create-title {
  margin-top: 0;
  color: #f5f6fa;
  border-bottom: 1px solid #4b6584;
  padding-bottom: 10px;
}

.validator-layer-create-label {
  display: block;
  margin-bottom: 5px;
  color: #dcdde1;
  font-size: 13px;
}

.validator-layer-create-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  margin-bottom: 15px;
  background: #1e272e;
  color: #fff;
  border: 1px solid #4b6584;
  border-radius: 4px;
  outline: none;
}

.validator-layer-create-textarea {
  height: 60px;
  margin-bottom: 20px;
  resize: none;
}

.validator-layer-create-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.validator-layer-create-btn {
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.validator-layer-create-btn-cancel {
  background: transparent;
  border: 1px solid #7f8fa6;
  color: #dfe6e9;
}

.validator-layer-create-btn-save {
  background: #0984e3;
  border: none;
  color: #fff;
  padding: 8px 20px;
  font-weight: bold;
}

.validator-share-title {
  margin-top: 0;
  border-bottom: 1px solid #4b6584;
  padding-bottom: 15px;
  font-size: 16px;
}

.validator-share-loading {
  padding: 20px;
  text-align: center;
  color: #a4b0be;
}

.validator-share-content {
  display: none;
  padding-top: 10px;
}

.validator-share-input-row {
  margin-bottom: 20px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.validator-share-user-wrap {
  flex: 1;
  position: relative;
}

.validator-share-user-input {
  width: 100%;
  height: 38px;
  box-sizing: border-box;
  padding: 0 12px;
  background: #1e272e;
  color: #f5f6fa;
  border: 1px solid #4b6584;
  border-radius: 4px;
  outline: none;
  font-size: 14px;
}

.validator-share-suggestions {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #2f3640;
  border: 1px solid #4b6584;
  z-index: 1001;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border-radius: 0 0 4px 4px;
  margin-top: -1px;
}

.validator-share-perm-select {
  height: 38px;
  padding: 0 10px;
  background: #1e272e;
  color: #f5f6fa;
  border: 1px solid #4b6584;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
  font-size: 13px;
}

.validator-share-add-btn {
  height: 38px;
  width: 38px;
  background: #0984e3;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.validator-share-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #4b6584;
  background: #1e272e;
  border-radius: 4px;
}

.validator-share-footer {
  text-align: right;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #4b6584;
}

.validator-share-close-btn {
  background: #1e272e;
  border: 1px solid #7f8fa6;
  color: #dfe6e9;
  padding: 8px 24px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
}

.validator-hud-zoom {
  color: #aaa;
}

.validator-hud-sep {
  border-left: 1px solid #666;
  padding-left: 10px;
}

.validator-hud-latlon {
  color: #8ea8d1;
}

.validator-hud-status-live {
  color: #9ca3af;
}

.validator-hud-status-fixed {
  color: #93c5fd;
}

.validator-hud-copy {
  cursor: pointer;
  color: #93c5fd;
  border-bottom: 1px dashed #93c5fd;
}

@media (max-width: 760px) {
  .map-hud-control {
    margin: 0 8px 8px 0 !important;
    transform: scale(0.9);
    transform-origin: right bottom;
  }

  .mgrs-control {
    font-size: 11px !important;
    padding: 3px 6px !important;
    gap: 6px !important;
  }

  .validator-hud-sep {
    padding-left: 6px;
  }
}

@media (max-width: 520px) {
  .map-hud-control {
    margin: 0 6px 6px 0 !important;
    transform: scale(0.8);
    transform-origin: right bottom;
  }

  .mgrs-control {
    font-size: 10px !important;
    padding: 2px 5px !important;
    gap: 4px !important;
  }

  .validator-hud-zoom {
    display: none;
  }

  .validator-hud-sep {
    padding-left: 5px;
  }
}

.validator-mbtiles-loading-card {
  background: var(--bg-panel);
  padding: 30px;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 0 20px rgba(0, 242, 255, 0.2);
  text-align: center;
  min-width: 300px;
  max-width: 90%;
}

.validator-mbtiles-loading-title {
  font-size: 20px;
  margin-bottom: 20px;
  font-weight: bold;
  color: var(--primary);
}

.validator-mbtiles-loading-file {
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--text-main);
  word-break: break-all;
}

.validator-mbtiles-progress-track {
  width: 100%;
  height: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 12px;
  border: 1px solid var(--border);
}

.validator-mbtiles-progress-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--primary), #00a8ff);
  box-shadow: 0 0 10px var(--primary);
  transition: width 0.2s cubic-bezier(0.1, 0.7, 1, 0.1);
}

.validator-mbtiles-progress-text {
  font-size: 16px;
  font-weight: bold;
  font-family: monospace;
  color: var(--secondary);
}

/* Hub landing page (migrated from index.html embedded style) */
.hub-page {
  --primary-color: #00f2ff;
  --secondary-color: #0078ff;
  --bg-color: #0f172a;
  --card-bg: rgba(30, 41, 59, 0.7);
  --text-color: #e2e8f0;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%);
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

.hub-page::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(0, 242, 255, 0.05) 0%, transparent 50%);
  animation: hub-bg-rotate 20s linear infinite;
  z-index: -1;
}

@keyframes hub-bg-rotate {
  0% {
    transform: translate(-25%, -25%) rotate(0deg);
  }

  100% {
    transform: translate(-25%, -25%) rotate(360deg);
  }
}

.hub-page .brand-hero {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  text-align: center;
  pointer-events: none;
}

.hub-page .brand-title {
  margin: 0;
  font-size: clamp(2.35rem, 8vw, 4.6rem);
  letter-spacing: 0.32rem;
  line-height: 0.95;
  background: linear-gradient(90deg, #22d3ee 0%, #00f2ff 35%, #3b82f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 25px rgba(34, 211, 238, 0.35);
}

.hub-page .brand-subtitle {
  margin: 4px 0 0;
  font-size: clamp(0.58rem, 1.1vw, 0.78rem);
  letter-spacing: 0.56rem;
  color: rgba(203, 213, 225, 0.8);
  text-transform: uppercase;
  font-weight: 600;
}

.hub-page .brand-chip {
  margin-top: 6px;
  letter-spacing: 0.14rem;
  font-size: 0.62rem;
  border-color: rgba(34, 211, 238, 0.5) !important;
  background: rgba(15, 23, 42, 0.65) !important;
  color: #a5f3fc !important;
}

.hub-page .container {
  display: grid;
  grid-template-columns: repeat(3, minmax(170px, 250px));
  grid-auto-rows: minmax(0, auto);
  gap: clamp(10px, 1.6vw, 24px);
  z-index: 1;
  padding: 150px clamp(16px, 2.5vw, 34px) 70px;
  width: 100%;
  max-width: 1240px;
  min-height: 100vh;
  height: auto;
  box-sizing: border-box;
  align-content: start;
  justify-content: center;
  justify-items: stretch;
  overflow: visible;
}

.hub-page .hub-user-controls {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 100;
}

.hub-page .hub-username {
  color: var(--text-color);
  font-weight: 500;
}

.hub-page .header-unread-badge {
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  padding: 0 5px;
  line-height: 1.45;
  text-align: center;
}

.hub-page .card {
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: clamp(0.7rem, 1.1vw, 1rem) clamp(0.56rem, 0.9vw, 0.8rem);
  width: 100%;
  min-width: 0;
  max-width: none;
  text-align: center;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-decoration: none;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  aspect-ratio: auto;
  min-height: clamp(176px, 17vw, 236px);
  gap: 0.16rem;
}

.hub-page .jarvis-neon-card {
  --jarvis-neon-rgb: 0, 242, 255;
}

.hub-page .jarvis-neon-cyan {
  --jarvis-neon-rgb: 0, 242, 255;
}

.hub-page .jarvis-neon-amber {
  --jarvis-neon-rgb: 245, 158, 11;
}

.hub-page .jarvis-neon-green {
  --jarvis-neon-rgb: 16, 185, 129;
}

.hub-page .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  transform: translateX(-100%);
  transition: 0.5s;
}

.hub-page .jarvis-neon-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(var(--jarvis-neon-rgb), 0.9);
  box-shadow: 0 0 0 1px rgba(var(--jarvis-neon-rgb), 0.4), 0 0 26px rgba(var(--jarvis-neon-rgb), 0.5),
    0 0 58px rgba(var(--jarvis-neon-rgb), 0.33), 0 20px 50px rgba(0, 0, 0, 0.35);
}

.hub-page .jarvis-neon-card:hover::before {
  transform: translateX(100%);
}

.hub-page .card-disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.hub-page .card-disabled:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.hub-page .card-disabled:hover .icon-container {
  transform: none;
  background: rgba(255, 255, 255, 0.05);
}

.hub-page .coming-soon-badge {
  margin-top: 0.25rem;
  margin-bottom: 2px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #fef3c7;
  background: rgba(245, 158, 11, 0.22);
  border: 1px solid rgba(245, 158, 11, 0.5);
}

.hub-page .card h2 {
  margin: 0.36rem 0 0.18rem;
  font-size: clamp(1.12rem, 1.65vw, 1.9rem);
  color: #fff;
  transition: color 0.3s;
}

.hub-page .jarvis-neon-card:hover h2 {
  color: rgba(var(--jarvis-neon-rgb), 1);
}

.hub-page .card p {
  color: #94a3b8;
  font-size: clamp(0.78rem, 0.98vw, 1rem);
  line-height: 1.24;
  margin-bottom: 0;
}

.hub-page .icon-container {
  width: 7vw;
  height: 7vw;
  min-width: 56px;
  min-height: 56px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.3rem;
  transition: all 0.3s;
  font-size: 3.2vw;
}

.hub-page .jarvis-neon-card:hover .icon-container {
  background: rgba(var(--jarvis-neon-rgb), 0.13);
  box-shadow: 0 0 24px rgba(var(--jarvis-neon-rgb), 0.42);
  transform: scale(1.1) rotate(5deg);
}

.hub-page .jarvis-neon-card:hover .status-dot {
  background-color: rgba(var(--jarvis-neon-rgb), 1);
  box-shadow: 0 0 12px rgba(var(--jarvis-neon-rgb), 0.95), 0 0 26px rgba(var(--jarvis-neon-rgb), 0.5);
}

.hub-page .status-dot-amber {
  background-color: #f59e0b;
  box-shadow: 0 0 10px #f59e0b;
}

.hub-page .status-dot-green {
  background-color: #10b981;
  box-shadow: 0 0 10px #10b981;
}

.hub-page .status-dot-blue {
  background-color: #3b82f6;
  box-shadow: 0 0 10px #3b82f6;
}

.hub-page .status-dot {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 10px;
  height: 10px;
  background-color: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 10px #10b981;
}

.hub-page footer {
  position: absolute;
  bottom: 20px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.8em;
}

/* Support admin page (migrated from support.html embedded style) */
.support-admin-page,
.support-admin-page html {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.support-admin-page .admin-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.support-admin-page .support-container {
  display: flex;
  flex: 1;
  gap: 20px;
  padding: 20px;
  overflow: hidden;
  box-sizing: border-box;
}

.support-admin-page .chat-list-panel {
  width: 300px;
  background: #252526;
  border-radius: 8px;
  border: 1px solid #333;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.support-admin-page .chat-list-header {
  padding: 15px;
  background: #1e1e1e;
  border-bottom: 1px solid #333;
  font-weight: bold;
}

.support-admin-page .chat-list {
  flex: 1;
  overflow-y: auto;
}

.support-admin-page .chat-item {
  padding: 15px;
  border-bottom: 1px solid #2d2d2d;
  cursor: pointer;
  transition: background 0.2s;
}

.support-admin-page .chat-item:hover {
  background: #2d2d2d;
}

.support-admin-page .chat-item.active {
  background: #37373d;
  border-left: 3px solid #00fab4;
}

.support-admin-page .chat-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.support-admin-page .chat-item-id {
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.support-admin-page .delete-chat-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #d9534f;
  font-size: 16px;
  padding: 2px 5px;
  border-radius: 4px;
  visibility: hidden;
}

.support-admin-page .chat-item:hover .delete-chat-btn {
  visibility: visible;
}

.support-admin-page .delete-chat-btn:hover {
  background: rgba(217, 83, 79, 0.2);
}

.support-admin-page .chat-item-msg {
  font-size: 12px;
  color: #aaa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.support-admin-page .chat-item-time {
  font-size: 10px;
  color: #666;
  margin-top: 5px;
  text-align: right;
}

.support-admin-page .chat-window {
  flex: 1;
  background: #1e1e1e;
  border-radius: 8px;
  border: 1px solid #333;
  display: flex;
  flex-direction: column;
}

.support-admin-page .active-header {
  padding: 15px;
  background: #252526;
  border-bottom: 1px solid #333;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
}

.support-admin-page .messages-area {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.support-admin-page .msg {
  max-width: 70%;
  padding: 10px 15px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.4;
  word-wrap: break-word;
}

.support-admin-page .msg.in {
  align-self: flex-start;
  background: #333;
  color: #ddd;
  border-bottom-left-radius: 2px;
}

.support-admin-page .msg.out {
  align-self: flex-end;
  background: #007bff;
  color: #fff;
  border-bottom-right-radius: 2px;
}

.support-admin-page .msg img {
  max-width: 100%;
  border-radius: 4px;
  margin-top: 5px;
  cursor: pointer;
}

.support-admin-page .input-area {
  padding: 15px;
  background: #252526;
  border-top: 1px solid #333;
  display: flex;
  gap: 10px;
}

.support-admin-page .input-area input {
  flex: 1;
  padding: 12px;
  background: #1e1e1e;
  border: 1px solid #333;
  color: #fff;
  border-radius: 4px;
}

.support-admin-page .input-area button {
  padding: 0 20px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.support-admin-page .input-area button:disabled {
  background: #555;
}

.support-admin-page .empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: #666;
  flex-direction: column;
}

/* Leaflet test page (migrated from leaflet_test.html embedded style) */
.leaflet-test-page #map {
  height: 400px;
}

@media (max-width: 1024px) {
  .jarvis-btn,
  .btn.jarvis-btn {
    padding: 0.38rem 0.75rem;
    font-size: 0.88rem;
  }

  .hub-page .hub-user-controls {
    top: 12px;
    right: 12px;
    max-width: min(58vw, 640px);
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 0.35rem;
    gap: 0.42rem !important;
  }

  .hub-page .hub-user-controls > .hub-username {
    flex: 0 0 100%;
    text-align: right;
    font-size: 0.92rem;
  }

  .hub-page .container {
    grid-template-columns: repeat(3, minmax(126px, 176px));
    padding-top: 142px;
    gap: 0.86rem;
    max-width: 760px;
  }

  .hub-page .card {
    max-width: 176px;
    min-height: clamp(116px, 14vw, 152px);
    padding: 0.5rem 0.42rem;
  }

  .hub-page .card h2 {
    margin: 0.24rem 0 0.14rem;
    font-size: clamp(0.78rem, 1.3vw, 0.98rem);
  }

  .hub-page .card p {
    font-size: clamp(0.56rem, 0.86vw, 0.66rem);
    line-height: 1.08;
  }

  .hub-page .coming-soon-badge {
    padding: 3px 7px;
    font-size: 8.5px;
  }

  .hub-page .icon-container {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    font-size: 13px;
  }

  .hub-page .brand-subtitle {
    letter-spacing: 0.36rem;
  }
}

@media (max-width: 768px) {
  .jarvis-btn,
  .btn.jarvis-btn {
    padding: 0.34rem 0.66rem;
    font-size: 0.8rem;
  }

  .hub-page .container {
    grid-template-columns: repeat(2, minmax(114px, 162px));
    align-content: start;
    padding-top: 132px;
    gap: 0.82rem;
    max-width: 420px;
  }

  .hub-page .brand-hero {
    top: 10px;
    width: 100%;
    padding: 4px 0;
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0));
  }

  .hub-page .brand-title {
    font-size: clamp(2.1rem, 10vw, 3.2rem);
    letter-spacing: 0.16rem;
  }

  .hub-page .brand-subtitle {
    font-size: 0.62rem;
    letter-spacing: 0.2rem;
  }

  .hub-page .brand-chip {
    display: none;
  }

  .hub-page .card {
    width: 100%;
    min-width: 0;
    margin: 0;
    aspect-ratio: auto;
    max-width: 162px;
    min-height: 108px;
    padding: 0.44rem 0.38rem;
  }

  .hub-page .card h2 {
    margin: 0.2rem 0 0.1rem;
    font-size: clamp(0.72rem, 2.3vw, 0.86rem);
  }

  .hub-page .card p {
    font-size: clamp(0.52rem, 1.5vw, 0.62rem);
    line-height: 1.06;
  }

  .hub-page .coming-soon-badge {
    padding: 2px 6px;
    font-size: 8px;
  }

  .hub-page .icon-container {
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    font-size: 11px;
  }

  .hub-page .hub-user-controls {
    top: 8px;
    right: 8px;
    max-width: calc(100vw - 16px);
    gap: 0.3rem !important;
  }

  .hub-page .hub-user-controls > .hub-username {
    font-size: 0.8rem;
  }

  .hub-page #logout-btn {
    padding: 0.25rem 0.52rem;
    font-size: 0.76rem;
  }
}

@media (max-width: 560px) {
  .hub-page .container {
    grid-template-columns: repeat(2, minmax(90px, 126px));
    max-width: 520px;
    gap: 0.58rem;
  }

  .hub-page .card {
    min-width: 0;
    max-width: 126px;
    min-height: 96px;
    padding: 0.38rem 0.33rem;
  }

  .hub-page .card h2 {
    margin: 0.16rem 0 0.08rem;
    font-size: clamp(0.64rem, 2.8vw, 0.78rem);
  }

  .hub-page .card p {
    font-size: clamp(0.48rem, 2vw, 0.58rem);
    line-height: 1.04;
  }

  .hub-page .coming-soon-badge {
    padding: 2px 5px;
    font-size: 7px;
  }

  .hub-page .icon-container {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    font-size: 10px;
    margin: 0 auto 0.28rem;
  }
}

@media (max-width: 480px) {
  .hub-page {
    justify-content: flex-start;
    min-height: 100vh;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .hub-page .brand-hero {
    top: 6px;
    width: calc(100% - 10px);
    max-width: 460px;
    padding: 2px 8px 4px;
    border-radius: 10px;
  }

  .hub-page .brand-title {
    font-size: clamp(1.9rem, 11.5vw, 2.5rem);
    letter-spacing: 0.09rem;
  }

  .hub-page .brand-subtitle {
    letter-spacing: 0.14rem;
    font-size: 0.55rem;
  }

  .hub-page .hub-user-controls {
    position: fixed;
    top: 72px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: calc(100% - 12px);
    max-width: 460px;
    justify-content: center;
    gap: 0.3rem !important;
    row-gap: 0.3rem;
    padding: 4px 6px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(6px);
  }

  .hub-page .hub-user-controls > .hub-username {
    flex: 0 0 100%;
    text-align: center;
    font-size: 0.73rem;
    line-height: 1.2;
  }

  .hub-page .container {
    height: auto;
    min-height: 100vh;
    padding: 140px 8px 64px;
    gap: 0.62rem;
    overflow: visible;
    grid-template-columns: repeat(2, minmax(96px, 146px));
    max-width: 460px;
  }

  .hub-page .card {
    min-width: 0;
    max-width: none;
    min-height: 112px;
    border-radius: 14px;
    padding: 0.46rem 0.4rem;
  }

  .hub-page .card h2 {
    margin: 0.22rem 0 0.1rem;
    font-size: clamp(0.72rem, 3.8vw, 0.88rem);
  }

  .hub-page .card p {
    font-size: clamp(0.54rem, 2.2vw, 0.64rem);
    line-height: 1.08;
  }

  .hub-page .coming-soon-badge {
    padding: 2px 6px;
    font-size: 8px;
  }

  .hub-page .icon-container {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    font-size: 11px;
    margin: 0 auto 0.22rem;
  }

  .hub-page .status-dot {
    top: 12px;
    right: 12px;
    width: 8px;
    height: 8px;
  }

  .hub-page footer {
    bottom: 10px;
    font-size: 0.66rem;
  }
}

@media (max-width: 380px) {
  .hub-page .container {
    padding: 136px 8px 58px;
    grid-template-columns: 1fr;
    max-width: 330px;
  }

  .hub-page .card {
    min-height: 100px;
    padding: 0.42rem 0.36rem;
  }

  .hub-page .card h2 {
    font-size: 0.68rem;
    margin: 0.18rem 0 0.08rem;
  }

  .hub-page .card p {
    font-size: 0.52rem;
    line-height: 1.04;
  }

  .hub-page .icon-container {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    font-size: 10px;
    margin: 0 auto 0.16rem;
  }

  .hub-page .coming-soon-badge {
    padding: 2px 5px;
    font-size: 7.5px;
    letter-spacing: 0.2px;
  }

  .hub-page #instructions-header-btn > span:first-of-type,
  .hub-page #support-chat-btn > span:first-of-type {
    display: none;
  }

  .hub-page .jarvis-btn,
  .hub-page .btn.jarvis-btn,
  .hub-page #logout-btn {
    padding: 0.28rem 0.5rem;
    font-size: 0.72rem;
  }
}

@media (max-width: 1200px) {
  .hub-page .jarvis-neon-card:hover {
    transform: translateY(-2px);
  }
}

@media (max-width: 900px) {
  .hub-page .jarvis-neon-card:hover {
    transform: none;
  }
}

/* Avtozombi legacy neon theme (merged from neon_theme.css, scoped to page) */
.avtozombi-page {
  --bg-dark: #0f172a;
  --bg-card: #1e293b;
  --primary: #00f2ff;
  --primary-hover: #00c8d4;
  --secondary: #ff7f50;
  --text-main: #f1f5f9;
  --text-muted: #94a3b8;
  --border: #334155;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
}

.avtozombi-page {
  background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%) !important;
  background-attachment: fixed !important;
  color: var(--text-main) !important;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.avtozombi-page .card {
  background-color: rgba(30, 41, 59, 0.7) !important;
  border: 1px solid rgba(0, 242, 255, 0.3) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5) !important;
  transition: all 0.2s ease !important;
  margin-bottom: 12px !important;
  position: relative !important;
  overflow: hidden !important;
  backdrop-filter: blur(5px) !important;
}

.avtozombi-page .card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 0 15px rgba(0, 242, 255, 0.15) !important;
  border-color: var(--primary) !important;
}

.avtozombi-page .card-status-strip {
  width: 4px !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  box-shadow: 0 0 8px currentColor !important;
}

.avtozombi-page .keywords-tag {
  background: rgba(0, 242, 255, 0.1) !important;
  color: var(--primary) !important;
  border: 1px solid rgba(0, 242, 255, 0.3) !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
  font-size: 0.85em !important;
  font-weight: 600 !important;
  text-shadow: 0 0 5px rgba(0, 242, 255, 0.5) !important;
}

.avtozombi-page .priority-badge {
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 2px 8px !important;
  font-size: 0.8em !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.avtozombi-page .priority-high {
  color: #ef4444 !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 5px rgba(239, 68, 68, 0.3) !important;
}

.avtozombi-page .priority-med {
  color: #f59e0b !important;
  border-color: #f59e0b !important;
  box-shadow: 0 0 5px rgba(245, 158, 11, 0.3) !important;
}

.avtozombi-page .priority-low {
  color: #10b981 !important;
  border-color: #10b981 !important;
  box-shadow: 0 0 5px rgba(16, 185, 129, 0.3) !important;
}

.avtozombi-page .type-indicator {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  box-shadow: 0 0 5px currentColor !important;
}

.avtozombi-page .type-sidc {
  background-color: #2563eb !important;
  box-shadow: 0 0 8px #2563eb !important;
}

.avtozombi-page .type-comment {
  background-color: #16a34a !important;
  box-shadow: 0 0 8px #16a34a !important;
}

.avtozombi-page .type-qty {
  background-color: #9333ea !important;
  box-shadow: 0 0 8px #9333ea !important;
}

.avtozombi-page .action-label {
  color: var(--text-muted) !important;
  font-size: 0.9em !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.avtozombi-page .action-value {
  color: var(--text-main) !important;
  font-weight: 500 !important;
}

.avtozombi-page .folder-card {
  background: linear-gradient(145deg, #1e293b, #0f172a) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-main) !important;
}

.avtozombi-page .folder-card:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 0 15px rgba(0, 242, 255, 0.2) !important;
}

.avtozombi-page .folder-icon {
  color: var(--warning) !important;
  filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.4)) !important;
}

.avtozombi-page .toolbar {
  background-color: rgba(30, 41, 59, 0.7) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 16px !important;
}

.avtozombi-page input[type="text"]:not(.form-control),
.avtozombi-page input[type="number"]:not(.form-control),
.avtozombi-page select:not(.form-select),
.avtozombi-page textarea:not(.form-control) {
  background-color: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-main) !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
}

.avtozombi-page input:not(.form-control):focus,
.avtozombi-page select:not(.form-select):focus,
.avtozombi-page textarea:not(.form-control):focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 8px rgba(0, 242, 255, 0.3) !important;
  outline: none !important;
}

.avtozombi-page .btn-primary:not(.btn) {
  background-color: var(--primary) !important;
  color: #000 !important;
  font-weight: bold !important;
  border: none !important;
  box-shadow: 0 0 10px rgba(0, 242, 255, 0.4) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 8px 16px !important;
  border-radius: 4px !important;
}

.avtozombi-page .btn-primary:not(.btn):hover {
  background-color: #fff !important;
  box-shadow: 0 0 20px rgba(0, 242, 255, 0.6) !important;
}

.avtozombi-page .btn-secondary:not(.btn) {
  background-color: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
}

.avtozombi-page .btn-secondary:not(.btn):hover {
  border-color: var(--text-main) !important;
  color: var(--text-main) !important;
}

.avtozombi-page .modal-content {
  background-color: #1e293b !important;
  border: 1px solid var(--primary) !important;
  box-shadow: 0 0 50px rgba(0, 242, 255, 0.15) !important;
}

.avtozombi-page .modal-header {
  border-bottom: 1px solid var(--border) !important;
  background: rgba(0, 0, 0, 0.2) !important;
}

.avtozombi-page .modal-footer {
  border-top: 1px solid var(--border) !important;
  background: rgba(0, 0, 0, 0.2) !important;
}

.avtozombi-page ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.avtozombi-page ::-webkit-scrollbar-track {
  background: #0f172a;
}

.avtozombi-page ::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}

.avtozombi-page ::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* ===== Merged from JarvisMate/jarvismate_styles.css ===== */
:root {
  color-scheme: dark;
  
  /* === AZURE & CORAL THEME === */
  
  /* Backgrounds: Deep Space / Navy */
  --bg-app: #0f172a; 
  --bg-panel: #1e293b;
  --bg-input: #334155;
  --bg-hover: #475569;
  
  /* Text */
  --text-main: #cbd5e1;
  --text-muted: #94a3b8;
  --text-bright: #f8fafc;
  
  /* Borders */
  --border: #334155;
  
  /* Primary: NEON AZURE */
  --primary: #00f2ff;
  --primary-hover: #00b8cc;
  --primary-text: #0f172a; /* Dark text on bright azure */
  
  /* Secondary: VIBRANT CORAL */
  --secondary: #ff7f50;
  --secondary-hover: #ff6347;
  
  /* States */
  --border-focus: var(--primary);
  --danger: #ff4757;
  --success: #2ed573;
  
  /* Text Compatibility */
  --text-primary: #f8fafc;
  
  /* Measurements */
  --gap: 14px;
  --radius: 8px;
  
  --font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
  
  /* Effects */
  --shadow-glow: 0 0 10px rgba(0, 242, 255, 0.3);
  --shadow-coral: 0 0 10px rgba(255, 127, 80, 0.3);
}

/* Light Theme - Adjusted to keep Azure/Coral identity but legible */
body.light-theme {
  color-scheme: light;
  --bg-app: #f0f9ff; /* Light Azure Tint */
  --bg-panel: #ffffff;
  --bg-input: #ffffff;
  --bg-hover: #e0f2fe;
  
  --text-main: #334155;
  --text-muted: #64748b;
  --text-bright: #0f172a;
  
  --border: #cbd5e1;
  --primary: #0ea5e9; /* Darker Azure for light mode contrast */
  --primary-hover: #0284c7;
  --primary-text: #ffffff;
  
  --secondary: #f97316; /* Darker Coral */
  --text-primary: #0f172a;
}

body {
  background-color: var(--bg-app);
  /* Subtle gradient mesh for depth in dark mode */
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(0, 242, 255, 0.05) 0%, transparent 20%),
    radial-gradient(circle at 90% 80%, rgba(255, 127, 80, 0.05) 0%, transparent 20%);
  color: var(--text-main);
  font-family: var(--font-family);
  margin: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
}

/* Fancy Headings */
h1, h2, h3 {
  background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--text-bright); /* Fallback */
  font-weight: 700;
  display: inline-block;
  margin-top: 0;
}

footer {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  flex-shrink: 0;
}

/* Theme Toggle Button */
.theme-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, background-color 0.2s;
  z-index: 100;
}
.theme-toggle:hover {
  background-color: var(--bg-hover);
  color: var(--text-bright);
}
.theme-toggle svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Additional Columns Grid */
.cols-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}

.col-row {
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--bg-panel);
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.col-row input {
  flex: 1;
  min-width: 0; /* Prevent overflow */
}

.col-row .remove {
  padding: 4px 8px;
  font-size: 12px;
  white-space: nowrap;
}

a {
  color: var(--primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Inputs & Controls */
input[type="text"], 
input[type="search"], 
input[type="datetime-local"], 
textarea, 
select {
  background-color: var(--bg-input);
  color: var(--text-bright);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}

input:focus, 
textarea:focus, 
select:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 2px rgba(0, 242, 255, 0.15); /* Azure Ring */
}

select option {
  background-color: var(--bg-input);
  color: var(--text-bright);
}

label {
  color: var(--text-muted);
  font-size: 12px;
  margin-bottom: 4px;
  display: block;
}

/* Buttons (exclude Bootstrap buttons) */
button:not(.btn):not(.btn-close) {
  background-color: var(--bg-panel); /* Subtle contrast */
  color: var(--text-main);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
}

button:not(.btn):not(.btn-close):hover {
  background-color: var(--bg-hover);
  border-color: var(--text-muted);
}

button.primary {
  background: linear-gradient(135deg, var(--primary) 0%, #00d2ff 100%);
  color: #0f172a; /* Dark text for contrast on Neon */
  font-weight: 700;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 242, 255, 0.3);
}

button.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 242, 255, 0.4);
  filter: brightness(1.1);
}

/* Secondary / Action Button (Coral) */
button.secondary, button.action-btn {
  background: linear-gradient(135deg, var(--secondary) 0%, #ff6b6b 100%);
  color: white;
  font-weight: 600;
  border: none;
  box-shadow: 0 4px 12px rgba(255, 127, 80, 0.3);
}

button.secondary:hover, button.action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255, 127, 80, 0.4); 
  filter: brightness(1.1);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-app);
}
::-webkit-scrollbar-thumb {
  background: #424242;
  border-radius: 5px;
  border: 2px solid var(--bg-app);
}
::-webkit-scrollbar-thumb:hover {
  background: #4f4f4f;
}

/* Common Layout Utilities */
.row {
  display: flex;
  gap: var(--gap);
}
.col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.input-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* JarvisMate main actions: bottom-left compact dock */
.csv-action-dock {
  position: fixed;
  left: 16px;
  bottom: 112px;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: calc(100vw - 32px);
}

.csv-action-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.csv-action-buttons > button:not(.btn):not(.btn-close) {
  min-width: 170px;
}

/* Keep both bottom-left action buttons visually identical. */
.csv-action-buttons #generate-btn,
.csv-action-buttons #edit-csv-btn {
  background: linear-gradient(135deg, var(--primary) 0%, #00d2ff 100%) !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  text-shadow: none !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(0, 242, 255, 0.3) !important;
  height: 38px;
}

.csv-action-buttons #generate-btn:hover,
.csv-action-buttons #edit-csv-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 242, 255, 0.4) !important;
  filter: brightness(1.08);
}

.csv-action-dock #status {
  margin-top: 0;
  font-size: 12px;
}

@media (max-width: 700px) {
  .csv-action-dock {
    left: 10px;
    right: 10px;
    bottom: 126px;
    max-width: none;
  }

  .csv-action-buttons {
    width: 100%;
    flex-wrap: nowrap;
  }

  .csv-action-buttons > button:not(.btn):not(.btn-close) {
    min-width: 0;
    flex: 1 1 0;
  }
}

/* Dropdowns (Custom) */
.dropdown-content {
  background-color: var(--bg-panel);
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  color: var(--text-main);
}
.dropdown-content ul li:hover {
  background-color: var(--bg-hover);
}

/* Tabulator Dark Theme Overrides */
.tabulator {
  background-color: var(--bg-panel);
  border: 1px solid var(--border);
}
.tabulator .tabulator-header {
  background-color: var(--bg-app);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}
.tabulator .tabulator-header .tabulator-col {
  background-color: var(--bg-app);
  border-right: 1px solid var(--border);
}
.tabulator .tabulator-row {
  background-color: var(--bg-panel);
  color: var(--text-main);
  border-bottom: 1px solid var(--border);
}
.tabulator .tabulator-row.tabulator-row-even {
  background-color: var(--bg-panel);
}
.tabulator .tabulator-row:hover {
  background-color: var(--bg-hover);
}
.tabulator .tabulator-cell {
  border-right: 1px solid var(--border);
}
.tabulator-row .tabulator-cell.cell-selected {
    outline: 2px solid var(--border-focus) !important;
    background-color: rgba(0, 242, 255, 0.1) !important;
    outline-offset: -2px;
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 2000;
  backdrop-filter: blur(2px);
}
.modal-content {
  background: var(--bg-panel);
  color: var(--text-main);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

/* Tabulator List Editor (Dropdown) Dark Theme */
.tabulator-edit-select-list {
  background-color: var(--bg-panel) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}

.tabulator-edit-select-list .tabulator-edit-select-list-item {
  color: var(--text-main) !important;
  background-color: var(--bg-panel) !important;
}

.tabulator-edit-select-list .tabulator-edit-select-list-item.active,
.tabulator-edit-select-list .tabulator-edit-select-list-item:hover {
  background-color: var(--bg-hover) !important;
  color: var(--text-bright) !important;
}

.tabulator-edit-select-list .tabulator-edit-select-list-notice {
  color: var(--text-muted) !important;
  background-color: var(--bg-panel) !important;
}

.tabulator-edit-select-list .tabulator-edit-select-list-group {
  color: var(--text-bright) !important;
  background-color: var(--bg-app) !important;
  border-bottom: 1px solid var(--border) !important;
}

.tabulator-edit-select-list::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.tabulator-edit-select-list::-webkit-scrollbar-track {
  background: var(--bg-panel);
}
.tabulator-edit-select-list::-webkit-scrollbar-thumb {
  background: #424242;
  border-radius: 5px;
  border: 2px solid var(--bg-panel);
}
.tabulator-edit-select-list::-webkit-scrollbar-thumb:hover {
  background: #4f4f4f;
}

/* Tabulator v6 List Editor Dark Theme */
.tabulator-edit-list {
    background-color: var(--bg-panel) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}

.tabulator-edit-list .tabulator-edit-list-item {
    color: var(--text-main) !important;
    background-color: var(--bg-panel) !important;
}

.tabulator-edit-list .tabulator-edit-list-item.active,
.tabulator-edit-list .tabulator-edit-list-item:hover {
    background-color: var(--bg-hover) !important;
    color: var(--text-bright) !important;
}

.tabulator-edit-list .tabulator-edit-list-group {
    color: var(--text-bright) !important;
    background-color: var(--bg-app) !important;
    border-bottom: 1px solid var(--border) !important;
}

.tabulator-edit-list .tabulator-edit-list-placeholder {
    color: var(--text-muted) !important;
}

.tabulator-edit-list input {
    background-color: var(--bg-input) !important;
    color: var(--text-bright) !important;
    border: 1px solid var(--border) !important;
}

/* Tabulator Menu (Context Menu) Dark Theme */
.tabulator-menu {
  background-color: var(--bg-panel) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}

.tabulator-menu .tabulator-menu-item {
  background-color: var(--bg-panel) !important;
  color: var(--text-main) !important;
}

.tabulator-menu .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover {
  background-color: var(--bg-hover) !important;
  color: var(--text-bright) !important;
}

.tabulator-menu .tabulator-menu-separator {
  border-bottom: 1px solid var(--border) !important;
}

/* Custom Dropdown Styles */
.sidc-dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  background-color: var(--bg-panel);
  border: 1px solid var(--border);
  z-index: 2500; /* Higher than modal (2000) */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  border-radius: var(--radius);
  margin-top: 4px;
  display: none; /* Hidden by default */
}

.sidc-dropdown-list.visible {
  display: block;
}

.sidc-dropdown-item {
  padding: 8px 12px;
  cursor: pointer;
  color: var(--text-primary);
  transition: background-color 0.2s;
}

.sidc-dropdown-item:hover, .sidc-dropdown-item.selected {
  background-color: var(--bg-hover);
  color: var(--text-bright);
}

/* Scrollbar for dropdown */
.sidc-dropdown-list::-webkit-scrollbar {
  width: 8px;
}

.sidc-dropdown-list::-webkit-scrollbar-track {
  background: var(--bg-panel);
}

.sidc-dropdown-list::-webkit-scrollbar-thumb {
  background-color: var(--border);
  border-radius: 4px;
}

.sidc-dropdown-list::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-muted);
}

/* Clear Button Styles */
.input-with-clear {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.input-with-clear input {
  padding-right: 32px !important;
}

.clear-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 18px;
  width: 24px;
  height: 24px;
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: color 0.2s;
}

.clear-btn.visible {
  display: flex;
}

#coord-input {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}

/* Admin Button Custom Styles */
#open-admin-btn {
    color: var(--secondary);
    background-color: rgba(255, 127, 80, 0.1);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 127, 80, 0.35);
}

#open-admin-btn:hover {
    background-color: rgba(255, 127, 80, 0.15);
    color: var(--secondary-hover);
    box-shadow: var(--shadow-coral);
    transform: scale(1.05);
    border-color: rgba(255, 127, 80, 0.55);
}

#open-admin-btn svg {
    width: 26px;
    height: 26px;
}

/* JarvisMate: keep the main control strip on one line and scale elements down with viewport width. */
.jarvismate-app-page {
  --jm-label-font: 12px;
  --jm-control-font: 13px;
  --jm-control-height: 38px;
  height: 100vh;
  overflow-y: hidden;
}

.jarvismate-app-page .jm-no-scroll-shell {
  min-height: 0;
  overflow-y: hidden !important;
}

.jarvismate-app-page .jm-main-controls-row {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
  align-items: end;
  min-width: 0;
}

.jarvismate-app-page .jm-main-controls-row > .col {
  min-width: 0;
  gap: 4px;
}

.jarvismate-app-page .jm-main-controls-row label {
  font-size: var(--jm-label-font);
  line-height: 1.2;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jarvismate-app-page .jm-main-controls-row .form-control,
.jarvismate-app-page .jm-main-controls-row .jm-bs-trigger,
.jarvismate-app-page .jm-main-controls-row input[type="datetime-local"] {
  min-width: 0;
  height: var(--jm-control-height);
  font-size: var(--jm-control-font);
  padding-top: 6px;
  padding-bottom: 6px;
}

.jarvismate-app-page .jm-main-controls-row .jm-bs-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.jarvismate-app-page .jm-main-controls-row .input-with-clear input {
  padding-right: 30px !important;
}

.jarvismate-app-page .jm-main-controls-row .clear-btn {
  width: 20px;
  height: 20px;
  font-size: 16px;
}

.jarvismate-app-page .jm-kml-actions {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 1;
  max-width: 100%;
  margin-top: 8px;
}

.jarvismate-app-page .jm-kml-actions .csv-action-buttons {
  flex-wrap: nowrap;
}

.jarvismate-app-page .jm-kml-actions .csv-action-buttons > button:not(.btn):not(.btn-close) {
  min-width: 150px;
  height: var(--jm-control-height);
  font-size: var(--jm-control-font);
}

.jarvismate-app-page .jm-header-controls {
  gap: 10px !important;
  margin-top: 10px !important;
  margin-right: 12px !important;
}

.jarvismate-app-page .jm-user-badge {
  border: 1px solid rgba(255, 127, 80, 0.55) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 238, 232, 0.98)) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.2);
  padding: 4px 8px !important;
  min-height: 34px;
}

.jarvismate-app-page .jm-header-username {
  color: #8aa1bc;
  font-weight: 700 !important;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.jarvismate-app-page .jm-open-admin-btn {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}

@media (max-width: 1600px) {
  .jarvismate-app-page {
    --jm-label-font: 11px;
    --jm-control-font: 12px;
    --jm-control-height: 36px;
  }
}

@media (max-width: 1320px) {
  .jarvismate-app-page {
    --jm-label-font: 10px;
    --jm-control-font: 11px;
    --jm-control-height: 34px;
  }

  .jarvismate-app-page .jm-main-controls-row .jm-bs-trigger {
    padding-left: 10px;
    padding-right: 10px;
  }

  .jarvismate-app-page .jm-kml-actions .csv-action-buttons > button:not(.btn):not(.btn-close) {
    min-width: 136px;
  }
}

@media (max-width: 1180px) {
  .jarvismate-app-page .jm-header-controls {
    transform: scale(0.94);
    transform-origin: top right;
  }

  .jarvismate-app-page .jm-kml-actions .csv-action-buttons > button:not(.btn):not(.btn-close) {
    min-width: 124px;
  }
}

/* Updates Notification */
#updates-notification {
    background-color: #2563eb;
    color: white;
    padding: 10px 20px;
    display: none;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 1000;
    border-radius: 0;
}
#updates-notification button {
    background: white;
    color: #2563eb;
    border: none;
    padding: 5px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
}

/* Updates Modal Specifics */
.updates-modal-content {
    width: 450px;
    max-width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    margin-top: 50px; /* Push down to avoid header overlap */
}
.update-item {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 6px;
}
.update-item.processed {
    opacity: 0.6;
    pointer-events: none;
}
.update-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.update-type {
    background: var(--primary);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    text-transform: uppercase;
    margin-right: 8px;
}
.update-title {
    font-weight: 600;
    font-size: 13px;
}
.update-diff {
    font-family: monospace;
    font-size: 12px;
    background: rgba(0,0,0,0.2);
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 8px;
    white-space: normal; /* Changed from pre-wrap to normal to fix spacing */
}
.update-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.btn-approve {
    background: var(--success);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}
.btn-reject {
    background: transparent;
    color: var(--danger);
    border: 1px solid var(--danger);
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}
.btn-reject:hover {
    background: var(--danger);
    color: white;
}


/* === CORAL ACCENTS (Secondary Theme) === */

/* Secondary Action Buttons */
#edit-csv-btn, 
#add-col {
  color: var(--secondary) !important;
  border: 1px solid rgba(255, 127, 80, 0.5) !important;
  background: transparent !important;
}

#edit-csv-btn:hover, 
#add-col:hover {
  background-color: rgba(255, 127, 80, 0.1) !important;
  border-color: var(--secondary) !important;
  box-shadow: var(--shadow-coral) !important;
  color: var(--secondary-hover) !important;
}

/* Breadcrumbs Hover */
.breadcrumb-link:hover {
  color: var(--secondary);
  text-decoration: none;
}

/* Input Clear Buttons */
.clear-btn:hover {
  color: var(--secondary);
}

/* Active/Focus states for specialized inputs could go here if needed */

/* === FAST DRAW TOOLBOX === */
.map-search-control {
  width: 240px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.map-search-box {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.map-search-input::placeholder {
  color: rgba(210, 225, 248, 0.9);
  opacity: 1;
}

#library-search-input::placeholder {
  color: rgba(210, 225, 248, 0.9);
  opacity: 1;
}

.map-search-results {
  border-radius: 6px;
}

.map-draw-host {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 2px;
  position: relative;
  overflow: visible;
}

.map-draw-workspace {
  display: none;
  align-items: stretch;
  gap: 0;
  margin-top: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(12, 23, 43, 0.96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
}

.map-draw-workspace.is-open {
  display: flex;
  overflow: visible !important;
}

.map-draw-layer-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 24px 24px;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(92, 122, 173, 0.55);
  border-radius: 6px;
  background: rgba(33, 51, 83, 0.9);
  min-height: 26px;
  padding: 1px 4px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.map-draw-layer-row.is-active {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px rgba(0, 242, 255, 0.25);
}

.map-draw-layer-row button {
  border: 1px solid transparent;
  background: rgba(38, 61, 97, 0.82);
  color: #d7e7ff;
  cursor: pointer;
  padding: 0;
  margin: 0;
  border-radius: 5px;
  line-height: 1;
}

.map-draw-layer-row button:hover {
  border-color: rgba(141, 181, 247, 0.58);
  background: rgba(53, 83, 129, 0.92);
}

.map-draw-layer-eye {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}

.map-draw-layer-name {
  text-align: left;
  font-size: 12px;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.map-draw-layer-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 12px;
  color: #b989ff;
}

.map-draw-layer-share:disabled,
.map-draw-layer-delete:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.map-draw-layer-delete {
  color: #ff8f8f !important;
  font-size: 12px;
  line-height: 1;
}

.map-draw-layer-eye i,
.map-draw-layer-share i,
.map-draw-layer-delete i,
.map-draw-layers-head button i {
  pointer-events: none;
}

.draw-layer-share-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 12, 24, 0.62);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 12000;
}

.draw-layer-share-modal-backdrop.is-open {
  display: flex;
}

.draw-layer-share-modal {
  width: min(540px, calc(100vw - 28px));
  max-height: min(70vh, 560px);
  border: 1px solid rgba(96, 132, 191, 0.68);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(10, 30, 63, 0.985) 0%, rgba(7, 22, 46, 0.985) 100%);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.draw-layer-share-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(84, 124, 190, 0.5);
  background: linear-gradient(180deg, rgba(20, 48, 94, 0.45) 0%, rgba(10, 28, 56, 0) 100%);
}

.draw-layer-share-modal-title {
  color: var(--text-bright);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.draw-layer-share-modal-close {
  border: 1px solid rgba(108, 138, 191, 0.6);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(47, 73, 117, 0.9) 0%, rgba(33, 55, 90, 0.92) 100%);
  color: #d7e8ff;
  width: 34px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}

.draw-layer-share-modal-close:hover {
  border-color: rgba(158, 190, 243, 0.86);
  box-shadow: 0 0 0 1px rgba(158, 190, 243, 0.2);
}

.draw-layer-share-modal-close:active {
  transform: translateY(1px);
}

.draw-layer-share-modal-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px 14px;
  min-height: 0;
  overflow: visible;
}

.draw-layer-share-modal-status {
  min-height: 0;
  color: #d5e7ff;
  font-size: 13px;
  line-height: 1.4;
  padding: 0 1px;
}

.draw-layer-share-modal-status.is-empty {
  display: none;
}

.draw-layer-share-modal-form {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.9fr) minmax(0, 0.95fr);
  gap: 8px;
  align-items: center;
}

.draw-layer-share-user-field {
  position: relative;
  min-width: 0;
}

.draw-layer-share-user-input,
.draw-layer-share-modal-form select,
.draw-layer-share-modal-form button {
  height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(112, 146, 205, 0.62);
  background: rgba(22, 44, 79, 0.96);
  color: #e1eeff;
  font-size: 14px;
  line-height: 1;
  outline: none;
}

.draw-layer-share-user-input,
.draw-layer-share-modal-form select {
  width: 100%;
  padding: 0 10px;
}

.draw-layer-share-user-input:focus,
.draw-layer-share-modal-form select:focus,
.draw-layer-share-modal-form button:focus-visible {
  border-color: rgba(157, 192, 245, 0.88);
  box-shadow: 0 0 0 2px rgba(111, 158, 230, 0.26);
}

.draw-layer-share-modal-form button {
  min-width: 0;
  width: 100%;
  padding: 0 10px;
  cursor: pointer;
  font-weight: 500;
  letter-spacing: 0;
  background: linear-gradient(180deg, rgba(65, 101, 162, 0.96) 0%, rgba(42, 76, 130, 0.96) 100%);
}

.draw-layer-share-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  border: 1px solid rgba(118, 150, 206, 0.6);
  border-radius: 10px;
  background: rgba(11, 27, 56, 0.985);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.38);
  max-height: 210px;
  overflow-y: auto;
  overflow-x: hidden;
  display: none;
  z-index: 12050;
  overscroll-behavior: contain;
}

.draw-layer-share-suggest.is-open {
  display: block;
}

.draw-layer-share-suggest-item {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-bottom: 1px solid rgba(91, 124, 182, 0.28);
  background: transparent;
  color: #d9e9ff;
  text-align: left;
  padding: 9px 12px;
  font-size: 13px;
  cursor: pointer;
}

.draw-layer-share-suggest-item:last-child {
  border-bottom: 0;
}

.draw-layer-share-suggest-item:hover {
  background: rgba(56, 93, 156, 0.32);
}

.draw-layer-share-suggest-empty {
  padding: 10px 12px;
  color: #aec8ef;
  font-size: 12px;
}

.draw-layer-share-modal-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  max-height: 280px;
  padding-right: 2px;
}

.draw-layer-share-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(95, 128, 187, 0.5);
  border-radius: 9px;
  background: rgba(23, 43, 74, 0.92);
  padding: 9px 10px;
}

.draw-layer-share-user {
  color: #e0eeff;
  font-size: 13px;
}
.leaflet-popup-content .jarvis-point-popup {
  min-width: 235px;
  background: linear-gradient(180deg, rgba(15, 34, 66, 0.96) 0%, rgba(8, 21, 43, 0.96) 100%);
  border: 1px solid rgba(98, 132, 192, 0.55);
  border-radius: 10px;
}
.leaflet-popup-content .jarvis-point-popup .card-body {
  color: #e6f0ff;
}
.leaflet-popup-content .jarvis-point-popup .text-muted {
  color: #9db9e4 !important;
  opacity: 1 !important;
}
.leaflet-popup-content .jarvis-point-popup .jarvis-point-popup-head {
  border-color: rgba(120, 152, 208, 0.35) !important;
}
.leaflet-popup-content .jarvis-point-popup .jarvis-point-popup-value {
  color: #d8e7ff;
  font-weight: 500;
}
.leaflet-popup-content .jarvis-point-popup .jarvis-point-popup-copy {
  font-size: 11px;
  border-color: rgba(112, 168, 255, 0.62) !important;
  color: #cfe2ff !important;
  background: rgba(20, 43, 84, 0.35) !important;
}

.leaflet-popup-content .jarvis-point-popup .jarvis-point-popup-copy:hover {
  color: #f3f8ff !important;
  border-color: rgba(128, 193, 255, 0.86) !important;
  background: rgba(33, 74, 132, 0.5) !important;
}

.jarvis-point-popup-wrap .leaflet-popup-content-wrapper {
  background: rgba(0, 0, 0, 0) !important;
  box-shadow: none !important;
  border: none !important;
  overflow: visible !important;
}

.jarvis-point-popup-wrap .leaflet-popup-content {
  margin: 0 !important;
}

.jarvis-point-popup-wrap .leaflet-popup-tip {
  background: rgba(10, 26, 52, 0.96) !important;
}

.jarvis-point-popup-wrap .leaflet-popup-close-button {
  color: #e1ecff !important;
  top: 8px !important;
  right: 8px !important;
  width: 22px !important;
  height: 22px !important;
  line-height: 20px !important;
  border-radius: 999px;
  background: rgba(10, 26, 52, 0.6);
  border: 1px solid rgba(126, 167, 228, 0.45);
  text-align: center;
}

.jarvis-point-popup-wrap .leaflet-popup-close-button:hover {
  color: #ffffff !important;
  background: rgba(24, 53, 99, 0.85);
}

.draw-layer-share-remove {
  height: 32px;
  border: 1px solid rgba(200, 120, 120, 0.6);
  border-radius: 8px;
  background: rgba(97, 46, 46, 0.85);
  color: #ffd7d7;
  padding: 0 10px;
  cursor: pointer;
}

.draw-layer-share-empty {
  color: #aac4eb;
  font-size: 13px;
  padding: 6px 2px;
}

.draw-edit-confirm-popup .leaflet-popup-content-wrapper {
  border: 1px solid rgba(109, 145, 204, 0.65);
  border-radius: 10px;
  background: rgba(10, 30, 61, 0.98);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.34);
}

.draw-edit-confirm-popup .leaflet-popup-content {
  margin: 6px;
}

.draw-edit-confirm-popup .leaflet-popup-tip {
  background: rgba(9, 28, 59, 0.98);
}

.draw-edit-confirm-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 128px;
}

.draw-edit-confirm-btn {
  width: 100%;
  min-height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 0.45rem;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
}

.draw-edit-confirm-btn:hover {
  filter: brightness(1.06);
}

.draw-edit-confirm-btn i {
  font-size: 13px;
  line-height: 1;
  transform: translateY(-0.5px);
}

.draw-edit-confirm-label {
  display: inline-block;
  line-height: 1;
}

@media (max-width: 760px) {
  .draw-layer-share-modal {
    width: min(98vw, 640px);
    max-height: 82vh;
  }

  .draw-layer-share-modal-title {
    font-size: 18px;
  }

  .draw-layer-share-modal-form {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .draw-layer-share-modal-form button {
    width: 100%;
  }
}

/* Keep draw workspace visible outside the default Leaflet control box width. */
.leaflet-top.leaflet-right,
.leaflet-control,
.map-search-control,
.map-search-box {
  overflow: visible !important;
}

.map-draw-host {
  --draw-strip-reserve: 36px;
  --draw-safe-bottom: 124px;
  --draw-toolbar-btn-size: 30px;
  --draw-anchor-gap: 2px;
  --draw-anchor-overlap: 2px;
  --draw-anchor-left-gap: 12px;
  --draw-anchor-top: calc(var(--draw-toolbar-btn-size) + var(--draw-anchor-gap));
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  width: 184px;
  max-width: min(88vw, 184px);
  margin-left: auto;
  margin-top: 0 !important;
}

.map-draw-actions-strip {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  min-height: 30px;
  background: transparent;
  border: 0;
  pointer-events: auto;
  position: relative;
  z-index: 2147483600;
}

.map-draw-actions-strip > * {
  pointer-events: auto;
}

.map-draw-quick-actions {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  pointer-events: auto;
  position: relative;
  z-index: 2147483601;
}

.map-draw-workspace {
  display: none;
  position: absolute;
  top: var(--draw-anchor-top);
  right: calc(100% - var(--draw-anchor-overlap));
  align-items: flex-start;
  gap: 6px;
  width: fit-content;
  max-width: min(calc(100vw - 18px - var(--draw-strip-reserve)), 460px);
  max-height: calc(100vh - 42px - var(--draw-safe-bottom));
  z-index: 3205;
}

.map-draw-host.is-anchor-left .map-draw-workspace {
  top: var(--draw-anchor-top);
  right: calc(100% - var(--draw-anchor-overlap));
}

.map-draw-workspace.is-anchored-to-pencil {
  position: fixed !important;
  top: var(--draw-anchor-screen-top, var(--draw-anchor-top)) !important;
  left: var(--draw-anchor-screen-left, auto) !important;
  right: auto !important;
  transform: translateX(calc(-100% - var(--draw-anchor-left-gap))) !important;
}

.map-draw-workspace.is-open {
  display: flex;
}

.map-draw-workspace,
.map-draw-workspace.is-open {
  overflow: visible !important;
}

.map-draw-workspace .map-draw-layers-dock,
.map-draw-workspace .map-draw-panel,
.map-draw-workspace .map-draw-layers-list {
  max-height: inherit !important;
}

.map-draw-toggle-btn {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(88, 120, 182, 0.9);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(17, 41, 79, 0.96) 0%, rgba(10, 27, 55, 0.96) 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #f1f7ff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.24);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
  align-self: flex-end;
}

.map-draw-screenshot-btn {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(88, 120, 182, 0.9);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(17, 41, 79, 0.96) 0%, rgba(10, 27, 55, 0.96) 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #9fd8ff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.24);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s, color 0.2s;
  align-self: flex-end;
  pointer-events: auto;
  position: relative;
  z-index: 2147483602;
  touch-action: manipulation;
}

.map-draw-send-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(88, 120, 182, 0.9);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(17, 41, 79, 0.96) 0%, rgba(10, 27, 55, 0.96) 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #8fe2b2;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.24);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s, color 0.2s;
  align-self: flex-end;
  pointer-events: auto;
  position: relative;
  z-index: 2147483602;
  touch-action: manipulation;
}

.map-draw-signal-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(88, 120, 182, 0.9);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(17, 41, 79, 0.96) 0%, rgba(10, 27, 55, 0.96) 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ffd56a;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.24);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s, color 0.2s;
  align-self: flex-end;
  pointer-events: auto;
  position: relative;
  z-index: 2147483602;
  touch-action: manipulation;
}

.map-draw-signal-btn i {
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
}

.map-draw-screenshot-btn i {
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
}

.map-draw-send-btn i {
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
}

.map-draw-toggle-label {
  font-size: 16px;
  line-height: 1;
  color: #f8fbff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  transform: translateY(-0.5px);
  pointer-events: none;
}

.map-draw-toggle-btn i {
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
}

.map-draw-toggle-btn svg {
  width: 17px;
  height: 17px;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}

.map-draw-toggle-btn svg .stroke {
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.map-draw-tool-btn i {
  font-size: 15px;
  line-height: 1;
}

.map-draw-toggle-btn svg .fill {
  fill: currentColor;
  stroke: none;
}

.map-draw-toggle-btn:hover,
.map-draw-toggle-btn.is-active {
  border-color: var(--primary);
  box-shadow: 0 0 12px rgba(0, 242, 255, 0.24);
}

.map-draw-screenshot-btn:hover,
.map-draw-screenshot-btn.is-active {
  border-color: var(--primary);
  color: #d7f2ff;
  box-shadow: 0 0 12px rgba(0, 242, 255, 0.24);
}

.map-draw-signal-btn:hover,
.map-draw-signal-btn.is-active {
  border-color: #f7c948;
  color: #ffe9a9;
  box-shadow: 0 0 12px rgba(247, 201, 72, 0.28);
}

.map-draw-send-btn:hover,
.map-draw-send-btn.is-active {
  border-color: #74d59b;
  color: #d4fbe2;
  box-shadow: 0 0 12px rgba(116, 213, 155, 0.28);
}

.map-draw-toggle-btn:active {
  transform: translateY(1px);
}

.map-draw-screenshot-btn:active {
  transform: translateY(1px);
}

.map-draw-signal-btn:active {
  transform: translateY(1px);
}

.map-draw-send-btn:active {
  transform: translateY(1px);
}

.map-draw-panel {
  display: none;
  width: 184px;
  max-width: min(88vw, 184px);
  max-height: calc(100vh - 210px);
  overflow: auto;
  align-self: stretch;
  margin-top: 0;
  border: 1px solid rgba(88, 120, 182, 0.52);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(15, 34, 66, 0.96) 0%, rgba(8, 21, 43, 0.96) 100%);
  box-shadow: 0 8px 20px rgba(2, 8, 20, 0.42);
  padding: 4px;
  backdrop-filter: none;
}

.map-draw-panel.is-open {
  display: block;
}

.draw-layer-dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 12, 24, 0.62);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 12010;
}

.draw-layer-dialog-backdrop.is-open {
  display: flex;
}

.draw-layer-dialog {
  width: min(480px, calc(100vw - 28px));
  max-height: min(74vh, 620px);
  border: 1px solid rgba(84, 114, 166, 0.7);
  border-radius: 10px;
  background: rgba(14, 26, 49, 0.98);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.draw-layer-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(84, 114, 166, 0.55);
}

.draw-layer-dialog-title {
  color: var(--text-bright);
  font-size: 14px;
  font-weight: 600;
}

.draw-layer-dialog-close {
  border: 1px solid rgba(108, 138, 191, 0.6);
  border-radius: 6px;
  background: rgba(40, 61, 97, 0.9);
  color: #d7e8ff;
  width: 26px;
  height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.draw-layer-dialog-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px 12px;
  min-height: 0;
}

.draw-layer-dialog-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.draw-layer-dialog-field label {
  color: #bcd4f8;
  font-size: 12px;
}

.draw-layer-dialog-input,
.draw-layer-dialog-field select {
  height: 34px;
  border-radius: 7px;
  border: 1px solid rgba(107, 138, 193, 0.62);
  background: rgba(31, 50, 82, 0.95);
  color: #d5e7ff;
  padding: 0 9px;
}

.draw-layer-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.draw-layer-dialog-actions-triple {
  justify-content: space-between;
}

.draw-layer-dialog-actions button {
  height: 32px;
  border-radius: 7px;
  border: 1px solid rgba(107, 138, 193, 0.62);
  background: rgba(31, 50, 82, 0.95);
  color: #d5e7ff;
  padding: 0 10px;
  cursor: pointer;
}

.draw-layer-dialog-actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.map-draw-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}

.map-draw-node-hints {
  margin-bottom: 8px;
  border: 1px dashed rgba(130, 176, 238, 0.5);
  border-radius: 6px;
  background: rgba(28, 53, 89, 0.5);
  padding: 6px 7px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.map-draw-node-hints div {
  font-size: 10px;
  color: #c6ddff;
  line-height: 1.25;
}

.map-draw-tool-btn {
  border: 1px solid rgba(101, 133, 191, 0.55);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(48, 71, 109, 0.9) 0%, rgba(34, 52, 83, 0.92) 100%);
  color: #d7e6ff;
  min-height: 24px;
  padding: 0;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease, color 0.18s ease;
}

.map-draw-tool-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  pointer-events: none;
}

.map-draw-tool-btn:hover {
  border-color: #89d7ff;
  color: #f2f9ff;
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(114, 195, 255, 0.4), 0 6px 14px rgba(0, 0, 0, 0.25);
}

.map-draw-tool-btn.is-active {
  border-color: #32d3ff;
  color: #f6fdff;
  background: linear-gradient(180deg, rgba(31, 114, 154, 0.95) 0%, rgba(16, 81, 124, 0.95) 100%);
  box-shadow: 0 0 0 1px rgba(50, 211, 255, 0.52), 0 0 12px rgba(35, 173, 228, 0.38);
}

.map-draw-section-title {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 5px 0 4px;
}

.map-draw-controls-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.map-draw-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 4px;
}

.map-draw-field label {
  font-size: 9px;
  color: var(--text-muted);
  margin: 0;
}

.map-draw-color-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.map-draw-color-trigger {
  width: 32px;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 6px;
  background: var(--picker-color, #ffd400);
  cursor: pointer;
  padding: 2px 3px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.map-draw-color-swatch {
  display: none;
}

.map-draw-color-icon {
  font-size: 10px;
  color: #f3f8ff;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
}

.map-draw-color-trigger.is-light-color .map-draw-color-icon {
  color: #14243b;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.45);
}

.map-draw-color-trigger:hover,
.map-draw-color-trigger.is-active {
  border-color: #ffffff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.25);
  filter: saturate(1.08);
}

.map-color-popover {
  position: fixed;
  z-index: 2147483010;
  display: none;
  top: 0;
  left: 0;
  width: 320px;
  max-width: min(320px, calc(100vw - 16px));
  border: 1px solid rgba(110, 145, 202, 0.68);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(12, 30, 58, 0.99) 0%, rgba(8, 22, 44, 0.99) 100%);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
  padding: 8px;
}

.map-color-popover.is-open {
  display: block;
}

.map-color-popover-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.map-color-swatches {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 6px;
}

.map-color-swatch-btn {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 5px;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.38);
}

.map-color-swatch-btn:hover {
  transform: scale(1.06);
  border-color: #ffffff;
}

.map-color-editor {
  flex: 1 1 auto;
  min-width: 0;
}

.map-color-sv {
  position: relative;
  width: 100%;
  height: 124px;
  border-radius: 6px;
  overflow: hidden;
  cursor: crosshair;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.map-color-sv-white,
.map-color-sv-black {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.map-color-sv-white {
  background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
}

.map-color-sv-black {
  background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%);
}

.map-color-sv-cursor {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.map-color-controls-row {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.map-color-preview {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
  flex: 0 0 auto;
}

.map-color-hue {
  flex: 1 1 auto;
  margin: 0;
  accent-color: #00f2ff;
}

.map-color-rgb-grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.map-color-rgb-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.map-color-rgb-item input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-input);
  color: var(--text-main);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 5px 6px;
  font-size: 10px;
}

.map-color-rgb-item label {
  font-size: 10px;
  color: var(--text-muted);
  margin: 0;
  text-align: center;
}

.map-draw-field input[type="range"] {
  width: 100%;
  margin: 2px 0;
}

.map-draw-field input[type="number"] {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-input);
  color: var(--text-main);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 4px 5px;
  font-size: 10px;
  appearance: textfield;
  -moz-appearance: textfield;
}

.map-draw-field input[type="number"]::-webkit-outer-spin-button,
.map-draw-field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.map-draw-dash-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
}

.map-draw-arrow-ends-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
}

.map-draw-dash-btn {
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-input);
  padding: 5px 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.map-draw-dash-btn:hover,
.map-draw-dash-btn.is-active {
  border-color: var(--primary);
  box-shadow: 0 0 8px rgba(0, 242, 255, 0.22);
}

.map-draw-arrow-ends-btn {
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-input);
  color: var(--text-main);
  padding: 3px 2px;
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
}

.map-draw-arrow-ends-btn span {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.map-draw-arrow-ends-btn:hover,
.map-draw-arrow-ends-btn.is-active {
  border-color: var(--primary);
  color: var(--text-bright);
  box-shadow: 0 0 8px rgba(0, 242, 255, 0.22);
}

.dash-preview {
  display: block;
  width: 20px;
  height: 0;
  border-top: 1.5px solid #9fd2ff;
}

.dash-preview.dash-solid {
  border-top-style: solid;
}

.dash-preview.dash-dash {
  border-top-style: dashed;
}

.dash-preview.dash-dot {
  border-top-style: dotted;
}

.dash-preview.dash-dashdot {
  border-top-style: dashed;
  border-top-width: 3px;
}

.map-draw-field textarea,
.map-draw-field select {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-input);
  color: var(--text-main);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 4px 5px;
  font-size: 10px;
}

.map-draw-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  margin-top: 4px;
}

.map-draw-actions button {
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(46, 72, 112, 0.92) 0%, rgba(33, 55, 88, 0.95) 100%);
  color: #e4efff;
  border-radius: 5px;
  padding: 0;
  font-size: 0;
  line-height: 1.1;
  min-height: 22px;
  width: 100%;
  cursor: pointer;
}

.map-draw-actions button i {
  margin: 0 !important;
  font-size: 11px;
}

/* Draw mode compact scaling via classes (applied by JS on small screens). */
.map-draw-workspace {
  --draw-ui-scale: 0.72;
  --draw-tools-cols: 2;
  --draw-panel-w: 184px;
}

.map-draw-workspace .map-draw-panel {
  width: var(--draw-panel-w);
  max-width: min(92vw, var(--draw-panel-w));
}

.map-draw-workspace .map-draw-tools-grid {
  grid-template-columns: repeat(var(--draw-tools-cols), minmax(0, 1fr));
  gap: calc(6px * var(--draw-ui-scale));
  margin-bottom: calc(8px * var(--draw-ui-scale));
}

.map-draw-workspace .map-draw-tool-btn {
  min-height: calc(30px * var(--draw-ui-scale));
  border-radius: calc(6px * var(--draw-ui-scale));
}

.map-draw-workspace .map-draw-tool-btn i {
  font-size: calc(12px * var(--draw-ui-scale));
}

.map-draw-workspace .map-draw-tool-btn svg {
  width: calc(14px * var(--draw-ui-scale));
  height: calc(14px * var(--draw-ui-scale));
}

.map-draw-workspace .map-draw-field label,
.map-draw-workspace .map-draw-section-title {
  font-size: calc(9px * var(--draw-ui-scale));
}

.map-draw-workspace .map-draw-section-title {
  margin: calc(5px * var(--draw-ui-scale)) 0 calc(4px * var(--draw-ui-scale));
}

.map-draw-workspace .map-draw-controls-grid {
  gap: calc(4px * var(--draw-ui-scale));
}

.map-draw-workspace .map-draw-field {
  gap: calc(2px * var(--draw-ui-scale));
  margin-bottom: calc(4px * var(--draw-ui-scale));
}

.map-draw-workspace .map-draw-field input[type="number"],
.map-draw-workspace .map-draw-field textarea,
.map-draw-workspace .map-draw-field select,
.map-draw-workspace .map-draw-actions button,
.map-draw-workspace .map-draw-arrow-ends-btn,
.map-draw-workspace .map-draw-dash-btn {
  font-size: calc(11px * var(--draw-ui-scale));
}

.map-draw-workspace .map-draw-field input[type="number"],
.map-draw-workspace .map-draw-field textarea,
.map-draw-workspace .map-draw-field select {
  padding: calc(4px * var(--draw-ui-scale));
}

.map-draw-workspace .map-draw-actions button {
  min-height: calc(20px * var(--draw-ui-scale));
  padding: 0;
}

.map-draw-workspace.is-compact-md {
  --draw-ui-scale: 0.66;
  --draw-panel-w: 170px;
}

.map-draw-workspace.is-compact-sm {
  --draw-ui-scale: 0.6;
  --draw-tools-cols: 2;
  --draw-panel-w: 154px;
}

.map-draw-workspace.is-compact-sm .map-draw-tool-btn {
  min-height: 25px;
}

.map-draw-workspace.is-compact-xs {
  --draw-ui-scale: 0.55;
  --draw-tools-cols: 2;
  --draw-panel-w: 142px;
}

.map-draw-workspace.is-compact-xs .map-draw-tool-btn {
  min-height: 22px;
}

.map-draw-workspace.is-compact-xs .map-draw-panel {
  max-height: min(248px, calc(100vh - 255px)) !important;
}

.map-draw-workspace.is-compact-xs .map-draw-controls-grid {
  grid-template-columns: 1fr;
}

.map-draw-workspace.is-compact-xs .map-draw-arrow-ends-picker,
.map-draw-workspace.is-compact-xs .map-draw-dash-picker {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.map-draw-workspace.is-compact-xxs {
  --draw-ui-scale: 0.5;
  --draw-panel-w: 132px;
}

.map-draw-workspace .map-draw-field textarea[data-role="text-value"] {
  min-height: 32px;
  max-height: 44px;
  line-height: 1.15;
}

.map-draw-workspace.is-compact-xxs .map-draw-node-hints {
  display: none !important;
}

.map-draw-workspace.is-compact-xxs .map-draw-tool-btn {
  min-height: 20px;
}

.map-draw-workspace.is-compact-xxs .map-draw-panel {
  max-height: min(214px, calc(100vh - 245px)) !important;
}

.map-draw-workspace.is-compact-xxs .map-draw-layers-list {
  max-height: min(88px, calc(100vh - 470px)) !important;
}

.map-draw-workspace.is-stacked {
  flex-direction: column !important;
  align-items: stretch !important;
  width: min(94vw, 246px) !important;
  max-width: min(94vw, 246px) !important;
  gap: 6px !important;
  overflow: hidden !important;
}

.map-draw-workspace.is-stacked .map-draw-layers-dock,
.map-draw-workspace.is-stacked .map-draw-panel {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.map-draw-workspace.is-stacked .map-draw-layers-list {
  max-height: min(130px, calc(100vh - 420px)) !important;
}

.map-draw-workspace.is-stacked.is-compact-xs {
  width: min(94vw, 216px) !important;
  max-width: min(94vw, 216px) !important;
}

.map-draw-workspace.is-stacked.is-compact-xxs {
  width: min(94vw, 198px) !important;
  max-width: min(94vw, 198px) !important;
}

.map-draw-workspace.is-compact-xs .map-draw-actions {
  gap: 4px;
}

.map-draw-workspace.is-compact-xs .map-draw-actions button {
  flex: 1 1 calc(50% - 4px);
  min-width: 0;
}

.map-draw-workspace.is-compact-xxs .map-draw-actions button {
  flex: 1 1 100%;
}

.map-draw-workspace.is-stacked .map-draw-panel {
  max-height: min(300px, calc(100vh - 245px)) !important;
  overflow-y: auto !important;
}

.map-draw-workspace.is-compact-xs .map-draw-color-trigger {
  width: 36px;
  height: 24px;
}

.map-draw-workspace.is-compact-xxs .map-draw-color-trigger {
  width: 32px;
  height: 22px;
}

@media (max-height: 820px) {
  .map-draw-workspace,
  .map-draw-panel,
  .map-draw-layers-list {
    max-height: calc(100vh - 250px);
  }
}

@media (max-width: 900px) {
  .map-draw-workspace.is-stacked {
    top: 30px;
    right: 0;
    flex-direction: column;
    width: min(94vw, 280px);
    max-width: min(94vw, 280px);
    max-height: calc(100vh - 42px - 124px);
    gap: 6px;
  }

  .map-draw-workspace.is-stacked .map-draw-layers-dock,
  .map-draw-workspace.is-stacked .map-draw-panel {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    max-height: calc(100vh - 300px);
  }
}

@media (max-width: 640px) {
  .map-draw-workspace.is-stacked {
    width: min(96vw, 250px);
    max-width: min(96vw, 250px);
    max-height: calc(100vh - 42px - 110px);
  }

  .map-draw-workspace.is-stacked .map-draw-layers-list {
    max-height: calc(100vh - 320px);
  }
}

.map-draw-actions button:hover {
  border-color: var(--primary);
  color: var(--text-bright);
}

.fast-draw-text-icon {
  pointer-events: auto;
  display: inline-block;
  width: max-content;
  height: max-content;
}

.fast-draw-text-badge {
  display: inline-block;
  transform: translate(-50%, -50%);
  white-space: pre;
  font-weight: 700;
  line-height: 1.15;
}

.fast-draw-text-icon.is-selected .fast-draw-text-badge {
  filter: drop-shadow(0 0 8px rgba(0, 242, 255, 0.45));
}

.fast-draw-handle-marker {
  width: 10px;
  height: 10px;
}

.fast-draw-handle-marker span {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid #0f172a;
  background: #89d3ff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);
}

/* Object List Bootstrap-aligned styling */
.sidebar-pane-object-list .object-list-header {
  border-color: rgba(148, 163, 184, 0.22) !important;
}

.sidebar-pane-object-list .object-list-stats {
  color: rgba(203, 213, 225, 0.84) !important;
}

.sidebar-pane-object-list .object-list-filter-row {
  min-height: 1.4rem;
}

.sidebar-pane-object-list .object-list-exact-match-label {
  color: #dbe6f7 !important;
  cursor: pointer;
  user-select: none;
  opacity: 1 !important;
}

.sidebar-pane-object-list .object-list-exact-match-text {
  color: inherit;
  font-weight: 550;
  line-height: 1.1;
}

.sidebar-pane-object-list .object-list-group {
  background: transparent;
  gap: 0.45rem;
}

.sidebar-pane-object-list .object-list-item {
  background: rgba(17, 25, 40, 0.28);
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  border-radius: 0.7rem !important;
  color: #e2e8f0;
  padding: 0.62rem 0.68rem;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(2, 6, 23, 0.18);
}

.sidebar-pane-object-list .object-list-item:hover {
  background: rgba(51, 65, 85, 0.36);
  border-color: rgba(125, 211, 252, 0.46) !important;
}

.sidebar-pane-object-list .object-list-settlement {
  background: linear-gradient(135deg, rgba(25, 44, 88, 0.52), rgba(19, 34, 63, 0.32));
  border: 1px solid rgba(96, 165, 250, 0.34) !important;
  box-shadow: inset 0 0 0 1px rgba(148, 197, 255, 0.08), 0 8px 16px rgba(6, 12, 24, 0.24);
}

.sidebar-pane-object-list .object-list-settlement-icon {
  font-size: 1.05rem;
  color: #93c5fd;
  width: 1.25rem;
  text-align: center;
  opacity: 0.92;
}

.sidebar-pane-object-list .object-list-item-title {
  font-size: 0.95rem;
  color: #dbe6f7;
  font-weight: 650;
  line-height: 1.1;
}

.sidebar-pane-object-list .object-list-item-title.is-active {
  color: #ffd700;
  font-weight: 700;
}

.sidebar-pane-object-list .object-list-item-layer {
  font-size: 0.75rem;
  opacity: 0.74;
}

.sidebar-pane-object-list .object-list-item-subtitle {
  font-size: 0.84rem;
  color: rgba(176, 191, 213, 0.92);
  line-height: 1.18;
}

.sidebar-pane-object-list .object-list-item-main {
  min-width: 0;
  gap: 0.12rem;
}

.sidebar-pane-object-list .object-list-sidc-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.sidebar-pane-object-list .object-list-pan-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.34);
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.4);
  cursor: pointer;
}

.sidebar-pane-object-list .object-list-pan-btn:hover {
  background: rgba(51, 65, 85, 0.58);
  color: #fff;
}

.sidebar-pane-object-list .settlement-toggle-btn {
  width: 34px;
  height: 30px;
  padding: 0;
  border-radius: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(30, 41, 59, 0.55);
  color: #e2e8f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}

.sidebar-pane-object-list .settlement-toggle-btn svg {
  width: 16px;
  height: 16px;
}

.sidebar-pane-object-list .settlement-toggle-btn.active {
  border-color: rgba(16, 185, 129, 0.54);
  background: rgba(16, 185, 129, 0.16);
}

.sidebar-pane-object-list .settlement-toggle-btn.is-loading {
  --settlement-progress: 0%;
  border-color: rgba(59, 130, 246, 0.45);
  background: linear-gradient(
    90deg,
    rgba(59, 130, 246, 0.35) var(--settlement-progress),
    rgba(30, 41, 59, 0.55) var(--settlement-progress)
  );
}

/* Final draw-layers dock overrides: clean layout, no horizontal scroll. */
.map-draw-workspace .map-draw-layers-dock {
  width: 168px !important;
  min-width: 168px !important;
  max-width: 168px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  position: relative !important;
}

.map-draw-workspace {
  position: relative !important;
}

.map-draw-workspace .map-draw-layers-head {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) 24px !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 1px 6px 1px !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22) !important;
  color: #e2ecff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.map-draw-workspace .map-draw-layers-head span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.map-draw-workspace .map-draw-layers-head button {
  width: 24px !important;
  height: 22px !important;
  border: 1px solid rgba(120, 153, 212, 0.56) !important;
  border-radius: 7px !important;
  background: rgba(33, 58, 96, 0.92) !important;
  color: #dcebff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

.map-draw-workspace .map-draw-layers-head .map-draw-layers-collapse {
  width: 22px !important;
  height: 22px !important;
  border-radius: 7px !important;
}

.map-draw-workspace .map-draw-layers-head .map-draw-layers-collapse i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 12px !important;
  height: 12px !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

.map-draw-workspace .map-draw-layers-head button:hover {
  border-color: rgba(181, 214, 255, 0.9) !important;
  background: rgba(47, 78, 122, 0.96) !important;
}

.map-draw-workspace .map-draw-layers-list {
  flex: 1 1 auto !important;
  min-height: 54px !important;
  max-height: calc(100vh - 278px) !important;
  min-width: 0 !important;
  width: 100% !important;
  padding: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: transparent !important;
}

.map-draw-workspace.is-compact-sm .map-draw-layers-list {
  min-height: 58px !important;
  max-height: min(118px, calc(100vh - 430px)) !important;
}

.map-draw-workspace.is-compact-xs .map-draw-layers-list,
.map-draw-workspace.is-compact-xxs .map-draw-layers-list {
  min-height: 52px !important;
  max-height: min(96px, calc(100vh - 460px)) !important;
}

.map-draw-workspace .map-draw-layers-empty {
  display: block !important;
  padding: 8px 6px !important;
  font-size: 11px !important;
  color: #aac3e6 !important;
  line-height: 1.25 !important;
}

.map-draw-workspace .map-draw-layer-row {
  min-height: 24px !important;
  padding: 0.16rem 0.24rem !important;
}

.map-draw-workspace .map-draw-layer-name {
  font-size: 0.72rem !important;
}

.map-draw-workspace .map-draw-layers-list::-webkit-scrollbar:horizontal {
  display: none;
  height: 0;
}

.map-draw-workspace .map-draw-layer-row {
  display: flex !important;
  align-items: center !important;
  gap: 0.22rem !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 26px !important;
  padding: 0.18rem 0.22rem !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.map-draw-workspace .map-draw-layer-row.is-active {
  background: rgba(59, 130, 246, 0.14) !important;
  border-bottom-color: rgba(96, 165, 250, 0.5) !important;
  box-shadow: inset 2px 0 0 rgba(125, 211, 252, 0.75) !important;
}

.map-draw-workspace .map-draw-layer-eye,
.map-draw-workspace .map-draw-layer-share,
.map-draw-workspace .map-draw-layer-delete {
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  border: 1px solid rgba(148, 163, 184, 0.34) !important;
  border-radius: 0.5rem !important;
  background: rgba(15, 23, 42, 0.4) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.map-draw-workspace .map-draw-layer-eye:hover,
.map-draw-workspace .map-draw-layer-share:hover,
.map-draw-workspace .map-draw-layer-delete:hover {
  background: rgba(51, 65, 85, 0.58) !important;
  border-color: rgba(125, 211, 252, 0.46) !important;
  color: #ffffff !important;
}

.map-draw-workspace .map-draw-layer-eye { color: #cfe3ff !important; }
.map-draw-workspace .map-draw-layer-share { color: #c69dff !important; }
.map-draw-workspace .map-draw-layer-delete { color: #ff8f8f !important; }

.map-draw-workspace .map-draw-layer-eye {
  color: rgba(173, 195, 225, 0.82) !important;
}

.map-draw-workspace .map-draw-layer-eye.is-visible {
  color: #93c5fd !important;
  border-color: rgba(16, 185, 129, 0.54) !important;
  background: rgba(16, 185, 129, 0.16) !important;
  box-shadow: none !important;
}

.map-draw-workspace .map-draw-layer-eye i,
.map-draw-workspace .map-draw-layer-share i,
.map-draw-workspace .map-draw-layer-delete i {
  font-size: 10px !important;
}

.map-draw-workspace .map-draw-layer-name {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 0.72rem !important;
  line-height: 1.1 !important;
  color: #dbe6f7 !important;
  font-weight: 550 !important;
}

.map-draw-workspace .map-draw-layers-dock.is-collapsed {
  position: absolute !important;
  left: -24px !important;
  top: 6px !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  z-index: 4 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
}

.map-draw-workspace.is-stacked .map-draw-layers-dock.is-collapsed {
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  z-index: 4 !important;
  overflow: hidden !important;
  pointer-events: auto !important;
}

.map-draw-workspace.is-stacked .map-draw-layers-dock.is-collapsed .map-draw-layers-head {
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 28px !important;
  justify-content: flex-start !important;
  padding: 2px 0 !important;
}

.map-draw-workspace.is-stacked .map-draw-layers-dock.is-collapsed .map-draw-layers-collapse {
  margin: 0 0 0 2px !important;
}

@media (max-width: 900px) {
  .map-draw-workspace.is-stacked .map-draw-layers-dock {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

.map-draw-workspace .map-draw-layers-dock.is-collapsed .map-draw-layers-head {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.map-draw-workspace .map-draw-layers-dock.is-collapsed .map-draw-layers-head span,
.map-draw-workspace .map-draw-layers-dock.is-collapsed .map-draw-layers-add,
.map-draw-workspace .map-draw-layers-dock.is-collapsed .map-draw-layers-list {
  display: none !important;
}

.map-draw-workspace .map-draw-layers-dock.is-collapsed .map-draw-layers-collapse {
  width: 26px !important;
  height: 26px !important;
  margin: 0 auto !important;
  border: 1px solid rgba(120, 153, 212, 0.8) !important;
  border-radius: 9px !important;
  background: rgba(33, 58, 96, 0.96) !important;
  box-shadow: 0 0 0 1px rgba(146, 179, 235, 0.28) !important;
  pointer-events: auto !important;
}

.map-draw-workspace .map-draw-layers-dock.is-collapsed .map-draw-layers-collapse i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.map-draw-workspace .map-draw-layers-dock.is-collapsed .map-draw-layers-collapse:hover {
  border-color: rgba(181, 214, 255, 0.95) !important;
  background: rgba(47, 78, 122, 0.98) !important;
}

/* --- Custom Context Menu --- */
.custom-context-menu {
    position: absolute;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    z-index: 9999;
    min-width: 200px;
    display: none;
    flex-direction: column;
    padding: 4px 0;
    border-radius: 6px;
    backdrop-filter: blur(5px);
}
.custom-context-menu-item {
    padding: 8px 16px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-main);
    display: flex;
    align-items: center;
    transition: background-color 0.1s;
    user-select: none;
}
.custom-context-menu-item:hover {
    background-color: var(--bg-hover);
    color: var(--text-bright);
}

.custom-context-menu-item-danger {
  color: var(--danger);
}

.custom-context-menu-separator {
    height: 1px;
    background-color: var(--border);
    margin: 4px 0;
}

.marker-cluster-count-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.invalid-cell {
    background-color: #fee2e2 !important;
    color: #b91c1c !important;
    font-weight: bold;
    box-shadow: inset 0 0 0 2px #b91c1c;
}

/* Zoom level check CSS mechanism */
.hide-labels-zoom .marker-label,
.hide-labels-zoom .leaflet-tooltip.marker-label {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* --- MAP BOTTOM BAR --- */
#map-bottom-bar {
  display: flex;
  align-items: center;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  z-index: 4000;
  position: relative;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
  flex-shrink: 0;
}

.dropup-container {
  position: relative;
  display: inline-block;
}

.map-bar-btn {
  background: none;
  border: none;
  color: var(--text-main);
  cursor: pointer;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  transition: background 0.2s;
  border-radius: 4px;
}

.map-bar-btn:hover {
  background: var(--bg-hover);
  color: var(--text-bright);
}

.map-bar-btn .arrow {
  font-size: 8px;
  transition: transform 0.2s;
}

.dropup-container.active .arrow {
  transform: rotate(180deg);
}

.dropup-content {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  background-color: var(--bg-panel);
  min-width: 250px;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.3);
  border: 1px solid var(--border);
  border-radius: 4px;
  z-index: 4005;
  padding: 10px;
  margin-bottom: 5px;
  flex-direction: column;
  gap: 10px;
}

.dropup-container.active .dropup-content {
  display: flex;
}

.dropup-content .menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-main);
}

.dropup-content label {
  font-weight: 600;
  margin: 0;
  flex: 1;
}

.dropup-content input[type=range] {
  flex: 2;
  cursor: pointer;
}


/* Label Sizing */
.marker-label, .leaflet-tooltip.marker-label {
    font-size: var(--label-size, 13px) !important;
    font-weight: 600; /* Make it bolder to appear larger/clearer */
}

#library-sort-filter-modal .library-unit-dropdown-wrap {
  position: relative;
  overflow: visible;
}

#library-sort-filter-modal .modal-body {
  overflow: visible;
}

#library-sort-filter-modal .library-unit-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1080;
  background: var(--bg-panel);
  border-color: var(--border) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

#library-sort-filter-modal .library-unit-dropdown-options {
  max-height: 172px;
  overflow: auto;
}

#library-sort-filter-modal .library-unit-option-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

#library-sort-filter-modal .library-unit-option-row {
  min-height: 32px;
}

#library-sort-filter-modal .library-selected-units {
  min-height: 44px;
  max-height: 160px;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
}

#library-sort-filter-modal .library-selected-unit-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#map-modal .sidebar-pane-filters .jm-filters-intro,
#map-modal .sidebar-pane-filters .jm-filters-summary {
  line-height: 1.35;
}

#map-modal .sidebar-pane-filters .jm-filters-panel-title {
  font-weight: 600;
  letter-spacing: 0.01em;
}

#map-modal .sidebar-pane-filters .jm-filters-panel {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.2) !important;
}

#map-modal .sidebar-pane-filters .jm-filters-selected-units {
  min-height: 36px;
  max-height: 96px;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
  padding: 6px;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.015);
}

#map-modal .sidebar-pane-filters .jm-filters-unit-chip {
  line-height: 1.1;
  padding: 4px 8px;
}

#map-modal .sidebar-pane-filters .jm-filters-unit-dropdown-wrap {
  position: relative;
}

#map-modal .sidebar-pane-filters .jm-filters-unit-options {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 172px;
  overflow: auto;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  background: var(--bg-panel);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#map-modal .sidebar-pane-filters .jm-filters-unit-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 30px;
  border-radius: 6px;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--text-main);
  background: transparent;
  border: 0;
  text-align: left;
}

#map-modal .sidebar-pane-filters .jm-filters-unit-option:hover {
  background: rgba(255, 255, 255, 0.06);
}

#map-modal .sidebar-pane-filters .jm-filters-unit-option:focus {
  outline: 0;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.45) inset;
}

#map-modal .sidebar-pane-filters .jm-filters-unit-option.is-selected {
  background: rgba(56, 189, 248, 0.2);
  color: #d7f2ff;
}

#map-modal .sidebar-pane-filters .jm-filters-root {
  position: relative;
}

#map-modal .sidebar-pane-filters .jm-filters-popup {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 30;
  min-width: 180px;
  max-width: calc(100% - 16px);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  line-height: 1.25;
  border: 1px solid transparent;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.32);
  pointer-events: none;
}

#map-modal .sidebar-pane-filters .jm-filters-popup.is-success {
  background: rgba(34, 197, 94, 0.16);
  border-color: rgba(34, 197, 94, 0.4);
  color: #bbf7d0;
}

#map-modal .sidebar-pane-filters .jm-filters-popup.is-warning {
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fde68a;
}

#map-modal .sidebar-pane-filters .jm-filters-popup.is-error {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.45);
  color: #fecaca;
}

#mbtiles-orienters-editor-modal .modal-dialog {
  max-width: 640px;
}

#mbtiles-orienters-editor-modal .mbtiles-orienters-hint {
  border: 1px dashed rgba(56, 189, 248, 0.45);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  color: #d7f2ff;
  background: rgba(56, 189, 248, 0.08);
}

#mbtiles-orienters-editor-modal .mbtiles-orienters-controls .form-control-color {
  width: 56px;
  min-width: 56px;
}

#mbtiles-orienters-editor-modal .mbtiles-orienters-points-list {
  max-height: 280px;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.015);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#mbtiles-orienters-editor-modal .mbtiles-orienters-point-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 6px;
  align-items: center;
}

#mbtiles-orienters-editor-modal .mbtiles-orienters-point-color {
  width: 40px;
  min-width: 40px;
  padding: 2px;
}

.mbtiles-orienters-create-popup .leaflet-popup-content-wrapper {
  border-radius: 8px;
}

.mbtiles-orienters-create-popup .leaflet-popup-content {
  margin: 10px;
  min-width: 220px;
}

.mbtiles-orienters-create-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mbtiles-orienters-create-title {
  font-size: 12px;
  font-weight: 600;
}

.mbtiles-orienters-create-color-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mbtiles-orienters-create-color {
  width: 44px;
  min-width: 44px;
  padding: 2px;
}

.mbtiles-orienters-create-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}