feat(themes): replace cycle button with popover theme picker

Click theme button opens panel grouped by dark/light. Hover previews
theme live, click confirms. Dismiss on outside-click or Escape.

web/style.css

@@ -382,6 +382,7 @@ nav { display: flex; gap: 2px; }
 #search-input::placeholder { color: var(--dim); }
 
 .theme-toggle {
+    position: relative;
     margin-left: auto;
     border: 1px solid var(--border);
     border-radius: var(--r1);
@@ -394,6 +395,60 @@ nav { display: flex; gap: 2px; }
 
 .theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
 
+.theme-popover {
+    position: absolute;
+    top: calc(100% + 6px);
+    right: 0;
+    z-index: 900;
+    background: var(--surf);
+    border: 1px solid var(--border);
+    border-radius: var(--r3);
+    padding: 8px 0;
+    min-width: 180px;
+    box-shadow: 0 8px 24px rgba(0,0,0,.3);
+    display: none;
+}
+
+.theme-popover.open { display: block; }
+
+.theme-popover-label {
+    padding: 4px 12px;
+    font-size: 10px;
+    font-family: var(--mono);
+    color: var(--dim);
+    text-transform: uppercase;
+    letter-spacing: .5px;
+}
+
+.theme-popover-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 12px;
+    cursor: pointer;
+    font-size: 13px;
+    font-family: var(--sans);
+    color: var(--muted);
+    transition: background var(--t-fast), color var(--t-fast);
+}
+
+.theme-popover-item:hover {
+    background: var(--a-bg);
+    color: var(--text);
+}
+
+.theme-popover-item.active {
+    color: var(--accent);
+}
+
+.theme-popover-swatch {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    border: 1px solid var(--border);
+    flex-shrink: 0;
+}
+
 /* ── MAIN LAYOUT ────────────────────────────────────── */
 main {
     display: grid;