diff --git a/web/app.js b/web/app.js
index 9df72c1..f2119f0 100644
--- a/web/app.js
+++ b/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';
diff --git a/web/style.css b/web/style.css
index d5f9966..4c07f85 100644
--- a/web/style.css
+++ b/web/style.css
@@ -665,7 +665,12 @@ main {
     border-top: 1px solid var(--border);
     background: var(--surf);
     flex-shrink: 0;
-    transition: border-top-color var(--t-base);
+    padding: 4px 0;
+    transition: border-top-color var(--t-base), box-shadow var(--t-base);
+}
+
+#capture-bar:focus-within {
+    box-shadow: 0 -2px 12px rgba(200,148,42,.08);
 }
 
 /* ── Capture preview ── */
@@ -697,7 +702,7 @@ main {
 .cap-pill-card { color: var(--accent); border-color: rgba(200,148,42,.25); }
 .cap-pill-query { color: var(--event); border-color: rgba(104,152,200,.3); }
 
-#capture-bar:focus-within { border-top-color: rgba(200,148,42,.35); }
+#capture-bar:focus-within { border-top-color: var(--accent); }
 
 .cap-row {
     display: flex;
@@ -707,10 +712,10 @@ main {
 
 .cap-prompt {
     font-family: var(--mono);
-    font-size: 14px;
+    font-size: 16px;
     color: var(--accent);
     opacity: .4;
-    padding-bottom: 8px;
+    padding-bottom: 10px;
     flex-shrink: 0;
     transition: opacity var(--t-base);
 }
@@ -722,9 +727,9 @@ main {
     background: transparent;
     border: none;
     outline: none;
-    padding: 8px 10px;
+    padding: 10px 10px;
     font-family: var(--mono);
-    font-size: 12px;
+    font-size: 13px;
     color: var(--text);
     line-height: 1.5;
     resize: none;