fix: region box alignment, column checkboxes, sort help, dark mode active btn

- Region filter container: remove margin-bottom, use inline-flex align
- Column dropdown checkboxes: 14x14px to match region dropdown
- Sort help ⓘ: use 
 for newlines in title (\n doesn't render)
- Dark mode: .filter-bar .btn.active now retains accent background
  (dark theme override was clobbering the active state)

public/index.html

@@ -22,7 +22,7 @@
   <meta name="twitter:title" content="MeshCore Analyzer">
   <meta name="twitter:description" content="Real-time MeshCore LoRa mesh network analyzer — live packet visualization, node tracking, channel decryption, and route analysis.">
   <meta name="twitter:image" content="https://raw.githubusercontent.com/Kpa-clawbot/meshcore-analyzer/master/public/og-image.png">
-  <link rel="stylesheet" href="style.css?v=1774137602">
+  <link rel="stylesheet" href="style.css?v=1774138080">
   <link rel="stylesheet" href="home.css">
   <link rel="stylesheet" href="live.css?v=1774058575">
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
@@ -84,7 +84,7 @@
   <script src="hop-resolver.js?v=1774126708"></script>
   <script src="app.js?v=1774126708"></script>
   <script src="home.js?v=1774042199"></script>
-  <script src="packets.js?v=1774137602"></script>
+  <script src="packets.js?v=1774138080"></script>
   <script src="map.js?v=1774126708" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="channels.js?v=1774331200" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="nodes.js?v=1774126708" onerror="console.error('Failed to load:', this.src)"></script>

public/packets.js

@@ -427,7 +427,7 @@
             <option value="chrono-asc">Sort: Time ↑ (earliest)</option>
             <option value="chrono-desc">Sort: Time ↓ (latest)</option>
           </select>
-          <span class="sort-help" title="Sort controls how observations within a packet group are ordered, and which observation's data (observer, path) appears in the header row.\n\nObserver — Groups observations by observer station. Earliest observer appears first. Within each observer, sorted by time.\n\nPath ↑ (shortest) — Shortest paths first, then alphabetical by observer.\nPath ↓ (longest) — Longest paths first.\n\nTime ↑ (earliest) — Chronological order, first observation at top.\nTime ↓ (latest) — Reverse chronological, most recent first.">ⓘ</span>
+          <span class="sort-help" title="Sort controls how observations within a packet group are ordered, and which observation's data (observer, path) appears in the header row.&#10;&#10;Observer — Groups by observer station, earliest first.&#10;Path ↑ — Shortest paths first.&#10;Path ↓ — Longest paths first.&#10;Time ↑ — Earliest observation first.&#10;Time ↓ — Most recent first.">ⓘ</span>
         </div>
         <div class="filter-group">
           <div class="col-toggle-wrap">

public/style.css

@@ -715,6 +715,7 @@ button.ch-item.selected { background: var(--selected-bg); }
 [data-theme="dark"] .trace-search input,
 [data-theme="dark"] .mc-jump-btn,
 [data-theme="dark"] .filter-bar .btn { background: var(--input-bg); color: var(--text); border-color: var(--border); }
+[data-theme="dark"] .filter-bar .btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
 [data-theme="dark"] .ch-item.selected,
 [data-theme="dark"] .data-table tbody tr.selected { background: var(--selected-bg); }
 [data-theme="dark"] .tl-bar-container { background: #334155; }
@@ -1280,6 +1281,7 @@ tr[data-hops]:hover { background: rgba(59,130,246,0.1); }
 .col-toggle-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 50; background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; padding: 6px 0; min-width: 150px; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
 .col-toggle-menu.open { display: block; }
 .col-toggle-menu label { display: flex; align-items: center; gap: 6px; padding: 4px 12px; font-size: .82rem; cursor: pointer; color: var(--text); }
+.col-toggle-menu label input[type="checkbox"] { width: 14px; height: 14px; margin: 0; flex-shrink: 0; }
 .col-toggle-menu label:hover { background: var(--row-hover); }
 
 /* Column hide classes */
@@ -1456,7 +1458,7 @@ tr[data-hops]:hover { background: rgba(59,130,246,0.1); }
 
 /* ─── Region filter bar ─── */
 .region-filter-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; }
-.region-filter-container { margin-bottom: 4px; }
+.region-filter-container { margin: 0; padding: 0; display: inline-flex; align-items: center; }
 .region-pill {
   display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 16px;
   font-size: 12px; font-weight: 500; cursor: pointer; border: 1.5px solid var(--border);