:root {
  --bg-body: #0f1117; --bg-header: #1a1d27; --bg-card: #1e2235; --bg-input: #151827;
  --bg-hover: #21253a; --bg-active: #252838; --bg-deep: #171a27;
  --border: #2d3148; --border-light: #1e2235;
  --text-primary: #e2e8f0; --text-secondary: #cbd5e1; --text-label: #a8b4d0;
  --text-muted: #8892b0; --text-dim: #6b7399; --text-faint: #4a5178;
  --accent: #a5b4fc; --accent-active: #6366f1; --accent-btn: #4f46e5;
  --marker-outline: #0a0c14;
}
html.light {
  --bg-body: #f0f2f5; --bg-header: #ffffff; --bg-card: #ffffff; --bg-input: #f5f6f8;
  --bg-hover: #e8eaef; --bg-active: #e0e3ea; --bg-deep: #f8f9fb;
  --border: #c5c9d4; --border-light: #d4d8e0;
  --text-primary: #111827; --text-secondary: #1f2937; --text-label: #374151;
  --text-muted: #4b5563; --text-dim: #6b7280; --text-faint: #9ca3af;
  --accent: #4338ca; --accent-active: #3730a3; --accent-btn: #4f46e5;
  --marker-outline: #ffffff;
}
html.light .leaflet-container { filter: invert(1) hue-rotate(180deg) brightness(1.1) contrast(0.9); }
html.light .leaflet-container .leaflet-marker-icon { filter: invert(1) hue-rotate(180deg); }
html.light .ripe-badge-ok { background: #dcfce7; color: #166534; }
html.light .ripe-badge-warn { background: #fef3c7; color: #92400e; }
html.light .ripe-badge-err { background: #fee2e2; color: #991b1b; }
html.light .ripe-badge-info { background: #dbeafe; color: #1e40af; }
html.light .probe-tag { background: #dbeafe; color: #1e40af; }
html.light .pp-af-badge.v4 { background: #dbeafe; color: #1e40af; }
html.light .pp-af-badge.v6 { background: #dcfce7; color: #166534; }
html.light .pp-af-badge.none { background: #f3f4f6; color: #9ca3af; }
html.light .compare-table tr.changed td { background: #fee2e2; color: #991b1b; }
html.light .compare-table tr.added td { background: #dcfce7; color: #166534; }
html.light .compare-table tr.removed td { background: #fef3c7; color: #92400e; }
html.light .probe-picker-item.selected { background: #dbeafe; }
html.light .ripe-btn { background: #f3f4f6; border-color: #d1d5db; color: #374151; }
html.light .ripe-btn:hover { background: #e5e7eb; color: #1a1d27; }
html.light .ripe-btn-primary { background: #4f46e5; border-color: #4338ca; color: #fff; }
html.light .ripe-btn-danger { border-color: #f87171; color: #dc2626; }
html.light .loss-dot { border: 1px solid #d1d5db; }
html.light #auth-gate { background: #f0f2f5; }
html.light #auth-gate h1 { color: #4f46e5; }
html.light #auth-gate p { color: #6b7280; }
html.light .hop-panel { background: #ffffff; border-color: #d1d5db; }
html.light .panel-header h3 { color: #374151; }
html.light .timeline-wrap { background: #ffffff; border-color: #d1d5db; }
html.light .timeline-controls { color: #6b7280; }
html.light .no-data { color: #9ca3af; }
html.light .path-select { background: #f5f6f8 !important; border-color: #c5c9d4 !important; color: #111827 !important; }
html.light .path-select option { background: #ffffff; color: #111827; }
html.light select { background: #f5f6f8 !important; border-color: #c5c9d4 !important; color: #111827 !important; }
html.light .path-header { background: #ffffff; }
html.light .path-legend { background: #f8f9fb; border-color: #d4d8e0; color: #374151; }
html.light .load-btn { background: #4f46e5; border-color: #4338ca; color: #fff; }
html.light .combo-input { background: #f5f6f8 !important; border-color: #c5c9d4 !important; color: #111827 !important; }
html.light .combo-input:focus { background: #f5f6f8 !important; border-color: #4338ca !important; }
html.light .combo-input:hover { background: #eef0f4 !important; }
html.light .combo-dropdown { background: #ffffff !important; border-color: #c5c9d4 !important; box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important; }
html.light .combo-list li { color: #1f2937 !important; background: #ffffff !important; }
html.light .combo-list li:hover { background: #e8eaef !important; color: #4338ca !important; }
html.light .combo-list li.selected { background: #ede9fe !important; color: #4338ca !important; }
html.light .combo-list li.no-match { color: #9ca3af !important; }
html.light .combo-dropdown { background: #ffffff; border-color: #d1d5db; }
html.light .combo-item:hover { background: #e8eaef; }
html.light .bb-detail-header { background: #ffffff; border-color: #d1d5db; }
html.light .bb-iface-item { border-color: #e5e7eb; }
html.light .bb-iface-item:hover { background: #f5f6f8; }
html.light .heatmap-body { color: #374151; }
html.light .pop-label span { color: #374151; text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
html.light .tooltip { background: #ffffff; border-color: #d1d5db; color: #374151; }
html.light .tp-dropdown { background: #ffffff; border-color: #d1d5db; }
html.light .tp-quick-item { color: #374151; }
html.light .tp-quick-item:hover, html.light .tp-quick-item.active { background: #e8eaef; }
html.light .ms-wrap { background: transparent; }
html.light .ms-trigger { background: #f5f6f8 !important; border-color: #c5c9d4 !important; color: #111827 !important; }
html.light .ms-trigger:focus { background: #f5f6f8 !important; border-color: #4338ca !important; }
html.light .ms-trigger:hover { background: #eef0f4 !important; }
html.light .ms-trigger.open { background: #f5f6f8 !important; border-color: #4338ca !important; }
html.light .ms-dropdown { background: #ffffff !important; border-color: #c5c9d4 !important; box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important; }
html.light .ms-search { color: #111827 !important; border-bottom-color: #d4d8e0 !important; background: #ffffff !important; }
html.light .ms-list { background: #ffffff !important; }
html.light .ms-item { color: #1f2937 !important; background: #ffffff !important; }
html.light .ms-item:hover { background: #e8eaef !important; }
html.light .ms-item.checked { color: #4338ca !important; background: #ede9fe !important; }
html.light .ms-placeholder { color: #9ca3af !important; }
html.light .ms-tag { background: #ede9fe !important; border-color: #c7d2fe !important; color: #4338ca !important; }
html.light .ms-tag-x { color: #9ca3af !important; }
html.light .ms-check { color: #4338ca !important; }
html.light .return-chk-wrap { color: #6b7280; }
html.light .proto-tab { color: #6b7280; border-color: #d1d5db; }
html.light .proto-tab.active { color: #4f46e5; border-color: #4f46e5; background: #ede9fe; }
html.light #path-svg text { fill: #111827 !important; }
html.light #path-svg rect { fill: #f0f2f5 !important; }
html.light #path-svg circle { stroke: #ffffff !important; }
html.light #path-svg line { stroke: #9ca3af !important; }
html.light #path-svg-wrap { background: #f0f2f5; }
html.light .leaflet-container { background: #e8e8e8 !important; }

/* Force dark text on all elements in light mode to override inline styles */
/* Nuclear light mode: force dark text and light backgrounds everywhere */
html.light { background: #f0f2f5 !important; }
html.light body { background: #f0f2f5 !important; }
html.light *, html.light *::before, html.light *::after { color: #111827 !important; }
html.light table.hm td { color: #fff !important; text-shadow: 0 1px 3px rgba(0,0,0,0.7) !important; }
html.light table.hm th { color: #374151 !important; }
html.light .hm-self { background: #e5e7eb !important; }
html.light div, html.light header, html.light ul, html.light li,
html.light td, html.light th, html.light tr, html.light table,
html.light input, html.light select, html.light textarea,
html.light button:not(.load-btn):not(.ripe-btn-primary) { background-color: inherit; }
html.light header { background: #ffffff !important; }
html.light .ms-trigger, html.light .combo-input, html.light .path-select,
html.light .ripe-form input, html.light .ripe-form select,
html.light .probe-picker-search, html.light .probe-picker-filters select,
html.light .probe-picker-filters input { background: #f5f6f8 !important; }
html.light .ms-dropdown, html.light .combo-dropdown, html.light .tp-dropdown,
html.light .ms-list, html.light .combo-list { background: #ffffff !important; }
html.light .ms-item, html.light .combo-list li, html.light .tp-quick-item,
html.light .ms-group-label, html.light .probe-picker-item { background: #ffffff !important; }
html.light .ms-item:hover, html.light .combo-list li:hover,
html.light .tp-quick-item:hover, html.light .probe-picker-item:hover { background: #e8eaef !important; }
html.light .ms-item.checked { background: #ede9fe !important; }
html.light .ripe-card { background: #ffffff !important; }
html.light .ripe-page { background: #f0f2f5 !important; }
html.light .ripe-row-detail td { background: #f8f9fb !important; }
html.light .hop-panel, html.light .bb-hop-panel { background: #ffffff !important; }
html.light .timeline-wrap { background: #ffffff !important; }
html.light #path-svg-wrap, html.light .bb-trace-wrap { background: #f0f2f5 !important; }
html.light .path-header, html.light .bb-header, html.light .path-legend { background: #ffffff !important; }
html.light .ripe-sub-tabs { background: #ffffff !important; }
html.light .ripe-mode-bar { background: #f5f6f8 !important; }
html.light .bb-card { background: #ffffff !important; }
html.light .bb-iface-row { background: #ffffff !important; }
html.light .bb-iface-row:hover, html.light .bb-iface-row.selected { background: #f0f2f5 !important; }
html.light .bb-iface-header { background: #f5f6f8 !important; }
html.light .tooltip { background: #ffffff !important; }
html.light .panel-body { background: #ffffff !important; }
html.light .probe-picker-dropdown { background: #ffffff !important; }
html.light .probe-picker-item.selected { background: #dbeafe !important; }
html.light #auth-gate { background: #f0f2f5 !important; }
html.light .compare-table tr.match td { background: transparent !important; }
html.light .ripe-table tr.expandable:hover td { background: #e8eaef !important; }
html.light .ripe-table tr.expanded td { background: #f0f2f5 !important; }
html.light .load-btn, html.light .ripe-btn-primary, html.light .ripe-btn-primary * { color: #ffffff !important; }
html.light .ripe-btn-danger, html.light .ripe-btn-danger * { color: #dc2626 !important; }
html.light .ripe-badge-ok, html.light .ripe-badge-ok * { color: #166534 !important; }
html.light .ripe-badge-warn, html.light .ripe-badge-warn * { color: #92400e !important; }
html.light .ripe-badge-err, html.light .ripe-badge-err * { color: #991b1b !important; }
html.light .ripe-badge-info, html.light .ripe-badge-info * { color: #1e40af !important; }
html.light .tab.active { color: #4338ca !important; }
html.light .ripe-sub-tab.active { color: #4338ca !important; }
html.light .ripe-mode-btn.active { color: #111827 !important; }
html.light .ms-check { color: #4338ca !important; }
html.light .ms-tag, html.light .ms-tag * { color: #4338ca !important; }
html.light .probe-tag, html.light .probe-tag * { color: #1e40af !important; }
html.light .ripe-card h3 { color: #4338ca !important; }
html.light .accent, html.light .bb-detail-title, html.light .bb-iface-pop,
html.light #tl-selected, html.light .tooltip-title, html.light .pp-id { color: #4338ca !important; }
html.light .loss-dot { border: 1px solid #d1d5db !important; }
html.light .pop-label span { text-shadow: 0 0 3px #fff, 0 0 6px #fff !important; }
html.light .ripe-empty { color: #6b7280 !important; }
html.light .ms-placeholder { color: #9ca3af !important; }
html.light .probe-tag { background: #dbeafe; color: #1e40af; }
html.light .probe-tag .tag-x { color: #6b7280; }
html.light .probe-picker-loading { color: #6b7280; }
html.light .probe-picker-count { color: #6b7280; }
html.light .pp-id { color: #4338ca; }
html.light .pp-country { color: #4338ca; }
html.light .pp-asn { color: #4b5563; }
html.light .ms-group-label { color: #6b7280 !important; }
html.light .ms-count { color: #9ca3af !important; }
html.light .bb-iface-header { background: var(--bg-card) !important; color: var(--text-label) !important; }
html.light .bb-interface-list { background: var(--bg-body); }
html.light .bb-iface-row { background: var(--bg-card); border-bottom: 1px solid var(--border); }
html.light .bb-iface-row:hover { background: var(--bg-hover); }
html.light .bb-iface-row.selected { background: var(--bg-hover); }
html.light #bb-hop-panel { background: var(--bg-card); border-left-color: var(--border) !important; }
html.light .bb-trace-wrap { background: var(--bg-body); }
html.light .bb-overview { background: var(--bg-body); }
html.light .bb-pop-chip.ok { background: #dcfce7; color: #166534; }
html.light .bb-pop-chip.warn { background: #fef3c7; color: #92400e; }
html.light .bb-pop-chip.crit { background: #fee2e2; color: #991b1b; }
html.light .bb-pop-chip.unknown { background: #f3f4f6; color: #6b7280; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg-body); color: var(--text-primary); height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

/* ── Header ── */
header {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 8px 18px; background: var(--bg-header); border-bottom: 1px solid var(--border);
  flex-shrink: 0; min-height: 46px;
}
header h1 { font-size: 15px; font-weight: 600; color: var(--accent); letter-spacing: 0.4px; white-space: nowrap; margin: 0; justify-self: start; }
.sep { color: #2d3148; font-size: 18px; }
.hdr-label { font-size: 11px; color: var(--text-label); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 500; }
.tab-bar { display: flex; gap: 3px; justify-self: center; }
.tab {
  padding: 5px 13px; border-radius: 5px; font-size: 12px; cursor: pointer;
  border: 1px solid transparent; color: var(--text-muted); background: transparent; transition: all 0.12s;
  text-decoration: none;
}
.tab.active { background: var(--bg-active); border-color: var(--border); color: var(--accent); }
.tab:hover:not(.active) { color: var(--text-secondary); background: var(--bg-card); }
.refresh-btn {
  display: flex; align-items: center; gap: 5px; padding: 4px 10px;
  border-radius: 5px; border: 1px solid #2d3148; background: transparent;
  color: #8892b0; font-size: 11px; cursor: pointer; transition: all 0.12s; white-space: nowrap;
}
.refresh-btn:hover { color: #a5b4fc; border-color: #4a5178; }
.refresh-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; flex-shrink: 0; }
.refresh-dot.stale { background: #eab308; }

/* ── Combobox ── */
.combobox { position: relative; }
.combo-input {
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary);
  padding: 5px 10px; border-radius: 6px; font-size: 13px; width: 90px;
  transition: border-color 0.12s; cursor: text;
}
.combo-input:focus { outline: none; border-color: var(--accent-active); background: var(--bg-active); }
.combo-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 2000;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3); display: none; min-width: 130px;
  max-height: 280px; overflow-y: auto;
}
.combo-dropdown.open { display: block; }
.combo-list { list-style: none; padding: 4px 0; }
.combo-list li {
  padding: 6px 12px; font-size: 13px; cursor: pointer; color: var(--text-secondary);
  transition: background 0.08s;
}
.combo-list li:hover { background: var(--bg-active); color: var(--accent); }
.combo-list li.selected { color: var(--accent); background: var(--bg-hover); }
.combo-list li.no-match { color: var(--text-faint); cursor: default; font-style: italic; }

/* ── Path select dropdowns ── */
.path-select {
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary);
  padding: 4px 8px; border-radius: 6px; font-size: 12px;
  cursor: pointer; outline: none; transition: border-color 0.12s;
}
.path-select:focus { border-color: var(--accent-active); background: var(--bg-active); }

/* ── Views ── */
.view { display: none; flex: 1; overflow: hidden; }
.view.active { display: flex; }

/* ── MAP ── */
#map { width: 100%; height: 100%; }
.leaflet-container { background: #0d0f18 !important; }
.pop-label { background: transparent; border: none; box-shadow: none; }
.pop-label span { font-size: 10px; font-weight: 700; color: #94a3b8; text-shadow: 0 1px 4px #000; white-space: nowrap; }

/* ── PATH VIEW ── */
#view-path { flex-direction: column; }
.path-header {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 16px; background: var(--bg-header); border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.path-header .hdr-label { min-width: 24px; }
.load-btn {
  padding: 5px 14px; background: var(--accent-btn); border: 1px solid var(--accent-active); border-radius: 6px;
  color: #fff; font-size: 12px; cursor: pointer; transition: background 0.12s;
}
.load-btn:hover { background: #6366f1; }
.load-btn:disabled { background: var(--bg-active); color: var(--text-dim); cursor: default; border-color: var(--border); }
#path-status { font-size: 11px; color: var(--text-muted); margin-left: 4px; }

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

/* SVG wrap — horizontal scroll for many hops */
#path-svg-wrap {
  flex: 1; overflow: auto; position: relative; background: var(--bg-body);
}
#path-svg { display: block; cursor: grab; }
#path-svg:active { cursor: grabbing; }
.no-data {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: var(--text-dim); font-size: 14px; pointer-events: none;
}

/* ── Hop Panel (draggable + collapsible) ── */
.hop-panel {
  width: clamp(280px, 22vw, 640px);
  min-width: 240px; max-width: 640px;
  flex-shrink: 0; display: flex; flex-direction: column;
  background: var(--bg-header); border-left: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.hop-panel.collapsed { width: 32px !important; min-width: 32px; }
.drag-handle {
  position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  cursor: col-resize; z-index: 10; background: transparent;
  transition: background 0.15s;
}
.drag-handle:hover, .drag-handle.dragging { background: #6366f140; }
.panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px 8px; flex-shrink: 0; border-bottom: 1px solid var(--border);
}
.panel-header h3 { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; white-space: nowrap; }
.panel-toggle {
  width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--border);
  background: transparent; color: var(--text-muted); cursor: pointer; font-size: 11px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: all 0.12s;
}
.panel-toggle:hover { background: var(--bg-active); color: var(--accent); }
.hop-panel.collapsed .panel-header { padding: 10px 5px 8px; justify-content: center; }
.hop-panel.collapsed .panel-header h3 { display: none; }
.hop-panel.collapsed .panel-header > *:not(.panel-toggle) { display: none !important; }
.panel-body { flex: 1; overflow-y: auto; padding: 8px; }
.hop-panel.collapsed .panel-body { display: none; }

.hop-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.hop-table th { color: var(--text-label); text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 11px; white-space: nowrap; }
.hop-table td { padding: 5px 6px; border-bottom: 1px solid var(--border-light); color: var(--text-primary); vertical-align: middle; white-space: nowrap; }
.hop-table tr:last-child td { border-bottom: none; }
.hop-table tr:hover td { background: var(--bg-hover); }
.hop-table td.mono { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 10.5px; white-space: nowrap; width: 100%; min-width: 0; overflow: hidden; }
.hop-table td.mono .hop-ip { white-space: nowrap; }
.hop-table td.mono .hop-host { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-muted); font-size: 9px; }
.hop-num-cell { color: var(--text-label); width: 24px; font-weight: 600; }
.proto-tab-wrap { display: flex; gap: 3px; flex-shrink: 0; margin-right: 6px; }
.proto-tab { padding: 2px 8px; border-radius: 4px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); font-size: 10px; cursor: pointer; transition: all 0.12s; }
.proto-tab.active { background: var(--bg-active); border-color: var(--border); color: var(--accent); }
.proto-tab:hover:not(.active) { color: var(--text-secondary); background: var(--bg-card); }
.loss-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; vertical-align: middle; flex-shrink: 0; }
.rtt-bar-wrap { display: flex; align-items: center; gap: 5px; }
.rtt-bar-bg { flex: 1; height: 3px; background: var(--bg-active); border-radius: 2px; overflow: hidden; }
.rtt-bar { height: 100%; border-radius: 2px; background: #6366f1; }

/* ── Timeline ── */
.timeline-wrap {
  background: var(--bg-header); border-top: 1px solid var(--border);
  flex-shrink: 0; display: flex; flex-direction: column;
  min-height: 70px; max-height: 280px; height: 150px;
}
.timeline-resize-handle {
  height: 6px; cursor: row-resize; flex-shrink: 0;
  background: transparent; border-top: 2px solid var(--border);
  transition: border-color 0.15s;
}
.timeline-resize-handle:hover, .timeline-resize-handle.dragging { border-top-color: var(--accent-active); }
.timeline-inner { flex: 1; overflow: hidden; padding: 4px 16px 6px; display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.timeline-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0; }
#tl-label { font-size: 11px; color: var(--text-label); font-weight: 500; }
#tl-selected { font-size: 11px; color: var(--accent); font-weight: 500; }
#timeline-svg { flex: 1; width: 100%; cursor: crosshair; display: block; min-height: 0; }
.tp-wrap { position: relative; }
.tp-btn { display:inline-flex;align-items:center;gap:6px;padding:3px 10px;background:var(--bg-card);border:1px solid var(--border);border-radius:5px;color:var(--accent);font-size:11px;cursor:pointer;white-space:nowrap; }
.tp-btn:hover { border-color:var(--accent-active); }
.tp-dropdown { display:none;position:fixed;z-index:2001;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,0.3);min-width:280px; }
.tp-dropdown.open { display:flex; }
.tp-quick { width:120px;border-right:1px solid #2d3148;padding:8px 0; }
.tp-quick-item { padding:5px 14px;font-size:11px;color:var(--text-label);cursor:pointer; }
.tp-quick-item:hover { background:var(--bg-active);color:var(--text-primary); }
.tp-quick-item.active { color:var(--accent);background:var(--bg-hover); }
.tp-custom { flex:1;padding:10px 12px;display:flex;flex-direction:column;gap:8px; }
.tp-custom label { font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.5px; }
.tp-custom input { background:var(--bg-input);border:1px solid var(--border);border-radius:4px;color:var(--text-primary);font-size:11px;padding:4px 8px;font-family:inherit; }
.tp-custom input:focus { outline:none;border-color:var(--accent-active); }
.tp-apply { padding:5px 12px;background:#4f46e5;border:none;border-radius:4px;color:#fff;font-size:11px;cursor:pointer;font-weight:600;margin-top:4px; }
.tp-apply:hover { background:#6366f1; }

/* ── Heatmap ── */
#view-heatmap { flex-direction: column; }
.heatmap-body { flex: 1; overflow: auto; padding: 14px 18px; }
.heatmap-title { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
table.hm { border-collapse: collapse; font-size: 12px; }
table.hm th { color: #8892b0; padding: 4px 6px; font-weight: 500; white-space: nowrap; font-size: 11.5px; }
table.hm td { width: 38px; height: 38px; text-align: center; border: 1px solid #0f1117; cursor: pointer; transition: opacity 0.08s; font-size: 10px; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
table.hm td:hover { opacity: 0.7; outline: 2px solid #a5b4fc; outline-offset: -1px; }
.hm-self { background: #0f1117 !important; cursor: default !important; }
.legend-wrap { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 18px 12px; border-top: 1px solid #2d3148; }
.legend-item { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #8892b0; }
.legend-swatch { width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; }

/* ── Tooltip ── */
.tooltip {
  position: fixed; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 13px; font-size: 11.5px; pointer-events: none;
  z-index: 9999; min-width: 160px; max-width: 420px; white-space: nowrap;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3); display: none;
}
.tooltip.show { display: block; }
.tooltip-title { font-weight: 600; color: var(--accent); margin-bottom: 6px; font-size: 12px; }
.tooltip-row { display: flex; justify-content: space-between; gap: 18px; color: var(--text-muted); margin-top: 3px; }
.tooltip-val { color: var(--text-primary); }

/* ── Loading spinner ── */
.spinner {
  display: inline-block; width: 12px; height: 12px; border: 2px solid var(--border);
  border-top-color: var(--accent-active); border-radius: 50%; animation: spin 0.7s linear infinite;
  vertical-align: middle; margin-right: 5px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Multi-select ── */
.ms-wrap { position: relative; display: inline-block; }
.ms-trigger {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px;
  min-width: 90px; max-width: 260px; min-height: 30px;
  background: #1e2235; border: 1px solid #2d3148;
  padding: 3px 8px; border-radius: 6px; cursor: pointer; transition: border-color 0.12s;
}
.ms-trigger:focus { outline: none; border-color: #6366f1; }
.ms-trigger.open { border-color: #6366f1; }
.ms-placeholder { font-size: 12px; color: #6b7399; pointer-events: none; }
.ms-tag {
  display: inline-flex; align-items: center; gap: 3px;
  background: #252838; border: 1px solid #2d3148;
  border-radius: 4px; padding: 1px 5px; font-size: 11px; color: #a5b4fc;
}
.ms-tag-x { color: var(--text-dim); cursor: pointer; font-size: 13px; line-height: 1; padding: 0 1px; }
.ms-tag-x:hover { color: #ef4444; }
.ms-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 2001;
  background: #1e2235; border: 1px solid #3d4268;
  border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  display: none; min-width: 140px; max-height: 260px;
  overflow: hidden; flex-direction: column;
}
.ms-dropdown.open { display: flex; }
.ms-search {
  border: none; border-bottom: 1px solid #2d3148;
  background: transparent; color: #e2e8f0; padding: 6px 10px;
  font-size: 12px; outline: none; flex-shrink: 0;
}
.ms-list { list-style: none; padding: 4px 0; overflow-y: auto; }
.ms-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px; font-size: 12px; cursor: pointer; color: #cbd5e1;
  transition: background 0.08s; white-space: nowrap;
}
.ms-item:hover { background: #252838; }
.ms-item.checked { color: #a5b4fc; background: #21253a; }
.ms-check { width: 13px; font-size: 10px; flex-shrink: 0; text-align: center; color: #a5b4fc; }
.ms-group-label { color: var(--text-dim); }
.ms-count { color: var(--text-faint); }
.bb-iface-header { background: var(--bg-header); color: var(--text-muted); }

/* ── Path legend ── */
.path-legend {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 5px 16px;
  background: var(--bg-header); border-bottom: 1px solid var(--border);
  flex-shrink: 0; font-size: 11px; color: var(--text-label); align-items: center;
}
.path-legend:empty { display: none; }
.pl-item { display: flex; align-items: center; gap: 5px; transition: opacity 0.15s; }
.pl-item[data-color] { cursor: pointer; padding: 2px 6px; border-radius: 4px; }
.pl-item[data-color]:hover { background: var(--bg-active); }
.pl-swatch { width: 22px; height: 3px; border-radius: 2px; flex-shrink: 0; }
.return-chk-wrap { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-label); cursor: pointer; user-select: none; }
.return-chk-wrap input { cursor: pointer; accent-color: var(--accent-active); }
/* ── Backbone View ── */
#view-backbone { flex-direction: column; }
.bb-header {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 16px; background: var(--bg-header); border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.bb-body { display: flex; flex: 1; overflow: hidden; flex-direction: column; }
.bb-overview { flex: 1; overflow: auto; padding: 16px; }
.bb-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.bb-card {
  background: var(--bg-header); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px; cursor: pointer; transition: all 0.15s;
  position: relative; overflow: hidden;
}
.bb-card:hover { border-color: var(--text-dim); background: var(--bg-card); transform: translateY(-1px); }
.bb-card.selected { border-color: var(--accent-active); background: var(--bg-card); }
.bb-card-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 10px 10px 0 0;
}
.bb-card-name { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
.bb-card-stats {
  display: flex; gap: 12px; font-size: 11px; color: var(--text-muted); margin-bottom: 6px;
}
.bb-stat { display: flex; align-items: center; gap: 4px; }
.bb-stat-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.bb-card-metrics {
  display: flex; gap: 16px; font-size: 11px; margin-top: 8px;
  padding-top: 8px; border-top: 1px solid var(--bg-active);
}
.bb-metric-label { color: var(--text-dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; }
.bb-metric-val { color: var(--text-primary); font-size: 13px; font-weight: 500; margin-top: 2px; }
.bb-pops-row {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px;
}
.bb-pop-chip {
  font-size: 9px; font-weight: 600; padding: 2px 5px; border-radius: 3px;
  letter-spacing: 0.3px;
}
.bb-pop-chip.ok { background: #16a34a20; color: #22c55e; }
.bb-pop-chip.warn { background: #d9770620; color: #eab308; }
.bb-pop-chip.crit { background: #dc262620; color: #ef4444; }
.bb-pop-chip.unknown { background: #64748b20; color: #94a3b8; }

.bb-detail { display: none; flex: 1; flex-direction: column; overflow: hidden; }
.bb-detail.active { display: flex; }
.bb-detail-header {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px; background: var(--bg-header); border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.bb-back-btn {
  padding: 4px 12px; border-radius: 5px; border: 1px solid var(--border);
  background: transparent; color: var(--text-muted); font-size: 11px; cursor: pointer;
  transition: all 0.12s;
}
.bb-back-btn:hover { color: var(--accent); border-color: var(--text-dim); }
.bb-detail-title { font-size: 13px; font-weight: 600; color: var(--accent); }
.bb-detail-subtitle { font-size: 11px; color: var(--text-muted); margin-left: 8px; }
.bb-detail-body { display: flex; flex: 1; overflow: hidden; }
.bb-trace-wrap { flex: 1; overflow: auto; background: var(--bg-body); position: relative; }
.bb-trace-wrap .no-data {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: #4a5178; font-size: 14px; pointer-events: none;
}
.bb-interface-list {
  display: flex; flex-direction: column; gap: 1px; flex: 1; overflow: auto;
}
.bb-iface-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; background: var(--bg-deep); cursor: pointer;
  transition: background 0.1s; border-left: 3px solid transparent;
}
.bb-iface-row:hover { background: var(--bg-header); }
.bb-iface-row.selected { background: var(--bg-header); border-left-color: var(--accent-active); }
.bb-iface-pop { font-size: 12px; font-weight: 700; color: var(--accent); width: 52px; flex-shrink: 0; }
.bb-iface-ip { font-size: 11px; color: var(--text-secondary); font-family: 'SF Mono','Fira Code',monospace; flex: 1; }
.bb-iface-status { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.bb-iface-rtt { font-size: 11px; color: var(--text-muted); }
.bb-iface-loss-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.bb-proto-tabs { display: flex; gap: 3px; margin-left: auto; }

/* RIPE tab */
#view-ripe { flex-direction: column; padding: 0; overflow: hidden; }
.ripe-sub-tabs { display: flex; gap: 0; background: var(--bg-header); border-bottom: 1px solid var(--border); padding: 0 16px; flex-shrink: 0; }
.ripe-sub-tab { padding: 8px 16px; font-size: 12px; color: var(--text-muted); cursor: pointer; border: none; background: none; border-bottom: 2px solid transparent; transition: all 0.12s; text-decoration: none; }
.ripe-sub-tab.active { color: var(--accent); border-bottom-color: var(--accent-active); }
.ripe-sub-tab:hover:not(.active) { color: var(--text-secondary); }
.ripe-section { display: none; flex: 1; overflow-y: auto; padding: 0; }
.ripe-section.active { display: flex; flex-direction: column; }
.ripe-mode-bar { display: flex; gap: 0; background: var(--bg-input); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.ripe-mode-btn { padding: 7px 18px; font-size: 11.5px; color: var(--text-muted); cursor: pointer; border: none; background: none; border-bottom: 2px solid transparent; transition: all 0.12s; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; text-decoration: none; }
.ripe-mode-btn.active { color: var(--text-primary); border-bottom-color: var(--accent-btn); background: var(--bg-header); }
.ripe-mode-btn:hover:not(.active) { color: var(--text-secondary); background: var(--bg-header); }
.ripe-page { display: none; flex: 1; overflow-y: auto; padding: 16px; }
.ripe-page.active { display: block; }
.ripe-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin-bottom: 12px; }
.ripe-card h3 { font-size: 13px; color: var(--accent); margin: 0 0 12px 0; font-weight: 600; }
.ripe-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ripe-table th { color: var(--text-label); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 12px; }
.ripe-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-light); color: var(--text-primary); }
.ripe-table tr.expandable:hover td { background: var(--bg-hover); cursor: pointer; }
.ripe-form { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; font-size: 12px; }
.ripe-form label { color: var(--text-label); font-size: 12px; }
.ripe-form input, .ripe-form select { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary); padding: 6px 10px; border-radius: 5px; font-size: 12px; }
.ripe-form input:focus, .ripe-form select:focus { border-color: var(--accent-active); outline: none; }
.ripe-btn { padding: 6px 16px; border-radius: 5px; border: 1px solid var(--border); background: var(--bg-active); color: var(--text-secondary); font-size: 12px; cursor: pointer; transition: all 0.12s; }
.ripe-btn:hover { background: var(--border); color: var(--text-primary); }
.ripe-btn-primary { background: var(--accent-btn); border-color: var(--accent-active); color: #fff; }
.ripe-btn-primary:hover { background: #5b52f0; }
.ripe-btn-danger { border-color: #dc2626; color: #ef4444; }
.ripe-btn-danger:hover { background: #7f1d1d; color: #fff; }
.ripe-badge { display: inline-block; padding: 3px 10px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.ripe-badge-ok { background: #14532d; color: #4ade80; }
.ripe-badge-warn { background: #713f12; color: #fbbf24; }
.ripe-badge-err { background: #7f1d1d; color: #f87171; }
.ripe-badge-info { background: #1e3a5f; color: #60a5fa; }
.ripe-empty { color: #6b7399; text-align: center; padding: 32px; font-size: 13px; }
.ripe-form label.req::after { content: ' *'; color: #ef4444; font-weight: 700; }
.info-tip { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--bg-active); color: var(--text-dim); font-size: 9px; font-weight: 700; cursor: help; margin-left: 4px; vertical-align: middle; position: relative; font-style: normal; }
.info-tip:hover::after { content: attr(data-tip); position: absolute; left: 20px; top: -4px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; font-size: 11px; font-weight: 400; color: var(--text-primary); white-space: normal; width: 240px; z-index: 100; box-shadow: 0 4px 12px rgba(0,0,0,0.2); line-height: 1.4; }
html.light .info-tip { background: #e5e7eb; color: #6b7280; }
html.light .info-tip:hover::after { background: #ffffff; border-color: #d1d5db; color: #111827; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.ripe-row-detail { display: none; }
.ripe-row-detail.open { display: table-row; }
.ripe-row-detail td { padding: 12px 8px; background: var(--bg-deep); }
.ripe-table tr.expandable { cursor: pointer; }
.ripe-table tr.expandable:hover td { background: var(--bg-active); }
.ripe-table tr.expanded td { background: var(--bg-card); border-bottom-color: transparent; }
.compare-wrap { display: flex; gap: 16px; overflow-x: auto; }
.compare-side { flex: 1; min-width: 0; }
.compare-side h4 { font-size: 13px; color: #a8b4d0; margin: 0 0 8px 0; text-transform: uppercase; letter-spacing: 0.5px; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.compare-table th { color: var(--text-label); text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; }
.compare-table td { padding: 6px 8px; border-bottom: 1px solid var(--border-light); white-space: nowrap; color: var(--text-primary); }
.compare-table tr.match td { color: var(--text-primary); }
.compare-table tr.changed td { background: #2d1520; color: #fca5a5; }
.compare-table tr.added td { background: #152d1a; color: #86efac; }
.compare-table tr.removed td { background: #2d2415; color: #fde68a; }
.compare-table .ct-num { color: var(--text-muted); width: 24px; }
.compare-table .ct-ip { font-family: 'SF Mono','Fira Code',monospace; font-size: 12px; }
.compare-table .ct-provider { font-size: 12px; color: var(--text-secondary); }
.compare-table .ct-loss { width: 44px; }
.compare-table .ct-rtt { width: 55px; text-align: right; }
.probe-picker { position: relative; }
.probe-picker-input { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.probe-picker-search { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary); padding: 6px 10px; border-radius: 5px; font-size: 12px; flex: 1; min-width: 180px; }
.probe-picker-search:focus { border-color: var(--accent-active); outline: none; }
.probe-picker-filters { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.probe-picker-filters select, .probe-picker-filters input { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary); padding: 4px 8px; border-radius: 4px; font-size: 11px; }
.probe-picker-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: 240px; overflow-y: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; z-index: 200; margin-top: 4px; }
.probe-picker-dropdown.open { display: block; }
.probe-picker-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer; font-size: 11px; color: var(--text-primary); border-bottom: 1px solid var(--bg-body); }
.probe-picker-item:hover { background: var(--bg-active); }
.probe-picker-item.selected { background: #1e3a5f; }
.probe-picker-item .pp-id { color: #6366f1; font-weight: 600; width: 50px; flex-shrink: 0; }
.probe-picker-item .pp-country { color: #a5b4fc; width: 28px; flex-shrink: 0; }
.probe-picker-item .pp-asn { color: #8892b0; width: 70px; flex-shrink: 0; font-family: monospace; font-size: 10px; }
.probe-picker-item .pp-desc { color: var(--text-secondary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.probe-picker-item .pp-af { display: flex; gap: 2px; flex-shrink: 0; }
.pp-af-badge { font-size: 8px; font-weight: 700; padding: 1px 4px; border-radius: 3px; line-height: 1.2; }
.pp-af-badge.v4 { background: #1e3a5f; color: #60a5fa; }
.pp-af-badge.v6 { background: #1a2e1a; color: #86efac; }
.pp-af-badge.none { background: #2d2415; color: #6b7399; }
.probe-picker-item .pp-status { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.probe-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: #1e3a5f; color: #60a5fa; border-radius: 10px; font-size: 10px; font-weight: 500; }
.probe-tag .tag-x { cursor: pointer; color: #8892b0; font-size: 12px; line-height: 1; }
.probe-tag .tag-x:hover { color: #ef4444; }
.probe-picker-loading { padding: 12px; text-align: center; color: #4a5178; font-size: 11px; }
.probe-picker-count { font-size: 10px; color: #4a5178; margin-top: 4px; }
.probe-picker { grid-column: 1 / -1; }
.probe-picker-map { height: calc(100vh - 340px); min-height: 300px; border-radius: 6px; border: 1px solid var(--border); margin-bottom: 6px; width: 100%; }
.probe-picker-body { display: flex; flex-direction: column; gap: 6px; }

.pp-group-header {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 6px 10px 2px;
  background: rgba(255,255,255,0.02);
  border-top: 1px solid var(--border);
}
.pp-group-header:first-child { border-top: 0; }

.pp-pagination-footer {
  font-size: 11px;
  color: var(--text-muted);
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.pp-load-more {
  background: var(--accent-active);
  color: #fff;
  border: 0;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
}
.pp-load-more:disabled { opacity: 0.6; cursor: default; }

.pp-partial-warning {
  font-size: 11px;
  color: #fbbf24;
  padding: 6px 10px;
  border-top: 1px solid var(--border);
}

.pp-select-all-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}
.pp-select-all-btn {
  background: transparent;
  color: var(--accent-active);
  border: 1px solid var(--accent-active);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
.pp-select-all-btn:hover { background: var(--accent-active); color: #fff; }
.pp-select-all-status {
  font-size: 11px;
  color: var(--text-muted);
  transition: opacity 0.4s ease-out;
  opacity: 0;
}

.atlas-run-picker {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 4px 0 8px 0;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 6px;
}
.atlas-run-btn {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  cursor: pointer;
  white-space: nowrap;
}
.atlas-run-btn:hover { border-color: var(--accent-active); color: var(--text-primary); }
.atlas-run-btn.active { background: var(--accent-active); color: #fff; border-color: var(--accent-active); }
.atlas-run-older { font-size: 10px; }