feat(ui): sort dropdown for cards, capture bar prominence

- Cards sort dropdown: newest, oldest, most used — wired to reload
- Capture bar: larger font, more padding, accent glow on focus
- Prompt glyph scales up for visibility

web/app.js

@@ -33,6 +33,7 @@
     fillValues: {},
     fillActive: 0,
     searchQuery: '',
+    cardsSort: 'newest',
   };
 
   const $ = (sel) => document.querySelector(sel);
@@ -611,11 +612,17 @@
       panel.insertBefore(hdr, list);
     }
     const scope = state.activeTag ? `${state.intent} · #${state.activeTag}` : state.intent;
+    const sorts = ['newest', 'oldest', 'most used'];
+    const options = sorts.map(s => `<option${s === state.cardsSort ? ' selected' : ''}>${s}</option>`).join('');
     hdr.innerHTML = `
       <span class="cards-scope">${scope}</span>
       <span class="cards-count">${state.entities.length} cards</span>
-      <select class="cards-sort"><option>newest</option><option>most used</option></select>
+      <select class="cards-sort">${options}</select>
     `;
+    hdr.querySelector('.cards-sort').addEventListener('change', (ev) => {
+      state.cardsSort = ev.target.value;
+      loadEntities();
+    });
   }
 
   function renderCardRow(e, idx) {
@@ -1103,8 +1110,16 @@
     if (state.activeTag) params.tag = state.activeTag;
     if (state.view === 'cards') {
       params.cards_only = true;
-      params.sort = 'use_count';
-      params.order = 'desc';
+      if (state.cardsSort === 'oldest') {
+        params.sort = 'created';
+        params.order = 'asc';
+      } else if (state.cardsSort === 'most used') {
+        params.sort = 'use_count';
+        params.order = 'desc';
+      } else {
+        params.sort = 'created';
+        params.order = 'desc';
+      }
     } else {
       params.sort = 'created';
       params.order = 'desc';