diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index d4762b6..0102ecb 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -10,7 +10,7 @@ module.exports = {
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  plugins: ['react-refresh', 'jsx-a11y'],
+  plugins: ['jsx-a11y'],
   settings: { react: { version: '18.3' } },
   rules: {
     'react/react-in-jsx-scope': 'off',
diff --git a/README.md b/README.md
index 650af38..848e700 100644
--- a/README.md
+++ b/README.md
@@ -9,13 +9,16 @@ A Chrome extension for inspecting, editing, saving, and replaying URL query para
 ## Features
 
 - **Live parameter editor** — parses the active tab's URL, shows each query param as an editable row, with one-click navigation to the edited URL.
-- **Type-aware inputs** — `true` / `false` values render as a toggle switch with a `BOOL` badge; everything else is a monospace text field.
-- **Highlighted URL preview** — full URL shown at the top with parameter keys in the accent color, base URL and separators muted.
+- **Type-aware inputs** — `true` / `false` values render as a toggle switch next to the literal value (original casing preserved, so `TRUE` toggles to `FALSE`); JSON objects and arrays get a drill-down editor; everything else is a monospace text field.
+- **Filter parameters** — live substring search over parameter keys, for URLs with dozens of params.
+- **Highlighted URL preview** — full URL shown at the top with parameter keys emphasized and separators muted; editable directly.
+- **Structured JSON editing** — drill into nested objects and arrays with a breadcrumb stack, or edit the raw JSON.
 - **Save & group** — persist URLs into named groups (stored locally via `chrome.storage.local`), reload them into the editor with one click.
 - **Copy / Apply / Reset** — copy the current URL, replace the active tab's URL, or snap back to the URL that was open when the popup first loaded.
-- **Dark, light, and system themes** — all colors meet WCAG 2.2 AA contrast.
+- **Accent color** — Settings offers ten accent swatches that tint the logo, parameter badge, URL keys, toggles and primary buttons; "Reset to monochrome" returns to the base look. Persisted locally.
+- **Follows your system appearance** — light and dark switch with the OS, live. There is no theme setting to get out of sync.
 - **Full keyboard navigation** — every interactive element is reachable via Tab, with visible focus rings and sensible shortcuts.
-- **Screen-reader friendly** — semantic HTML, ARIA live region for status announcements, role-correct toggle/switch/dialog semantics.
+- **Screen-reader friendly** — semantic HTML, a single ARIA live region (the toast doubles as it, so nothing is announced twice), role-correct toggle/switch/radiogroup/dialog semantics.
 
 ## Planned features
 
@@ -28,9 +31,8 @@ A Chrome extension for inspecting, editing, saving, and replaying URL query para
 | `Enter` in a row field | Commit / advance focus |
 | `Cmd`/`Ctrl` + `Enter` | Apply edited URL to the active tab |
 | `Cmd`/`Ctrl` + `S` | Open the saved URLs drawer |
-| `Esc` | Close the drawer |
+| `Esc` | Close the open panel / step one level out of an expanded JSON value |
 | `Space` on a `BOOL` toggle | Flip the value |
-| `←` / `→` on the theme switch | Cycle light → system → dark |
 
 ## Tech stack
 
@@ -38,8 +40,8 @@ A Chrome extension for inspecting, editing, saving, and replaying URL query para
 - **React 18** with TypeScript (strict mode)
 - **Vite** + `@crxjs/vite-plugin` for HMR during popup development
 - **Zustand** for state (small footprint, test-friendly)
-- **CSS Modules** + CSS custom properties for theming
-- **Vitest** + React Testing Library (infrastructure ready; tests not yet written)
+- **CSS Modules** + CSS custom properties for theming, with an `oklch` monochrome token set in `src/styles/tokens.css`
+- **Vitest** + React Testing Library (unit tests cover URL parsing, param typing, structured values, storage, and the store)
 
 ## Permissions
 
@@ -47,9 +49,8 @@ The extension requests only what it needs:
 
 | Permission | Why |
 | --- | --- |
-| `activeTab` | Read and update the URL of the currently focused tab |
-| `tabs` | Query the active tab's URL when the popup opens |
-| `storage` | Persist saved links, groups, and theme preference locally |
+| `activeTab` | Read and update the URL of the currently focused tab (granted per user gesture — no standing access to browsing history) |
+| `storage` | Persist saved links, groups, and the accent color locally |
 
 No `<all_urls>`, no `clipboardWrite` (popups are secure contexts and a user-gesture click is enough for `navigator.clipboard.writeText`).
 
@@ -135,15 +136,36 @@ The following secrets must be set in the repository settings:
 2. Open a PR from `main` → `release`.
 3. Merge the PR — the workflow bumps the version, builds, zips, uploads to the store, and tags the release automatically.
 
+## Design system
+
+The UI follows a monochrome, Linear-inspired design (see `src/styles/tokens.css`).
+
+| Aspect | Value |
+| --- | --- |
+| Popup size | 380 × 600 px |
+| Palette | `oklch` with zero chroma — hierarchy from lightness, border alpha, and weight |
+| Radii | 6–7px controls · 8px larger inputs · 10px cards · 20px pills |
+| Type | Inter (UI) · JetBrains Mono (URLs and values) |
+| Icons | Inline Feather/Lucide-style outlines: 24-unit viewBox, 2px stroke, round caps |
+
+Three deliberate deviations from the design handoff:
+
+- **Height is 600px, not 640px.** Chrome hard-caps extension popups at 800 × 600; a 640px panel is simply clipped. The layout is a flex column with a scrolling middle band, so it renders faithfully at 600.
+- **Reset does not open a `window.confirm()` dialog.** Modal JS dialogs are suppressed inside MV3 extension popups, so the confirmation would never appear and Reset would silently do nothing. The handoff lists this as a tweakable behavior; it is off.
+- **Accent labels are not fixed to near-white.** The handoff specifies `#FAFAFA` text on the accent-colored buttons, but every swatch in the palette fails WCAG AA that way — from 3.4:1 (Violet) down to 2.2:1 (Lime), against a 4.5:1 requirement for 13px text. The label color is therefore chosen per swatch by luminance, and accent-as-text (logo, badge, URL keys) is darkened or lightened just enough to clear 4.5:1 on the current panel. Solid fills keep the exact swatch the user picked, so a button always matches its swatch. See `src/lib/contrast.ts`.
+
+Fonts are referenced by family name and fall back to the system stack — the extension ships no webfonts, because the MV3 content security policy blocks remote font CDNs. To match the reference typography exactly, self-host the Inter and JetBrains Mono `woff2` files under `public/` and add an `@font-face` block.
+
 ## Accessibility notes
 
-- Every interactive element is ≥ 28×28 CSS px (WCAG 2.2 SC 2.5.8).
-- Focus indicators are preserved via `:focus-visible` outlines; `outline: none` is never used without a replacement.
+- Interactive controls are ≥ 24×24 CSS px (WCAG 2.2 SC 2.5.8 minimum), with header and footer actions at 28px and larger.
+- The reference design signals focus only by lightening an input border. That is kept, and a `:focus-visible` outline is layered on top so keyboard users get a real indicator; `outline: none` is never used without a replacement.
 - Every input has a `<label>` (visible or `.visually-hidden`), never bare placeholders as labels.
-- The drawer uses `role="dialog"`, `aria-modal="true"`, and a focus trap that restores focus to the trigger on close.
-- Status changes (URL applied, copied, saved, reset, param added/removed) are announced via a single polite `aria-live` region.
+- The drawer uses `role="dialog"`, `aria-modal="true"`, and a focus trap that restores focus to the trigger on close. While closed it is `visibility: hidden`, which keeps it out of both the tab order and the accessibility tree.
+- Status changes (URL applied, copied, saved, reset, param added/removed) are announced via a single polite `aria-live` region — the visible toast *is* that region, so nothing is announced twice.
 - `prefers-reduced-motion` is honored globally — animations collapse to a near-instant transition.
-- Color is never the sole channel for status; danger tone is always paired with an icon and label.
+- Color is never the sole channel for status: the boolean switch always renders its literal value next to it, and destructive actions pair tone with an icon and label.
+- `color-scheme` is declared per theme so Chrome does not apply its own auto-dark-mode inversion to form controls, and native scrollbars and select popups match the theme.
 
 ## Testability
 
diff --git a/src/__tests__/contrast.test.ts b/src/__tests__/contrast.test.ts
new file mode 100644
index 0000000..4c9c884
--- /dev/null
+++ b/src/__tests__/contrast.test.ts
@@ -0,0 +1,124 @@
+import { describe, it, expect } from 'vitest';
+import {
+  adjustForContrast,
+  contrastRatio,
+  luminance,
+  readableOn,
+  withAlpha,
+} from '@/lib/contrast';
+import { ACCENTS, isKnownAccent } from '@/lib/accents';
+
+const WHITE_PANEL = '#ffffff';
+const DARK_PANEL = '#262626';
+const AA_NORMAL = 4.5;
+
+describe('luminance', () => {
+  it('is 0 for black and 1 for white', () => {
+    expect(luminance('#000000')).toBeCloseTo(0, 5);
+    expect(luminance('#ffffff')).toBeCloseTo(1, 5);
+  });
+});
+
+describe('contrastRatio', () => {
+  it('is 21 for black on white', () => {
+    expect(contrastRatio('#000000', '#ffffff')).toBeCloseTo(21, 1);
+  });
+
+  it('is 1 for identical colors', () => {
+    expect(contrastRatio('#6690e0', '#6690e0')).toBeCloseTo(1, 5);
+  });
+
+  it('is symmetric', () => {
+    expect(contrastRatio('#6690e0', '#ffffff')).toBeCloseTo(
+      contrastRatio('#ffffff', '#6690e0'),
+      5,
+    );
+  });
+});
+
+describe('readableOn', () => {
+  it('picks a light label on a dark background', () => {
+    expect(contrastRatio(readableOn('#141414'), '#141414')).toBeGreaterThanOrEqual(AA_NORMAL);
+  });
+
+  it('picks a dark label on a light background', () => {
+    expect(contrastRatio(readableOn('#fafafa'), '#fafafa')).toBeGreaterThanOrEqual(AA_NORMAL);
+  });
+
+  it('gives every accent swatch an AA-readable label', () => {
+    for (const { name, hex } of ACCENTS) {
+      const ratio = contrastRatio(readableOn(hex), hex);
+      expect(ratio, `${name} label contrast`).toBeGreaterThanOrEqual(AA_NORMAL);
+    }
+  });
+});
+
+describe('adjustForContrast', () => {
+  it('leaves a color alone when it already passes', () => {
+    // Black on white is already 21:1 — no adjustment needed.
+    expect(adjustForContrast('#000000', WHITE_PANEL)).toBe('#000000');
+  });
+
+  it('brings every accent to AA as text on both panels', () => {
+    for (const { name, hex } of ACCENTS) {
+      const onLight = adjustForContrast(hex, WHITE_PANEL);
+      const onDark = adjustForContrast(hex, DARK_PANEL);
+      expect(contrastRatio(onLight, WHITE_PANEL), `${name} on light`).toBeGreaterThanOrEqual(
+        AA_NORMAL,
+      );
+      expect(contrastRatio(onDark, DARK_PANEL), `${name} on dark`).toBeGreaterThanOrEqual(
+        AA_NORMAL,
+      );
+    }
+  });
+
+  it('darkens toward black on a light background', () => {
+    const adjusted = adjustForContrast('#8db84f', WHITE_PANEL);
+    expect(luminance(adjusted)).toBeLessThan(luminance('#8db84f'));
+  });
+
+  it('lightens toward white on a dark background', () => {
+    const adjusted = adjustForContrast('#3a3a3a', DARK_PANEL);
+    expect(luminance(adjusted)).toBeGreaterThan(luminance('#3a3a3a'));
+  });
+});
+
+describe('withAlpha', () => {
+  it('appends an 8-digit hex alpha', () => {
+    expect(withAlpha('#6690e0', 0.15)).toBe('#6690e026');
+  });
+
+  it('clamps out-of-range alpha', () => {
+    expect(withAlpha('#6690e0', 2)).toBe('#6690e0ff');
+    expect(withAlpha('#6690e0', -1)).toBe('#6690e000');
+  });
+});
+
+describe('ACCENTS', () => {
+  it('has the ten swatches from the handoff', () => {
+    expect(ACCENTS).toHaveLength(10);
+  });
+
+  it('uses lowercase 6-digit hex so storage comparisons are stable', () => {
+    for (const { hex } of ACCENTS) expect(hex).toMatch(/^#[0-9a-f]{6}$/);
+  });
+
+  it('has no duplicate colors', () => {
+    expect(new Set(ACCENTS.map((a) => a.hex)).size).toBe(ACCENTS.length);
+  });
+});
+
+describe('isKnownAccent', () => {
+  it('accepts a palette color', () => {
+    expect(isKnownAccent('#6690e0')).toBe(true);
+  });
+
+  it('is case-insensitive', () => {
+    expect(isKnownAccent('#6690E0')).toBe(true);
+  });
+
+  it('rejects anything else', () => {
+    expect(isKnownAccent('#123456')).toBe(false);
+    expect(isKnownAccent('red')).toBe(false);
+  });
+});
diff --git a/src/__tests__/paramTypes.test.ts b/src/__tests__/paramTypes.test.ts
index 62c4942..3fb1fdb 100644
--- a/src/__tests__/paramTypes.test.ts
+++ b/src/__tests__/paramTypes.test.ts
@@ -1,5 +1,22 @@
 import { describe, it, expect } from 'vitest';
-import { detectParamType } from '@/lib/paramTypes';
+import { detectParamType, flipBoolean } from '@/lib/paramTypes';
+
+describe('flipBoolean', () => {
+  it('flips lowercase', () => {
+    expect(flipBoolean('true')).toBe('false');
+    expect(flipBoolean('false')).toBe('true');
+  });
+
+  it('preserves all-caps casing', () => {
+    expect(flipBoolean('TRUE')).toBe('FALSE');
+    expect(flipBoolean('FALSE')).toBe('TRUE');
+  });
+
+  it('preserves capitalized casing', () => {
+    expect(flipBoolean('True')).toBe('False');
+    expect(flipBoolean('False')).toBe('True');
+  });
+});
 
 describe('detectParamType', () => {
   describe('boolean', () => {
diff --git a/src/__tests__/storage.test.ts b/src/__tests__/storage.test.ts
index f78b92e..816e2d8 100644
--- a/src/__tests__/storage.test.ts
+++ b/src/__tests__/storage.test.ts
@@ -87,31 +87,26 @@ describe('storage.setGroups', () => {
   });
 });
 
-describe('storage.getTheme', () => {
-  it('returns "system" as the default theme', async () => {
-    const theme = await storage.getTheme();
-    expect(theme).toBe('system');
+describe('storage.getAccent', () => {
+  it('returns null by default (monochrome)', async () => {
+    expect(await storage.getAccent()).toBeNull();
   });
 
-  it('returns stored theme', async () => {
-    await storage.setTheme('dark');
-    expect(await storage.getTheme()).toBe('dark');
+  it('returns the stored accent', async () => {
+    await storage.setAccent('#6690e0');
+    expect(await storage.getAccent()).toBe('#6690e0');
   });
 });
 
-describe('storage.setTheme', () => {
-  it('persists light theme', async () => {
-    await storage.setTheme('light');
-    expect(await storage.getTheme()).toBe('light');
+describe('storage.setAccent', () => {
+  it('persists an accent hex', async () => {
+    await storage.setAccent('#4fa98e');
+    expect(await storage.getAccent()).toBe('#4fa98e');
   });
 
-  it('persists dark theme', async () => {
-    await storage.setTheme('dark');
-    expect(await storage.getTheme()).toBe('dark');
-  });
-
-  it('persists system theme', async () => {
-    await storage.setTheme('system');
-    expect(await storage.getTheme()).toBe('system');
+  it('clears back to monochrome', async () => {
+    await storage.setAccent('#4fa98e');
+    await storage.setAccent(null);
+    expect(await storage.getAccent()).toBeNull();
   });
 });
diff --git a/src/__tests__/structuredParam.test.ts b/src/__tests__/structuredParam.test.ts
index 5c0aa2e..27e7e8c 100644
--- a/src/__tests__/structuredParam.test.ts
+++ b/src/__tests__/structuredParam.test.ts
@@ -214,4 +214,14 @@ describe('renameKeyAtPath', () => {
     renameKeyAtPath(root, [], 'a', 'b');
     expect(root).toEqual({ a: 1 });
   });
+
+  it('refuses to rename onto an existing key (would lose a value)', () => {
+    const root = { a: 1, b: 2 };
+    expect(renameKeyAtPath(root, [], 'a', 'b')).toBe(root);
+  });
+
+  it('refuses collision at a nested path', () => {
+    const root = { nested: { x: 10, y: 20 } };
+    expect(renameKeyAtPath(root, ['nested'], 'x', 'y')).toBe(root);
+  });
 });
diff --git a/src/__tests__/urlParser.test.ts b/src/__tests__/urlParser.test.ts
index 8dbd41f..4768c34 100644
--- a/src/__tests__/urlParser.test.ts
+++ b/src/__tests__/urlParser.test.ts
@@ -91,6 +91,37 @@ describe('parseUrl', () => {
     const result = parseUrl('https://example.com/?q=hello%20world');
     expect(result.params[0].value).toBe('hello world');
   });
+
+  it('keeps the real query string when a hash query is also present', () => {
+    const result = parseUrl('https://app.com/path?main=1#/route?foo=bar');
+    expect(result.hashQuery).toBe(true);
+    expect(result.base).toBe('https://app.com/path?main=1');
+    expect(result.params).toHaveLength(1);
+    expect(result.params[0]).toMatchObject({ key: 'foo', value: 'bar' });
+    // Round trip must not drop ?main=1.
+    expect(serializeUrl(result)).toBe('https://app.com/path?main=1#/route?foo=bar');
+    expect(serializeUrlForNav(result)).toBe('https://app.com/path?main=1#/route?foo=bar');
+  });
+
+  it('does not treat an anchor ending in "?" as a hash query', () => {
+    const result = parseUrl('https://en.wikipedia.org/wiki/Foo#Why?');
+    expect(result.hashQuery).toBe(false);
+    expect(result.fragment).toBe('#Why?');
+    expect(serializeUrl(result)).toBe('https://en.wikipedia.org/wiki/Foo#Why?');
+  });
+
+  it('builds a correct base for file: URLs', () => {
+    const result = parseUrl('file:///tmp/page.html?x=1');
+    expect(result.base).toBe('file:///tmp/page.html');
+    expect(result.params[0]).toMatchObject({ key: 'x', value: '1' });
+    expect(serializeUrl(result)).toBe('file:///tmp/page.html?x=1');
+  });
+
+  it('preserves credentials and port in the base', () => {
+    const result = parseUrl('https://user:pass@example.com:8080/x?a=1');
+    expect(result.base).toBe('https://user:pass@example.com:8080/x');
+    expect(serializeUrl(result)).toBe('https://user:pass@example.com:8080/x?a=1');
+  });
 });
 
 describe('serializeUrl', () => {
diff --git a/src/__tests__/useAppStore.test.ts b/src/__tests__/useAppStore.test.ts
index 5449976..2fd4c30 100644
--- a/src/__tests__/useAppStore.test.ts
+++ b/src/__tests__/useAppStore.test.ts
@@ -79,6 +79,25 @@ describe('setCurrentUrl', () => {
     useAppStore.getState().setCurrentUrl('totally invalid');
     expect(useAppStore.getState().currentParsed).toEqual(before);
   });
+
+  it('keeps param ids stable across re-parses when position+key survive', () => {
+    useAppStore.getState().loadUrl('https://example.com/?a=1&b=2', 1);
+    const [a, b] = useAppStore.getState().currentParsed!.params;
+    // Simulate typing in the URL field: value of `a` changed, keys unchanged.
+    useAppStore.getState().setCurrentUrl('https://example.com/?a=99&b=2');
+    const after = useAppStore.getState().currentParsed!.params;
+    expect(after[0].id).toBe(a.id);
+    expect(after[0].value).toBe('99');
+    expect(after[1].id).toBe(b.id);
+  });
+
+  it('assigns a fresh id when the key at a position changes', () => {
+    useAppStore.getState().loadUrl('https://example.com/?a=1', 1);
+    const [a] = useAppStore.getState().currentParsed!.params;
+    useAppStore.getState().setCurrentUrl('https://example.com/?renamed=1');
+    const after = useAppStore.getState().currentParsed!.params;
+    expect(after[0].id).not.toBe(a.id);
+  });
 });
 
 describe('updateParamKey', () => {
@@ -135,6 +154,16 @@ describe('toggleBooleanParam', () => {
   it('does nothing when currentParsed is null', () => {
     expect(() => useAppStore.getState().toggleBooleanParam('x')).not.toThrow();
   });
+
+  it('preserves the original casing when toggling', () => {
+    useAppStore.getState().loadUrl('https://example.com/?a=TRUE&b=False', 1);
+    const [a, b] = useAppStore.getState().currentParsed!.params;
+    useAppStore.getState().toggleBooleanParam(a.id);
+    useAppStore.getState().toggleBooleanParam(b.id);
+    const after = useAppStore.getState().currentParsed!.params;
+    expect(after[0].value).toBe('FALSE');
+    expect(after[1].value).toBe('True');
+  });
 });
 
 describe('removeParam', () => {
diff --git a/src/components/ActionBar/ActionBar.module.css b/src/components/ActionBar/ActionBar.module.css
index a672848..78f9515 100644
--- a/src/components/ActionBar/ActionBar.module.css
+++ b/src/components/ActionBar/ActionBar.module.css
@@ -1,19 +1,26 @@
+/*
+ * Four labelled buttons in a 380px panel leave only a couple of pixels of
+ * slack at the reference's paddings — and only when Inter is installed. With
+ * a wider fallback face the row overflowed and ate the 18px right padding.
+ * The gap is tightened to 6px and the labels are allowed to shrink so the
+ * padding is never the thing that gives.
+ */
 .root {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: var(--space-3);
-  padding: var(--space-4) var(--space-5);
-  background: var(--color-surface-raised);
+  padding: var(--space-7) var(--pad-inline);
   border-top: 1px solid var(--color-border);
-  position: sticky;
-  bottom: 0;
-  z-index: 2;
+  flex-shrink: 0;
+  min-width: 0;
 }
 
-.primary,
-.secondary {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
+.root > button {
+  min-width: 0;
+}
+
+/* Pushes Copy/Save to the trailing edge. */
+.spacer {
+  flex: 1;
+  min-width: 0;
 }
diff --git a/src/components/ActionBar/ActionBar.tsx b/src/components/ActionBar/ActionBar.tsx
index e249787..5bf3c41 100644
--- a/src/components/ActionBar/ActionBar.tsx
+++ b/src/components/ActionBar/ActionBar.tsx
@@ -1,5 +1,5 @@
 import { Button } from '../Button';
-import { IconCheck, IconCopy, IconReset, IconSave } from '../icons';
+import { IconBookmark, IconCheck, IconCopy, IconReset } from '../icons';
 import styles from './ActionBar.module.css';
 
 interface ActionBarProps {
@@ -12,11 +12,10 @@ interface ActionBarProps {
 }
 
 /**
- * Bottom action bar. Layout follows the reference screenshot:
+ * Bottom action bar:
  *   [Apply] [Reset] ...................................... [Copy] [Save]
  *
- * Apply is the primary action (accent). Others are ghost. All buttons reach
- * the WCAG 2.2 minimum target size via the Button component's --min-target.
+ * Apply is the primary (filled) action; the rest are outlined.
  */
 export function ActionBar({
   onApply,
@@ -28,27 +27,32 @@ export function ActionBar({
 }: ActionBarProps) {
   return (
     <div className={styles.root}>
-      <div className={styles.primary}>
-        <Button variant="primary" onClick={onApply} disabled={applyDisabled}>
-          Apply
-        </Button>
-        <Button variant="ghost" onClick={onReset} leadingIcon={<IconReset />}>
-          Reset
-        </Button>
-      </div>
-      <div className={styles.secondary}>
-        <Button
-          variant="ghost"
-          onClick={onCopy}
-          leadingIcon={copied ? <IconCheck /> : <IconCopy />}
-          aria-label={copied ? 'URL copied to clipboard' : 'Copy URL to clipboard'}
-        >
-          {copied ? 'Copied' : 'Copy'}
-        </Button>
-        <Button variant="ghost" onClick={onSave} leadingIcon={<IconSave />}>
-          Save
-        </Button>
-      </div>
+      <Button
+        variant="primary"
+        onClick={onApply}
+        disabled={applyDisabled}
+        leadingIcon={<IconCheck />}
+      >
+        Apply
+      </Button>
+      <Button variant="ghost" size="sm" onClick={onReset} leadingIcon={<IconReset />}>
+        Reset
+      </Button>
+
+      <div className={styles.spacer} />
+
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={onCopy}
+        leadingIcon={copied ? <IconCheck /> : <IconCopy />}
+        aria-label={copied ? 'URL copied to clipboard' : 'Copy URL to clipboard'}
+      >
+        {copied ? 'Copied' : 'Copy'}
+      </Button>
+      <Button variant="ghost" size="sm" onClick={onSave} leadingIcon={<IconBookmark />}>
+        Save
+      </Button>
     </div>
   );
 }
diff --git a/src/components/AddParamRow/AddParamRow.module.css b/src/components/AddParamRow/AddParamRow.module.css
index 738a8f6..efa2da0 100644
--- a/src/components/AddParamRow/AddParamRow.module.css
+++ b/src/components/AddParamRow/AddParamRow.module.css
@@ -1,30 +1,40 @@
-.row {
-  display: grid;
-  grid-template-columns: 140px 1fr var(--min-target);
-  align-items: center;
-  gap: var(--space-3);
-  padding: var(--space-2) 0;
-  margin-top: var(--space-2);
-  border-top: 1px dashed var(--color-border);
-  padding-top: var(--space-4);
+.card {
+  border: 1px solid var(--color-border-card);
+  border-radius: var(--radius-card);
+  overflow: hidden;
+  margin-top: var(--space-7);
 }
 
-.keyCell {
-  min-width: 0;
+.cardHeader {
+  display: flex;
+  align-items: center;
+  padding: 7px 12px;
+  background: var(--color-surface-header);
+  border-bottom: 1px solid var(--color-border);
 }
 
-.valueCell {
-  min-width: 0;
+.cardTitle {
+  font-size: var(--font-size-2xs);
+  font-weight: 600;
+  line-height: 1.2;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--color-text-muted);
 }
 
-.actionCell {
+.row {
   display: flex;
-  justify-content: flex-end;
   align-items: center;
+  gap: var(--space-4);
+  padding: 10px 12px;
 }
 
-@media (max-width: 400px) {
-  .row {
-    grid-template-columns: 110px 1fr var(--min-target);
-  }
+.keyCell {
+  flex: 0 0 32%;
+  min-width: 0;
+}
+
+.valueCell {
+  flex: 1;
+  min-width: 0;
 }
diff --git a/src/components/AddParamRow/AddParamRow.tsx b/src/components/AddParamRow/AddParamRow.tsx
index d3a846c..e5a64aa 100644
--- a/src/components/AddParamRow/AddParamRow.tsx
+++ b/src/components/AddParamRow/AddParamRow.tsx
@@ -1,8 +1,7 @@
 import { useId, useRef, useState } from 'react';
 import { IconButton } from '../IconButton';
 import { IconPlus } from '../icons';
-import { ParamKeyInput } from '../ParamKeyInput';
-import { ParamValueInput } from '../ParamValueInput';
+import { ParamTextInput } from '../ParamTextInput';
 import styles from './AddParamRow.module.css';
 
 interface AddParamRowProps {
@@ -10,17 +9,17 @@ interface AddParamRowProps {
 }
 
 /**
- * The "add new parameter" row at the bottom of the list.
+ * The "add new parameter" card at the bottom of the list.
  *
  * Behavior:
  * - `+` button is disabled while key is empty (aria-disabled too, so SR announces)
  * - Enter in either field commits, clears both, and returns focus to the key field
- * - Matches the visual rhythm of ParamRow via identical grid columns
+ * - Key/value columns match ParamRow's 32% split so the cards read as one rhythm
  */
 export function AddParamRow({ onAdd }: AddParamRowProps) {
   const [key, setKey] = useState('');
   const [value, setValue] = useState('');
-  const keyInputRef = useRef<HTMLDivElement>(null);
+  const keyCellRef = useRef<HTMLDivElement>(null);
   const keyId = useId();
   const valueId = useId();
 
@@ -28,55 +27,63 @@ export function AddParamRow({ onAdd }: AddParamRowProps) {
 
   function commit() {
     if (!canAdd) return;
-    onAdd(key, value);
+    // Trim the key: stray spaces would silently become %20 in the URL.
+    onAdd(key.trim(), value);
     setKey('');
     setValue('');
     // Return focus to key field for fast repeated additions.
-    const input = keyInputRef.current?.querySelector<HTMLInputElement>('input');
-    input?.focus();
+    keyCellRef.current?.querySelector('input')?.focus();
   }
 
   return (
-    <div className={styles.row} role="group" aria-label="Add a new parameter">
-      <div className={styles.keyCell} ref={keyInputRef}>
-        <label htmlFor={keyId} className="visually-hidden">
-          New parameter key
-        </label>
-        <ParamKeyInput
-          id={keyId}
-          value={key}
-          placeholder="Key"
-          aria-label="New parameter key"
-          onChange={setKey}
-          onEnter={commit}
-        />
+    <section className={styles.card} aria-labelledby={`${keyId}-title`}>
+      <div className={styles.cardHeader}>
+        <h3 id={`${keyId}-title`} className={styles.cardTitle}>
+          Add parameter
+        </h3>
       </div>
 
-      <div className={styles.valueCell}>
-        <label htmlFor={valueId} className="visually-hidden">
-          New parameter value
-        </label>
-        <ParamValueInput
-          id={valueId}
-          value={value}
-          placeholder="Value"
-          aria-label="New parameter value"
-          onChange={setValue}
-          onEnter={commit}
-        />
-      </div>
+      <div className={styles.row}>
+        <div className={styles.keyCell} ref={keyCellRef}>
+          <label htmlFor={keyId} className="visually-hidden">
+            New parameter key
+          </label>
+          <ParamTextInput
+            id={keyId}
+            variant="add"
+            value={key}
+            placeholder="Key"
+            aria-label="New parameter key"
+            onChange={setKey}
+            onEnter={commit}
+          />
+        </div>
+
+        <div className={styles.valueCell}>
+          <label htmlFor={valueId} className="visually-hidden">
+            New parameter value
+          </label>
+          <ParamTextInput
+            id={valueId}
+            variant="add"
+            value={value}
+            placeholder="Value"
+            aria-label="New parameter value"
+            onChange={setValue}
+            onEnter={commit}
+          />
+        </div>
 
-      <div className={styles.actionCell}>
         <IconButton
           aria-label="Add parameter"
           aria-disabled={!canAdd}
           disabled={!canAdd}
-          tone="accent"
-          size="sm"
+          variant="filled"
+          size="xl"
           icon={<IconPlus />}
           onClick={commit}
         />
       </div>
-    </div>
+    </section>
   );
 }
diff --git a/src/components/BooleanToggle/BooleanToggle.module.css b/src/components/BooleanToggle/BooleanToggle.module.css
index 100dd68..6dfd516 100644
--- a/src/components/BooleanToggle/BooleanToggle.module.css
+++ b/src/components/BooleanToggle/BooleanToggle.module.css
@@ -1,60 +1,43 @@
-.row {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  padding: 4px 0;
-  min-height: var(--min-target);
-}
-
-.badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 2px 6px;
-  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
-  color: var(--color-accent);
-  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
-  border-radius: var(--radius-sm);
-  font-family: var(--font-mono);
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-}
-
+/* 32x19 pill with a 13px knob, per the redesign. */
 .track {
   position: relative;
-  width: 36px;
-  height: 20px;
-  min-width: 36px;
+  flex-shrink: 0;
+  width: 32px;
+  height: 19px;
   padding: 0;
-  background: var(--color-border-strong);
-  border: none;
+  border: 1px solid var(--color-border-strong);
   border-radius: var(--radius-full);
+  background: var(--color-fill-subtle);
   cursor: pointer;
-  transition: background-color var(--transition-base);
+  transition:
+    background var(--transition-fast),
+    border-color var(--transition-fast);
 }
 
-.track.on {
+.track:hover {
+  border-color: var(--color-border-focus);
+}
+
+.on {
   background: var(--color-accent);
+  border-color: transparent;
 }
 
 .thumb {
   position: absolute;
-  top: 2px;
+  top: 50%;
   left: 2px;
-  width: 16px;
-  height: 16px;
-  background: #ffffff;
-  border-radius: var(--radius-full);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-  transition: transform var(--transition-base);
-}
-
-.track.on .thumb {
-  transform: translateX(16px);
+  width: 13px;
+  height: 13px;
+  margin-top: -6.5px;
+  border-radius: 50%;
+  background: var(--color-text-faint);
+  transition:
+    transform var(--transition-fast),
+    background var(--transition-fast);
 }
 
-.label {
-  font-family: var(--font-mono);
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
+.on .thumb {
+  transform: translateX(13px);
+  background: var(--color-on-accent);
 }
diff --git a/src/components/BooleanToggle/BooleanToggle.tsx b/src/components/BooleanToggle/BooleanToggle.tsx
index fb6da63..98df768 100644
--- a/src/components/BooleanToggle/BooleanToggle.tsx
+++ b/src/components/BooleanToggle/BooleanToggle.tsx
@@ -9,8 +9,10 @@ interface BooleanToggleProps {
 
 /**
  * Boolean toggle rendered as a button with role="switch".
+ *
  * Space and Enter both activate it (native button semantics). We prevent
- * default on Space to stop the popup from scrolling.
+ * default on Space to stop the popup from scrolling. The literal value text
+ * sits next to it in ParamRow, so the state is never carried by color alone.
  */
 export function BooleanToggle({
   id,
@@ -26,22 +28,17 @@ export function BooleanToggle({
   }
 
   return (
-    <div className={styles.row}>
-      <button
-        id={id}
-        type="button"
-        role="switch"
-        aria-checked={value}
-        aria-label={ariaLabel}
-        className={[styles.track, value ? styles.on : ''].join(' ')}
-        onClick={() => onChange(!value)}
-        onKeyDown={onKeyDown}
-      >
-        <span className={styles.thumb} aria-hidden="true" />
-      </button>
-      <span className={styles.label} aria-hidden="true">
-        {value ? 'true' : 'false'}
-      </span>
-    </div>
+    <button
+      id={id}
+      type="button"
+      role="switch"
+      aria-checked={value}
+      aria-label={ariaLabel}
+      className={[styles.track, value ? styles.on : ''].filter(Boolean).join(' ')}
+      onClick={() => onChange(!value)}
+      onKeyDown={onKeyDown}
+    >
+      <span className={styles.thumb} aria-hidden="true" />
+    </button>
   );
 }
diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css
index 6a6930f..dbbd2ae 100644
--- a/src/components/Button/Button.module.css
+++ b/src/components/Button/Button.module.css
@@ -2,95 +2,82 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--space-2);
-  font-family: var(--font-sans);
-  font-weight: 500;
-  line-height: var(--line-height-tight);
-  border-radius: var(--radius-md);
+  gap: var(--space-3);
   border: 1px solid transparent;
+  border-radius: var(--radius-lg);
+  font-family: var(--font-sans);
+  font-size: var(--font-size-md);
+  line-height: 1;
+  white-space: nowrap;
   cursor: pointer;
   transition:
-    background-color var(--transition-fast),
+    background var(--transition-fast),
     border-color var(--transition-fast),
-    color var(--transition-fast),
-    transform var(--transition-fast);
-  user-select: none;
-  min-height: var(--min-target);
+    color var(--transition-fast);
 }
 
 .root:disabled {
+  opacity: 0.45;
   cursor: not-allowed;
-  opacity: 0.55;
-}
-
-.root:not(:disabled):active {
-  transform: translateY(1px);
-}
-
-/* Sizes */
-.size-sm {
-  font-size: var(--font-size-sm);
-  padding: 6px 10px;
 }
 
-.size-md {
-  font-size: var(--font-size-base);
-  padding: 8px 14px;
+.icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
 }
 
-.block {
-  width: 100%;
-}
+/* ── Variants ── */
 
-/* Variants */
-.variant-primary {
+/* Primary: the inverted block — near-white on dark, near-black on light. */
+.primary {
   background: var(--color-accent);
   color: var(--color-on-accent);
-  border-color: var(--color-accent);
+  border-color: transparent;
+  font-weight: 600;
 }
 
-.variant-primary:not(:disabled):hover {
+.primary:hover:not(:disabled) {
   background: var(--color-accent-hover);
-  border-color: var(--color-accent-hover);
 }
 
-.variant-primary:not(:disabled):active {
-  background: var(--color-accent-pressed);
-  border-color: var(--color-accent-pressed);
+/* Outlined: the default secondary treatment. */
+.ghost {
+  background: transparent;
+  color: var(--color-text-secondary);
+  border-color: var(--color-border-strong);
+  font-weight: 500;
 }
 
-.variant-ghost {
-  background: transparent;
+.ghost:hover:not(:disabled) {
+  background: var(--color-fill-subtle);
   color: var(--color-text-primary);
-  border-color: var(--color-border);
 }
 
-.variant-ghost:not(:disabled):hover {
-  background: var(--color-surface);
+.danger {
+  background: transparent;
+  color: var(--color-danger);
   border-color: var(--color-border-strong);
+  font-weight: 500;
 }
 
-.variant-danger {
-  background: transparent;
-  color: var(--color-danger);
-  border-color: var(--color-border);
+.danger:hover:not(:disabled) {
+  background: var(--color-fill-subtle);
 }
 
-.variant-danger:not(:disabled):hover {
-  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
-  border-color: var(--color-danger);
+/* ── Sizes ── */
+
+.md {
+  padding: 9px 16px;
 }
 
-.icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
+/* Trailing-icon buttons in the footer sit slightly tighter. */
+.sm {
+  padding: 9px 12px;
 }
 
-.label {
-  display: inline-flex;
-  align-items: center;
+.block {
+  display: flex;
+  width: 100%;
+  padding: 10px 16px;
 }
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 6205852..2da6953 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -32,17 +32,25 @@ export function Button({
       type={type}
       className={[
         styles.root,
-        styles[`variant-${variant}`],
-        styles[`size-${size}`],
+        styles[variant],
+        styles[size],
         block ? styles.block : '',
         className ?? '',
       ]
         .filter(Boolean)
         .join(' ')}
     >
-      {leadingIcon && <span className={styles.icon} aria-hidden="true">{leadingIcon}</span>}
-      <span className={styles.label}>{children}</span>
-      {trailingIcon && <span className={styles.icon} aria-hidden="true">{trailingIcon}</span>}
+      {leadingIcon && (
+        <span className={styles.icon} aria-hidden="true">
+          {leadingIcon}
+        </span>
+      )}
+      <span>{children}</span>
+      {trailingIcon && (
+        <span className={styles.icon} aria-hidden="true">
+          {trailingIcon}
+        </span>
+      )}
     </button>
   );
 }
diff --git a/src/components/EmptyState/EmptyState.module.css b/src/components/EmptyState/EmptyState.module.css
index ab2bacf..97891ce 100644
--- a/src/components/EmptyState/EmptyState.module.css
+++ b/src/components/EmptyState/EmptyState.module.css
@@ -1,29 +1,29 @@
 .root {
+  flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
+  gap: var(--space-4);
+  padding: var(--space-11) var(--space-10);
   text-align: center;
-  padding: var(--space-8) var(--space-5);
-  gap: var(--space-3);
 }
 
 .title {
-  font-family: var(--font-sans);
-  font-size: var(--font-size-md);
+  font-size: var(--font-size-lg);
   font-weight: 600;
   color: var(--color-text-primary);
   margin: 0;
 }
 
 .message {
-  font-family: var(--font-sans);
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-md);
+  line-height: var(--line-height-base);
   color: var(--color-text-muted);
-  line-height: var(--line-height-relaxed);
-  max-width: 320px;
   margin: 0;
+  max-width: 30ch;
 }
 
 .action {
-  margin-top: var(--space-3);
+  margin-top: var(--space-4);
 }
diff --git a/src/components/GroupSelector/GroupSelector.module.css b/src/components/GroupSelector/GroupSelector.module.css
index 83e5138..ff25d00 100644
--- a/src/components/GroupSelector/GroupSelector.module.css
+++ b/src/components/GroupSelector/GroupSelector.module.css
@@ -1,27 +1,26 @@
 .wrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--space-2);
+  gap: var(--space-3);
 }
 
 .label {
   font-size: var(--font-size-xs);
   font-weight: 600;
+  letter-spacing: 0.08em;
   text-transform: uppercase;
-  letter-spacing: 0.06em;
   color: var(--color-text-muted);
 }
 
 .select {
   width: 100%;
-  padding: 8px 10px;
-  background: var(--color-input-bg);
-  color: var(--color-text-primary);
-  border: 1px solid var(--color-input-border);
-  border-radius: var(--radius-md);
+  background: var(--color-surface-inset);
+  color: var(--color-text-body);
+  border: 1px solid var(--color-fill-strong);
+  border-radius: var(--radius-lg);
+  padding: 9px 11px;
   font-family: var(--font-sans);
-  font-size: var(--font-size-base);
-  min-height: var(--min-target);
+  font-size: var(--font-size-md);
   cursor: pointer;
   transition: border-color var(--transition-fast);
 }
@@ -29,3 +28,35 @@
 .select:hover {
   border-color: var(--color-border-strong);
 }
+
+.select:focus {
+  border-color: var(--color-border-focus);
+}
+
+/* Inline "create new group" form shown in place of the select */
+.createRow {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+}
+
+.createInput {
+  flex: 1;
+  min-width: 0;
+  background: var(--color-surface-inset);
+  color: var(--color-text-body);
+  border: 1px solid var(--color-fill-strong);
+  border-radius: var(--radius-lg);
+  padding: 9px 11px;
+  font-family: var(--font-sans);
+  font-size: var(--font-size-md);
+  transition: border-color var(--transition-fast);
+}
+
+.createInput:hover {
+  border-color: var(--color-border-strong);
+}
+
+.createInput:focus {
+  border-color: var(--color-border-focus);
+}
diff --git a/src/components/GroupSelector/GroupSelector.tsx b/src/components/GroupSelector/GroupSelector.tsx
index 16a3c16..45f5c56 100644
--- a/src/components/GroupSelector/GroupSelector.tsx
+++ b/src/components/GroupSelector/GroupSelector.tsx
@@ -1,12 +1,14 @@
-import { useId } from 'react';
+import { useEffect, useId, useRef, useState } from 'react';
 import type { Group } from '@/types';
+import { Button } from '../Button';
 import styles from './GroupSelector.module.css';
 
 interface GroupSelectorProps {
   groups: Group[];
   value: string;
   onChange: (groupId: string) => void;
-  onCreateNew: () => void;
+  /** Called with the trimmed name when the user confirms the inline "new group" form. */
+  onCreateNew: (name: string) => void;
   label?: string;
 }
 
@@ -16,6 +18,10 @@ const CREATE_NEW_VALUE = '__create_new__';
  * A native <select> for picking a group, with a "+ Create new group" option
  * at the top. Native select is deliberate: it's fully keyboard-accessible by
  * default and screen readers handle it well, no custom ARIA combobox needed.
+ *
+ * Choosing "+ Create new group…" swaps in an inline name input. This must NOT
+ * use window.prompt: modal JS dialogs are suppressed inside MV3 extension
+ * popups, so a prompt would silently return null.
  */
 export function GroupSelector({
   groups,
@@ -25,29 +31,93 @@ export function GroupSelector({
   label = 'Group',
 }: GroupSelectorProps) {
   const id = useId();
+  const [creating, setCreating] = useState(false);
+  const [draftName, setDraftName] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+  const selectRef = useRef<HTMLSelectElement>(null);
+
+  useEffect(() => {
+    if (creating) inputRef.current?.focus();
+  }, [creating]);
 
   function onSelectChange(e: React.ChangeEvent<HTMLSelectElement>) {
     const next = e.target.value;
     if (next === CREATE_NEW_VALUE) {
-      onCreateNew();
+      setCreating(true);
       return;
     }
     onChange(next);
   }
 
+  function confirmCreate() {
+    const name = draftName.trim();
+    if (!name) return;
+    onCreateNew(name);
+    setDraftName('');
+    setCreating(false);
+  }
+
+  function cancelCreate() {
+    setDraftName('');
+    setCreating(false);
+    // Hand focus back to the select so keyboard users aren't dropped.
+    selectRef.current?.focus();
+  }
+
   return (
     <div className={styles.wrapper}>
-      <label htmlFor={id} className={styles.label}>
-        {label}
+      <label htmlFor={creating ? `${id}-new` : id} className={styles.label}>
+        {creating ? 'New group name' : label}
       </label>
-      <select id={id} className={styles.select} value={value} onChange={onSelectChange}>
-        <option value={CREATE_NEW_VALUE}>+ Create new group…</option>
-        {groups.map((g) => (
-          <option key={g.id} value={g.id}>
-            {g.name}
-          </option>
-        ))}
-      </select>
+
+      {creating ? (
+        <div className={styles.createRow}>
+          <input
+            ref={inputRef}
+            id={`${id}-new`}
+            type="text"
+            className={styles.createInput}
+            value={draftName}
+            placeholder="e.g. Staging"
+            maxLength={40}
+            onChange={(e) => setDraftName(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                confirmCreate();
+              }
+              if (e.key === 'Escape') {
+                // Cancel only the inline form — stop the event so the drawer
+                // (focus trap listens on document) doesn't close too.
+                e.preventDefault();
+                e.stopPropagation();
+                cancelCreate();
+              }
+            }}
+          />
+          <Button variant="primary" size="sm" onClick={confirmCreate} disabled={!draftName.trim()}>
+            Add
+          </Button>
+          <Button variant="ghost" size="sm" onClick={cancelCreate}>
+            Cancel
+          </Button>
+        </div>
+      ) : (
+        <select
+          ref={selectRef}
+          id={id}
+          className={styles.select}
+          value={value}
+          onChange={onSelectChange}
+        >
+          <option value={CREATE_NEW_VALUE}>+ Create new group…</option>
+          {groups.map((g) => (
+            <option key={g.id} value={g.id}>
+              {g.name}
+            </option>
+          ))}
+        </select>
+      )}
     </div>
   );
 }
diff --git a/src/components/Header/Header.module.css b/src/components/Header/Header.module.css
index 9d4ccd8..74af387 100644
--- a/src/components/Header/Header.module.css
+++ b/src/components/Header/Header.module.css
@@ -2,32 +2,33 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--space-4) var(--space-5);
-  background: var(--color-surface-raised);
+  padding: var(--pad-block) var(--pad-inline);
   border-bottom: 1px solid var(--color-border);
-  position: sticky;
-  top: 0;
-  z-index: 2;
+  flex-shrink: 0;
 }
 
 .brand {
   display: flex;
   align-items: center;
-  gap: var(--space-3);
+  gap: var(--space-5);
+  min-width: 0;
 }
 
+/* Bordered square mark holding the magnifier — inspect-the-URL, in one glyph. */
 .logo {
-  display: inline-flex;
+  width: 26px;
+  height: 26px;
+  border-radius: var(--radius-md);
+  border: 1.5px solid var(--color-accent-text);
+  display: flex;
   align-items: center;
   justify-content: center;
-  width: 20px;
-  height: 20px;
-  color: var(--color-accent);
+  flex-shrink: 0;
+  color: var(--color-accent-text);
 }
 
 .title {
-  font-family: var(--font-sans);
-  font-size: var(--font-size-md);
+  font-size: var(--font-size-lg);
   font-weight: 600;
   letter-spacing: -0.01em;
   color: var(--color-text-primary);
@@ -37,5 +38,6 @@
 .actions {
   display: flex;
   align-items: center;
-  gap: var(--space-2);
+  gap: var(--space-3);
+  flex-shrink: 0;
 }
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index cf6d1ec..732bed7 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -3,7 +3,7 @@ import { IconSearch } from '../icons';
 import styles from './Header.module.css';
 
 interface HeaderProps {
-  /** Right-side slot for action buttons (theme toggle, saved links trigger). */
+  /** Right-side slot for action buttons (theme toggle, expand, saved links). */
   actions?: ReactNode;
 }
 
diff --git a/src/components/IconButton/IconButton.module.css b/src/components/IconButton/IconButton.module.css
index d915177..f02867c 100644
--- a/src/components/IconButton/IconButton.module.css
+++ b/src/components/IconButton/IconButton.module.css
@@ -1,58 +1,97 @@
 .root {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
+  padding: 0;
   background: transparent;
-  border: 1px solid transparent;
-  border-radius: var(--radius-md);
-  color: var(--color-text-muted);
+  border-radius: var(--radius-sm);
+  color: var(--color-text-faint);
   cursor: pointer;
   transition:
-    background-color var(--transition-fast),
     color var(--transition-fast),
+    background var(--transition-fast),
     border-color var(--transition-fast);
 }
 
-.size-sm {
-  width: var(--min-target);
-  height: var(--min-target);
+.root:hover:not(:disabled) {
+  background: var(--color-fill);
+  color: var(--color-text-strong);
 }
 
-.size-md {
-  width: 32px;
-  height: 32px;
+.root:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.root:not(:disabled):hover {
-  background: var(--color-surface);
-  color: var(--color-text-primary);
+/* ── Variants ── */
+
+/* Header affordances: 1px outline, slightly brighter idle color. */
+.bordered {
+  border: 1px solid var(--color-fill-strong);
+  border-radius: var(--radius-md);
+  color: var(--color-text-muted);
 }
 
-.root:disabled {
-  cursor: not-allowed;
-  opacity: 0.4;
+.bordered:hover:not(:disabled) {
+  background: var(--color-fill-subtle);
+  color: var(--color-text-strong);
 }
 
-.tone-danger:not(:disabled):hover {
-  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
+/* In-row affordances: no chrome until hovered. */
+.plain {
+  border: none;
+}
+
+/* Filled — the add-parameter button. */
+.filled {
+  border: none;
+  background: var(--color-accent);
+  color: var(--color-on-accent);
+}
+
+.filled:hover:not(:disabled) {
+  background: var(--color-accent-hover);
+  color: var(--color-on-accent);
+}
+
+.filled:disabled {
+  background: var(--color-fill-strong);
+  color: var(--color-text-faint);
+  opacity: 1;
+}
+
+/* ── Tones ── */
+
+.danger:hover:not(:disabled) {
   color: var(--color-danger);
 }
 
-.tone-accent {
-  color: var(--color-accent);
-  border-color: var(--color-border);
+/* ── Sizes ── */
+
+.sizeSm {
+  width: 24px;
+  height: 24px;
 }
 
-.tone-accent:not(:disabled):hover {
-  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
-  border-color: var(--color-accent);
-  color: var(--color-accent);
+.sizeMd {
+  width: 26px;
+  height: 26px;
 }
 
-.icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
+.sizeLg {
+  width: 28px;
+  height: 28px;
+}
+
+.sizeXl {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-md);
 }
diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx
index b252b42..9ec8a3b 100644
--- a/src/components/IconButton/IconButton.tsx
+++ b/src/components/IconButton/IconButton.tsx
@@ -1,16 +1,30 @@
 import type { ButtonHTMLAttributes, ReactNode } from 'react';
 import styles from './IconButton.module.css';
 
+export type IconButtonVariant = 'plain' | 'bordered' | 'filled';
+export type IconButtonSize = 'sm' | 'md' | 'lg' | 'xl';
+
 export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** Required for screen readers — there is no visible text. */
   'aria-label': string;
   icon: ReactNode;
-  tone?: 'default' | 'danger' | 'accent';
-  size?: 'sm' | 'md';
+  /** "plain" for in-row controls, "bordered" for the header, "filled" for add. */
+  variant?: IconButtonVariant;
+  tone?: 'default' | 'danger';
+  /** sm 24px (rows) · md 26px (panels) · lg 28px (header) · xl 32px (add). */
+  size?: IconButtonSize;
 }
 
+const SIZE_CLASS: Record<IconButtonSize, string> = {
+  sm: styles.sizeSm,
+  md: styles.sizeMd,
+  lg: styles.sizeLg,
+  xl: styles.sizeXl,
+};
+
 export function IconButton({
   icon,
+  variant = 'plain',
   tone = 'default',
   size = 'md',
   className,
@@ -21,7 +35,13 @@ export function IconButton({
     <button
       {...rest}
       type={type}
-      className={[styles.root, styles[`tone-${tone}`], styles[`size-${size}`], className ?? '']
+      className={[
+        styles.root,
+        styles[variant],
+        SIZE_CLASS[size],
+        tone === 'danger' ? styles.danger : '',
+        className ?? '',
+      ]
         .filter(Boolean)
         .join(' ')}
     >
diff --git a/src/components/JsonStack/JsonLeafInput.module.css b/src/components/JsonStack/JsonLeafInput.module.css
index 534e599..ab1e5af 100644
--- a/src/components/JsonStack/JsonLeafInput.module.css
+++ b/src/components/JsonStack/JsonLeafInput.module.css
@@ -1,35 +1,42 @@
 .leaf {
-  font-family: var(--font-mono);
-  font-size: var(--font-size-sm);
-  cursor: pointer;
+  padding: 1px 4px;
   border-radius: var(--radius-sm);
-  padding: 1px 3px;
+  font-family: var(--font-mono);
+  font-size: var(--font-size-mono);
+  cursor: text;
   transition: background var(--transition-fast);
-  /* Single line with ellipsis — full value visible on click-to-edit */
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: 0;
 }
 
 .leaf:hover {
-  background: rgba(167, 139, 250, 0.12);
+  background: var(--color-fill);
 }
 
-/* Type-based colors — all verified WCAG AA in both themes (see tokens.css) */
-.typeString  { color: var(--json-string); }
-.typeNumber  { color: var(--json-number); }
-.typeBool    { color: var(--json-boolean); }
-.typeNull    { color: var(--json-null); }
-
 .input {
-  font-family: var(--font-mono);
-  font-size: var(--font-size-sm);
-  background: var(--color-surface-raised);
-  border: 1px solid var(--color-accent);
+  background: var(--color-surface-inset);
+  border: 1px solid var(--color-border-focus);
   border-radius: var(--radius-sm);
-  color: var(--color-text-primary);
   padding: 1px 4px;
-  min-width: 60px;
-  outline: none;
+  font-family: var(--font-mono);
+  font-size: var(--font-size-mono);
+  color: var(--color-text-body);
+}
+
+/* Monochrome type differentiation: lightness + weight, never hue alone. */
+.typeString {
+  color: var(--json-string);
+}
+
+.typeNumber {
+  color: var(--json-number);
+  font-weight: 500;
+}
+
+.typeBool {
+  color: var(--json-boolean);
+  font-weight: 500;
+}
+
+.typeNull {
+  color: var(--json-null);
+  font-style: italic;
 }
diff --git a/src/components/JsonStack/JsonLeafInput.tsx b/src/components/JsonStack/JsonLeafInput.tsx
index 60feabc..06263a4 100644
--- a/src/components/JsonStack/JsonLeafInput.tsx
+++ b/src/components/JsonStack/JsonLeafInput.tsx
@@ -29,7 +29,10 @@ export function JsonLeafInput({ value, onCommit }: JsonLeafInputProps) {
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
-    if (editing) inputRef.current?.select();
+    if (editing) {
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    }
   }, [editing]);
 
   function startEdit() {
@@ -52,7 +55,6 @@ export function JsonLeafInput({ value, onCommit }: JsonLeafInputProps) {
         ref={inputRef}
         className={styles.input}
         value={draft}
-        autoFocus
         style={{ width: Math.max(60, draft.length * 8 + 16) }}
         onChange={(e) => setDraft(e.target.value)}
         onBlur={commit}
diff --git a/src/components/JsonStack/JsonTree.module.css b/src/components/JsonStack/JsonTree.module.css
index 47bf2b7..9f52775 100644
--- a/src/components/JsonStack/JsonTree.module.css
+++ b/src/components/JsonStack/JsonTree.module.css
@@ -1,77 +1,52 @@
 .tree {
   display: flex;
   flex-direction: column;
-  gap: 2px;
-  font-family: var(--font-mono);
-  font-size: var(--font-size-sm);
+  border: 1px solid var(--color-border-card);
+  border-radius: var(--radius-card);
+  overflow: hidden;
 }
 
-.empty {
-  padding: var(--space-4) 0;
+.leafRow,
+.containerRow {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 9px 12px;
+  border-bottom: 1px solid var(--color-border);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-mono);
+  min-width: 0;
 }
 
-.emptyLabel {
-  font-family: var(--font-mono);
-  font-size: var(--font-size-sm);
-  font-style: italic;
-  color: var(--color-text-muted);
+.leafRow:last-child,
+.containerRow:last-child {
+  border-bottom: none;
 }
 
-/* Container rows: clickable, show preview + chevron */
 .containerRow {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 5px var(--space-3);
-  border-radius: var(--radius-md);
   cursor: pointer;
   transition: background var(--transition-fast);
-  user-select: none;
 }
 
 .containerRow:hover {
-  background: rgba(167, 139, 250, 0.08);
-}
-
-/* Leaf rows */
-.leafRow {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 5px var(--space-3);
-  /* Allow the leaf value span to shrink and ellipsis */
-  overflow: hidden;
+  background: var(--color-fill-subtle);
 }
 
 .objectKey {
   color: var(--json-key);
-  white-space: nowrap;
+  font-weight: 600;
   cursor: text;
   border-radius: var(--radius-sm);
-  padding: 1px 3px;
-  transition: background var(--transition-fast);
+  padding: 1px 2px;
 }
 
 .objectKey:hover {
-  background: rgba(167, 139, 250, 0.12);
-}
-
-.keyInput {
-  font-family: var(--font-mono);
-  font-size: var(--font-size-sm);
-  color: var(--json-key);
-  background: var(--color-surface-raised);
-  border: 1px solid var(--color-accent);
-  border-radius: var(--radius-sm);
-  padding: 1px 4px;
-  field-sizing: content;
-  min-width: 20px;
-  outline: none;
+  background: var(--color-fill);
 }
 
 .indexKey {
   color: var(--json-index);
-  white-space: nowrap;
+  font-weight: 500;
 }
 
 .colon {
@@ -79,20 +54,48 @@
   flex-shrink: 0;
 }
 
+.keyInput {
+  background: var(--color-surface-inset);
+  border: 1px solid var(--color-border-focus);
+  border-radius: var(--radius-sm);
+  padding: 1px 4px;
+  font-family: var(--font-mono);
+  font-size: var(--font-size-mono);
+  font-weight: 600;
+  color: var(--json-key);
+  min-width: 60px;
+  max-width: 160px;
+}
+
 .preview {
-  color: var(--color-text-muted);
+  flex: 1;
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  flex: 1;
-  min-width: 0;
+  color: var(--color-text-muted);
 }
 
 .chevron {
-  color: var(--color-accent);
   display: flex;
   align-items: center;
-  margin-left: auto;
-  opacity: 0.7;
   flex-shrink: 0;
+  color: var(--color-text-faint);
+}
+
+.containerRow:hover .chevron {
+  color: var(--color-text-primary);
+}
+
+.empty {
+  padding: var(--space-11) var(--space-5);
+  text-align: center;
+  border: 1px solid var(--color-border-card);
+  border-radius: var(--radius-card);
+}
+
+.emptyLabel {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-mono);
+  color: var(--color-text-faint);
 }
diff --git a/src/components/JsonStack/JsonTree.tsx b/src/components/JsonStack/JsonTree.tsx
index f7482f0..9986bbc 100644
--- a/src/components/JsonStack/JsonTree.tsx
+++ b/src/components/JsonStack/JsonTree.tsx
@@ -1,5 +1,6 @@
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { isContainer, shortPreview } from '@/lib/structuredParam';
+import { IconChevronRight } from '../icons';
 import { JsonLeafInput } from './JsonLeafInput';
 import styles from './JsonTree.module.css';
 
@@ -13,13 +14,18 @@ interface JsonTreeProps {
 function EditableKey({ k, onCommit }: { k: string; onCommit: (newKey: string) => void }) {
   const [editing, setEditing] = useState(false);
   const [draft, setDraft] = useState(k);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (editing) inputRef.current?.focus();
+  }, [editing]);
 
   if (editing) {
     return (
       <input
+        ref={inputRef}
         className={styles.keyInput}
         value={draft}
-        autoFocus
         onChange={(e) => setDraft(e.target.value)}
         onBlur={() => {
           setEditing(false);
@@ -60,7 +66,7 @@ function EditableKey({ k, onCommit }: { k: string; onCommit: (newKey: string) =>
         }
       }}
     >
-      "{k}"
+      {`"${k}"`}
     </span>
   );
 }
@@ -107,22 +113,14 @@ export function JsonTree({ value, onPush, onLeafChange, onKeyChange }: JsonTreeP
             ) : isArr ? (
               <span className={styles.indexKey}>{k}</span>
             ) : (
-              <span className={styles.objectKey}>"{k}"</span>
+              <span className={styles.objectKey}>{`"${k}"`}</span>
             )}
             <span className={styles.colon}>{' : '}</span>
             {container ? (
               <>
                 <span className={styles.preview}>{shortPreview(v)}</span>
                 <span className={styles.chevron}>
-                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-                    <path
-                      d="M4.5 3L7.5 6L4.5 9"
-                      stroke="currentColor"
-                      strokeWidth="1.5"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    />
-                  </svg>
+                  <IconChevronRight />
                 </span>
               </>
             ) : (
diff --git a/src/components/JsonStack/RawJsonEditor.module.css b/src/components/JsonStack/RawJsonEditor.module.css
index 65f1e2f..2c0dda6 100644
--- a/src/components/JsonStack/RawJsonEditor.module.css
+++ b/src/components/JsonStack/RawJsonEditor.module.css
@@ -1,38 +1,47 @@
 .root {
   display: flex;
   flex-direction: column;
-  gap: var(--space-2);
+  gap: var(--space-3);
 }
 
 .textarea {
   width: 100%;
-  field-sizing: content;
-  min-height: 60px;
-  resize: none;
-  padding: var(--space-3) var(--space-4);
-  background: var(--color-surface);
-  border: 1px solid var(--color-input-border);
-  border-radius: var(--radius-md);
-  color: var(--color-text-primary);
+  min-height: 200px;
+  resize: vertical;
+  background: var(--color-surface-inset);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-card);
+  padding: 12px 14px;
   font-family: var(--font-mono);
-  font-size: var(--font-size-sm);
-  line-height: 1.6;
-  outline: none;
+  font-size: var(--font-size-mono);
+  line-height: var(--line-height-mono);
+  color: var(--color-text-body);
+  tab-size: 2;
   transition: border-color var(--transition-fast);
 }
 
-.textarea:focus {
+.textarea:hover {
   border-color: var(--color-border-strong);
 }
 
+.textarea:focus {
+  border-color: var(--color-border-focus);
+}
 
 .hasError {
-  border-color: var(--color-danger) !important;
+  border-color: var(--color-danger);
+}
+
+.hasError:hover,
+.hasError:focus {
+  border-color: var(--color-danger);
 }
 
 .errorMsg {
-  font-size: var(--font-size-xs);
-  color: var(--color-danger);
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
   margin: 0;
-  font-family: var(--font-mono);
+  font-size: var(--font-size-base);
+  color: var(--color-danger);
 }
diff --git a/src/components/JsonStack/StackFrame.module.css b/src/components/JsonStack/StackFrame.module.css
index 97db796..589aafc 100644
--- a/src/components/JsonStack/StackFrame.module.css
+++ b/src/components/JsonStack/StackFrame.module.css
@@ -1,14 +1,15 @@
 .frame {
   display: flex;
   flex-direction: column;
-  gap: var(--space-3);
-  animation: slideIn 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
+  gap: var(--space-5);
+  margin-top: var(--space-8);
+  animation: slide-in var(--transition-panel) cubic-bezier(0.22, 1, 0.36, 1) both;
 }
 
-@keyframes slideIn {
+@keyframes slide-in {
   from {
     opacity: 0;
-    transform: translateX(12px);
+    transform: translateX(10px);
   }
   to {
     opacity: 1;
@@ -16,13 +17,13 @@
   }
 }
 
-/* ── Top bar: breadcrumb + toggle ── */
+/* ── Top bar: breadcrumb + view toggle ── */
 
 .topBar {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--space-3);
+  gap: var(--space-5);
   flex-wrap: wrap;
 }
 
@@ -30,55 +31,37 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: 2px;
+  gap: var(--space-1);
   font-family: var(--font-mono);
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-mono);
   min-width: 0;
 }
 
-.crumbRoot {
-  color: #9CA3AF;
-  cursor: pointer;
+.crumb {
   padding: 2px 4px;
+  border: none;
+  background: none;
   border-radius: var(--radius-sm);
   font-family: inherit;
   font-size: inherit;
+  color: var(--color-text-muted);
+  cursor: pointer;
   transition: color var(--transition-fast);
 }
 
-.crumbRoot:hover {
+.crumb:hover {
   color: var(--color-text-primary);
 }
 
-.crumbGroup {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-}
-
 .crumbSep {
-  color: #4B5563;
+  color: var(--color-text-faint);
   user-select: none;
 }
 
-.crumbAncestor {
-  color: #9CA3AF;
-  cursor: pointer;
+.crumbCurrent {
   padding: 2px 4px;
-  border-radius: var(--radius-sm);
-  font-family: inherit;
-  font-size: inherit;
-  transition: color var(--transition-fast);
-}
-
-.crumbAncestor:hover {
   color: var(--color-text-primary);
-}
-
-.crumbCurrent {
-  color: #7DD3FC;
   font-weight: 600;
-  padding: 2px 4px;
 }
 
 /* ── Structured / Raw toggle pill ── */
@@ -86,30 +69,36 @@
 .toggle {
   display: flex;
   flex-shrink: 0;
-  background: var(--color-surface-sunken);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 2px;
   gap: 2px;
+  padding: 2px;
+  background: var(--color-surface-inset);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
 }
 
 .toggleBtn {
   padding: 3px 10px;
-  border-radius: var(--radius-sm);
   border: 1px solid transparent;
+  border-radius: var(--radius-sm);
   font-family: var(--font-mono);
   font-size: var(--font-size-xs);
   font-weight: 500;
   color: var(--color-text-muted);
-  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
   white-space: nowrap;
+  transition:
+    background var(--transition-fast),
+    color var(--transition-fast),
+    border-color var(--transition-fast);
+}
+
+.toggleBtn:hover {
+  color: var(--color-text-primary);
 }
 
 .toggleActive {
-  background: var(--color-surface-raised);
+  background: var(--color-fill);
   border-color: var(--color-border);
   color: var(--color-text-primary);
-  box-shadow: var(--shadow-sm);
 }
 
 /* ── Body ── */
@@ -119,28 +108,19 @@
   overflow-y: auto;
 }
 
+/* Shown when the drilled-into param disappeared or stopped being valid JSON */
+.missing {
+  margin: 0;
+  padding: var(--space-8) 0;
+  color: var(--color-text-faint);
+  font-size: var(--font-size-mono);
+}
+
 /* ── Footer / Back button ── */
 
 .footer {
   display: flex;
   align-items: center;
-  padding-top: var(--space-3);
+  padding-top: var(--space-5);
   border-top: 1px solid var(--color-border);
 }
-
-.backBtn {
-  font-family: var(--font-mono);
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: var(--space-2) var(--space-4);
-  cursor: pointer;
-  transition: background var(--transition-fast), border-color var(--transition-fast);
-}
-
-.backBtn:hover {
-  background: var(--color-surface-raised);
-  border-color: var(--color-border-strong);
-}
diff --git a/src/components/JsonStack/StackFrame.tsx b/src/components/JsonStack/StackFrame.tsx
index a2206fa..8d3cb40 100644
--- a/src/components/JsonStack/StackFrame.tsx
+++ b/src/components/JsonStack/StackFrame.tsx
@@ -1,11 +1,13 @@
 import type { QueryParam } from '@/types';
 import {
-  parseStructuredValue,
+  tryParseStructured,
   serializeStructuredValue,
   getAtPath,
   setAtPath,
   renameKeyAtPath,
 } from '@/lib/structuredParam';
+import { Button } from '../Button';
+import { IconChevronLeft } from '../icons';
 import { JsonTree } from './JsonTree';
 import { RawJsonEditor } from './RawJsonEditor';
 import styles from './StackFrame.module.css';
@@ -41,14 +43,23 @@ export function StackFrame({
 }: StackFrameProps) {
   const currentFrame = frames[frames.length - 1];
   const param = params.find((p) => p.id === currentFrame.paramId);
+  const rootValue = param === undefined ? undefined : tryParseStructured(param.value);
 
-  if (!param) return null;
-
-  let rootValue: unknown;
-  try {
-    rootValue = parseStructuredValue(param.value);
-  } catch {
-    return null;
+  // The param was removed or its value stopped being valid JSON while the
+  // stack was open — offer a way back instead of a dead blank panel.
+  if (rootValue === undefined) {
+    return (
+      <div className={styles.frame}>
+        <div className={styles.body}>
+          <p className={styles.missing}>This value is no longer available.</p>
+        </div>
+        <div className={styles.footer}>
+          <Button variant="ghost" onClick={onPopAll} leadingIcon={<IconChevronLeft />}>
+            Back to parameters
+          </Button>
+        </div>
+      </div>
+    );
   }
 
   const frameValue = getAtPath(rootValue, currentFrame.path);
@@ -82,7 +93,7 @@ export function StackFrame({
       {/* Breadcrumb + Structured/Raw toggle */}
       <div className={styles.topBar}>
         <nav className={styles.breadcrumb} aria-label="JSON path">
-          <button className={styles.crumbRoot} onClick={onPopAll}>
+          <button type="button" className={styles.crumb} onClick={onPopAll}>
             params
           </button>
           {frames.map((f, i) => {
@@ -93,7 +104,7 @@ export function StackFrame({
                 {isCurrent ? (
                   <span className={styles.crumbCurrent}>{f.name}</span>
                 ) : (
-                  <button className={styles.crumbAncestor} onClick={() => onPopTo(i)}>
+                  <button type="button" className={styles.crumb} onClick={() => onPopTo(i)}>
                     {f.name}
                   </button>
                 )}
@@ -104,14 +115,18 @@ export function StackFrame({
 
         <div className={styles.toggle} role="group" aria-label="View mode">
           <button
+            type="button"
             className={`${styles.toggleBtn} ${viewMode === 'structured' ? styles.toggleActive : ''}`}
             onClick={() => onViewModeChange('structured')}
+            aria-pressed={viewMode === 'structured'}
           >
             Structured
           </button>
           <button
+            type="button"
             className={`${styles.toggleBtn} ${viewMode === 'raw' ? styles.toggleActive : ''}`}
             onClick={() => onViewModeChange('raw')}
+            aria-pressed={viewMode === 'raw'}
           >
             Raw JSON
           </button>
@@ -139,9 +154,14 @@ export function StackFrame({
 
       {/* Back button */}
       <div className={styles.footer}>
-        <button className={styles.backBtn} onClick={onPop} aria-label="Go back one level">
-          ← Back
-        </button>
+        <Button
+          variant="ghost"
+          onClick={onPop}
+          leadingIcon={<IconChevronLeft />}
+          aria-label="Go back one level"
+        >
+          Back
+        </Button>
       </div>
     </div>
   );
diff --git a/src/components/LiveRegion/LiveRegion.tsx b/src/components/LiveRegion/LiveRegion.tsx
deleted file mode 100644
index 87bb083..0000000
--- a/src/components/LiveRegion/LiveRegion.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { useEffect, useState } from 'react';
-
-interface LiveRegionProps {
-  /** Changing this prop causes the region to re-announce. */
-  message: string;
-  politeness?: 'polite' | 'assertive';
-}
-
-/**
- * Global aria-live region for announcements (param added, URL applied, copied, etc.).
- *
- * We briefly clear the text after each announcement so that announcing the same
- * message twice in a row still triggers screen reader output.
- */
-export function LiveRegion({ message, politeness = 'polite' }: LiveRegionProps) {
-  const [text, setText] = useState('');
-
-  useEffect(() => {
-    if (!message) return;
-    // Clear first, then set — ensures repeated identical messages get announced.
-    setText('');
-    const id = window.setTimeout(() => setText(message), 50);
-    return () => window.clearTimeout(id);
-  }, [message]);
-
-  return (
-    <div
-      role="status"
-      aria-live={politeness}
-      aria-atomic="true"
-      className="visually-hidden"
-    >
-      {text}
-    </div>
-  );
-}
diff --git a/src/components/LiveRegion/index.ts b/src/components/LiveRegion/index.ts
deleted file mode 100644
index d4b3207..0000000
--- a/src/components/LiveRegion/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { LiveRegion } from './LiveRegion';
diff --git a/src/components/ParamKeyInput/ParamKeyInput.module.css b/src/components/ParamKeyInput/ParamKeyInput.module.css
deleted file mode 100644
index 22b7fa3..0000000
--- a/src/components/ParamKeyInput/ParamKeyInput.module.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.input {
-  width: 100%;
-  padding: 8px 10px;
-  background: var(--color-input-bg-alt);
-  border: 1px solid var(--color-input-border);
-  border-radius: var(--radius-md);
-  color: var(--color-accent);
-  font-family: var(--font-mono);
-  font-size: var(--font-size-sm);
-  font-weight: 500;
-  line-height: var(--line-height-tight);
-  min-height: var(--min-target);
-  transition: border-color var(--transition-fast);
-}
-
-.input::placeholder {
-  color: var(--color-text-muted);
-  font-weight: 400;
-}
-
-.input:hover {
-  border-color: var(--color-border-strong);
-}
diff --git a/src/components/ParamKeyInput/ParamKeyInput.tsx b/src/components/ParamKeyInput/ParamKeyInput.tsx
deleted file mode 100644
index 6886f64..0000000
--- a/src/components/ParamKeyInput/ParamKeyInput.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import type { ChangeEvent } from 'react';
-import styles from './ParamKeyInput.module.css';
-
-interface ParamKeyInputProps {
-  id: string;
-  value: string;
-  placeholder?: string;
-  'aria-label': string;
-  onChange: (next: string) => void;
-  onEnter?: () => void;
-}
-
-export function ParamKeyInput({
-  id,
-  value,
-  placeholder,
-  onChange,
-  onEnter,
-  'aria-label': ariaLabel,
-}: ParamKeyInputProps) {
-  function onInput(e: ChangeEvent<HTMLInputElement>) {
-    onChange(e.target.value);
-  }
-
-  function onKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
-    if (e.key === 'Enter' && onEnter) {
-      e.preventDefault();
-      onEnter();
-    }
-  }
-
-  return (
-    <input
-      id={id}
-      type="text"
-      className={styles.input}
-      value={value}
-      placeholder={placeholder}
-      aria-label={ariaLabel}
-      spellCheck={false}
-      autoComplete="off"
-      autoCorrect="off"
-      autoCapitalize="off"
-      onChange={onInput}
-      onKeyDown={onKeyDown}
-    />
-  );
-}
diff --git a/src/components/ParamKeyInput/index.ts b/src/components/ParamKeyInput/index.ts
deleted file mode 100644
index a58a4ec..0000000
--- a/src/components/ParamKeyInput/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { ParamKeyInput } from './ParamKeyInput';
diff --git a/src/components/ParamList/ParamList.module.css b/src/components/ParamList/ParamList.module.css
index be39583..4a387c0 100644
--- a/src/components/ParamList/ParamList.module.css
+++ b/src/components/ParamList/ParamList.module.css
@@ -1,20 +1,26 @@
 .section {
-  padding: var(--space-5);
+  display: flex;
+  flex-direction: column;
+}
+
+/* Separates the filter from the URL preview above it. */
+.searchWrap {
+  margin-top: var(--space-8);
 }
 
 .header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: var(--space-3);
+  margin-top: var(--space-9);
+  margin-bottom: var(--space-5);
 }
 
 .heading {
-  font-family: var(--font-sans);
   font-size: var(--font-size-xs);
   font-weight: 600;
-  text-transform: uppercase;
   letter-spacing: 0.08em;
+  text-transform: uppercase;
   color: var(--color-text-muted);
   margin: 0;
 }
@@ -23,22 +29,28 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 24px;
-  height: 20px;
-  padding: 0 8px;
-  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
-  color: var(--color-accent);
-  font-family: var(--font-mono);
-  font-size: var(--font-size-xs);
+  background: var(--color-accent-soft);
+  color: var(--color-accent-text);
+  font-size: var(--font-size-sm);
   font-weight: 600;
+  padding: 2px 8px;
   border-radius: var(--radius-full);
 }
 
+/* All rows live in one bordered card, divided by hairlines. */
 .list {
   list-style: none;
+  margin: 0;
   padding: 0;
+  border: 1px solid var(--color-border-card);
+  border-radius: var(--radius-card);
+  overflow: hidden;
+}
+
+.empty {
+  text-align: center;
+  color: var(--color-text-faint);
+  font-size: var(--font-size-mono);
+  padding: var(--space-11) var(--space-5);
   margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
 }
diff --git a/src/components/ParamList/ParamList.tsx b/src/components/ParamList/ParamList.tsx
index 7ebe5b2..707364c 100644
--- a/src/components/ParamList/ParamList.tsx
+++ b/src/components/ParamList/ParamList.tsx
@@ -1,9 +1,11 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import type { QueryParam } from '@/types';
+import { isEditableTarget } from '@/lib/dom';
 import { StackFrame } from '../JsonStack';
 import type { FrameInfo } from '../JsonStack';
 import { ParamRow } from '../ParamRow';
 import { AddParamRow } from '../AddParamRow';
+import { SearchInput } from '../SearchInput';
 import styles from './ParamList.module.css';
 
 interface ParamListProps {
@@ -26,11 +28,23 @@ export function ParamList({
   const headingId = 'params-heading';
   const [frames, setFrames] = useState<FrameInfo[]>([]);
   const [viewMode, setViewMode] = useState<'structured' | 'raw'>('structured');
+  const [search, setSearch] = useState('');
 
-  // Keyboard: Esc pops one frame, Cmd/Ctrl+Backspace pops all
+  const query = search.trim().toLowerCase();
+  const visibleParams = useMemo(
+    () => (query === '' ? params : params.filter((p) => p.key.toLowerCase().includes(query))),
+    [params, query],
+  );
+
+  // Keyboard: Esc pops one frame, Cmd/Ctrl+Backspace pops all.
+  // Both are skipped when the key was already consumed (e.g. cancelling an
+  // inline JSON edit calls preventDefault) or aimed at an editable field —
+  // Esc in the raw JSON textarea must not silently discard the draft, and
+  // Cmd+Backspace in an input is "delete to line start", not "close all".
   useEffect(() => {
     if (frames.length === 0) return;
     function handleKeyDown(e: KeyboardEvent) {
+      if (e.defaultPrevented || isEditableTarget(e.target)) return;
       if (e.key === 'Escape') {
         e.preventDefault();
         setFrames((prev) => (prev.length <= 1 ? [] : prev.slice(0, -1)));
@@ -56,43 +70,46 @@ export function ParamList({
     setFrames((prev) => (prev.length <= 1 ? [] : prev.slice(0, -1)));
   }
 
-  function popAll() {
-    setFrames([]);
+  if (frames.length > 0) {
+    return (
+      <StackFrame
+        frames={frames}
+        params={params}
+        viewMode={viewMode}
+        onViewModeChange={setViewMode}
+        onValueChange={onValueChange}
+        onPop={popFrame}
+        onPopAll={() => setFrames([])}
+        onPopTo={(index) => setFrames((prev) => prev.slice(0, index + 1))}
+        onPush={pushFrame}
+      />
+    );
   }
 
-  function popTo(index: number) {
-    setFrames((prev) => prev.slice(0, index + 1));
-  }
-
-  const showStack = frames.length > 0;
-
   return (
-    <section className={styles.section} aria-labelledby={headingId}>
-      <div className={styles.header}>
-        <h2 id={headingId} className={styles.heading}>
-          Parameters
-        </h2>
-        <span className={styles.count} aria-label={`${params.length} parameters`}>
-          {params.length}
-        </span>
+    <>
+      <div className={styles.searchWrap}>
+        <SearchInput
+          value={search}
+          onChange={setSearch}
+          placeholder="Filter parameters"
+          label="Filter parameters by key"
+        />
       </div>
 
-      {showStack ? (
-        <StackFrame
-          frames={frames}
-          params={params}
-          viewMode={viewMode}
-          onViewModeChange={setViewMode}
-          onValueChange={onValueChange}
-          onPop={popFrame}
-          onPopAll={popAll}
-          onPopTo={popTo}
-          onPush={pushFrame}
-        />
-      ) : (
-        <>
-          <ul className={styles.list} role="list">
-            {params.map((param) => (
+      <section className={styles.section} aria-labelledby={headingId}>
+        <div className={styles.header}>
+          <h2 id={headingId} className={styles.heading}>
+            Parameters
+          </h2>
+          <span className={styles.count} aria-label={`${visibleParams.length} parameters shown`}>
+            {visibleParams.length}
+          </span>
+        </div>
+
+        {visibleParams.length > 0 && (
+          <ul className={styles.list}>
+            {visibleParams.map((param) => (
               <ParamRow
                 key={param.id}
                 param={param}
@@ -108,9 +125,18 @@ export function ParamList({
               />
             ))}
           </ul>
-          <AddParamRow onAdd={onAdd} />
-        </>
-      )}
-    </section>
+        )}
+
+        {visibleParams.length === 0 && (
+          <p className={styles.empty}>
+            {params.length === 0
+              ? 'No parameters in this URL yet.'
+              : `No parameters match "${search.trim()}"`}
+          </p>
+        )}
+
+        <AddParamRow onAdd={onAdd} />
+      </section>
+    </>
   );
 }
diff --git a/src/components/ParamRow/CopyButton.tsx b/src/components/ParamRow/CopyButton.tsx
new file mode 100644
index 0000000..2d745c4
--- /dev/null
+++ b/src/components/ParamRow/CopyButton.tsx
@@ -0,0 +1,53 @@
+import { useEffect, useRef, useState } from 'react';
+import { IconCheck, IconCopy } from '../icons';
+import styles from './ParamRow.module.css';
+
+export type CopyButtonVariant = 'overlay' | 'inline';
+
+interface CopyButtonProps {
+  /** Text to copy; the button is a no-op when empty. */
+  text: string;
+  'aria-label': string;
+  /** "overlay" floats over an input on hover; "inline" sits in a flex row. */
+  variant?: CopyButtonVariant;
+}
+
+const RESET_AFTER_MS = 1500;
+
+/**
+ * Hover-revealed copy button for a param field. Shows a check for a moment
+ * after copying. Excluded from the tab order — the field itself is the
+ * keyboard target, and keyboard users can copy from it directly.
+ */
+export function CopyButton({ text, 'aria-label': ariaLabel, variant = 'overlay' }: CopyButtonProps) {
+  const [copied, setCopied] = useState(false);
+  const timeoutRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current !== null) window.clearTimeout(timeoutRef.current);
+    };
+  }, []);
+
+  function handleCopy() {
+    if (!text) return;
+    void navigator.clipboard.writeText(text).then(() => {
+      setCopied(true);
+      if (timeoutRef.current !== null) window.clearTimeout(timeoutRef.current);
+      timeoutRef.current = window.setTimeout(() => setCopied(false), RESET_AFTER_MS);
+    });
+  }
+
+  const base = variant === 'inline' ? styles.copyBtnInline : styles.copyBtn;
+  return (
+    <button
+      type="button"
+      className={`${base}${copied ? ` ${styles.copied}` : ''}`}
+      onClick={handleCopy}
+      aria-label={ariaLabel}
+      tabIndex={-1}
+    >
+      {copied ? <IconCheck /> : <IconCopy />}
+    </button>
+  );
+}
diff --git a/src/components/ParamRow/ParamRow.module.css b/src/components/ParamRow/ParamRow.module.css
index a2f6e07..2fa4dac 100644
--- a/src/components/ParamRow/ParamRow.module.css
+++ b/src/components/ParamRow/ParamRow.module.css
@@ -1,110 +1,61 @@
 .row {
-  display: grid;
-  /* Strict columns so every row aligns identically regardless of content length. */
-  grid-template-columns: 140px 1fr var(--min-target);
+  display: flex;
   align-items: center;
-  gap: var(--space-3);
-  padding: var(--space-1) 0;
+  gap: var(--space-4);
+  padding: 9px 12px;
+  border-bottom: 1px solid var(--color-border);
   list-style: none;
 }
 
-.keyCell {
-  min-width: 0;
-}
-
-.valueCell {
-  min-width: 0;
+.row:last-child {
+  border-bottom: none;
 }
 
-/* ── Copy-on-hover ── */
+/* ── Key cell: fixed proportion so every row aligns ── */
 
-.fieldWrap {
+.keyCell {
+  flex: 0 0 32%;
+  min-width: 0;
   position: relative;
 }
 
-.copyBtn {
-  position: absolute;
-  right: 5px;
-  top: 50%;
-  transform: translateY(-50%);
+.valueCell {
+  flex: 1;
+  min-width: 0;
   display: flex;
   align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  padding: 0;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-surface-raised);
-  color: var(--color-text-muted);
-  cursor: pointer;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
-}
-
-.fieldWrap:hover .copyBtn {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.copyBtn:hover {
-  color: var(--color-accent);
-  border-color: var(--color-border-strong);
+  gap: var(--space-4);
+  position: relative;
 }
 
-.copyBtn.copied,
-.copyBtnInline.copied {
-  color: var(--color-success);
-}
+/* ── Boolean ── */
 
-/* Structured value: inline copy button (visible on row hover via structuredValue:hover) */
-.copyBtnInline {
-  flex-shrink: 0;
+.boolValue {
+  flex: 1;
   display: flex;
   align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  padding: 0;
-  border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
-  border-radius: var(--radius-sm);
-  background: transparent;
-  color: var(--color-text-muted);
-  cursor: pointer;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
-}
-
-.structuredValue:hover .copyBtnInline {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.copyBtnInline:hover {
-  color: var(--color-accent);
-  border-color: var(--color-border-strong);
+  gap: var(--space-4);
+  min-width: 0;
 }
 
-.removeCell {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
+.boolLabel {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-mono);
+  color: var(--color-text-strong);
 }
 
-/* ── Structured value cell ── */
+/* ── Structured (JSON) ── */
 
 .structuredValue {
+  flex: 1;
   display: flex;
   align-items: center;
-  gap: var(--space-2);
-  width: 100%;
-  padding: 8px 10px;
-  background: var(--color-input-bg);
-  border: 1px solid var(--color-input-border);
+  gap: var(--space-3);
+  min-width: 0;
+  background: var(--color-surface-inset);
+  border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
-  min-height: var(--min-target);
+  padding: 5px 6px 5px 9px;
 }
 
 .structuredPreview {
@@ -114,33 +65,56 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   font-family: var(--font-mono);
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
+  font-size: var(--font-size-mono);
+  color: var(--color-text-muted);
 }
 
-.expandBtn {
-  flex-shrink: 0;
+/* ── Copy-on-hover ── */
+
+.copyBtn {
+  position: absolute;
+  right: 4px;
+  top: 50%;
+  transform: translateY(-50%);
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 22px;
-  height: 22px;
-  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
   border-radius: var(--radius-sm);
-  background: transparent;
-  color: var(--color-accent);
+  background: var(--color-surface-inset);
+  color: var(--color-text-faint);
   cursor: pointer;
-  transition: background var(--transition-fast), border-color var(--transition-fast);
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    opacity var(--transition-fast),
+    color var(--transition-fast),
+    background var(--transition-fast);
 }
 
-.expandBtn:hover {
-  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
-  border-color: var(--color-accent);
+.copyBtnInline {
+  composes: copyBtn;
+  position: static;
+  transform: none;
+  background: transparent;
+}
+
+.keyCell:hover .copyBtn,
+.keyCell:focus-within .copyBtn,
+.valueCell:hover .copyBtn,
+.valueCell:focus-within .copyBtn {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.copyBtn:hover {
+  background: var(--color-fill);
+  color: var(--color-text-primary);
 }
 
-/* Narrow view fallback — if the popup ever renders below 420px (unlikely) */
-@media (max-width: 400px) {
-  .row {
-    grid-template-columns: 110px 1fr var(--min-target);
-  }
+.copied {
+  color: var(--color-text-primary);
 }
diff --git a/src/components/ParamRow/ParamRow.tsx b/src/components/ParamRow/ParamRow.tsx
index bd816a9..5b4074f 100644
--- a/src/components/ParamRow/ParamRow.tsx
+++ b/src/components/ParamRow/ParamRow.tsx
@@ -1,11 +1,11 @@
-import { useId, useState } from 'react';
+import { useId } from 'react';
 import type { QueryParam } from '@/types';
-import { parseStructuredValue, shortPreview } from '@/lib/structuredParam';
-import { ParamKeyInput } from '../ParamKeyInput';
-import { ParamValueInput } from '../ParamValueInput';
+import { tryParseStructured, shortPreview } from '@/lib/structuredParam';
+import { ParamTextInput } from '../ParamTextInput';
 import { BooleanToggle } from '../BooleanToggle';
-import { RemoveParamButton } from '../RemoveParamButton';
-import { IconCheck, IconCopy } from '../icons';
+import { IconButton } from '../IconButton';
+import { IconChevronRight, IconClose } from '../icons';
+import { CopyButton } from './CopyButton';
 import styles from './ParamRow.module.css';
 
 interface ParamRowProps {
@@ -27,131 +27,115 @@ export function ParamRow({
 }: ParamRowProps) {
   const keyId = useId();
   const valueId = useId();
-  const [copiedField, setCopiedField] = useState<'key' | 'value' | null>(null);
-
-  function handleCopy(text: string, field: 'key' | 'value') {
-    if (!text) return;
-    void navigator.clipboard.writeText(text).then(() => {
-      setCopiedField(field);
-      window.setTimeout(() => setCopiedField(null), 1500);
-    });
-  }
-
-  const isBool = param.type === 'boolean';
-  const isStructured = param.type === 'structured';
-
-  let preview = '';
-  if (isStructured) {
-    try {
-      preview = shortPreview(parseStructuredValue(param.value));
-    } catch {
-      preview = param.value;
-    }
-  }
+  const keyName = param.key || '(empty key)';
 
   return (
     <li className={styles.row}>
       <div className={styles.keyCell}>
         <label htmlFor={keyId} className="visually-hidden">
-          Parameter key
+          {`Key for parameter ${keyName}`}
         </label>
-        <div className={styles.fieldWrap}>
-          <ParamKeyInput
-            id={keyId}
-            value={param.key}
-            aria-label={`Key for parameter ${param.key || '(empty)'}`}
-            onChange={(next) => onKeyChange(param.id, next)}
-          />
-          <button
-            className={`${styles.copyBtn}${copiedField === 'key' ? ` ${styles.copied}` : ''}`}
-            onClick={() => handleCopy(param.key, 'key')}
-            aria-label={`Copy key "${param.key}"`}
-            tabIndex={-1}
-          >
-            {copiedField === 'key' ? <IconCheck /> : <IconCopy />}
-          </button>
-        </div>
+        <ParamTextInput
+          id={keyId}
+          variant="key"
+          value={param.key}
+          aria-label={`Key for parameter ${keyName}`}
+          onChange={(next) => onKeyChange(param.id, next)}
+        />
+        <CopyButton text={param.key} aria-label={`Copy key "${param.key}"`} />
       </div>
 
       <div className={styles.valueCell}>
-        {isBool ? (
-          <>
-            <label htmlFor={valueId} className="visually-hidden">
-              {`Boolean value for ${param.key}`}
-            </label>
-            <div className={styles.fieldWrap}>
-              <BooleanToggle
-                id={valueId}
-                value={param.value.toLowerCase() === 'true'}
-                aria-label={`Toggle boolean value for ${param.key}`}
-                onChange={() => onToggleBoolean(param.id)}
-              />
-              <button
-                className={`${styles.copyBtn}${copiedField === 'value' ? ` ${styles.copied}` : ''}`}
-                onClick={() => handleCopy(param.value, 'value')}
-                aria-label={`Copy value "${param.value}"`}
-                tabIndex={-1}
-              >
-                {copiedField === 'value' ? <IconCheck /> : <IconCopy />}
-              </button>
-            </div>
-          </>
-        ) : isStructured ? (
-          <div className={styles.structuredValue}>
-            <span className={styles.structuredPreview}>{preview}</span>
-            <button
-              className={styles.expandBtn}
-              onClick={onExpand}
-              aria-label={`Expand structured value for ${param.key}`}
-              title="Expand structured value"
-            >
-              <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-                <path
-                  d="M4.5 3L7.5 6L4.5 9"
-                  stroke="currentColor"
-                  strokeWidth="1.5"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-              </svg>
-            </button>
-            <button
-              className={`${styles.copyBtnInline}${copiedField === 'value' ? ` ${styles.copied}` : ''}`}
-              onClick={() => handleCopy(param.value, 'value')}
-              aria-label={`Copy structured value for ${param.key}`}
-              tabIndex={-1}
-            >
-              {copiedField === 'value' ? <IconCheck /> : <IconCopy />}
-            </button>
-          </div>
-        ) : (
-          <>
-            <label htmlFor={valueId} className="visually-hidden">
-              {`Value for parameter ${param.key}`}
-            </label>
-            <div className={styles.fieldWrap}>
-              <ParamValueInput
-                id={valueId}
-                value={param.value}
-                aria-label={`Value for parameter ${param.key || '(empty key)'}`}
-                onChange={(next) => onValueChange(param.id, next)}
-              />
-              <button
-                className={`${styles.copyBtn}${copiedField === 'value' ? ` ${styles.copied}` : ''}`}
-                onClick={() => handleCopy(param.value, 'value')}
-                aria-label={`Copy value for parameter ${param.key || '(empty key)'}`}
-                tabIndex={-1}
-              >
-                {copiedField === 'value' ? <IconCheck /> : <IconCopy />}
-              </button>
-            </div>
-          </>
-        )}
+        <ValueCell
+          param={param}
+          valueId={valueId}
+          keyName={keyName}
+          onValueChange={onValueChange}
+          onToggleBoolean={onToggleBoolean}
+          onExpand={onExpand}
+        />
       </div>
 
-      <div className={styles.removeCell}>
-        <RemoveParamButton paramKey={param.key} onRemove={() => onRemove(param.id)} />
-      </div>
+      <IconButton
+        aria-label={param.key ? `Remove parameter ${param.key}` : 'Remove empty parameter'}
+        icon={<IconClose />}
+        size="sm"
+        tone="danger"
+        onClick={() => onRemove(param.id)}
+      />
     </li>
   );
 }
+
+interface ValueCellProps {
+  param: QueryParam;
+  valueId: string;
+  keyName: string;
+  onValueChange: (id: string, value: string) => void;
+  onToggleBoolean: (id: string) => void;
+  onExpand?: () => void;
+}
+
+/** Renders the editor matching the param's detected type: toggle, JSON preview, or text. */
+function ValueCell({
+  param,
+  valueId,
+  keyName,
+  onValueChange,
+  onToggleBoolean,
+  onExpand,
+}: ValueCellProps) {
+  if (param.type === 'boolean') {
+    return (
+      <div className={styles.boolValue}>
+        <BooleanToggle
+          id={valueId}
+          value={param.value.toLowerCase() === 'true'}
+          aria-label={`Toggle value for ${keyName}`}
+          onChange={() => onToggleBoolean(param.id)}
+        />
+        {/* Literal value, casing preserved — never color alone. */}
+        <span className={styles.boolLabel}>{param.value}</span>
+      </div>
+    );
+  }
+
+  if (param.type === 'structured') {
+    const parsed = tryParseStructured(param.value);
+    const preview = parsed === undefined ? param.value : shortPreview(parsed);
+    return (
+      <div className={styles.structuredValue}>
+        <span className={styles.structuredPreview}>{preview}</span>
+        <CopyButton
+          text={param.value}
+          aria-label={`Copy structured value for ${keyName}`}
+          variant="inline"
+        />
+        <IconButton
+          aria-label={`Expand structured value for ${keyName}`}
+          title="Expand structured value"
+          icon={<IconChevronRight />}
+          size="sm"
+          onClick={onExpand}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <label htmlFor={valueId} className="visually-hidden">
+        {`Value for parameter ${keyName}`}
+      </label>
+      <ParamTextInput
+        id={valueId}
+        variant="value"
+        value={param.value}
+        placeholder="(empty)"
+        aria-label={`Value for parameter ${keyName}`}
+        onChange={(next) => onValueChange(param.id, next)}
+      />
+      <CopyButton text={param.value} aria-label={`Copy value for parameter ${keyName}`} />
+    </>
+  );
+}
diff --git a/src/components/ParamTextInput/ParamTextInput.module.css b/src/components/ParamTextInput/ParamTextInput.module.css
new file mode 100644
index 0000000..d76d79f
--- /dev/null
+++ b/src/components/ParamTextInput/ParamTextInput.module.css
@@ -0,0 +1,63 @@
+.input {
+  width: 100%;
+  min-width: 0;
+  border-radius: var(--radius-md);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-mono);
+  line-height: var(--line-height-tight);
+  transition:
+    background var(--transition-fast),
+    border-color var(--transition-fast);
+}
+
+/*
+ * Key cell: borderless with a subtle fill so the key reads as a label rather
+ * than a second equal-weight field.
+ */
+.key {
+  background: var(--color-fill-subtle);
+  border: none;
+  padding: 6px 9px;
+  font-weight: 600;
+  color: var(--color-text-strong);
+}
+
+.key:hover,
+.key:focus {
+  background: var(--color-fill-strong);
+}
+
+/* Value cell: a proper bordered input. */
+.value {
+  background: var(--color-surface-inset);
+  border: 1px solid var(--color-border);
+  padding: 6px 9px;
+  color: var(--color-text-body);
+  text-overflow: ellipsis;
+}
+
+.value:hover {
+  border-color: var(--color-border-strong);
+}
+
+.value:focus {
+  border-color: var(--color-border-focus);
+  text-overflow: clip;
+}
+
+/* Larger padding for the add-parameter card's fields. */
+.add {
+  background: var(--color-surface-inset);
+  border: 1px solid var(--color-fill-strong);
+  padding: 7px 9px;
+  font-family: var(--font-sans);
+  color: var(--color-text-body);
+}
+
+.add:hover {
+  border-color: var(--color-border-strong);
+}
+
+.add:focus {
+  border-color: var(--color-border-focus);
+}
diff --git a/src/components/ParamValueInput/ParamValueInput.tsx b/src/components/ParamTextInput/ParamTextInput.tsx
similarity index 61%
rename from src/components/ParamValueInput/ParamValueInput.tsx
rename to src/components/ParamTextInput/ParamTextInput.tsx
index 183eb04..37ef969 100644
--- a/src/components/ParamValueInput/ParamValueInput.tsx
+++ b/src/components/ParamTextInput/ParamTextInput.tsx
@@ -1,8 +1,15 @@
 import type { ChangeEvent } from 'react';
-import styles from './ParamValueInput.module.css';
+import styles from './ParamTextInput.module.css';
 
-interface ParamValueInputProps {
+export type ParamInputVariant = 'key' | 'value' | 'add';
+
+interface ParamTextInputProps {
   id: string;
+  /**
+   * "key" is the borderless filled label field, "value" the bordered mono
+   * field, "add" the sans-serif field inside the add-parameter card.
+   */
+  variant: ParamInputVariant;
   value: string;
   placeholder?: string;
   'aria-label': string;
@@ -10,14 +17,16 @@ interface ParamValueInputProps {
   onEnter?: () => void;
 }
 
-export function ParamValueInput({
+/** Text field for a parameter key or value cell. */
+export function ParamTextInput({
   id,
+  variant,
   value,
   placeholder,
   onChange,
   onEnter,
   'aria-label': ariaLabel,
-}: ParamValueInputProps) {
+}: ParamTextInputProps) {
   function onInput(e: ChangeEvent<HTMLInputElement>) {
     onChange(e.target.value);
   }
@@ -33,7 +42,7 @@ export function ParamValueInput({
     <input
       id={id}
       type="text"
-      className={styles.input}
+      className={`${styles.input} ${styles[variant]}`}
       value={value}
       placeholder={placeholder}
       aria-label={ariaLabel}
diff --git a/src/components/ParamTextInput/index.ts b/src/components/ParamTextInput/index.ts
new file mode 100644
index 0000000..0f393af
--- /dev/null
+++ b/src/components/ParamTextInput/index.ts
@@ -0,0 +1 @@
+export { ParamTextInput } from './ParamTextInput';
diff --git a/src/components/ParamValueInput/ParamValueInput.module.css b/src/components/ParamValueInput/ParamValueInput.module.css
deleted file mode 100644
index d968a06..0000000
--- a/src/components/ParamValueInput/ParamValueInput.module.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.input {
-  width: 100%;
-  padding: 8px 10px;
-  background: var(--color-input-bg);
-  border: 1px solid var(--color-input-border);
-  border-radius: var(--radius-md);
-  color: var(--color-text-primary);
-  font-family: var(--font-mono);
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-tight);
-  min-height: var(--min-target);
-  text-overflow: ellipsis;
-  transition: border-color var(--transition-fast);
-}
-
-.input::placeholder {
-  color: var(--color-text-muted);
-}
-
-.input:hover {
-  border-color: var(--color-border-strong);
-}
-
-/*
- * On focus we expand vertically so long values are fully visible.
- * Focus-based rather than hover-based so keyboard users get the same affordance.
- */
-.input:focus {
-  text-overflow: clip;
-  white-space: normal;
-  word-break: break-all;
-}
diff --git a/src/components/ParamValueInput/index.ts b/src/components/ParamValueInput/index.ts
deleted file mode 100644
index 85a8648..0000000
--- a/src/components/ParamValueInput/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { ParamValueInput } from './ParamValueInput';
diff --git a/src/components/RemoveParamButton/RemoveParamButton.tsx b/src/components/RemoveParamButton/RemoveParamButton.tsx
deleted file mode 100644
index 5fa1427..0000000
--- a/src/components/RemoveParamButton/RemoveParamButton.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { IconButton } from '../IconButton';
-import { IconClose } from '../icons';
-
-interface RemoveParamButtonProps {
-  paramKey: string;
-  onRemove: () => void;
-}
-
-export function RemoveParamButton({ paramKey, onRemove }: RemoveParamButtonProps) {
-  const label = paramKey ? `Remove parameter ${paramKey}` : 'Remove empty parameter';
-  return (
-    <IconButton
-      aria-label={label}
-      icon={<IconClose />}
-      tone="danger"
-      size="sm"
-      onClick={onRemove}
-    />
-  );
-}
diff --git a/src/components/RemoveParamButton/index.ts b/src/components/RemoveParamButton/index.ts
deleted file mode 100644
index 0d97c55..0000000
--- a/src/components/RemoveParamButton/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { RemoveParamButton } from './RemoveParamButton';
diff --git a/src/components/SavedLinksDrawer/GroupedLinksList.tsx b/src/components/SavedLinksDrawer/GroupedLinksList.tsx
new file mode 100644
index 0000000..4887480
--- /dev/null
+++ b/src/components/SavedLinksDrawer/GroupedLinksList.tsx
@@ -0,0 +1,125 @@
+import { useState } from 'react';
+import type { Group, SavedLink } from '@/types';
+import { Button } from '../Button';
+import { IconButton } from '../IconButton';
+import { IconChevronDown, IconClose, IconEdit, IconLoad } from '../icons';
+import styles from './SavedLinksDrawer.module.css';
+
+interface GroupedLinksListProps {
+  groups: Group[];
+  linksByGroup: Map<string, SavedLink[]>;
+  onLoadLink: (url: string) => void;
+  onDeleteLink: (id: string) => void;
+  onStartEdit: (link: SavedLink) => void;
+  onStartSave: () => void;
+  canSave: boolean;
+}
+
+/** The default drawer view: saved links grouped into collapsible sections. */
+export function GroupedLinksList({
+  groups,
+  linksByGroup,
+  onLoadLink,
+  onDeleteLink,
+  onStartEdit,
+  onStartSave,
+  canSave,
+}: GroupedLinksListProps) {
+  const totalCount = Array.from(linksByGroup.values()).reduce((sum, l) => sum + l.length, 0);
+
+  // All groups expanded by default.
+  const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(() => new Set());
+
+  function toggleGroup(id: string) {
+    setCollapsedGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
+
+  return (
+    <div className={styles.list}>
+      <div className={styles.saveCurrent}>
+        <Button variant="primary" onClick={onStartSave} block disabled={!canSave}>
+          Save current URL
+        </Button>
+      </div>
+
+      {totalCount === 0 ? (
+        <p className={styles.empty}>No saved URLs yet</p>
+      ) : (
+        groups.map((g) => {
+          const groupLinks = linksByGroup.get(g.id) ?? [];
+          if (groupLinks.length === 0) return null;
+          const isExpanded = !collapsedGroups.has(g.id);
+          return (
+            <section key={g.id} className={styles.groupSection} aria-labelledby={`g-${g.id}`}>
+              <button
+                type="button"
+                id={`g-${g.id}`}
+                className={styles.groupToggle}
+                onClick={() => toggleGroup(g.id)}
+                aria-expanded={isExpanded}
+              >
+                <span className={styles.groupName}>
+                  {g.name}
+                  <span className={styles.groupCount} aria-label={`${groupLinks.length} links`}>
+                    {groupLinks.length}
+                  </span>
+                </span>
+                <span
+                  className={`${styles.chevron} ${isExpanded ? '' : styles.chevronCollapsed}`}
+                  aria-hidden="true"
+                >
+                  <IconChevronDown />
+                </span>
+              </button>
+
+              {isExpanded && (
+                <ul className={styles.linkList}>
+                  {groupLinks.map((link) => {
+                    const name = link.label || link.url;
+                    return (
+                      <li key={link.id} className={styles.linkRow}>
+                        <span className={styles.linkText}>
+                          <span className={styles.linkLabel}>{name}</span>
+                          {link.label && <span className={styles.linkUrl}>{link.url}</span>}
+                        </span>
+                        <span className={styles.linkActions}>
+                          <IconButton
+                            aria-label={`Load ${name}`}
+                            title="Load into editor"
+                            icon={<IconLoad />}
+                            size="md"
+                            onClick={() => onLoadLink(link.url)}
+                          />
+                          <IconButton
+                            aria-label={`Edit ${name}`}
+                            title="Edit"
+                            icon={<IconEdit />}
+                            size="md"
+                            onClick={() => onStartEdit(link)}
+                          />
+                          <IconButton
+                            aria-label={`Delete ${name}`}
+                            title="Delete"
+                            icon={<IconClose />}
+                            size="md"
+                            tone="danger"
+                            onClick={() => onDeleteLink(link.id)}
+                          />
+                        </span>
+                      </li>
+                    );
+                  })}
+                </ul>
+              )}
+            </section>
+          );
+        })
+      )}
+    </div>
+  );
+}
diff --git a/src/components/SavedLinksDrawer/SaveForm.tsx b/src/components/SavedLinksDrawer/SaveForm.tsx
new file mode 100644
index 0000000..cae4504
--- /dev/null
+++ b/src/components/SavedLinksDrawer/SaveForm.tsx
@@ -0,0 +1,85 @@
+import { useId } from 'react';
+import type { Group } from '@/types';
+import { Button } from '../Button';
+import { GroupSelector } from '../GroupSelector';
+import styles from './SavedLinksDrawer.module.css';
+
+interface SaveFormProps {
+  label: string;
+  onLabelChange: (v: string) => void;
+  groupId: string;
+  onGroupChange: (id: string) => void;
+  groups: Group[];
+  onCreateNewGroup: (name: string) => void;
+  onSubmit: () => void;
+  onCancel: () => void;
+  previewUrl: string;
+  submitLabel?: string;
+}
+
+/** Shared form body for both "save current URL" and "edit saved URL" modes. */
+export function SaveForm({
+  label,
+  onLabelChange,
+  groupId,
+  onGroupChange,
+  groups,
+  onCreateNewGroup,
+  onSubmit,
+  onCancel,
+  previewUrl,
+  submitLabel = 'Save',
+}: SaveFormProps) {
+  const labelId = useId();
+  const urlId = useId();
+
+  return (
+    <div className={styles.form}>
+      <div className={styles.field}>
+        <label htmlFor={labelId} className={styles.fieldLabel}>
+          Label (optional)
+        </label>
+        <input
+          id={labelId}
+          type="text"
+          className={styles.textInput}
+          value={label}
+          onChange={(e) => onLabelChange(e.target.value)}
+          placeholder="e.g. Staging with debug flag"
+          maxLength={80}
+        />
+      </div>
+
+      <GroupSelector
+        groups={groups}
+        value={groupId}
+        onChange={onGroupChange}
+        onCreateNew={onCreateNewGroup}
+      />
+
+      <div className={styles.field}>
+        <label htmlFor={urlId} className={styles.fieldLabel}>
+          URL
+        </label>
+        {/* Read-only: the URL is edited in the main view, shown here to confirm. */}
+        <textarea
+          id={urlId}
+          className={styles.urlArea}
+          value={previewUrl}
+          readOnly
+          spellCheck={false}
+          title={previewUrl}
+        />
+      </div>
+
+      <div className={styles.formActions}>
+        <Button variant="primary" onClick={onSubmit}>
+          {submitLabel}
+        </Button>
+        <Button variant="ghost" onClick={onCancel}>
+          Cancel
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/SavedLinksDrawer/SavedLinksDrawer.module.css b/src/components/SavedLinksDrawer/SavedLinksDrawer.module.css
index f6aa26e..dab0c89 100644
--- a/src/components/SavedLinksDrawer/SavedLinksDrawer.module.css
+++ b/src/components/SavedLinksDrawer/SavedLinksDrawer.module.css
@@ -1,168 +1,95 @@
-.backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.35);
-  z-index: 10;
-  animation: fade-in var(--transition-base);
-}
-
-.drawer {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 92%;
-  max-width: 400px;
-  background: var(--color-bg);
-  border-left: 1px solid var(--color-border);
-  box-shadow: var(--shadow-lg);
-  display: flex;
-  flex-direction: column;
-  z-index: 11;
-  animation: slide-in var(--transition-base);
-}
-
-@keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
+/* ── Save / edit form ── */
 
-@keyframes slide-in {
-  from {
-    transform: translateX(100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-4) var(--space-5);
-  border-bottom: 1px solid var(--color-border);
-  background: var(--color-surface-raised);
-}
-
-.headerLeft {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-}
-
-.title {
-  font-family: var(--font-sans);
-  font-size: var(--font-size-md);
-  font-weight: 600;
-  color: var(--color-text-primary);
-  margin: 0;
-}
-
-.body {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--space-5);
-}
-
-/* Save form */
 .form {
   display: flex;
   flex-direction: column;
-  gap: var(--space-4);
+  gap: var(--space-8);
 }
 
 .field {
   display: flex;
   flex-direction: column;
-  gap: var(--space-2);
+  gap: var(--space-3);
 }
 
 .fieldLabel {
   font-size: var(--font-size-xs);
   font-weight: 600;
+  letter-spacing: 0.08em;
   text-transform: uppercase;
-  letter-spacing: 0.06em;
   color: var(--color-text-muted);
 }
 
 .textInput {
   width: 100%;
-  padding: 8px 10px;
-  background: var(--color-input-bg);
-  color: var(--color-text-primary);
-  border: 1px solid var(--color-input-border);
-  border-radius: var(--radius-md);
-  font-family: var(--font-sans);
-  font-size: var(--font-size-base);
-  min-height: var(--min-target);
+  background: var(--color-surface-inset);
+  border: 1px solid var(--color-fill-strong);
+  border-radius: var(--radius-lg);
+  padding: 9px 11px;
+  font-size: var(--font-size-md);
+  color: var(--color-text-body);
   transition: border-color var(--transition-fast);
 }
 
-.textInput::placeholder {
-  color: var(--color-text-muted);
-}
-
 .textInput:hover {
   border-color: var(--color-border-strong);
 }
 
-.urlPreview {
-  padding: 8px 10px;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
+.textInput:focus {
+  border-color: var(--color-border-focus);
+}
+
+.urlArea {
+  width: 100%;
+  height: 88px;
+  resize: none;
+  background: var(--color-surface-inset);
+  border: 1px solid var(--color-fill-strong);
+  border-radius: var(--radius-lg);
+  padding: 9px 11px;
   font-family: var(--font-mono);
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-mono);
   color: var(--color-text-secondary);
   word-break: break-all;
-  max-height: 80px;
-  overflow-y: auto;
 }
 
 .formActions {
   display: flex;
-  gap: var(--space-2);
-  margin-top: var(--space-2);
+  gap: var(--space-4);
 }
 
-/* List */
+/* ── List ── */
+
 .list {
   display: flex;
   flex-direction: column;
-  gap: var(--space-5);
 }
 
-.listTop {
-  margin-bottom: var(--space-2);
+.saveCurrent {
+  margin-bottom: var(--space-10);
 }
 
 .empty {
   text-align: center;
-  color: var(--color-text-muted);
-  font-size: var(--font-size-sm);
-  padding: var(--space-7) var(--space-4);
+  color: var(--color-text-faint);
+  font-size: var(--font-size-mono);
+  padding: 40px var(--space-5);
   margin: 0;
 }
 
 .groupSection {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
+  margin-bottom: var(--space-7);
 }
 
 .groupToggle {
-  width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  width: 100%;
+  padding: var(--space-2) 0;
   background: none;
   border: none;
-  padding: var(--space-1) 0;
   cursor: pointer;
   color: var(--color-text-muted);
   border-radius: var(--radius-sm);
@@ -172,129 +99,93 @@
   color: var(--color-text-primary);
 }
 
-.groupToggle:focus-visible {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 2px;
-}
-
 .groupName {
-  font-family: var(--font-sans);
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
   font-size: var(--font-size-xs);
   font-weight: 600;
+  letter-spacing: 0.08em;
   text-transform: uppercase;
-  letter-spacing: 0.06em;
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-}
-
-.chevron {
-  display: flex;
-  align-items: center;
-  transform: rotate(-90deg);
-  transition: transform 0.2s ease;
-  flex-shrink: 0;
-}
-
-.chevronCollapsed {
-  transform: rotate(-180deg);
 }
 
 .groupCount {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 20px;
-  height: 18px;
-  padding: 0 6px;
-  background: var(--color-surface);
-  color: var(--color-text-muted);
-  font-family: var(--font-mono);
-  font-size: 10px;
+  background: var(--color-fill);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
   font-weight: 600;
+  padding: 1px 7px;
   border-radius: var(--radius-full);
   text-transform: none;
   letter-spacing: 0;
 }
 
+.chevron {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  transition: transform var(--transition-fast);
+}
+
+.chevronCollapsed {
+  transform: rotate(-90deg);
+}
+
 .linkList {
   list-style: none;
   padding: 0;
-  margin: 0;
+  margin: var(--space-4) 0 0;
   display: flex;
   flex-direction: column;
-  gap: var(--space-1);
+  gap: var(--space-3);
 }
 
 .linkRow {
   display: flex;
   align-items: center;
-  gap: var(--space-2);
-  padding: 2px;
-  border-radius: var(--radius-md);
-  transition: background-color var(--transition-fast);
+  gap: var(--space-5);
+  background: var(--color-surface-inset);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-lg);
+  padding: 10px 12px;
 }
 
 .linkRow:hover {
-  background: var(--color-surface);
-}
-
-.linkActions {
-  display: flex;
-  align-items: center;
-  gap: var(--space-1);
-  flex-shrink: 0;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity var(--transition-fast);
-}
-
-.linkRow:hover .linkActions,
-.linkRow:focus-within .linkActions {
-  opacity: 1;
-  pointer-events: auto;
+  border-color: var(--color-border-strong);
 }
 
-.linkButton {
+.linkText {
   flex: 1;
   min-width: 0;
-  padding: var(--space-2) var(--space-3);
-  background: transparent;
-  border: none;
-  border-radius: var(--radius-sm);
-  text-align: left;
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  color: var(--color-text-primary);
-  transition: color var(--transition-fast);
-}
-
-.linkButton:hover .linkLabel {
-  color: var(--color-accent);
-  text-decoration: underline;
-}
-
-.linkButton:focus-visible {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 2px;
 }
 
 .linkLabel {
-  font-family: var(--font-sans);
-  font-size: var(--font-size-sm);
-  font-weight: 500;
+  display: block;
+  font-size: var(--font-size-md);
+  font-weight: 600;
+  color: var(--color-text-body);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .linkUrl {
+  display: block;
+  margin-top: 2px;
   font-family: var(--font-mono);
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-sm);
   color: var(--color-text-muted);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.linkActions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  flex-shrink: 0;
+}
diff --git a/src/components/SavedLinksDrawer/SavedLinksDrawer.tsx b/src/components/SavedLinksDrawer/SavedLinksDrawer.tsx
index 32a48fe..c80f029 100644
--- a/src/components/SavedLinksDrawer/SavedLinksDrawer.tsx
+++ b/src/components/SavedLinksDrawer/SavedLinksDrawer.tsx
@@ -1,15 +1,16 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import type { Group, SavedLink } from '@/types';
 import { DEFAULT_GROUP_ID } from '@/lib/storage';
-import { Button } from '../Button';
-import { IconButton } from '../IconButton';
-import { GroupSelector } from '../GroupSelector';
-import { IconChevronLeft, IconClose, IconEdit } from '../icons';
-import { useFocusTrap } from '@/hooks/useFocusTrap';
-import styles from './SavedLinksDrawer.module.css';
+import { SlidePanel } from '../SlidePanel';
+import { SaveForm } from './SaveForm';
+import { GroupedLinksList } from './GroupedLinksList';
+
+type DrawerMode = 'list' | 'save' | 'edit';
 
 interface SavedLinksDrawerProps {
   open: boolean;
+  /** Mode to show when the drawer opens (e.g. jump straight to the save form). */
+  initialMode?: 'list' | 'save';
   onClose: () => void;
   currentUrl: string;
   links: SavedLink[];
@@ -21,15 +22,23 @@ interface SavedLinksDrawerProps {
   onLoadLink: (url: string) => void;
 }
 
+const MODE_TITLES: Record<DrawerMode, string> = {
+  list: 'Saved URLs',
+  save: 'Save current URL',
+  edit: 'Edit saved URL',
+};
+
 /**
- * Slide-in drawer from the right. Role dialog with a focus trap.
+ * Slide-in panel covering the editor. Role dialog with a focus trap.
  *
- * Two modes:
+ * Three modes:
  *   - "list" (default): browse existing saved links, grouped.
  *   - "save": form to save the current URL with a label + group.
+ *   - "edit": same form, editing an existing saved link.
  */
 export function SavedLinksDrawer({
   open,
+  initialMode = 'list',
   onClose,
   currentUrl,
   links,
@@ -40,12 +49,22 @@ export function SavedLinksDrawer({
   onCreateGroup,
   onLoadLink,
 }: SavedLinksDrawerProps) {
-  const [mode, setMode] = useState<'list' | 'save' | 'edit'>('list');
+  const [mode, setMode] = useState<DrawerMode>('list');
   const [label, setLabel] = useState('');
   const [groupId, setGroupId] = useState(DEFAULT_GROUP_ID);
   const [editingLink, setEditingLink] = useState<SavedLink | null>(null);
 
-  const trapRef = useFocusTrap<HTMLDivElement>(open, onClose);
+  // Apply initialMode only on the closed → open transition, so re-renders
+  // (or pressing Cmd+S while already open) don't yank the user out of a form.
+  const wasOpen = useRef(false);
+  useEffect(() => {
+    if (open && !wasOpen.current) {
+      setMode(initialMode);
+      setEditingLink(null);
+      setLabel('');
+    }
+    wasOpen.current = open;
+  }, [open, initialMode]);
 
   // Group links by groupId for display. Preserve group order from the groups array.
   const linksByGroup = useMemo(() => {
@@ -58,19 +77,27 @@ export function SavedLinksDrawer({
     return map;
   }, [links, groups]);
 
-  async function handleCreateNewGroup() {
-    const name = window.prompt('Name for the new group:');
-    if (!name || !name.trim()) return;
-    const g = await onCreateGroup(name.trim());
-    setGroupId(g.id);
+  function handleCreateNewGroup(name: string) {
+    // Reuse an existing group instead of creating a same-named duplicate.
+    const existing = groups.find((g) => g.name.trim().toLowerCase() === name.toLowerCase());
+    if (existing) {
+      setGroupId(existing.id);
+      return;
+    }
+    void onCreateGroup(name).then((g) => setGroupId(g.id));
   }
 
-  function handleSave() {
-    onSave({ url: currentUrl, label: label.trim() || undefined, groupId });
+  function backToList() {
+    setEditingLink(null);
     setLabel('');
     setMode('list');
   }
 
+  function handleSave() {
+    onSave({ url: currentUrl, label: label.trim() || undefined, groupId });
+    backToList();
+  }
+
   function handleStartEdit(link: SavedLink) {
     setEditingLink(link);
     setLabel(link.label ?? '');
@@ -81,272 +108,44 @@ export function SavedLinksDrawer({
   function handleUpdate() {
     if (!editingLink) return;
     onUpdateLink(editingLink.id, label.trim() || undefined, groupId);
-    setEditingLink(null);
-    setLabel('');
-    setMode('list');
+    backToList();
   }
 
-  function handleCancelEdit() {
-    setEditingLink(null);
-    setLabel('');
-    setMode('list');
-  }
-
-  if (!open) return null;
+  const showingForm = mode === 'save' || (mode === 'edit' && editingLink !== null);
 
   return (
-    <>
-      <div className={styles.backdrop} onClick={onClose} aria-hidden="true" />
-      <div
-        ref={trapRef}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="saved-links-title"
-        className={styles.drawer}
-      >
-        <header className={styles.header}>
-          <div className={styles.headerLeft}>
-            {(mode === 'save' || mode === 'edit') && (
-              <IconButton
-                aria-label="Back to saved list"
-                icon={<IconChevronLeft />}
-                onClick={mode === 'edit' ? handleCancelEdit : () => setMode('list')}
-                size="sm"
-              />
-            )}
-            <h2 id="saved-links-title" className={styles.title}>
-              {mode === 'save'
-                ? 'Save current URL'
-                : mode === 'edit'
-                  ? 'Edit saved URL'
-                  : 'Saved URLs'}
-            </h2>
-          </div>
-          <IconButton aria-label="Close saved URLs" icon={<IconClose />} onClick={onClose} />
-        </header>
-
-        <div className={styles.body}>
-          {mode === 'save' ? (
-            <SaveForm
-              label={label}
-              onLabelChange={setLabel}
-              groupId={groupId}
-              onGroupChange={setGroupId}
-              groups={groups}
-              onCreateNewGroup={handleCreateNewGroup}
-              onSubmit={handleSave}
-              onCancel={() => setMode('list')}
-              previewUrl={currentUrl}
-            />
-          ) : mode === 'edit' && editingLink ? (
-            <SaveForm
-              label={label}
-              onLabelChange={setLabel}
-              groupId={groupId}
-              onGroupChange={setGroupId}
-              groups={groups}
-              onCreateNewGroup={handleCreateNewGroup}
-              onSubmit={handleUpdate}
-              onCancel={handleCancelEdit}
-              previewUrl={editingLink.url}
-              submitLabel="Update"
-            />
-          ) : (
-            <GroupedLinksList
-              groups={groups}
-              linksByGroup={linksByGroup}
-              onLoadLink={onLoadLink}
-              onDeleteLink={onDeleteLink}
-              onStartEdit={handleStartEdit}
-              onStartSave={() => setMode('save')}
-              canSave={!!currentUrl}
-            />
-          )}
-        </div>
-      </div>
-    </>
-  );
-}
-
-/* ----------------- internal sub-components ----------------- */
-
-interface SaveFormProps {
-  label: string;
-  onLabelChange: (v: string) => void;
-  groupId: string;
-  onGroupChange: (id: string) => void;
-  groups: Group[];
-  onCreateNewGroup: () => void;
-  onSubmit: () => void;
-  onCancel: () => void;
-  previewUrl: string;
-  submitLabel?: string;
-}
-
-function SaveForm({
-  label,
-  onLabelChange,
-  groupId,
-  onGroupChange,
-  groups,
-  onCreateNewGroup,
-  onSubmit,
-  onCancel,
-  previewUrl,
-  submitLabel = 'Save',
-}: SaveFormProps) {
-  const labelId = 'sl-label';
-  return (
-    <div className={styles.form}>
-      <div className={styles.field}>
-        <label htmlFor={labelId} className={styles.fieldLabel}>
-          Label (optional)
-        </label>
-        <input
-          id={labelId}
-          type="text"
-          className={styles.textInput}
-          value={label}
-          onChange={(e) => onLabelChange(e.target.value)}
-          placeholder="e.g. Staging with debug flag"
-          maxLength={80}
+    <SlidePanel
+      open={open}
+      title={MODE_TITLES[mode]}
+      titleId="saved-links-title"
+      onClose={onClose}
+      onBack={showingForm ? backToList : undefined}
+      backLabel="Back to saved list"
+    >
+      {showingForm ? (
+        <SaveForm
+          label={label}
+          onLabelChange={setLabel}
+          groupId={groupId}
+          onGroupChange={setGroupId}
+          groups={groups}
+          onCreateNewGroup={handleCreateNewGroup}
+          onSubmit={mode === 'edit' ? handleUpdate : handleSave}
+          onCancel={backToList}
+          previewUrl={mode === 'edit' && editingLink ? editingLink.url : currentUrl}
+          submitLabel={mode === 'edit' ? 'Update' : 'Save'}
         />
-      </div>
-
-      <GroupSelector
-        groups={groups}
-        value={groupId}
-        onChange={onGroupChange}
-        onCreateNew={onCreateNewGroup}
-      />
-
-      <div className={styles.field}>
-        <span className={styles.fieldLabel}>URL</span>
-        <div className={styles.urlPreview} title={previewUrl}>
-          {previewUrl}
-        </div>
-      </div>
-
-      <div className={styles.formActions}>
-        <Button variant="primary" onClick={onSubmit}>
-          {submitLabel}
-        </Button>
-        <Button variant="ghost" onClick={onCancel}>
-          Cancel
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-interface GroupedLinksListProps {
-  groups: Group[];
-  linksByGroup: Map<string, SavedLink[]>;
-  onLoadLink: (url: string) => void;
-  onDeleteLink: (id: string) => void;
-  onStartEdit: (link: SavedLink) => void;
-  onStartSave: () => void;
-  canSave: boolean;
-}
-
-function GroupedLinksList({
-  groups,
-  linksByGroup,
-  onLoadLink,
-  onDeleteLink,
-  onStartEdit,
-  onStartSave,
-  canSave,
-}: GroupedLinksListProps) {
-  const totalCount = Array.from(linksByGroup.values()).reduce((sum, l) => sum + l.length, 0);
-
-  // All groups expanded by default.
-  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(
-    () => new Set(groups.map((g) => g.id)),
-  );
-
-  function toggleGroup(id: string) {
-    setExpandedGroups((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-  }
-
-  return (
-    <div className={styles.list}>
-      <div className={styles.listTop}>
-        <Button variant="primary" size="sm" onClick={onStartSave} block disabled={!canSave}>
-          Save current URL
-        </Button>
-      </div>
-
-      {totalCount === 0 ? (
-        <p className={styles.empty}>No saved URLs yet. Save the current URL to get started.</p>
       ) : (
-        groups.map((g) => {
-          const groupLinks = linksByGroup.get(g.id) ?? [];
-          if (groupLinks.length === 0) return null;
-          const isExpanded = expandedGroups.has(g.id);
-          return (
-            <section key={g.id} className={styles.groupSection} aria-labelledby={`g-${g.id}`}>
-              <button
-                type="button"
-                id={`g-${g.id}`}
-                className={styles.groupToggle}
-                onClick={() => toggleGroup(g.id)}
-                aria-expanded={isExpanded}
-              >
-                <span className={styles.groupName}>
-                  {g.name}
-                  <span className={styles.groupCount} aria-label={`${groupLinks.length} links`}>
-                    {groupLinks.length}
-                  </span>
-                </span>
-                <span
-                  className={`${styles.chevron} ${isExpanded ? '' : styles.chevronCollapsed}`}
-                  aria-hidden="true"
-                >
-                  <IconChevronLeft />
-                </span>
-              </button>
-              {isExpanded && (
-                <ul className={styles.linkList} role="list">
-                  {groupLinks.map((link) => (
-                    <li key={link.id} className={styles.linkRow}>
-                      <button
-                        type="button"
-                        className={styles.linkButton}
-                        onClick={() => onLoadLink(link.url)}
-                        title={link.url}
-                      >
-                        <span className={styles.linkLabel}>{link.label || link.url}</span>
-                        {link.label && <span className={styles.linkUrl}>{link.url}</span>}
-                      </button>
-                      <div className={styles.linkActions}>
-                        <IconButton
-                          aria-label={`Edit ${link.label || link.url}`}
-                          icon={<IconEdit />}
-                          size="sm"
-                          onClick={() => onStartEdit(link)}
-                        />
-                        <IconButton
-                          aria-label={`Delete ${link.label || link.url}`}
-                          icon={<IconClose />}
-                          size="sm"
-                          tone="danger"
-                          onClick={() => onDeleteLink(link.id)}
-                        />
-                      </div>
-                    </li>
-                  ))}
-                </ul>
-              )}
-            </section>
-          );
-        })
+        <GroupedLinksList
+          groups={groups}
+          linksByGroup={linksByGroup}
+          onLoadLink={onLoadLink}
+          onDeleteLink={onDeleteLink}
+          onStartEdit={handleStartEdit}
+          onStartSave={() => setMode('save')}
+          canSave={!!currentUrl}
+        />
       )}
-    </div>
+    </SlidePanel>
   );
 }
diff --git a/src/components/SearchInput/SearchInput.module.css b/src/components/SearchInput/SearchInput.module.css
new file mode 100644
index 0000000..4bcd4f7
--- /dev/null
+++ b/src/components/SearchInput/SearchInput.module.css
@@ -0,0 +1,39 @@
+.wrapper {
+  position: relative;
+  display: block;
+}
+
+.icon {
+  position: absolute;
+  left: 11px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+  color: var(--color-text-faint);
+}
+
+.input {
+  width: 100%;
+  background: var(--color-surface-inset);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: 8px 12px 8px 32px;
+  font-size: var(--font-size-mono);
+  color: var(--color-text-body);
+  transition: border-color var(--transition-fast);
+}
+
+.input:hover {
+  border-color: var(--color-border-strong);
+}
+
+.input:focus {
+  border-color: var(--color-border-focus);
+}
+
+/* Native clear affordance would break the monochrome treatment. */
+.input::-webkit-search-cancel-button {
+  display: none;
+}
diff --git a/src/components/SearchInput/SearchInput.tsx b/src/components/SearchInput/SearchInput.tsx
new file mode 100644
index 0000000..a27473b
--- /dev/null
+++ b/src/components/SearchInput/SearchInput.tsx
@@ -0,0 +1,38 @@
+import { useId } from 'react';
+import { IconSearch } from '../icons';
+import styles from './SearchInput.module.css';
+
+interface SearchInputProps {
+  value: string;
+  onChange: (next: string) => void;
+  placeholder?: string;
+  /** Visually hidden label text. */
+  label: string;
+}
+
+/** Filter field with an inset magnifier, per the redesign's content header. */
+export function SearchInput({ value, onChange, placeholder, label }: SearchInputProps) {
+  const id = useId();
+  return (
+    <div className={styles.wrapper}>
+      <label htmlFor={id} className="visually-hidden">
+        {label}
+      </label>
+      <span className={styles.icon} aria-hidden="true">
+        <IconSearch />
+      </span>
+      <input
+        id={id}
+        type="search"
+        className={styles.input}
+        value={value}
+        placeholder={placeholder}
+        onChange={(e) => onChange(e.target.value)}
+        spellCheck={false}
+        autoComplete="off"
+        autoCorrect="off"
+        autoCapitalize="off"
+      />
+    </div>
+  );
+}
diff --git a/src/components/SearchInput/index.ts b/src/components/SearchInput/index.ts
new file mode 100644
index 0000000..98d12ff
--- /dev/null
+++ b/src/components/SearchInput/index.ts
@@ -0,0 +1 @@
+export { SearchInput } from './SearchInput';
diff --git a/src/components/SettingsDrawer/SettingsDrawer.module.css b/src/components/SettingsDrawer/SettingsDrawer.module.css
new file mode 100644
index 0000000..9ed0ae4
--- /dev/null
+++ b/src/components/SettingsDrawer/SettingsDrawer.module.css
@@ -0,0 +1,74 @@
+.sectionLabel {
+  display: block;
+  margin-bottom: var(--space-5);
+  font-size: var(--font-size-xs);
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: var(--space-5);
+}
+
+.swatch {
+  width: 100%;
+  aspect-ratio: 1;
+  padding: 0;
+  border: 2px solid transparent;
+  border-radius: var(--radius-card);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition:
+    border-color var(--transition-fast),
+    transform var(--transition-fast);
+}
+
+.swatch:hover {
+  transform: scale(1.06);
+}
+
+.selected {
+  border-color: var(--color-text-primary);
+}
+
+/* The check is the non-color signal that a swatch is active. */
+.check {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--swatch-check-color);
+}
+
+.reset {
+  margin-top: var(--space-8);
+  padding: 0;
+  background: transparent;
+  border: none;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-mono);
+  text-decoration: underline;
+  cursor: pointer;
+  transition: color var(--transition-fast);
+}
+
+.reset:hover:not(:disabled) {
+  color: var(--color-text-primary);
+}
+
+.reset:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.hint {
+  margin-top: var(--space-8);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  color: var(--color-text-muted);
+}
diff --git a/src/components/SettingsDrawer/SettingsDrawer.tsx b/src/components/SettingsDrawer/SettingsDrawer.tsx
new file mode 100644
index 0000000..5926b4f
--- /dev/null
+++ b/src/components/SettingsDrawer/SettingsDrawer.tsx
@@ -0,0 +1,72 @@
+import type { CSSProperties } from 'react';
+import type { AccentColor } from '@/types';
+import { ACCENTS } from '@/lib/accents';
+import { readableOn } from '@/lib/contrast';
+import { SlidePanel } from '../SlidePanel';
+import { IconCheck } from '../icons';
+import styles from './SettingsDrawer.module.css';
+
+interface SettingsDrawerProps {
+  open: boolean;
+  onClose: () => void;
+  accent: AccentColor;
+  onAccentChange: (accent: AccentColor) => void;
+}
+
+/** Settings panel — currently just the accent color picker. */
+export function SettingsDrawer({ open, onClose, accent, onAccentChange }: SettingsDrawerProps) {
+  return (
+    <SlidePanel open={open} title="Settings" titleId="settings-title" onClose={onClose}>
+      <span className={styles.sectionLabel} id="accent-label">
+        Accent color
+      </span>
+
+      {/*
+        radiogroup rather than a list of buttons: exactly one accent is active,
+        and this gives arrow-key navigation and "3 of 10" announcements free.
+      */}
+      <div className={styles.grid} role="radiogroup" aria-labelledby="accent-label">
+        {ACCENTS.map((c) => {
+          const selected = accent === c.hex;
+          return (
+            <button
+              key={c.hex}
+              type="button"
+              role="radio"
+              aria-checked={selected}
+              aria-label={c.name}
+              title={c.name}
+              className={`${styles.swatch} ${selected ? styles.selected : ''}`}
+              style={
+                {
+                  background: c.hex,
+                  '--swatch-check-color': readableOn(c.hex),
+                } as CSSProperties
+              }
+              onClick={() => onAccentChange(c.hex)}
+            >
+              {selected && (
+                <span className={styles.check}>
+                  <IconCheck />
+                </span>
+              )}
+            </button>
+          );
+        })}
+      </div>
+
+      <button
+        type="button"
+        className={styles.reset}
+        onClick={() => onAccentChange(null)}
+        disabled={accent === null}
+      >
+        Reset to monochrome
+      </button>
+
+      <p className={styles.hint}>
+        Light and dark follow your system appearance automatically.
+      </p>
+    </SlidePanel>
+  );
+}
diff --git a/src/components/SettingsDrawer/index.ts b/src/components/SettingsDrawer/index.ts
new file mode 100644
index 0000000..198d736
--- /dev/null
+++ b/src/components/SettingsDrawer/index.ts
@@ -0,0 +1 @@
+export { SettingsDrawer } from './SettingsDrawer';
diff --git a/src/components/SlidePanel/SlidePanel.module.css b/src/components/SlidePanel/SlidePanel.module.css
new file mode 100644
index 0000000..8fcfeb4
--- /dev/null
+++ b/src/components/SlidePanel/SlidePanel.module.css
@@ -0,0 +1,47 @@
+/* Full-width overlay that slides in over the editor. */
+.panel {
+  position: absolute;
+  inset: 0;
+  z-index: 25;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-bg);
+  transform: translateX(100%);
+  /*
+   * `visibility` is what actually takes the closed panel out of the tab order
+   * and the accessibility tree. It flips to visible at the start of the
+   * transition and to hidden only at its end, so both directions animate.
+   */
+  visibility: hidden;
+  transition:
+    transform var(--transition-panel),
+    visibility var(--transition-panel);
+}
+
+.open {
+  transform: translateX(0);
+  visibility: visible;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-5);
+  padding: var(--pad-block) var(--pad-inline);
+  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+
+.title {
+  flex: 1;
+  min-width: 0;
+  font-size: var(--font-size-xl);
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.body {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--pad-block) var(--pad-inline);
+}
diff --git a/src/components/SlidePanel/SlidePanel.tsx b/src/components/SlidePanel/SlidePanel.tsx
new file mode 100644
index 0000000..c74cf44
--- /dev/null
+++ b/src/components/SlidePanel/SlidePanel.tsx
@@ -0,0 +1,62 @@
+import type { ReactNode } from 'react';
+import { IconButton } from '../IconButton';
+import { IconChevronLeft, IconClose } from '../icons';
+import { useFocusTrap } from '@/hooks/useFocusTrap';
+import styles from './SlidePanel.module.css';
+
+interface SlidePanelProps {
+  open: boolean;
+  title: string;
+  /** Stable id for the heading, referenced by aria-labelledby. */
+  titleId: string;
+  onClose: () => void;
+  /** When given, a back chevron is shown to the left of the title. */
+  onBack?: () => void;
+  backLabel?: string;
+  children: ReactNode;
+}
+
+/**
+ * The shared chrome for every side panel: slides in from the right, traps
+ * focus, and renders a header of [optional back] · title · close.
+ *
+ * Kept mounted while closed so it can animate both ways; the stylesheet's
+ * `visibility: hidden` is what removes it from the tab order meanwhile.
+ */
+export function SlidePanel({
+  open,
+  title,
+  titleId,
+  onClose,
+  onBack,
+  backLabel = 'Back',
+  children,
+}: SlidePanelProps) {
+  const trapRef = useFocusTrap<HTMLDivElement>(open, onClose);
+
+  return (
+    <div
+      ref={trapRef}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={titleId}
+      className={`${styles.panel} ${open ? styles.open : ''}`}
+    >
+      <header className={styles.header}>
+        {onBack && (
+          <IconButton aria-label={backLabel} icon={<IconChevronLeft />} onClick={onBack} />
+        )}
+        <h2 id={titleId} className={styles.title}>
+          {title}
+        </h2>
+        <IconButton
+          aria-label={`Close ${title.toLowerCase()}`}
+          icon={<IconClose size={15} />}
+          onClick={onClose}
+        />
+      </header>
+
+      <div className={styles.body}>{children}</div>
+    </div>
+  );
+}
diff --git a/src/components/SlidePanel/index.ts b/src/components/SlidePanel/index.ts
new file mode 100644
index 0000000..e195955
--- /dev/null
+++ b/src/components/SlidePanel/index.ts
@@ -0,0 +1 @@
+export { SlidePanel } from './SlidePanel';
diff --git a/src/components/ThemeToggle/ThemeToggle.module.css b/src/components/ThemeToggle/ThemeToggle.module.css
deleted file mode 100644
index fb5eb4d..0000000
--- a/src/components/ThemeToggle/ThemeToggle.module.css
+++ /dev/null
@@ -1,93 +0,0 @@
-.wrapper {
-  position: relative;
-}
-
-.trigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--min-target);
-  height: var(--min-target);
-  background: transparent;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  color: var(--color-text-muted);
-  cursor: pointer;
-  transition:
-    background-color var(--transition-fast),
-    color var(--transition-fast),
-    border-color var(--transition-fast);
-}
-
-.trigger:hover {
-  color: var(--color-text-primary);
-  background: var(--color-surface);
-}
-
-.trigger:focus-visible {
-  outline: var(--focus-ring-width) solid var(--color-focus);
-  outline-offset: var(--focus-ring-offset);
-}
-
-.icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.dropdown {
-  position: absolute;
-  right: 0;
-  top: calc(100% + var(--space-2));
-  background: var(--color-surface-raised);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-md);
-  padding: var(--space-1);
-  min-width: 110px;
-  z-index: 100;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.option {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  width: 100%;
-  padding: var(--space-2) var(--space-3);
-  background: transparent;
-  border: none;
-  border-radius: var(--radius-sm);
-  color: var(--color-text-muted);
-  font-size: var(--font-size-sm);
-  font-family: inherit;
-  text-align: left;
-  cursor: pointer;
-  transition:
-    background-color var(--transition-fast),
-    color var(--transition-fast);
-}
-
-.option:hover {
-  background: var(--color-surface-sunken);
-  color: var(--color-text-primary);
-}
-
-.option:focus-visible {
-  outline: var(--focus-ring-width) solid var(--color-focus);
-  outline-offset: var(--focus-ring-offset);
-}
-
-.selected {
-  color: var(--color-accent);
-  font-weight: 500;
-}
-
-.optionIcon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
diff --git a/src/components/ThemeToggle/ThemeToggle.tsx b/src/components/ThemeToggle/ThemeToggle.tsx
deleted file mode 100644
index 54c0edf..0000000
--- a/src/components/ThemeToggle/ThemeToggle.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import type { ThemePreference } from '@/types';
-import { IconMonitor, IconMoon, IconSun } from '../icons';
-import styles from './ThemeToggle.module.css';
-
-interface ThemeToggleProps {
-  preference: ThemePreference;
-  onChange: (pref: ThemePreference) => void;
-}
-
-interface Option {
-  value: ThemePreference;
-  label: string;
-  icon: React.ReactNode;
-}
-
-const OPTIONS: Option[] = [
-  { value: 'light', label: 'Light', icon: <IconSun /> },
-  { value: 'system', label: 'System', icon: <IconMonitor /> },
-  { value: 'dark', label: 'Dark', icon: <IconMoon /> },
-];
-
-export function ThemeToggle({ preference, onChange }: ThemeToggleProps) {
-  const [open, setOpen] = useState(false);
-  const wrapperRef = useRef<HTMLDivElement>(null);
-
-  // Close on outside click
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e: MouseEvent) => {
-      if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
-        setOpen(false);
-      }
-    };
-    document.addEventListener('mousedown', handler);
-    return () => document.removeEventListener('mousedown', handler);
-  }, [open]);
-
-  // Close on Escape
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') setOpen(false);
-    };
-    document.addEventListener('keydown', handler);
-    return () => document.removeEventListener('keydown', handler);
-  }, [open]);
-
-  const current = OPTIONS.find((o) => o.value === preference) ?? OPTIONS[1];
-
-  return (
-    <div ref={wrapperRef} className={styles.wrapper}>
-      <button
-        type="button"
-        aria-label={`Theme: ${current.label}. Click to change.`}
-        aria-haspopup="listbox"
-        aria-expanded={open}
-        className={styles.trigger}
-        onClick={() => setOpen((o) => !o)}
-      >
-        <span className={styles.icon} aria-hidden="true">
-          {current.icon}
-        </span>
-      </button>
-
-      {open && (
-        <div role="listbox" aria-label="Select theme" className={styles.dropdown}>
-          {OPTIONS.map((opt) => {
-            const selected = preference === opt.value;
-            return (
-              <button
-                key={opt.value}
-                type="button"
-                role="option"
-                aria-selected={selected}
-                className={[styles.option, selected ? styles.selected : ''].join(' ')}
-                onClick={() => {
-                  onChange(opt.value);
-                  setOpen(false);
-                }}
-              >
-                <span className={styles.optionIcon} aria-hidden="true">
-                  {opt.icon}
-                </span>
-                <span>{opt.label}</span>
-              </button>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/src/components/ThemeToggle/index.ts b/src/components/ThemeToggle/index.ts
deleted file mode 100644
index 0f27a51..0000000
--- a/src/components/ThemeToggle/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { ThemeToggle } from './ThemeToggle';
diff --git a/src/components/Toast/Toast.module.css b/src/components/Toast/Toast.module.css
new file mode 100644
index 0000000..2645451
--- /dev/null
+++ b/src/components/Toast/Toast.module.css
@@ -0,0 +1,38 @@
+/*
+ * The live region is always in the DOM so screen readers keep observing it;
+ * only the visible pill mounts and unmounts.
+ */
+.region {
+  position: absolute;
+  bottom: 70px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 30;
+  pointer-events: none;
+  max-width: calc(100% - 36px);
+}
+
+.toast {
+  display: block;
+  background: var(--color-toast-bg);
+  border: 1px solid var(--color-toast-border);
+  color: var(--color-toast-text);
+  font-size: var(--font-size-base);
+  font-weight: 500;
+  padding: 8px 14px;
+  border-radius: var(--radius-full);
+  box-shadow: var(--shadow-md);
+  text-align: center;
+  animation: toast-in var(--transition-base) ease-out;
+}
+
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
new file mode 100644
index 0000000..bc7174c
--- /dev/null
+++ b/src/components/Toast/Toast.tsx
@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react';
+import styles from './Toast.module.css';
+
+interface ToastProps {
+  /** Changing this shows the pill and re-announces. Cleared after `duration`. */
+  message: string;
+  duration?: number;
+  politeness?: 'polite' | 'assertive';
+}
+
+/**
+ * Floating status pill, bottom-centered, auto-dismissing.
+ *
+ * This doubles as the app's single aria-live region: the visible toast and the
+ * announcement are the same node, so screen-reader users hear each status once
+ * rather than twice (which is what a separate hidden region would cause).
+ */
+export function Toast({ message, duration = 1600, politeness = 'polite' }: ToastProps) {
+  const [text, setText] = useState('');
+
+  useEffect(() => {
+    if (!message) return;
+    // Clear first, then set — ensures repeated identical messages re-announce.
+    setText('');
+    const show = window.setTimeout(() => setText(message), 50);
+    const hide = window.setTimeout(() => setText(''), duration + 50);
+    return () => {
+      window.clearTimeout(show);
+      window.clearTimeout(hide);
+    };
+  }, [message, duration]);
+
+  return (
+    <div className={styles.region} role="status" aria-live={politeness} aria-atomic="true">
+      {text && <span className={styles.toast}>{text}</span>}
+    </div>
+  );
+}
diff --git a/src/components/Toast/index.ts b/src/components/Toast/index.ts
new file mode 100644
index 0000000..03e94bf
--- /dev/null
+++ b/src/components/Toast/index.ts
@@ -0,0 +1 @@
+export { Toast } from './Toast';
diff --git a/src/components/UrlPreview/UrlPreview.module.css b/src/components/UrlPreview/UrlPreview.module.css
index 85042f2..8bdd225 100644
--- a/src/components/UrlPreview/UrlPreview.module.css
+++ b/src/components/UrlPreview/UrlPreview.module.css
@@ -1,63 +1,72 @@
 .root {
-  margin: 0 var(--space-5);
-  padding: var(--space-1);
-  background: var(--color-surface);
+  display: block;
+}
+
+/* Grid stacking: the highlight layer sits behind a transparent textarea. */
+.editorWrapper {
+  display: grid;
+  /* Pin the single column to the container so the textarea below cannot
+     widen the grid past the popup. */
+  grid-template-columns: minmax(0, 1fr);
+  background: var(--color-surface-inset);
   border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  overflow: hidden;
+  border-radius: var(--radius-card);
+  max-height: 132px;
+  overflow-y: auto;
   transition: border-color var(--transition-fast);
 }
 
-.root:focus-within {
-  border-color: var(--color-focus);
+.editorWrapper:hover {
+  border-color: var(--color-border-strong);
 }
 
-/* Grid stacking: highlight div sits behind a transparent textarea */
-.editorWrapper {
-  display: grid;
-  min-height: 64px;
-  max-height: 160px;
-  overflow-y: auto;
+.editorWrapper:focus-within {
+  border-color: var(--color-border-focus);
 }
 
-.highlight {
+.highlight,
+.textarea {
   grid-area: 1 / 1;
-  padding: var(--space-3);
+  padding: 12px 14px;
   font-family: var(--font-mono);
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-relaxed);
-  color: var(--color-text-primary);
+  font-size: var(--font-size-mono);
+  line-height: var(--line-height-mono);
   word-break: break-all;
+  box-sizing: border-box;
+}
+
+.highlight {
+  color: var(--color-text-muted);
   white-space: pre-wrap;
   pointer-events: none;
   user-select: none;
-  box-sizing: border-box;
   overflow: hidden;
 }
 
+/* Keys carry the emphasis; separators recede. */
 .paramKey {
-  color: var(--color-accent);
+  color: var(--color-accent-text);
+  font-weight: 500;
+}
+
+.paramValue {
+  color: var(--color-text-secondary);
 }
 
 .sep {
-  color: var(--color-text-muted);
+  color: var(--color-text-faint);
 }
 
 .textarea {
-  grid-area: 1 / 1;
   display: block;
   width: 100%;
-  padding: var(--space-3);
+  min-width: 0;
   background: transparent;
   border: none;
   outline: none;
   resize: none;
-  font-family: var(--font-mono);
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-relaxed);
   color: transparent;
   caret-color: var(--color-text-primary);
-  word-break: break-all;
-  box-sizing: border-box;
+  /* Grows in height with the URL; width stays pinned by the grid column. */
   field-sizing: content;
 }
diff --git a/src/components/UrlPreview/UrlPreview.tsx b/src/components/UrlPreview/UrlPreview.tsx
index ee9167a..e1dbfb2 100644
--- a/src/components/UrlPreview/UrlPreview.tsx
+++ b/src/components/UrlPreview/UrlPreview.tsx
@@ -8,34 +8,52 @@ interface UrlPreviewProps {
   onUrlChange: (rawUrl: string) => void;
 }
 
+/**
+ * Colorize the URL segment by segment: base muted, keys bright, values
+ * secondary, separators faint. Mirrors the reference's per-segment styling.
+ */
 function renderHighlighted(url: string) {
   const questionIdx = url.indexOf('?');
-  if (questionIdx === -1) {
-    return <>{url}</>;
-  }
+  if (questionIdx === -1) return <>{url}</>;
 
   const base = url.slice(0, questionIdx);
   const queryStr = url.slice(questionIdx + 1);
 
   const nodes: React.ReactNode[] = [
     <span key="base">{base}</span>,
-    <span key="qs" className={styles.sep}>?</span>,
+    <span key="qs" className={styles.sep}>
+      ?
+    </span>,
   ];
 
   const params = queryStr.split('&');
   params.forEach((part, i) => {
     const eqIdx = part.indexOf('=');
     if (eqIdx === -1) {
-      nodes.push(<span key={`pk${i}`} className={styles.paramKey}>{part}</span>);
+      nodes.push(
+        <span key={`pk${i}`} className={styles.paramKey}>
+          {part}
+        </span>,
+      );
     } else {
       nodes.push(
-        <span key={`pk${i}`} className={styles.paramKey}>{part.slice(0, eqIdx)}</span>,
-        <span key={`sep${i}`} className={styles.sep}>=</span>,
-        <span key={`pv${i}`}>{part.slice(eqIdx + 1)}</span>,
+        <span key={`pk${i}`} className={styles.paramKey}>
+          {part.slice(0, eqIdx)}
+        </span>,
+        <span key={`sep${i}`} className={styles.sep}>
+          =
+        </span>,
+        <span key={`pv${i}`} className={styles.paramValue}>
+          {part.slice(eqIdx + 1)}
+        </span>,
       );
     }
     if (i < params.length - 1) {
-      nodes.push(<span key={`amp${i}`} className={styles.sep}>&amp;</span>);
+      nodes.push(
+        <span key={`amp${i}`} className={styles.sep}>
+          &amp;
+        </span>,
+      );
     }
   });
 
@@ -64,6 +82,15 @@ export function UrlPreview({ parsed, onUrlChange }: UrlPreviewProps) {
     setLocalValue(serialized);
   };
 
+  // Enter commits (URLs can't contain raw newlines anyway — the URL parser
+  // silently strips them, which would leave the field lying about the state).
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.metaKey && !e.ctrlKey) {
+      e.preventDefault();
+      e.currentTarget.blur();
+    }
+  };
+
   return (
     <section aria-label="URL editor" className={styles.root}>
       <div className={styles.editorWrapper}>
@@ -74,7 +101,10 @@ export function UrlPreview({ parsed, onUrlChange }: UrlPreviewProps) {
           className={styles.textarea}
           value={localValue}
           onChange={handleChange}
-          onFocus={() => { focusedRef.current = true; }}
+          onKeyDown={handleKeyDown}
+          onFocus={() => {
+            focusedRef.current = true;
+          }}
           onBlur={handleBlur}
           spellCheck={false}
           autoComplete="off"
diff --git a/src/components/icons.tsx b/src/components/icons.tsx
index e5d0401..8ee6105 100644
--- a/src/components/icons.tsx
+++ b/src/components/icons.tsx
@@ -1,111 +1,94 @@
 /**
  * Inline SVG icons — no external dependency, tree-shakeable, themable via `currentColor`.
- * All icons are 16x16 with stroke-based drawing matching each other's visual weight.
+ *
+ * Feather/Lucide-style outline set per the redesign: 24-unit viewBox, 2px
+ * stroke, round caps and joins. Size defaults to 14px (header/footer scale);
+ * pass `size` for the 13px in-row scale.
  */
 
-const baseProps = {
-  width: 16,
-  height: 16,
-  viewBox: '0 0 16 16',
-  fill: 'none',
-  stroke: 'currentColor',
-  strokeWidth: 1.5,
-  strokeLinecap: 'round' as const,
-  strokeLinejoin: 'round' as const,
-};
+interface IconProps {
+  /** Rendered width/height in px. */
+  size?: number;
+}
 
-export const IconClose = () => (
-  <svg {...baseProps}>
-    <path d="M4 4 L12 12 M12 4 L4 12" />
-  </svg>
-);
+function icon(path: React.ReactNode, defaultSize = 14) {
+  return function Icon({ size = defaultSize }: IconProps) {
+    return (
+      <svg
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden="true"
+        focusable="false"
+      >
+        {path}
+      </svg>
+    );
+  };
+}
 
-export const IconPlus = () => (
-  <svg {...baseProps}>
-    <path d="M8 3 V13 M3 8 H13" />
-  </svg>
-);
+export const IconClose = icon(<path d="M18 6L6 18M6 6l12 12" />, 13);
 
-export const IconReset = () => (
-  <svg {...baseProps}>
-    <path d="M3 8 A5 5 0 1 0 5 4" />
-    <path d="M3 3 V6 H6" />
-  </svg>
-);
+export const IconPlus = icon(<path d="M12 5v14M5 12h14" />);
 
-export const IconCopy = () => (
-  <svg {...baseProps}>
-    <rect x="5" y="5" width="8" height="8" rx="1.5" />
-    <path d="M10 5 V3.5 A0.5 0.5 0 0 0 9.5 3 H3.5 A0.5 0.5 0 0 0 3 3.5 V9.5 A0.5 0.5 0 0 0 3.5 10 H5" />
-  </svg>
-);
+export const IconCheck = icon(<path d="M20 6L9 17l-5-5" />, 13);
 
-export const IconSave = () => (
-  <svg {...baseProps}>
-    <path d="M3 3 H11 L13 5 V13 H3 Z" />
-    <path d="M5 3 V7 H10 V3" />
-    <path d="M5 10 H11" />
-  </svg>
-);
+export const IconReset = icon(<path d="M3 12a9 9 0 1 0 3-6.7M3 3v6h6" />, 13);
 
-export const IconCheck = () => (
-  <svg {...baseProps}>
-    <path d="M3.5 8.5 L6.5 11.5 L12.5 4.5" />
-  </svg>
+export const IconCopy = icon(
+  <>
+    <rect x="9" y="9" width="12" height="12" rx="2" />
+    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+  </>,
+  13,
 );
 
-export const IconBookmark = () => (
-  <svg {...baseProps}>
-    <path d="M4 3 H12 V13 L8 10 L4 13 Z" />
-  </svg>
-);
+export const IconBookmark = icon(<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />);
 
-export const IconSun = () => (
-  <svg {...baseProps}>
-    <circle cx="8" cy="8" r="3" />
-    <path d="M8 1 V3 M8 13 V15 M1 8 H3 M13 8 H15 M3 3 L4.5 4.5 M11.5 11.5 L13 13 M3 13 L4.5 11.5 M11.5 4.5 L13 3" />
-  </svg>
+export const IconSearch = icon(
+  <>
+    <circle cx="11" cy="11" r="8" />
+    <path d="M21 21l-4.35-4.35" />
+  </>,
 );
 
-export const IconMoon = () => (
-  <svg {...baseProps}>
-    <path d="M13 9 A5 5 0 1 1 7 3 A4 4 0 0 0 13 9 Z" />
-  </svg>
-);
+export const IconChevronLeft = icon(<path d="M15 18l-6-6 6-6" />, 15);
 
-export const IconMonitor = () => (
-  <svg {...baseProps}>
-    <rect x="2" y="3" width="12" height="8" rx="1" />
-    <path d="M6 14 H10 M8 11 V14" />
-  </svg>
-);
+export const IconChevronDown = icon(<path d="M6 9l6 6 6-6" />);
 
-export const IconChevronLeft = () => (
-  <svg {...baseProps}>
-    <path d="M10 3 L5 8 L10 13" />
-  </svg>
-);
+export const IconChevronRight = icon(<path d="M9 18l6-6-6-6" />, 12);
 
-export const IconLogo = () => (
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
-    <rect x="2" y="2" width="5" height="5" rx="1" stroke="currentColor" strokeWidth="1.5" />
-    <rect x="9" y="2" width="5" height="5" rx="1" stroke="currentColor" strokeWidth="1.5" />
-    <rect x="2" y="9" width="5" height="5" rx="1" stroke="currentColor" strokeWidth="1.5" />
-    <path d="M13 13 L11 11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-    <circle cx="12" cy="11.5" r="1.5" stroke="currentColor" strokeWidth="1.5" />
-  </svg>
+/**
+ * Circular arrows — "load this saved URL back into the editor".
+ * Uses the standard refresh-cw geometry rather than the reference's hand-drawn
+ * path, which collapsed into an illegible squiggle at 13px.
+ */
+export const IconLoad = icon(
+  <>
+    <path d="M3 12a9 9 0 0 1 15-6.7L21 8" />
+    <path d="M21 3v5h-5" />
+    <path d="M21 12a9 9 0 0 1-15 6.7L3 16" />
+    <path d="M3 21v-5h5" />
+  </>,
+  13,
 );
 
-export const IconEdit = () => (
-  <svg {...baseProps}>
-    <path d="M11.5 2.5 L13.5 4.5 L5 13 L2 14 L3 11 Z" />
-    <path d="M10 4 L12 6" />
-  </svg>
+export const IconEdit = icon(
+  <>
+    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+    <path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4z" />
+  </>,
+  13,
 );
 
-export const IconSearch = () => (
-  <svg {...baseProps}>
-    <circle cx="6.5" cy="6.5" r="4" />
-    <path d="M9.5 9.5 L13.5 13.5" />
-  </svg>
+export const IconSettings = icon(
+  <>
+    <circle cx="12" cy="12" r="3" />
+    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9v0a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
+  </>,
 );
diff --git a/src/hooks/useAccent.ts b/src/hooks/useAccent.ts
new file mode 100644
index 0000000..df3d295
--- /dev/null
+++ b/src/hooks/useAccent.ts
@@ -0,0 +1,82 @@
+import { useCallback, useEffect, useState } from 'react';
+import { storage } from '@/lib/storage';
+import { isKnownAccent } from '@/lib/accents';
+import { adjustForContrast, readableOn, withAlpha } from '@/lib/contrast';
+import type { AccentColor } from '@/types';
+import type { ResolvedTheme } from './useTheme';
+
+/** Panel background per theme — the surface accent-colored text sits on. */
+const PANEL_BG: Record<ResolvedTheme, string> = {
+  light: '#ffffff',
+  dark: '#262626',
+};
+
+/**
+ * Custom properties the accent overrides. Listed so clearing an accent can
+ * remove exactly what it set and let the stylesheet defaults win again.
+ */
+const VARS = [
+  '--color-accent',
+  '--color-accent-hover',
+  '--color-on-accent',
+  '--color-accent-text',
+  '--color-accent-soft',
+] as const;
+
+function applyAccent(accent: AccentColor, theme: ResolvedTheme): void {
+  const root = document.documentElement;
+  if (!accent) {
+    for (const v of VARS) root.style.removeProperty(v);
+    return;
+  }
+  // Solid fills keep the exact swatch the user picked, so the button matches
+  // the swatch. Only the *label* and text-on-panel uses are corrected, since
+  // every swatch in this palette fails AA otherwise.
+  root.style.setProperty('--color-accent', accent);
+  root.style.setProperty('--color-accent-hover', adjustForContrast(accent, PANEL_BG[theme], 3));
+  root.style.setProperty('--color-on-accent', readableOn(accent));
+  root.style.setProperty('--color-accent-text', adjustForContrast(accent, PANEL_BG[theme]));
+  root.style.setProperty('--color-accent-soft', withAlpha(accent, 0.15));
+}
+
+/**
+ * Accent color state, persisted in chrome.storage and projected onto CSS
+ * custom properties so components stay declarative — no component branches on
+ * whether an accent is set.
+ */
+export function useAccent(theme: ResolvedTheme): {
+  accent: AccentColor;
+  setAccent: (next: AccentColor) => void;
+} {
+  const [accent, setAccentState] = useState<AccentColor>(null);
+
+  // Load once. On storage failure keep monochrome rather than surfacing an
+  // unhandled rejection.
+  useEffect(() => {
+    let cancelled = false;
+    storage.getAccent().then(
+      (stored) => {
+        if (cancelled) return;
+        // Guard against a value left by an older build or hand-edited storage.
+        if (typeof stored === 'string' && isKnownAccent(stored)) setAccentState(stored);
+      },
+      () => undefined,
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // Re-apply on accent *or* theme change: the readable text variant depends on
+  // which panel background it will sit on.
+  useEffect(() => {
+    applyAccent(accent, theme);
+  }, [accent, theme]);
+
+  const setAccent = useCallback((next: AccentColor) => {
+    setAccentState(next);
+    void storage.setAccent(next);
+  }, []);
+
+  return { accent, setAccent };
+}
diff --git a/src/hooks/useFocusTrap.ts b/src/hooks/useFocusTrap.ts
index da68e46..fe2ec7a 100644
--- a/src/hooks/useFocusTrap.ts
+++ b/src/hooks/useFocusTrap.ts
@@ -15,6 +15,12 @@ export function useFocusTrap<T extends HTMLElement>(
   const ref = useRef<T>(null);
   const previouslyFocused = useRef<HTMLElement | null>(null);
 
+  // Read onClose through a ref so the effect below depends only on `active`.
+  // Depending on the callback identity would re-run the effect on every parent
+  // render, yanking focus back to the first focusable element mid-interaction.
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+
   useEffect(() => {
     if (!active) return;
 
@@ -28,9 +34,9 @@ export function useFocusTrap<T extends HTMLElement>(
     (focusables[0] ?? container).focus();
 
     function onKeyDown(e: KeyboardEvent) {
-      if (e.key === 'Escape' && onClose) {
+      if (e.key === 'Escape' && onCloseRef.current) {
         e.preventDefault();
-        onClose();
+        onCloseRef.current();
         return;
       }
       if (e.key !== 'Tab') return;
@@ -54,7 +60,7 @@ export function useFocusTrap<T extends HTMLElement>(
       // Restore focus on deactivation — but only if the element still exists.
       previouslyFocused.current?.focus?.();
     };
-  }, [active, onClose]);
+  }, [active]);
 
   return ref;
 }
diff --git a/src/hooks/useKeyboardShortcuts.ts b/src/hooks/useKeyboardShortcuts.ts
index f1a7fbc..ae4426b 100644
--- a/src/hooks/useKeyboardShortcuts.ts
+++ b/src/hooks/useKeyboardShortcuts.ts
@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { isEditableTarget } from '@/lib/dom';
 
 export interface Shortcut {
   /** Primary key (case-insensitive). Use key values from KeyboardEvent.key. */
@@ -30,12 +31,9 @@ function matches(e: KeyboardEvent, s: Shortcut): boolean {
 export function useKeyboardShortcuts(shortcuts: Shortcut[]): void {
   useEffect(() => {
     function onKeyDown(e: KeyboardEvent) {
-      const target = e.target as HTMLElement | null;
-      const isEditable =
-        !!target &&
-        (target.tagName === 'INPUT' ||
-          target.tagName === 'TEXTAREA' ||
-          target.isContentEditable);
+      // A component already consumed this key (e.g. cancelling an inline edit).
+      if (e.defaultPrevented) return;
+      const isEditable = isEditableTarget(e.target);
 
       for (const s of shortcuts) {
         if (!matches(e, s)) continue;
diff --git a/src/hooks/useSavedLinks.ts b/src/hooks/useSavedLinks.ts
index 257a283..5ae6c8b 100644
--- a/src/hooks/useSavedLinks.ts
+++ b/src/hooks/useSavedLinks.ts
@@ -1,12 +1,8 @@
 import { useCallback, useEffect, useState } from 'react';
 import { DEFAULT_GROUP_ID, storage } from '@/lib/storage';
+import { generateId } from '@/lib/id';
 import type { Group, SavedLink } from '@/types';
 
-function generateId(): string {
-  if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) return crypto.randomUUID();
-  return `id_${Date.now()}_${Math.random().toString(36).slice(2)}`;
-}
-
 export function useSavedLinks(): {
   links: SavedLink[];
   groups: Group[];
@@ -25,11 +21,16 @@ export function useSavedLinks(): {
   useEffect(() => {
     let cancelled = false;
     (async () => {
-      const [l, g] = await Promise.all([storage.getSavedLinks(), storage.getGroups()]);
-      if (cancelled) return;
-      setLinks(l);
-      setGroups(g);
-      setIsLoading(false);
+      try {
+        const [l, g] = await Promise.all([storage.getSavedLinks(), storage.getGroups()]);
+        if (cancelled) return;
+        setLinks(l);
+        setGroups(g);
+      } catch {
+        // Storage unavailable — keep empty defaults; saving will surface its own error.
+      } finally {
+        if (!cancelled) setIsLoading(false);
+      }
     })();
     return () => {
       cancelled = true;
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
index 8f7c8bd..d9af77a 100644
--- a/src/hooks/useTheme.ts
+++ b/src/hooks/useTheme.ts
@@ -1,8 +1,6 @@
-import { useCallback, useEffect, useState } from 'react';
-import { storage } from '@/lib/storage';
-import type { ThemePreference } from '@/types';
+import { useEffect, useRef, useState } from 'react';
 
-type ResolvedTheme = 'light' | 'dark';
+export type ResolvedTheme = 'light' | 'dark';
 
 function resolveSystemTheme(): ResolvedTheme {
   if (typeof window === 'undefined' || !window.matchMedia) return 'light';
@@ -10,51 +8,41 @@ function resolveSystemTheme(): ResolvedTheme {
 }
 
 /**
- * Manages theme preference (light | dark | system) with chrome.storage persistence.
- * Applies `data-theme` to <html>. Listens to system changes when pref is "system".
+ * Mirrors the OS color scheme onto `data-theme` on <html>.
+ *
+ * There is deliberately no user-facing theme setting: the popup is a companion
+ * to whatever the browser is already doing, so it follows the system and
+ * updates live when that changes.
  */
-export function useTheme(): {
-  preference: ThemePreference;
-  resolved: ResolvedTheme;
-  setPreference: (pref: ThemePreference) => void;
-} {
-  const [preference, setPreferenceState] = useState<ThemePreference>('system');
-  const [resolved, setResolved] = useState<ResolvedTheme>(resolveSystemTheme());
+export function useTheme(): ResolvedTheme {
+  const [resolved, setResolved] = useState<ResolvedTheme>(resolveSystemTheme);
 
-  // Load persisted preference once.
   useEffect(() => {
-    let cancelled = false;
-    storage.getTheme().then((pref) => {
-      if (!cancelled) setPreferenceState(pref);
-    });
-    return () => {
-      cancelled = true;
-    };
+    const mql = window.matchMedia('(prefers-color-scheme: dark)');
+    const handler = (e: MediaQueryListEvent) => setResolved(e.matches ? 'dark' : 'light');
+    setResolved(mql.matches ? 'dark' : 'light');
+    mql.addEventListener('change', handler);
+    return () => mql.removeEventListener('change', handler);
   }, []);
 
-  // Keep resolved theme in sync with preference + system changes.
+  // Apply to document root, suppressing transitions across the swap so the
+  // two palettes don't cross-fade into muddy intermediate colors.
+  const isFirstApply = useRef(true);
   useEffect(() => {
-    if (preference === 'system') {
-      const mql = window.matchMedia('(prefers-color-scheme: dark)');
-      const handler = (e: MediaQueryListEvent) => setResolved(e.matches ? 'dark' : 'light');
-      setResolved(mql.matches ? 'dark' : 'light');
-      // Chrome supports addEventListener on MediaQueryList in MV3 runtimes.
-      mql.addEventListener('change', handler);
-      return () => mql.removeEventListener('change', handler);
+    const root = document.documentElement;
+    if (isFirstApply.current) {
+      isFirstApply.current = false;
+      root.setAttribute('data-theme', resolved);
+      return;
     }
-    setResolved(preference);
-    return undefined;
-  }, [preference]);
-
-  // Apply to document root.
-  useEffect(() => {
-    document.documentElement.setAttribute('data-theme', resolved);
+    root.setAttribute('data-theme-switching', '');
+    root.setAttribute('data-theme', resolved);
+    // Two frames: one for the attribute to take effect, one for the repaint.
+    const raf = requestAnimationFrame(() => {
+      requestAnimationFrame(() => root.removeAttribute('data-theme-switching'));
+    });
+    return () => cancelAnimationFrame(raf);
   }, [resolved]);
 
-  const setPreference = useCallback((pref: ThemePreference) => {
-    setPreferenceState(pref);
-    void storage.setTheme(pref);
-  }, []);
-
-  return { preference, resolved, setPreference };
+  return resolved;
 }
diff --git a/src/lib/accents.ts b/src/lib/accents.ts
new file mode 100644
index 0000000..4563e7c
--- /dev/null
+++ b/src/lib/accents.ts
@@ -0,0 +1,26 @@
+/**
+ * Accent palette from the design handoff. `null` accent means monochrome —
+ * the base look, where nothing is tinted.
+ */
+export interface Accent {
+  name: string;
+  hex: string;
+}
+
+export const ACCENTS: readonly Accent[] = [
+  { name: 'Blue', hex: '#6690e0' },
+  { name: 'Cyan', hex: '#4fa8c9' },
+  { name: 'Teal', hex: '#4fa98e' },
+  { name: 'Green', hex: '#4f9d6e' },
+  { name: 'Lime', hex: '#8db84f' },
+  { name: 'Amber', hex: '#c99a3d' },
+  { name: 'Orange', hex: '#d9824f' },
+  { name: 'Red', hex: '#d9636b' },
+  { name: 'Pink', hex: '#d9709c' },
+  { name: 'Violet', hex: '#9575e0' },
+] as const;
+
+/** True when `hex` is one of the known accents — guards values read from storage. */
+export function isKnownAccent(hex: string): boolean {
+  return ACCENTS.some((a) => a.hex === hex.toLowerCase());
+}
diff --git a/src/lib/contrast.ts b/src/lib/contrast.ts
new file mode 100644
index 0000000..3fa117f
--- /dev/null
+++ b/src/lib/contrast.ts
@@ -0,0 +1,77 @@
+/**
+ * WCAG contrast helpers.
+ *
+ * The accent palette is chosen for looks, not for legibility: every swatch
+ * fails AA as light-on-color, and most fail as text on a white panel. Rather
+ * than ship unreadable labels, derived colors are computed from the chosen
+ * accent so both stay at or above the 4.5:1 normal-text threshold.
+ */
+
+const NEAR_WHITE = '#fafafa';
+const NEAR_BLACK = '#141414';
+
+type Rgb = [number, number, number];
+
+function toRgb(hex: string): Rgb {
+  const n = Number.parseInt(hex.slice(1), 16);
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+
+function toHex([r, g, b]: Rgb): string {
+  return `#${[r, g, b].map((v) => Math.round(v).toString(16).padStart(2, '0')).join('')}`;
+}
+
+function channelLuminance(value: number): number {
+  const c = value / 255;
+  return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+}
+
+/** Relative luminance per WCAG 2.x. */
+export function luminance(hex: string): number {
+  const [r, g, b] = toRgb(hex);
+  return (
+    0.2126 * channelLuminance(r) + 0.7152 * channelLuminance(g) + 0.0722 * channelLuminance(b)
+  );
+}
+
+/** Contrast ratio between two colors, from 1 (identical) to 21 (black/white). */
+export function contrastRatio(a: string, b: string): number {
+  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+  return (hi + 0.05) / (lo + 0.05);
+}
+
+function mix(a: string, b: string, t: number): string {
+  const [ar, ag, ab] = toRgb(a);
+  const [br, bg, bb] = toRgb(b);
+  return toHex([ar + (br - ar) * t, ag + (bg - ag) * t, ab + (bb - ab) * t]);
+}
+
+/**
+ * Pick the label color — near-black or near-white — that reads best on `background`.
+ * With this palette that is always near-black; the check is kept general so a
+ * darker accent would correctly get a light label.
+ */
+export function readableOn(background: string): string {
+  return contrastRatio(background, NEAR_WHITE) >= contrastRatio(background, NEAR_BLACK)
+    ? NEAR_WHITE
+    : NEAR_BLACK;
+}
+
+/**
+ * Darken (on light backgrounds) or lighten (on dark ones) `color` just enough
+ * to reach `target` contrast against `background`, preserving its hue.
+ */
+export function adjustForContrast(color: string, background: string, target = 4.5): string {
+  const towards = luminance(background) > 0.5 ? '#000000' : '#ffffff';
+  for (let t = 0; t <= 0.9; t += 0.05) {
+    const candidate = mix(color, towards, t);
+    if (contrastRatio(candidate, background) >= target) return candidate;
+  }
+  return mix(color, towards, 0.9);
+}
+
+/** `color` at the given alpha, as an 8-digit hex the CSS engine accepts. */
+export function withAlpha(color: string, alpha: number): string {
+  const a = Math.round(Math.max(0, Math.min(1, alpha)) * 255);
+  return `${color}${a.toString(16).padStart(2, '0')}`;
+}
diff --git a/src/lib/dom.ts b/src/lib/dom.ts
new file mode 100644
index 0000000..abcdede
--- /dev/null
+++ b/src/lib/dom.ts
@@ -0,0 +1,12 @@
+/**
+ * True when a keyboard event's target is a field that consumes typing —
+ * global shortcuts without modifiers should not fire while the user types.
+ */
+export function isEditableTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) return false;
+  return (
+    target.tagName === 'INPUT' ||
+    target.tagName === 'TEXTAREA' ||
+    target.isContentEditable
+  );
+}
diff --git a/src/lib/id.ts b/src/lib/id.ts
new file mode 100644
index 0000000..0a4e9ca
--- /dev/null
+++ b/src/lib/id.ts
@@ -0,0 +1,10 @@
+/**
+ * Generate a unique ID. Uses crypto.randomUUID when available (all modern
+ * Chrome), falling back to timestamp + random for robustness in tests.
+ */
+export function generateId(): string {
+  if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) {
+    return crypto.randomUUID();
+  }
+  return `id_${Date.now()}_${Math.random().toString(36).slice(2)}`;
+}
diff --git a/src/lib/paramTypes.ts b/src/lib/paramTypes.ts
index 3dd2c19..ab29c6f 100644
--- a/src/lib/paramTypes.ts
+++ b/src/lib/paramTypes.ts
@@ -1,30 +1,32 @@
 import type { ParamType } from '@/types';
+import { tryParseStructured } from './structuredParam';
 
 /**
  * Heuristically detect the "type" of a parameter value to decide which editor to show.
  *
  * We're deliberately conservative: only exact "true"/"false" (case-insensitive) count
  * as booleans — strings like "yes", "1", "on" are left as plain strings to avoid
- * surprising the user when round-tripping.
+ * surprising the user when round-tripping. Numbers are plain decimals only
+ * ("1e2" or ".5" would round-trip surprisingly, so they stay strings).
  */
 export function detectParamType(value: string): ParamType {
   const lower = value.toLowerCase();
   if (lower === 'true' || lower === 'false') return 'boolean';
-  // Number detection: only non-empty finite numbers. Avoids classifying "" or "NaN" as number.
-  if (value !== '' && Number.isFinite(Number(value)) && !/^\s*$/.test(value)) {
-    // Additional guard: strings like "1e2" are technically numbers but likely user intent is string.
-    // We only accept digits, optional leading -, and a single decimal point.
-    if (/^-?\d+(\.\d+)?$/.test(value)) return 'number';
-  }
-  // Structured detection: valid JSON object or array.
-  const trimmed = value.trim();
-  if (trimmed[0] === '{' || trimmed[0] === '[') {
-    try {
-      const parsed: unknown = JSON.parse(trimmed);
-      if (typeof parsed === 'object' && parsed !== null) return 'structured';
-    } catch {
-      // fall through to string
-    }
-  }
+  if (/^-?\d+(\.\d+)?$/.test(value)) return 'number';
+  if (tryParseStructured(value) !== undefined) return 'structured';
   return 'string';
 }
+
+/**
+ * Flip a boolean-ish value, preserving the casing style the URL already used
+ * so toggling `TRUE` yields `FALSE` and `False` yields `True` — round-tripping
+ * a param should never reformat the rest of the query string.
+ */
+export function flipBoolean(value: string): string {
+  const next = value.toLowerCase() === 'true' ? 'false' : 'true';
+  if (value === value.toUpperCase() && value !== value.toLowerCase()) return next.toUpperCase();
+  if (value[0] === value[0]?.toUpperCase() && value.slice(1) === value.slice(1).toLowerCase()) {
+    return next[0].toUpperCase() + next.slice(1);
+  }
+  return next;
+}
diff --git a/src/lib/storage.ts b/src/lib/storage.ts
index 873fd93..06ab3d5 100644
--- a/src/lib/storage.ts
+++ b/src/lib/storage.ts
@@ -1,4 +1,4 @@
-import type { SavedLink, Group, ThemePreference } from '@/types';
+import type { SavedLink, Group, AccentColor } from '@/types';
 
 /**
  * Adapter over chrome.storage.local.
@@ -11,7 +11,7 @@ import type { SavedLink, Group, ThemePreference } from '@/types';
 const KEYS = {
   savedLinks: 'qc.savedLinks',
   groups: 'qc.groups',
-  theme: 'qc.theme',
+  accent: 'qc.accent',
 } as const;
 
 export const DEFAULT_GROUP_ID = 'default';
@@ -52,11 +52,11 @@ export const storage = {
     await set(KEYS.groups, groups);
   },
 
-  async getTheme(): Promise<ThemePreference> {
-    return get<ThemePreference>(KEYS.theme, 'system');
+  async getAccent(): Promise<AccentColor> {
+    return get<AccentColor>(KEYS.accent, null);
   },
 
-  async setTheme(theme: ThemePreference): Promise<void> {
-    await set(KEYS.theme, theme);
+  async setAccent(accent: AccentColor): Promise<void> {
+    await set(KEYS.accent, accent);
   },
 };
diff --git a/src/lib/structuredParam.ts b/src/lib/structuredParam.ts
index b3b374d..a51e3a5 100644
--- a/src/lib/structuredParam.ts
+++ b/src/lib/structuredParam.ts
@@ -5,18 +5,28 @@
  * that resolves to an object or array. Anything else is treated as a plain string.
  */
 
-/** True when `raw` is a JSON-encoded object or array. */
-export function isStructured(raw: string): boolean {
+/**
+ * Parse `raw` as a JSON object or array. Returns the parsed value, or
+ * `undefined` when `raw` is not valid JSON or resolves to a non-container
+ * (string/number/boolean/null). Single source of truth for "is this value
+ * structured?" — used by type detection, normalization, and the JSON editor.
+ */
+export function tryParseStructured(raw: string): unknown {
   const t = raw.trim();
-  if (t[0] !== '{' && t[0] !== '[') return false;
+  if (t[0] !== '{' && t[0] !== '[') return undefined;
   try {
-    const v = JSON.parse(t);
-    return typeof v === 'object' && v !== null;
+    const v: unknown = JSON.parse(t);
+    return typeof v === 'object' && v !== null ? v : undefined;
   } catch {
-    return false;
+    return undefined;
   }
 }
 
+/** True when `raw` is a JSON-encoded object or array. */
+export function isStructured(raw: string): boolean {
+  return tryParseStructured(raw) !== undefined;
+}
+
 /** Parse a raw query-param value. Caller must guard with {@link isStructured}. */
 export function parseStructuredValue(raw: string): unknown {
   return JSON.parse(raw);
@@ -107,8 +117,9 @@ export function isContainer(value: unknown): boolean {
 
 /**
  * Immutably rename an object key at `path` inside `root`, preserving entry order.
- * Returns `root` unchanged if `newKey === oldKey`, `newKey` is empty, or the
- * target is not a plain object.
+ * Returns `root` unchanged if `newKey === oldKey`, `newKey` is empty, the
+ * target is not a plain object, or `newKey` already exists on the target
+ * (renaming onto an existing key would silently drop one of the two values).
  */
 export function renameKeyAtPath(
   root: unknown,
@@ -120,6 +131,7 @@ export function renameKeyAtPath(
   const target = getAtPath(root, path);
   if (typeof target !== 'object' || target === null || Array.isArray(target)) return root;
   const obj = target as Record<string, unknown>;
+  if (Object.prototype.hasOwnProperty.call(obj, newKey)) return root;
   const newObj: Record<string, unknown> = {};
   for (const k of Object.keys(obj)) {
     newObj[k === oldKey ? newKey : k] = obj[k];
diff --git a/src/lib/urlParser.ts b/src/lib/urlParser.ts
index dab1379..ae7a7c3 100644
--- a/src/lib/urlParser.ts
+++ b/src/lib/urlParser.ts
@@ -1,16 +1,7 @@
 import type { ParsedUrl, QueryParam, ParamType } from '@/types';
 import { detectParamType } from './paramTypes';
-
-/**
- * Generate a unique ID for a parameter. Using crypto.randomUUID when available
- * (all modern Chrome), falling back to a timestamp + random for robustness in tests.
- */
-function generateId(): string {
-  if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) {
-    return crypto.randomUUID();
-  }
-  return `p_${Date.now()}_${Math.random().toString(36).slice(2)}`;
-}
+import { tryParseStructured } from './structuredParam';
+import { generateId } from './id';
 
 /**
  * Normalize a decoded param value: structured (JSON object/array) values are
@@ -19,18 +10,14 @@ function generateId(): string {
  * p.value consistent and prevents literal whitespace from leaking into the URL.
  */
 function normalizeValue(raw: string): string {
-  const t = raw.trim();
-  if (t[0] === '{' || t[0] === '[') {
-    try {
-      const parsed: unknown = JSON.parse(t);
-      if (typeof parsed === 'object' && parsed !== null) {
-        return JSON.stringify(parsed);
-      }
-    } catch {
-      // not valid JSON — return as-is
-    }
-  }
-  return raw;
+  const parsed = tryParseStructured(raw);
+  return parsed === undefined ? raw : JSON.stringify(parsed);
+}
+
+/** Build a QueryParam from a decoded key/value pair. */
+function makeParam(key: string, rawValue: string): QueryParam {
+  const value = normalizeValue(rawValue);
+  return { id: generateId(), key, value, type: detectParamType(value) };
 }
 
 /**
@@ -43,36 +30,40 @@ function normalizeValue(raw: string): string {
 export function parseUrl(rawUrl: string): ParsedUrl {
   const url = new URL(rawUrl); // throws TypeError on invalid input
 
-  const base = `${url.origin}${url.pathname}`;
+  // Base = full URL minus query and fragment. Built by stripping the parsed
+  // URL rather than `origin + pathname`: origin is the literal string "null"
+  // for file: URLs (outside Chrome) and drops credentials (user:pass@).
+  const stripped = new URL(url);
+  stripped.search = '';
+  stripped.hash = '';
+  const base = stripped.href;
+
   const params: QueryParam[] = [];
 
   // Hash-router pattern: query params live inside the hash fragment.
   // e.g. https://app.com/#/route?foo=bar  →  hash = "#/route?foo=bar"
-  if (url.hash && url.hash.includes('?')) {
-    const qIdx = url.hash.indexOf('?');
-    const hashPath = url.hash.slice(0, qIdx); // e.g. "#/route"
-    const hashSearch = url.hash.slice(qIdx + 1); // e.g. "foo=bar&baz=qux"
+  // Only kicks in when something follows the "?" — a plain anchor that merely
+  // ends in "?" (e.g. "#Why?") stays an opaque fragment.
+  const hashQueryIdx = url.hash.indexOf('?');
+  const hashSearch = hashQueryIdx === -1 ? '' : url.hash.slice(hashQueryIdx + 1);
+
+  if (hashSearch !== '') {
+    const hashPath = url.hash.slice(0, hashQueryIdx); // e.g. "#/route"
 
     for (const [key, value] of new URLSearchParams(hashSearch).entries()) {
-      params.push({
-        id: generateId(),
-        key,
-        value: normalizeValue(value),
-        type: detectParamType(value),
-      });
+      params.push(makeParam(key, value));
     }
 
-    return { base, params, fragment: hashPath, hashQuery: true };
+    // A URL can carry BOTH a real query string and a hash query
+    // (https://app.com/path?main=1#/route?foo=bar). Only the hash query is
+    // editable in this mode; keep the real one verbatim as part of the base
+    // so it survives serialization instead of being silently dropped.
+    return { base: `${base}${url.search}`, params, fragment: hashPath, hashQuery: true };
   }
 
   // Regular query params.
   for (const [key, value] of url.searchParams.entries()) {
-    params.push({
-      id: generateId(),
-      key,
-      value: normalizeValue(value),
-      type: detectParamType(value),
-    });
+    params.push(makeParam(key, value));
   }
 
   return { base, params, fragment: url.hash, hashQuery: false };
diff --git a/src/popup/App.module.css b/src/popup/App.module.css
index 6fde7f0..b184e9e 100644
--- a/src/popup/App.module.css
+++ b/src/popup/App.module.css
@@ -1,24 +1,22 @@
 .app {
+  position: relative;
   display: flex;
   flex-direction: column;
-  width: var(--popup-width);
+  width: 100%;
+  min-width: 0;
   height: 100%;
   min-height: 100%;
   max-height: 100%;
   background: var(--color-bg);
   color: var(--color-text-primary);
+  overflow: hidden;
 }
 
+/* Header + footer are fixed; only this middle band scrolls. */
 .scrollArea {
   flex: 1;
+  min-width: 0;
   overflow-y: auto;
   overflow-x: hidden;
-}
-
-.previewWrap {
-  padding-top: var(--space-4);
-}
-
-.bookmarkBtn {
-  border-color: var(--color-border);
+  padding: var(--pad-block) var(--pad-inline) var(--space-4);
 }
diff --git a/src/popup/App.tsx b/src/popup/App.tsx
index 80fd0e6..52ba629 100644
--- a/src/popup/App.tsx
+++ b/src/popup/App.tsx
@@ -3,6 +3,7 @@ import { useAppStore, selectCurrentUrl, selectNavUrl } from '@/store/useAppStore
 import { useActiveTabUrl } from '@/hooks/useActiveTabUrl';
 import { useClipboard } from '@/hooks/useClipboard';
 import { useTheme } from '@/hooks/useTheme';
+import { useAccent } from '@/hooks/useAccent';
 import { useSavedLinks } from '@/hooks/useSavedLinks';
 import { useKeyboardShortcuts } from '@/hooks/useKeyboardShortcuts';
 import { tabs } from '@/lib/tabs';
@@ -11,18 +12,19 @@ import { Header } from '@/components/Header';
 import { UrlPreview } from '@/components/UrlPreview';
 import { ParamList } from '@/components/ParamList';
 import { ActionBar } from '@/components/ActionBar';
-import { ThemeToggle } from '@/components/ThemeToggle';
 import { IconButton } from '@/components/IconButton';
-import { IconBookmark } from '@/components/icons';
-import { LiveRegion } from '@/components/LiveRegion';
+import { IconBookmark, IconSettings } from '@/components/icons';
+import { Toast } from '@/components/Toast';
 import { SavedLinksDrawer } from '@/components/SavedLinksDrawer';
+import { SettingsDrawer } from '@/components/SettingsDrawer';
 import { EmptyState } from '@/components/EmptyState';
 import styles from './App.module.css';
 
 export function App() {
   // Load URL on mount, hydrate theme, bind storage-backed saved links.
   useActiveTabUrl();
-  const { preference, setPreference } = useTheme();
+  const theme = useTheme();
+  const { accent, setAccent } = useAccent(theme);
 
   // Zustand store — individual selectors keep re-renders narrow.
   const tabState = useAppStore((s) => s.tabState);
@@ -38,12 +40,14 @@ export function App() {
   const announce = useAppStore((s) => s.announce);
 
   const currentUrl = useAppStore(selectCurrentUrl); // human-readable, for display
-  const navUrl = useAppStore(selectNavUrl);          // encoded, for Apply / Copy
+  const navUrl = useAppStore(selectNavUrl); // encoded, for Apply / Copy
 
   const { copied, copy } = useClipboard();
   const { links, groups, saveLink, updateLink, deleteLink, createGroup } = useSavedLinks();
 
   const [drawerOpen, setDrawerOpen] = useState(false);
+  const [drawerMode, setDrawerMode] = useState<'list' | 'save'>('list');
+  const [settingsOpen, setSettingsOpen] = useState(false);
 
   /* ---------- Action handlers ---------- */
 
@@ -57,11 +61,9 @@ export function App() {
     if (currentTabState.status !== 'ready' || !currentNavUrl) return;
     try {
       await tabs.updateUrl(currentTabState.tabId, currentNavUrl);
-      announce('URL applied to the current tab.');
+      announce('URL applied to the current tab');
     } catch (err) {
-      announce(
-        `Failed to apply URL: ${err instanceof Error ? err.message : 'unknown error'}`,
-      );
+      announce(`Failed to apply: ${err instanceof Error ? err.message : 'unknown error'}`);
     }
   }, [announce]);
 
@@ -72,56 +74,94 @@ export function App() {
   const handleCopy = useCallback(async () => {
     if (!navUrl) return;
     const ok = await copy(navUrl);
-    announce(ok ? 'URL copied to clipboard.' : 'Failed to copy URL.');
+    announce(ok ? 'URL copied to clipboard' : 'Failed to copy URL');
   }, [navUrl, copy, announce]);
 
   const handleOpenDrawer = useCallback(() => {
+    setDrawerMode('list');
+    setDrawerOpen(true);
+  }, []);
+
+  /** The action bar's "Save" button jumps straight to the save form. */
+  const handleOpenSaveDrawer = useCallback(() => {
+    setDrawerMode('save');
     setDrawerOpen(true);
   }, []);
 
+  const handleCloseDrawer = useCallback(() => {
+    setDrawerOpen(false);
+  }, []);
+
+  const handleOpenSettings = useCallback(() => {
+    setSettingsOpen(true);
+  }, []);
+
+  const handleCloseSettings = useCallback(() => {
+    setSettingsOpen(false);
+  }, []);
+
+  /** Escape closes whichever panel is on top. */
+  const handleEscape = useCallback(() => {
+    setSettingsOpen(false);
+    setDrawerOpen(false);
+  }, []);
+
   const handleUpdateLink = useCallback(
     (id: string, label: string | undefined, groupId: string) => {
-      void updateLink(id, label, groupId).then(() => {
-        announce('URL updated.');
-      });
+      void updateLink(id, label, groupId).then(
+        () => announce('Saved URL updated'),
+        () => announce('Failed to update saved URL'),
+      );
     },
     [updateLink, announce],
   );
 
   const handleSaveLink = useCallback(
     ({ url, label, groupId }: { url: string; label?: string; groupId: string }) => {
-      void saveLink({ url, label, groupId }).then(() => {
-        announce('URL saved.');
-      });
+      void saveLink({ url, label, groupId }).then(
+        () => announce('URL saved'),
+        () => announce('Failed to save URL'),
+      );
     },
     [saveLink, announce],
   );
 
+  const handleDeleteLink = useCallback(
+    (id: string) => {
+      void deleteLink(id).then(
+        () => announce('Saved URL deleted'),
+        () => announce('Failed to delete saved URL'),
+      );
+    },
+    [deleteLink, announce],
+  );
+
   const handleLoadSavedLink = useCallback(
     (url: string) => {
+      const snap = useAppStore.getState().tabState;
       const tabId =
-        tabState.status === 'ready'
-          ? tabState.tabId
-          : tabState.status === 'unsupported'
-            ? tabState.tabId
-            : undefined;
-      if (tabId === undefined) return;
+        snap.status === 'ready' || snap.status === 'unsupported' ? snap.tabId : undefined;
+      if (tabId === undefined) {
+        announce('Cannot load the saved URL: no editable tab');
+        return;
+      }
       try {
-        // Replace current editor state with the saved URL without touching the actual tab.
-        // User can click Apply if they want to navigate.
+        // Replace the editor state with the saved URL without touching the
+        // actual tab — the user can hit Apply to navigate.
         const parsed = parseUrl(url);
+        const snapshot = () => ({ ...parsed, params: parsed.params.map((p) => ({ ...p })) });
         useAppStore.setState({
           tabState: { status: 'ready', tabId, url },
-          initialParsed: { ...parsed, params: parsed.params.map((p) => ({ ...p })) },
-          currentParsed: { ...parsed, params: parsed.params.map((p) => ({ ...p })) },
-          announcement: 'Loaded saved URL into editor.',
+          initialParsed: snapshot(),
+          currentParsed: snapshot(),
+          announcement: 'Loaded saved URL',
         });
       } catch {
-        announce('Failed to load saved URL.');
+        announce('Failed to load saved URL');
       }
       setDrawerOpen(false);
     },
-    [tabState, announce],
+    [announce],
   );
 
   /* ---------- Keyboard shortcuts ---------- */
@@ -130,14 +170,9 @@ export function App() {
     () => [
       { key: 'Enter', mod: true, preventDefault: true, handler: () => void handleApply() },
       { key: 's', mod: true, preventDefault: true, handler: handleOpenDrawer },
-      {
-        key: 'Escape',
-        handler: () => {
-          if (drawerOpen) setDrawerOpen(false);
-        },
-      },
+      { key: 'Escape', handler: handleEscape },
     ],
-    [handleApply, handleOpenDrawer, drawerOpen],
+    [handleApply, handleOpenDrawer, handleEscape],
   );
   useKeyboardShortcuts(shortcuts);
 
@@ -145,12 +180,21 @@ export function App() {
 
   const headerActions = (
     <>
-      <ThemeToggle preference={preference} onChange={setPreference} />
+      <IconButton
+        aria-label="Settings"
+        title="Settings"
+        icon={<IconSettings />}
+        variant="bordered"
+        size="lg"
+        onClick={handleOpenSettings}
+      />
       <IconButton
         aria-label="Open saved URLs"
+        title="Saved URLs"
         icon={<IconBookmark />}
+        variant="bordered"
+        size="lg"
         onClick={handleOpenDrawer}
-        className={styles.bookmarkBtn}
       />
     </>
   );
@@ -177,9 +221,7 @@ export function App() {
       {tabState.status === 'ready' && currentParsed && (
         <>
           <div className={styles.scrollArea}>
-            <div className={styles.previewWrap}>
-              <UrlPreview parsed={currentParsed} onUrlChange={setCurrentUrl} />
-            </div>
+            <UrlPreview parsed={currentParsed} onUrlChange={setCurrentUrl} />
             <ParamList
               params={currentParsed.params}
               onKeyChange={updateKey}
@@ -193,27 +235,35 @@ export function App() {
             onApply={() => void handleApply()}
             onReset={handleReset}
             onCopy={() => void handleCopy()}
-            onSave={handleOpenDrawer}
+            onSave={handleOpenSaveDrawer}
             copied={copied}
             applyDisabled={!navUrl}
           />
         </>
       )}
 
+      <Toast message={announcement} />
+
       <SavedLinksDrawer
         open={drawerOpen}
-        onClose={() => setDrawerOpen(false)}
+        initialMode={drawerMode}
+        onClose={handleCloseDrawer}
         currentUrl={currentUrl}
         links={links}
         groups={groups}
         onSave={handleSaveLink}
         onUpdateLink={handleUpdateLink}
-        onDeleteLink={(id) => void deleteLink(id)}
+        onDeleteLink={handleDeleteLink}
         onCreateGroup={createGroup}
         onLoadLink={handleLoadSavedLink}
       />
 
-      <LiveRegion message={announcement} />
+      <SettingsDrawer
+        open={settingsOpen}
+        onClose={handleCloseSettings}
+        accent={accent}
+        onAccentChange={setAccent}
+      />
     </div>
   );
 }
diff --git a/src/popup/main.tsx b/src/popup/main.tsx
index 928fe49..d33bf20 100644
--- a/src/popup/main.tsx
+++ b/src/popup/main.tsx
@@ -3,8 +3,9 @@ import { createRoot } from 'react-dom/client';
 import { App } from './App';
 import '@/styles/global.css';
 
-// Chrome popup sizing can ignore CSS height in some cases; enforce it at runtime.
-const POPUP_WIDTH = '440px';
+// Chrome sizes the popup from the document box and can ignore CSS height in
+// some cases, so the dimensions are pinned at runtime as well.
+const POPUP_WIDTH = '380px';
 const POPUP_HEIGHT = '600px';
 document.documentElement.style.width = POPUP_WIDTH;
 document.documentElement.style.height = POPUP_HEIGHT;
diff --git a/src/store/useAppStore.ts b/src/store/useAppStore.ts
index 6df0878..c9e88a5 100644
--- a/src/store/useAppStore.ts
+++ b/src/store/useAppStore.ts
@@ -1,7 +1,7 @@
 import { create } from 'zustand';
 import type { ParsedUrl, QueryParam, TabLoadState } from '@/types';
 import { createParam, isEditableUrl, parseUrl, serializeUrl, serializeUrlForNav } from '@/lib/urlParser';
-import { detectParamType } from '@/lib/paramTypes';
+import { detectParamType, flipBoolean } from '@/lib/paramTypes';
 
 interface AppState {
   /** Current tab loading state. Drives which screen we render. */
@@ -69,7 +69,14 @@ export const useAppStore = create<AppState>((set, get) => ({
   setCurrentUrl: (rawUrl) => {
     try {
       const parsed = parseUrl(rawUrl);
-      set({ currentParsed: { ...parsed, params: parsed.params.map((p) => ({ ...p })) } });
+      // Re-parsing generates fresh ids; adopt the previous id where the row
+      // (same position, same key) clearly survived the edit. Otherwise every
+      // keystroke in the URL field would remount all param rows.
+      const prev = get().currentParsed?.params ?? [];
+      const params = parsed.params.map((p, i) =>
+        prev[i] && prev[i].key === p.key ? { ...p, id: prev[i].id } : p,
+      );
+      set({ currentParsed: { ...parsed, params } });
     } catch {
       // Invalid URL while the user is still typing — ignore silently.
     }
@@ -105,11 +112,9 @@ export const useAppStore = create<AppState>((set, get) => ({
     set({
       currentParsed: {
         ...state.currentParsed,
-        params: state.currentParsed.params.map((p) => {
-          if (p.id !== id) return p;
-          const next = p.value.toLowerCase() === 'true' ? 'false' : 'true';
-          return { ...p, value: next };
-        }),
+        params: state.currentParsed.params.map((p) =>
+          p.id === id ? { ...p, value: flipBoolean(p.value) } : p,
+        ),
       },
     });
   },
diff --git a/src/styles/global.css b/src/styles/global.css
index f439498..38e5ce5 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -14,17 +14,29 @@ body {
   padding: 0;
 }
 
+/*
+ * Headings and paragraphs keep their UA margins otherwise — at these small
+ * type sizes a stray `margin: 1em 0` silently doubles a card's header height.
+ * Spacing is owned by the layout, never by the text element.
+ */
+h1,
+h2,
+h3,
+h4,
+p,
+figure {
+  margin: 0;
+}
+
 html {
   font-family: var(--font-sans);
-  font-size: var(--font-size-base);
+  font-size: var(--font-size-md);
   line-height: var(--line-height-base);
   color: var(--color-text-primary);
-  background: var(--color-bg);
+  background: var(--color-bg-outer);
   width: var(--popup-width);
-  height: var(--popup-max-height);
-  border-radius: var(--radius-xl);
+  height: var(--popup-height);
   overflow: hidden;
-  /* Prevent font-size inflation on mobile-like viewports */
   -webkit-text-size-adjust: 100%;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -46,6 +58,13 @@ body {
   flex: 1;
   height: 100%;
   min-height: 100%;
+  /*
+   * Flex items default to min-width:auto, which refuses to shrink below the
+   * content's min-content width — a long unbroken URL would then push the
+   * whole panel wider than the popup. Opt out so the panel owns its width.
+   */
+  min-width: 0;
+  max-width: 100%;
 }
 
 button {
@@ -59,15 +78,26 @@ button {
 }
 
 input,
+select,
 textarea {
   font-family: inherit;
   font-size: inherit;
   color: inherit;
 }
 
+input::placeholder,
+textarea::placeholder {
+  color: var(--color-text-faint);
+}
+
 /* ------------ Global focus ------------- */
 
-/* We keep outlines for keyboard users via :focus-visible. Mouse clicks stay clean. */
+/*
+ * The reference design signals focus only by lightening an input's border.
+ * That is not enough on its own for keyboard users, so the border treatment
+ * is kept per-component and a :focus-visible ring is layered on top —
+ * pointer interaction stays clean because :focus-visible excludes clicks.
+ */
 *:focus {
   outline: none;
 }
@@ -75,7 +105,6 @@ textarea {
 *:focus-visible {
   outline: var(--focus-ring-width) solid var(--color-focus);
   outline-offset: var(--focus-ring-offset);
-  border-radius: var(--radius-sm);
 }
 
 /* ------------ Utilities ------------- */
@@ -104,12 +133,23 @@ textarea {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: var(--color-border-strong);
+  background: var(--color-fill-strong);
   border-radius: var(--radius-full);
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--color-text-muted);
+  background: var(--color-text-faint);
+}
+
+/*
+ * Applied for one frame while the theme flips. Without it, every element that
+ * transitions `background` (inputs, toggles, buttons) animates between the two
+ * palettes, so the switch reads as a smear rather than an instant change.
+ */
+html[data-theme-switching] *,
+html[data-theme-switching] *::before,
+html[data-theme-switching] *::after {
+  transition: none !important;
 }
 
 /* Respect reduced motion preference */
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index d821186..174eaaf 100644
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -1,179 +1,214 @@
 /*
- * QueryCraft design tokens.
+ * QueryCraft design tokens — monochrome, Linear-inspired.
  *
- * Every text color is verified against its background for WCAG 2.2 AA:
- *   - Normal text:  >= 4.5:1
- *   - Large text:   >= 3:1
- *   - UI components / focus: >= 3:1
+ * Palette is intentionally hue-free (oklch chroma 0): hierarchy comes from
+ * lightness, border alpha, and weight rather than color. Dark is the primary
+ * theme; light mirrors it with the same structure and inverted lightness.
  *
- * Colors are defined as hex so any designer can paste them straight into a checker.
+ * Because nothing is color-coded, status is always carried by an icon or a
+ * label as well — see the accessibility notes in the README.
  */
 
-:root,
-[data-theme='light'] {
-  /* Surfaces */
-  --color-bg: #ffffff;
-  --color-surface: #f4f5f8;
-  --color-surface-raised: #ffffff;
-  --color-surface-sunken: #eceef3;
-
-  /* Text (on --color-bg) */
-  --color-text-primary: #0f1115; /* 19.2:1 */
-  --color-text-secondary: #3a4150; /* 10.3:1 */
-  --color-text-muted: #5a6370; /* 6.0:1 — comfortably above AA, readable for placeholders */
-
-  /* Accent — deep violet; mapped so text on accent and accent on surface both pass */
-  --color-accent: #5b3df5; /* 5.8:1 against --color-bg */
-  --color-accent-hover: #4a2fde;
-  --color-accent-pressed: #3a23b8;
-  --color-on-accent: #ffffff; /* 6.9:1 on --color-accent */
-
-  /* Borders / dividers (non-text, so 3:1 target) */
-  --color-border: #c9cfda;
-  --color-border-strong: #9aa3b2;
-
-  /* Focus ring */
-  --color-focus: #0a66ff; /* 4.7:1 — visible on both light surface and accent */
-
-  /* Feedback */
-  --color-danger: #b02a3a;
-  --color-warning: #8a5300;
-  --color-success: #0a7d52;
-
-  /* Input-specific surfaces */
-  --color-input-bg: #ffffff;
-  --color-input-bg-alt: #f0f2f6; /* key field — slightly darker to differentiate */
-  --color-input-border: #c9cfda;
-
-  /* Shadows */
-  --shadow-sm: 0 1px 2px rgba(15, 17, 21, 0.06);
-  --shadow-md: 0 4px 12px rgba(15, 17, 21, 0.08);
-  --shadow-lg: 0 12px 32px rgba(15, 17, 21, 0.12);
+/* ── Dark (default) ───────────────────────────────────────────────── */
 
+:root,
+[data-theme='dark'] {
   /*
-   * JSON syntax highlight colors — WCAG 2.2 AA verified against --color-bg #ffffff:
-   *   --json-key     #0369A1  5.7:1  ✓
-   *   --json-index   #374151  10.0:1 ✓
-   *   --json-string  #92400E  6.9:1  ✓
-   *   --json-number  #5B21B6  8.9:1  ✓
-   *   --json-boolean #166534  6.7:1  ✓
-   *   --json-null    #6B7280  4.9:1  ✓
-   *   --json-punct   #6B7280  4.9:1  ✓
+   * Declaring color-scheme is not cosmetic: without it Chrome treats the page
+   * as unaware of theming and applies its own auto-dark-mode, repainting
+   * inputs and switches with inverted colors while leaving computed styles
+   * untouched. It also themes native scrollbars and select popups.
    */
-  --json-key:     #0369A1;
-  --json-index:   #374151;
-  --json-string:  #92400E;
-  --json-number:  #5B21B6;
-  --json-boolean: #166534;
-  --json-null:    #6B7280;
-  --json-punct:   #6B7280;
-}
+  color-scheme: dark;
 
-[data-theme='dark'] {
   /* Surfaces */
-  --color-bg: #0c0e13;
-  --color-surface: #15181f;
-  --color-surface-raised: #1b1f28;
-  --color-surface-sunken: #0a0c10;
-
-  /* Text (on --color-bg) */
-  --color-text-primary: #f1f3f7; /* 16.8:1 */
-  --color-text-secondary: #c3c9d4; /* 11.1:1 */
-  --color-text-muted: #a3acba; /* 7.4:1 — still passes AA, distinct from primary without being unreadable */
-
-  /* Accent — lifted for dark contrast */
-  --color-accent: #a996ff; /* 7.9:1 against --color-bg */
-  --color-accent-hover: #bbacff;
-  --color-accent-pressed: #8973ff;
-  --color-on-accent: #0c0e13; /* 7.9:1 on --color-accent */
-
-  /* Borders */
-  --color-border: #2c313c;
-  --color-border-strong: #474e5e;
-
-  /* Focus */
-  --color-focus: #7aa8ff; /* 7.6:1 */
-
-  /* Feedback */
-  --color-danger: #ff7a8c;
-  --color-warning: #ffc66e;
-  --color-success: #6ce3a9;
-
-  /* Input surfaces */
-  --color-input-bg: #1b1f28;
-  --color-input-bg-alt: #22262f;
-  --color-input-border: #2c313c;
-
-  /* Shadows (a bit stronger on dark) */
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
-  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
-  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
+  --color-bg: oklch(0.15 0 0); /* popup panel */
+  --color-bg-outer: oklch(0.1 0 0); /* page behind the panel */
+  --color-surface-inset: oklch(0.19 0 0); /* inputs, url box, saved items */
+  --color-surface-header: oklch(0.18 0 0); /* card header strips */
+
+  /* Text — descending emphasis */
+  --color-text-primary: oklch(0.95 0 0);
+  --color-text-strong: oklch(0.9 0 0); /* param keys, active values */
+  --color-text-body: oklch(0.94 0 0); /* editable input text */
+  --color-text-secondary: oklch(0.75 0 0); /* outlined button labels */
+  --color-text-muted: oklch(0.55 0 0); /* section labels, meta */
+  --color-text-faint: oklch(0.45 0 0); /* placeholders, idle icons */
+
+  /* Borders — white at low alpha */
+  --color-border-subtle: oklch(1 0 0 / 0.06);
+  --color-border: oklch(1 0 0 / 0.08);
+  --color-border-card: oklch(1 0 0 / 0.09);
+  --color-border-strong: oklch(1 0 0 / 0.12);
+  --color-border-focus: oklch(1 0 0 / 0.3);
+
+  /* Fills for hover / inset controls */
+  --color-fill-subtle: oklch(1 0 0 / 0.06);
+  --color-fill: oklch(1 0 0 / 0.08);
+  --color-fill-strong: oklch(1 0 0 / 0.1);
 
   /*
-   * JSON syntax highlight colors — WCAG 2.2 AA verified against --color-bg #0c0e13:
-   *   --json-key     #7DD3FC  12.1:1 ✓
-   *   --json-index   #9CA3AF  8.4:1  ✓
-   *   --json-string  #F5D494  14.1:1 ✓
-   *   --json-number  #C4B5FD  11.1:1 ✓
-   *   --json-boolean #86EFAC  14.5:1 ✓
-   *   --json-null    #9CA3AF  8.4:1  ✓
-   *   --json-punct   #9CA3AF  8.4:1  ✓
+   * Primary action — inverted block by default. When an accent color is
+   * chosen in Settings these five are overridden at runtime (see useAccent);
+   * every accent-aware component reads them, so nothing branches on "is an
+   * accent set?" in component code.
    */
-  --json-key:     #7DD3FC;
-  --json-index:   #9CA3AF;
-  --json-string:  #F5D494;
-  --json-number:  #C4B5FD;
-  --json-boolean: #86EFAC;
-  --json-null:    #9CA3AF;
-  --json-punct:   #9CA3AF;
+  --color-accent: oklch(0.95 0 0);
+  --color-accent-hover: oklch(1 0 0);
+  --color-on-accent: oklch(0.12 0 0);
+  /* Accent used as *text* on a panel (logo, badge, URL keys). */
+  --color-accent-text: oklch(0.95 0 0);
+  /* Accent used as a tinted fill behind accent text. */
+  --color-accent-soft: oklch(1 0 0 / 0.1);
+
+  /* Toast */
+  --color-toast-bg: oklch(0.28 0 0);
+  --color-toast-text: oklch(0.95 0 0);
+  --color-toast-border: oklch(1 0 0 / 0.14);
+
+  /* Focus ring — must read against every surface above */
+  --color-focus: oklch(0.85 0 0);
+
+  /* Feedback. Hue-free by default so the monochrome language holds; danger
+     gets a faint warm lift so destructive controls are not purely iconographic. */
+  --color-danger: oklch(0.72 0.13 25);
+  --color-success: oklch(0.9 0 0);
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.35);
+  --shadow-md: 0 8px 24px oklch(0 0 0 / 0.4);
+  --shadow-lg: 0 20px 60px oklch(0 0 0 / 0.5);
+
+  /* JSON syntax — monochrome, separated by lightness + weight */
+  --json-key: oklch(0.95 0 0);
+  --json-index: oklch(0.6 0 0);
+  --json-string: oklch(0.8 0 0);
+  --json-number: oklch(0.9 0 0);
+  --json-boolean: oklch(0.85 0 0);
+  --json-null: oklch(0.55 0 0);
+  --json-punct: oklch(0.5 0 0);
 }
 
-/* Shared sizing/typography tokens — theme-agnostic */
+/* ── Light ────────────────────────────────────────────────────────── */
+
+[data-theme='light'] {
+  color-scheme: light;
+
+  --color-bg: oklch(1 0 0);
+  --color-bg-outer: oklch(0.94 0 0);
+  --color-surface-inset: oklch(0.95 0 0);
+  --color-surface-header: oklch(0.93 0 0);
+
+  --color-text-primary: oklch(0.15 0 0);
+  --color-text-strong: oklch(0.2 0 0);
+  --color-text-body: oklch(0.2 0 0);
+  --color-text-secondary: oklch(0.3 0 0);
+  --color-text-muted: oklch(0.45 0 0);
+  --color-text-faint: oklch(0.5 0 0);
+
+  --color-border-subtle: oklch(0 0 0 / 0.05);
+  --color-border: oklch(0 0 0 / 0.08);
+  --color-border-card: oklch(0 0 0 / 0.09);
+  --color-border-strong: oklch(0 0 0 / 0.12);
+  --color-border-focus: oklch(0 0 0 / 0.35);
+
+  --color-fill-subtle: oklch(0 0 0 / 0.05);
+  --color-fill: oklch(0 0 0 / 0.08);
+  --color-fill-strong: oklch(0 0 0 / 0.1);
+
+  --color-accent: oklch(0.15 0 0);
+  --color-accent-hover: oklch(0.28 0 0);
+  --color-on-accent: oklch(0.98 0 0);
+  --color-accent-text: oklch(0.15 0 0);
+  --color-accent-soft: oklch(0 0 0 / 0.08);
+
+  --color-toast-bg: oklch(0.15 0 0);
+  --color-toast-text: oklch(0.98 0 0);
+  --color-toast-border: oklch(0 0 0 / 0.12);
+
+  --color-focus: oklch(0.3 0 0);
+
+  --color-danger: oklch(0.5 0.16 25);
+  --color-success: oklch(0.3 0 0);
+
+  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.06);
+  --shadow-md: 0 8px 24px oklch(0 0 0 / 0.18);
+  --shadow-lg: 0 20px 60px oklch(0 0 0 / 0.16);
+
+  --json-key: oklch(0.15 0 0);
+  --json-index: oklch(0.5 0 0);
+  --json-string: oklch(0.35 0 0);
+  --json-number: oklch(0.2 0 0);
+  --json-boolean: oklch(0.28 0 0);
+  --json-null: oklch(0.5 0 0);
+  --json-punct: oklch(0.55 0 0);
+}
+
+/* ── Theme-agnostic scales ────────────────────────────────────────── */
+
 :root {
-  /* Typography */
+  /* Typography. Inter / JetBrains Mono are used when present on the system;
+     the extension ships no webfonts (remote font CDNs are blocked by the
+     MV3 content security policy), so the fallbacks matter. */
   --font-sans:
     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
   --font-mono:
-    'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 
+  --font-size-2xs: 10.5px;
   --font-size-xs: 11px;
-  --font-size-sm: 12px;
-  --font-size-base: 13px;
-  --font-size-md: 14px;
-  --font-size-lg: 16px;
-  --font-size-xl: 18px;
+  --font-size-sm: 11.5px;
+  --font-size-base: 12px;
+  --font-size-mono: 12.5px;
+  --font-size-md: 13px;
+  --font-size-lg: 14px;
+  --font-size-xl: 15px;
 
   --line-height-tight: 1.25;
   --line-height-base: 1.5;
-  --line-height-relaxed: 1.65;
+  --line-height-mono: 1.6;
 
   /* Spacing */
-  --space-1: 4px;
-  --space-2: 6px;
-  --space-3: 8px;
-  --space-4: 12px;
-  --space-5: 16px;
-  --space-6: 20px;
-  --space-7: 24px;
-  --space-8: 32px;
+  --space-1: 2px;
+  --space-2: 4px;
+  --space-3: 6px;
+  --space-4: 8px;
+  --space-5: 10px;
+  --space-6: 12px;
+  --space-7: 14px;
+  --space-8: 16px;
+  --space-9: 18px;
+  --space-10: 20px;
+  --space-11: 24px;
+
+  /* Panel padding rhythm from the handoff */
+  --pad-block: 16px;
+  --pad-inline: 18px;
 
   /* Radii */
-  --radius-sm: 4px;
-  --radius-md: 6px;
+  --radius-sm: 6px;
+  --radius-md: 7px;
   --radius-lg: 8px;
-  --radius-xl: 12px;
-  --radius-full: 9999px;
+  --radius-card: 10px;
+  --radius-panel: 16px;
+  --radius-full: 20px;
 
   /* Interaction */
   --focus-ring-width: 2px;
-  --focus-ring-offset: 2px;
+  --focus-ring-offset: 1px;
   --transition-fast: 120ms ease;
   --transition-base: 180ms ease;
+  --transition-panel: 220ms ease;
 
-  /* Minimum hit target per WCAG 2.2 SC 2.5.8 */
-  --min-target: 28px;
+  /* Minimum hit target (WCAG 2.2 SC 2.5.8) */
+  --min-target: 24px;
 
-  /* Popup dimensions */
-  --popup-width: 440px;
-  --popup-max-height: 600px;
+  /*
+   * Popup dimensions. The handoff specifies 380x640, but Chrome hard-caps
+   * extension popups at 800x600 — a 640px panel would simply be clipped.
+   * The layout is a flex column with a scrolling middle, so 600 is the
+   * faithful rendering of the design within the platform limit.
+   */
+  --popup-width: 380px;
+  --popup-height: 600px;
 }
diff --git a/src/types/index.ts b/src/types/index.ts
index a076bc6..03d6dee 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -22,11 +22,12 @@ export interface QueryParam {
  *
  * When `hashQuery` is true the params come from the hash's query string
  * (hash-router pattern: https://app.com/#/route?param=value).
- * In that case `fragment` holds only the hash path (e.g. "#/route") and
- * serialization appends params after a `?` inside the fragment.
+ * In that case `fragment` holds only the hash path (e.g. "#/route"),
+ * serialization appends params after a `?` inside the fragment, and any real
+ * (pre-`#`) query string is kept verbatim as part of `base` so it isn't lost.
  */
 export interface ParsedUrl {
-  base: string; // origin + pathname, e.g. "https://example.com/api/v1/search"
+  base: string; // URL without query/fragment, e.g. "https://example.com/api/v1/search"
   params: QueryParam[];
   fragment: string; // includes leading "#" or empty string
   hashQuery: boolean; // true when params live inside the hash fragment
@@ -46,7 +47,11 @@ export interface Group {
   createdAt: number;
 }
 
-export type ThemePreference = 'light' | 'dark' | 'system';
+/**
+ * Chosen accent color as a hex string, or `null` for the monochrome default.
+ * The theme itself is not a preference — it always follows the OS.
+ */
+export type AccentColor = string | null;
 
 /** Special state when the active tab's URL is a browser-internal page we can't edit. */
 export type TabLoadState =
diff --git a/vite.config.ts b/vite.config.ts
index 83429aa..a289048 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,4 +1,5 @@
-import { defineConfig } from 'vite';
+// vitest/config's defineConfig is a superset of vite's — it types the `test` key.
+import { defineConfig } from 'vitest/config';
 import react from '@vitejs/plugin-react';
 import { crx } from '@crxjs/vite-plugin';
 import manifest from './manifest.json' with { type: 'json' };