/* ════════════════════════════════════════
   Directorate of State Real Estate — Main Stylesheet
   ════════════════════════════════════════ */

:root {
  --bg-base:      #0d1117;
  --bg-panel:     #161b22;
  --bg-card:      #1c2128;
  --bg-hover:     #21262d;
  --border:       #30363d;
  --border-light: #3d444d;
  --text-primary: #e6edf3;
  --text-muted:   #8b949e;
  --text-dim:     #586069;
  --accent:       #2d8cf0;
  --accent-hover: #409eff;
  --success:      #3fb950;
  --warning:      #d29922;
  --danger:       #f85149;
  --orange:       #f39c12;
  --sidebar-w:    320px;
  --header-h:     56px;
  --radius:       8px;
  --radius-sm:    5px;
  --shadow:       0 4px 16px rgba(0,0,0,.4);
}

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

html, body {
  height: 100%;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
  overflow: hidden;
}

/* ─── HEADER ─── */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  z-index: 200;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  gap: 8px;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;          /* never let the menubar squeeze the brand */
}

.header-brand > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.15;
}

.header-logo {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.header-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.3px;
  white-space: nowrap;     /* keep the title on one line */
}

.header-sub {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
}

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

/* ─── LAYOUT ─── */
.layout {
  display: flex;
  height: 100vh;
  padding-top: var(--header-h);
}

/* ─── SIDEBAR ─── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;   /* no global scroll — sections handle their own */
  flex-shrink: 0;
  order: 1;
  position: relative;
  transition: width .25s ease;
  min-width: 0;
}
.sidebar.collapsed {
  width: 0 !important;
  border-right: none;
  overflow: hidden;
}

/* Upload section: fixed height, own scroll when constrained */
#uploadSection {
  flex-shrink: 0;
  overflow: hidden;
}

/* Layer section fills remaining space inside vp-layers */
#layerSection {
  flex: 1 1 0;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#layerBody {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: none !important;
}
/* vp-layers itself grows — and keeps a workable minimum height when the Data
   panel is open above it, so the layer list never collapses to a bare header */
#vp-layers { flex: 1 1 0; min-height: clamp(160px, 30vh, 280px); }

/* Vertical resize handle between sections */
.v-resize-handle {
  flex-shrink: 0;
  height: 8px;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  cursor: row-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background .15s;
  user-select: none;
}
.v-resize-handle:hover, .v-resize-handle.dragging {
  background: rgba(45,140,240,.18);
  border-color: var(--accent);
}
.v-resize-grip {
  width: 32px;
  height: 2px;
  border-radius: 1px;
  background: var(--border-light);
  position: relative;
}
.v-resize-grip::before, .v-resize-grip::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--border-light);
}
.v-resize-grip::before { top: -4px; }
.v-resize-grip::after  { top:  4px; }

/* Resize handle on sidebar right edge */
.sidebar-resize-handle {
  position: absolute;
  right: -4px;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar-resize-handle:hover { background: rgba(45,140,240,.15); }

.sidebar-collapse-btn {
  width: 18px;
  height: 44px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.sidebar-collapse-btn:hover { background: var(--bg-hover); color: var(--accent); }

/* Floating expand button when sidebar is collapsed */
.sidebar-expand-float {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 250;
  width: 20px;
  height: 52px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  transition: background .15s, color .15s;
}
.sidebar-expand-float:hover { background: var(--bg-hover); color: var(--accent); }

.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 4px; }

.section {
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border);
}

.section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* Section title row with chevron toggle */
.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.section-title-row .section-title { margin-bottom: 0; }

.section-chevron {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, transform .2s;
  flex-shrink: 0;
}
.section-chevron:hover { color: var(--text-primary); background: var(--bg-hover); }
.section-chevron.collapsed svg { transform: rotate(-90deg); }
.section-chevron svg { transition: transform .2s; }

/* Collapsible section body */
.section-body {
  overflow: hidden;
  transition: max-height .3s ease, opacity .25s ease;
  max-height: 1000px;
  opacity: 1;
}
.section-body.collapsed {
  max-height: 0 !important;
  opacity: 0;
}
/* Layer body overrides (flex-based, no max-height) */
#layerBody {
  transition: opacity .25s ease;
  max-height: none;
  overflow: hidden;
}
#layerBody.collapsed {
  flex: 0 0 0;
  opacity: 0;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.layer-actions {
  display: flex;
  gap: 4px;
}

/* ─── UPLOAD ZONE ─── */
.upload-zone {
  border: 2px dashed var(--border-light);
  border-radius: var(--radius);
  padding: 20px 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.upload-zone.dragover {
  border-color: var(--accent);
  background: rgba(45, 140, 240, 0.08);
}

.upload-icon { width: 48px; height: 48px; }

.upload-text {
  font-size: 13px;
  color: var(--text-muted);
}

.upload-btn {
  font-size: 12px !important;
  padding: 6px 16px !important;
  cursor: pointer;
}

.upload-hint {
  font-size: 10px;
  color: var(--text-dim);
  font-family: 'Roboto Mono', monospace;
  letter-spacing: 0.5px;
}

/* ─── FILE QUEUE ─── */
.file-queue {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
  max-height: 160px;
  overflow-y: auto;
}

.file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  font-size: 11px;
}

.file-ext {
  background: var(--accent);
  color: #fff;
  border-radius: 3px;
  padding: 1px 5px;
  font-family: 'Roboto Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
}

.file-ext.ext-kml { background: #27ae60; }
.file-ext.ext-zip, .file-ext.ext-shp { background: #8e44ad; }

.file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  direction: ltr;
  text-align: left;
}

.file-remove {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
  padding: 0 2px;
  transition: color .2s;
}

.file-remove:hover { color: var(--danger); }

/* ─── PROGRESS ─── */
.progress-wrap {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}

.progress-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.progress-bar {
  background: var(--bg-card);
  border-radius: 99px;
  height: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #5bb8ff);
  border-radius: 99px;
  width: 0%;
  transition: width .3s ease;
  animation: pulse-glow 1.5s ease infinite;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 4px rgba(45,140,240,.4); }
  50% { box-shadow: 0 0 12px rgba(45,140,240,.8); }
}

/* ─── STATS ─── */
.stats-row {
  display: flex;
  padding: 10px 14px;
  gap: 8px;
  border-bottom: 1px solid var(--border);
}

.stat-box {
  flex: 1;
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 4px;
}

.stat-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  font-family: 'Roboto Mono', monospace;
}

.stat-lbl {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ─── LAYER LIST ─── */
/* Compact toolbar: search + a single Filters toggle (keeps the area tidy) */
.layer-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.layer-search-wrap {
  flex: 1;
  min-width: 0;
}
.layer-filter-toggle {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary, #c9d1d9);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.layer-filter-toggle:hover { border-color: var(--accent, #3498db); color: var(--text-primary); }
.layer-filter-toggle.active { background: rgba(52,152,219,.18); border-color: var(--accent, #3498db); color: var(--accent, #3498db); }
.layer-filter-toggle .lft-dot {
  position: absolute; top: -3px; right: -3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #f39c12; border: 1px solid var(--bg-panel, #0d1117);
}
/* WS-FLT (owner): the open filter panel pushed the layer list ~330px down the
   page. It now floats OVER the list as a popover, so opening it costs no
   layout space. WS-FLT2: position:fixed + a draggable header strip — app.js
   anchors it under the funnel button on open and drags it by .lfp-head.
   Same element, same toggle, same ids. */
.layer-filters-panel {
  position: fixed;
  z-index: 650;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lfp-head {
  display: flex; align-items: center; gap: 6px;
  margin: -3px -3px 1px; padding: 3px 4px 3px 8px;
  border-bottom: 1px solid var(--border);
  cursor: move; user-select: none; touch-action: none;
}
.lfp-title {
  flex: 1; font-size: 10px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; color: var(--text-muted, #8b949e);
}
.lfp-close {
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 5px;
  color: var(--text-muted, #8b949e); cursor: pointer;
}
.lfp-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.layer-filters-panel .count-filter-row { margin: 0; }
.layer-filters-panel .color-filter-row { margin: 2px 0 0; }

.layer-search {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 6px 10px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
  transition: border-color .2s;
}

.layer-search:focus { border-color: var(--accent); }
.layer-search::placeholder { color: var(--text-dim); }

.layer-list {
  /* Block layout (not flex) so a long, scrolling list never crushes an expanded
     feature tree to zero height. flex:1 1 0 still sizes the list inside its panel. */
  display: block;
  flex: 1 1 0;
  overflow-y: auto;
  padding-right: 2px;
}
.layer-list > .layer-item { margin-bottom: 1px; }

.layer-list::-webkit-scrollbar { width: 3px; }
.layer-list::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }

/* L6.6-D row anatomy (design §5.1): one 28 px line —
     ▸ chevron · ☑ visibility · symbology preview · name · count · flags · ⋯
   The ⠿ handle, the selection checkbox and the eye button are gone; the row is
   the drag source and the selection target. Row height ~44 → ~28 px. */
.layer-item {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;          /* always a single tidy row, never wrap on hover */
  gap: 5px;
  min-height: 28px;
  padding: 3px 6px 3px 4px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  position: relative;
  overflow: hidden;
  user-select: none;
}
/* All the small controls keep their size and stay on the line */
.layer-item > button,
.layer-item > .layer-sym,
.layer-item > .layer-count,
.layer-item > .layer-flags,
.layer-item > .layer-grp-wrap,
.layer-item > .layer-export-wrap,
.layer-item > input { flex-shrink: 0; }

.layer-item:hover { background: var(--bg-hover); border-color: var(--border-light); }
.layer-item.hidden-layer .layer-name,
.layer-item.hidden-layer .layer-sym,
.layer-item.hidden-layer .layer-count { opacity: .5; }
.layer-item.selected {
  background: rgba(52,152,219,.16);
  border-color: var(--accent);
  box-shadow: inset 2px 0 0 var(--accent);
}
.layer-item.selected:hover { background: rgba(52,152,219,.24); }

/* The ONE checkbox: visibility */
.layer-vis-cb,
.group-vis-cb {
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  margin: 0;
}

/* Symbology preview — a marker / line / fill in the layer's own colour */
.layer-sym {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 3px;
  transition: background .12s;
}
.layer-sym:hover { background: rgba(255,255,255,.08); }
.layer-sym svg { display: block; }

.layer-info {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.layer-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
  /* Single tidy line; full name is in the title tooltip */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Secondary row actions appear on hover / selection, so the name has room.
   (checkbox, preview and the ▶ expander stay always visible) */
.layer-item .layer-more-wrap { display: none; }
.layer-item:hover .layer-more-wrap,
.layer-item.selected .layer-more-wrap { display: flex; }

.layer-count {
  font-size: 10px;
  color: var(--text-muted);
  font-family: 'Roboto Mono', monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 2.2em;
  text-align: right;
}

/* Status flags: locked / shared / pending / attachments / in-groups. States,
   not actions — nothing here dispatches. */
.layer-flags {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}
.layer-flags:empty { display: none; }
.layer-flags .lf { cursor: help; }

/* Uniform compact size for the layer action buttons so the row never overflows.
   (display is controlled by the hover/selected rules above — don't set it here.) */
.layer-item .layer-zoom,
.layer-item .layer-scope-btn,
.layer-item .layer-grp-btn,
.layer-item .layer-exp-btn,
.layer-item .layer-fields-btn,
.layer-item .layer-table-btn,
.layer-item .layer-del-btn,
.layer-item .layer-exit-grp,
.layer-item .layer-expand-btn {
  width: 21px; height: 21px; min-width: 21px; padding: 0; font-size: 11px;
  align-items: center; justify-content: center; flex-shrink: 0;
}

.layer-zoom {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 0 2px;
  font-size: 13px;
  flex-shrink: 0;
  transition: color .15s;
}

.layer-zoom:hover { color: var(--accent); }

/* ─── ERRORS ─── */
.error-panel {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}

.error-item {
  font-size: 11px;
  color: var(--warning);
  background: rgba(210,153,34,.08);
  border: 1px solid rgba(210,153,34,.25);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  margin-top: 4px;
  direction: ltr;
  word-break: break-all;
}

/* ─── MAP ─── */
.map-container {
  flex: 1;
  position: relative;
  order: 2;
  overflow: hidden;
}

#map {
  width: 100%;
  height: 100%;
  background: #0a0e14;
}

/* ─── MAP TOOLBAR ─── */
/* ─── Horizontal menu bar (now in header) ─── */
.map-menubar {
  display: flex; align-items: center; gap: 2px;
  flex: 1; justify-content: center;
  user-select: none;
}
.mbar-menu { position: relative; }
.mbar-btn {
  display: flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 10px;
  background: none; border: none;
  color: var(--text-muted); font-size: 12px; font-weight: 600;
  font-family: inherit; cursor: pointer; border-radius: 5px;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.mbar-btn:hover,
.mbar-menu.open > .mbar-btn { background: var(--bg-hover); color: var(--text-primary); }
.mbar-menu.has-active > .mbar-btn { color: var(--accent); }
.mbar-menu.has-active > .mbar-btn::after {
  content: ''; display: inline-block;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); margin-left: 3px;
}
.mbar-chevron { transition: transform .15s; }
.mbar-menu.open .mbar-chevron { transform: rotate(180deg); }

.mbar-dropdown {
  display: none;
  position: fixed; top: var(--header-h); left: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border-light);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  min-width: 180px;
  padding: 4px;
  z-index: 500;
  animation: slideIn .12s ease;
}
.mbar-menu.open .mbar-dropdown { display: flex; flex-direction: column; }
.mbar-opt {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border: none; background: none;
  color: var(--text-muted); font-size: 12px; font-family: inherit;
  cursor: pointer; border-radius: var(--radius-sm); text-align: left;
  transition: background .1s, color .1s;
  white-space: nowrap;
}
.mbar-opt:hover   { background: var(--bg-hover); color: var(--text-primary); }
.mbar-opt.active  { color: var(--accent); }
.mbar-opt-danger  { color: var(--danger) !important; }
.mbar-opt-danger:hover { background: rgba(248,81,73,.12); }
.mbar-sep { height: 1px; background: var(--border); margin: 3px 4px; }
.mbar-cat { font-size: 10.5px; color: var(--text-muted, #8b95a1); font-weight: 700; padding: 8px 12px 3px; letter-spacing: .2px; border-top: 1px solid var(--border); margin-top: 2px; }
.mbar-cat:first-child { border-top: none; margin-top: 0; }
/* NAV-5: collapsible sections inside the Analysis dropdown — a .mbar-cat that
   became a button (caret + persisted open state, wiring in app.js). Same
   visual family as the account menu's NAV-4 tree. */
.mbar-grp-hd {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: none; border: none; border-top: 1px solid var(--border); margin-top: 2px;
  font-size: 10.5px; color: var(--text-muted, #8b95a1); font-weight: 700;
  padding: 8px 12px 5px; letter-spacing: .2px; font-family: inherit;
  cursor: pointer; text-align: start; border-radius: var(--radius-sm);
}
.mbar-grp-hd:first-child { border-top: none; margin-top: 0; }
.mbar-grp-hd:hover { background: var(--bg-hover); color: var(--text-primary); }
.mbar-grp-hd .mbar-caret { font-size: 9px; transition: transform .15s; }
.mbar-grp-hd.open .mbar-caret { transform: rotate(90deg); }
.mbar-grp {
  display: flex; flex-direction: column;
  margin-inline-start: 13px; border-inline-start: 1px solid var(--border);
  padding-inline-start: 2px;
}
.mbar-vdivider { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }

/* ─── L6.5-A: tools vs destinations ───────────────────────────────────────────
   Eight identical dropdowns told the user that Draw and View were the same kind
   of thing. They are not: five of them change what a click on the map does, and
   four of them take you somewhere. The tools sit in a recessed segmented tray so
   the group reads as one control with one active member; the destinations stay
   flat, because a destination is not a mode you are in. */
.mbar-group { display: flex; align-items: center; gap: 2px; }
.mbar-tools {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 2px;
}
.mbar-tools > .mbar-menu > .mbar-btn { height: 26px; padding: 0 9px; }
.mbar-tools > .mbar-menu.open > .mbar-btn,
.mbar-tools > .mbar-menu.has-active > .mbar-btn {
  background: var(--bg-panel);
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
/* The lit tool is the one thing on this bar that says "this is the mode you are
   in", so it gets the accent fill rather than the small dot the old bar used. */
.mbar-tools > .mbar-menu.has-active > .mbar-btn { color: var(--accent); }
.mbar-tools > .mbar-menu.has-active > .mbar-btn::after { display: none; }
.mbar-dests > .mbar-menu > .mbar-btn { color: var(--text-muted); }
.mbar-toggle {
  display: flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 10px;
  background: none; border: 1px solid transparent;
  color: var(--text-muted); font-size: 12px; font-weight: 600;
  font-family: inherit; cursor: pointer; border-radius: 5px;
  transition: background .12s, color .12s, border-color .12s;
}
.mbar-toggle:hover  { background: var(--bg-hover); color: var(--text-primary); }
.mbar-toggle.active { background: rgba(45,140,240,.15); border-color: rgba(45,140,240,.4); color: var(--accent); }

/* ─── .map-tool (L6.6-C: only the CRS picker in the status bar carries it now;
   the floating .map-toolbar stack and its .map-stack-menu overflow are gone —
   zoom in/out/window/full moved to the toolbar, the rest into the ⋯ disc's
   #mapViewMenu, see the L6.6-C block at the end of this file) ─── */
.map-tool {
  width: 32px;
  height: 32px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s;
  box-shadow: var(--shadow);
}
.map-tool:hover { background: var(--bg-hover); border-color: var(--accent); }
.map-tool.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.map-tool-wide { width: auto; padding: 0 8px; gap: 5px; font-size: 12px; font-weight: 600; }

/* ─── Toolbar groups ─── */
.map-grp-btn {
  width: 32px; height: 32px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 1px;
  box-shadow: var(--shadow);
  transition: background .15s, color .15s, border-color .15s;
  position: relative;
}
.map-grp-btn:hover  { background: var(--bg-hover); border-color: var(--accent); color: var(--text-primary); }
.map-grp-btn.open   { background: rgba(45,140,240,.14); border-color: var(--accent); color: var(--accent); }
.map-grp-btn.has-active { border-left: 2px solid var(--accent); }
.grp-chevron { transition: transform .15s; flex-shrink: 0; }
.map-grp-btn.open .grp-chevron { transform: rotate(90deg); }

.map-grp {
  display: none;
  flex-direction: column;
  gap: 3px;
  padding: 2px 0 2px 5px;
  border-left: 2px solid rgba(45,140,240,.35);
  margin-left: 3px;
}

.selection-counter {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,220,0,.95);
  color: #000;
  border-radius: 99px;
  padding: 3px 14px;
  font-size: 12px;
  font-weight: 700;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  pointer-events: none;
}

/* ─── COORDINATE BAR ─── */
.coord-bar {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(13,17,23,.85);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 3px 12px;
  font-size: 11px;
  font-family: 'Roboto Mono', monospace;
  color: var(--text-muted);
  z-index: 100;
  pointer-events: none;
  backdrop-filter: blur(4px);
}

/* ─── POPUP ─── */
.popup {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 150;
  min-width: 240px;
  max-width: 340px;
  max-height: 460px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}

/* A layer name can be far longer than the popup is wide. Let it use at most two
   lines, breaking inside the word if it has no spaces, and never let it push the
   window buttons out of the header (min-width:0 is what allows a flex item to
   shrink below its content). The full name stays available as a tooltip. */
#popupTitle {
  flex: 1 1 auto;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
}

.popup-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
/* Match toolbar button style exactly */
.popup-icon-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 15px; line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
  transition: background .15s, border-color .15s, color .15s;
}
.popup-icon-btn:hover      { background: var(--bg-hover); border-color: var(--accent); }
.popup-icon-danger:hover   { background: rgba(248,81,73,.18); border-color: var(--danger); color: var(--danger); }
.popup-icon-close          { font-size: 17px; font-weight: 300; }
.popup-icon-close:hover    { background: rgba(248,81,73,.18); border-color: var(--danger); color: var(--danger); }

.popup-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  margin-right: -2px;
}

.popup-close:hover { color: var(--danger); }

.popup-body {
  padding: 8px 12px;
  overflow-y: auto;
  font-size: 11px;
  flex: 1 1 auto;
  min-height: 0;
}

.popup-body::-webkit-scrollbar { width: 3px; }
.popup-body::-webkit-scrollbar-thumb { background: var(--border-light); }

/* ── Window-like popup: drag header, resize, minimize, maximize ── */
.popup-header { cursor: move; user-select: none; }
.popup-actions, .popup-icon-btn { cursor: pointer; }
.popup-resize {
  position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; z-index: 3;
  cursor: nwse-resize;
  background:
    linear-gradient(135deg, transparent 0 55%, var(--border-light, #6b7280) 55% 63%,
      transparent 63% 70%, var(--border-light, #6b7280) 70% 78%,
      transparent 78% 85%, var(--border-light, #6b7280) 85% 93%, transparent 93%);
}
.popup-resize:hover { filter: brightness(1.6); }
.popup.popup-min { height: auto !important; max-height: none; }
.popup.popup-min .popup-body,
.popup.popup-min .popup-move-menu,
.popup.popup-min .popup-resize { display: none !important; }
.popup.popup-max {
  left: 50% !important; top: 50% !important; bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(760px, 92vw) !important; height: min(85vh, 720px) !important;
  max-width: none !important; max-height: none !important;
}

/* Move-to-layer menu */
.popup-move-menu {
  border-top: 1px solid var(--border);
  padding: 8px 10px 10px;
  max-height: 220px;
  overflow-y: auto;
}
.popup-move-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.popup-move-list { display: flex; flex-direction: column; gap: 3px; }
.popup-move-filter { display: flex; gap: 6px; padding: 4px 2px 7px; position: sticky; top: 0; background: var(--bg-panel, #11161d); z-index: 2; }
.popup-move-search { flex: 1; min-width: 0; background: #0d1117; color: #e6edf3; border: 1px solid #2f3e50; border-radius: 6px; padding: 5px 8px; font-size: 12px; }
.popup-move-scope { flex: none; max-width: 42%; background: #0d1117; color: #e6edf3; border: 1px solid #2f3e50; border-radius: 6px; padding: 5px 6px; font-size: 12px; cursor: pointer; }
.popup-move-search:focus, .popup-move-scope:focus { border-color: #3d8bff; outline: none; }
#popupMoveTargets { display: flex; flex-direction: column; gap: 4px; }
.popup-move-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 6px 8px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 11px;
  text-align: right;
  transition: background .15s, border-color .15s;
}
.popup-move-item:hover { background: var(--bg-hover); border-color: var(--accent); }
.popup-move-item .move-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.3);
}
.popup-move-item .move-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.popup-move-empty {
  font-size: 10px; color: var(--text-muted); padding: 6px 4px; text-align: center;
}

/* Custom feature attributes editor */
.feat-attrs-section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.feat-attrs-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 6px;
}
.feat-attrs-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.feat-attrs-empty { font-size: 10px; color: var(--text-muted); padding: 4px 2px; }
.feat-attr-row {
  display: flex; align-items: center; gap: 5px;
}
.feat-attr-key {
  flex: 0 0 84px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary, #c9d1d9);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.feat-attr-val {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 6px;
  font-size: 10.5px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}
.feat-attr-val:focus { outline: none; border-color: var(--accent); }
.feat-attr-del {
  flex: 0 0 auto;
  width: 20px; height: 22px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  transition: background .15s, color .15s, border-color .15s;
}
.feat-attr-del:hover { background: rgba(248,81,73,.18); border-color: var(--danger); color: var(--danger); }
.feat-attr-add { display: flex; gap: 5px; align-items: center; margin-top: 2px; }
.feat-attr-input {
  flex: 1 1 0;
  min-width: 0;
  padding: 5px 6px;
  font-size: 10.5px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}
.feat-attr-input:focus { outline: none; border-color: var(--accent); }
.feat-attr-add-btn {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  background: rgba(52,152,219,.16);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--accent);
  cursor: pointer;
  font-size: 15px; line-height: 1;
  transition: background .15s;
}
.feat-attr-add-btn:hover { background: rgba(52,152,219,.32); }

/* Feature file attachments */
.feat-attach-section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.feat-attach-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.feat-attach-row {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 7px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.feat-attach-name {
  flex: 1; min-width: 0;
  font-size: 11px; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.feat-attach-size { font-size: 9.5px; color: var(--text-muted); white-space: nowrap; }
.feat-attach-dl, .feat-attach-del {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer; font-size: 11px;
  transition: background .15s, color .15s, border-color .15s;
}
.feat-attach-dl  { color: var(--accent); }
.feat-attach-dl:hover  { background: rgba(52,152,219,.2); }
.feat-attach-del { color: var(--text-muted); }
.feat-attach-del:hover { background: rgba(248,81,73,.18); border-color: var(--danger); color: var(--danger); }
.feat-attach-btn {
  width: 100%;
  padding: 7px;
  font-size: 11px; font-weight: 600;
  background: rgba(46,204,113,.14);
  border: 1px solid #2ecc71;
  border-radius: var(--radius-sm);
  color: #2ecc71; cursor: pointer;
  transition: background .15s;
}
.feat-attach-btn:hover { background: rgba(46,204,113,.28); }
.feat-attach-reg {
  width: 100%; margin-bottom: 6px;
  padding: 7px; font-size: 11px; font-weight: 600;
  background: rgba(102,126,234,.16);
  border: 1px solid #667eea;
  border-radius: var(--radius-sm);
  color: #8a9bf0; cursor: pointer;
  transition: background .15s;
}
.feat-attach-reg:hover { background: rgba(102,126,234,.3); }

/* Compact attachments icon-button (opens the list) */
.feat-attach-open-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: rgba(102,126,234,.16);
  border: 1px solid #667eea;
  border-radius: var(--radius-sm);
  color: #aeb9f5; cursor: pointer;
  font-size: 11.5px; font-weight: 600;
  transition: background .15s;
}
.feat-attach-open-btn:hover { background: rgba(102,126,234,.3); }
.feat-attach-open-btn .fa-ico { font-size: 15px; }
.feat-attach-open-btn .fa-txt { flex: 1; text-align: right; }
.feat-attach-open-btn .fa-badge {
  flex: 0 0 auto;
  min-width: 20px; padding: 1px 7px;
  background: #667eea; color: #fff;
  border-radius: 10px; font-size: 11px; font-weight: 700;
  text-align: center;
}

/* Attachment registry modal */
.ar-dialog { max-width: 95vw; width: 1100px; max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 12px 48px rgba(0,0,0,.6); }
.ar-table th, .ar-table td { white-space: nowrap; }
.ar-table .ar-idx { color: var(--text-muted); text-align: center; width: 34px; }
.ar-table .ar-name { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.ar-table .ar-type { color: var(--accent); text-transform: uppercase; font-size: 10px; }
.ar-table .ar-date { color: var(--text-muted); font-size: 10.5px; }
.ar-table input.ar-edit, .ar-table input.ar-ref {
  width: 100%; min-width: 70px; padding: 4px 6px; font-size: 11px;
  background: var(--bg-base); border: 1px solid transparent; border-radius: 3px; color: var(--text-primary);
}
.ar-table input.ar-edit:hover { border-color: var(--border); }
.ar-table input.ar-edit:focus { outline: none; border-color: var(--accent); background: var(--bg-panel); }
.ar-status {
  padding: 4px 6px; font-size: 11px; font-weight: 600;
  border-radius: 4px; cursor: pointer; border: 1px solid var(--border);
  background: var(--bg-panel); color: var(--text-primary);
}
.ar-status.st-approved { background: rgba(46,204,113,.18); border-color: #2ecc71; color: #2ecc71; }
.ar-status.st-rejected { background: rgba(248,81,73,.18); border-color: var(--danger); color: var(--danger); }
.ar-status.st-pending  { background: rgba(243,156,18,.18); border-color: #f39c12; color: #f39c12; }
.ar-sortable { cursor: pointer; user-select: none; transition: color .15s; }
.ar-sortable:hover { color: var(--accent); }
.ar-sorted { color: var(--accent); }
.ar-arrow { font-size: 9px; opacity: .8; }
.ar-table .at-filter-row td { position: sticky; top: 34px; }
.ar-colfilter {
  width: 100%; min-width: 56px;
  padding: 3px 6px; font-size: 10.5px;
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: 3px; color: var(--text-primary);
}
.ar-colfilter:focus { outline: none; border-color: var(--accent); }
.ar-actions { white-space: nowrap; }
.ar-pv, .ar-dl, .ar-rm {
  width: 24px; height: 24px; margin: 0 1px;
  background: transparent; border: 1px solid var(--border);
  border-radius: 4px; cursor: pointer; font-size: 11px;
  transition: background .15s, color .15s, border-color .15s;
}
.ar-pv  { color: #f39c12; } .ar-pv:hover  { background: rgba(243,156,18,.2); }
.ar-dl  { color: var(--accent); } .ar-dl:hover  { background: rgba(52,152,219,.2); }
.ar-rm  { color: var(--text-muted); } .ar-rm:hover  { background: rgba(248,81,73,.18); border-color: var(--danger); color: var(--danger); }
.feat-attr-key-schema { color: var(--accent); }

/* Layer fields modal */
.lf-hint { font-size: 11px; color: var(--text-muted); line-height: 1.5; margin: 0 0 12px; }
.lf-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; min-height: 30px; }
.lf-empty { font-size: 11px; color: var(--text-muted); padding: 8px; text-align: center; }
.lf-field-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.lf-field-name { flex: 1; font-size: 12px; font-weight: 500; color: var(--text-primary); }
.lf-field-del {
  width: 22px; height: 22px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer; font-size: 12px;
  transition: background .15s, color .15s, border-color .15s;
}
.lf-field-del:hover { background: rgba(248,81,73,.18); border-color: var(--danger); color: var(--danger); }
.lf-add-row { display: flex; gap: 8px; }
.lf-add-input {
  flex: 1;
  padding: 8px 10px;
  font-size: 12px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}
.lf-add-input:focus { outline: none; border-color: var(--accent); }
.lf-add-btn {
  padding: 8px 14px;
  font-size: 12px; font-weight: 600;
  background: rgba(52,152,219,.16);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--accent);
  cursor: pointer; white-space: nowrap;
  transition: background .15s;
}
.lf-add-btn:hover { background: rgba(52,152,219,.32); }

/* Layer-row fields / table buttons */
.layer-fields-btn,
.layer-table-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
  transition: color .15s;
}
.layer-fields-btn:hover,
.layer-table-btn:hover { color: var(--accent); }

/* Attribute table — floating, non-blocking, draggable window */
#attrTableModal.modal-overlay {
  background: transparent;          /* no dark backdrop → map stays visible */
  pointer-events: none;            /* clicks pass through to the map/UI */
  justify-content: flex-start;
  align-items: flex-start;
}
#attrTableModal .at-dialog {
  pointer-events: auto;            /* the window itself is interactive */
  position: absolute;
}
#attrTableModal .modal-header {
  cursor: move;
  user-select: none;
}
.at-dialog {
  max-width: 92vw;
  width: 1000px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 48px rgba(0,0,0,.6);
}
.at-header-right { display: flex; align-items: center; gap: 10px; }
.at-close-btn {
  width: 28px; height: 28px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 17px; line-height: 1;
  transition: background .15s, border-color .15s, color .15s;
}
.at-close-btn:hover { background: rgba(248,81,73,.18); border-color: var(--danger); color: var(--danger); }
.at-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.at-search {
  flex: 1;
  padding: 7px 10px;
  font-size: 12px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}
.at-search:focus { outline: none; border-color: var(--accent); }
.at-exp-btn {
  font-size: 11px; font-weight: 600;
  padding: 6px 11px;
  background: rgba(46,204,113,.14);
  border: 1px solid #2ecc71;
  border-radius: var(--radius-sm);
  color: #2ecc71;
  cursor: pointer; white-space: nowrap;
  transition: background .15s;
}
.at-exp-btn:hover { background: rgba(46,204,113,.28); }
.at-count { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.at-scroll { flex: 1; overflow: auto; padding: 0; }
.at-empty { padding: 30px; text-align: center; color: var(--text-muted); font-size: 13px; }

.at-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}
.at-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-panel);
  color: var(--text-secondary, #c9d1d9);
  text-align: left;
  font-weight: 600;
  padding: 8px 10px;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.at-table tbody td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.at-table tbody tr:hover td { background: var(--bg-hover); }
.at-table .at-idx { color: var(--text-muted); width: 36px; text-align: center; font-variant-numeric: tabular-nums; }
.at-table .at-type { color: var(--accent); font-weight: 600; white-space: nowrap; }
.at-table .at-len  { color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.at-table .at-area { color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.at-table th.at-sortable { cursor: pointer; user-select: none; }
.at-table th.at-sortable:hover { color: var(--accent, #2d8cf0); }
.at-table .at-sort-ind { margin-left: 4px; font-size: 10px; color: var(--accent, #2d8cf0); }
/* Resizable / hideable columns */
.at-table thead th { position: relative; }
.at-table td, .at-table th { overflow: hidden; }
.at-table .at-cell, .at-table .at-colfilter { width: 100%; min-width: 0; box-sizing: border-box; }
.at-col-resize { position: absolute; top: 0; bottom: 0; left: 0; width: 7px; cursor: col-resize; z-index: 3; }
.at-col-resize:hover { background: var(--accent, #2d8cf0); opacity: .55; }
.at-col-hide { position: absolute; top: 3px; right: 4px; font-size: 10px; color: var(--text-muted); cursor: pointer; opacity: 0; transition: opacity .12s; z-index: 3; }
.at-table th.at-sortable:hover .at-col-hide { opacity: .75; }
.at-col-hide:hover { color: #f0716e; opacity: 1; }
/* Columns manager popup */
#attrTableModal .at-dialog { position: relative; }
.at-cols-pop { position: absolute; top: 92px; left: 14px; width: 290px; max-height: 70%; overflow: auto; background: var(--bg-panel, #11161d); border: 1px solid var(--border); border-radius: 9px; box-shadow: 0 12px 34px rgba(0,0,0,.55); z-index: 40; font-size: 12.5px; }
.at-cols-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-panel, #11161d); }
.at-cols-head .atc-x { background: none; border: none; color: var(--text-muted); font-size: 18px; cursor: pointer; }
.at-cols-add { display: flex; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.at-cols-add input { flex: 1; min-width: 0; background: var(--bg-input, #0d1117); color: var(--text-primary, #e6edf3); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; }
.at-cols-add button { background: var(--accent, #2d8cf0); color: #fff; border: none; border-radius: 6px; padding: 6px 10px; cursor: pointer; white-space: nowrap; }
.at-cols-sec { color: var(--text-muted); font-size: 11px; padding: 8px 12px 3px; }
.at-cols-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 12px; }
.at-cols-row:hover { background: var(--bg-hover); }
.at-cols-row label { display: flex; align-items: center; gap: 7px; cursor: pointer; flex: 1; }
.at-cols-row .atc-del { background: none; border: none; color: #f0716e; cursor: pointer; font-size: 13px; }
.at-cols-row .atc-builtin { color: var(--text-muted); font-size: 10px; }
.at-cols-empty { color: var(--text-muted); padding: 6px 12px; font-size: 11px; }
.at-locate-cell { width: 30px; text-align: center; }
.at-locate {
  width: 22px; height: 22px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--accent);
  cursor: pointer; font-size: 12px;
  transition: background .15s;
}
.at-locate:hover { background: rgba(52,152,219,.2); }
.at-cell {
  width: 100%;
  min-width: 90px;
  padding: 4px 6px;
  font-size: 11.5px;
  background: var(--bg-base);
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--text-primary);
}
.at-cell:hover { border-color: var(--border); }
.at-cell:focus { outline: none; border-color: var(--accent); background: var(--bg-panel); }

/* Bulk-fill toolbar */
.at-bulkbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-base);
}
.at-bulk-label { font-size: 11px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.at-bulk-col {
  padding: 6px 8px; font-size: 11px;
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary); cursor: pointer;
  max-width: 160px;
}
.at-bulk-val {
  flex: 1; min-width: 120px;
  padding: 6px 9px; font-size: 11.5px;
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary);
}
.at-bulk-val:focus { outline: none; border-color: var(--accent); }
.at-bulk-btn {
  font-size: 11px; font-weight: 600; padding: 6px 12px;
  background: rgba(52,152,219,.16); border: 1px solid var(--accent);
  border-radius: var(--radius-sm); color: var(--accent);
  cursor: pointer; white-space: nowrap; transition: background .15s;
}
.at-bulk-btn:hover { background: rgba(52,152,219,.32); }
.at-bulk-all { background: rgba(243,156,18,.16); border-color: #f39c12; color: #f39c12; }
.at-bulk-all:hover { background: rgba(243,156,18,.30); }

/* Per-column filter row */
.at-filter-row td { padding: 3px 6px !important; background: var(--bg-base); position: sticky; top: 34px; z-index: 1; }
.at-colfilter {
  width: 100%; min-width: 60px;
  padding: 3px 6px; font-size: 11px;
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: 3px; color: var(--text-primary);
}
.at-colfilter:focus { outline: none; border-color: var(--accent); }

/* Attachment column */
.at-attach-th { width: 46px; text-align: center; }
.at-attach-cell { text-align: center; width: 46px; }
.at-attach-open {
  background: transparent; border: 1px solid transparent;
  border-radius: 4px; cursor: pointer;
  font-size: 11px; padding: 2px 6px; color: var(--text-muted);
  transition: background .15s, color .15s, border-color .15s;
}
.at-attach-open:hover { background: var(--bg-hover); color: var(--text-primary); }
.at-attach-open.has {
  color: #2ecc71; font-weight: 700;
  background: rgba(46,204,113,.14); border-color: #2ecc71;
}

/* Floating attachment list panel */
.at-attach-panel {
  position: absolute;
  width: 280px;
  max-height: 320px;
  display: flex; flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: 0 10px 36px rgba(0,0,0,.6);
  z-index: 30;
  overflow: hidden;
}
.at-attach-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px;
  background: linear-gradient(135deg,#667eea,#764ba2);
  color: #fff; font-size: 12px; font-weight: 600;
}
.at-attach-x {
  background: rgba(255,255,255,.2); border: none; color: #fff;
  width: 22px; height: 22px; border-radius: 4px; cursor: pointer; font-size: 14px;
}
.at-attach-x:hover { background: rgba(255,0,0,.35); }
.at-attach-filter {
  margin: 8px; padding: 6px 8px; font-size: 11px;
  background: var(--bg-base); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary);
}
.at-attach-filter:focus { outline: none; border-color: var(--accent); }
.at-attach-listbody { flex: 1; overflow-y: auto; padding: 0 8px; }
.at-attach-empty { padding: 14px; text-align: center; font-size: 11px; color: var(--text-muted); }
.at-attach-item {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 4px; border-bottom: 1px solid var(--border);
}
.at-attach-ico { flex: 0 0 auto; font-size: 13px; }
.at-attach-nm { flex: 1; min-width: 0; font-size: 11px; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-attach-sz { flex: 0 0 auto; font-size: 9px; color: var(--text-muted); }
.at-attach-pv, .at-attach-dlb, .at-attach-rm {
  flex: 0 0 auto; width: 20px; height: 20px;
  background: transparent; border: 1px solid var(--border);
  border-radius: 3px; cursor: pointer; font-size: 10px;
  transition: background .15s, color .15s, border-color .15s;
}
.at-attach-pv  { color: #f39c12; } .at-attach-pv:hover  { background: rgba(243,156,18,.2); }
.at-attach-dlb { color: var(--accent); } .at-attach-dlb:hover { background: rgba(52,152,219,.2); }
.at-attach-rm  { color: var(--text-muted); } .at-attach-rm:hover { background: rgba(248,81,73,.18); border-color: var(--danger); color: var(--danger); }
.at-attach-foot { padding: 8px; border-top: 1px solid var(--border); }
.at-attach-addbtn {
  width: 100%; padding: 6px; font-size: 11px; font-weight: 600;
  background: rgba(46,204,113,.14); border: 1px solid #2ecc71;
  border-radius: var(--radius-sm); color: #2ecc71; cursor: pointer;
}
.at-attach-addbtn:hover { background: rgba(46,204,113,.28); }

/* Row selection */
.at-sel-cell { cursor: pointer; user-select: none; white-space: nowrap; }
.at-rowcb { vertical-align: middle; margin-left: 4px; cursor: pointer; }
.at-rownum { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.at-table tbody tr.at-row-sel td { background: rgba(52,152,219,.18) !important; }
.at-table tbody tr.at-row-sel:hover td { background: rgba(52,152,219,.26) !important; }

.prop-row {
  display: flex;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px solid var(--border);
}

.prop-key {
  color: var(--text-muted);
  flex-shrink: 0;
  width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Roboto Mono', monospace;
  direction: ltr;
}

.prop-val {
  color: var(--text-primary);
  flex: 1;
  word-break: break-all;
  direction: ltr;
}

/* ─── MAP HINT ─── */
.map-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  z-index: 10;
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.map-hint p {
  font-size: 14px;
  max-width: 280px;
  line-height: 1.6;
}

.map-hint.hidden { display: none; }

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  text-decoration: none;
  white-space: nowrap;
}

.btn svg { flex-shrink: 0; width: 14px; height: 14px; }

.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-hover); }

.btn-success {
  background: var(--success);
  color: #fff;
  border-color: var(--success);
}
.btn-success:hover { background: #52d060; }

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-light); }

.btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.w-full { width: 100%; justify-content: center; }

.micro-btn {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  transition: background .15s, color .15s;
}

.micro-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ─── TOAST ─── */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1000;
  pointer-events: none;
}

.toast {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: 12px;
  color: var(--text-primary);
  box-shadow: var(--shadow);
  pointer-events: auto;
  animation: slideIn .25s ease;
  max-width: 320px;
}

.toast.toast-success { border-left: 3px solid var(--success); }
.toast.toast-error   { border-left: 3px solid var(--danger); }
.toast.toast-warn    { border-left: 3px solid var(--warning); }

@keyframes slideIn {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ─── COLOR PICKER ─── */
.color-picker-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

/* ─── CRS SELECTION DIALOG ─── */
.crs-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
  z-index: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crs-dialog {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 48px rgba(0,0,0,.8);
  width: min(480px, 94vw);
  overflow: hidden;
  animation: crsSlideIn .2s ease;
}

@keyframes crsSlideIn {
  from { transform: translateY(-16px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

.crs-dialog-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  color: var(--accent);
}

.crs-dialog-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
}

.crs-dialog-file {
  font-size: 10px;
  color: var(--text-muted);
  font-family: 'Roboto Mono', monospace;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 340px;
}

.crs-dialog-body { padding: 16px 18px; }

.crs-dialog-prompt {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 14px;
  line-height: 1.5;
}

.crs-zone-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.crs-zone-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 4px;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  position: relative;
  min-height: 76px;
  text-align: center;
}
.crs-zone-btn:hover { border-color: var(--accent); background: var(--bg-hover); }
.crs-zone-btn.selected { border-color: var(--accent); background: rgba(45,140,240,.12); }
.crs-recommended { border-color: var(--success) !important; }
.crs-recommended.selected { background: rgba(63,185,80,.12) !important; }

.crs-zone-num {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'Roboto Mono', monospace;
  line-height: 1;
}
.crs-zone-desc {
  font-size: 9px;
  color: var(--text-muted);
  line-height: 1.35;
}
.crs-zone-star {
  position: absolute;
  top: 5px;
  right: 7px;
  font-size: 11px;
  color: var(--success);
}

.crs-other-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.crs-other-label { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.crs-other-select {
  flex: 1;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 11px;
  font-family: inherit;
  padding: 4px 6px;
  outline: none;
}
.crs-other-select:focus { border-color: var(--accent); }
.crs-other-select option, .crs-other-select optgroup { background: var(--bg-panel); }

.crs-dialog-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
}

/* ─── PREVIEW MODAL ─── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(4px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-dialog {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 40px rgba(0,0,0,.7);
  width: min(1060px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.modal-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}

.modal-filename {
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'Roboto Mono', monospace;
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
}

.modal-body {
  display: flex;
  gap: 0;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.modal-preview-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--bg-base);
  border-right: 1px solid var(--border);
  gap: 8px;
  min-width: 0;
  position: relative;
}

.preview-zoom-controls {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 10;
}

.preview-zoom-btn {
  width: 26px;
  height: 26px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s;
  user-select: none;
}
.preview-zoom-btn:hover { background: var(--bg-hover); border-color: var(--accent); color: var(--accent); }
.preview-zoom-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.preview-zoom-divider { height: 1px; background: var(--border); margin: 2px 0; }

.modal-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
  cursor: grab;
  border-radius: 6px;
}
.modal-preview:active { cursor: grabbing; }

.modal-preview svg {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  transform-origin: center;
  user-select: none;
}

.modal-meta {
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'Roboto Mono', monospace;
}

.modal-crs-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  width: 100%;
  flex-wrap: wrap;
}

.modal-crs-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.modal-crs-select {
  flex: 1;
  min-width: 180px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 11px;
  font-family: inherit;
  padding: 3px 6px;
  outline: none;
  cursor: pointer;
}
.modal-crs-select:focus { border-color: var(--accent); }
.modal-crs-select option, .modal-crs-select optgroup { background: var(--bg-panel); }

.modal-crs-detected {
  font-size: 10px;
  color: var(--success);
  font-family: 'Roboto Mono', monospace;
  white-space: nowrap;
}

.modal-layout-warn {
  font-size: 11px;
  color: var(--warning);
  background: rgba(210,153,34,.08);
  border: 1px solid rgba(210,153,34,.25);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  text-align: center;
  width: 100%;
}

.modal-layers-panel {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-layers-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.modal-layer-search-wrap {
  padding: 6px 8px 4px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.modal-layer-search {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  padding: 5px 8px;
  font-size: 11px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}
.modal-layer-search:focus { border-color: var(--accent); }
.modal-layer-search::placeholder { color: var(--text-dim); }

.modal-layer-footer {
  padding: 4px 10px;
  font-size: 10px;
  color: var(--text-dim);
  text-align: center;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  min-height: 20px;
}

.modal-layer-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.modal-layer-list::-webkit-scrollbar { width: 3px; }
.modal-layer-list::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }

.modal-layer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s;
  border: 1px solid transparent;
}

.modal-layer-item:hover { background: var(--bg-hover); border-color: var(--border); }

.modal-layer-item.layer-flash {
  border-color: var(--accent) !important;
  animation: layer-flash 1.4s ease forwards;
}
@keyframes layer-flash {
  0%   { background: rgba(45,140,240,.45); }
  60%  { background: rgba(45,140,240,.15); }
  100% { background: transparent; }
}

.modal-layer-item input[type="checkbox"] {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  cursor: pointer;
}

.modal-layer-name {
  flex: 1;
  font-size: 11px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
}

.modal-layer-count {
  font-size: 10px;
  color: var(--text-dim);
  font-family: 'Roboto Mono', monospace;
  white-space: nowrap;
  flex-shrink: 0;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
  flex-shrink: 0;
}

/* ─── Layer feature tree ─── */
.layer-expand-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 0 2px;
  font-size: 11px;
  flex-shrink: 0;
  transition: color .15s, transform .2s;
  line-height: 1;
}
.layer-expand-btn.open { transform: rotate(90deg); color: var(--accent); }
.layer-expand-btn:hover { color: var(--text-primary); }
/* Left-side chevron (mirrors the group/department collapse arrow) */
.layer-chevron { display: inline-flex; align-items: center; justify-content: center; }

/* max-height expand/collapse — JS controls the inline maxHeight value */
.layer-tree {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;            /* never let the scrolling flex list crush this open panel */
  max-height: 0;
  overflow: hidden;
  transition: max-height .28s ease;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  margin-bottom: 2px;
}
/* .open kept for re-render cases; JS inline style always takes priority */
.layer-tree.open { max-height: 360px; }

/* Compact 3-feature preview */
.feat-row-compact {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-size: 10.5px;
  border-bottom: 1px solid rgba(48,54,61,.35);
  transition: background .1s;
  cursor: pointer;
}
.feat-row-compact:hover { background: var(--bg-hover); }
.feat-row-compact.sel { background: rgba(52,152,219,.28); outline: 1px solid var(--accent, #3498db); outline-offset: -1px; }
.feat-row-compact .feat-actions { margin-left: auto; }

.layer-tree-more-btn {
  display: block;
  width: 100%;
  padding: 5px 10px;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  color: var(--accent);
  font-size: 10px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background .1s;
}
.layer-tree-more-btn:hover { background: var(--bg-hover); }

.layer-tree-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.layer-tree-filter {
  flex: 1;
  min-width: 80px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-primary);
  font-size: 10px;
  font-family: inherit;
  padding: 2px 5px;
  outline: none;
}
.layer-tree-filter:focus { border-color: var(--accent); }
.layer-tree-filter::placeholder { color: var(--text-dim); }
.layer-tree-type-filter {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-muted);
  font-size: 10px;
  font-family: inherit;
  padding: 2px 4px;
  outline: none;
}

.layer-tree-list {
  max-height: 260px;
  overflow-y: auto;
}
.layer-tree-list::-webkit-scrollbar { width: 3px; }
.layer-tree-list::-webkit-scrollbar-thumb { background: var(--border-light); }

/* Vertical resize handle for layer tree */
.layer-tree-resize {
  height: 14px;
  cursor: row-resize;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, border-color .12s;
  user-select: none;
  flex-shrink: 0;
}
.layer-tree-resize:hover,
.layer-tree-resize:active {
  background: rgba(45,140,240,.18);
  border-color: var(--accent);
}
.layer-tree-resize::after {
  content: '⠿';
  font-size: 13px;
  color: var(--border-light);
  letter-spacing: 2px;
  line-height: 1;
  pointer-events: none;
}
.layer-tree-resize:hover::after { color: var(--accent); }

.feat-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-size: 10px;
  border-bottom: 1px solid rgba(48,54,61,.5);
  transition: background .1s;
  cursor: default;
}
.feat-row:hover { background: var(--bg-hover); }
.feat-row.feat-glowing { background: rgba(255,255,0,.08); }
.feat-row.sel { background: rgba(52,152,219,.28); outline: 1px solid var(--accent, #3498db); outline-offset: -1px; }

/* Inline attribute editing in the feature tree */
.ftree-attr {
  flex: 1; min-width: 60px; max-width: 130px;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text-primary); font-size: 10.5px; padding: 2px 5px; outline: none;
}
.ftree-attr:focus { border-color: var(--accent, #3498db); background: var(--bg-base); }
.ftree-attr::placeholder { color: var(--text-dim); }
.ftree-name { font-weight: 600; min-width: 80px; }

/* Unified selection-actions bar (Features / Layers / Groups via a dropdown) */
.sel-actions-bar {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px; margin-bottom: 6px;
  /* L6.7-DEL: wrap, don't scroll — at the default panel width the tools overflowed and the last two
     (✕ Delete, Clear) sat off-screen behind a 3-px scrollbar. Now every tool is always in view. */
  flex-wrap: wrap; overflow-x: visible;
  background: linear-gradient(180deg, rgba(52,152,219,.18), rgba(52,152,219,.10));
  border: 1px solid var(--accent, #3498db); border-radius: 8px;
}
.sel-actions-bar::-webkit-scrollbar { height: 3px; }
.sel-actions-bar::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }
.sab-scope {
  background: var(--bg-base); color: var(--text-primary); border: 1px solid var(--accent, #3498db);
  border-radius: 6px; font-size: 11px; padding: 4px 6px; font-weight: 600; cursor: pointer; flex-shrink: 0;
}
.sab-count {
  font-size: 11px; font-weight: 800; color: #fff; background: var(--accent, #3498db);
  border-radius: 10px; padding: 1px 8px; flex-shrink: 0; min-width: 20px; text-align: center;
}
.sab-tools { display: flex; gap: 4px; flex-wrap: wrap; flex: 1 1 auto; }   /* L6.7-DEL: was nowrap */
.sab-btn {
  font-size: 13px; line-height: 1; padding: 5px 7px; min-width: 28px; border-radius: 6px;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary, #c9d1d9);
}
.sab-btn:hover { border-color: var(--accent, #3498db); color: var(--text-primary); }
.sab-btn.sab-del { color: #e74c3c; border-color: rgba(231,76,60,.5); }
.sab-btn.sab-del:hover { background: rgba(231,76,60,.15); }
.sab-btn.sab-clear { margin-left: auto; font-size: 11px; flex-shrink: 0; }
.feat-lock { flex-shrink: 0; font-size: 10px; }
body.area-mode .ol-viewport, body.buffer-mode .ol-viewport { cursor: crosshair; }

/* Setback rules builder */
.sb-section { border: 1px solid var(--border); border-radius: 8px; padding: 10px; background: rgba(255,255,255,.02); }
.sb-section-title { font-size: 12px; font-weight: 700; color: var(--accent, #3498db); margin-bottom: 8px; }
.sb-fields { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sb-fieldchip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 3px 5px 3px 10px; }
.sb-fieldchip em { color: var(--text-dim); font-style: normal; font-size: 9.5px; }
.sb-fieldx { background: none; border: none; cursor: pointer; color: #e74c3c; font-size: 12px; line-height: 1; }
.sb-fieldx:hover { color: #ff6b6b; }
.sb-addfield { display: flex; gap: 6px; flex-wrap: wrap; }
.sb-addfield .ue-input { flex: 1; min-width: 120px; margin: 0; }
.sb-ruleform { display: flex; flex-direction: column; gap: 6px; }
.sb-frow { display: flex; align-items: center; gap: 6px; }
.sb-flabel { font-size: 11px; min-width: 90px; color: var(--text-secondary, #c9d1d9); flex-shrink: 0; }
.sb-fin { margin: 0 !important; flex: 1; }
/* L6.5-B: .la-sep divided the layers header's view actions from its create
   actions. There is nothing left to divide — the view actions moved into the
   filter popover and the create actions behind ＋ New — so the rule went with
   the markup it styled. */

/* ─── L6.5-B: a menubar dropdown living inside a panel ───────────────────────
   ＋ New in the layers header reuses .mbar-menu / .mbar-btn / .mbar-dropdown so
   that the menubar's existing open-close listener drives it and no new JS was
   written. Like the map stack, it has to be released from the header anchor:
   .mbar-dropdown is position:fixed at the header and app.js writes an inline
   `left` from the button rect, so both are overridden here — the !important is
   beating that inline style, not another rule. */
.panel-menu { position: relative; }
.panel-menu > .mbar-btn.panel-menu-btn {
  height: 20px; padding: 0 8px; gap: 3px;
  font-size: 10.5px; font-weight: 700;
  background: rgba(45,140,240,.12);
  border: 1px solid var(--accent);
  border-radius: 3px;
  color: var(--accent);
  white-space: nowrap;
}
.panel-menu > .mbar-btn.panel-menu-btn::after { display: none; }
.panel-menu.open > .mbar-btn.panel-menu-btn { background: var(--accent); color: #fff; }
.panel-menu > .mbar-dropdown {
  position: absolute; top: 100%; left: auto !important; right: 0;
  min-width: 210px;
  border-radius: var(--radius);
}

/* The three visibility settings in the filter popover: a labelled row, so they
   read as settings of the list rather than as commands. */
#visFilterRow { gap: 4px; }
#visFilterRow .micro-btn { flex: 1; }
.feat-row.feat-locked { background: rgba(243,156,18,.08); }
.isolate-bar { border-color: #f39c12 !important; }
.isolate-bar b { color: #f39c12; }
.isolate-bar .iso-dim { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary, #c9d1d9); }
.isolate-bar .iso-dim input[type=range] { width: 80px; accent-color: #0ea5e9; }
.feat-bulk-bar .fbb-count { font-size: 11px; font-weight: 700; color: var(--accent, #3498db); margin-right: auto; }
.fbb-btn {
  font-size: 11px; padding: 3px 8px; border-radius: 4px; cursor: pointer; white-space: nowrap;
  background: var(--bg-base); border: 1px solid var(--border); color: var(--text-secondary, #c9d1d9);
}
.fbb-btn:hover { border-color: var(--accent, #3498db); }
.fbb-btn.fbb-del { color: #e74c3c; border-color: rgba(231,76,60,.5); }
.fbb-btn.fbb-del:hover { background: rgba(231,76,60,.15); }
.ftree-hint { color: var(--text-dim); font-size: 9.5px; }

/* Deletion-review block inside the feature popup (central admin) */
.feat-del-review { border: 1px solid rgba(231,76,60,.5) !important; background: rgba(231,76,60,.08) !important; }

/* Edit-shape (vertex editing) active state */
#btnEditShape.active, .mbar-opt.active { background: rgba(0,229,255,.15); color: #00e5ff; }
#popupEditShapeBtn:hover { color: #00e5ff; border-color: #00e5ff; }

/* Nearest-distance mode floating bar */
.nearest-bar {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 400; display: none; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: 22px; font-size: 12px;
  background: var(--bg-panel, #0d1117); border: 1px solid #00e5ff;
  box-shadow: 0 6px 20px rgba(0,0,0,.5); color: var(--text-primary, #e6edf3);
}
.nearest-bar b { color: #00e5ff; }
.nearest-bar button {
  font-size: 11px; padding: 3px 10px; border-radius: 6px; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary, #c9d1d9);
}
.nearest-bar button:hover { border-color: #00e5ff; color: #00e5ff; }
.nearest-bar .nr-count { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-secondary, #c9d1d9); }
.nearest-bar .nr-count input { background: var(--bg-input, #0d1117); color: var(--text, #e6edf3); border: 1px solid var(--border); border-radius: 5px; padding: 2px 5px; font-size: 11px; }
.nearest-bar #nrAll.on { background: #00e5ff; color: #06283a; border-color: #00e5ff; font-weight: 600; }
body.nearest-on .ol-viewport { cursor: crosshair; }
/* ─── Satellite imagery ordering panel ─── */
.io-aoi { background: #11161d; border: 1px solid #2b3440; border-radius: 10px; padding: 10px 12px; font-size: 13.5px; line-height: 1.7; }
.io-sec { font-weight: 800; margin: 16px 0 8px; color: #cfe0f5; font-size: 14px; }
.io-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.io-card { background: #141d29; border: 1px solid #243042; border-radius: 12px; padding: 12px; }
.io-cn { font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.io-badge { font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 2px 8px; }
.io-free { background: rgba(34,197,94,.15); color: #6ee7a8; border: 1px solid rgba(34,197,94,.4); }
.io-paid { background: rgba(245,158,11,.15); color: #fbbf60; border: 1px solid rgba(245,158,11,.4); }
.io-cm { color: #9aa7b8; font-size: 12.5px; margin: 5px 0; }
.io-cnote { color: #7d8a9c; font-size: 12px; margin-bottom: 8px; }
.io-go { width: 100%; background: #1f2a3a; color: #cfe0f5; border: 1px solid #34465c; border-radius: 8px; padding: 7px; font-size: 13px; font-weight: 700; cursor: pointer; }
.io-go:hover { background: #28384c; }
.io-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.io-reco { background: rgba(61,139,255,.10); border: 1px solid rgba(61,139,255,.3); border-radius: 10px; padding: 9px 12px; font-size: 13px; line-height: 1.7; margin-top: 10px; color: #d4e3f7; }
.io-reco b { color: #fff; }
.io-warn { color: #fbbf60; }
.io-cost { color: #6ee7a8; font-size: 12.5px; font-weight: 700; margin-bottom: 8px; }
.io-needs { font-weight: 400; font-size: 12px; color: #8b97a8; margin-inline-start: 8px; }
.io-chip { background: #1a2330; color: #aebbcd; border: 1px solid #2b3a4d; border-radius: 999px; padding: 3px 11px; font-size: 12px; cursor: pointer; margin-inline-start: 4px; }
.io-chip.on { background: #1d3a6b; color: #cfe0ff; border-color: #3d8bff; }
@media (max-width: 620px) { .io-grid { grid-template-columns: 1fr; } }

/* ─── Top header: tidy the crowded right-hand action cluster ─── */
.header-actions { gap: 6px; }
/* Utility buttons (Team / Clear All / Fit View / Base Map) → icon-only; tooltips keep meaning */
.header-actions > .btn-ghost { font-size: 0; padding: 7px; gap: 0; }
.header-actions > .btn-ghost > svg { width: 16px; height: 16px; }
.header-actions > .btn-ghost .collab-hdr-badge,
.header-actions > .btn-ghost .chat-unread-badge { font-size: 10px; }
/* Sync indicators (status + ⬇ ⬆ 🔄) → one neat grouped pill */
.sync-wrap { display: flex; align-items: center; gap: 1px; background: #11161d; border: 1px solid #2b3440; border-radius: 9px; padding: 1px 4px; }
.sync-wrap .sync-now-btn { font-size: 12px; padding: 3px 4px; line-height: 1; background: none; border: none; cursor: pointer; }
.sync-wrap .sync-status { font-size: 11px; }
/* Search box → a touch narrower so it doesn't dominate */
.gfs-input { width: 210px; }

/* Workspace (entity) switcher in the header */
.ws-switch { display: flex; align-items: center; gap: 5px; background: #11161d; border: 1px solid #2b3440; border-radius: 9px; padding: 3px 8px; margin-inline-end: 8px; }
.ws-switch .ws-ic { font-size: 13px; }
.ws-switch select { background: #0d1117; color: #e6edf3; border: 1px solid #2f3e50; border-radius: 6px; padding: 4px 6px; font-size: 12.5px; font-weight: 700; cursor: pointer; max-width: 150px; }
.ws-switch select:focus { outline: none; border-color: #3d8bff; }

/* In-portal visual stakeout guidance panel */
.sp-panel { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 100045; min-width: 230px; background: rgba(13,17,23,.95); border: 1px solid #2b3440; border-radius: 14px; padding: 10px 14px; box-shadow: 0 12px 34px rgba(0,0,0,.55); text-align: center; color: #e6edf3; }
.sp-panel .sp-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: #9aa4b2; margin-bottom: 4px; }
.sp-panel .sp-h b { color: #00e5ff; }
.sp-panel .sp-h #spStop { background: none; border: none; color: #f0a0b0; font-size: 17px; cursor: pointer; }
.sp-panel .sp-dist { font-size: 30px; font-weight: 800; }
.sp-panel .sp-go { font-size: 15px; font-weight: 700; color: #cbd5e1; margin-top: 2px; }
.sp-panel .sp-brg { font-size: 12px; color: #8b95a1; }

/* Edit-shape: add vertex (click / DGPS) panel */
.edit-vtx-panel { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 100040; display: flex; gap: 8px; background: rgba(17,22,29,.95); border: 1px solid #2b3440; border-radius: 12px; padding: 7px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.edit-vtx-panel .ev-btn { background: #1b2430; color: #e6edf3; border: 1px solid #2f3e50; border-radius: 9px; padding: 9px 13px; font-size: 13px; cursor: pointer; }
.edit-vtx-panel .ev-btn:hover { background: #25344a; border-color: #3d8bff; }
.edit-vtx-panel .ev-btn.on { background: #2563eb; border-color: #2563eb; color: #fff; }
.edit-vtx-panel .ev-btn.dg { background: #1f7a36; border-color: #1f7a36; color: #fff; }
.edit-vtx-panel .ev-btn.dg:hover { background: #248a3d; }

/* Distances report panel (draggable, exportable) */
.nearest-report {
  position: fixed; right: 16px; top: 84px; z-index: 420; display: none; flex-direction: column;
  width: 340px; max-height: 90vh; border-radius: 10px; overflow: hidden;
  background: var(--bg-panel, #0d1117); border: 1px solid #00e5ff;
  box-shadow: 0 10px 30px rgba(0,0,0,.55); color: var(--text-primary, #e6edf3);
  resize: both; min-width: 250px; min-height: 150px; max-width: 96vw;
}
.nearest-report::-webkit-resizer { background: linear-gradient(135deg, transparent 48%, #00e5ff 48%, #00e5ff 60%, transparent 60%); }
.nr-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; background: var(--bg-card); border-bottom: 1px solid var(--border);
  cursor: move; user-select: none; font-size: 12px;
}
.nr-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nr-title b { color: #00e5ff; }
.nr-head-btns { display: flex; gap: 6px; flex-shrink: 0; }
.nr-head-btns button { cursor: pointer; font-size: 11px; padding: 3px 8px; border-radius: 5px;
  background: var(--bg-base); border: 1px solid var(--border); color: var(--text-secondary, #c9d1d9); }
/* The live-station readout is a tick in the panel head, so the panel can stay
   open — with its line list and tooltip settings — while the readout is off. */
.sta-onoff {
  display: flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: 11px; padding: 3px 8px; border-radius: 5px;
  background: var(--bg-base); border: 1px solid var(--border);
  color: var(--text-secondary, #c9d1d9); user-select: none;
}
.sta-onoff:has(input:checked) { color: #00e5ff; border-color: rgba(0,229,255,.55); background: rgba(0,229,255,.12); }
.sta-onoff input { accent-color: #00e5ff; margin: 0; cursor: pointer; }
#nrExportXlsx { color: #2ecc71; border-color: rgba(46,204,113,.5); }
#nrExportXlsx:hover { background: rgba(46,204,113,.15); }
.nr-body { overflow: auto; flex: 1 1 auto; min-height: 0; }
.nr-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.nr-table th, .nr-table td { padding: 5px 8px; text-align: left; border-bottom: 1px solid var(--border); }
.nr-table th { position: sticky; top: 0; background: var(--bg-card); font-weight: 600; }
.nr-table tr:hover { background: var(--bg-hover); }
.nr-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nr-dist { color: #00e5ff; font-weight: 600; white-space: nowrap; }
.nearest-report .li-flash { background: #1b2430; border: 1px solid #2f3e50; border-radius: 5px; color: #ffea00; cursor: pointer; padding: 1px 7px; font-size: 12px; }
.nearest-report .li-flash:hover { background: #2a3a52; border-color: #ffea00; }
.nearest-report .li-att { background: #15233b; border: 1px solid #3d8bff; border-radius: 5px; color: #cfe3ff; cursor: pointer; padding: 1px 7px; font-size: 11px; white-space: nowrap; }
.nearest-report .li-att:hover { background: #1d3354; }
.li-att-pop { position: fixed; z-index: 100060; min-width: 240px; max-width: 360px; max-height: 60vh; overflow: auto; background: #11161d; border: 1px solid #2b3440; border-radius: 10px; box-shadow: 0 12px 34px rgba(0,0,0,.6); direction: rtl; color: #e6edf3; padding: 0; }
.li-att-h { display: flex; align-items: center; justify-content: space-between; padding: 8px 11px; border-bottom: 1px solid #1c232c; position: sticky; top: 0; background: #11161d; }
.li-att-h .li-att-x { background: none; border: none; color: #8b95a1; font-size: 17px; cursor: pointer; }
.li-att-row { display: flex; align-items: center; gap: 7px; padding: 6px 11px; border-bottom: 1px solid #161d25; font-size: 12px; }
.li-att-nm { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li-att-sz { color: #8b95a1; font-size: 10px; }
.li-att-pv, .li-att-dl { background: #1b2430; border: 1px solid #2f3e50; border-radius: 5px; color: #cfe3ff; cursor: pointer; padding: 2px 8px; }
.li-att-pv:hover, .li-att-dl:hover { background: #25344a; border-color: #3d8bff; }
/* Coordinates-table edit mode (reshape by coordinates) */
.nearest-report .pc-edit { width: 100%; box-sizing: border-box; background: #0d1117; color: #e6edf3; border: 1px solid #2f3e50; border-radius: 5px; padding: 3px 5px; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.nearest-report .pc-edit:focus { border-color: #2563eb; outline: none; background: #10202f; }
.nearest-report #pcEditBtn.pc-on { background: #2563eb; color: #fff; border-radius: 5px; }
.nearest-report .pc-edit-bar { margin-top: 8px; font-size: 12px; color: #9aa4b2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nearest-report .pc-apply { background: #1f7a36; color: #fff; border: none; border-radius: 6px; padding: 5px 12px; cursor: pointer; font-size: 12px; }
.nearest-report .pc-cancel { background: #2c313a; color: #e6edf3; border: 1px solid #444b56; border-radius: 6px; padding: 5px 10px; cursor: pointer; font-size: 12px; }
.nr-locate { cursor: pointer; background: none; border: none; color: var(--text-secondary, #c9d1d9); font-size: 13px; }
.nr-locate:hover { color: #00e5ff; }
.nr-summary {
  padding: 7px 10px; font-size: 12px; position: sticky; top: 0; z-index: 1;
  background: rgba(0,229,255,.10); border-bottom: 1px solid var(--border);
}
.nr-summary b { color: #00e5ff; }
.nr-subtitle { padding: 6px 10px 3px; font-size: 11px; font-weight: 700; color: var(--text-secondary, #c9d1d9);
  position: sticky; top: 0; background: var(--bg-panel, #0d1117); }

.feat-type-badge {
  font-family: 'Roboto Mono', monospace;
  font-size: 9px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 4px;
  color: var(--text-muted);
  flex-shrink: 0;
  min-width: 44px;
  text-align: center;
}
.feat-info {
  flex: 1;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Roboto Mono', monospace;
}
.feat-actions { display: flex; gap: 3px; flex-shrink: 0; }
.feat-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-dim);
  cursor: pointer;
  padding: 1px 5px;
  font-size: 10px;
  transition: background .12s, color .12s;
  line-height: 1.4;
}
.feat-btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-light); }
.feat-btn.del:hover { background: rgba(248,81,73,.15); color: var(--danger); border-color: var(--danger); }
.feat-btn.glow:hover { background: rgba(255,220,0,.15); color: #ffd700; border-color: #ffd700; }
.feat-btn.on { background: rgba(52,152,219,.22); color: var(--accent, #3498db); border-color: var(--accent, #3498db); }
.feat-row .feat-actions, .feat-row-compact .feat-actions { opacity: .6; transition: opacity .12s; }
.feat-row:hover .feat-actions, .feat-row-compact:hover .feat-actions,
.feat-row.sel .feat-actions, .feat-row-compact.sel .feat-actions { opacity: 1; }

.layer-tree-footer {
  padding: 4px 8px;
  font-size: 10px;
  color: var(--text-dim);
  text-align: center;
  border-top: 1px solid var(--border);
}

/* ─── Snap indicator ─── */
.snap-hint {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  pointer-events: none;
  animation: snap-pulse .7s ease infinite alternate;
}
/* Vertex — green circle */
.snap-hint-vertex {
  border: 2.5px solid #00ff88;
  background: rgba(0,255,136,.2);
  box-shadow: 0 0 8px rgba(0,255,136,.8);
}
/* Midpoint — yellow diamond (via rotate) */
.snap-hint-midpoint {
  border-radius: 3px;
  transform: rotate(45deg);
  border: 2.5px solid #ffd700;
  background: rgba(255,215,0,.2);
  box-shadow: 0 0 8px rgba(255,215,0,.8);
}
/* Perpendicular — cyan */
.snap-hint-perpendicular {
  border: 2px solid #00d4ff;
  background: rgba(0,212,255,.15);
  box-shadow: 0 0 8px rgba(0,212,255,.8);
  border-radius: 2px;
}
/* Edge — orange bar */
.snap-hint-edge {
  border: 2px solid #ff8c00;
  background: rgba(255,140,0,.15);
  box-shadow: 0 0 8px rgba(255,140,0,.8);
  border-radius: 1px;
}
/* Intersection — magenta X */
.snap-hint-intersection {
  border: 2px solid #ff44aa;
  background: rgba(255,68,170,.15);
  box-shadow: 0 0 8px rgba(255,68,170,.8);
  border-radius: 2px;
  transform: rotate(45deg);
}
/* Point — red circle (snap to point features) */
.snap-hint-point {
  border: 2.5px solid #ff5252;
  background: rgba(255,82,82,.2);
  box-shadow: 0 0 8px rgba(255,82,82,.85);
  border-radius: 50%;
}
.snap-dot-point { background: #ff5252; box-shadow: 0 0 4px #ff5252; border-radius: 50%; }
@keyframes snap-pulse {
  from { opacity: .7; }
  to   { opacity: 1;  }
}

/* ─── Station settings panel ─── */
.sta-panel {
  position: fixed;
  right: 56px;
  top: 200px;
  background: var(--bg-panel);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 110;
  min-width: 220px;
  overflow: hidden;
  animation: slideIn .15s ease;
}
.sta-panel-header {
  padding: 8px 12px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}
.sta-panel-title {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-muted);
}
.sta-panel-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.sta-field { display: flex; flex-direction: column; gap: 5px; }
.sta-field-label { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.sta-field-hint  { font-size: 10px; color: var(--text-dim); }
.sta-dir-btns { display: flex; gap: 4px; }
.sta-dir-btn {
  flex: 1; padding: 5px 8px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-muted);
  font-size: 11px; font-family: inherit; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.sta-dir-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.sta-dir-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.sta-offset-row { display: flex; gap: 6px; }
.sta-offset-input {
  flex: 1; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary);
  font-size: 12px; font-family: 'Roboto Mono', monospace;
  padding: 5px 8px; outline: none;
}
.sta-offset-input:focus { border-color: var(--accent); }
.sta-apply-btn { font-size: 11px !important; padding: 5px 10px !important; white-space: nowrap; }

/* ─── Snap settings panel ─── */
.snap-panel {
  position: fixed;
  right: 56px;
  top: 200px; /* adjusted via JS based on button position */
  background: var(--bg-panel);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 110;
  min-width: 200px;
  overflow: hidden;
  animation: slideIn .15s ease;
}
.snap-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}
.snap-panel-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}
.snap-master {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-primary);
  cursor: pointer;
}
.snap-master input { accent-color: var(--accent); cursor: pointer; }
.snap-options { padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; }
.snap-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  color: var(--text-primary);
  transition: background .12s;
}
.snap-option:hover { background: var(--bg-hover); }
.snap-option input { accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.snap-option small { color: var(--text-dim); font-size: 10px; }
.snap-opt-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.snap-dot-vertex        { background: #00ff88; box-shadow: 0 0 4px #00ff88; }
.snap-dot-midpoint      { border-radius: 2px; transform: rotate(45deg);
                          background: #ffd700; box-shadow: 0 0 4px #ffd700; }
.snap-dot-perpendicular { border-radius: 2px; background: #00d4ff; box-shadow: 0 0 4px #00d4ff; }
.snap-dot-edge          { background: #ff8c00; box-shadow: 0 0 4px #ff8c00; border-radius: 1px; }
.snap-dot-intersection  { background: #ff44aa; transform: rotate(45deg);
                          border-radius: 1px; box-shadow: 0 0 4px #ff44aa; }
.snap-dot-center        { background: #18ffff; border-radius: 50%; box-shadow: 0 0 4px #18ffff; }
.snap-dot-quadrant      { background: #c77dff; transform: rotate(45deg);
                          border-radius: 1px; box-shadow: 0 0 4px #c77dff; }
.snap-dot-tangent       { background: #ffab40; border-radius: 50%; box-shadow: 0 0 4px #ffab40; }
.snap-dot-angle         { background: #7CFC00; border-radius: 2px; box-shadow: 0 0 4px #7CFC00; }

/* Angle osnap — live angle readout label */
.angle-hint {
  background: rgba(13,17,23,.92); border: 1px solid #7CFC00; color: #d6ffba;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 2px 7px; border-radius: 6px; white-space: nowrap; pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.angle-hint.locked { background: #7CFC00; color: #123800; border-color: #fff; }
/* Angle snap indicator (lime square) */
.snap-hint-angle {
  border: 2px solid #7CFC00; background: rgba(124,252,0,.15);
  box-shadow: 0 0 8px rgba(124,252,0,.8); border-radius: 2px;
}
/* Angle MEASURE result label (3-point tool) */
.angle-measure-label {
  display: flex; align-items: center; gap: 5px;
  background: rgba(13,17,23,.95); border: 1px solid #7CFC00; color: #eaffd6;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 3px 8px; border-radius: 7px; white-space: nowrap; box-shadow: 0 2px 10px rgba(0,0,0,.55);
}
.angle-measure-label .aml-x { background: none; border: none; color: #8b98a5; cursor: pointer; font-size: 13px; line-height: 1; padding: 0 1px; }
.angle-measure-label .aml-x:hover { color: #ff6b6b; }

/* Center — cyan circle */
.snap-hint-center {
  border: 2.5px solid #18ffff; background: rgba(24,255,255,.15);
  box-shadow: 0 0 8px rgba(24,255,255,.8); border-radius: 50%;
}
/* Quadrant — purple diamond */
.snap-hint-quadrant {
  border: 2px solid #c77dff; background: rgba(199,125,255,.15);
  box-shadow: 0 0 8px rgba(199,125,255,.8); border-radius: 2px; transform: rotate(45deg);
}
/* Tangent — amber circle */
.snap-hint-tangent {
  border: 2.5px solid #ffab40; background: rgba(255,171,64,.18);
  box-shadow: 0 0 8px rgba(255,171,64,.8); border-radius: 50%;
}

/* ─── Measure tooltip ─── */
.measure-tooltip {
  background: rgba(13,17,23,.92);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 3px 9px;
  font-size: 11px;
  font-family: 'Roboto Mono', monospace;
  color: #ffd700;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.measure-tooltip.measure-tooltip-static {
  background: rgba(13,17,23,.72);
  color: var(--text-muted);
}

/* ─── Coordinate marker popup ─── */
.point-marker-popup {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 8px 28px 8px 10px;
  font-size: 11px;
  font-family: 'Roboto Mono', monospace;
  box-shadow: var(--shadow);
  min-width: 175px;
  pointer-events: auto;
  line-height: 1.75;
  cursor: move;
  user-select: none;
}
.point-marker-popup.dragging {
  box-shadow: 0 8px 28px rgba(0,229,255,.4);
  border-color: #00e5ff;
  opacity: .97;
}
.pt-coord-ll { color: var(--accent); }
.pt-coord-utm {
  color: var(--success);
  border-top: 1px solid var(--border);
  padding-top: 4px;
  margin-top: 4px;
}
.pt-coord-sta {
  color: var(--orange);
  border-top: 1px solid var(--border);
  padding-top: 4px;
  margin-top: 4px;
  font-size: 12px;
}
.pt-close {
  position: absolute;
  top: 4px;
  right: 6px;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  transition: color .15s;
}
.pt-close:hover { color: var(--danger); }

/* ─── Click coordinate pulsing marker ─── */
.click-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
  position: relative;
}
.click-pulse::before,
.click-pulse::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: click-pulse-ring 1.6s ease-out infinite;
}
.click-pulse::before {
  width: 22px; height: 22px;
  margin: -11px 0 0 -11px;
}
.click-pulse::after {
  width: 36px; height: 36px;
  margin: -18px 0 0 -18px;
  animation-delay: .4s;
}
@keyframes click-pulse-ring {
  0%   { opacity: .8; transform: scale(.4); }
  100% { opacity: 0;  transform: scale(1);  }
}

/* ─── OL overrides ─── */
.ol-zoom { display: none; }
.ol-attribution { font-size: 9px; }
.ol-attribution.ol-uncollapsible { bottom: 20px; }

/* ─── Scale bar ─── */
.ol-scale-line {
  background: rgba(13,17,23,.85);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 4px 8px 6px;
  bottom: 30px;
  left: 10px;
  backdrop-filter: blur(4px);
  box-shadow: var(--shadow);
}
.ol-scale-line-inner {
  color: var(--text-muted);
  font-family: 'Roboto Mono', monospace;
  font-size: 10px;
  border-color: var(--text-muted);
  border-width: 1.5px;
  text-align: center;
}

/* ─── Scrollbar global ─── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 4px; }

/* ═══ VIEWS BAR ═══ */
.views-bar {
  display: flex;
  flex-shrink: 0;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}

.view-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 4px 7px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  transition: color .15s, border-color .15s, background .15s;
  font-family: inherit;
  line-height: 1;
}
.view-tab:hover { color: var(--text-muted); background: var(--bg-hover); }
.view-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: rgba(45,140,240,.07);
}

.vt-badge {
  background: var(--orange);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  border-radius: 8px;
  padding: 1px 5px;
  min-width: 16px;
  text-align: center;
  line-height: 14px;
}

/* ═══ VIEW PANELS ═══ */
.view-panel {
  display: none;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}
.view-panel.active { display: flex; }

/* The Data panel's content (aerial images, the file queue, imported files) can
   outgrow the sidebar. It must yield space and scroll itself — otherwise it
   crushes the Layers panel below it and everything past it is unreachable. */
#vp-files { flex: 0 1 auto; min-height: 0; overflow-y: auto; }

/* Layers panel grows to fill remaining sidebar space */
.vp-flex {
  flex: 1 1 0;
  min-height: 80px;
}

/* Points panel: fixed max-height with internal scroll */
.vp-points-panel {
  flex-shrink: 0;
  max-height: 320px;
  border-top: 1px solid var(--border);
}

/* ═══ WAYPOINTS TABLE PANEL ═══ */
.wp-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px 8px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-card);
}

.wp-export-btn {
  font-size: 10px !important;
  padding: 2px 8px !important;
  letter-spacing: 0;
}

.wp-table-wrap {
  flex: 1;
  overflow: auto;
}

.wp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.wp-table th {
  background: var(--bg-base);
  color: var(--text-dim);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: left;
}

.wp-table td {
  padding: 5px 8px;
  border-bottom: 1px solid rgba(48,54,61,.35);
  vertical-align: middle;
  white-space: nowrap;
  font-family: 'Roboto Mono', monospace;
  font-size: 10.5px;
  color: var(--text-muted);
}

.wp-table tbody tr:hover td { background: var(--bg-hover); }

.wp-num-cell { width: 32px; text-align: center; }

.wp-num-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
}

.wp-name-cell {
  min-width: 70px;
  color: var(--text-primary) !important;
  cursor: text;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  outline: none;
}
.wp-name-cell:focus {
  box-shadow: inset 0 0 0 1px var(--accent);
  border-radius: 2px;
}

.wp-lat-cell, .wp-lon-cell { color: var(--accent) !important; }
.wp-e-cell, .wp-n-cell     { color: var(--success) !important; }
.wp-sta-cell               { color: var(--orange) !important; font-weight: 600; }

.wp-act-cell { width: 56px; white-space: nowrap; }
.wp-zoom-btn, .wp-del-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 10px;
  padding: 1px 5px;
  transition: background .1s, color .1s, border-color .1s;
  line-height: 1.4;
}
.wp-zoom-btn:hover { background: var(--bg-hover); color: var(--accent); border-color: var(--accent); }
.wp-del-btn:hover  { background: rgba(248,81,73,.12); color: var(--danger); border-color: var(--danger); }

.wp-empty {
  display: none;
  color: var(--text-dim);
  font-size: 11px;
  text-align: center;
  padding: 24px 14px;
  line-height: 1.8;
}
.wp-empty.show { display: block; }

.wp-flash-row td {
  animation: wp-tr-flash .45s ease 2;
}
@keyframes wp-tr-flash {
  0%   { background: rgba(243,156,18,.25); }
  100% { background: transparent; }
}

/* ─── Waypoints panel (old styles kept for compat) ─── */
.wp-section {
  flex-shrink: 0;
}

/* ═══ LAYER ENHANCEMENTS ═══ */

/* L6.6-D: .layer-cb (the separate selection checkbox) left the row; the one
   checkbox on a row is .layer-vis-cb, styled beside .layer-item above. */

/* Empty row dim */
.layer-empty-row { opacity: .55; }

/* Empty state message */
.layer-empty-msg {
  color: var(--text-dim);
  font-size: 11px;
  padding: 16px 4px;
  text-align: center;
}

/* Delete button per layer */
.layer-del-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 10px;
  padding: 2px 5px;
  line-height: 1.4;
  flex-shrink: 0;
  transition: background .12s, color .12s, border-color .12s;
}
.layer-del-btn:hover {
  background: rgba(248,81,73,.14);
  color: var(--danger);
  border-color: var(--danger);
}

/* Export button + dropdown */
.layer-export-wrap { position: relative; flex-shrink: 0; }

.layer-exp-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 11px;
  padding: 2px 5px;
  line-height: 1.4;
  transition: background .12s, color .12s, border-color .12s;
}
.layer-exp-btn:hover {
  background: var(--bg-hover);
  color: var(--accent);
  border-color: var(--border-light);
}

.layer-exp-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 2px);
  z-index: 300;
  background: var(--bg-panel);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  min-width: 90px;
  overflow: hidden;
}

.exp-opt {
  display: block;
  width: 100%;
  padding: 6px 12px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background .1s, color .1s;
}
.exp-opt:hover { background: var(--bg-hover); color: var(--text-primary); }

/* Bulk delete micro button */
.micro-btn-danger {
  background: rgba(248,81,73,.14) !important;
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}
.micro-btn-danger:hover {
  background: rgba(248,81,73,.28) !important;
}

.micro-btn-accent {
  background: rgba(52,152,219,.16) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.micro-btn-accent:hover {
  background: rgba(52,152,219,.30) !important;
}

/* Empty layers toggle active state */
#btnToggleEmpty.active {
  background: rgba(243,156,18,.15);
  border-color: var(--orange);
  color: var(--orange);
}

/* Color filter row */
.color-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 0 8px 6px;
  min-height: 0;
}

.clr-swatch {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color .12s, transform .12s;
  flex-shrink: 0;
  padding: 0;
}
.clr-swatch:hover { border-color: rgba(255,255,255,.7); transform: scale(1.25); }
.clr-swatch.active {
  border-color: #fff;
  transform: scale(1.3);
  box-shadow: 0 0 0 1px var(--border-light);
}

.clr-clear {
  background: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-dim);
  font-size: 9px;
  padding: 1px 5px;
  line-height: 1.4;
  cursor: pointer;
  transition: color .12s, border-color .12s;
}
.clr-clear:hover { color: var(--danger); border-color: var(--danger); }

/* ═══ GROUPS & TREE ═══ */

/* L6.6-D: the ⠿ .drag-handle is gone from both rows — the row and the group
   header are the drag sources (cursor: grab on the header; rows keep pointer). */

/* Dragging state */
.layer-item.layer-dragging,
.group-header.layer-dragging { opacity: .35; }

/* Drop indicator */
.layer-item.drag-over-top { border-top: 2px solid var(--accent); }
.group-header.drag-over-top { background: rgba(45,140,240,.12); outline: 1px solid var(--accent); }

/* Group block — no overflow:hidden so layer-tree inside can expand freely */
.group-block {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
}

/* Group header row */
.group-header {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px 3px 4px;   /* L6.6-D: same rhythm as .layer-item (28px rows) */
  min-height: 28px;
  background: rgba(45,140,240,.06);
  cursor: grab;
  user-select: none;
}
.group-header:hover { background: rgba(45,140,240,.12); }
.group-header:active { cursor: grabbing; }

.group-collapse-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: color .12s;
}
.group-collapse-btn:hover { color: var(--text-primary); }
.group-collapse-btn.collapsed svg { transform: rotate(-90deg); }
.group-collapse-btn svg { transition: transform .2s; }

.group-color-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
  cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.2);
  transition: transform .12s;
}
.group-color-swatch:hover { transform: scale(1.3); }

.group-name {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  outline: none;
  cursor: text;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 40px;
}
.group-name:focus { box-shadow: inset 0 0 0 1px var(--accent); border-radius: 2px; padding: 0 2px; }

.group-count {
  font-size: 10px;
  color: var(--text-dim);
  font-family: 'Roboto Mono', monospace;
  flex-shrink: 0;
  min-width: 14px;
  text-align: right;
}

/* L6.5-B: the group's opacity slider moved off the header row and into the
   group ⋯ menu, so it is styled where it now lives (.lmp-row) instead of as a
   header control. The .group-apply-btn, .group-zoom-btn and .group-del-btn
   rules went with their buttons — all three commands are menu items now. */
.lmp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
}
.lmp-opacity {
  -webkit-appearance: none;
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--border-light);
  outline: none;
  cursor: pointer;
  accent-color: var(--accent);
}
.lmp-opacity::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}
.lmp-opval {
  font-size: 10px;
  color: var(--text-muted);
  font-family: 'Roboto Mono', monospace;
  min-width: 30px;
  text-align: right;
}
.lmp-meta { font-size: 10px; color: var(--text-dim); font-weight: 400; }

/* L6.6-D: the group's eye (.group-vis-btn) became the group checkbox
   .group-vis-cb, styled with .layer-vis-cb above; ⊟ is the native indeterminate. */

/* Layer exit-from-group button */
.layer-exit-grp {
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--warning);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 5px;
  flex-shrink: 0;
  transition: background .12s, border-color .12s;
}
.layer-exit-grp:hover {
  background: rgba(210,153,34,.15);
  border-color: var(--warning);
}

/* Group children area */
.group-children {
  background: rgba(255,255,255,.02);
  border-top: 1px solid var(--border);
  padding: 3px 3px 3px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.group-children.coll { display: none; }

/* Layer indented inside group */
.layer-item-grouped {
  border-left: 2px solid var(--border-light);
}

/* Drop zone at bottom of group */
.group-drop-target {
  border: 1px dashed var(--border-light);
  border-radius: 3px;
  padding: 3px 8px;
  text-align: center;
  font-size: 9px;
  color: var(--text-dim);
  cursor: default;
  transition: background .12s, border-color .12s, color .12s;
}
.group-drop-target.drag-over-group {
  background: rgba(45,140,240,.1);
  border-color: var(--accent);
  color: var(--accent);
}

/* L6.6-D: the .vmode-bar (All / Groups / Layers / Files / Depts chips) left the
   Layers surface — the tree is the default view; the five renderers are the
   "View as" select in the filter popover (design §5.2). */
.view-as-sel { flex: 1; min-width: 0; }

/* Project save/load bar */
.project-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  flex-shrink: 0;
}
.proj-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  background: rgba(46,204,113,.14);
  border: 1px solid #2ecc71;
  border-radius: 4px;
  color: #2ecc71;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.proj-btn:hover { background: rgba(46,204,113,.28); }
.proj-btn-danger {
  background: rgba(248,81,73,.12);
  border-color: var(--danger);
  color: var(--danger);
}
.proj-btn-danger:hover { background: rgba(248,81,73,.26); }
.save-stamp {
  margin-right: auto;
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
}
.project-bar-top {
  border-bottom: 1px solid var(--border);
  background: var(--bg-base);
}

/* Feature-count filter row */
.count-filter-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px 6px;
  flex-shrink: 0;
}
.count-filter-row .cf-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.count-filter-row .cf-op {
  padding: 3px 4px;
  font-size: 11px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-primary);
  cursor: pointer;
}
.count-filter-row .cf-num {
  width: 50px;
  padding: 3px 6px;
  font-size: 11px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-primary);
}
.count-filter-row .cf-num:focus,
.count-filter-row .cf-op:focus { outline: none; border-color: var(--accent); }
.count-filter-row .cf-clear {
  width: 22px; height: 22px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  transition: background .15s, color .15s, border-color .15s;
}
.count-filter-row .cf-clear:hover {
  background: rgba(248,81,73,.18);
  border-color: var(--danger);
  color: var(--danger);
}
.count-filter-row.cf-active .cf-op,
.count-filter-row.cf-active .cf-num {
  border-color: var(--accent);
  background: rgba(52,152,219,.10);
}

/* ─── Move-to-group button ─── */
.layer-grp-wrap { position: relative; flex-shrink: 0; }

.layer-grp-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 12px;
  padding: 1px 5px;
  line-height: 1.4;
  transition: background .12s, color .12s, border-color .12s;
}
.layer-grp-btn:hover {
  background: var(--bg-hover);
  color: var(--success);
  border-color: var(--border-light);
}

.layer-grp-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 2px);
  z-index: 310;
  background: var(--bg-panel);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  min-width: 140px;
  overflow: hidden;
}

.grp-move-opt {
  display: block;
  width: 100%;
  padding: 6px 12px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background .1s, color .1s;
  white-space: nowrap;
}
.grp-move-opt:hover { background: var(--bg-hover); color: var(--text-primary); }
.grp-move-opt:first-child { border-bottom: 1px solid var(--border); color: var(--warning); }

.grp-no-groups {
  padding: 6px 12px;
  font-size: 10px;
  color: var(--text-dim);
  font-style: italic;
}

/* Group membership badge on the layer name */
.layer-grp-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  font-size: 9px;
  font-weight: 700;
  background: rgba(243,156,18,.18);
  border: 1px solid #f39c12;
  border-radius: 8px;
  color: #f39c12;
  vertical-align: middle;
}
.layer-grp-btn.in-group { color: #f39c12; }

/* Multi-select group menu (checkboxes) */
.grp-menu-title {
  padding: 6px 10px 4px;
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.grp-chk-opt {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px;
  font-size: 11.5px; color: var(--text-primary);
  cursor: pointer;
}
.grp-chk-opt:hover { background: var(--bg-hover); }
.grp-chk-opt input { cursor: pointer; }
.grp-chk-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(255,255,255,.3); }

/* Active filter highlight (reuse for group filter row) */
.count-filter-row.cf-active .cf-op { border-color: var(--accent); background: rgba(52,152,219,.10); }

/* Bulk "add selected to group" popup menu */
.bulk-grp-menu {
  position: fixed;
  z-index: 4000;
  width: 230px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: 0 10px 36px rgba(0,0,0,.6);
  padding: 4px;
}
.bgm-title {
  padding: 7px 10px; font-size: 11px; font-weight: 700;
  color: var(--accent); border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.bgm-sec {
  padding: 6px 10px 3px; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
}
.bgm-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 10px;
  background: transparent; border: none; border-radius: var(--radius-sm);
  color: var(--text-primary); cursor: pointer; font-size: 12px; text-align: left;
}
.bgm-item:hover { background: var(--bg-hover); }
.bgm-new { color: #2ecc71; font-weight: 600; }
.bgm-rm:hover { background: rgba(248,81,73,.16); color: var(--danger); }
.bgm-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(255,255,255,.3); }
.bgm-empty { padding: 10px; font-size: 11px; color: var(--text-muted); text-align: center; }

.wp-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--orange);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  min-width: 18px;
  padding: 1px 5px;
  line-height: 1;
}

.wp-export-btn {
  font-size: 10px !important;
  padding: 2px 7px !important;
  background: var(--bg-card) !important;
  border-color: var(--border-light) !important;
  color: var(--text-muted) !important;
  letter-spacing: 0;
}
.wp-export-btn:hover {
  color: var(--text-primary) !important;
  border-color: var(--accent) !important;
}

.wp-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 260px;
  overflow-y: auto;
  padding: 2px 0 4px;
}

.wp-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: background .12s, border-color .12s;
}
.wp-item:hover { background: var(--bg-hover); }
.wp-item.wp-flash {
  animation: wp-flash-anim .35s ease 2;
}
@keyframes wp-flash-anim {
  0%   { border-color: var(--orange); background: rgba(243,156,18,.15); }
  100% { border-color: var(--border); background: var(--bg-card); }
}

.wp-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(243,156,18,.4);
}

.wp-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.wp-latlon {
  font-size: 11px;
  font-family: 'Roboto Mono', monospace;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wp-utm {
  font-size: 10px;
  font-family: 'Roboto Mono', monospace;
  color: var(--success);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wp-actions {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}

.wp-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  padding: 2px 6px;
  line-height: 1.4;
  transition: background .12s, color .12s, border-color .12s;
}
.wp-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.wp-del:hover { border-color: var(--danger); color: var(--danger); }

/* ─────────────────────────────────────────────
   PROJECT DOCUMENTS PANEL
   ───────────────────────────────────────────── */
.vp-docs-panel {
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.doc-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px 6px;
  flex-shrink: 0;
}
.doc-upload-btn { gap: 5px; }

/* ── Filters ── */
.doc-filters {
  padding: 0 10px 8px;
  display: flex; flex-direction: column; gap: 5px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.doc-search {
  width: 100%;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary);
  font-size: 12px; padding: 5px 9px; outline: none;
}
.doc-search:focus { border-color: var(--accent); }
.doc-filter-row { display: flex; gap: 5px; }
.doc-filter-sel {
  flex: 1; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-muted);
  font-size: 11px; padding: 4px 6px; outline: none; cursor: pointer;
}
.doc-filter-sel:focus { border-color: var(--accent); }
.doc-clear-btn {
  background: none; border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-dim);
  font-size: 11px; padding: 4px 8px; cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s;
}
.doc-clear-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ── File list ── */
.doc-list {
  flex: 1; overflow-y: auto;
  padding: 8px 8px;
  display: flex; flex-direction: column; gap: 5px;
}
.doc-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 40px 0;
  color: var(--text-dim); font-size: 12px;
}

/* ── File card ── */
.doc-card {
  display: flex; align-items: flex-start; gap: 9px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  position: relative;
}
.doc-card:hover { border-color: var(--accent); background: var(--bg-hover); }
.doc-card-icon { flex-shrink: 0; width: 30px; text-align: center; margin-top: 2px; }
.doc-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.doc-card-name {
  font-size: 12px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doc-card-meta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.doc-badge {
  font-size: 10px; font-weight: 700; border-radius: 4px;
  padding: 1px 6px; border: 1px solid transparent; white-space: nowrap;
}
.doc-num {
  font-size: 10px; color: var(--text-muted);
  font-family: 'Roboto Mono', monospace; background: var(--bg-base);
  border-radius: 3px; padding: 1px 5px; border: 1px solid var(--border);
}
.doc-rev { font-size: 10px; color: var(--text-dim); }
.doc-type-line { font-size: 11px; color: var(--text-muted); }
.doc-desc { font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-card-footer { display: flex; justify-content: space-between; gap: 8px; }
.doc-footer-info { font-size: 10px; color: var(--text-dim); }

.doc-card-actions {
  display: flex; flex-direction: column; gap: 4px;
  opacity: 0; transition: opacity .15s; flex-shrink: 0;
}
.doc-card:hover .doc-card-actions { opacity: 1; }
.doc-action-btn {
  width: 24px; height: 24px; background: var(--bg-panel);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-muted); cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  transition: background .12s, color .12s, border-color .12s;
}
.doc-action-btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--accent); }
.doc-card-delete:hover { border-color: var(--danger) !important; color: var(--danger) !important; }

/* ── Upload Modal ── */
.doc-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.65);
  display: flex; align-items: center; justify-content: center;
  z-index: 8000; backdrop-filter: blur(3px);
}
.doc-modal-box {
  background: var(--bg-panel);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  width: 560px; max-height: 88vh;
  display: flex; flex-direction: column;
  box-shadow: 0 16px 48px rgba(0,0,0,.6);
  overflow: hidden;
}
.doc-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.doc-modal-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.doc-modal-close { background: none; border: none; color: var(--text-dim); font-size: 18px; cursor: pointer; }
.doc-modal-close:hover { color: var(--text-primary); }
.doc-modal-body { padding: 14px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.doc-modal-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.doc-upload-dropzone {
  border: 2px dashed var(--border-light);
  border-radius: var(--radius-sm);
  padding: 20px; text-align: center;
  color: var(--text-muted); font-size: 12px;
  cursor: pointer; transition: border-color .15s, background .15s;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.doc-upload-dropzone:hover, .doc-upload-dropzone.dragover {
  border-color: var(--accent); background: rgba(45,140,240,.05);
}
.doc-browse-lbl { color: var(--accent); cursor: pointer; font-weight: 600; }
.doc-dropzone-hint { font-size: 10px; color: var(--text-dim); }
.doc-selected-file {
  font-size: 11px; color: var(--success); font-weight: 600;
  background: rgba(63,185,80,.1); border-radius: 4px; padding: 3px 8px;
}
.doc-form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.doc-form-full { grid-column: 1 / -1; }
.doc-form-field { display: flex; flex-direction: column; gap: 3px; }
.doc-form-label { font-size: 10px; font-weight: 600; color: var(--text-muted); }
.doc-form-select, .doc-form-input {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary);
  font-size: 12px; padding: 5px 8px; outline: none; width: 100%;
  font-family: inherit;
}
.doc-form-select:focus, .doc-form-input:focus { border-color: var(--accent); }
.doc-upload-progress {
  height: 3px; background: var(--border); flex-shrink: 0;
}
.doc-upload-bar {
  height: 100%; background: var(--accent);
  transition: width .3s ease; width: 0%;
}

/* ── MDR ── */
.mdr-import-btn { gap: 5px; }
.mdr-status-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  background: rgba(63,185,80,.08);
  border-bottom: 1px solid rgba(63,185,80,.2);
  font-size: 11px; color: var(--success);
  flex-shrink: 0;
}
.mdr-status-bar b { color: var(--text-primary); }
.mdr-clear-btn {
  margin-left: auto; background: none; border: none;
  color: var(--text-dim); font-size: 14px; cursor: pointer;
  padding: 0 2px; line-height: 1;
}
.mdr-clear-btn:hover { color: var(--danger); }
.mdr-match-banner {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  background: rgba(63,185,80,.1);
  border: 1px solid rgba(63,185,80,.3);
  color: var(--success);
}
.mdr-match-banner b { color: var(--text-primary); }
.mdr-match-banner.mdr-no-match {
  background: rgba(248,81,73,.08);
  border-color: rgba(248,81,73,.25);
  color: var(--text-muted);
}
/* Highlight auto-filled fields */
.mdr-autofilled {
  border-color: rgba(63,185,80,.6) !important;
  background: rgba(63,185,80,.06) !important;
}

/* ─────────────────────────────────────────────
   COLLABORATION
   ───────────────────────────────────────────── */

/* Header badge & status */
.collab-hdr-badge {
  background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 700;
  border-radius: 10px; padding: 1px 5px; min-width: 18px;
  text-align: center; line-height: 1.6;
}
.chat-unread-badge {
  position: absolute; top: 2px; right: 2px;
  background: var(--danger); color: #fff;
  font-size: 9px; font-weight: 700; border-radius: 10px;
  padding: 1px 4px; min-width: 16px; text-align: center;
  display: none; align-items: center; justify-content: center;
}
.collab-status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}
.collab-status-dot[data-s="online"]  { background: var(--success); box-shadow: 0 0 4px var(--success); }
.collab-status-dot[data-s="offline"] { background: var(--text-dim); }

/* ── Join modal ── */
.collab-join-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000;
  backdrop-filter: blur(4px);
}
.collab-join-box {
  background: var(--bg-panel);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 28px 32px;
  width: 360px;
  box-shadow: 0 16px 48px rgba(0,0,0,.6);
  display: flex; flex-direction: column; gap: 14px;
}
.collab-join-logo { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 13px; font-weight: 600; }
.collab-join-title { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.collab-join-sub { font-size: 12px; color: var(--text-muted); margin-top: -6px; }
.collab-join-input {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary);
  font-size: 14px; padding: 9px 12px; outline: none; width: 100%;
}
.collab-join-input:focus { border-color: var(--accent); }
.collab-join-colors { display: flex; gap: 8px; flex-wrap: wrap; }
.collab-color-swatch {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; transition: border-color .12s, transform .12s;
}
.collab-color-swatch.selected,
.collab-color-swatch:hover { border-color: #fff; transform: scale(1.15); }
.collab-join-btn { margin-top: 4px; }

/* ── Collab panel ── */
.collab-panel {
  position: fixed;
  bottom: 36px; right: 16px;
  width: 300px;
  background: var(--bg-panel);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  z-index: 300;
  display: flex; flex-direction: column;
  max-height: 480px;
  animation: slideIn .2s ease;
  overflow: hidden;
}
.collab-panel.hidden  { display: none; }
.collab-panel.minimised .collab-users-strip,
.collab-panel.minimised .chat-messages,
.collab-panel.minimised .chat-input-row { display: none !important; }

.collab-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  cursor: move; user-select: none; flex-shrink: 0;
}
.collab-panel-title { font-size: 12px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 6px; }
.collab-panel-tools { display: flex; gap: 4px; align-items: center; }
.collab-tool-btn {
  width: 26px; height: 26px;
  background: none; border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s, border-color .12s;
}
.collab-tool-btn:hover  { background: var(--bg-hover); color: var(--text-primary); }
.collab-tool-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.collab-users-strip {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.collab-user { display: flex; align-items: center; gap: 4px; }
.collab-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.collab-uname { font-size: 11px; color: var(--text-muted); max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Chat ── */
.chat-messages {
  flex: 1; overflow-y: auto; padding: 8px 10px;
  display: flex; flex-direction: column; gap: 6px;
  min-height: 0;
}
.chat-sys {
  font-size: 10px; color: var(--text-dim); text-align: center;
  background: var(--bg-card); border-radius: 10px; padding: 2px 8px; align-self: center;
}
.chat-msg { display: flex; flex-direction: column; gap: 2px; }
.chat-meta { display: flex; align-items: center; gap: 5px; }
.chat-dot  { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.chat-name { font-size: 10px; font-weight: 700; color: var(--text-muted); }
.chat-time { font-size: 9px; color: var(--text-dim); margin-left: auto; }
.chat-bubble {
  font-size: 12px; color: var(--text-primary);
  background: var(--bg-card); border-radius: 0 8px 8px 8px;
  padding: 5px 9px; max-width: 240px; word-break: break-word; line-height: 1.4;
  border: 1px solid var(--border);
}
.chat-bubble.mine {
  background: rgba(45,140,240,.18); border-color: rgba(45,140,240,.3);
  border-radius: 8px 0 8px 8px;
}
.chat-msg.mine { align-items: flex-end; }
.chat-msg.mine .chat-meta { flex-direction: row-reverse; }

.chat-input-row {
  display: flex; gap: 5px; padding: 7px 8px; align-items: center;
  border-top: 1px solid var(--border); flex-shrink: 0;
}
.chat-loc-btn {
  width: 28px; height: 28px; flex-shrink: 0;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s, border-color .12s;
}
.chat-loc-btn:hover  { background: var(--bg-hover); color: var(--text-primary); border-color: var(--accent); }
.chat-loc-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Location card in chat */
.chat-loc-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 7px 9px;
  display: flex; flex-direction: column; gap: 6px;
  max-width: 260px;
}
.chat-loc-top { display: flex; gap: 8px; align-items: flex-start; }
.chat-loc-icon {
  font-size: 16px; flex-shrink: 0; margin-top: 1px;
  width: 22px; text-align: center;
}
.chat-loc-coords { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chat-loc-main {
  font-size: 11px; font-weight: 700; color: var(--text-primary);
  font-family: 'Roboto Mono', monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-loc-sub  { font-size: 10px; color: var(--text-muted); font-family: 'Roboto Mono', monospace; }
.chat-loc-layer { font-size: 10px; color: var(--accent); font-weight: 600; }
.chat-loc-goto {
  align-self: flex-end;
  background: var(--accent); border: none; border-radius: var(--radius-sm);
  color: #fff; font-size: 11px; font-weight: 700; font-family: inherit;
  padding: 3px 10px; cursor: pointer;
  transition: background .12s;
}
.chat-loc-goto:hover { background: var(--accent-hover); }
.chat-input {
  flex: 1; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary);
  font-size: 12px; padding: 5px 8px; outline: none;
}
.chat-input:focus { border-color: var(--accent); }
.chat-send-btn {
  width: 30px; height: 30px; background: var(--accent); border: none;
  border-radius: var(--radius-sm); color: #fff; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.chat-send-btn:hover { background: var(--accent-hover); }

/* ── Jitsi box ── */
.jitsi-box {
  position: fixed;
  bottom: 36px; right: 328px;
  width: 420px; height: 340px;
  background: var(--bg-panel);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  z-index: 299;
  flex-direction: column;
  overflow: hidden;
  animation: slideIn .2s ease;
  resize: both;
  min-width: 300px; min-height: 200px;
}
.jitsi-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  cursor: move; user-select: none; flex-shrink: 0;
}
.jitsi-title { font-size: 11px; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.jitsi-close-btn { background: none; border: none; color: var(--text-dim); font-size: 16px; cursor: pointer; padding: 0 2px; }
.jitsi-close-btn:hover { color: var(--text-primary); }

/* ── Remote cursors / pointers ── */
.remote-cursor { pointer-events: none; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.cursor-label {
  font-size: 10px; font-weight: 700; color: #fff;
  border-radius: 4px; padding: 1px 5px; white-space: nowrap; line-height: 1.5;
}
.remote-pointer { pointer-events: none; position: relative; display: flex; align-items: center; justify-content: center; }
.pointer-ring {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--pc, #f39c12);
  animation: pointer-pulse 1s ease-in-out infinite;
  position: absolute;
}
.pointer-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pc, #f39c12);
}
.pointer-label {
  position: absolute; top: 18px; left: 18px;
  font-size: 10px; font-weight: 700; color: #fff;
  border-radius: 4px; padding: 1px 5px; white-space: nowrap;
}
@keyframes pointer-pulse {
  0%,100% { transform: scale(1); opacity: .8; }
  50%      { transform: scale(1.5); opacity: .3; }
}

/* ─── Draw panel ─── */
.draw-panel {
  position: fixed;
  right: 56px;
  top: 80px;
  background: var(--bg-panel);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 110;
  width: 268px;
  overflow: hidden;
  animation: slideIn .15s ease;
}
.draw-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  cursor: move;
  user-select: none;
}
.draw-panel-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); }
.draw-close-btn { background:none; border:none; color:var(--text-dim); font-size:15px; cursor:pointer; padding:0 2px; line-height:1; transition:color .12s; }
.draw-close-btn:hover { color:var(--text-primary); }
.draw-panel-body { padding:10px 12px; display:flex; flex-direction:column; gap:7px; max-height:calc(100vh - 150px); overflow-y:auto; }
.draw-status { font-size:11px; color:var(--accent); text-align:center; background:rgba(45,140,240,.08); border-radius:var(--radius-sm); padding:4px 8px; }
.draw-coord-display { font-size:10px; color:var(--text-muted); font-family:'Roboto Mono',monospace; background:var(--bg-card); border-radius:var(--radius-sm); padding:4px 8px; min-height:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.draw-divider { height:1px; background:var(--border); }
.draw-section-title { font-size:10px; color:var(--text-dim); font-weight:700; text-transform:uppercase; letter-spacing:.8px; }
/* Collapsible draw-panel sections + the pasted-points box (token-only) */
details.draw-sec > summary.draw-section-title { cursor:pointer; list-style:none; display:flex; align-items:center; gap:5px; user-select:none; }
details.draw-sec > summary.draw-section-title::-webkit-details-marker { display:none; }
details.draw-sec > summary.draw-section-title::before { content:'▸'; font-size:9px; line-height:1; transition:transform .15s; }
details.draw-sec[open] > summary.draw-section-title::before { transform:rotate(90deg); }
[dir="rtl"] details.draw-sec > summary.draw-section-title::before { content:'◂'; }
[dir="rtl"] details.draw-sec[open] > summary.draw-section-title::before { transform:rotate(-90deg); }
.draw-sec-body { display:flex; flex-direction:column; gap:7px; margin-top:6px; }
.draw-paste-ta { min-height:92px; resize:vertical; font-family:'Roboto Mono',monospace; font-size:11px; direction:ltr; text-align:left; }
.draw-paste-info { font-size:10px; color:var(--text-dim); min-height:12px; }
.draw-paste-info.ok { color:var(--success, #1e9e5a); }
.draw-paste-info.err { color:var(--danger, #c0392b); }
/* C15: quick-attribute form in the draw panel (token-only — theme-light safe) */
.dtpl-head { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.dtpl-row { display:flex; align-items:center; gap:6px; margin:3px 0; }
.dtpl-row label { flex:0 0 84px; min-width:0; font-size:11px; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dtpl-row .draw-input { flex:1; min-width:0; }
.dtpl-addrow { display:flex; gap:6px; margin-top:4px; }
.dtpl-addrow .draw-input { flex:1; min-width:0; }
.dtpl-mini { border:1px solid var(--border); background:var(--bg-hover); color:var(--text-primary); border-radius:var(--radius-sm); font-size:11px; padding:3px 8px; cursor:pointer; white-space:nowrap; }
.dtpl-mini:hover { border-color:var(--accent); }
.draw-row { display:flex; gap:6px; }
.draw-field-inline { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.draw-label { font-size:10px; color:var(--text-muted); font-weight:600; }
.draw-input {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary);
  font-size: 12px; font-family: 'Roboto Mono', monospace;
  padding: 4px 7px; outline: none; width: 100%;
}
.draw-input:focus { border-color: var(--accent); }
.draw-action-btn {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-muted);
  font-size: 11px; font-family: inherit; padding: 5px 10px;
  cursor: pointer; width: 100%;
  transition: background .12s, color .12s, border-color .12s;
}
.draw-action-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.draw-constraint-btns { display:flex; gap:4px; align-items:center; }
.draw-constraint-btn {
  padding: 4px 9px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-muted);
  font-size: 11px; font-family: inherit; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.draw-constraint-btn:hover  { background: var(--bg-hover); color: var(--text-primary); }
.draw-constraint-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.draw-constraint-angle { flex: 1; min-width: 0; }
/* Straight / Arc / Tangent arc — same look as the constraint row, own class so
   the constraint handler and its reset never touch these. */
.draw-seg-btn {
  flex: 1; padding: 4px 4px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-muted);
  font-size: 10px; font-family: inherit; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.draw-seg-btn:hover  { background: var(--bg-hover); color: var(--text-primary); }
.draw-seg-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.draw-seg-hint { font-size: 10px; color: var(--text-dim); margin-top: 4px; }
.draw-radius-live { font-size:11px; color:var(--text-muted); font-family:'Roboto Mono',monospace; white-space:nowrap; }
.draw-footer-btns { display:flex; gap:6px; justify-content:flex-end; }

/* ─── Offset panel ─── */
.offset-panel {
  position: fixed;
  right: 56px;
  top: 200px;
  background: var(--bg-panel);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 110;
  min-width: 230px;
  overflow: hidden;
  animation: slideIn .15s ease;
}
.offset-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  cursor: move;
  user-select: none;
}
.offset-panel-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}
.offset-close-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 15px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  transition: color .12s;
}
.offset-close-btn:hover { color: var(--text-primary); }
.offset-panel-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.offset-hint {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  padding: 6px 0;
}
.offset-field { display: flex; flex-direction: column; gap: 4px; }
.offset-label { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.offset-input {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 12px;
  font-family: 'Roboto Mono', monospace;
  padding: 5px 8px;
  outline: none;
  width: 100%;
}
.offset-input:focus { border-color: var(--accent); }
.offset-side-btns { display: flex; gap: 4px; }
.offset-side-btn {
  flex: 1;
  padding: 5px 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.offset-side-btn:hover  { background: var(--bg-hover); color: var(--text-primary); }
.offset-side-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.offset-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  padding-top: 2px;
}

/* ════════════════════════════════════════
   MOBILE RESPONSIVE DESIGN
   ════════════════════════════════════════ */

@media (max-width: 1024px) {
  :root {
    --sidebar-w: 280px;
  }
}

@media (max-width: 768px) {
  :root {
    --sidebar-w: 300px;
    --header-h: 50px;
  }

  /* Header */
  .header {
    height: var(--header-h);
    padding: 0 8px;
    gap: 4px;
    overflow-x: auto;
  }

  header {
    height: var(--header-h);
  }

  /* Keep labels but smaller */
  header .btn {
    padding: 6px 10px;
    font-size: 12px;
    min-height: 40px;
  }

  header svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* Sidebar normal width */
  .sidebar {
    width: var(--sidebar-w);
  }

  .views-bar {
    flex-direction: row;
    gap: 4px;
  }

  .view-tab {
    padding: 10px 8px;
    font-size: 12px;
    flex: 1;
  }

  .view-tab svg {
    width: 16px;
    height: 16px;
  }

  /* Panel adjustments */
  .view-panel {
    overflow-y: auto;
    padding: 8px;
  }

  .section {
    margin-bottom: 12px;
  }

  /* Layout */
  .layout {
    top: var(--header-h);
    padding-top: 0;
  }

  /* Buttons for touch */
  .btn {
    min-height: 40px;
    padding: 8px 12px;
    font-size: 13px;
  }

  /* Form inputs */
  input, select, textarea {
    min-height: 40px;
    font-size: 16px;
    padding: 10px;
  }

  /* Chat box */
  .collab-box {
    width: calc(100vw - 20px) !important;
    max-width: 350px !important;
  }

  /* Modals */
  .modal > div,
  #newActionModal > div,
  #photoCaptureModal > div {
    min-width: 85vw !important;
    max-width: 90vw !important;
    max-height: 85vh !important;
  }

  /* Form field spacing */
  input[type="text"],
  input[type="email"],
  input[type="date"],
  textarea,
  select {
    margin-bottom: 12px;
    width: 100%;
  }
}

@media (max-width: 480px) {
  :root {
    --sidebar-w: 280px;
    --header-h: 48px;
  }

  .header {
    height: var(--header-h);
    padding: 0 6px;
    gap: 2px;
  }

  header {
    height: var(--header-h);
    overflow-x: auto;
  }

  /* Keep all buttons visible but compact */
  header .btn {
    min-width: auto;
    height: 44px;
    padding: 6px 8px;
    font-size: 11px;
  }

  header svg {
    width: 13px !important;
    height: 13px !important;
  }

  .sidebar {
    width: var(--sidebar-w);
  }

  .view-tab {
    padding: 10px 8px;
    font-size: 11px;
  }

  .view-panel {
    padding: 8px;
  }

  /* Forms */
  .btn {
    padding: 10px;
    min-height: 44px;
    font-size: 13px;
  }

  input, select, textarea {
    min-height: 44px;
    font-size: 16px;
    padding: 10px;
  }

  /* Modals */
  #newActionModal > div,
  #photoCaptureModal > div {
    min-width: 90vw !important;
    max-height: 85vh !important;
  }

  /* Chat smaller */
  .collab-box {
    right: 8px !important;
    bottom: 8px !important;
    width: calc(100vw - 16px) !important;
    max-width: 320px !important;
  }

  /* Toolbar */
  #drawingToolbar {
    scale: 0.9;
    transform-origin: top left;
  }

  /* Section titles */
  .section-title {
    font-size: 12px;
  }

  /* List items */
  .file-item,
  .layer-item {
    font-size: 12px;
    padding: 8px;
  }
}

/* ═══════════════ AUTH: login, user chip, users panel, gating ═══════════════ */

.login-overlay {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 30%, #1b2735 0%, #0d1117 70%);
}
.login-card {
  width: 360px; max-width: 92vw;
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: 14px; padding: 26px 24px;
  box-shadow: 0 16px 60px rgba(0,0,0,.6);
}
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.login-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.login-sub   { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.login-label { display: block; font-size: 11px; color: var(--text-muted); margin: 12px 0 5px; font-weight: 600; }
.login-input {
  width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 13px;
  background: var(--bg-base); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text-primary);
}
.login-input:focus { outline: none; border-color: var(--accent); }
.login-error { color: var(--danger); font-size: 11.5px; min-height: 16px; margin-top: 8px; }
.login-btn {
  width: 100%; margin-top: 10px; padding: 11px; font-size: 14px; font-weight: 700;
  background: var(--accent); color: #fff; border: none; border-radius: 8px; cursor: pointer;
  transition: background .15s;
}
.login-btn:hover { background: #2980b9; }

/* User chip in the header */
.user-chip { position: relative; }
.user-chip-btn {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 18px; padding: 4px 10px 4px 4px; cursor: pointer; color: var(--text-primary);
}
.user-chip-btn:hover { border-color: var(--accent); }
.user-chip-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg,#667eea,#764ba2); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
}
.user-chip-name { font-size: 12px; font-weight: 600; }
.user-chip-role { font-size: 9px; text-transform: uppercase; color: var(--text-muted);
  background: var(--bg-base); padding: 2px 6px; border-radius: 8px; letter-spacing: .04em; }
.user-chip-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 600;
  min-width: 200px; background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: var(--shadow); overflow: hidden; padding: 4px;
}
.ucm-item {
  display: block; width: 100%; text-align: left; padding: 9px 12px;
  background: transparent; border: none; color: var(--text-primary); cursor: pointer; font-size: 12.5px;
  border-radius: 6px;
}
.ucm-item:hover { background: var(--bg-hover); }
/* NAV-3 (L6): labels for the account menu's sections (Account / Messages /
   Approvals / Administration). Grouping only — the entries themselves are
   unchanged. */
.ucm-sec {
  padding: 7px 12px 3px; font-size: 10px; font-weight: 700; letter-spacing: .3px;
  color: var(--text-muted, #8b949e); text-transform: uppercase; pointer-events: none;
}
.ucm-sep { height: 1px; margin: 5px 8px; background: var(--border); }
/* NAV-4: the sections became a collapsible tree — clickable headers with a
   caret, indented group bodies, and a roll-up badge so unread counts stay
   visible while a group is closed. */
.ucm-grp-hd {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px 10px;
  background: transparent; border: none; cursor: pointer; border-radius: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
  color: var(--text-muted, #8b949e); text-transform: uppercase; text-align: left;
}
.ucm-grp-hd:hover { background: var(--bg-hover); color: var(--text-primary); }
.ucm-caret { font-size: 9px; transition: transform .15s; }
.ucm-grp-hd.open .ucm-caret { transform: rotate(90deg); }
.ucm-hd-badge {
  margin-inline-start: auto; min-width: 16px; padding: 1px 5px; border-radius: 8px;
  background: #e74c3c; color: #fff; font-size: 10px; font-weight: 700; text-align: center;
}
.ucm-grp { margin-inline-start: 13px; border-inline-start: 1px solid var(--border); padding-inline-start: 2px; }

/* Users & Permissions panel */
.users-dialog { width: 760px; max-width: 95vw; max-height: 86vh; display: flex; flex-direction: column; }
.users-body { display: flex; gap: 0; flex: 1; overflow: hidden; }
.users-list-col { width: 280px; border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 10px; gap: 8px; overflow-y: auto; }
.users-new-btn {
  padding: 9px; font-size: 12px; font-weight: 600;
  background: rgba(46,204,113,.14); border: 1px solid #2ecc71; color: #2ecc71;
  border-radius: 6px; cursor: pointer; flex-shrink: 0;
}
.users-new-btn:hover { background: rgba(46,204,113,.28); }
.users-new-btn:disabled { opacity: .45; cursor: not-allowed; }
.users-quota {
  padding: 8px 10px; margin-bottom: 8px; border-radius: 6px; font-size: 11.5px;
  background: rgba(243,156,18,.12); border: 1px solid rgba(243,156,18,.5); color: var(--text-primary);
}
.user-tag {
  display: inline-block; font-size: 8.5px; font-weight: 800; letter-spacing: .3px;
  padding: 1px 5px; border-radius: 6px; margin-left: 4px; vertical-align: middle; color: #fff;
}
.user-tag.super     { background: #8e44ad; }
.user-tag.deptadmin { background: #2980b9; }
.user-tag.seeall    { background: #16a085; }

/* Department tree (hierarchy) in the Departments panel */
.dept-node-row {
  display: flex; align-items: center; gap: 7px; padding: 7px 8px; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 7px; margin-bottom: 3px;
}
.dept-node-row:hover { border-color: var(--accent); background: var(--bg-hover); }
.dept-node-ico { flex-shrink: 0; }
.dept-node-name { flex: 1; font-size: 12.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dept-node-meta { font-size: 10px; color: var(--text-muted); }
.dept-add-child {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 5px; cursor: pointer; font-size: 14px; line-height: 1;
  background: rgba(46,204,113,.14); border: 1px solid #2ecc71; color: #2ecc71;
}
.dept-add-child:hover { background: rgba(46,204,113,.3); }
.users-list { display: flex; flex-direction: column; gap: 4px; }
.users-row {
  display: flex; align-items: center; gap: 9px; padding: 8px; text-align: left;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; color: var(--text-primary);
}
.users-row:hover { border-color: var(--accent); background: var(--bg-hover); }
.users-row-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg,#667eea,#764ba2); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
}
.users-row-info { display: flex; flex-direction: column; min-width: 0; }
.users-row-name { font-size: 12.5px; font-weight: 600; }
.users-row-meta { font-size: 10px; color: var(--text-muted); }
.users-edit-col { flex: 1; padding: 16px 18px; overflow-y: auto; }
.users-empty { color: var(--text-muted); font-size: 13px; padding: 30px 10px; text-align: center; }
.users-edit-title { margin: 0 0 12px; font-size: 14px; color: var(--text-primary); }
.ue-label { display: block; font-size: 11px; color: var(--text-muted); font-weight: 600; margin: 10px 0 4px; }
.ue-input {
  width: 100%; box-sizing: border-box; padding: 8px 10px; font-size: 12.5px;
  background: var(--bg-base); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary);
}
.ue-input:focus { outline: none; border-color: var(--accent); }
.ue-input:disabled { opacity: .6; }
.ue-row { display: flex; gap: 10px; }
.ue-perms { display: flex; flex-direction: column; gap: 4px; margin-top: 4px;
  border: 1px solid var(--border); border-radius: 8px; padding: 8px; background: var(--bg-base); }
.ue-perm { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-primary); cursor: pointer; padding: 3px; }
.ue-perm input { cursor: pointer; }
.ue-actions { display: flex; gap: 8px; margin-top: 16px; }
.ue-save {
  flex: 1; padding: 10px; font-size: 13px; font-weight: 700;
  background: var(--accent); color: #fff; border: none; border-radius: 8px; cursor: pointer;
}
.ue-save:hover { background: #2980b9; }
.ue-del {
  padding: 10px 16px; font-size: 13px; font-weight: 600;
  background: rgba(248,81,73,.14); border: 1px solid var(--danger); color: var(--danger);
  border-radius: 8px; cursor: pointer;
}
.ue-del:hover { background: rgba(248,81,73,.28); }

/* ── Permission gating: hide every editing control the user can't access ── */

/* draw_edit — drawing, editing, deleting, layer management */
/* #mbarDraw / #mbarEdit (whole menus) moved to the L6.6-C block at the end of
   this file: the parents are now DISABLED, only their dropdowns are hidden. */
/* #mbarPoints removed (L6.5 RISK-1): the id exists nowhere in static/ — the
   selector had been dead since the menu was renamed, gating nothing. Covered by
   tests/test_l65_security.py, which fails if any #id here stops resolving. */
body.perm-no-draw #btnClearAll,
body.perm-no-draw #btnNewLayer,
body.perm-no-draw #btnNewGroup,
/* #btnGroupSelected, #btnHideSelected, #btnShowSelected, #btnClearSelection and
   #btnDeleteSelectedLayers removed (L6.5-C): the five duplicate bulk buttons are
   gone from the page, so these selectors would have joined #mbarPoints as dead
   ones. The surviving controls are on the selection bar and are gated by
   TOOL_CAPS plus a requirePerm() at dispatch, not by CSS. */
/* L6.6-D: .layer-cb and .layer-color-swatch left the row. Selection is the row
   itself (the bar it feeds is gated per action, RISK-2); the symbology preview
   .layer-sym stays visible for a viewer as information and its click asks
   requirePerm('draw_edit') before opening the picker. */
body.perm-no-draw .layer-del-btn,
body.perm-no-draw .tree-del,          /* L6.7-DEL: the feature-row ✕ (its handler also asks requirePerm) */
body.perm-no-draw .layer-fields-btn,
body.perm-no-draw .layer-grp-wrap,
body.perm-no-draw .layer-exit-grp,
body.perm-no-draw #popupDeleteBtn,
body.perm-no-draw #popupMoveBtn,
body.perm-no-draw #popupEditShapeBtn,
body.perm-no-draw .feat-attr-add,
body.perm-no-draw .feat-attr-del,
body.perm-no-draw .feat-attr-add-btn,
body.perm-no-draw .at-bulkbar,
body.perm-no-draw #syncUploadBtn,
body.perm-no-draw #drawPanel { display: none !important; }

/* Make inline value fields read-only-looking for viewers */
body.perm-no-draw .at-cell,
body.perm-no-draw .feat-attr-val {
  pointer-events: none;
  background: transparent !important;
  border-color: transparent !important;
}

/* import_export — file upload + project save + layer export */
body.perm-no-files #vtFiles,
body.perm-no-files .layer-export-wrap,
body.perm-no-files .at-exp-btn,
body.perm-no-files .ar-dl { display: none !important; }

/* attachments — attach files + approvals */
body.perm-no-attach .feat-attach-section,
body.perm-no-attach .feat-attach-btn,
body.perm-no-attach .at-attach-th,
body.perm-no-attach .at-attach-cell { display: none !important; }

/* Sync status indicator in the header */
.sync-status {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 14px;
  background: var(--bg-card); border: 1px solid var(--border);
  font-size: 11px; color: var(--text-secondary, #c9d1d9); white-space: nowrap;
}
.sync-status { cursor: pointer; }
.sync-status:hover { border-color: var(--accent, #3498db); }
.sync-status.sync-off { border-color: var(--danger); color: var(--danger); }
.sync-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 4px currentColor; }
.sync-txt { font-weight: 600; }

/* Manual-sync button next to the status pill */
.sync-wrap { display: flex; align-items: center; gap: 4px; }
.sync-now-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border-radius: 50%;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-secondary, #c9d1d9); font-size: 14px; line-height: 1; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.sync-now-btn:hover { border-color: var(--accent, #3498db); background: var(--bg-hover, rgba(52,152,219,0.12)); }
.sync-now-btn:active { transform: scale(0.92); }
.sync-now-btn.spinning { animation: syncSpin 0.8s linear infinite; }
@keyframes syncSpin { to { transform: rotate(360deg); } }

/* Upload-to-server button: green so it reads as "push up" */
.sync-upload-btn { color: #2ecc71; font-weight: 700; }
.sync-upload-btn:hover { border-color: #2ecc71; background: rgba(46,204,113,0.14); }
.sync-upload-btn.spinning { animation: syncPulse 0.7s ease-in-out infinite; }
@keyframes syncPulse { 0%,100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-3px); opacity: 0.55; } }

/* Download-from-server button: blue so it reads as "pull down" */
.sync-download-btn { color: #3498db; font-weight: 700; }
.sync-download-btn:hover { border-color: #3498db; background: rgba(52,152,219,0.14); }
.sync-download-btn.spinning { animation: syncPulseDown 0.7s ease-in-out infinite; }
@keyframes syncPulseDown { 0%,100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(3px); opacity: 0.55; } }

/* Login server row + Central server settings dialog */
.login-server-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 11px; color: var(--text-muted);
}
.login-server-btn {
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary);
  border-radius: 6px; padding: 5px 10px; cursor: pointer; font-size: 11px;
}
.login-server-btn:hover { border-color: var(--accent); }

.server-dialog { width: 460px; max-width: 94vw; }
.server-body { padding: 16px 18px; }
.server-hint { font-size: 12px; color: var(--text-muted); margin: 0 0 12px; line-height: 1.5; }
.server-recents { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.server-recent {
  font-size: 11px; padding: 4px 9px; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; color: var(--text-secondary, #c9d1d9);
}
.server-recent:hover { border-color: var(--accent); }
.server-test { margin-top: 12px; font-size: 12px; min-height: 18px; color: var(--text-muted); }
.server-test.ok  { color: #2ecc71; }
.server-test.bad { color: var(--danger); }
.server-actions { display: flex; gap: 8px; margin-top: 16px; align-items: stretch; }
.server-actions .ue-save { flex: 1; }

/* Chat rich media (image / voice / file) */
.chat-bubble.media { padding: 4px; background: transparent !important; }
.chat-img {
  max-width: 200px; max-height: 200px; border-radius: 8px; cursor: pointer; display: block;
  border: 1px solid var(--border);
}
.chat-voice {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 5px 8px;
}
.chat-voice audio { height: 30px; max-width: 170px; }
.chat-voice-dur { font-size: 10px; color: var(--text-muted); }
.chat-file {
  display: flex; align-items: center; gap: 7px; text-decoration: none;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px;
  color: var(--text-primary); font-size: 12px; max-width: 220px;
}
.chat-file:hover { border-color: var(--accent); }
.chat-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-file-size { font-size: 9.5px; color: var(--text-muted); }
/* Recording state on the mic button */
#chatVoiceBtn.recording {
  background: var(--danger) !important; color: #fff !important;
  animation: chatRecPulse 1s infinite;
}
@keyframes chatRecPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* ═══════════════ Direct Messages ═══════════════ */
.ucm-badge, .dm-chip-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--danger); color: #fff; font-size: 9px; font-weight: 700; margin-left: 6px;
}
.dm-chip-badge { position: absolute; top: -4px; right: -4px; margin: 0; box-shadow: 0 0 0 2px var(--bg-panel); }
.user-chip-btn { position: relative; }

.dm-dialog { width: 760px; max-width: 96vw; height: 78vh; max-height: 78vh; display: flex; flex-direction: column; }
.dm-body { display: flex; flex: 1; overflow: hidden; }
.dm-list-col { width: 250px; border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.dm-search { margin: 10px; padding: 8px 10px; font-size: 12px; background: var(--bg-base); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); }
.dm-search:focus { outline: none; border-color: var(--accent); }
.dm-contacts { flex: 1; overflow-y: auto; padding: 0 6px 8px; display: flex; flex-direction: column; gap: 3px; }
.dm-contact {
  display: flex; align-items: center; gap: 9px; padding: 8px; text-align: left; position: relative;
  background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer; color: var(--text-primary);
}
.dm-contact:hover { background: var(--bg-hover); }
.dm-contact.active { background: rgba(52,152,219,.16); border-color: var(--accent); }
.dm-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg,#667eea,#764ba2); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
}
.dm-contact-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dm-contact-name { font-size: 12.5px; font-weight: 600; }
.dm-contact-prev { font-size: 10.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-unread {
  background: var(--danger); color: #fff; font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 5px;
}
.dm-conv-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.dm-empty { color: var(--text-muted); font-size: 13px; padding: 40px 20px; text-align: center; margin: auto; }
.dm-conv-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.dm-conv-name { font-size: 14px; font-weight: 700; }
.dm-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.dm-msg { display: flex; }
.dm-msg.mine { justify-content: flex-end; }
.dm-bubble {
  max-width: 70%; padding: 8px 11px; border-radius: 14px;
  background: var(--bg-card); border: 1px solid var(--border); position: relative;
}
.dm-msg.mine .dm-bubble { background: var(--accent); border-color: var(--accent); color: #fff; }
.dm-bubble-text { font-size: 13px; line-height: 1.4; word-break: break-word; }
.dm-time { display: block; font-size: 9px; opacity: .7; margin-top: 3px; text-align: right; }
.dm-compose { display: flex; align-items: center; gap: 6px; padding: 10px; border-top: 1px solid var(--border); }
.dm-input { flex: 1; padding: 9px 12px; font-size: 13px; background: var(--bg-base); border: 1px solid var(--border); border-radius: 18px; color: var(--text-primary); }
.dm-input:focus { outline: none; border-color: var(--accent); }
.dm-compose .chat-send-btn { width: 34px; height: 34px; flex-shrink: 0; }
#dmVoiceBtn.recording { background: var(--danger) !important; color: #fff !important; animation: chatRecPulse 1s infinite; }
.dm-bubble .chat-img { max-width: 180px; max-height: 180px; }

/* Voice call: DM header button + active call bar */
.dm-call-btn {
  margin-left: auto; width: 32px; height: 32px; flex-shrink: 0;
  background: rgba(46,204,113,.16); border: 1px solid #2ecc71; color: #2ecc71;
  border-radius: 50%; cursor: pointer; font-size: 14px;
}
.dm-call-btn:hover { background: rgba(46,204,113,.3); }

.call-bar {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; z-index: 8000;
  background: var(--bg-panel); border: 1px solid var(--accent);
  border-radius: 28px; padding: 8px 12px 8px 16px;
  box-shadow: 0 10px 34px rgba(0,0,0,.5);
}
.call-bar-pulse {
  width: 12px; height: 12px; border-radius: 50%; background: #2ecc71;
  box-shadow: 0 0 0 0 rgba(46,204,113,.6); animation: callPulse 1.4s infinite;
}
@keyframes callPulse {
  0%   { box-shadow: 0 0 0 0 rgba(46,204,113,.6); }
  70%  { box-shadow: 0 0 0 10px rgba(46,204,113,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); }
}
.call-bar-text { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.call-bar-btn {
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 16px;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary);
}
.call-bar-btn:hover { border-color: var(--accent); }
.call-bar-btn.muted { background: rgba(243,156,18,.2); border-color: #f39c12; }
.call-bar-hang { background: var(--danger); border-color: var(--danger); color: #fff; }
.call-bar-hang:hover { background: #c0392b; }

/* ═══════════════ Declutter the top header ═══════════════ */
/* NAV-2 (L6): the rule that used to sit here hid the header's duplicate Fit View
   and Base Map buttons — "already live inside the View menu → drop the header
   copies". The buttons themselves are gone now, so the rule has nothing to hide. */

/* Turn the remaining header utilities into a clean icon-only toolbar
   (labels become tooltips; SVG icons keep their fixed width/height) */
/* NAV-2 (L6): #endCallBtn and #muteBtn were dropped from this list with the old
   call UI they belonged to — voice is unified in Rooms. */
.header-actions #btnClearAll,
.header-actions #btnCollabToggle,
.header-actions #btnRejoinTeam {
  font-size: 0 !important;
  gap: 2px !important;
  padding: 7px 9px !important;
}
/* Restore the small count/status badges hidden by font-size:0 */
.header-actions #btnCollabToggle .collab-hdr-badge,
.header-actions #btnCollabToggle .chat-unread-badge { font-size: 9px !important; }

/* Compact the sync chip (dot + short word, no timestamp clutter) */
.sync-status { padding: 4px 9px; }
.sync-status .sync-txt { font-size: 10.5px; }

/* Tighter menubar so the dropdowns + icons all fit on one row */
.map-menubar .mbar-btn { padding: 6px 9px; gap: 5px; }
.header-actions { gap: 6px; }

/* ═══════════════ Approval workflow ═══════════════ */
.status-pill {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  font-size: 9.5px; font-weight: 700; border: 1px solid; white-space: nowrap;
}
.at-status { white-space: nowrap; }

.review-dialog { width: 640px; max-width: 95vw; max-height: 82vh; display: flex; flex-direction: column; }
.review-body { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.review-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
}
.review-info { flex: 1; min-width: 0; }
.review-line { font-size: 12.5px; color: var(--text-primary); }
.review-sub  { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.review-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.rv-approve, .rv-reject {
  padding: 6px 10px; font-size: 11px; font-weight: 600; border-radius: 6px; cursor: pointer; border: 1px solid;
}
.rv-approve { background: rgba(46,204,113,.16); border-color: #2ecc71; color: #2ecc71; }
.rv-approve:hover { background: rgba(46,204,113,.3); }
.rv-reject  { background: rgba(248,81,73,.14); border-color: var(--danger); color: var(--danger); }
.rv-reject:hover { background: rgba(248,81,73,.28); }
.rv-req-sel {
  padding: 5px 6px; font-size: 11px; background: var(--bg-base);
  border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); cursor: pointer; max-width: 130px;
}

/* Approval section inside the feature popup */
.feat-approval {
  margin: 8px 0; padding: 10px;
  background: rgba(243,156,18,.10); border: 1px solid #f39c12; border-radius: 8px;
}
.feat-approval.note { color: #f39c12; font-size: 11.5px; font-weight: 600; text-align: center; }
.feat-approval-title { font-size: 11px; font-weight: 700; color: #f39c12; margin-bottom: 8px; }
.feat-approval-row { display: flex; gap: 8px; }
.feat-approval-row .rv-approve, .feat-approval-row .rv-reject { flex: 1; padding: 8px; font-size: 12px; }

.rv-locate {
  padding: 6px 10px; font-size: 11px; font-weight: 600; border-radius: 6px; cursor: pointer;
  background: rgba(52,152,219,.16); border: 1px solid var(--accent); color: var(--accent);
}
.rv-locate:hover { background: rgba(52,152,219,.3); }

/* L6.5-B: .layer-meta styled the permanent "👤 uploader · 🕑 date" line under
   every layer's feature count. That line is gone — the provenance is on the row
   as a tooltip and printed as .lmp-meta inside the row's ⋯ menu — so the rule
   went with it rather than sitting here matching nothing. */
.layer-pending-badge { display: inline-block; font-size: 9px; font-weight: 700; color: #fff;
  background: #f39c12; border-radius: 8px; padding: 0 6px; margin-left: 4px; vertical-align: middle; }
.layer-scope-btn { background: none; border: none; cursor: pointer; font-size: 12px; opacity: .55; padding: 2px; flex-shrink: 0; }
.layer-scope-btn:hover { opacity: 1; }
body:not(.is-super) .layer-scope-btn { display: none; }
.layer-scope-badge { display: inline-block; font-size: 8.5px; font-weight: 700; padding: 0 5px;
  border-radius: 6px; margin-left: 4px; vertical-align: middle; color: #fff; }
.layer-scope-badge.dept   { background: #2980b9; }
.layer-scope-badge.shared { background: #7f8c8d; }

/* Departments view — only the super admin sees it (L6.6-D: an <option> in the
   View-as select now; same class, same rule) */
body:not(.is-super) .vmode-depts { display: none; }
.dept-header .dept-name { cursor: default; font-weight: 700; }
.dept-block .group-header { background: rgba(41,128,185,.10); }

/* ── Points data panel ── */
.pts-count { background:#3498db; color:#fff; border-radius:10px; padding:0 7px; font-size:11px; line-height:18px; }
.pts-table { width:100%; }
.pts-table th, .pts-table td { white-space:nowrap; max-width:160px; overflow:hidden; text-overflow:ellipsis; padding:3px 6px; }
.pts-row { cursor:pointer; }
.pts-row:hover { background:rgba(52,152,219,0.18); }

/* ── Point style rules editor ── */
.ps-rule-card { border:1px solid rgba(255,255,255,0.12); border-radius:8px; padding:8px; margin-bottom:8px; background:rgba(255,255,255,0.03); }
.ps-card-head { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.ps-dot { display:inline-block; width:14px; height:14px; border:1.5px solid #fff; flex:0 0 auto; }
.ps-conds { display:flex; flex-direction:column; gap:4px; margin:4px 0; padding-left:8px; border-left:2px solid rgba(52,152,219,0.45); }
.ps-conds-label { font-size:11px; color:var(--text-dim); }
.ps-cond { display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
.ps-cond .ps-op { padding:4px; }
.ps-style-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:11px; color:var(--text-dim); margin-top:4px; }
.ps-style-row label { display:flex; align-items:center; gap:4px; }
.ps-style-row select, .ps-style-row input { font-size:11px; padding:3px; }
.ps-add-cond { align-self:flex-start; }

/* ── Selection-actions window ── */
.feat-ops-panel { position:fixed; top:calc(var(--header-h, 56px) + 10px); right:16px; z-index:1400; width:236px;   /* L6.6-E: was 66px = the old 56px header + 10; follows the two-row header and the editing strip */
  background:rgba(20,28,38,0.97); border:1px solid rgba(255,255,255,0.14); border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,0.5); color:var(--text-primary,#e8eef3); overflow:hidden; }
.feat-ops-panel .fo-head { display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px; background:rgba(52,152,219,0.18); border-bottom:1px solid rgba(255,255,255,0.10); }
.feat-ops-panel .fo-title { font-size:12px; }
.feat-ops-panel .fo-x { background:none; border:none; color:inherit; font-size:18px; line-height:1; cursor:pointer; padding:0 2px; }
.feat-ops-panel .fo-body { display:flex; flex-direction:column; padding:6px; gap:3px; }
.feat-ops-panel .fo-cmd { display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  padding:7px 9px; background:rgba(255,255,255,0.04); border:1px solid transparent; border-radius:7px;
  color:inherit; font-size:12px; cursor:pointer; }
.feat-ops-panel .fo-cmd:hover { background:rgba(52,152,219,0.25); border-color:rgba(52,152,219,0.5); }
.feat-ops-panel .fo-ic { width:18px; text-align:center; flex:0 0 auto; }
.feat-ops-panel .fo-restore { background:rgba(46,204,113,0.16); }
.feat-ops-panel .fo-clear { background:rgba(231,76,60,0.14); margin-top:2px; }

/* ── Icon library picker ── */
.il-chips { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:6px; }
.il-chip { background:rgba(52,152,219,0.16); border:1px solid rgba(52,152,219,0.4); color:var(--text-primary,#e8eef3);
  border-radius:14px; padding:3px 10px; font-size:11px; cursor:pointer; }
.il-chip:hover { background:rgba(52,152,219,0.32); }
.il-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(46px,1fr)); gap:6px; }
.il-ico { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:8px;
  padding:6px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.il-ico:hover { background:rgba(52,152,219,0.28); border-color:rgba(52,152,219,0.6); }
.il-ico img { width:26px; height:26px; }
.ps-dot-ico { width:16px; height:16px; flex:0 0 auto; }
.ps-icon-prev { width:18px; height:18px; vertical-align:middle; }

/* ── Select builder ── */
.sel-cond { display:flex; gap:5px; align-items:center; margin-bottom:5px; flex-wrap:wrap; }
.sel-cond select, .sel-cond input { padding:4px; font-size:12px; }
.sel-cond .sel-field { min-width:140px; }

/* ── Select by layer(s) ── */
.slbl-list { display:flex; flex-direction:column; gap:2px; max-height:42vh; overflow:auto; }
.slbl-row { display:flex; align-items:center; gap:8px; padding:5px 6px; border-radius:6px; cursor:pointer; }
.slbl-row:hover { background:rgba(52,152,219,0.14); }
.slbl-row small { color:var(--text-dim); }

/* ── Aerial imagery overlays ── */
.aerial-section { margin-top:10px; padding-top:8px; border-top:1px solid rgba(255,255,255,0.1); }
.aerial-head { display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--text-dim); margin-bottom:6px; }
.aerial-list { display:flex; flex-direction:column; gap:4px; }
.aerial-empty { font-size:11px; color:var(--text-dim); padding:4px 2px; }
.aerial-row { display:flex; align-items:center; gap:6px; padding:4px 6px; background:rgba(255,255,255,0.04); border-radius:6px; }
.aerial-row .ai-name { flex:1; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aerial-row .ai-eye, .aerial-row .ai-btn { background:none; border:none; color:inherit; cursor:pointer; font-size:13px; padding:0 2px; }
.aerial-row .ai-del:hover { color:#e74c3c; }
.aerial-row .ai-op { width:64px; }

/* ── Work-together session ── */
.cs-fab { position:fixed; left:16px; bottom:16px; z-index:1400; padding:9px 14px; border-radius:22px;
  background:rgba(20,28,38,0.96); color:#e8eef3; border:1px solid rgba(255,255,255,0.16);
  box-shadow:0 6px 20px rgba(0,0,0,0.45); cursor:pointer; font-size:13px; }
.cs-fab:hover { background:rgba(52,152,219,0.3); }
.cs-fab.active { background:#2ecc71; color:#06371d; border-color:#27ae60; font-weight:600; }
.cs-peers { display:flex; flex-direction:column; gap:4px; margin:8px 0; max-height:46vh; overflow:auto; }
.cs-peer { display:flex; align-items:center; gap:8px; padding:6px; border-radius:6px; cursor:pointer; }
.cs-peer:hover { background:rgba(52,152,219,0.14); }
.cs-dot { width:12px; height:12px; border-radius:50%; flex:0 0 auto; border:1px solid #fff; }

/* ── Two-stage approval (super-admin batch) ── */
.review-batch { border:1px solid rgba(46,204,113,0.5); background:rgba(46,204,113,0.10); border-radius:8px; padding:8px 10px; margin-bottom:10px; }
.rv-batch-head { font-size:13px; margin-bottom:6px; }
.rv-batch-list { max-height:30vh; overflow:auto; display:flex; flex-direction:column; gap:3px; margin-bottom:8px; }
.rv-batch-row { font-size:12px; color:var(--text-dim,#9fb0bf); }
.rv-batch-locate { background:none; border:none; color:#3498db; cursor:pointer; text-decoration:underline; padding:0 2px; }
.rv-batch-approve { background:#2ecc71; color:#06371d; border:none; border-radius:6px; padding:7px 14px; font-weight:600; cursor:pointer; }
.rv-batch-approve:hover { background:#27ae60; }
.review-note { font-size:12px; color:#f39c12; background:rgba(243,156,18,0.1); border-radius:6px; padding:7px 10px; margin-bottom:8px; }

/* ── Work-together session types ── */
.cs-modes { display:flex; flex-direction:column; gap:5px; margin:4px 0; }
.cs-mode { display:flex; align-items:flex-start; gap:7px; padding:6px; border-radius:6px; cursor:pointer; font-size:12px; }
.cs-mode:hover { background:rgba(52,152,219,0.12); }
.cs-mode small { color:var(--text-dim,#9fb0bf); }
/* Viewer-only lock: disable all action surfaces */
.cs-viewer-banner { position:fixed; left:50%; transform:translateX(-50%); top:54px; z-index:3000;
  display:flex; align-items:center; gap:10px; background:#8e44ad; color:#fff; padding:7px 14px;
  border-radius:20px; font-size:12px; box-shadow:0 6px 18px rgba(0,0,0,0.4); }
.cs-viewer-banner button { background:#fff; color:#8e44ad; border:none; border-radius:12px; padding:3px 10px; cursor:pointer; font-weight:600; }
body.collab-viewer #mbarDraw, body.collab-viewer #mbarEdit,
body.collab-viewer .layer-exp-wrap, body.collab-viewer .layer-del-btn, body.collab-viewer .layer-scope-btn,
body.collab-viewer #selActionsBar, body.collab-viewer #featOpsPanel,
body.collab-viewer #btnProcess, body.collab-viewer .at-export-bar, body.collab-viewer #btnDeleteSelected,
body.collab-viewer .layer-grp-wrap, body.collab-viewer .ftree-attr, body.collab-viewer .at-cell {
  pointer-events:none !important; opacity:0.4 !important;
}

/* ── Voice rooms ── */
.vr-fab { position:fixed; left:16px; bottom:62px; z-index:1400; width:44px; height:44px; border-radius:50%;
  background:rgba(20,28,38,0.96); color:#fff; border:1px solid rgba(255,255,255,0.16);
  box-shadow:0 6px 20px rgba(0,0,0,0.45); cursor:pointer; font-size:18px; }
.vr-fab:hover { background:rgba(52,152,219,0.3); }
.voice-bar { position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:2600;
  display:flex; align-items:center; gap:10px; background:rgba(20,28,38,0.97); color:#e8eef3;
  border:1px solid rgba(46,204,113,0.5); border-radius:24px; padding:7px 14px; box-shadow:0 8px 24px rgba(0,0,0,0.5); font-size:13px; }
.voice-bar .vb-live { width:9px; height:9px; border-radius:50%; background:#2ecc71; box-shadow:0 0 7px #2ecc71; animation:vbPulse 1.4s infinite; }
@keyframes vbPulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.voice-bar .vb-count { color:var(--text-dim,#9fb0bf); }
.voice-bar .vb-btn { background:rgba(255,255,255,0.08); color:inherit; border:none; border-radius:14px; padding:4px 10px; cursor:pointer; }
.voice-bar .vb-leave { background:rgba(231,76,60,0.85); color:#fff; }
.vr-rooms { display:flex; flex-direction:column; gap:6px; }
.vr-room { text-align:left; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:8px; padding:9px 11px; color:inherit; cursor:pointer; font-size:13px; }
.vr-room:hover:not([disabled]) { background:rgba(52,152,219,0.22); }
.vr-room[disabled] { opacity:.45; cursor:not-allowed; }
.vr-room small { color:var(--text-dim,#9fb0bf); }
.vr-peers { display:flex; flex-direction:column; gap:3px; max-height:34vh; overflow:auto; margin:4px 0; }
.vr-peer { display:flex; align-items:center; gap:8px; padding:5px 6px; border-radius:6px; cursor:pointer; }
.vr-peer:hover { background:rgba(52,152,219,0.14); }
.vr-dot { width:11px; height:11px; border-radius:50%; border:1px solid #fff; flex:0 0 auto; }

/* ── Unified room panel (chat + voice + members) ── */
.room-panel { position:fixed; right:16px; bottom:16px; z-index:2600; width:330px; max-height:70vh;
  display:none; flex-direction:column; background:rgba(18,26,36,0.98); color:#e8eef3;
  border:1px solid rgba(255,255,255,0.14); border-radius:12px; box-shadow:0 12px 34px rgba(0,0,0,0.55); overflow:hidden; }
.room-panel .rp-head { display:flex; align-items:center; justify-content:space-between; padding:9px 11px; background:rgba(52,152,219,0.18); }
.room-panel .rp-title { font-size:13px; font-weight:600; }
.room-panel .rp-caps { display:block; font-size:10px; font-weight:400; color:var(--text-dim,#9fb0bf); margin-top:1px; }
.room-panel .rp-x { background:none; border:none; color:inherit; font-size:18px; cursor:pointer; }
.room-panel .rp-members { display:flex; flex-wrap:wrap; gap:6px; padding:6px 10px; border-bottom:1px solid rgba(255,255,255,0.08); font-size:11px; }
.room-panel .rp-mem { display:flex; align-items:center; gap:4px; }
.room-panel .rp-dot { width:9px; height:9px; border-radius:50%; }
.room-panel .rp-voicebar { display:flex; gap:6px; padding:6px 10px; border-bottom:1px solid rgba(255,255,255,0.08); }
.room-panel .rp-btn { background:rgba(255,255,255,0.08); color:inherit; border:none; border-radius:14px; padding:4px 12px; cursor:pointer; font-size:12px; }
.room-panel .rp-voice { background:#2ecc71; color:#06371d; font-weight:600; }
.room-panel .rp-leave { background:rgba(231,76,60,0.85); color:#fff; }
.room-panel .rp-msgs { flex:1; overflow:auto; padding:8px 10px; display:flex; flex-direction:column; gap:5px; min-height:120px; }
.room-panel .rp-msg { max-width:85%; align-self:flex-start; background:rgba(255,255,255,0.06); border-radius:8px; padding:4px 8px; font-size:12px; }
.room-panel .rp-msg.mine { align-self:flex-end; background:rgba(52,152,219,0.25); }
.room-panel .rp-mname { display:block; font-size:10px; font-weight:600; opacity:.85; }
.room-panel .rp-input { display:flex; gap:6px; padding:8px 10px; border-top:1px solid rgba(255,255,255,0.08); }
.room-panel .rp-input input { flex:1; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:16px; color:inherit; padding:6px 12px; font-size:12px; }
.room-panel .rp-input button { background:#3498db; color:#fff; border:none; border-radius:50%; width:32px; height:32px; cursor:pointer; }

/* ── Old Team Chat panel removed (replaced by the unified Rooms system) ── */
#collabPanel, #btnCollabToggle { display: none !important; }

/* room header: invite + close buttons */
.room-panel .rp-head-btns { display:flex; gap:4px; }

/* ============================================================================
 * MOBILE layout (phones / small tablets) — wrapped in @media so the desktop
 * browser UI is never affected.
 * ========================================================================== */
@media (max-width: 820px) {
  /* Sidebar floats OVER the map as a drawer (the map stays full-size behind it) */
  .sidebar {
    position: fixed;
    top: var(--header-h, 56px);
    left: 0; bottom: 0;
    width: min(86vw, 340px) !important;
    z-index: 1400;
    box-shadow: 6px 0 26px rgba(0,0,0,.55);
  }
  .sidebar.collapsed { width: 0 !important; box-shadow: none; }
  .map-container { flex: 1 1 100% !important; width: 100% !important; }

  /* Touch ergonomics: keep the collapse button, just drop the drag-resize affordance */
  .sidebar-resize-handle { cursor: default; }
  .sidebar-resize-handle:hover { background: transparent; }
  .sidebar-collapse-btn { width: 30px; height: 30px; }      /* bigger tap target to close the drawer */
  .sidebar-expand-float { width: 42px; height: 42px; left: 8px; }

  /* Compact, single-line layer rows so more fit on screen */
  .layer-item { padding: 4px 6px; gap: 4px; }
  .layer-info { min-width: 0; }
  .layer-name { font-size: 12px; }
  .layer-count { font-size: 10px; }
  .layer-item > button { padding: 2px 3px; }
  .layer-list { padding: 4px; }

  /* View tabs / search compact */
  .views-bar { gap: 3px; }
  .view-tab { padding: 9px 6px; font-size: 11px; }

  /* Floating windows fit the phone screen (full-width sheets) */
  .room-panel { left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 62vh; }
  .feat-ops-panel { left: 8px; right: 8px; top: calc(var(--header-h, 56px) + 6px); width: auto; }

  /* Keep the floating action buttons clear of each other */
  .vr-fab  { left: 10px; bottom: 58px; }
  .cs-fab  { left: 58px; bottom: 14px; padding: 8px 12px; font-size: 12px; }

  /* Dialogs use most of the screen */
  .modal-overlay .modal-dialog { max-width: 94vw !important; width: 94vw !important; }
}

/* Very small phones */
@media (max-width: 430px) {
  .sidebar { width: 90vw !important; }
  .layer-name { font-size: 11.5px; }
  .cs-fab { padding: 8px 10px; font-size: 11px; }
}

/* Popup header: keep the buttons a normal pointer (only empty header area is draggable/move) */
.popup-header .popup-icon-btn { cursor: pointer; }

/* On-map route overlay bar */
.route-bar { position:fixed; left:50%; transform:translateX(-50%); top:64px; z-index:2600;
  display:flex; align-items:center; gap:10px; background:rgba(30,136,229,0.95); color:#fff;
  padding:7px 14px; border-radius:20px; font-size:13px; box-shadow:0 6px 18px rgba(0,0,0,0.4); }
.route-bar button { background:#fff; color:#1e88e5; border:none; border-radius:12px; padding:3px 10px; cursor:pointer; font-weight:600; }

/* Share-feature in room chat */
.room-panel .rp-share { background:rgba(255,255,255,0.08); color:inherit; border:none; border-radius:50%; width:32px; height:32px; cursor:pointer; flex:0 0 auto; }
.room-panel .rp-share:hover { background:rgba(52,152,219,0.3); }
.room-panel .rp-feat { display:inline-block; margin-top:2px; background:rgba(52,152,219,0.28); color:#cfe6fb; border:1px solid rgba(52,152,219,0.5); border-radius:8px; padding:3px 9px; font-size:12px; cursor:pointer; text-align:left; }
.room-panel .rp-feat:hover { background:rgba(52,152,219,0.45); }

/* Offline local-workspace badge — sits just BELOW the header so it never covers the menus */
.ws-badge { position:fixed; left:50%; transform:translateX(-50%); top:auto; bottom:46px; z-index:1500;
  display:flex; align-items:center; gap:10px; background:#b9770e; color:#fff; padding:5px 14px;
  border-radius:18px; font-size:12px; box-shadow:0 6px 18px rgba(0,0,0,0.4); }
.ws-badge button { background:#fff; color:#b9770e; border:none; border-radius:12px; padding:3px 10px; cursor:pointer; font-weight:600; }

/* Background (basemap) chooser */
.bm-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.bm-opt { display:flex; align-items:center; gap:9px; padding:9px; border:1px solid rgba(255,255,255,0.12); border-radius:8px; background:rgba(255,255,255,0.04); color:inherit; cursor:pointer; text-align:left; }
.bm-opt:hover { background:rgba(52,152,219,0.2); }
.bm-opt.active { border-color:#3498db; background:rgba(52,152,219,0.25); }
.bm-opt small { display:block; font-size:10px; color:var(--text-dim,#9fb0bf); }
.bm-sw { width:30px; height:30px; border-radius:6px; flex:0 0 auto; border:1px solid rgba(255,255,255,0.25); background-size:cover; }
.bm-satellite { background:linear-gradient(135deg,#2e5d34,#6b8e3a,#3a6ea5); }
.bm-street { background:linear-gradient(135deg,#e8e3d8,#cfd8c5,#a7c4e0); }
.bm-white { background:#ffffff; }
.bm-black { background:#0b0f14; }

/* Review panel: bulk approve bar + select checkbox */
.review-item .rv-cb { margin-right:6px; flex:0 0 auto; }
.rv-bulkbar { display:flex; align-items:center; gap:8px; padding:6px 8px; margin-bottom:8px;
  background:rgba(52,152,219,0.12); border:1px solid rgba(52,152,219,0.35); border-radius:8px; font-size:12px; }
.rv-bulkbar .rv-bulk-all { display:flex; align-items:center; gap:6px; cursor:pointer; }
.rv-bulk-btn { background:rgba(255,255,255,0.08); color:inherit; border:none; border-radius:6px; padding:5px 11px; cursor:pointer; font-size:12px; }
.rv-bulk-go { background:#2ecc71; color:#06371d; font-weight:600; }
.rv-bulk-rej { background:transparent; border:1px solid #e74c3c; color:#e74c3c; }
.rv-bulk-rejgo { background:#e74c3c; color:#fff; font-weight:600; border-color:#e74c3c; }
.rv-bulk-btn:hover { filter:brightness(1.15); }

/* Overlapping-features picker (single click on stacked features) */
.feat-picker {
  position: absolute; z-index: 1200; min-width: 190px; max-width: 280px;
  max-height: 300px; overflow-y: auto;
  background: var(--bg-panel, #161b22); border: 1px solid var(--border, #30363d);
  border-radius: 8px; box-shadow: 0 6px 22px rgba(0,0,0,.45);
  font-size: 13px; color: var(--text-primary, #e6edf3); padding: 4px;
  direction: rtl;
}
.feat-picker-h {
  font-size: 11px; opacity: .7; padding: 4px 8px 6px; font-weight: 600;
  border-bottom: 1px solid var(--border, #30363d); margin-bottom: 4px;
}
.feat-picker-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 8px;
  border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.feat-picker-row:hover { background: var(--accent, #2d8cf0); color: #fff; }
.feat-picker-row .fp-sw {
  width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.5);
}
.feat-picker-row .fp-ln { font-weight: 600; }
.feat-picker-row .fp-gt { font-size: 11px; opacity: .75; margin-right: auto; }
.feat-picker-row:hover .fp-gt { opacity: .95; }

/* ── Selection Cart ──────────────────────────────────────────────────── */
.sel-cart {
  position: fixed; top: 90px; right: 16px; z-index: 1150; width: 320px;
  max-height: 70vh; display: none; flex-direction: column;
  background: var(--bg-panel, #161b22); border: 1px solid var(--border, #30363d);
  border-radius: 10px; box-shadow: 0 10px 34px rgba(0,0,0,.5);
  color: var(--text-primary, #e6edf3); font-size: 13px; direction: ltr;
  overflow: hidden;
}
.sc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; cursor: move; background: var(--bg-base, #0d1117);
  border-bottom: 1px solid var(--border, #30363d);
}
.sc-title { font-weight: 700; }
.sc-cnt {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-inline-start: 4px;
  font-size: 11px; text-align: center; background: var(--accent, #2d8cf0);
  color: #fff; border-radius: 9px;
}
.sc-x { background: none; border: none; color: var(--text-primary, #e6edf3); font-size: 18px; cursor: pointer; line-height: 1; }
.sc-x:hover { color: #ff6b6b; }
.sc-tabs { display: flex; gap: 4px; padding: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--border, #30363d); }
.sc-tab {
  flex: 1 1 auto; padding: 5px 6px; font-size: 12px; cursor: pointer;
  background: var(--bg-base, #0d1117); border: 1px solid var(--border, #30363d);
  color: var(--text-primary, #e6edf3); border-radius: 6px; white-space: nowrap;
}
.sc-tab.active { background: var(--accent, #2d8cf0); border-color: var(--accent, #2d8cf0); color: #fff; }
.sc-tab .sc-cnt { background: rgba(255,255,255,.25); }
.sc-list { flex: 1 1 auto; overflow-y: auto; padding: 6px; min-height: 60px; }
.sc-empty { opacity: .6; text-align: center; padding: 22px 10px; font-size: 12px; }
.sc-row {
  display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 6px;
  cursor: pointer; border: 1px solid transparent;
}
.sc-row:hover { background: var(--bg-base, #0d1117); border-color: var(--border, #30363d); }
.sc-sw { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; border: 1px solid rgba(255,255,255,.5); }
.sc-ic { font-size: 11px; opacity: .85; width: 14px; text-align: center; }
.sc-ln { font-weight: 600; }
.sc-meta { font-size: 11px; opacity: .7; margin-inline-end: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.sc-rbtn { background: none; border: none; cursor: pointer; font-size: 13px; color: var(--text-primary, #e6edf3); opacity: .7; padding: 2px 3px; }
.sc-rbtn:hover { opacity: 1; }
.sc-rbtn.sc-del:hover { color: #ff6b6b; }
.sc-ops { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px; border-top: 1px solid var(--border, #30363d); background: var(--bg-base, #0d1117); }
.sc-op {
  flex: 1 1 auto; padding: 7px 8px; font-size: 12px; cursor: pointer;
  background: var(--bg-panel, #161b22); border: 1px solid var(--border, #30363d);
  color: var(--text-primary, #e6edf3); border-radius: 6px; white-space: nowrap;
}
.sc-op:hover { border-color: var(--accent, #2d8cf0); }
.sc-op-del:hover { border-color: #ff6b6b; color: #ff6b6b; }
/* Cart coordinates report blocks */
.sel-cart-coords { z-index: 1160; min-width: 300px; }
.cc-el { padding: 8px 10px; border-bottom: 1px solid var(--border, #30363d); }
.cc-el-h { font-size: 12px; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.cc-num { display: inline-block; min-width: 18px; text-align: center; background: var(--accent, #2d8cf0); color: #fff; border-radius: 9px; font-size: 11px; padding: 0 5px; }
.cc-kind { opacity: .65; font-size: 11px; }
.cc-point { font-size: 12px; padding: 4px 0; }
.cc-area { font-size: 11px; opacity: .85; margin-bottom: 4px; }
.cc-tbl { width: 100%; font-size: 11px; }

/* ── Smart Select-similar dialog ─────────────────────────────────────── */
.ss-group { margin: 8px 0; border: 1px solid var(--border, #30363d); border-radius: 8px; overflow: hidden; }
.ss-gh {
  background: var(--bg-base, #0d1117); padding: 5px 10px; font-size: 11px; font-weight: 700;
  opacity: .85; border-bottom: 1px solid var(--border, #30363d);
}
.ss-group .vr-peer { padding: 6px 10px; }
.ss-crit { display: flex; align-items: center; gap: 7px; }
.ss-crit > span { flex: 1 1 auto; }
.ss-tol {
  width: 56px; padding: 3px 6px; font-size: 12px; text-align: center;
  background: var(--bg-base, #0d1117); border: 1px solid var(--border, #30363d);
  color: var(--text-primary, #e6edf3); border-radius: 5px;
}
.ss-crit small { opacity: .65; font-size: 10px; min-width: 34px; }
.ss-count {
  margin: 10px 0 4px; padding: 7px 10px; text-align: center; font-weight: 700; font-size: 13px;
  background: rgba(45,140,240,.14); border: 1px solid var(--accent, #2d8cf0);
  color: var(--accent, #2d8cf0); border-radius: 7px;
}
.ss-count.ss-count-zero { background: rgba(255,107,107,.12); border-color: #ff6b6b; color: #ff6b6b; }

/* Selection Cart — "Add / Remove selected" buttons (decoupled) */
.sc-addrow { display: flex; gap: 8px; margin: 8px; }
.sc-add {
  flex: 1 1 0; padding: 9px 10px; font-size: 13px; font-weight: 700; cursor: pointer;
  background: var(--accent, #2d8cf0); border: 1px solid var(--accent, #2d8cf0);
  color: #fff; border-radius: 7px; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.sc-add:hover:not(:disabled) { filter: brightness(1.1); }
.sc-add:disabled { opacity: .45; cursor: default; }
.sc-add .sc-add-n {
  min-width: 18px; padding: 0 5px; font-size: 11px; text-align: center;
  background: rgba(255,255,255,.28); border-radius: 9px;
}
.sc-add.sc-rem {
  background: transparent; color: #ff6b6b; border-color: #ff6b6b; font-weight: 600;
}
.sc-add.sc-rem:hover:not(:disabled) { background: rgba(255,107,107,.12); filter: none; }

/* Selection Cart — Actions button + dropdown menu */
.sc-actions-btn {
  margin: 0 8px 6px; padding: 8px 10px; font-size: 12px; font-weight: 700; cursor: pointer;
  background: var(--bg-base, #0d1117); border: 1px solid var(--accent, #2d8cf0);
  color: var(--accent, #2d8cf0); border-radius: 7px;
}
.sc-actions-btn:hover { background: rgba(45,140,240,.12); }
.cart-actions-menu {
  position: fixed; z-index: 1300; min-width: 230px; padding: 5px;
  background: var(--bg-panel, #161b22); border: 1px solid var(--border, #30363d);
  border-radius: 9px; box-shadow: 0 10px 30px rgba(0,0,0,.55);
  color: var(--text-primary, #e6edf3); font-size: 13px;
}
.cam-head {
  font-size: 11px; font-weight: 700; opacity: .7; padding: 5px 9px 7px;
  border-bottom: 1px solid var(--border, #30363d); margin-bottom: 4px;
}
.cam-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 8px 9px; background: none; border: none; cursor: pointer;
  color: var(--text-primary, #e6edf3); border-radius: 6px; font-size: 13px;
}
.cam-item:hover { background: var(--accent, #2d8cf0); color: #fff; }
.cam-ic { width: 18px; text-align: center; flex-shrink: 0; }
.cam-restore { color: #7ee787; }
.cam-restore:hover { background: #2ea043; color: #fff; }

/* Classify-into-layers dialog */
.fc-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.fc-row > label { min-width: 92px; font-size: 12px; opacity: .85; }
.fc-row select, .fc-row input {
  padding: 5px 8px; font-size: 13px; background: var(--bg-base, #0d1117);
  border: 1px solid var(--border, #30363d); color: var(--text-primary, #e6edf3); border-radius: 6px;
}
.fc-preview {
  margin: 10px 0; max-height: 200px; overflow-y: auto; padding: 8px;
  background: var(--bg-base, #0d1117); border: 1px solid var(--border, #30363d); border-radius: 8px; font-size: 12px;
}
.fc-pv-h { font-weight: 700; opacity: .8; margin-bottom: 6px; }
.fc-cls { display: flex; justify-content: space-between; padding: 3px 6px; border-radius: 4px; }
.fc-cls:nth-child(even) { background: rgba(255,255,255,.03); }
.fc-cls b { color: var(--accent, #2d8cf0); }
.fc-cls.fc-more { opacity: .6; justify-content: center; }
.fc-warn { color: #e3b341; font-size: 11px; margin-bottom: 6px; }

/* Selection Cart — header buttons + highlight toggle */
.sc-head-btns { display: flex; align-items: center; gap: 4px; }
.sc-hl {
  background: none; border: 1px solid var(--border, #30363d); color: var(--text-primary, #e6edf3);
  width: 26px; height: 24px; border-radius: 6px; cursor: pointer; font-size: 14px; line-height: 1;
}
.sc-hl:hover { border-color: #ffcd00; color: #ffcd00; }
.sc-hl.active { background: rgba(255,205,0,.16); border-color: #ffcd00; color: #ffcd00; }

/* Cart actions menu — sections, scroll, danger item */
.cart-actions-menu { max-height: 70vh; overflow-y: auto; }
.cam-sec {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  opacity: .5; padding: 8px 9px 3px;
}
.cam-danger { color: #ff6b6b; }
.cam-danger:hover { background: #c93030; color: #fff; }

/* Coordinate-label tool (Measure ▸ Coordinate label) */
/* Coordinate label: a 0-size anchor at the exact point + a draggable box */
.coord-label-wrap { position: absolute; width: 0; height: 0; pointer-events: none; }
.coord-label-wrap .cl-leader-svg {
  position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none;
}
.coord-label-wrap .cl-leader-svg line { stroke: var(--accent, #2d8cf0); stroke-width: 1.5; }
/* Dot sitting exactly on the clicked/snapped point */
.coord-label-wrap .cl-dot {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent, #2d8cf0); border: 1.5px solid #fff; box-shadow: 0 0 4px rgba(0,0,0,.5);
  pointer-events: none;
}
.coord-label-wrap .cl-box {
  position: absolute; pointer-events: auto; cursor: move;
  display: flex; align-items: center; gap: 6px;
  background: rgba(13,17,23,.92); border: 1px solid var(--accent, #2d8cf0);
  color: #e6edf3; font-size: 11px; line-height: 1.25; font-variant-numeric: tabular-nums;
  padding: 4px 6px; border-radius: 6px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.45);
  user-select: none;
}
.coord-label-wrap .cl-box.dragging { box-shadow: 0 4px 14px rgba(0,0,0,.6); }
.coord-label-wrap .cl-txt { font-weight: 600; }
.coord-label-wrap .cl-x {
  background: none; border: none; color: #8b98a5; cursor: pointer; font-size: 13px;
  line-height: 1; padding: 0 1px; margin-left: 2px;
}
.coord-label-wrap .cl-x:hover { color: #ff6b6b; }

/* Layer row — ⋯ actions kebab menu */
.layer-more-wrap { position: relative; flex-shrink: 0; }
.layer-more-btn {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 2px 5px; border-radius: 5px;
}
.layer-more-btn:hover { background: var(--bg-hover, rgba(255,255,255,.08)); color: var(--text-primary); }
.layer-more-menu {
  position: absolute; right: 0; top: calc(100% + 2px); z-index: 320;
  background: var(--bg-panel); border: 1px solid var(--border-light, var(--border));
  border-radius: var(--radius-sm, 6px); box-shadow: var(--shadow, 0 8px 26px rgba(0,0,0,.5));
  min-width: 190px; max-height: 360px; overflow-y: auto; padding: 4px;
}
.layer-more-menu .lmenu-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 7px 9px; background: none; border: none; cursor: pointer;
  color: var(--text-primary); font-size: 12px; font-family: inherit; border-radius: 5px;
}
.layer-more-menu .lmenu-item:hover { background: var(--accent, #2d8cf0); color: #fff; }
.layer-more-menu .lmenu-ic { width: 16px; text-align: center; flex-shrink: 0; }
.layer-more-menu .lmenu-danger { color: #ff6b6b; }
.layer-more-menu .lmenu-danger:hover { background: #c93030; color: #fff; }
.layer-more-menu .lmenu-head {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  opacity: .5; padding: 6px 9px 2px;
}
.layer-more-menu .lmenu-sep { height: 1px; background: var(--border); margin: 4px 2px; }
.layer-more-menu .lmenu-grp {
  display: flex; align-items: center; gap: 7px; padding: 6px 9px; font-size: 12px;
  color: var(--text-primary); cursor: pointer; border-radius: 5px;
}
.layer-more-menu .lmenu-grp:hover { background: var(--bg-hover, rgba(255,255,255,.06)); }
.layer-more-menu .grp-chk-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.layer-more-menu .grp-no-groups { font-size: 11px; opacity: .55; padding: 4px 9px; }

/* Layer ⋯ actions — body-level popup (fixed, never clipped) */
.layer-menu-popup {
  position: fixed; z-index: 4000; min-width: 200px; max-height: 70vh; overflow-y: auto;
  background: var(--bg-panel, #161b22); border: 1px solid var(--border, #30363d);
  border-radius: 9px; box-shadow: 0 10px 30px rgba(0,0,0,.55); padding: 5px;
  color: var(--text-primary, #e6edf3); font-size: 12px;
}
.layer-menu-popup .lmp-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 8px 9px; background: none; border: none; cursor: pointer;
  color: var(--text-primary, #e6edf3); font-size: 12px; font-family: inherit; border-radius: 6px;
}
.layer-menu-popup .lmp-item:hover { background: var(--accent, #2d8cf0); color: #fff; }
.layer-menu-popup .lmp-ic { width: 16px; text-align: center; flex-shrink: 0; }
.layer-menu-popup .lmp-danger { color: #ff6b6b; }
.layer-menu-popup .lmp-danger:hover { background: #c93030; color: #fff; }
/* L6.6-D: a context entry the role may not use is shown greyed, not dropped
   (design §8.5) — the handler behind it still asks requirePerm. */
.layer-menu-popup .lmp-item.lmp-disabled,
.layer-menu-popup .lmp-item[disabled] { opacity: .45; cursor: not-allowed; }
.layer-menu-popup .lmp-item.lmp-disabled:hover,
.layer-menu-popup .lmp-item[disabled]:hover { background: none; color: var(--text-primary, #e6edf3); }
.layer-menu-popup .lmp-head {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  opacity: .5; padding: 6px 9px 2px;
}
.layer-menu-popup .lmp-sep { height: 1px; background: var(--border, #30363d); margin: 4px 2px; }
.layer-menu-popup .lmp-grp {
  display: flex; align-items: center; gap: 7px; padding: 6px 9px; cursor: pointer; border-radius: 6px;
}
.layer-menu-popup .lmp-grp:hover { background: var(--bg-hover, rgba(255,255,255,.06)); }
.layer-menu-popup .grp-chk-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.layer-menu-popup .lmp-empty { font-size: 11px; opacity: .55; padding: 4px 9px; }

/* ── Presence: online users + status ─────────────────────────────────── */
.pres-fab {
  position: fixed; right: 16px; bottom: 92px; z-index: 1140;
  display: flex; align-items: center; gap: 4px; padding: 8px 11px;
  background: var(--bg-panel, #161b22); border: 1px solid var(--border, #30363d);
  color: var(--text-primary, #e6edf3); border-radius: 22px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.4); font-size: 14px;
}
.pres-fab:hover { border-color: var(--accent, #2d8cf0); }
.pres-fab-dot { width: 9px; height: 9px; border-radius: 50%; background: #2ecc71; border: 1.5px solid #fff; }
.pres-count {
  min-width: 18px; padding: 0 5px; font-size: 11px; font-weight: 700; text-align: center;
  background: var(--accent, #2d8cf0); color: #fff; border-radius: 9px;
}
.pres-panel {
  position: fixed; right: 16px; bottom: 134px; z-index: 1141; width: 290px; max-height: 60vh;
  display: none; flex-direction: column;
  background: var(--bg-panel, #161b22); border: 1px solid var(--border, #30363d);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.5);
  color: var(--text-primary, #e6edf3); overflow: hidden;
}
.pres-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; background: var(--bg-base, #0d1117); border-bottom: 1px solid var(--border, #30363d); font-size: 13px;
}
.pres-x { background: none; border: none; color: var(--text-primary, #e6edf3); font-size: 18px; cursor: pointer; line-height: 1; }
.pres-x:hover { color: #ff6b6b; }
.pres-mystatus { padding: 8px 10px; border-bottom: 1px solid var(--border, #30363d); }
.pres-my-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; opacity: .55; }
.pres-status-opts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.pres-status-opt {
  display: flex; align-items: center; gap: 5px; padding: 5px 8px; font-size: 12px; cursor: pointer;
  background: var(--bg-base, #0d1117); border: 1px solid var(--border, #30363d);
  color: var(--text-primary, #e6edf3); border-radius: 14px;
}
.pres-status-opt.active { border-color: var(--accent, #2d8cf0); background: rgba(45,140,240,.14); }
.pres-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.pres-list { flex: 1 1 auto; overflow-y: auto; padding: 4px; }
.pres-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 13px; }
.pres-row:hover { background: var(--bg-base, #0d1117); }
.pres-av { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
           font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; }
.pres-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pres-dept { font-size: 10px; opacity: .6; margin-inline-start: auto; white-space: nowrap; }
.pres-st { font-size: 10px; opacity: .7; margin-inline-start: 6px; }
.pres-empty { opacity: .55; text-align: center; padding: 18px; font-size: 12px; }

/* Presence panel — tabs + general chat */
.pres-tabs { display: flex; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--border, #30363d); }
.pres-tab {
  flex: 1; padding: 6px 8px; font-size: 12px; cursor: pointer; border-radius: 6px;
  background: var(--bg-base, #0d1117); border: 1px solid var(--border, #30363d); color: var(--text-primary, #e6edf3);
}
.pres-tab.active { background: var(--accent, #2d8cf0); border-color: var(--accent, #2d8cf0); color: #fff; }
.pchat-list { flex: 1 1 auto; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 5px; min-height: 180px; max-height: 40vh; direction: rtl; }
.pchat-msg { display: flex; flex-direction: column; max-width: 85%; align-self: flex-start; background: var(--bg-base, #0d1117); border: 1px solid var(--border, #30363d); border-radius: 9px; padding: 5px 9px; }
.pchat-msg.mine { align-self: flex-end; background: rgba(45,140,240,.16); border-color: var(--accent, #2d8cf0); }
.pchat-who { font-size: 10px; font-weight: 700; opacity: .9; }
.pchat-txt { font-size: 13px; word-break: break-word; }
.pchat-compose { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--border, #30363d); }
.pchat-input { flex: 1; padding: 8px 10px; font-size: 13px; background: var(--bg-base, #0d1117); border: 1px solid var(--border, #30363d); color: var(--text-primary, #e6edf3); border-radius: 16px; direction: rtl; }
.pchat-input:focus { outline: none; border-color: var(--accent, #2d8cf0); }
.pchat-send { width: 34px; height: 34px; flex-shrink: 0; border: none; border-radius: 50%; background: var(--accent, #2d8cf0); color: #fff; cursor: pointer; font-size: 14px; }
.pchat-send:hover { filter: brightness(1.1); }

/* Chat room selector bar */
.pchat-bar { display: flex; gap: 6px; padding: 7px 8px; border-bottom: 1px solid var(--border, #30363d); }
.pchat-rooms {
  flex: 1; padding: 6px 8px; font-size: 12px; border-radius: 6px; direction: rtl;
  background: var(--bg-base, #0d1117); border: 1px solid var(--border, #30363d); color: var(--text-primary, #e6edf3);
}
.pchat-newroom {
  width: 32px; flex-shrink: 0; border: 1px solid var(--accent, #2d8cf0); background: rgba(45,140,240,.14);
  color: var(--accent, #2d8cf0); border-radius: 6px; cursor: pointer; font-size: 16px; font-weight: 700;
}
.pchat-newroom:hover { background: var(--accent, #2d8cf0); color: #fff; }

/* Chat create-room — member picker (WhatsApp-style) */
.crm-count { background: var(--accent, #2d8cf0); color: #fff; border-radius: 9px; font-size: 10px; padding: 1px 6px; }
.crm-userlist { max-height: 230px; overflow-y: auto; border: 1px solid var(--border, #30363d); border-radius: 8px; padding: 4px; direction: rtl; }
.crm-user { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.crm-user:hover { background: var(--bg-base, #0d1117); }
.crm-user .crm-uname { font-weight: 600; }
.crm-user small { opacity: .6; font-size: 10px; margin-inline-start: auto; }

/* Chat attachments + compose tools */
.pchat-compose { flex-wrap: wrap; }
.pchat-tool {
  width: 32px; height: 32px; flex-shrink: 0; border: 1px solid var(--border, #30363d);
  background: var(--bg-base, #0d1117); color: var(--text-primary, #e6edf3); border-radius: 50%;
  cursor: pointer; font-size: 14px;
}
.pchat-tool:hover { border-color: var(--accent, #2d8cf0); }
.pchat-tool.recording { background: #e74c3c; border-color: #e74c3c; color: #fff; animation: chatRecPulse 1s infinite; }
@keyframes chatRecPulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
.pchat-img { max-width: 180px; max-height: 180px; border-radius: 8px; cursor: pointer; margin-top: 3px; }
.pchat-audio { max-width: 200px; height: 34px; margin-top: 3px; }
.pchat-fileatt { color: var(--accent, #2d8cf0); text-decoration: none; font-size: 13px; }
.pchat-fileatt:hover { text-decoration: underline; }
.pchat-loc {
  margin-top: 3px; padding: 6px 10px; font-size: 12px; cursor: pointer; text-align: right;
  background: rgba(46,204,113,.14); border: 1px solid #2ecc71; color: #2ecc71; border-radius: 8px;
}
.pchat-loc:hover { background: rgba(46,204,113,.25); }

/* Chat video message (screen recording) */
.pchat-video { max-width: 220px; max-height: 180px; border-radius: 8px; margin-top: 3px; background: #000; }

/* Chat voice-call button */
.pchat-call { border-color: #2ecc71 !important; color: #2ecc71 !important; }
.pchat-call:hover { background: rgba(46,204,113,.15) !important; }

/* Presence panel — minimize / maximize */
.pres-head-btns { display: flex; align-items: center; gap: 2px; }
.pres-panel.pres-max { width: min(840px, 94vw); height: 84vh; max-height: 84vh; bottom: 16px; right: 16px; }
.pres-panel.pres-min { height: auto !important; }
.pres-panel.pres-min .pres-tabs, .pres-panel.pres-min .pres-mystatus, .pres-panel.pres-min .pres-list,
.pres-panel.pres-min .pchat-bar, .pres-panel.pres-min .pchat-list, .pres-panel.pres-min .pchat-compose { display: none !important; }
.pres-head { cursor: move; }

/* Live broadcast button + viewer panel */
.pchat-live.on { background: #e74c3c !important; border-color: #e74c3c !important; animation: chatRecPulse 1s infinite; }
.vr-bcast {
  position: fixed; right: 16px; bottom: 16px; z-index: 2200; width: 380px; max-width: 90vw;
  background: #000; border: 1px solid #e74c3c; border-radius: 10px; box-shadow: 0 10px 34px rgba(0,0,0,.6); overflow: hidden;
}
.vr-bcast-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; background: #1b1b1b; color: #fff; font-size: 12px; cursor: move; }
.vr-bcast-x { background: none; border: none; color: #fff; font-size: 16px; cursor: pointer; }
.vr-bcast-x:hover { color: #ff6b6b; }
.vr-bcast video { width: 100%; max-height: 60vh; display: block; background: #000; }

/* Per-online-user DM / call buttons */
.pres-row { position: relative; }
.pres-dmbtn {
  width: 26px; height: 24px; flex-shrink: 0; border: 1px solid var(--border, #30363d);
  background: var(--bg-panel, #161b22); color: var(--text-primary, #e6edf3); border-radius: 6px;
  cursor: pointer; font-size: 12px; margin-inline-start: 3px;
}
.pres-dmbtn:hover { border-color: var(--accent, #2d8cf0); }
.pres-dmcall:hover { border-color: #2ecc71; }

/* ===== Chat/presence panel — professional polish ===== */
.pres-panel { width: 340px; height: 560px; max-height: 84vh; }
.pres-panel.pres-min { height: auto !important; }

/* Message list fills available height (fixes the empty gap when maximized) */
.pchat-list { flex: 1 1 auto !important; min-height: 120px; max-height: none !important; padding: 10px 10px 4px; gap: 8px; }

/* Message rows with avatars */
.pchat-row { display: flex; align-items: flex-end; gap: 7px; max-width: 100%; }
.pchat-row.mine { flex-direction: row-reverse; }
.pchat-av {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 700; color: #fff;
}
.pchat-msg {
  max-width: 78%; align-self: flex-start; background: var(--bg-base, #0d1117);
  border: 1px solid var(--border, #30363d); border-radius: 12px 12px 12px 4px; padding: 6px 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.pchat-msg.mine { background: linear-gradient(135deg, #2d8cf0, #2575d6); border-color: transparent; color: #fff; border-radius: 12px 12px 4px 12px; }
.pchat-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.pchat-who { font-size: 10px; font-weight: 700; }
.pchat-time { font-size: 9px; opacity: .55; margin-inline-start: auto; }
.pchat-msg.mine .pchat-time { color: #dbeaff; opacity: .8; }

/* Compose: tighter, modern */
.pchat-compose { gap: 4px; padding: 8px 10px; align-items: center; }
.pchat-tool { width: 30px; height: 30px; font-size: 13px; }
.pchat-input { padding: 9px 12px; border-radius: 18px; }
.pchat-send { width: 36px; height: 36px; }

/* Tabs + room bar refinements */
.pres-tabs { padding: 8px 10px; }
.pchat-bar { padding: 8px 10px; }
.pchat-rooms { padding: 7px 9px; border-radius: 8px; }
.pchat-newroom { width: 34px; height: 34px; border-radius: 8px; }

/* Inline voice-call bar (call merged into the chat window) */
.pchat-voicebar {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; margin: 0 10px 6px;
  background: rgba(46,204,113,.12); border: 1px solid #2ecc71; border-radius: 10px; font-size: 12px;
}
.pcv-live { display: flex; align-items: center; gap: 6px; color: #2ecc71; font-weight: 700; white-space: nowrap; }
.pcv-pulse { width: 9px; height: 9px; border-radius: 50%; background: #2ecc71; animation: chatRecPulse 1.2s infinite; }
.pcv-label { flex: 1; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcv-btn { width: 30px; height: 28px; border: 1px solid var(--border, #30363d); background: var(--bg-base, #0d1117); color: var(--text-primary, #e6edf3); border-radius: 7px; cursor: pointer; }
.pcv-btn.pcv-leave { border-color: #e74c3c; color: #e74c3c; }
.pcv-btn.pcv-leave:hover { background: #e74c3c; color: #fff; }
.pchat-call.on { background: #2ecc71 !important; border-color: #2ecc71 !important; color: #fff !important; }

/* Incoming-call popup + notification cue */
.call-popup {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 5000;
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: var(--bg-panel, #161b22); border: 1px solid #2ecc71; border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.55); color: var(--text-primary, #e6edf3);
  animation: cpIn .25s ease;
}
@keyframes cpIn { from { transform: translateX(-50%) translateY(-20px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }
.call-popup .cp-ico { font-size: 26px; animation: chatRecPulse 1s infinite; }
.call-popup .cp-title { font-weight: 700; font-size: 14px; }
.call-popup .cp-sub { font-size: 12px; opacity: .75; }
.call-popup .cp-join { background: #2ecc71; color: #06371d; border: none; border-radius: 18px; padding: 8px 16px; font-weight: 700; cursor: pointer; }
.call-popup .cp-join:hover { filter: brightness(1.08); }
.call-popup .cp-x { background: none; border: none; color: #8b98a5; font-size: 16px; cursor: pointer; }
.call-popup .cp-x:hover { color: #ff6b6b; }
.pres-fab.pres-fab-alert { animation: cpIn .3s, chatRecPulse 1s infinite; border-color: #e74c3c !important; }

/* ===== User profile (self edit + view) ===== */
.user-chip-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.user-chip-avatar { overflow: hidden; }
.pres-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.pres-viewpf { cursor: pointer; }

.pf-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pf-avatar { position: relative; width: 64px; height: 64px; border-radius: 50%; cursor: pointer; flex-shrink: 0;
  background: var(--bg-base, #0d1117); border: 2px solid var(--accent, #2d8cf0); overflow: hidden;
  display: flex; align-items: center; justify-content: center; }
.pf-avatar.pf-avatar-lg { width: 90px; height: 90px; margin: 0 auto 10px; }
.pf-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.pf-avatar-initial { font-size: 26px; font-weight: 700; color: var(--text-primary, #e6edf3); }
.pf-avatar-cam { position: absolute; right: -2px; bottom: -2px; background: var(--accent, #2d8cf0); color: #fff;
  width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; }
.pf-avatar-lg .pf-avatar-cam { display: none; }
.pf-uname { font-weight: 700; }
.pf-role { font-size: 12px; opacity: .65; }
textarea.ue-input { resize: vertical; font-family: inherit; }
.pf-vname { font-size: 17px; font-weight: 700; }
.pf-vrole { font-size: 12px; opacity: .65; margin-bottom: 12px; }
.pf-vlist { text-align: right; direction: rtl; }
.pf-vrow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 13px; }
.pf-vbio { padding: 8px; margin-top: 6px; background: var(--bg-base, #0d1117); border-radius: 8px; font-size: 13px; opacity: .9; }

/* ===== Chat: conversation list + room header + notif badge ===== */
.pchat-convlist { flex: 1 1 auto; overflow-y: auto; padding: 6px; direction: rtl; }
.pcl-sec { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .5; padding: 8px 8px 3px; }
.pcl-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: right; padding: 10px 10px;
  background: none; border: none; border-bottom: 1px solid var(--border, #30363d); cursor: pointer;
  color: var(--text-primary, #e6edf3); font-size: 13px;
}
.pcl-item:hover { background: var(--bg-base, #0d1117); }
.pcl-ic { width: 26px; height: 26px; border-radius: 50%; background: var(--bg-base, #0d1117);
  display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.pcl-name { font-weight: 600; }
.pcl-create { margin: 10px 8px; padding: 9px; width: calc(100% - 16px); background: rgba(45,140,240,.14);
  border: 1px solid var(--accent, #2d8cf0); color: var(--accent, #2d8cf0); border-radius: 8px; cursor: pointer; font-weight: 700; }
.pcl-create:hover { background: var(--accent, #2d8cf0); color: #fff; }

.pchat-back { width: 34px; height: 34px; border: 1px solid var(--border, #30363d); background: var(--bg-base, #0d1117);
  color: var(--text-primary, #e6edf3); border-radius: 8px; cursor: pointer; font-size: 16px; }
.pchat-back:hover { border-color: var(--accent, #2d8cf0); }
.pchat-roomtitle { flex: 1; font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; }

.pres-notif {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
  background: #e74c3c; color: #fff; border-radius: 9px; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-panel, #161b22);
}
/* NOTE: the FAB must stay position:fixed (bottom-right). `fixed` is itself a
   containing block, so the absolute notif badge anchors to it correctly. */

/* Old "Rooms" launcher is superseded by the new presence chat (👥) — hide it
   so it no longer overlaps the layers panel. */
.vr-fab { display: none !important; }

/* Per-sender unread DM badge on the 💬 button in the online list */
.pres-dmbtn { position: relative; }
.pres-dmbadge {
  position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px;
  background: #e74c3c; color: #fff; border-radius: 8px; font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--bg-panel, #161b22);
}

/* Calls tab — log rows + tab badge */
.pres-tab { position: relative; }
.pres-tabbadge { position: absolute; top: 2px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px;
  background: #e74c3c; color: #fff; border-radius: 8px; font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.pcall-row .pcall-ic { width: 24px; text-align: center; font-size: 14px; }
.pcall-row .pcall-meta { font-size: 10px; opacity: .6; margin-inline-start: auto; white-space: nowrap; }
.pcall-row.missed .pres-name { color: #ff6b6b; }
.pcall-row.missed .pcall-meta { color: #ff6b6b; opacity: .85; }

/* Legacy room panel retired — calls & chat are merged into the presence window */
.room-panel { display: none !important; }

/* Conversation delete (user-controlled) */
.pcl-del { margin-inline-start: auto; color: #8b98a5; font-size: 12px; padding: 2px 6px; border-radius: 5px; }
.pcl-del:hover { color: #fff; background: #c93030; }

/* Screenshot crop overlay + preview */
.shot-overlay { position: fixed; z-index: 6000; cursor: crosshair; background: rgba(0,0,0,0.25); touch-action: none; }
.shot-hint {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(13,17,23,0.92); color: #fff; font-size: 13px; font-weight: 700;
  padding: 8px 16px; border-radius: 18px; border: 1px solid var(--accent, #2d8cf0); pointer-events: none;
}
.shot-rect { position: absolute; border: 2px dashed #2d8cf0; background: rgba(45,140,240,0.12); box-shadow: 0 0 0 9999px rgba(0,0,0,0.35); pointer-events: none; }
.shot-previmg { display: block; max-width: 100%; max-height: 50vh; margin: 0 auto; border: 1px solid var(--border, #30363d); border-radius: 8px; background: #000; }

/* ===== Presence/chat window — tidier chrome ===== */
.pres-head { padding: 10px 12px; font-size: 13.5px; font-weight: 700; background: linear-gradient(180deg, var(--bg-base, #0d1117), rgba(13,17,23,0.7)); }
.pres-head-btns { gap: 4px; }
.pres-head-btns .pres-x {
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; border-radius: 7px; border: 1px solid transparent; opacity: .8;
}
.pres-head-btns .pres-x:hover { opacity: 1; background: rgba(255,255,255,.08); border-color: var(--border, #30363d); color: var(--text-primary, #e6edf3); }
.pres-head-btns #presClose:hover { background: #c93030; border-color: #c93030; color: #fff; }
.pres-tabs { gap: 6px; }
.pres-tab { padding: 8px 6px; font-size: 12.5px; font-weight: 600; }

/* Workplace path + search */
.pres-info { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; }
.pres-info .pres-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pres-info .pres-dept { font-size: 9.5px; opacity: .6; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pres-searchwrap { padding: 8px 10px 2px; }
.pres-search {
  width: 100%; padding: 8px 12px; font-size: 12.5px; border-radius: 16px; direction: rtl;
  background: var(--bg-base, #0d1117); border: 1px solid var(--border, #30363d); color: var(--text-primary, #e6edf3);
}
.pres-search:focus { outline: none; border-color: var(--accent, #2d8cf0); }

/* Message ⋯ menu button (appears on hover) */
.pchat-mmenu {
  background: none; border: none; color: inherit; opacity: 0; cursor: pointer;
  font-size: 13px; line-height: 1; padding: 0 3px; border-radius: 4px; transition: opacity .12s;
}
.pchat-msg:hover .pchat-mmenu { opacity: .75; }
.pchat-mmenu:hover { opacity: 1 !important; background: rgba(255,255,255,.15); }

/* Message extras: pin bar, pinned bubble, notes, edited, jump flash */
.pchat-pinbar {
  display: block; width: calc(100% - 20px); margin: 4px 10px 0; padding: 7px 10px; text-align: right;
  background: rgba(241,196,15,.12); border: 1px solid #f1c40f; color: var(--text-primary, #e6edf3);
  border-radius: 8px; font-size: 12px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  direction: rtl;
}
.pchat-pinbar:hover { background: rgba(241,196,15,.22); }
.pchat-pincount { background: #f1c40f; color: #4d3b00; border-radius: 8px; padding: 0 6px; font-size: 10px; font-weight: 700; }
.pchat-msg.pinned { border-color: #f1c40f; }
.pchat-pin { font-size: 10px; }
.pchat-note {
  margin-top: 5px; padding: 4px 8px; font-size: 11px; border-radius: 7px;
  background: rgba(241,196,15,.12); border-right: 3px solid #f1c40f; direction: rtl;
}
.pchat-msg.mine .pchat-note { background: rgba(255,255,255,.16); border-right-color: #fff; }
.pchat-row.pchat-jump .pchat-msg { box-shadow: 0 0 0 3px #f1c40f; transition: box-shadow .3s; }

/* Reply (quote) — compose bar + quoted block inside bubbles */
.pchat-replybar {
  display: flex; align-items: center; gap: 6px; margin: 4px 10px 0; padding: 7px 10px;
  background: rgba(45,140,240,.12); border: 1px solid var(--accent, #2d8cf0); border-radius: 8px;
  font-size: 12px; direction: rtl;
}
.pchat-replybar .pcr-txt { flex: 1; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pchat-replybar .pcr-x { background: none; border: none; color: #8b98a5; cursor: pointer; font-size: 13px; }
.pchat-replybar .pcr-x:hover { color: #ff6b6b; }
.pchat-quote {
  display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: right; cursor: pointer;
  margin-bottom: 4px; padding: 4px 8px; border: none; border-right: 3px solid var(--accent, #2d8cf0);
  background: rgba(0,0,0,.25); border-radius: 6px; color: inherit; font-size: 11px; direction: rtl;
}
.pchat-quote b { color: var(--accent, #2d8cf0); font-size: 10px; }
.pchat-quote span { opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pchat-msg.mine .pchat-quote { background: rgba(255,255,255,.18); border-right-color: #fff; }
.pchat-msg.mine .pchat-quote b { color: #eaf4ff; }

/* Live broadcast viewer — maximize / fullscreen */
.vr-bcast-btns { display: flex; align-items: center; gap: 2px; }
.vr-bcast-btns .vr-bcast-x { width: 26px; height: 24px; font-size: 13px; border-radius: 6px; }
.vr-bcast-btns .vr-bcast-x:hover { background: rgba(255,255,255,.14); color: #fff; }
.vr-bcast-btns #vrBcastClose:hover { background: #c93030; }
.vr-bcast.max {
  width: min(94vw, 1500px); max-width: 94vw;
  left: 50% !important; right: auto !important; top: 4vh !important; bottom: auto !important;
  transform: translateX(-50%);
}
.vr-bcast.max video { max-height: 86vh; }

/* Live location — map marker + sharers bar */
.live-loc-mark { display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; }
.live-loc-mark .llm-pulse {
  width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid #fff;
  box-shadow: 0 0 0 0 rgba(231,76,60,.6); animation: llmPulse 1.6s infinite;
}
@keyframes llmPulse { 0% { box-shadow: 0 0 0 0 rgba(231,76,60,.55); } 70% { box-shadow: 0 0 0 14px rgba(231,76,60,0); } 100% { box-shadow: 0 0 0 0 rgba(231,76,60,0); } }
.live-loc-mark .llm-name {
  background: rgba(13,17,23,.92); color: #fff; font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 9px; border: 1px solid #e74c3c; white-space: nowrap;
}
.pchat-livebar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 10px 0; padding: 6px 10px;
  background: rgba(231,76,60,.1); border: 1px solid #e74c3c; border-radius: 8px; font-size: 12px; direction: rtl;
}
.pcl-live-me { color: #e74c3c; font-weight: 700; }
.pcl-live-go {
  padding: 4px 10px; font-size: 11.5px; cursor: pointer; border-radius: 12px;
  background: var(--bg-base, #0d1117); border: 1px solid #e74c3c; color: var(--text-primary, #e6edf3);
}
.pcl-live-go:hover { background: #e74c3c; color: #fff; }

/* Individual features inside a group (group holds layers AND elements) */
.grp-feat-row {
  display: flex; align-items: center; gap: 7px; padding: 5px 8px 5px 26px;
  font-size: 11.5px; color: var(--text-primary, #e6edf3); border-radius: 6px;
}
.grp-feat-row:hover { background: var(--bg-hover, rgba(255,255,255,.05)); }
.grp-feat-row .gfr-ic { font-size: 9px; opacity: .8; width: 13px; text-align: center; }
.grp-feat-row .gfr-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.grp-feat-row .gfr-layer { opacity: .5; font-size: 9.5px; margin-inline-start: auto; white-space: nowrap; }
.grp-feat-row button {
  background: none; border: none; color: var(--text-muted, #8b98a5); cursor: pointer;
  font-size: 12px; padding: 1px 4px; border-radius: 4px;
}
.grp-feat-row button:hover { color: var(--text-primary, #e6edf3); background: rgba(255,255,255,.08); }
.grp-feat-row .gfr-x:hover { color: #ff6b6b; }

/* Group ⋯ actions button */
.group-more-btn {
  background: none; border: none; color: var(--text-muted, #8b98a5); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 2px 5px; border-radius: 5px; flex-shrink: 0;
}
.group-more-btn:hover { background: var(--bg-hover, rgba(255,255,255,.08)); color: var(--text-primary, #e6edf3); }

/* Upload/Download sync report */
.sr-meta { display: flex; flex-direction: column; gap: 4px; font-size: 13px; padding: 8px 10px; margin-bottom: 8px;
  background: var(--bg-base, #0d1117); border: 1px solid var(--border, #30363d); border-radius: 8px; direction: rtl; }
.sr-list { max-height: 320px; overflow-y: auto; direction: rtl; }
.sr-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-bottom: 1px solid var(--border, #30363d); font-size: 13px; }
.sr-row .sr-name { font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-row .sr-cnt { font-size: 11px; opacity: .65; white-space: nowrap; }
.sr-row .sr-fly { background: none; border: 1px solid var(--accent, #2d8cf0); color: var(--accent, #2d8cf0); border-radius: 6px; cursor: pointer; padding: 2px 7px; font-size: 12px; }
.sr-row .sr-fly:hover { background: var(--accent, #2d8cf0); color: #fff; }
.sr-row.sr-del { color: #ff6b6b; }
.sr-sec { font-size: 11px; font-weight: 700; opacity: .6; padding: 8px 8px 2px; text-transform: uppercase; }

/* Nested groups (tree) — indent sub-groups under their parent */
.group-children .group-block {
  margin-inline-start: 10px;
  border-inline-start: 2px solid var(--border, #30363d);
  padding-inline-start: 4px; margin-top: 4px;
}
.group-children .group-block:hover { border-inline-start-color: var(--accent, #2d8cf0); }

/* Activity dashboard */
.act-dash-btn { position: relative; background: none; border: none; cursor: pointer; font-size: 17px; padding: 4px 7px; border-radius: 7px; }
.act-dash-btn:hover { background: rgba(255,255,255,.08); }
.act-badge { position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; background: #e74c3c; color: #fff;
  border-radius: 8px; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.act-panel { position: fixed; top: 56px; right: 16px; z-index: 1500; width: 360px; max-height: 78vh; display: none; flex-direction: column;
  background: var(--bg-panel, #161b22); border: 1px solid var(--border, #30363d); border-radius: 10px; box-shadow: 0 12px 36px rgba(0,0,0,.5);
  color: var(--text-primary, #e6edf3); overflow: hidden; direction: rtl; }
.act-bar { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; background: var(--bg-base, #0d1117);
  border-bottom: 1px solid var(--border, #30363d); font-weight: 700; font-size: 13px; }
.act-bar-btns { display: flex; gap: 2px; }
.act-x { background: none; border: none; color: var(--text-primary, #e6edf3); cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 5px; }
.act-x:hover { background: rgba(255,255,255,.1); }
.act-list { flex: 1 1 auto; overflow-y: auto; padding: 6px; }
.act-entry { border: 1px solid var(--border, #30363d); border-radius: 8px; margin-bottom: 6px; overflow: hidden; }
.act-entry.up { border-inline-start: 3px solid #2ecc71; }
.act-entry.down { border-inline-start: 3px solid #2d8cf0; }
.act-head { display: flex; align-items: center; gap: 7px; padding: 7px 9px; font-size: 12.5px; background: var(--bg-base, #0d1117); }
.act-head .act-title { font-weight: 700; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-head .act-cnt { font-size: 10px; opacity: .6; white-space: nowrap; }
.act-head .act-time { font-size: 10px; opacity: .5; white-space: nowrap; }
.act-layers { padding: 2px 8px 6px; }
.act-layer { display: flex; align-items: center; gap: 8px; padding: 4px 4px; font-size: 12px; border-top: 1px dashed var(--border, #30363d); }
.act-layer span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-layer small { opacity: .6; font-size: 10px; }
.act-layer.act-del { color: #ff6b6b; }
.act-fly { background: none; border: 1px solid var(--accent, #2d8cf0); color: var(--accent, #2d8cf0); border-radius: 5px; cursor: pointer; padding: 1px 6px; font-size: 11px; }
.act-fly:hover { background: var(--accent, #2d8cf0); color: #fff; }
.act-empty { opacity: .55; text-align: center; font-size: 12px; }

/* Activity dashboard — Upload / Download tabs */
.act-tabs { display: flex; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--border, #30363d); }
.act-tab { flex: 1; padding: 7px 6px; font-size: 12px; font-weight: 600; cursor: pointer; border-radius: 6px;
  background: var(--bg-base, #0d1117); border: 1px solid var(--border, #30363d); color: var(--text-primary, #e6edf3); }
.act-tab b { font-size: 10px; background: var(--accent, #2d8cf0); color: #fff; border-radius: 8px; padding: 0 5px; }
.act-tab.active[data-tab="upload"] { background: #2ecc71; border-color: #2ecc71; color: #06371d; }
.act-tab.active[data-tab="download"] { background: #2d8cf0; border-color: #2d8cf0; color: #fff; }
.act-tab.active b { background: rgba(0,0,0,.25); }

/* Activity dashboard — approval history */
.act-sec-h { font-size: 11px; font-weight: 700; opacity: .55; padding: 8px 6px 4px; }
.act-aud { border: 1px solid var(--border, #30363d); border-radius: 8px; margin-bottom: 6px; padding: 7px 9px; }
.act-aud.ok { border-inline-start: 3px solid #2ecc71; }
.act-aud.no { border-inline-start: 3px solid #e74c3c; }
.act-aud-line { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.act-aud-kind { font-weight: 700; white-space: nowrap; }
.act-aud-layer { opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-aud-meta { font-size: 11px; opacity: .75; margin-top: 3px; }
.act-aud-note { font-size: 11px; margin-top: 3px; padding: 3px 6px; background: var(--bg-base, #0d1117); border-radius: 6px; }

/* In-chat photo editor (camera capture → annotate → send) */
.photo-editor { position: fixed; inset: 0; z-index: 6000; background: rgba(0,0,0,0.92); display: flex; flex-direction: column; }
.pe-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: #11161d; border-bottom: 1px solid #30363d; }
.pe-btn { width: 38px; height: 36px; border: 1px solid #30363d; background: #0d1117; color: #e6edf3; border-radius: 8px; cursor: pointer; font-size: 16px; }
.pe-btn:hover { border-color: #2d8cf0; }
.pe-btn.act { background: #2d8cf0; border-color: #2d8cf0; color: #fff; }
.pe-bar input[type="color"] { width: 38px; height: 36px; border: 1px solid #30363d; border-radius: 8px; background: #0d1117; padding: 2px; cursor: pointer; }
.pe-spacer { flex: 1; }
.pe-send { padding: 8px 18px; background: #2ecc71; color: #06371d; border: none; border-radius: 18px; font-weight: 700; cursor: pointer; font-size: 14px; }
.pe-send:hover { filter: brightness(1.08); }
.pe-stage { flex: 1; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 10px; }
.pe-stage canvas { max-width: 100%; max-height: 100%; touch-action: none; border-radius: 6px; box-shadow: 0 6px 30px rgba(0,0,0,.6); cursor: crosshair; }

/* ── chat geo-photo: map marker ── */
.photo-map-marker { position: relative; display: flex; flex-direction: column; align-items: center; cursor: pointer; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.photo-map-marker .pmm-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 2px solid #fff; background: #000; }
.photo-map-marker .pmm-pin { font-size: 20px; line-height: 1; margin-top: -2px; }
.photo-map-marker .pmm-x { position: absolute; top: -8px; right: -8px; width: 18px; height: 18px; border: none; border-radius: 50%; background: #e53935; color: #fff; font-size: 13px; line-height: 16px; cursor: pointer; padding: 0; }

/* ── Print Layout / Report composer ── */
#printLayout { position: fixed; inset: 0; z-index: 100000; background: #4a4f57; display: flex; flex-direction: column; }
#printLayout .pl-toolbar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #1f2329; color: #fff; flex-wrap: wrap; }
#printLayout .pl-toolbar strong { font-size: 14px; }
#printLayout .pl-toolbar label { font-size: 12px; display: flex; align-items: center; gap: 4px; color: #cdd2da; }
#printLayout .pl-toolbar select, #printLayout .pl-toolbar input { background: #2c313a; color: #fff; border: 1px solid #444b56; border-radius: 5px; padding: 3px 6px; font-size: 12px; }
#printLayout .pl-spacer { flex: 1; }
#printLayout .pl-tbtn { background: #2c313a; color: #fff; border: 1px solid #444b56; border-radius: 6px; padding: 6px 11px; cursor: pointer; font-size: 12px; }
#printLayout .pl-tbtn:hover { background: #3a414d; }
#printLayout .pl-tbtn.primary { background: #2e7d32; border-color: #2e7d32; font-weight: 700; }
#printLayout .pl-stage { flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center; }
#printLayout #plSheetWrap { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
#printLayout #plSheet { background: #fff; box-shadow: 0 6px 30px rgba(0,0,0,.5); transform-origin: center center; color: #000; }
#plSheet, #plSheet * { box-sizing: border-box; font-family: Arial, sans-serif; }
#plSheet .pl-grid { display: grid; width: 100%; height: 100%; grid-template-rows: 1fr auto; }
#plSheet .pl-map { position: relative; border: 1.2px solid #000; overflow: hidden; background: #eef; }
#plSheet .pl-map-img { width: 100%; height: 100%; object-fit: cover; display: block; }
#plSheet .pl-north { position: absolute; top: 3mm; right: 3mm; width: 11mm; text-align: center; }
#plSheet .pl-north-arrow { width: 9mm; height: 12mm; margin: 0 auto; }
#plSheet .pl-north-lbl { font-weight: 700; font-size: 3mm; }
#plSheet .pl-bottom { grid-column: 1 / 2; display: flex; gap: 4mm; border: 1.2px solid #000; }
#plSheet .pl-scale { border-right: 1px solid #000; padding: 1.5mm 3mm; min-width: 60mm; }
#plSheet .pl-scalebar { position: relative; height: 7mm; margin-top: 3mm; }
#plSheet .pl-bar-row { display: flex; height: 2.2mm; border: .3mm solid #000; }
#plSheet .pl-bar-seg.a { background: #000; } #plSheet .pl-bar-seg.b { background: #fff; }
#plSheet .pl-bar-ticks { position: relative; height: 3mm; }
#plSheet .pl-bar-tick { position: absolute; transform: translateX(-50%); font-size: 2.4mm; }
#plSheet .pl-bar-unit { font-size: 2.4mm; margin-top: 1mm; }
#plSheet .pl-scale-ratio { font-size: 3mm; font-weight: 700; margin-top: 2mm; }
#plSheet .pl-scale-ratio span { outline: none; }
#plSheet .pl-legend { flex: 1; padding: 1.5mm 3mm; overflow: hidden; }
#plSheet .pl-legend-h { font-size: 2.6mm; font-weight: 700; margin-bottom: 1mm; }
#plSheet .pl-legend-list { display: flex; flex-wrap: wrap; gap: .5mm 5mm; }
#plSheet .pl-leg-row { display: flex; align-items: center; gap: 1.5mm; font-size: 2.5mm; }
#plSheet .pl-leg-sw { width: 4mm; height: 2.6mm; border: .25mm solid #000; flex: none; }
/* title block */
#plSheet .pl-tb { border: 1.2px solid #000; padding: 0; display: flex; flex-direction: column; background-size: cover; background-position: center; }
#plSheet .pl-tb > * { border-bottom: .7px solid #000; }
#plSheet .pl-tb-key { padding: 1.5mm; }
#plSheet .pl-tb-key-h, #plSheet .pl-legend-h { letter-spacing: .3px; }
#plSheet .pl-tb-key-h { font-size: 2.7mm; font-weight: 700; text-align: center; margin-bottom: 1mm; }
#plSheet .pl-key-wrap { position: relative; width: 100%; aspect-ratio: 4 / 3; border: .3mm solid #555; overflow: hidden; background: #ddd; }
#plSheet .pl-key-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
#plSheet .pl-key-box { position: absolute; border: .6mm solid #e00; background: rgba(255,0,0,.12); }
#plSheet .pl-rev { width: 100%; border-collapse: collapse; font-size: 2.2mm; }
#plSheet .pl-rev th, #plSheet .pl-rev td { border: .4px solid #000; padding: .4mm .8mm; text-align: center; }
#plSheet .pl-rev td.desc, #plSheet .pl-rev th:nth-child(4) { text-align: left; }
#plSheet .pl-rev th { background: #eee; }
#plSheet .pl-addrev { border: none; background: #f0f0f0; font-size: 2.3mm; padding: .8mm; cursor: pointer; }
#plSheet .pl-logos { display: flex; gap: 1mm; padding: 1.5mm; justify-content: space-around; align-items: center; }
#plSheet .pl-logo { flex: 1; height: 11mm; border: .3mm dashed #aaa; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; }
#plSheet .pl-logo img { max-width: 100%; max-height: 100%; }
#plSheet .pl-logo span { font-size: 2.2mm; color: #888; }
#plSheet .pl-tb-title { padding: 1.5mm; font-size: 3mm; font-weight: 700; text-align: center; }
#plSheet .pl-tb-disc { padding: 1.2mm; font-size: 1.9mm; color: #333; line-height: 1.25; }
#plSheet .pl-tb-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; }
#plSheet .pl-tb-grid3 .wide { grid-column: span 2; }
#plSheet .pl-tb-grid4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; }
#plSheet .pl-tb-grid3 > div, #plSheet .pl-tb-grid4 > div { border-right: .5px solid #000; padding: 1mm; }
#plSheet .pl-tb-grid3 label, #plSheet .pl-tb-grid4 label { display: block; font-size: 1.9mm; color: #555; }
#plSheet .pl-tb-grid3 .pl-f, #plSheet .pl-tb-grid4 .pl-f { font-size: 2.6mm; font-weight: 600; min-height: 3.4mm; outline: none; }
#plSheet .pl-tb-big { padding: 2mm 1.5mm; font-size: 4.2mm; font-weight: 700; text-align: center; min-height: 9mm; outline: none; }
#plSheet .ph { color: #aaa; font-weight: 400; }
#plSheet [contenteditable]:focus { background: #fff7d6; }
/* print mode */
body.pl-printing > *:not(#printLayout) { display: none !important; }
body.pl-printing #printLayout { position: static; background: #fff; }
body.pl-printing #printLayout .pl-toolbar { display: none !important; }
body.pl-printing #printLayout .pl-stage, body.pl-printing #printLayout #plSheetWrap { display: block; overflow: visible; height: auto; }
body.pl-printing #plSheet { box-shadow: none; transform: none !important; }
body.pl-printing .pl-logo { border-color: transparent !important; }
body.pl-printing .pl-addrev { display: none !important; }

/* ── Print composer: insert palette, free elements, props bar ── */
#printLayout .pl-palette { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 12px; background: #181c22; color: #cdd2da; border-top: 1px solid #2a2f37; }
#printLayout .pl-pal-lbl { font-size: 12px; font-weight: 700; color: #8fb4ff; }
#printLayout .pl-pal-hint { font-size: 11px; color: #6b7280; margin-inline-start: 8px; }
#printLayout .pl-pbtn { background: #2c313a; color: #fff; border: 1px solid #444b56; border-radius: 6px; padding: 5px 10px; cursor: pointer; font-size: 12px; }
#printLayout .pl-pbtn:hover { background: #3a414d; }
#printLayout .pl-pbtn.danger { background: #5b2330; border-color: #7a2e3e; }
#printLayout .pl-pal-sep { width: 1px; height: 20px; background: #2a2f37; margin: 0 4px; }
/* Professional line tool — floating, non-blocking panel (stays open while drawing) */
.pl-linepanel { position: fixed; top: 96px; right: 14px; width: 270px; background: #1b2129; border: 1px solid #3a414d; border-radius: 12px; z-index: 100060; box-shadow: 0 12px 34px rgba(0,0,0,.55); color: #e8eef6; direction: rtl; font-size: 13px; }
.pl-linepanel .plp-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid #2a2f37; }
.pl-linepanel .plp-head b { color: #8fb4ff; }
.pl-linepanel .plp-x { background: #2c313a; color: #fff; border: 1px solid #444b56; border-radius: 6px; width: 26px; height: 26px; cursor: pointer; }
.pl-linepanel .plp-body { padding: 10px 12px; max-height: 78vh; overflow: auto; }
.pl-linepanel .ld-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0; }
.pl-linepanel .ld-row label { color: #cdd2da; }
.pl-linepanel .ld-row input, .pl-linepanel .ld-row select { background: #2c313a; color: #fff; border: 1px solid #444b56; border-radius: 6px; padding: 4px 7px; font-size: 12.5px; width: 120px; }
.pl-linepanel .ld-row input[type=color] { width: 40px; padding: 0; height: 26px; }
.pl-linepanel .ld-chk { display: flex; align-items: center; gap: 6px; color: #cfe0f5; margin: 8px 0; font-size: 12.5px; }
.pl-linepanel .ld-dyn { background: #11161d; border: 1px solid #2b3440; border-radius: 8px; padding: 8px; margin: 8px 0; }
.pl-linepanel .ld-dyn b { color: #fbbf60; font-size: 12px; display: block; margin-bottom: 6px; }
.pl-linepanel .ld-dyn label { display: inline-flex; align-items: center; gap: 4px; margin-inline-end: 8px; color: #cdd2da; }
.pl-linepanel .ld-dyn input { width: 64px; background: #2c313a; color: #fff; border: 1px solid #444b56; border-radius: 6px; padding: 4px 6px; }
.pl-linepanel .plp-go { width: 100%; background: #2563eb; color: #fff; border: none; border-radius: 8px; padding: 9px; font-weight: 800; cursor: pointer; margin-top: 4px; }
.pl-linepanel .plp-tip { color: #8b97a8; font-size: 11.5px; line-height: 1.6; margin-top: 8px; }
/* properties: right-side vertical panel, grouped */
#printLayout .pl-props { position: fixed; top: 90px; right: 12px; bottom: 14px; left: auto; transform: none; display: flex; flex-direction: column; align-items: stretch; gap: 7px; background: #1b2129; border: 1px solid #3a414d; border-radius: 12px; padding: 10px; z-index: 100020; box-shadow: 0 10px 30px rgba(0,0,0,.55); width: 262px; max-width: 262px; overflow-y: auto; }
#printLayout .pl-props .pl-props-h { font-weight: 800; color: #8fb4ff; font-size: 14px; border-bottom: 1px solid #2a2f37; padding-bottom: 6px; position: sticky; top: -10px; background: #1b2129; }
#printLayout .pl-props .pl-spacer { display: none; }
#printLayout .pl-props > label { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
#printLayout .pl-props .tb-grp, #printLayout .pl-props .pl-dim-grp { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; width: 100%; background: #11161d; border: 1px solid #2b3440; border-radius: 8px; padding: 5px 7px; }
#printLayout .pl-props .pl-pbtn { flex: 0 0 auto; }
#printLayout .pl-props #pp_del, #printLayout .pl-props #lp_del { margin-top: 4px; }
#printLayout .pl-props label { font-size: 12px; color: #cdd2da; display: flex; align-items: center; gap: 4px; }
#printLayout .pl-props input, #printLayout .pl-props select { background: #2c313a; color: #fff; border: 1px solid #444b56; border-radius: 5px; padding: 3px 6px; font-size: 12px; }
#printLayout .pl-props input[type=color] { padding: 0; width: 28px; height: 24px; }

#printLayout .pl-zoom { display: flex; align-items: center; gap: 4px; }
#printLayout .pl-zoom #plZoomPct { font-size: 12px; color: #cdd2da; min-width: 42px; text-align: center; }
.pl-capbar { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 100040; background: #1f2329; border: 1px solid #3a414d; border-radius: 10px; padding: 9px 14px; display: flex; align-items: center; gap: 10px; color: #e8eef6; font-size: 13px; box-shadow: 0 10px 30px rgba(0,0,0,.55); }
.pl-cmdbar { bottom: 14px; top: auto; font-family: "Consolas", monospace; font-size: 14px; background: #0d1117; border-color: #2563eb; }
.pl-cmdbar .cmd-fld { padding: 2px 8px; border-radius: 6px; }
.pl-cmdbar .cmd-on { background: #1d3a6b; color: #fbbf60; font-weight: 800; }
.fe-mv-scale { position: absolute; bottom: 2px; left: 4px; font: 800 11px sans-serif; color: #111; background: rgba(255,255,255,.82); padding: 1px 6px; border-radius: 3px; }
.fe-mv-north { position: absolute; top: 1.5mm; left: 2mm; width: 7mm; height: 10mm; }
.fe-mv-north svg { width: 100%; height: 76%; display: block; margin: 0 auto; }
.fe-mv-north-n { text-align: center; font: 800 3.2mm sans-serif; color: #111; line-height: 1; }
.fe-mv-sbar { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,.85); padding: 1px 4px 0; border-radius: 2px; }
.fe-mv-sbar-row { display: flex; height: 1.6mm; border: 0.25mm solid #111; box-sizing: content-box; }
.fe-mv-sbar-seg { height: 100%; }
.fe-mv-sbar-seg.a { background: #111; } .fe-mv-sbar-seg.b { background: #fff; }
.fe-mv-sbar-txt { font: 700 2.4mm sans-serif; color: #111; text-align: center; }
.fe-keybox { position: absolute; box-sizing: border-box; border: 0.5mm solid #e11d1d; pointer-events: none; background: repeating-linear-gradient(45deg, rgba(225,29,29,.30), rgba(225,29,29,.30) 1.5px, transparent 1.5px, transparent 6px); display: flex; align-items: center; justify-content: center; }
.fe-keybox-lbl { font: 800 9px sans-serif; color: #b30000; background: rgba(255,255,255,.85); padding: 0 3px; border-radius: 2px; white-space: nowrap; }
.fe-keysvg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.fe-keysvg .fe-keysvg-lbl { fill: #b30000; font: 800 4px sans-serif; paint-order: stroke; stroke: #fff; stroke-width: 1; }
.fe-mv-rot { position: absolute; inset: 0; transform-origin: center center; }
.fe-grid { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.fe-grid .fe-grid-lbl { fill: #1a1a1a; paint-order: stroke; stroke: #fff; stroke-width: 0.5; font-family: sans-serif; font-weight: 600; }
#printLayout .pl-stage.panning { cursor: grabbing; }
#printLayout .pl-pbtn.on { background: #1d3a6b; border-color: #3d8bff; color: #cfe0ff; }
.pl-lines { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: visible; }
.pl-lines .pl-ln, .pl-lines .pl-ln-h, .pl-lines .pl-ln-catch { pointer-events: auto; }
.pl-lines .pl-ln { cursor: pointer; }
.pl-lines .pl-ln.sel { stroke: #3d8bff !important; }
.pl-lines .pl-ln-h { fill: #fff; stroke: #3d8bff; stroke-width: 0.5; cursor: move; }
.pl-lines .pl-ln-lbl { fill: #111; paint-order: stroke; stroke: #fff; stroke-width: 0.6; font-family: sans-serif; }
.pl-lines .pl-ln-catch { cursor: crosshair; pointer-events: all; }
.pl-rubber { position: fixed; display: none; border: 1px dashed #3d8bff; background: rgba(61,139,255,.12); z-index: 100030; pointer-events: none; }
body.pl-printing .pl-dims { display: none !important; }
.pl-lines .pl-meas-lbl { fill: #7a4a00; paint-order: stroke; stroke: #fff; stroke-width: 0.8; font-family: sans-serif; font-weight: 800; }
.pl-lines .pl-dim-lbl { fill: #1d4ed8; paint-order: stroke; stroke: #fff; stroke-width: 0.7; font-family: sans-serif; font-weight: 700; }
body.pl-printing #plMeas, body.pl-printing #plMeasLbl, body.pl-printing .pl-dim-lbl { display: none !important; }
#printLayout .pl-dim-grp { display: flex; align-items: center; gap: 5px; background: #11161d; border: 1px solid #2b3440; border-radius: 8px; padding: 2px 7px; }
#printLayout .pl-dim-grp label { font-size: 11px; color: #9fb0c4; display: flex; align-items: center; gap: 2px; }
body.pl-printing .pl-lines .pl-ln-h, body.pl-printing .pl-lines .pl-ln-lbl { display: none; }
/* delete-button on the fixed title-block parts (map / title block / scale-legend) */
.pl-part-x { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: #e74c3c; color: #fff; border: none; font-size: 14px; line-height: 20px; cursor: pointer; opacity: 0; transition: opacity .15s; z-index: 8; }
.pl-map:hover .pl-part-x, .pl-tb:hover .pl-part-x, .pl-bottom:hover .pl-part-x { opacity: .92; }
body.pl-printing .pl-part-x { display: none !important; }
.pl-free { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.pl-fe { position: absolute; pointer-events: auto; box-sizing: border-box; outline: 1px dashed transparent; }
.pl-fe:hover { outline: 1px dashed #3d8bff; }
.pl-fe.sel { outline: 1.5px solid #3d8bff; }
.pl-fe-in { width: 100%; height: 100%; overflow: hidden; position: relative; }
.pl-fe-h { position: absolute; width: 17px; height: 17px; border-radius: 50%; background: #3d8bff; color: #fff; font-size: 11px; line-height: 17px; text-align: center; display: none; cursor: pointer; z-index: 3; user-select: none; }
.pl-fe.sel .pl-fe-h { display: block; }
.pl-fe-move { top: -9px; left: -9px; cursor: move; }
.pl-fe-del { top: -9px; right: -9px; background: #e74c3c; }
.pl-fe-res { bottom: -9px; right: -9px; background: #22c55e; cursor: nwse-resize; }
.fe-text { width: 100%; height: 100%; outline: none; line-height: 1.3; }
.fe-table { width: 100%; height: 100%; border-collapse: collapse; font-size: 11px; table-layout: fixed; direction: ltr; }
.fe-tbl-h { position: absolute; inset: 0; pointer-events: none; }
.fe-tbl-h .fe-colh { position: absolute; width: 7px; transform: translateX(-3.5px); cursor: col-resize; pointer-events: auto; }
.fe-tbl-h .fe-rowh { position: absolute; height: 7px; transform: translateY(-3.5px); cursor: row-resize; pointer-events: auto; }
.fe-tbl-h .fe-colh:hover { background: linear-gradient(to right, transparent calc(50% - 0.5px), rgba(61,139,255,.85) calc(50% - 0.5px), rgba(61,139,255,.85) calc(50% + 0.5px), transparent calc(50% + 0.5px)); }
.fe-tbl-h .fe-rowh:hover { background: linear-gradient(to bottom, transparent calc(50% - 0.5px), rgba(61,139,255,.85) calc(50% - 0.5px), rgba(61,139,255,.85) calc(50% + 0.5px), transparent calc(50% + 0.5px)); }
#printLayout .pl-props .tb-hint { font-size: 11px; color: #8b97a8; width: 100%; }
body.pl-printing .fe-tbl-h { display: none !important; }
.fe-table td { border: 0.35mm solid #111; padding: 2px 5px; min-width: 12px; outline: none; overflow: hidden; word-break: break-word; }
.fe-table td.tc-sel { outline: 2px solid #3d8bff; outline-offset: -2px; background: rgba(61,139,255,.14); }
/* table tool cursors — force over the contenteditable text caret */
.pl-fe-table.tbl-tool-draw .fe-table td, .pl-fe-table.tbl-tool-draw .fe-table td *,
.pl-fe-table.tbl-tool-erase .fe-table td, .pl-fe-table.tbl-tool-erase .fe-table td * { caret-color: transparent !important; user-select: none !important; }
.pl-fe-table.tbl-tool-draw .fe-table td, .pl-fe-table.tbl-tool-draw .fe-table td * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cg transform='rotate(45 13 13)'%3E%3Crect x='10' y='2' width='6' height='15' fill='%23ffd24a' stroke='%23222' stroke-width='1.4'/%3E%3Cpolygon points='10,17 16,17 13,23' fill='%23333'/%3E%3C/g%3E%3C/svg%3E") 22 4, crosshair !important; }
.pl-fe-table.tbl-tool-erase .fe-table td, .pl-fe-table.tbl-tool-erase .fe-table td * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cg transform='rotate(-40 13 13)'%3E%3Crect x='3' y='13' width='18' height='8' rx='1.5' fill='%23ff8fb3' stroke='%23222' stroke-width='1.6'/%3E%3Crect x='3' y='13' width='6' height='8' fill='%23ffd6e6' stroke='%23222' stroke-width='1.6'/%3E%3C/g%3E%3C/svg%3E") 5 20, crosshair !important; }
body.pl-printing .fe-table td.tc-sel { outline: none !important; background: none !important; }
#printLayout .tb-grp { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: #9fb0c4; background: #11161d; border: 1px solid #2b3440; border-radius: 7px; padding: 2px 6px; }
.fe-north { width: 100%; height: 82%; }
.fe-north-n { text-align: center; font: 800 12px sans-serif; }
.fe-legend { font-size: 10.5px; line-height: 1.5; color: #111; }
.fe-leg-h { font-weight: 800; border-bottom: 0.3mm solid #111; margin-bottom: 3px; padding-bottom: 2px; }
.fe-leg-row { display: flex; align-items: center; gap: 6px; }
.fe-leg-sw { width: 12px; height: 9px; border: 0.3mm solid #333; }
.fe-line { width: 100%; height: 100%; }
.fe-rect { width: 100%; height: 100%; box-sizing: border-box; }
.fe-img { width: 100%; height: 100%; object-fit: cover; }
.fe-imgph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #888; border: 1px dashed #bbb; }
/* Legend per-layer eye toggle (setup-only; hidden in print) */
.leg-eye { cursor: pointer; margin-inline-end: 5px; font-size: 11px; user-select: none; opacity: .85; }
.leg-eye:hover { opacity: 1; }
.pl-leg-row.leg-hidden, .fe-leg-row.leg-hidden { opacity: .35; }
body.pl-printing .leg-eye { display: none !important; }
body.pl-printing .pl-leg-row.leg-hidden, body.pl-printing .fe-leg-row.leg-hidden { display: none !important; }
body.pl-printing .pl-fe-h { display: none !important; }
body.pl-printing .pl-fe, body.pl-printing .pl-fe:hover, body.pl-printing .pl-fe.sel { outline: none !important; }
body.pl-printing .pl-palette, body.pl-printing .pl-props { display: none !important; }

/* nearest-report: Element-column picker */
.nearest-report .nr-colsel { margin-inline-start: 8px; background: #1f2733; color: #cfe3ff; border: 1px solid #2f3e50; border-radius: 5px; font-size: 11px; padding: 2px 5px; max-width: 160px; vertical-align: middle; cursor: pointer; }
.nearest-report .nr-colsel:hover { border-color: #4a90d9; }

/* ── Per-feature style dialog (color + hatch) ── */
.fs-overlay { position: fixed; inset: 0; z-index: 100001; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; }
.fs-card { width: 340px; max-width: 94vw; background: #11151b; color: #e6edf3; border: 1px solid #2b3440; border-radius: 12px; box-shadow: 0 14px 50px rgba(0,0,0,.6); overflow: hidden; direction: rtl; }
.fs-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; background: #161b22; font-weight: 700; font-size: 14px; }
.fs-x { background: none; border: none; color: #9aa4b2; font-size: 20px; cursor: pointer; line-height: 1; }
.fs-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 11px; }
.fs-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.fs-row > label { flex: 0 0 110px; color: #b9c2cd; }
.fs-row.fs-col { flex-direction: column; align-items: stretch; gap: 6px; }
.fs-row input[type=color] { width: 42px; height: 28px; border: 1px solid #2b3440; border-radius: 6px; background: none; cursor: pointer; padding: 0; }
.fs-row input[type=range] { flex: 1; }
.fs-hatches { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.fs-hatch { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 3px; background: #1b2128; border: 1.5px solid #2b3440; border-radius: 8px; cursor: pointer; color: #cdd6df; }
.fs-hatch:hover { border-color: #3d8bff; }
.fs-hatch.sel { border-color: #3d8bff; background: #15233b; }
.fs-hatch-sw { width: 100%; height: 24px; border-radius: 4px; background: #0d1117 center/22px; border: 1px solid #2b3440; }
.fs-hatch-lb { font-size: 10px; white-space: nowrap; }
.fs-preview { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: #9aa4b2; }
.fs-preview canvas { width: 100%; height: 64px; background: #0d1117; border: 1px solid #2b3440; border-radius: 8px; }
.fs-foot { display: flex; gap: 8px; padding: 11px 14px; background: #0d1117; border-top: 1px solid #20262e; }
.fs-btn { flex: 1; padding: 9px; border: 1px solid #2b3440; border-radius: 8px; background: #1b2128; color: #e6edf3; cursor: pointer; font-size: 13px; }
.fs-btn:hover { background: #232b34; }
.fs-btn.primary { background: #2563eb; border-color: #2563eb; font-weight: 700; }
.fs-btn.ghost { flex: 1.3; color: #f1c40f; }

/* ── Backup & Recovery panel ── */
.bk-dialog { width: 760px; max-width: 96vw; max-height: 88vh; display: flex; flex-direction: column; background: #0f141b; color: #e6edf3; border: 1px solid #2b3440; border-radius: 12px; overflow: hidden; direction: rtl; }
.bk-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #161c24; border-bottom: 1px solid #232c36; }
.bk-title { font-weight: 700; font-size: 15px; }
.bk-loading, .bk-empty { padding: 28px; text-align: center; color: #9aa4b2; }
.bk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px 16px; }
.bk-stat { background: #141b23; border: 1px solid #232c36; border-radius: 9px; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; }
.bk-stat .bk-k { font-size: 11px; color: #8b95a1; }
.bk-stat .bk-v { font-size: 14px; font-weight: 700; }
.bk-stat .bk-v.ok { color: #3fb950; } .bk-stat .bk-v.warn { color: #f0a35e; }
.bk-actions { display: flex; gap: 8px; padding: 0 16px 12px; flex-wrap: wrap; }
.bk-btn { padding: 8px 13px; border: 1px solid #2b3440; border-radius: 8px; background: #1b2128; color: #e6edf3; cursor: pointer; font-size: 12.5px; }
.bk-btn:hover { background: #232c34; } .bk-btn:disabled { opacity: .45; cursor: default; }
.bk-btn.primary { background: #2563eb; border-color: #2563eb; font-weight: 700; }
.bk-tabs { display: flex; gap: 4px; padding: 0 16px; border-bottom: 1px solid #232c36; }
.bk-tab { padding: 8px 14px; background: none; border: none; border-bottom: 2px solid transparent; color: #9aa4b2; cursor: pointer; font-size: 13px; }
.bk-tab.sel { color: #fff; border-bottom-color: #2563eb; }
.bk-body { overflow: auto; padding: 6px 16px 16px; }
.bk-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.bk-table th { text-align: right; color: #8b95a1; font-weight: 600; padding: 7px 6px; border-bottom: 1px solid #232c36; position: sticky; top: 0; background: #0f141b; }
.bk-table td { padding: 7px 6px; border-bottom: 1px solid #1a212a; }
.bk-table tr.bk-del td { background: rgba(240,90,90,.06); }
.bk-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-dt { color: #8b95a1; white-space: nowrap; }
.bk-badge { padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.bk-badge.ok { background: rgba(63,185,80,.15); color: #3fb950; }
.bk-badge.del { background: rgba(240,90,90,.16); color: #f0716e; }
.bk-mini { padding: 4px 9px; border-radius: 6px; border: 1px solid #2b3440; background: #1b2128; color: #e6edf3; cursor: pointer; font-size: 11.5px; margin-inline-start: 4px; }
.bk-mini.primary { background: #1f6feb; border-color: #1f6feb; }
.bk-mini.danger { background: #3a1f24; border-color: #5c2b30; color: #f0a0a0; }

/* ===================== Lite / Fast theme ===================== */
/* Kill the expensive effects everywhere (blur/shadow/animation/transition). */
.theme-lite *, .theme-lite *::before, .theme-lite *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  animation: none !important;
  transition: none !important;
}
/* Flatten the busiest gradient surfaces to solid (cheaper to paint). */
.theme-lite .map-menubar, .theme-lite .header, .theme-lite .modal-dialog,
.theme-lite .nearest-report, .theme-lite .user-chip-menu, .theme-lite .mbar-dropdown,
.theme-lite .panel, .theme-lite .sidebar, .theme-lite .popup {
  background-image: none !important;
}
/* Floating things lose their drop-shadow → give them a crisp border so they
   still read as separated from the map. */
.theme-lite .modal-dialog, .theme-lite .nearest-report, .theme-lite .layer-menu-popup,
.theme-lite .mbar-dropdown, .theme-lite .user-chip-menu, .theme-lite .popup,
.theme-lite .bk-dialog, .theme-lite .fs-card, .theme-lite .thm-dialog,
.theme-lite .cartActionsMenu, .theme-lite #popupActionsMenu {
  border: 1px solid rgba(255,255,255,.16) !important;
}
/* A touch tighter + flatter so it feels lighter. */
.theme-lite .mbar-btn, .theme-lite .mbar-opt, .theme-lite .bk-btn, .theme-lite .fs-btn { filter: none !important; }

/* ===================== Theme chooser dialog ===================== */
.thm-dialog { width: 460px; max-width: 94vw; background: #0f141b; color: #e6edf3; border: 1px solid #2b3440; border-radius: 12px; overflow: hidden; direction: rtl; }
.thm-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #161c24; font-weight: 700; }
.thm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; }
.thm-card { background: #141b23; border: 2px solid #232c36; border-radius: 11px; padding: 12px; cursor: pointer; color: #e6edf3; text-align: center; }
.thm-card:hover { border-color: #3d8bff; }
.thm-card.sel { border-color: #2563eb; background: #15233b; }
.thm-prev { height: 56px; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 9px; }
.thm-prev i { width: 22px; height: 30px; border-radius: 5px; display: block; }
.pv-classic { background: linear-gradient(135deg,#0b1220,#1b2740); box-shadow: inset 0 0 18px rgba(0,0,0,.6); }
.pv-classic i { background: linear-gradient(160deg,#2e6cf6,#1b2740); box-shadow: 0 3px 8px rgba(0,0,0,.5); }
.pv-lite { background: #1a212b; }
.pv-lite i { background: #2e6cf6; border: 1px solid #3a4757; }
.thm-name { font-weight: 700; font-size: 14px; }
.thm-desc { font-size: 11.5px; color: #93a0ad; margin-top: 4px; line-height: 1.35; }
.thm-note { padding: 0 16px 14px; font-size: 12px; color: #8b95a1; text-align: center; }

/* Lite mode: tuck away advanced tools for a simpler, easier interface */
.theme-lite .lite-adv { display: none !important; }

/* Attribute table: per-feature hide + hidden-row dim */
.at-hidefeat { background: none; border: none; cursor: pointer; font-size: 13px; opacity: .65; padding: 0 2px; }
.at-hidefeat:hover { opacity: 1; }
.at-table tr.at-row-hidden { opacity: .42; }
.at-table tr.at-row-hidden .at-cell { text-decoration: line-through; }
.at-table tbody tr { cursor: pointer; }

/* Lite mode: hide the whole Analyses menu (advanced) */
.theme-lite #mbarAnalyses { display: none !important; }

/* Attribute table: auto-computed (read-only) cells */
.at-cell.at-auto { background: rgba(0,229,255,.08); color: #7fd7e6; font-style: italic; cursor: default; }

/* ── Official correspondence system ── */
.corr-dialog { width: 860px; max-width: 97vw; height: 86vh; display: flex; flex-direction: column; background: #0f141b; color: #e6edf3; border: 1px solid #2b3440; border-radius: 12px; overflow: hidden; direction: rtl; }
.corr-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #161c24; border-bottom: 1px solid #232c36; }
.corr-head strong { font-size: 15px; }
.corr-tabs { display: flex; gap: 4px; }
.corr-tab { background: none; border: none; color: #9aa4b2; padding: 6px 12px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.corr-tab.sel { background: #1f6feb; color: #fff; }
.corr-head-btns { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; }
.corr-btn { padding: 7px 12px; border: 1px solid #2b3440; border-radius: 7px; background: #1b2128; color: #e6edf3; cursor: pointer; font-size: 12.5px; }
.corr-btn:hover { background: #232c34; }
.corr-btn.primary { background: #2563eb; border-color: #2563eb; font-weight: 700; }
.corr-btn.approve { background: #1f7a36; border-color: #1f7a36; }
.corr-btn.reject { background: #8c2b2b; border-color: #8c2b2b; }
.corr-body { flex: 1; overflow: auto; padding: 14px 16px; }
.corr-empty { text-align: center; color: #8b95a1; padding: 30px; }
.corr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.corr-table th { text-align: right; color: #8b95a1; font-weight: 600; padding: 8px 6px; border-bottom: 1px solid #232c36; position: sticky; top: 0; background: #0f141b; }
.corr-table td { padding: 9px 6px; border-bottom: 1px solid #1a212a; }
.corr-table tr[data-id] { cursor: pointer; } .corr-table tr[data-id]:hover td { background: #141b23; }
.corr-ref { font-family: monospace; color: #58a6ff; white-space: nowrap; } .corr-ref.big { font-size: 16px; font-weight: 700; }
.corr-subj { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.corr-pill { padding: 2px 9px; border-radius: 10px; font-size: 11px; color: #fff; font-weight: 600; white-space: nowrap; }
.corr-dt { color: #8b95a1; white-space: nowrap; }
.corr-form, .corr-detail { max-width: 640px; }
.corr-form label, .corr-detail .corr-sec-h { display: block; margin: 10px 0 4px; color: #b9c2cd; font-size: 13px; font-weight: 600; }
.corr-input { width: 100%; box-sizing: border-box; background: #161c24; color: #e6edf3; border: 1px solid #2b3440; border-radius: 7px; padding: 8px 10px; font-size: 13px; }
.corr-link { background: none; border: none; color: #58a6ff; cursor: pointer; padding: 0; margin-bottom: 8px; font-size: 13px; }
.corr-depts { max-height: 160px; overflow: auto; background: #131922; border: 1px solid #2b3440; border-radius: 7px; padding: 6px; }
.corr-chk { display: block; padding: 4px 6px; font-size: 13px; cursor: pointer; }
.corr-extlist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.corr-extchip { background: #1b2a3f; border: 1px solid #2f4a6e; border-radius: 12px; padding: 3px 9px; font-size: 12px; }
.corr-extchip b { cursor: pointer; color: #f0716e; }
.corr-recip-panel { background: #131922; border: 1px solid #2b3440; border-radius: 7px; padding: 6px; margin-top: 4px; }
.corr-recip-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 4px 2px; border-bottom: 1px dashed #2b3440; }
.corr-recip-row:last-child { border-bottom: none; }
.corr-recip-prim { display: flex; gap: 4px; align-items: center; font-size: 12px; white-space: nowrap; color: #9aa4b2; }
.corr-recip-name { flex: 1; font-size: 13px; min-width: 90px; }
.corr-recip-row .cf-purpose { width: auto; }
.corr-recip-row .cf-purpose-c { width: 130px; }
.corr-d-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.corr-chain { font-size: 12px; padding: 2px 8px; border-radius: 8px; }
.corr-chain.ok { background: rgba(63,185,80,.15); color: #3fb950; } .corr-chain.bad { background: rgba(240,90,90,.16); color: #f0716e; }
.corr-meta { color: #8b95a1; font-size: 12.5px; margin: 6px 0; }
.corr-text { background: #131922; border: 1px solid #232c36; border-radius: 8px; padding: 10px; margin: 8px 0; white-space: pre-wrap; }
.corr-recip { padding: 5px 0; font-size: 13px; border-bottom: 1px solid #1a212a; }
.corr-files { display: flex; flex-wrap: wrap; gap: 12px; }
.corr-file { display: flex; gap: 10px; background: #131922; border: 1px solid #232c36; border-radius: 9px; padding: 8px; width: 280px; }
.corr-qr { width: 76px; height: 76px; background: #fff; border-radius: 6px; }
.corr-file-i { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; min-width: 0; }
.corr-kind { color: #8b95a1; font-size: 11px; }
.corr-file-a a { color: #58a6ff; text-decoration: none; }
.corr-actions { display: flex; gap: 8px; margin: 14px 0; flex-wrap: wrap; }
.corr-timeline { font-size: 12px; }
.corr-ev { padding: 4px 0; border-bottom: 1px solid #161d26; color: #c9d2db; }
.corr-ev-t { color: #6b7682; }

/* collapsible report sections */
.nr-collapsible { cursor: pointer; user-select: none; }
.nr-collapsible:hover { color: #00e5ff; }
.nr-caret { display: inline-block; width: 12px; font-size: 10px; color: #8b95a1; }

/* correspondence: letter preview dialog */
.cl-dialog { width: 900px; max-width: 98vw; height: 92vh; display: flex; flex-direction: column; background: #3a3f47; border-radius: 10px; overflow: hidden; direction: rtl; }
.cl-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #1f2329; color: #fff; }
.cl-stage { flex: 1; overflow: auto; padding: 16px; display: flex; justify-content: center; background: #4a4f57; }

/* Local file linking (by ID) — popup section */
.sba-attach { margin-top: 8px; padding: 8px; background: rgba(46,204,113,.07); border: 1px solid rgba(46,204,113,.25); border-radius: 8px; }
.sba-attach .sba-h { font-size: 12px; font-weight: 700; color: #2ecc71; margin-bottom: 6px; }
.sba-attach .sba-none { font-size: 11.5px; color: #8b95a1; }
.sba-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.sba-row .sba-nm { flex: 1; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sba-b { background: #1b2128; border: 1px solid #2b3440; color: #e6edf3; border-radius: 6px; cursor: pointer; padding: 3px 7px; font-size: 12px; }
.sba-b.up { background: #15233b; border-color: #2f4a6e; color: #7fb0ff; }
.sba-b:hover { background: #232c34; }

/* Official-letter WYSIWYG editor */
.le-overlay { position: fixed; inset: 0; z-index: 100002; background: #4a4f57; display: flex; flex-direction: column; }
.le-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #1f2329; color: #fff; flex-wrap: wrap; }
.le-bar select, .le-bar input[type=color] { background: #2c313a; color: #fff; border: 1px solid #444b56; border-radius: 5px; padding: 4px; font-size: 12px; height: 30px; }
.le-bar input[type=color] { width: 34px; padding: 2px; }
.le-b { background: #2c313a; color: #fff; border: 1px solid #444b56; border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: 13px; min-width: 32px; }
.le-b:hover { background: #3a414d; }
.le-b.primary { background: #2e7d32; border-color: #2e7d32; font-weight: 700; }
.le-div { width: 1px; height: 22px; background: #444b56; margin: 0 4px; }
.le-spacer { flex: 1; }
.le-stage { flex: 1; overflow: auto; padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.le-doc { box-shadow: 0 6px 30px rgba(0,0,0,.5); }
.le-doc [contenteditable]:hover { outline: 1px dashed rgba(11,61,107,.3); }
.le-doc [contenteditable]:focus { outline: 2px solid rgba(37,99,235,.45); background: #fffef5; }
.le-doc .cl-to { font-weight: 600; margin: 8px 0; }
.le-doc .cl-logo { cursor: pointer; min-width: 90px; min-height: 60px; display: flex; align-items: center; justify-content: center; }
.le-logo-ph { color: #888; font-size: 13px; border: 1px dashed #bbb; padding: 18px 10px; border-radius: 6px; }
.le-attach { width: 210mm; max-width: 100%; background: #fff; border-radius: 8px; padding: 10px 16px; }
.le-att-h { font-weight: 700; color: #0b3d6b; margin-bottom: 6px; }
.le-att-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.le-att-row a { color: #1f6feb; text-decoration: none; flex: 1; }
.le-att-row button { background: #f3d6d6; border: none; color: #b33; border-radius: 4px; cursor: pointer; padding: 1px 7px; }

/* Letter editor: draggable/resizable blocks, placeholders, e-sign stamp */
.le-doc .le-rule-line { position: absolute; left: 14mm; right: 14mm; height: 3px; background: var(--accent,#0b3d6b); }
.le-block { position: absolute; min-height: 8mm; padding: 2px 4px; border: 1px solid transparent; }
.le-block:hover { border-color: rgba(37,99,235,.35); }
.le-block .le-content { outline: none; min-height: 6mm; }
.le-block.le-bold .le-content { font-weight: 700; }
.le-block.le-center { text-align: center; }
.le-block.le-small .le-content { font-size: 11px; color: #555; }
.le-block.le-body .le-content { line-height: 2.1; }
.le-grip { position: absolute; top: -10px; right: -2px; width: 18px; height: 18px; background: #2563eb; color: #fff; border-radius: 4px; font-size: 11px; line-height: 18px; text-align: center; cursor: move; opacity: 0; transition: opacity .15s; }
.le-resize { position: absolute; bottom: -5px; left: -5px; width: 12px; height: 12px; background: #2563eb; border: 2px solid #fff; border-radius: 50%; cursor: nesw-resize; opacity: 0; }
.le-block:hover .le-grip, .le-block:hover .le-resize { opacity: 1; }
.le-ph { background: #fff3cd; border: 1px dashed #d4a017; border-radius: 3px; padding: 0 3px; color: #8a6d1a; }
.le-esign-c { border: 1.5px dashed #2e7d32; border-radius: 6px; padding: 6px; text-align: center; min-height: 24mm; }
.le-esign-ph { color: #2e7d32; font-size: 11px; }
.le-stamp { display: flex; gap: 8px; align-items: center; justify-content: center; }
.le-stamp-qr { width: 70px; height: 70px; }
.le-stamp-t { font-size: 10px; color: #333; text-align: right; }
.le-stamp-v { color: #2e7d32; font-size: 8.5px; }

/* Image georeferencing panel */
.ig-panel { position: fixed; inset: 0; margin: auto; width: 920px; max-width: 96vw; height: 640px; max-height: 92vh; background: var(--bg-panel, #11161d); border: 1px solid var(--border, #2b3440); border-radius: 12px; box-shadow: 0 24px 70px rgba(0,0,0,.6); z-index: 100050; display: flex; flex-direction: column; color: var(--text-primary, #e6edf3); direction: rtl; }
.ig-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; border-bottom: 1px solid var(--border, #2b3440); }
.ig-head .ig-x { background: none; border: none; color: var(--text-muted, #8b95a1); font-size: 20px; cursor: pointer; }
.ig-body { flex: 1; display: flex; gap: 12px; padding: 12px 16px; overflow: hidden; }
.ig-left { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; overflow: auto; }
.ig-canvas-wrap { position: relative; display: inline-block; }
.ig-left canvas { border: 1px solid var(--border, #2b3440); border-radius: 6px; cursor: crosshair; max-width: 100%; background: #000; touch-action: none; }
.ig-zoombar { position: absolute; top: 8px; inset-inline-start: 8px; display: flex; align-items: center; gap: 4px; background: rgba(15,20,28,.82); border: 1px solid var(--border, #2b3440); border-radius: 8px; padding: 3px 6px; backdrop-filter: blur(3px); }
.ig-zoombar button { width: 26px; height: 26px; border: none; border-radius: 5px; background: #1b2128; color: #e6edf3; cursor: pointer; font-size: 15px; line-height: 1; }
.ig-zoombar button:hover { background: #2563eb; }
.ig-zoombar #igZlbl { color: #9aa4b2; font-size: 11px; min-width: 36px; text-align: center; }
.ig-hint { font-size: 12px; color: var(--text-muted, #8b95a1); text-align: center; }
.ig-right { width: 320px; display: flex; flex-direction: column; gap: 8px; overflow: auto; }
.ig-lab { font-size: 12px; color: var(--text-muted, #8b95a1); }
.ig-input { background: var(--bg-input, #0d1117); color: var(--text-primary, #e6edf3); border: 1px solid var(--border, #2b3440); border-radius: 6px; padding: 6px 8px; font-size: 12.5px; width: 100%; box-sizing: border-box; }
.ig-pts { display: flex; flex-direction: column; gap: 5px; }
.ig-pt { display: flex; align-items: center; gap: 5px; }
.ig-pt .ig-pn { width: 18px; text-align: center; color: #e11d48; font-weight: 700; }
.ig-pt .ig-x, .ig-pt .ig-y { flex: 1; }
.ig-pt .ig-pick { background: #15233b; color: #cfe3ff; border: 1px solid #3d8bff; border-radius: 5px; cursor: pointer; padding: 2px 7px; }
.ig-pt .ig-pick:hover { background: #1d3354; }
.ig-pt .ig-del { background: #fdecec; color: #b33; border: none; border-radius: 5px; cursor: pointer; padding: 2px 8px; }
.ig-pick-hint { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 100060; background: #2563eb; color: #fff; padding: 9px 16px; border-radius: 9px; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,.45); direction: rtl; }
.ig-empty { color: var(--text-muted, #8b95a1); font-size: 12px; padding: 6px 0; }
.ig-rms { font-size: 11.5px; color: var(--text-muted, #8b95a1); }
.ig-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: auto; padding-top: 8px; }
.ig-btn { background: #1b2128; color: #e6edf3; border: 1px solid #2b3440; border-radius: 7px; padding: 7px 12px; cursor: pointer; font-size: 12.5px; }
.ig-btn.primary { background: #2563eb; border-color: #2563eb; font-weight: 700; }
.ig-list { padding: 0 8px; }
.ig-list-h { font-size: 11px; color: var(--text-muted, #8b95a1); margin: 6px 0 3px; display: flex; align-items: center; justify-content: space-between; }
.ig-merge-btn { background: #15233b; color: #cfe3ff; border: 1px solid #3d8bff; border-radius: 6px; cursor: pointer; padding: 2px 8px; font-size: 11px; }
.ig-merge-btn:hover { background: #1d3354; }
.ig-adj-panel { position: fixed; top: 80px; left: 16px; width: 250px; background: var(--bg-panel, #11161d); border: 1px solid var(--border, #2b3440); border-radius: 10px; box-shadow: 0 12px 34px rgba(0,0,0,.55); z-index: 100055; padding: 12px 14px; color: var(--text-primary, #e6edf3); direction: rtl; }
.ig-adj-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.ig-adj-head .ig-adj-x { background: none; border: none; color: var(--text-muted, #8b95a1); font-size: 18px; cursor: pointer; }

/* Department show/hide-all toggle — clear, button-like */
.dept-vis-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 22px; margin-inline-start: 4px; border: 1px solid #2f3e50; border-radius: 6px; background: #1b2430; color: #cfe3ff; cursor: pointer; padding: 0; flex: none; }
.dept-vis-btn:hover { background: #25344a; border-color: #3d8bff; color: #fff; }
.dept-vis-btn svg { width: 15px; height: 15px; }
.dept-vis-btn.is-hidden { background: #2a1d22; border-color: #5a3a44; color: #f0a0b0; }   /* all hidden → reddish */
.dept-vis-btn.is-hidden:hover { background: #3a2730; }

/* Surfaces / DEM panels (contours + profile) */
.surf-panel { position: fixed; top: 90px; inset-inline-start: 70px; z-index: 100050; min-width: 280px; background: #11161d; border: 1px solid #2b3440; border-radius: 11px; box-shadow: 0 14px 38px rgba(0,0,0,.6); color: #e6edf3; direction: rtl; }
.surf-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-bottom: 1px solid #1c232c; cursor: move; }
.surf-head b { font-size: 13px; }
.surf-x { background: none; border: none; color: #8b95a1; font-size: 18px; cursor: pointer; }
.surf-body { padding: 10px 12px; max-width: 560px; }
.surf-lbl { display: block; font-size: 11px; color: #9aa4b2; margin: 7px 0 3px; }
.surf-in { width: 100%; box-sizing: border-box; background: #0d1117; color: #e6edf3; border: 1px solid #2f3e50; border-radius: 6px; padding: 5px 8px; font-size: 12.5px; }
.surf-sec { font-size: 11px; font-weight: 700; color: #8b95a1; margin: 13px 0 5px; border-top: 1px solid #1c232c; padding-top: 8px; }
.surf-row { display: flex; align-items: center; gap: 7px; font-size: 12px; margin: 4px 0; }
.surf-row2 { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #cbd5e1; margin: 6px 0; cursor: pointer; }
.surf-btn { width: 100%; background: #1b2430; color: #e6edf3; border: 1px solid #2f3e50; border-radius: 7px; padding: 7px 10px; cursor: pointer; font-size: 12.5px; margin-top: 6px; }
.surf-btn:hover { background: #25344a; border-color: #3d8bff; }
.surf-btn.surf-go { background: #1f7a36; border-color: #1f7a36; color: #fff; }
.surf-btn.surf-go:hover { background: #248a3d; }
.surf-note { font-size: 10.5px; color: #6b7686; margin-top: 9px; text-align: center; }
.surf-stat { font-size: 11.5px; color: #9aa4b2; margin-top: 6px; }
.surf-stat b { color: #00e5ff; }
.surf-actions { margin-top: 7px; }
.surf-actions button { background: #1b2430; color: #cfe3ff; border: 1px solid #2f3e50; border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 11.5px; }
#profCv { border-radius: 6px; display: block; }
.gnss-status { font-size: 12px; padding: 5px 9px; border-radius: 6px; margin: 7px 0; text-align: center; }
.gnss-status.on { background: #14331f; color: #86efac; border: 1px solid #2c5a3a; }
.gnss-status.off { background: #2a1d22; color: #f0a0b0; border: 1px solid #5a3a44; }
.gnss-grid { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 12.5px; align-items: center; }
.gnss-grid span { color: #9aa4b2; }
.gnss-grid b { color: #cbd5e1; font-variant-numeric: tabular-nums; }

/* Import history panel */
.ih-batch { border: 1px solid #2b3440; border-radius: 9px; padding: 9px 11px; margin-bottom: 9px; background: #131922; }
.ih-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.ih-file { font-weight: 700; color: #e6edf3; font-size: 13.5px; }
.ih-meta { font-size: 11px; color: #8b95a1; }
.ih-layers { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 8px; }
.ih-layer { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.ih-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ih-ln { flex: 1; color: #cdd6e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ih-lc { color: #8b95a1; font-size: 11px; }
.ih-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ih-btn { background: #1b2128; color: #e6edf3; border: 1px solid #2b3440; border-radius: 6px; padding: 4px 9px; cursor: pointer; font-size: 11.5px; }
.ih-btn:hover { background: #232c34; }
.ih-btn.ih-del { background: #3a1d1d; color: #f0a0a0; border-color: #5a2a2a; }

/* Layer probe — "what layers are here?" */
.lpk-panel { position: fixed; z-index: 100045; min-width: 210px; max-width: 320px; max-height: 60vh; overflow: auto; background: #11161d; border: 1px solid #2b3440; border-radius: 10px; box-shadow: 0 12px 34px rgba(0,0,0,.55); direction: rtl; color: #e6edf3; }
.lpk-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 11px; border-bottom: 1px solid #1c232c; position: sticky; top: 0; background: #11161d; }
.lpk-head .lpk-x { background: none; border: none; color: #8b95a1; font-size: 17px; cursor: pointer; }
.lpk-radius { font-size: 11.5px; color: #9aa4b2; padding: 6px 11px 2px; display: flex; align-items: center; gap: 6px; }
.lpk-radius input { width: 64px; background: #0d1117; color: #e6edf3; border: 1px solid #2f3e50; border-radius: 5px; padding: 3px 6px; font-size: 12px; }
.lpk-radius input:focus { border-color: #2563eb; outline: none; }
.lpk-hint { font-size: 11px; color: #8b95a1; padding: 4px 11px 2px; }
#btnLayersHere.mbar-probe-on { background: #14331f; color: #86efac; }
.lpk-item { display: flex; align-items: center; gap: 9px; padding: 7px 11px; cursor: pointer; border-bottom: 1px solid #161d25; }
.lpk-item:hover { background: #1b2430; }
.lpk-item.on { background: #14331f; box-shadow: inset 3px 0 0 #22c55e; }
.lpk-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.lpk-name { flex: 1; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lpk-count { font-size: 11px; color: #8b95a1; background: #1b2430; border-radius: 10px; padding: 1px 7px; }
.lpk-item.on .lpk-count { color: #86efac; }

/* Global feature search */
.gfs-wrap { position: relative; margin-inline-end: 8px; }
.gfs-input { width: 230px; max-width: 32vw; background: rgba(20,26,34,.9); color: #e6edf3; border: 1px solid #2b3440; border-radius: 8px; padding: 7px 11px; font-size: 12.5px; outline: none; }
.gfs-input:focus { border-color: #2563eb; width: 300px; }
.gfs-results { position: absolute; top: calc(100% + 5px); inset-inline-end: 0; width: 360px; max-width: 90vw; max-height: 60vh; overflow: auto; background: #11161d; border: 1px solid #2b3440; border-radius: 10px; box-shadow: 0 12px 34px rgba(0,0,0,.55); z-index: 100040; direction: rtl; }
.gfs-item { display: flex; align-items: center; gap: 9px; padding: 7px 11px; cursor: pointer; border-bottom: 1px solid #1c232c; }
.gfs-item:hover, .gfs-item.on { background: #1b2430; }
.gfs-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.gfs-main { display: flex; flex-direction: column; min-width: 0; }
.gfs-main b { color: #e6edf3; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gfs-sub { color: #8b95a1; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gfs-empty, .gfs-more { color: #8b95a1; font-size: 12px; padding: 9px 12px; text-align: center; }

/* Language switcher (عربي / English) */
.lang-switch { position: fixed; bottom: 62px; left: 14px; z-index: 100000; display: flex; background: rgba(20,26,34,.92); border: 1px solid #2b3440; border-radius: 999px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.4); font-size: 12.5px; backdrop-filter: blur(4px); }
.lang-switch span { padding: 5px 12px; cursor: pointer; color: #9aa4b2; user-select: none; font-weight: 600; }
.lang-switch span:hover { color: #e6edf3; }
.lang-switch span.on { background: #2563eb; color: #fff; }

/* Letter editor: drag measurement guides */
.le-guides { position: absolute; inset: 0; pointer-events: none; z-index: 50; }
.le-gl { position: absolute; background: rgba(37,99,235,.55); }
.le-gl.h { height: 1px; left: 0; right: 0; }
.le-gl.v { width: 1px; top: 0; bottom: 0; }
.le-glab { position: absolute; background: #2563eb; color: #fff; font-size: 10px; font-family: Arial; padding: 1px 5px; border-radius: 3px; white-space: nowrap; transform: translate(-50%, -50%); direction: ltr; }
.le-center-x, .le-center-y { position: absolute; background: #e11d48; }
.le-center-x { width: 1px; top: 0; bottom: 0; left: 50%; }
.le-center-y { height: 1px; left: 0; right: 0; top: 50%; }
.le-center-tag { position: absolute; background: #e11d48; color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 3px; transform: translate(-50%, -50%); }

/* Letter editor: editable tables (attachments / recipients) */
.le-tbl-blk .le-content { min-width: 60mm; }
.le-tbl-title { font-weight: 700; color: var(--accent,#0b3d6b); margin-bottom: 4px; font-size: 13px; outline: none; }
.le-tbl { border-collapse: collapse; width: 100%; font-size: 12px; }
.le-tbl th, .le-tbl td { border: 1px solid #94a3b8; padding: 3px 6px; text-align: center; }
.le-tbl th { background: #eef2f7; color: #0b3d6b; font-weight: 700; }
.le-tbl td[contenteditable]:focus { outline: 2px solid rgba(37,99,235,.4); background: #fffef5; }
.le-tbl .le-rn { width: 22px; color: #555; background: #f7f9fc; }
.le-tbl .le-delrow { width: 22px; cursor: pointer; color: #b33; background: #fdecec; user-select: none; }
.le-addrow { margin-top: 4px; background: #2563eb; color: #fff; border: none; border-radius: 4px; padding: 2px 10px; cursor: pointer; font-size: 12px; }
.le-noprint { }

/* Letter editor: per-block delete, auto attachments & recipients lists */
.le-del-blk { position: absolute; top: -10px; left: -2px; width: 18px; height: 18px; background: #e11d48; color: #fff; border-radius: 4px; font-size: 12px; line-height: 18px; text-align: center; cursor: pointer; opacity: 0; transition: opacity .15s; z-index: 6; user-select: none; }
.le-block:hover .le-del-blk { opacity: 1; }
.le-sec-title { font-weight: 700; color: var(--accent,#0b3d6b); font-size: 13px; margin-bottom: 4px; border-bottom: 1px solid var(--accent,#0b3d6b); display: inline-block; padding-bottom: 1px; }
.le-att-ol, .le-to-ol { margin: 4px 6px 0; padding-inline-start: 20px; font-size: 13px; line-height: 1.9; }
.le-att-ol li, .le-to-ol li { margin: 1px 0; }
.le-att-ol li .le-rm { color: #b33; cursor: pointer; margin-inline-start: 6px; font-weight: 700; }
.le-to-head { font-weight: 700; }
.le-cc-list { font-size: 13px; line-height: 1.8; margin-top: 3px; }
.le-cc-row2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 1px dotted #bbb; padding: 1px 0; }
.le-cc-purp { color: #555; white-space: nowrap; }
.le-cc-row2 .le-rm { color: #b33; cursor: pointer; font-weight: 700; }


/* ── Pipeline-survey event photos (thumbnails + lightbox) ── */
.feat-pimg-section{margin-top:8px}
.pimg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:4px;margin-top:4px}
.pimg-cell{position:relative;aspect-ratio:1;border-radius:5px;overflow:hidden;cursor:pointer;background:#11161c;border:1px solid #2a323c}
.pimg-cell img{width:100%;height:100%;object-fit:cover;display:block}
.pimg-cell:hover{outline:2px solid #8e44ad}
.pimg-lightbox{position:fixed;inset:0;z-index:100080;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;flex-direction:column}
.pimg-lb-bar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:10px 16px;color:#fff;font-size:13px;background:linear-gradient(rgba(0,0,0,.6),transparent);direction:ltr}
.pimg-lb-x{background:none;border:none;color:#fff;font-size:28px;cursor:pointer;line-height:1}
.pimg-lb-img{max-width:92vw;max-height:86vh;object-fit:contain;border-radius:6px}
.pimg-lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.4);border:none;color:#fff;font-size:42px;width:54px;height:84px;cursor:pointer;border-radius:8px}
.pimg-prev{left:14px}
.pimg-next{right:14px}
.pimg-lb-nav:hover{background:rgba(142,68,173,.7)}


/* ── Pipeline longitudinal profile panel ── */
.pipe-profile-panel{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:100070;background:#0d1218;border:1px solid #2a323c;border-radius:10px;box-shadow:0 8px 40px rgba(0,0,0,.6);display:none;flex-direction:column;padding:8px 10px 10px;direction:rtl}
.pp-bar{display:flex;align-items:center;gap:12px;color:#cfe;font-size:13px;padding:2px 2px 8px}
.pp-bar b{color:#7cc4ff}
.pp-hint{opacity:.6;font-size:11px;flex:1}
.pp-x{background:none;border:none;color:#fff;font-size:20px;cursor:pointer;line-height:1}
.pp-svg{background:#0b0f14;border-radius:6px;direction:ltr}
.pp-grid{stroke:#1c2530;stroke-width:1}
.pp-axt{fill:#7e8a98;font-size:10px}
.pp-axl{fill:#9fb0c0;font-size:11px}
.pp-line{fill:none;stroke:#27c2ff;stroke-width:2}
.pp-evln{stroke:#2a3340;stroke-width:1;stroke-dasharray:2 3}
.pp-ev{cursor:pointer}
.pp-ev:hover circle{r:7}
.pp-tip{position:absolute;background:#111821;border:1px solid #2a3a4a;border-radius:6px;padding:5px 8px;font-size:11px;color:#dfeaf2;pointer-events:none;z-index:5;max-width:240px;direction:rtl}


/* ── Granular per-tool capabilities ── */
.cap-hidden{display:none !important}
.ue-caps-wrap{margin-top:10px;border-top:1px solid #2a323c;padding-top:8px}
.ue-caps-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ue-cap-mini{background:#1b2128;color:#cfe;border:1px solid #2a323c;border-radius:5px;padding:2px 8px;font-size:11px;cursor:pointer}
.ue-cap-hint{font-size:11px;opacity:.55;margin:3px 0 6px}
.ue-caps{max-height:300px;overflow:auto;border:1px solid #2a323c;border-radius:6px;padding:6px}
.ue-cap-grp{margin-bottom:6px}
.ue-cap-ghead{background:#161c24;border-radius:4px;padding:3px 6px;position:sticky;top:0;z-index:1}
.ue-cap-ghead b{font-size:12px;color:#7cc4ff}
.ue-cap-ghead label{display:flex;align-items:center;gap:6px;cursor:pointer}
.ue-cap-items{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;padding:4px 4px 2px}
.ue-cap{display:flex;align-items:center;gap:5px;font-size:12px;cursor:pointer}
.ue-cap span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


/* ── Profile zoom buttons + jump flash ── */
.pp-zoom{display:flex;gap:3px}
.pp-zb{background:#1b2128;border:1px solid #2a323c;color:#cfe;border-radius:5px;width:24px;height:22px;cursor:pointer;font-size:13px;line-height:1;padding:0}
.pp-zb:hover{background:#27323d}
.pp-svg{touch-action:none}
.prof-flash{width:26px;height:26px;border-radius:50%;background:rgba(46,194,255,.55);pointer-events:none;animation:profPulse 1.1s ease-out infinite}
@keyframes profPulse{0%{transform:scale(.5);box-shadow:0 0 0 0 rgba(46,194,255,.6)}70%{transform:scale(1.5);box-shadow:0 0 0 20px rgba(46,194,255,0)}100%{transform:scale(.5);box-shadow:0 0 0 0 rgba(46,194,255,0)}}


/* ── Net-area report ── */
.na-grid{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:10px}
.na-card{background:#11161c;border:1px solid #2a323c;border-radius:8px;padding:8px 12px;display:flex;flex-direction:column;gap:3px}
.na-card span{font-size:11px;opacity:.65}
.na-card b{font-size:14px;direction:ltr;text-align:right}
.na-cut{border-color:#5a3a2a}.na-cut b{color:#e6a37a}
.na-net{border-color:#2e6a3a;background:#10241a}.na-net b{color:#7ee2a0;font-size:16px}
.na-tt{font-size:12px;opacity:.7;margin:4px 0}
.na-tbl{max-height:200px;overflow:auto;border:1px solid #2a323c;border-radius:6px}
.na-tbl table{width:100%;border-collapse:collapse;font-size:12px}
.na-tbl th{position:sticky;top:0;background:#161c24;text-align:right;padding:5px 8px;color:#7cc4ff}
.na-tbl td{padding:4px 8px;border-top:1px solid #20262e}


/* ── Users tree: company → role → users ── */
.ug{margin-bottom:6px}
.ug-head{width:100%;display:flex;align-items:center;gap:8px;background:#141b24;border:1px solid #263241;border-radius:8px;padding:8px 10px;cursor:pointer;color:#dfe9f3}
.ug-head:hover{background:#18202b}
.ug-caret{transition:transform .15s;font-size:11px;color:#7cc4ff}
.ug.collapsed .ug-caret{transform:rotate(-90deg)}
.ug-name{flex:1;text-align:right;font-weight:700;font-size:13px;color:#7cc4ff}
.ug-count{font-size:11px;background:#0d1117;border:1px solid #2a323c;border-radius:10px;padding:1px 8px;color:#9aa4b2}
.ug-body{padding:4px 0;margin-inline-start:6px;border-inline-start:2px solid #202a36}
.ug.collapsed .ug-body{display:none}
.ur-head{font-size:11px;color:#8b97a5;padding:6px 10px 2px;display:flex;align-items:center;gap:6px;font-weight:600}
.ur-count{background:#0d1117;border:1px solid #2a323c;border-radius:9px;padding:0 6px;font-size:10px}
.users-row.sel{border-color:#3d8bff !important;background:#12233a !important}

.ai-shared{font-size:10px;opacity:.8}
.ai-btn.ai-on{background:#12331f;border-color:#2e6a3a;color:#7ee2a0}

.ai-btn.ai-srv{background:#1a2431;border-color:#2a3a4a;color:#9cc4f0}


/* ── Print-layout: 4 corner resize handles + lock badges ── */
.pl-fe-c { width: 13px; height: 13px; border-radius: 3px; background: #3d8bff; }
.pl-fe-tl { top: -7px; left: -7px; cursor: nwse-resize; }
.pl-fe-tr { top: -7px; right: -7px; cursor: nesw-resize; }
.pl-fe-bl { bottom: -7px; left: -7px; cursor: nesw-resize; }
.pl-fe-br { bottom: -7px; right: -7px; cursor: nwse-resize; }
.pl-fe-move { left: 16px; }
.pl-fe-del { right: 16px; }
.pl-fe-locked { outline: 1px dashed rgba(234,179,8,.7); outline-offset: 2px; }
.pl-fe-locked .pl-fe-c { background: #eab308; box-shadow: 0 0 0 2px rgba(234,179,8,.35); }
.pl-fe-locked .pl-fe-c::after { content: "🔒"; position: absolute; font-size: 9px; left: 50%; top: 50%; transform: translate(-50%,-52%); }
.pl-fe-locked .pl-fe-move { display: none; }


/* ── Per-cell independent resize grips (table) ── */
.fe-cellw,.fe-cellh{position:absolute;width:11px;height:11px;background:#e67e22;border:1.5px solid #fff;border-radius:2px;transform:translate(-50%,-50%);z-index:6;box-shadow:0 1px 3px rgba(0,0,0,.5)}
.fe-cellw{cursor:ew-resize}
.fe-cellh{cursor:ns-resize}


/* ── Make whole column/row resize zones visible along the full boundary (not just on hover) ── */
.fe-tbl-h .fe-colh{width:11px;background:linear-gradient(to right,transparent calc(50% - 0.6px),rgba(61,139,255,.35) calc(50% - 0.6px),rgba(61,139,255,.35) calc(50% + 0.6px),transparent calc(50% + 0.6px))}
.fe-tbl-h .fe-colh:hover{background:linear-gradient(to right,transparent calc(50% - 1.1px),rgba(61,139,255,.95) calc(50% - 1.1px),rgba(61,139,255,.95) calc(50% + 1.1px),transparent calc(50% + 1.1px))}
.fe-tbl-h .fe-rowh{height:11px;background:linear-gradient(to bottom,transparent calc(50% - 0.6px),rgba(61,139,255,.35) calc(50% - 0.6px),rgba(61,139,255,.35) calc(50% + 0.6px),transparent calc(50% + 0.6px))}
.fe-tbl-h .fe-rowh:hover{background:linear-gradient(to bottom,transparent calc(50% - 1.1px),rgba(61,139,255,.95) calc(50% - 1.1px),rgba(61,139,255,.95) calc(50% + 1.1px),transparent calc(50% + 1.1px))}


/* ── Print palette groups + template dialog ── */
.pl-pal-grp{display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 4px;border-inline-end:1px solid #2a323c}
.pl-pal-grp .pl-pal-lbl{font-size:10px;opacity:.55;margin-inline-start:2px}
.tpl-savebar{display:flex;gap:8px;align-items:center}
.tpl-cb{display:flex;gap:5px;align-items:center;font-size:12px;white-space:nowrap}
.tpl-list{border:1px solid #2a323c;border-radius:6px;max-height:170px;overflow:auto}
.tpl-row{display:flex;align-items:center;gap:6px;padding:5px 8px;border-bottom:1px solid #20262e}
.tpl-nm{flex:1;font-size:13px}
.tpl-nm small{opacity:.5;font-size:10px;margin-inline-start:6px}
.tpl-empty{padding:10px;opacity:.5;font-size:12px;text-align:center}

/* ── 📁 Files view (layers grouped by import file) ─────────────────────── */
.fv-file { border: 1px solid #26313f; border-radius: 8px; margin: 6px 4px; background: #101823; overflow: hidden; }
.fv-head { display: flex; align-items: center; gap: 6px; padding: 7px 8px; cursor: default; }
.fv-tgl  { background: none; border: none; color: #8b95a1; cursor: pointer; font-size: 13px; padding: 2px 4px; }
.fv-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; color: #dbe4ee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.fv-meta { font-size: 10.5px; color: #8b95a1; white-space: nowrap; }
.fv-acts { display: flex; gap: 2px; }
.fv-btn  { background: #1a2634; border: 1px solid #2c3a4c; border-radius: 6px; color: #cfe0f5; cursor: pointer; font-size: 12px; padding: 3px 7px; line-height: 1; }
.fv-btn:hover { background: #24344a; }
.fv-del:hover { background: #7f1d1d; border-color: #b91c1c; }
.fv-layers { border-top: 1px solid #1d2836; padding: 2px 4px 4px; }

/* ── Overlap picker: hidden features (shown 🙈 with an unhide action) ────── */
.feat-picker-row.fp-hidden { opacity: 0.75; }
.feat-picker-row.fp-hidden .fp-ln { text-decoration: line-through; text-decoration-color: #8b95a1; }
.fp-hid { font-size: 10px; color: #f39c12; white-space: nowrap; margin-inline-start: 6px; }
.fp-unhide { background: #1a2f1f; border: 1px solid #2e6b3a; border-radius: 6px; color: #7ee29a;
             cursor: pointer; font-size: 10.5px; padding: 2px 7px; line-height: 1.4; margin-inline-start: 6px; white-space: nowrap; }
.fp-unhide:hover { background: #24522f; }

/* ── Global search: full results panel ───────────────────────────────────── */
.gfs-openlist { padding: 8px 10px; font-size: 12px; font-weight: 700; color: #7cc4ff; cursor: pointer;
                border-bottom: 1px solid #1d2836; background: #12203a; }
.gfs-openlist:hover { background: #16294a; }
.gfs-panel { position: fixed; top: 64px; left: 10px; z-index: 4200; width: 380px; max-width: 92vw;
             max-height: calc(100vh - 90px); display: none; flex-direction: column; direction: rtl;
             background: #0f1722; border: 1px solid #26313f; border-radius: 12px;
             box-shadow: 0 12px 40px rgba(0,0,0,.5); overflow: hidden; }
.gfs-p-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: #141f2d;
              border-bottom: 1px solid #1d2836; }
.gfs-p-title { flex: 1; font-size: 13px; font-weight: 700; color: #dbe4ee; white-space: nowrap;
               overflow: hidden; text-overflow: ellipsis; }
.gfs-p-x { background: none; border: none; color: #8b95a1; font-size: 18px; cursor: pointer; padding: 0 4px; }
.gfs-p-x:hover { color: #ef4444; }
.gfs-p-tools { display: flex; gap: 5px; padding: 6px 10px; border-bottom: 1px solid #1d2836; flex-wrap: wrap; }
.gfs-p-q { flex: 1; min-width: 120px; background: #141c26; border: 1px solid #2c3a4c; border-radius: 7px;
           color: #dbe4ee; font-size: 12px; padding: 5px 9px; }
.gfs-p-sel { background: #141c26; border: 1px solid #2c3a4c; border-radius: 7px; color: #dbe4ee;
             font-size: 11.5px; padding: 4px 6px; max-width: 46%; }
.gfs-p-btn { background: #1a2634; border: 1px solid #2c3a4c; border-radius: 7px; color: #cfe0f5;
             cursor: pointer; font-size: 11.5px; padding: 4px 9px; }
.gfs-p-btn:hover { background: #24344a; }
.gfs-p-list { flex: 1; overflow-y: auto; padding: 4px 0; }
.gfs-p-row { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; }
.gfs-p-row:hover { background: #16212e; }
.gfs-p-row.on { background: #12283e; }
.gfs-p-cb { accent-color: #3498db; cursor: pointer; }

/* ── Map FAB dock: language / help / work-together pills live on the map edge,
     never over the layers sidebar ─────────────────────────────────────────── */
#mapFabDock { position: absolute; left: 12px; bottom: 8px; z-index: 950;
              display: flex; align-items: center; gap: 8px; pointer-events: none; }
#mapFabDock > * { pointer-events: auto; }
#mapFabDock .lang-switch, #mapFabDock #helpBtn, #mapFabDock .cs-fab,
#mapFabDock #pwaInstallBtn {
  position: static !important; left: auto !important; right: auto !important;
  top: auto !important; bottom: auto !important; margin: 0 !important; }
/* The work-together pill is status now, not a command: hidden until a session
   is live (collab-session.js sets the attribute). .cs-fab declares no display,
   so the UA rule for [hidden] would already win — this is here to say so. */
#mapFabDock .cs-fab[hidden] { display: none !important; }

/* L6.5-D — the ⋯ disc (plan §8). Language, help and install collapse behind one
   control on the map's bottom-left corner. It reuses `.mbar-menu`, which means
   app.js's outside-click and Escape handlers close it for free — but it also
   means the dropdown arrives anchored to the header (`position: fixed; top:
   var(--header-h)`) with an inline `left` written from a button rect. Neither
   applies down here, so both are overridden; the !important beats that inline
   style, not another rule. Same release the map stack and the ＋ New panel menu
   needed. */
.fab-disc { position: relative; }
.fab-disc > .mbar-btn.fab-disc-btn {
  width: 30px; height: 30px; padding: 0; gap: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1; font-weight: 700;
  border-radius: 50%;
  background: rgba(20,26,34,.92);
  border: 1px solid #2b3440;
  color: #cfe3ff;
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
  backdrop-filter: blur(4px);
}
.fab-disc > .mbar-btn.fab-disc-btn::after { display: none; }
.fab-disc.open > .mbar-btn.fab-disc-btn,
.fab-disc > .mbar-btn.fab-disc-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.fab-disc > .mbar-dropdown {
  position: absolute; top: auto !important; bottom: calc(100% + 6px);
  left: 0 !important; right: auto;
  min-width: 170px; gap: 4px;
  border-radius: var(--radius);
}
/* The adopted pills keep their own look; they only need to stop being pills in
   a row and start being rows in a menu. */
.fab-disc > .mbar-dropdown > * { width: 100%; justify-content: flex-start; }

/* Search panel: draggable + resizable */
.gfs-panel { resize: both; min-width: 300px; min-height: 220px; }
.gfs-p-head { cursor: move; user-select: none; }
.gfs-panel.max { max-height: none !important; }

/* Search panel: isolate controls */
.gfs-p-iso-on { background: #4a3b12 !important; border-color: #b8860b !important; color: #ffd76a !important; }
.gfs-p-dim { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: #8b95a1; }
.gfs-p-dim input[type=range] { width: 80px; accent-color: #f39c12; }

/* FAB dock anchors inside #map — needs a positioning context there */
#map { position: relative; }

/* Files view: file NAME gets its own full-width line, meta beneath it */
.fv-head { align-items: flex-start; }
.fv-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.fv-name { white-space: normal; word-break: break-word; overflow: hidden;
           display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
           line-height: 1.35; text-overflow: clip; direction: ltr; text-align: right; }
.fv-meta { white-space: normal; line-height: 1.4; }
.fv-acts { flex-shrink: 0; }

/* Files view: match the inner layer rows — LTR, name left-aligned */
.fv-file { direction: ltr; }
.fv-name { direction: ltr; text-align: left; }
.fv-meta { direction: ltr; text-align: left; }
.fv-toolbar { display: flex; padding: 6px 4px 2px; }
.fv-toolbar .fv-btn { width: 100%; padding: 6px 10px; font-size: 12px; }

/* Files view: the action reflecting the CURRENT state glows */
.fv-btn.fv-on { border-color: #3498db; color: #7cc4ff; background: #142c44; }

/* Files view: isolate mode — the isolated file's card stands out */
.fv-file.fv-isolated { border-color: #0ea5e9; box-shadow: 0 0 0 1px #0ea5e9 inset; }
/* Hovering a file card hints that its features light up on the map */
.fv-file:hover { border-color: #155e75; }
#fvIsoDim { accent-color: #0ea5e9; }

/* ── Feature ⇄ Document smart links ──────────────────────────────────────── */
.fdoc-sec { margin-top: 10px; border-top: 1px solid #26313f; padding-top: 8px; direction: rtl; }
.fdoc-h { font-size: 12px; font-weight: 700; color: #7cc4ff; margin-bottom: 5px; }
.fdoc-hint { font-size: 9.5px; color: #8b95a1; font-weight: 400; }
.fdoc-row { display: flex; align-items: center; gap: 7px; padding: 5px 7px; border: 1px solid #26313f;
            border-radius: 7px; margin: 3px 0; cursor: pointer; background: #121a26; }
.fdoc-row:hover { background: #182636; border-color: #3498db55; }
.fdoc-name { flex: 1; min-width: 0; font-size: 11.5px; color: #dbe4ee; direction: ltr; text-align: left;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fdoc-num { font-size: 10px; color: #f39c12; direction: ltr; }
.fdoc-dl { color: #2ecc71; font-size: 12px; }
.fdoc-more { font-size: 10.5px; color: #8b95a1; text-align: center; padding: 3px; }

/* Doc cards: link-tag chips */
.doc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.doc-tag { font-size: 9.5px; color: #7cc4ff; background: #12283e; border: 1px solid #1e4976;
           border-radius: 999px; padding: 1px 8px; direction: ltr; }

/* ── Print layout: UTM grid over the main map frame ──────────────────────── */
.pl-grid-ovl { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.pl-grid-ovl svg { position: absolute; inset: 0; }
.pl-grid-ovl line { stroke: rgba(30,90,160,0.55); stroke-width: 0.35; }
.pl-grid-lbl { position: absolute; font: 400 2.4mm/1 Arial, sans-serif; color: #1e5aa0;
               background: rgba(255,255,255,0.85); padding: 0.2mm 0.8mm; border-radius: 0.5mm;
               white-space: nowrap; direction: ltr; }
.pl-grid-lbl.v { top: 0.6mm; transform: translateX(-50%); }
.pl-grid-lbl.h { left: 0.6mm; transform: translateY(-50%); }

/* Print layout: undo/redo history menu */
.pl-hist-h { font-size: 10px; color: #8b95a1; padding: 4px 10px 2px; font-weight: 700; }
#plUndo:disabled, #plRedo:disabled, #plUndoList:disabled { opacity: 0.35; cursor: default; }

/* ─── Subscription plans (license.js) ─────────────────────────────────────── */
.lic-locked { opacity: .45 !important; position: relative; cursor: pointer !important; }
.lic-locked::after { content: '🔒'; font-size: 10px; position: absolute; top: 1px; left: 3px; pointer-events: none; }
.lic-chip { border: none; border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 700;
  cursor: pointer; white-space: nowrap; font-family: inherit; }
.lic-chip.lic-free { background: #e2e8f0; color: #334155; }
.lic-chip.lic-trial { background: linear-gradient(135deg,#f59e0b,#ef4444); color: #fff; }
.lic-chip.lic-standard { background: #0ea5e9; color: #fff; }
.lic-chip.lic-advanced { background: linear-gradient(135deg,#6d28d9,#c026d3); color: #fff; }
.lic-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 10050;
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.lic-box { background: #fff; border-radius: 16px; max-width: 900px; width: 100%; max-height: 92vh;
  overflow: auto; padding: 22px 24px; position: relative; box-shadow: 0 24px 70px rgba(0,0,0,.35); }
.lic-box h2 { margin: 0 0 4px; font-size: 20px; }
.lic-sub { color: #64748b; font-size: 13px; margin-bottom: 14px; }
.lic-close { position: absolute; top: 12px; left: 12px; border: none; background: #f1f5f9;
  border-radius: 8px; width: 30px; height: 30px; cursor: pointer; font-size: 14px; }
.lic-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.lic-card { border: 1.5px solid #e2e8f0; border-radius: 14px; padding: 14px 16px; position: relative; }
.lic-card-hi { border-color: #c026d3; box-shadow: 0 6px 22px rgba(192,38,211,.15); }
.lic-card-cur { outline: 2px solid #10b981; outline-offset: 2px; }
.lic-cur-badge { position: absolute; top: -10px; right: 12px; background: #10b981; color: #fff;
  font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 2px 10px; }
.lic-card-title { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.lic-card-price { font-size: 15px; margin-bottom: 10px; color: #0f172a; }
.lic-card-price b { font-size: 22px; }
.lic-per { color: #64748b; font-size: 11.5px; }
.lic-usd { color: #64748b; font-size: 11.5px; }
.lic-card ul { margin: 0; padding-inline-start: 18px; font-size: 12.5px; color: #334155; line-height: 1.9; }
.lic-pay { margin-top: 16px; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 12px; padding: 12px 16px; }
.lic-pay-title { font-weight: 800; margin-bottom: 6px; }
.lic-pay-row { font-size: 13px; margin: 3px 0; }
.lic-pay-note { color: #64748b; font-size: 12px; margin-top: 6px; }
.lic-wa { display: inline-block; margin-top: 8px; background: #22c55e; color: #fff; text-decoration: none;
  border-radius: 10px; padding: 7px 16px; font-size: 13px; font-weight: 700; }
.ue-plan { margin-top: 10px; padding: 10px 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; }
.ue-plan-quick { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }

/* ── payments (v189) ─────────────────────────────────────── */
.lic-pay-btn { width: 100%; margin-top: 10px; padding: 9px 12px; border: 0; border-radius: 8px;
  background: linear-gradient(135deg, #7c3aed, #4f46e5); color: #fff; font-weight: 700;
  font-size: 13px; cursor: pointer; font-family: inherit; }
.lic-pay-btn:hover { filter: brightness(1.15); }
.lic-pay-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.lic-pay-table th { background: rgba(124, 58, 237, .15); padding: 7px 9px; text-align: right;
  white-space: nowrap; position: sticky; top: 0; }
.lic-pay-table td { padding: 6px 9px; border-bottom: 1px solid rgba(148, 163, 184, .15); white-space: nowrap; }
.lic-pay-table tr:hover td { background: rgba(148, 163, 184, .07); }

/* card pay button variant (v190) */
.lic-pay-btn.lic-pay-card { background: linear-gradient(135deg, #0ea5e9, #2563eb); }

/* ── point groups panel (v191) ───────────────────────────── */
#pgSection { margin: 6px 0 10px; }
.pg-head { font-weight: 700; font-size: 13px; margin: 4px 2px 6px; display: flex; align-items: center; gap: 6px; }
.pg-total { background: rgba(124, 58, 237, .25); border-radius: 10px; padding: 1px 8px; font-size: 11px; }
.pg-row { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, .18); margin-bottom: 4px; background: rgba(148, 163, 184, .05); }
.pg-row:hover { background: rgba(148, 163, 184, .12); }
.pg-row.pg-off { opacity: .45; }
.pg-info { flex: 1; min-width: 0; }
.pg-name { font-size: 12.5px; font-weight: 600; cursor: pointer; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.pg-name:hover { text-decoration: underline; }
.pg-count { background: rgba(59, 130, 246, .25); border-radius: 9px; padding: 0 7px; font-size: 10.5px; font-weight: 700; }
.pg-src { font-size: 10.5px; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-btn { background: none; border: 0; cursor: pointer; font-size: 14px; padding: 2px 3px;
  border-radius: 6px; line-height: 1; flex: 0 0 auto; }
.pg-btn:hover { background: rgba(148, 163, 184, .2); }
.pg-btn .ps-dot, .pg-btn .ps-dot-ico { pointer-events: none; }
.pg-style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.pg-style-grid label { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; font-size: 12.5px; }

/* ── 📁 Files view: filters + totals + file style dialog (v192) ─────────── */
.fv-filters {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  padding: 6px 8px; margin: 0 0 6px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08);
}
.fv-fin {
  background: rgba(0, 0, 0, 0.25); color: var(--text, #e8eaed);
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 6px;
  padding: 3px 6px; font-size: 11px; max-width: 130px;
}
.fv-fin:focus { outline: none; border-color: #3b82f6; }
#fvSearch { flex: 1 1 110px; min-width: 90px; }
.fv-flab { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; opacity: 0.85; }
.fv-flab input[type="date"] { max-width: 108px; color-scheme: dark; }
.fv-clear { color: #f87171 !important; }
.fv-total { font-size: 10.5px; opacity: 0.75; margin-inline-start: auto; white-space: nowrap; }
.fv-ext {
  display: inline-block; padding: 0 4px; border-radius: 4px; font-size: 9px; font-weight: 700;
  background: rgba(59, 130, 246, 0.25); color: #93c5fd; letter-spacing: 0.4px;
}
.fv-style-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.fv-style-grid label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.fv-style-grid input[type="color"] { width: 44px; height: 28px; border: none; background: none; cursor: pointer; }
.fv-style-grid input[type="range"] { flex: 1; }
#fvStOpVal { min-width: 36px; text-align: center; font-size: 11px; opacity: 0.8; }

/* ═══════════════════════════════════════════════════════════════════════════
   L6.6-A — icon system (design §8).
   One stroke family, referenced from the icons.js sprite via <use>.
   The seven control states are PRESENTATION ONLY: requirePerm(), TOOL_CAPS
   and every server-side check remain the authoritative gate (§14).
   ═══════════════════════════════════════════════════════════════════════ */
.ic {
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -2px; flex: 0 0 auto; pointer-events: none;
}

/* §8.4 — the seven states. .ctl marks a control that opts into the family.  */
.ctl { opacity: .82; }
.ctl:hover:not(.ctl-disabled):not(.ctl-permlock) { opacity: 1; }

/* active = tool engaged: accent tint + 2px underline (survives greyscale)   */
.ctl-active {
  opacity: 1 !important;
  background: rgba(45, 140, 240, .16) !important;
  box-shadow: inset 0 -2px 0 var(--accent, #2d8cf0);
}
/* toggled = persistent setting on (Snapping): accent colour, no underline   */
.ctl-toggled { opacity: 1 !important; color: var(--accent, #2d8cf0); }

/* context-disabled: exists, but not now — tooltip says why                  */
.ctl-disabled, .ctl-permlock {
  opacity: .35 !important; cursor: not-allowed !important;
}
/* permission-disabled: same grey + a small lock badge, so "not permitted"
   is visibly different from "select a feature first"                        */
.ctl-permlock { position: relative; }
.ctl-permlock::after {
  content: ''; position: absolute; right: 1px; bottom: 1px;
  width: 8px; height: 8px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 018 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 018 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* busy: spinner replaces the glyph, delayed 1.5s so quick work never flashes */
.ctl-busy { position: relative; pointer-events: none; }
.ctl-busy > .ic { visibility: hidden; }
.ctl-busy::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  opacity: 0;
  animation: l66-spin .8s linear infinite, l66-appear 0s linear 1.5s forwards;
}
@keyframes l66-spin { to { transform: rotate(360deg); } }
@keyframes l66-appear { to { opacity: 1; } }

/* ═══════════════════════════════════════════════════════════════════════════
   L6.6-B — header split & responsive, status bar (design §7.1, §10)
   ═══════════════════════════════════════════════════════════════════════════
   The header used to be ONE flex row: brand + the whole menubar + the context
   cluster. At 1920 that already overflowed, so the feature search sat off the
   right edge on every machine (§10.1). It is now two rows: row 1 is context
   (44 px), row 2 is the toolbar (36 px) and owns the full width. --header-h is
   the sum, so everything keyed on it (.layout padding, .mbar-dropdown top, the
   drawer, the panels) follows without being touched. Under 1024 px the wrapper
   is display:contents and the L6.5 mobile header returns unchanged. */
:root { --status-h: 24px; --hdr-row1-h: 44px; --hdr-row2-h: 36px; }

@media (min-width: 1024px) {
  :root { --header-h: 80px; }                       /* 44 + 36 */
  .header { flex-direction: column; align-items: stretch; justify-content: flex-start;
            padding: 0; gap: 0; }
  .hdr-context { display: flex; align-items: center; gap: 8px; height: var(--hdr-row1-h);
                 padding: 0 12px; flex: none; min-width: 0; }
  .header .map-menubar { height: var(--hdr-row2-h); flex: none; justify-content: flex-start;
                         padding: 0 8px; border-top: 1px solid var(--border);
                         overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .header .map-menubar::-webkit-scrollbar { display: none; }
  .header-actions { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
  /* Search: row-1 centre-left, elastic; it compresses before anything folds. */
  .hdr-context .gfs-wrap { order: -1; flex: 0 1 380px; min-width: 140px; margin-inline-end: auto; }
  .hdr-context .gfs-input, .hdr-context .gfs-input:focus { width: 100%; max-width: none; }
}
@media (max-width: 1023.98px) {
  .hdr-context { display: contents; }
  .header-brand { order: 0; }
  .header .map-menubar { order: 1; }
  .header-actions { order: 2; }
  .hdr-more { display: none !important; }           /* nothing folds on mobile */
}

/* Row-1 overflow ⋯ (header.js) — reuses .mbar-menu; anchored to its own button,
   not to the header bottom, and its items stack as rows. */
.hdr-more { position: relative; }
.hdr-more > .mbar-btn { height: 28px; padding: 0 6px; }
.hdr-more > .mbar-dropdown { top: calc(var(--hdr-row1-h) - 2px); left: auto !important; right: 8px;
                             min-width: 200px; gap: 6px; padding: 8px; }
.hdr-more > .mbar-dropdown > * { width: 100%; }
.hdr-more > .mbar-dropdown .ws-switch, .hdr-more > .mbar-dropdown .sync-wrap { margin: 0; }
.hdr-more > .mbar-dropdown .user-chip-menu { left: 0; right: auto; }

/* Breakpoint tokens (§10.4): sidebar 320 xl · 288 lg · 280 md (the ≤1024 rule
   already says 280 and is kept). */
@media (max-width: 1599.98px) { :root { --sidebar-w: 288px; } }
@media (max-width: 1365.98px) { :root { --sidebar-w: 280px; } }

/* ── Status bar: exactly four permanent cells ───────────────────────────── */
.status-bar {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--status-h);
  z-index: 190; display: flex; align-items: stretch;
  background: var(--bg-panel); border-top: 1px solid var(--border);
  font-family: 'Roboto Mono', monospace; font-size: 11px; color: var(--text-muted);
  user-select: none; white-space: nowrap; overflow: hidden;
}
.sb-cell { display: flex; align-items: center; gap: 6px; padding: 0 10px;
           border-inline-end: 1px solid var(--border); min-width: 0; }
.sb-cell .ic { flex: none; opacity: .8; }
.sb-coords { flex: 0 1 auto; }
.status-bar .coord-bar {                     /* was a floating pill on the map */
  position: static; transform: none; background: none; border: none; border-radius: 0;
  padding: 0; font-size: 11px; pointer-events: none; backdrop-filter: none;
  overflow: hidden; text-overflow: ellipsis;
}
.sb-scale { min-width: 72px; justify-content: center; }
.sb-crs { padding: 0 4px; }
.status-bar .map-tool.map-tool-wide {        /* the CRS picker, now a readout that happens to be clickable */
  height: 20px; width: auto; padding: 0 6px; gap: 5px; font-size: 11px; font-weight: 600;
  background: none; border: none; box-shadow: none; color: var(--text-muted); border-radius: 4px;
}
.status-bar .map-tool.map-tool-wide:hover { color: var(--text-primary); background: var(--bg-hover); }
.sb-gnss { cursor: pointer; }
.sb-gnss:hover { color: var(--text-primary); }
.sb-gnss[data-on="1"] { color: var(--text-primary); }
.sb-gnss[data-q="4"] { color: #22c55e; }
.sb-gnss[data-q="5"] { color: #eab308; }
.sb-gnss[data-q="0"] { color: var(--danger); }
.sb-ctx { margin-inline-start: auto; display: flex; align-items: center; padding: 0 8px; }
.status-bar .selection-counter { position: static; transform: none; padding: 1px 10px;
                                 font-size: 11px; box-shadow: none; }
.layout { padding-bottom: var(--status-h); }
@media (max-width: 820px) { .sidebar { bottom: var(--status-h); } }
@media (max-width: 1023.98px) {
  .status-bar { font-size: 10px; }
  .sb-cell { padding: 0 6px; gap: 4px; }
}
/* Fixed panels that used to hug the screen bottom now hug the status bar. */
.toast-container { bottom: calc(24px + var(--status-h)); }
.nearest-bar, .edit-vtx-panel, .call-bar { bottom: calc(18px + var(--status-h)); }
.sp-panel, .voice-bar, .room-panel, .vr-bcast { bottom: calc(16px + var(--status-h)); }
.pipe-profile-panel { bottom: calc(14px + var(--status-h)); }

/* ═══════════════════════════════════════════════════════════════════════════
   L6.6-C — the toolbar (design §4, §7, §8, §10)
   ═══════════════════════════════════════════════════════════════════════════
   Row 2 is now fourteen icons in three groups plus five named families (index.html
   #mapMenubar). Icons are `.mbar-icon` — deliberately NOT `.mbar-btn`, so app.js's
   dropdown sweep (stopPropagation + toggle) never touches a plain tool; a dropdown
   parent that happens to be an icon carries both (`.mbar-btn.mbar-icon.mbar-icon-dd`).
   The old .mbar-tools tray rules above are left in place but are unused: no
   element carries the class any more (test_l65_toolbar §1 was superseded). */
.mbar-icons { display: flex; align-items: center; gap: 1px; padding: 0 3px; }
.mbar-icons + .mbar-icons { border-inline-start: 1px solid var(--border); margin-inline-start: 2px; }
.mbar-icon {
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  width: 28px; height: 28px; padding: 0;
  background: none; border: 1px solid transparent; border-radius: 5px;
  color: var(--text-muted); cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.mbar-icon > .ic { width: 18px; height: 18px; flex: none; }
.mbar-icon:hover { background: var(--bg-hover); color: var(--text-primary); }
/* The lit icon is the mode you are in — the same accent fill the L6.5 tray used. */
.mbar-icon.active,
.mbar-menu.open > .mbar-icon,
.mbar-menu.has-active > .mbar-icon {
  background: rgba(45,140,240,.16); border-color: rgba(45,140,240,.45); color: var(--accent);
}
.mbar-menu.has-active > .mbar-icon::after { display: none; }   /* no dot: the fill says it */
.map-menubar .mbar-btn.mbar-icon { padding: 0; gap: 2px; height: 28px; font-size: 0; }
.mbar-icon-dd { width: 38px; }
.mbar-icon-dd > .mbar-chevron { width: 9px; height: 9px; opacity: .7; }
/* Disabled presentation (design §8.5): greyed, not gone. pointer-events stays ON so
   the tooltip can say why. */
.mbar-btn:disabled, .mbar-icon:disabled, .mbar-opt:disabled,
.mbar-btn[aria-disabled="true"], .mbar-opt[aria-disabled="true"] {
  opacity: .38; cursor: not-allowed; background: none !important; color: var(--text-muted) !important;
  border-color: transparent !important; box-shadow: none !important;
}
.mbar-dests > .mbar-menu > .mbar-btn { height: 28px; }

/* ⋯ More ▾ (md fold, header.js): the folded families' dropdowns are moved INSIDE
   this dropdown, so they must stop being fixed-position panels and become plain
   stacked sections. */
#mbarMore > .mbar-dropdown { max-height: calc(100vh - var(--header-h) - 24px); overflow-y: auto; min-width: 220px; }
#mbarMore > .mbar-dropdown .mbar-dropdown {
  display: flex; flex-direction: column;
  position: static; border: none; box-shadow: none; padding: 0; min-width: 0;
  animation: none; border-radius: 0; background: none;
}
.mbar-fold-cat { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; }
.mbar-fold-cat:first-child { border-top: none; margin-top: 0; }

/* Breakpoints (design §10.4). ≥1366 everything fits. 1024–1365 header.js folds
   Survey/Field/Team into ⋯ More ▾ (L6.8 C6 widened the fold from 1200 down to
   1024: the row's scrollbar is hidden, so an unfolded Team ▾ at 1024 was
   off-screen and undiscoverable). 1024–1199 additionally grows the targets to
   40×32 for a 10-inch tablet and places Measure/GNSS before Draw/Edit so the
   surveyor's icons come first; overflow-x (L6.6-B) stays as the safety net. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .mbar-icon { width: 40px; height: 32px; }
  .mbar-icon > .ic { width: 22px; height: 22px; }
  .map-menubar .mbar-btn.mbar-icon { height: 32px; }
  .mbar-icon-dd { width: 50px; }
  #mbarMeas { order: 1; } #mbarEditing { order: 2; } .mbar-vdivider { order: 3; } #mbarDests { order: 4; }
}
@media (max-width: 1023.98px) {
  /* L6.5 mobile header: the row wraps to two lines; icons keep the 32 px target. */
  .mbar-icon { width: 34px; height: 32px; }
  .mbar-icon > .ic { width: 20px; height: 20px; }
  .map-menubar .mbar-btn.mbar-icon { height: 32px; }
  .mbar-icon-dd { width: 44px; }
}

/* The map & view menu (design §7): the L6.5 map stack's settings, now the first
   block of the ⋯ disc (fab-dock.js adopts #mapViewMenu). Authored `hidden` and
   un-hidden on adoption, so it never paints outside the disc. */
.fab-view-menu { display: flex; flex-direction: column; gap: 1px; width: 100%;
                 padding-bottom: 4px; margin-bottom: 2px; border-bottom: 1px solid var(--border); }
.fab-view-menu[hidden] { display: none; }
.fab-view-menu > .mbar-opt { width: 100%; justify-content: flex-start; }
.fab-view-menu > .mbar-opt.active { color: var(--accent); background: rgba(45,140,240,.10); }
.fab-view-menu > .mbar-cat { padding-top: 4px; }
.fab-disc > .mbar-dropdown { min-width: 230px; }

/* draw_edit presentation (design §8.5): the Draw ▾ / Edit ▾ PARENTS and the two
   Local ⇄ UTM converters in Survey ▾ stay visible but disabled (auth.js sets the
   attribute); the dropdowns themselves stay hidden exactly as before. The old
   `body.perm-no-draw #mbarDraw, #mbarEdit { display:none }` pair became these. */
body.perm-no-draw #mbarDraw > .mbar-dropdown,
body.perm-no-draw #mbarEdit > .mbar-dropdown { display: none !important; }
body.perm-no-draw #mbarDraw > .mbar-btn,
body.perm-no-draw #mbarEdit > .mbar-btn,
body.perm-no-draw #btnGeoref,
body.perm-no-draw #btnReverseGeoref {
  opacity: .38; cursor: not-allowed; pointer-events: auto;
  background: none !important; color: var(--text-muted) !important; border-color: transparent !important;
}
/* import_export: the Data ▾ mirror of the Files tab follows the tab. */
body.perm-no-files #btnDataFiles { display: none !important; }

/* ═══ L6.6-E: contextual editing strip (design §4.2) ══════════════════════════
   A docked row under the toolbar that exists only while a draw / edit tool is
   active (body.ctx-edit-on, set by app.js _ctxBarSync). At ≥1024 px it is a
   third header row and --header-h grows by its height, so the layout padding,
   the sidebar top and every panel keyed on --header-h follow — the map is
   resized, never covered. Under 1024 px (the L6.5 single-row mobile header)
   it hangs just below the header instead, so that layout is not disturbed. */
:root { --ctx-bar-h: 32px; }
.ctx-edit-bar {
  display: flex; align-items: center; gap: 2px; flex: none;
  height: var(--ctx-bar-h); padding: 0 8px;
  background: var(--bg-panel); border-top: 1px solid var(--border);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; user-select: none;
}
.ctx-edit-bar::-webkit-scrollbar { display: none; }
.ctx-edit-bar[hidden] { display: none; }
.ceb-label { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
             color: var(--accent); opacity: .85; margin-inline-end: 8px; white-space: nowrap; }
.ceb-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; flex: none; }
.ceb-btn {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  height: 26px; padding: 0 8px;
  background: none; border: 1px solid transparent; border-radius: 5px;
  color: var(--text-muted); font-size: 11.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; white-space: nowrap; transition: background .12s, color .12s, border-color .12s;
}
.ceb-btn > svg { width: 14px; height: 14px; flex: none; }
.ceb-glyph { font-size: 12px; line-height: 1; }
.ceb-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.ceb-btn.active { background: rgba(45,140,240,.16); border-color: rgba(45,140,240,.45); color: var(--accent); }
.ceb-btn:disabled, .ceb-btn[aria-disabled="true"] {
  opacity: .38; cursor: not-allowed; background: none !important; color: var(--text-muted) !important; border-color: transparent !important;
}
.ceb-btn[hidden] { display: none; }
@media (min-width: 1024px) {
  body.ctx-edit-on { --header-h: calc(80px + var(--ctx-bar-h)); }   /* 44 + 36 + strip */
}
@media (max-width: 1023.98px) {
  .ctx-edit-bar { position: absolute; left: 0; right: 0; top: 100%; z-index: 199;
                  border-bottom: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,.35); }
}
@media (max-width: 767.98px) {
  .ceb-txt { display: none; }                          /* icons only on a phone */
  .ceb-btn { padding: 0 6px; }
}

/* ── L6.6-G: Symbology (design §18) — dialog, shared swatch, tree row, print legend ── */
.sym-tabs { display: flex; gap: 2px; padding: 6px 14px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.sym-tab { background: transparent; border: 1px solid transparent; border-bottom: none; color: var(--text-dim); font-size: 12px; padding: 5px 12px; border-radius: 6px 6px 0 0; cursor: pointer; }
.sym-tab:hover { color: var(--text); background: rgba(255,255,255,.05); }
.sym-tab.active { color: var(--text); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }
.sym-body { padding-top: 10px; }
.sym-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 8px; font-size: 12px; }
.sym-row label { display: flex; align-items: center; gap: 5px; }
.sym-row select, .sym-row input[type=number] { font-size: 12px; padding: 3px 5px; }
.sym-row .ue-save, .sym-row .ue-btn { flex: 0 0 auto; width: auto; padding: 5px 16px; }
.sym-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px 12px; border-top: 1px solid rgba(255,255,255,.08); }
.sym-stale { border: 1px solid rgba(243,156,18,.45); background: rgba(243,156,18,.08); border-radius: 6px; padding: 5px 8px; margin-bottom: 8px; }
.sym-cards { margin-top: 6px; }
/* Single symbol: one anonymous catch-all card — no head, no conditions, no colour (the layer colour is above) */
.sym-single .ps-card-head, .sym-single .ps-conds { display: none; }
.sym-single .ps-style-row label:has(.ps-color), .sym-single .ps-style-row label:has(.ps-own) { display: none; }
/* Categorized: the class value is the card name; its condition is implied */
.sym-compact .ps-conds { display: none; }
.sym-compact .ps-rule-card { padding: 5px 8px; margin-bottom: 4px; }
.sym-compact .ps-style-row { margin-top: 2px; }
/* the shared swatch: dialog cards, tree row, print legend */
.ps-sw { display: inline-block; width: 18px; height: 12px; box-sizing: border-box; flex: 0 0 auto; vertical-align: middle; }
.ps-sw-line { height: 0; border-top-width: 2px; }
.ps-sw-poly { border-radius: 2px; }
.sym-stack { display: inline-flex; align-items: center; gap: 1px; }
.sym-stack .ps-sw, .sym-stack .ps-dot, .sym-stack .ps-dot-ico { width: 7px; height: 7px; border-width: 1px; }
.sym-stack .ps-sw-line { height: 0; border-top-width: 2px; }
.sym-more { font-size: 8px; color: var(--text-dim); margin-left: 1px; }
.layer-sym-classed { width: auto; min-width: 18px; padding: 0 2px; }
/* print legend: a class sub-row sits under its layer, its swatch drawn like the map */
.leg-class { padding-left: 14px; }
#plSheet .leg-class-sw, .fe-leg-sw.leg-class-sw { background: transparent; border: none; width: auto; height: auto; display: inline-flex; }
#plSheet .leg-class-sw .ps-sw, .fe-leg-sw.leg-class-sw .ps-sw { width: 4mm; height: 2.6mm; }
#plSheet .leg-class-sw .ps-sw-line, .fe-leg-sw.leg-class-sw .ps-sw-line { height: 0; }
#plSheet .leg-class-sw .ps-dot, .fe-leg-sw.leg-class-sw .ps-dot { width: 2.6mm; height: 2.6mm; }
.pl-leg-row.leg-class .leg-eye, .fe-leg-row.leg-class .leg-eye { display: none; }

/* ─── L6.8 header status pill (owner item 6) ───────────────────────────────
   One status in the header; the manual sync actions + Activity live in a menu
   under it. The arrow (⬆/⬇) is rendered only while a transfer is real. */
.sync-wrap { position: relative; }
.sync-status.sync-busy .sync-dot { animation: syncPulse 1s ease-in-out infinite; }
@keyframes syncPulse { 50% { opacity: .35; } }
.sync-status .sync-arrow { font-weight: 700; font-size: 12px; }
.sync-status.sync-open { border-color: var(--accent, #3498db); }
.sync-status .sync-badge { min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: #e74c3c; color: #fff;
  font-size: 9px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.sync-menu { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 600; min-width: 190px; padding: 4px;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); }
.sync-menu[hidden] { display: none; }
.sync-menu .sync-now-btn { display: flex; align-items: center; gap: 8px; width: 100%; height: auto; padding: 8px 10px; border: none;
  border-radius: 6px; background: none; color: var(--text-primary); font-size: 12.5px; text-align: start; cursor: pointer; }
.sync-menu .sync-now-btn:hover { background: var(--bg-hover); }
.sync-menu .sync-now-btn .sync-ic { width: 18px; text-align: center; display: inline-block; }
.sync-menu .sync-now-btn.spinning { animation: none; }
.sync-menu .sync-now-btn.spinning .sync-ic { animation: syncSpin 0.8s linear infinite; }
.sync-menu .sync-upload-btn .sync-ic { color: #2ecc71; font-weight: 700; }
.sync-menu-sep { height: 1px; margin: 4px 6px; background: var(--border); }
.sync-menu .act-dash-btn { position: relative; font-size: 12.5px; }
.sync-menu .act-dash-btn .act-badge { position: static; margin-inline-start: auto; }
.act-dash-hdr { position: relative; }
.hdr-more > .mbar-dropdown .sync-menu { position: static; box-shadow: none; border: none; padding: 0 0 0 12px; }
/* Plan row in the account menu (license.js) */
.ucm-plan { display: flex; align-items: center; gap: 8px; }
.ucm-plan .lic-chip { padding: 2px 9px; font-size: 11px; }
/* Activity panel: state block + collapsible diagnostics (owner item 3) */
.act-status { padding: 8px 12px; font-size: 12.5px; border-bottom: 1px solid var(--border, #30363d); }
.act-status-main { font-weight: 700; }
.act-status-main small { font-weight: 400; opacity: .6; }
.act-status-sub { font-size: 11.5px; margin-top: 3px; opacity: .85; }
.act-st-offline .act-status-main, .act-st-error .act-status-main { color: #e74c3c; }
.act-st-dirty .act-status-main { color: #f39c12; }
.act-details > summary { cursor: pointer; list-style: none; }
.act-details > summary::before { content: '▸ '; opacity: .7; }
.act-details[open] > summary::before { content: '▾ '; }
html.lang-en .act-panel { direction: ltr; }

/* ── L6.8-C2 selection-action menus — one grouped vocabulary (sel-actions.js) ── */
/* Group label inside a menu (Inspect / Export / Edit …) */
.layer-menu-popup .lmp-sec {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  opacity: .5; padding: 5px 9px 2px;
}
.layer-menu-popup .lmp-lbl { flex: 1; min-width: 0; white-space: nowrap; }
/* A large group folded behind one toggle row */
.layer-menu-popup .lmp-subtoggle .lmp-caret { opacity: .55; font-size: 10px; margin-left: auto; transition: transform .12s; }
.layer-menu-popup .lmp-subtoggle.lmp-open .lmp-caret { transform: rotate(90deg); }
.layer-menu-popup .lmp-sub { padding-left: 10px; }
.layer-menu-popup .lmp-sub .lmp-item { font-size: 12px; }
/* Terminal row (Clear selection / Clear cart) — quiet, not danger */
.layer-menu-popup .lmp-terminal { opacity: .85; }
.layer-menu-popup .lmp-restore { color: #7ee787; }
.layer-menu-popup .lmp-restore:hover { background: #2ea043; color: #fff; }
/* Cart ⚙ Actions now shares the popup vocabulary; keep it above the cart panel */
.layer-menu-popup.cart-actions-menu { z-index: 4000; min-width: 240px; font-size: 13px; }
.layer-menu-popup.cart-actions-menu .lmp-item { font-size: 13px; }
/* RTL: menus read right-to-left in Arabic */
html.lang-ar .layer-menu-popup { direction: rtl; }
html.lang-ar .layer-menu-popup .lmp-item { text-align: right; }
html.lang-ar .layer-menu-popup .lmp-sub { padding-left: 0; padding-right: 10px; }
html.lang-ar .layer-menu-popup .lmp-subtoggle .lmp-caret { margin-left: 0; margin-right: auto; transform: rotate(180deg); }
html.lang-ar .layer-menu-popup .lmp-subtoggle.lmp-open .lmp-caret { transform: rotate(90deg); }

/* ── L6.8-C3 Data panel → Imported files (owner item 1) ─────────────────── */
.imf-count { font-weight: 400; color: var(--text-muted, #8b95a1); font-size: 11px; margin-left: 4px; }
.imf-list { display: flex; flex-direction: column; gap: 4px; }
.imf-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left;
  padding: 6px 8px; border-radius: 7px; border: 1px solid var(--border, #2b3440); background: var(--bg-panel, #131922);
  color: var(--text-primary, #e6edf3); cursor: pointer; font: inherit; }
.imf-row:hover { border-color: #3498db; background: rgba(52,152,219,.12); }
.imf-file { font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.imf-meta { font-size: 11px; color: var(--text-muted, #8b95a1); }
.imf-more { font-size: 11px; color: var(--text-muted, #8b95a1); padding: 4px 2px; }
.imf-empty { font-size: 11.5px; color: var(--text-muted, #8b95a1); padding: 6px 2px 8px; line-height: 1.5; }
.imf-foot { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
html.lang-ar .imf-row { text-align: right; align-items: flex-end; direction: rtl; }
html.lang-ar .imf-count { margin-left: 0; margin-right: 4px; }

/* ── L6.12: Imagery in the Layer Tree (virtual group + compact raster rows) ── */
.imagery-group-header {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 6px 3px 4px; min-height: 28px;
  background: rgba(45,140,240,.06); user-select: none;
}
.imagery-group-header:hover { background: rgba(45,140,240,.12); }
.imagery-group-header .img-group-name { cursor: default; }
.img-group-ic { display: inline-flex; color: var(--text-muted); }
.imagery-item {
  display: flex; align-items: center; flex-wrap: nowrap; gap: 5px;
  min-height: 28px; padding: 3px 6px 3px 4px;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  background: transparent; cursor: default; position: relative; overflow: hidden; user-select: none;
  transition: background .12s, border-color .12s;
}
.imagery-item:hover { background: var(--bg-hover); border-color: var(--border-light); }
.imagery-item.hidden-layer .layer-name { opacity: .5; text-decoration: line-through; }
.imagery-item .img-spacer { width: 10px; flex-shrink: 0; }
.img-vis-cb, .img-group-vis { accent-color: var(--accent); cursor: pointer; flex-shrink: 0; width: 13px; height: 13px; margin: 0; }
.img-collapse { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px; display: inline-flex; align-items: center; transition: transform .15s; }
.img-collapse.collapsed { transform: rotate(-90deg); }
.imagery-item .img-sym { display: inline-flex; color: var(--text-muted); }
.imagery-item .layer-info { min-width: 0; flex: 1; }
.imagery-item .img-op { width: 56px; height: 4px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }
.imagery-item .img-more {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 2px 5px; border-radius: 5px;
}
.imagery-item .img-more:hover { background: var(--bg-hover, rgba(255,255,255,.08)); color: var(--text-primary); }
.layer-menu-popup .img-meta { white-space: normal; max-width: 260px; }

/* ── L6.13: large-imagery engine — status rows, progress, properties ── */
.imagery-item.img-pending .layer-name { opacity: .75; }
.imagery-item .img-status { display: block; font-size: 10px; line-height: 1.2; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); }
.imagery-item .img-status.img-st-busy { color: #6fb7ff; }
.imagery-item .img-status.img-st-warn { color: #e6c07a; }
.imagery-item .img-status.img-st-fail { color: #f08a8a; }
.imagery-item .img-progress { display: block; height: 3px; margin-top: 2px; border-radius: 2px; background: rgba(120,160,220,.18); overflow: hidden; }
.imagery-item .img-progress-bar { display: block; height: 100%; background: var(--accent, #2d8cf0); border-radius: 2px; transition: width .4s ease; }
.imagery-item .img-vis-cb:disabled { opacity: .35; cursor: default; }
.layer-menu-popup .img-meta-status { color: #6fb7ff; }
.layer-menu-popup .img-meta-status.img-st-fail { color: #f08a8a; }
.aerial-row .ai-status { font-size: 10px; color: #6fb7ff; margin-inline-start: 4px; }
.aerial-row .ai-status.ai-fail { color: #f08a8a; }
.ie-props-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ie-props-table th { text-align: start; white-space: nowrap; color: var(--text-dim); font-weight: 500; padding: 3px 8px 3px 0; vertical-align: top; width: 34%; }
.ie-props-table td { padding: 3px 0; word-break: break-all; color: var(--text-primary); }
.ie-props-table tr + tr th, .ie-props-table tr + tr td { border-top: 1px solid var(--border-light, rgba(255,255,255,.06)); }

/* Intersections report — plan sketch, share donut and their legend (L6.14-C) */
.ix-figs { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; margin: 6px 0 4px; }
.ix-figs canvas { background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; }
.ix-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0 8px; font-size: 12px; }
.ix-legend .ix-lg { display: inline-flex; align-items: center; gap: 5px; max-width: 260px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ix-legend .ix-lg i { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.ix-legend .ix-lg b { opacity: .75; font-variant-numeric: tabular-nums; }

/* ============ Basra Gov MVP - target-layer picker + gov dialogs ============ */

/* Draw panel: mandatory target layer (S20) */
.draw-target { margin: 4px 0 2px; }
.draw-target-current { font-size: 11.5px; margin-top: 4px; padding: 4px 8px; border-radius: 6px;
  background: rgba(46, 134, 71, .12); color: var(--text, #d8e0ea); border: 1px solid rgba(46, 134, 71, .35); }
.draw-target-current.scratch { background: rgba(230, 160, 30, .10); border-color: rgba(230, 160, 30, .4); }
/* No target chosen yet: the picker is what is blocking the tool, so say so. */
.draw-target.needs-pick > .draw-input { border-color: #e0a020; box-shadow: 0 0 0 2px rgba(230, 160, 30, .28); }
.draw-target.needs-pick { animation: drawTargetNudge .35s ease-in-out 2; }
@keyframes drawTargetNudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* Shared gov bits */
.gov-req-star { color: #e05a4e; font-weight: 700; }
.gov-hint { font-size: 11.5px; opacity: .75; line-height: 1.6; margin: 8px 0 2px; }
.gov-empty { padding: 26px 14px; text-align: center; opacity: .7; font-size: 13px; }
.gov-badge { display: inline-block; min-width: 17px; padding: 1px 6px; margin-inline-start: 6px;
  border-radius: 9px; background: #2e8647; color: #fff; font-size: 10.5px; font-weight: 700; text-align: center; }
.gov-badge.red { background: #b3453a; }
.gov-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 7px; }
.gov-danger { color: #e05a4e !important; }
.gov-radio, .gov-check { display: block; margin: 5px 2px; font-size: 12.5px; cursor: pointer; }
.gov-radio input, .gov-check input { margin-inline-end: 7px; }
.gov-sec-list { margin: 4px 12px 6px; padding: 8px 10px; border: 1px solid var(--border, #333c48);
  border-radius: 8px; max-height: 160px; overflow-y: auto; }

/* Signup wizard (S7) */
.gov-wiz { text-align: right; }
.gov-steps { display: flex; align-items: center; gap: 4px; margin: 2px 0 16px; }
.gov-step { display: flex; align-items: center; gap: 6px; opacity: .45; }
.gov-step.active, .gov-step.done { opacity: 1; }
.gov-step-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--panel2, #2a3340); border: 1px solid var(--border, #3a4552);
  font-size: 11.5px; font-weight: 700; flex: 0 0 auto; }
.gov-step.active .gov-step-n { background: #2e8647; border-color: #2e8647; color: #fff; }
.gov-step.done .gov-step-n { background: rgba(46, 134, 71, .25); border-color: #2e8647; color: #7fce97; }
.gov-step-t { font-size: 11.5px; white-space: nowrap; }
.gov-step-line { flex: 1; height: 1px; background: var(--border, #3a4552); min-width: 8px; }
.gov-ent-name { font-size: 14px; font-weight: 700; margin: 2px 0 10px; }
.gov-review { border: 1px solid var(--border, #333c48); border-radius: 10px; overflow: hidden; }
.gov-rev-row { display: flex; border-bottom: 1px solid var(--border, #333c48); font-size: 12.5px; }
.gov-rev-row:last-child { border-bottom: none; }
.gov-rev-k { width: 150px; flex: 0 0 auto; padding: 7px 12px; opacity: .7; background: rgba(128, 128, 128, .06); }
.gov-rev-v { padding: 7px 12px; flex: 1; word-break: break-word; }
.gov-type-list { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 14px; }
.gov-type-card { display: flex; flex-direction: column; gap: 4px; text-align: right; cursor: pointer;
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border, #3a4552);
  background: var(--panel2, #2a3340); color: inherit; font: inherit; }
.gov-type-card:hover { border-color: #2e8647; background: rgba(46, 134, 71, .12); }
.gov-type-title { font-size: 14px; font-weight: 700; }
.gov-type-en { font-size: 11.5px; font-weight: 600; opacity: .65; margin-inline-start: 6px; }
.gov-type-desc { font-size: 11.5px; opacity: .75; line-height: 1.6; }
.gov-type-desc-en { font-size: 10.5px; opacity: .8; direction: ltr; unicode-bidi: embed; }

/* Layer library (S12-S15) */
.gov-lib-dialog { max-width: 900px; width: 94vw; }
.gov-lib-body { display: flex; gap: 0; min-height: 420px; max-height: 72vh; }
.gov-lib-side { width: 190px; flex: 0 0 auto; border-inline-end: 1px solid var(--border, #333c48);
  padding: 10px 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.gov-cat { display: flex; justify-content: space-between; align-items: center; width: 100%; border: none;
  background: transparent; color: inherit; text-align: start; padding: 7px 10px; border-radius: 8px;
  font-size: 12.5px; cursor: pointer; }
.gov-cat:hover { background: rgba(128, 128, 128, .12); }
.gov-cat.active { background: #2e8647; color: #fff; }
.gov-cat-n { font-size: 10.5px; opacity: .7; }
.gov-lib-main { flex: 1; padding: 12px 14px; overflow-y: auto; }
.gov-lib-search { width: 100%; margin-bottom: 10px; }
.gov-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.gov-card { border: 1px solid var(--border, #333c48); border-radius: 10px; padding: 10px 12px; cursor: pointer;
  transition: border-color .12s, transform .12s; }
.gov-card:hover { border-color: #2e8647; transform: translateY(-1px); }
.gov-card-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; }
.gov-card-desc { font-size: 11.5px; opacity: .75; margin: 5px 0 6px; min-height: 15px; }
.gov-card-meta { font-size: 11px; opacity: .55; }
.gov-lib-prev-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.gov-lib-prev-name { font-size: 15px; font-weight: 700; }
.gov-lib-prev-sub { font-size: 12px; opacity: .7; }
.gov-lib-sec-t { font-size: 12px; font-weight: 700; margin: 12px 0 6px; opacity: .85; }
.gov-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.gov-chip { font-size: 11px; padding: 3px 9px; border-radius: 20px; border: 1px solid var(--border, #3a4552);
  background: rgba(128, 128, 128, .08); }
.gov-chip.auto { border-color: rgba(46, 134, 71, .5); }
.gov-domain { font-size: 11.5px; margin: 3px 0; line-height: 1.7; }

/* Department admin console (S22-S24) */
.gov-admin-dialog { max-width: 920px; width: 94vw; }
.gov-admin-body { display: flex; min-height: 430px; max-height: 74vh; }
.gov-admin-nav { width: 168px; flex: 0 0 auto; border-inline-end: 1px solid var(--border, #333c48);
  padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; }
.gov-nav-btn { display: flex; justify-content: space-between; align-items: center; border: none; width: 100%;
  background: transparent; color: inherit; text-align: start; padding: 8px 11px; border-radius: 8px;
  font-size: 12.5px; cursor: pointer; }
.gov-nav-btn:hover { background: rgba(128, 128, 128, .12); }
.gov-nav-btn.active { background: #2e8647; color: #fff; }
.gov-admin-main { flex: 1; padding: 14px 16px; overflow-y: auto; }
.gov-ov-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.gov-ov-name { font-size: 16px; font-weight: 700; }
.gov-type-badge { font-size: 11px; padding: 2px 10px; border-radius: 20px; background: rgba(46, 134, 71, .18);
  border: 1px solid rgba(46, 134, 71, .5); }
.gov-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.gov-stat { border: 1px solid var(--border, #333c48); border-radius: 10px; padding: 12px 10px; text-align: center; }
.gov-stat-n { font-size: 21px; font-weight: 800; }
.gov-stat-l { font-size: 11.5px; opacity: .7; margin-top: 3px; }
.gov-table-wrap { overflow-x: auto; }
.gov-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.gov-table th { text-align: start; font-size: 11px; opacity: .6; padding: 6px 8px;
  border-bottom: 1px solid var(--border, #333c48); }
.gov-table td { padding: 7px 8px; border-bottom: 1px solid rgba(128, 128, 128, .12); vertical-align: middle; }
.gov-table tr.inactive td { opacity: .5; }
.gov-row-act { white-space: nowrap; text-align: end; }
.gov-row-act .at-exp-btn { padding: 3px 9px; font-size: 11px; margin-inline-start: 4px; }
.gov-req { display: flex; justify-content: space-between; gap: 12px; border: 1px solid var(--border, #333c48);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 9px; flex-wrap: wrap; }
.gov-req.rejected { opacity: .65; }
.gov-req-info { flex: 1; min-width: 240px; }
.gov-req-name { font-weight: 700; font-size: 13px; }
.gov-req-user { font-size: 11px; opacity: .6; margin-inline-start: 6px; }
.gov-req-meta { font-size: 11.5px; opacity: .8; margin-top: 4px; line-height: 1.7; }
.gov-req-act { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gov-req-act .ue-input { width: auto; min-width: 120px; margin: 0; }
.gov-req-act .ue-save { padding: 6px 14px; }

/* Responsive (S31): the console and library collapse their side rails */
@media (max-width: 720px) {
  .gov-lib-body, .gov-admin-body { flex-direction: column; }
  .gov-lib-side, .gov-admin-nav { width: 100%; flex-direction: row; flex-wrap: wrap;
    border-inline-end: none; border-bottom: 1px solid var(--border, #333c48); }
  .gov-rev-k { width: 110px; }
}

/* ── LUC Smart Compliance Checker ─────────────────────────────────────────
   A floating panel, same family as .lpk-panel: it must not take space from the
   map, and it stays open while the user clicks locations. */
.luc-panel {
  position: fixed;
  top: 90px;
  inset-inline-end: 18px;
  width: 380px;
  max-height: calc(100vh - 130px);
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
  z-index: 1400;
  font-size: 12px;
  color: var(--text);
}
.luc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--accent);
  cursor: move;
  border-radius: 8px 8px 0 0;
}
.luc-x {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
}
.luc-x:hover { color: #e74c3c; }
.luc-body { padding: 10px 12px 14px; overflow-y: auto; }
.luc-sec { margin: 10px 0 4px; }
.luc-sec-t {
  margin: 12px 0 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.luc-title { font-size: 13px; font-weight: 700; margin: 8px 0 2px; }
.luc-note { font-size: 11px; color: var(--text-dim); margin: 4px 0; }
.luc-dim { color: var(--text-dim); }
.luc-warn { color: #e0a800; font-weight: 600; }
.luc-ok { color: #2ecc71; font-size: 10px; }
.luc-miss { color: var(--text-dim); font-style: italic; }
.luc-err {
  padding: 8px 10px;
  border-radius: 4px;
  background: rgba(231,76,60,.12);
  color: #e74c3c;
}
.luc-loading, .luc-empty { padding: 14px 4px; color: var(--text-dim); }
.luc-review {
  margin: 6px 0;
  padding: 6px 8px;
  border-radius: 4px;
  background: rgba(224,168,0,.12);
  color: #e0a800;
  font-size: 11px;
}
.luc-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  cursor: pointer;
  padding: 6px 10px;
  font-size: 12px;
}
.luc-btn:hover { border-color: var(--accent); color: var(--accent); }
.luc-btn.luc-primary { background: var(--accent); border-color: var(--accent); color: #fff; width: 100%; }
.luc-btn.luc-primary:hover { filter: brightness(1.1); color: #fff; }
.luc-btn.luc-primary.on { background: #e0a800; border-color: #e0a800; }
.luc-btn.luc-sm { padding: 3px 8px; font-size: 11px; }
.luc-btn.luc-xs { padding: 2px 6px; font-size: 10px; }
.luc-row { display: flex; gap: 6px; align-items: center; margin: 4px 0; }
.luc-row > input, .luc-row > select, .luc-body > select {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  padding: 5px 7px;
  font-size: 12px;
}
.luc-body > select { width: 100%; }
.luc-tbl { width: 100%; border-collapse: collapse; margin: 4px 0; }
.luc-tbl td { padding: 3px 4px; border-bottom: 1px solid var(--border); vertical-align: top; }
.luc-tbl td:first-child { color: var(--text-dim); width: 38%; }
.luc-src { color: var(--accent); text-decoration: none; font-size: 11px; }
.luc-src:hover { text-decoration: underline; }
.luc-doc {
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 5px;
  cursor: pointer;
}
.luc-doc:hover { border-color: var(--accent); }
.luc-doc-t { font-weight: 600; }
.luc-doc-s { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.luc-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.luc-chip { padding: 1px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; color: #fff; }
.luc-chip.luc-alarp { background: #7fbf4d; }
.luc-chip.luc-low { background: #2e7d32; }
.luc-chip.luc-amber { background: #e0a800; }
.luc-chip.luc-red { background: #c0392b; }
.luc-rule {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 7px;
  margin-bottom: 5px;
}
.luc-rule-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.luc-rule-w { font-size: 11px; color: var(--text-dim); }
.luc-dec {
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 1px 6px;
  border-radius: 3px;
}
.luc-rule-a { margin-top: 3px; font-size: 11px; }
.luc-rule-r { margin-top: 2px; font-size: 11px; color: var(--text-dim); }
.luc-ev {
  margin-top: 3px;
  font-size: 10px;
  color: var(--text-dim);
  font-style: italic;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.luc-rule-btns { margin-top: 4px; display: flex; gap: 4px; }
.luc-gate { display: block; font-size: 11px; margin: 3px 0; line-height: 1.35; }
.luc-list { margin: 3px 0 3px 18px; padding: 0; font-size: 11px; }
.luc-list li { margin-bottom: 2px; }
/* The element (pipe / area / point) coverage report: a table with more than
   two columns, and the checkbox list that designates the LUC layer. */
.luc-chks { display: flex; flex-direction: column; gap: 2px; margin: 4px 0; }
.luc-chks label { font-size: 11px; display: flex; gap: 5px; align-items: center; }
.luc-tbl.luc-parts td, .luc-tbl.luc-parts th { padding: 3px 4px; font-size: 11px; }
/* The station may wrap ("16+780 →" / "28+950"): nowrap here pushed the
   DECISION column past the panel's 380px and it silently vanished. */
.luc-tbl.luc-parts td:first-child { width: auto; color: inherit; }
.luc-tbl.luc-parts th {
  text-align: left; color: var(--text-dim); font-weight: 600; font-size: 10px;
  text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border);
}
.luc-tbl.luc-parts select { max-width: 96px; font-size: 10px; padding: 1px 3px; }
.luc-tbl.luc-parts .luc-part-rep { padding: 1px 5px; font-size: 10px; }
.luc-scroll { max-height: 190px; overflow-y: auto; }
.luc-tbl.luc-parts .luc-dec { font-size: 9px; padding: 1px 5px; }


.luc-res { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.luc-res-dec {
  display: block;
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .06em;
  padding: 7px;
  border-radius: 4px;
  margin-bottom: 6px;
}

/* ── Stations (chainage) tools ──────────────────────────────────────────────
   The hover readout is a body-level fixed box that follows the pointer, so it
   is never clipped by the map viewport and never intercepts a map event. */
.sta-tip {
  position: fixed; z-index: 9000; display: none; pointer-events: none;
  min-width: 150px; max-width: 320px; padding: 7px 10px; border-radius: 8px;
  background: rgba(13, 17, 23, .93); border: 1px solid #00e5ff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
  color: #e6edf3; font-size: 11.5px; line-height: 1.5; direction: rtl;
}
.sta-tip-name { font-weight: 700; color: #00e5ff; margin-bottom: 2px; }
.sta-tip-sub  { font-size: 9.5px; color: #8b95a1; margin-bottom: 3px; }
.sta-tip-row  { display: flex; justify-content: space-between; gap: 12px; white-space: nowrap; }
.sta-tip-row span { color: #8b95a1; }
.sta-tip-row b    { color: #ffea00; font-variant-numeric: tabular-nums; }

#staGenPanel, #staHoverPanel { width: 330px; direction: rtl; }
.sta-form { display: grid; grid-template-columns: 92px 1fr; gap: 7px 8px; align-items: center; padding: 9px 10px; }
.sta-form > label { font-size: 11px; color: var(--text-secondary, #c9d1d9); }
.sta-form input[type="text"], .sta-form input[type="number"], .sta-form select {
  width: 100%; box-sizing: border-box; padding: 4px 7px; font-size: 11.5px; border-radius: 5px;
  background: var(--bg-base, #010409); border: 1px solid var(--border, #30363d); color: var(--text-primary, #e6edf3);
}
.sta-ivrow { display: flex; gap: 4px; align-items: center; }
.sta-ivrow input { flex: 0 0 62px; }
.sta-chip { flex: 1 1 auto; cursor: pointer; font-size: 10.5px; padding: 3px 0; border-radius: 5px;
  background: var(--bg-base, #010409); border: 1px solid var(--border, #30363d); color: var(--text-secondary, #c9d1d9); }
.sta-chip:hover { border-color: #00e5ff; }
.sta-chip.on { background: rgba(0, 229, 255, .16); border-color: #00e5ff; color: #00e5ff; font-weight: 700; }
.sta-dir { width: 100%; cursor: pointer; font-size: 11.5px; padding: 4px 7px; border-radius: 5px;
  background: var(--bg-base, #010409); border: 1px solid var(--border, #30363d); color: var(--text-primary, #e6edf3); }
.sta-dir:hover { border-color: #00e5ff; }
.sta-checks { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.sta-checks-col { flex-direction: column; padding: 6px 12px 10px; }
.sta-checks label { display: flex; align-items: center; gap: 5px; font-size: 11px; cursor: pointer;
  color: var(--text-secondary, #c9d1d9); }
.sta-count { padding: 3px 10px 8px; font-size: 11px; color: #00e5ff; font-weight: 600; }
.sta-note { padding: 6px 10px; font-size: 10.5px; color: #8b95a1; }
.sta-warn { margin: 0 10px 6px; padding: 5px 8px; border-radius: 6px; font-size: 10.5px;
  background: rgba(217, 119, 6, .14); border: 1px solid rgba(217, 119, 6, .5); color: #f0a35e; }
.sta-acts { display: flex; gap: 6px; padding: 0 10px 10px; }
.sta-acts button { flex: 1 1 auto; cursor: pointer; font-size: 11px; padding: 5px 8px; border-radius: 6px;
  background: var(--bg-base, #010409); border: 1px solid var(--border, #30363d); color: var(--text-secondary, #c9d1d9); }
.sta-acts button:hover:not([disabled]) { border-color: #00e5ff; color: #00e5ff; }
.sta-acts button[disabled] { opacity: .45; cursor: not-allowed; }
.sta-acts .sta-go { background: rgba(0, 229, 255, .14); border-color: #00e5ff; color: #00e5ff; font-weight: 700; }
.sta-w-start { width: 74px; box-sizing: border-box; padding: 2px 5px; font-size: 10.5px; border-radius: 4px;
  background: var(--bg-base, #010409); border: 1px solid var(--border, #30363d); color: #ffea00;
  font-variant-numeric: tabular-nums; }
.sta-w-dir, .sta-w-del { cursor: pointer; padding: 1px 7px; font-size: 12px; border-radius: 5px;
  background: #1b2430; border: 1px solid #2f3e50; color: #cfe3ff; }
.sta-w-dir:hover { border-color: #00e5ff; color: #00e5ff; }
.sta-w-del:hover { border-color: #c0392b; color: #ff7461; }

/* stations: line-source row + generator watch list */
.sta-src { display: flex; gap: 6px; margin: 6px 0 8px; flex-wrap: wrap; }
.sta-src button, .sta-src select {
  flex: 1 1 auto; min-width: 0; padding: 5px 8px; font-size: 11px;
  background: #232a33; color: #dfe6ee; border: 1px solid #3a4655;
  border-radius: 6px; cursor: pointer;
}
.sta-src button:hover:not(:disabled), .sta-src select:hover { border-color: #00e5ff; }
.sta-src button:disabled { opacity: .45; cursor: default; }
.sta-src select { max-width: 140px; }
.sta-list { max-height: 160px; overflow-y: auto; margin-bottom: 6px; }
.sta-g-del {
  background: none; border: none; color: #ff7b7b; font-size: 14px;
  cursor: pointer; padding: 0 4px;
}
.sta-g-del:hover { color: #ff3b3b; }