fix: confluence autocomplete editable + consistent styling

- Remove value prop from SymbolAutocomplete (was making input read-only)
- Use inputClassName with app design tokens (bg-surface-sunken, border-line,
  rounded-lg) to match SymbolHeader and other pages
- Make symbol input, watchlist input, and rack select all use same
  border/radius/padding/font-size tokens
- Both panels now consistent with each other and the rest of the app

app/src/components/ConfluencePanel.tsx

@@ -118,22 +118,24 @@ export function ConfluencePanel() {
 
       {/* Header */}
       <div className="flex flex-wrap items-end gap-4">
-        <div className="w-48">
+        <div>
           <label className="block text-xs text-fg-muted mb-1">Symbol</label>
+          <div className="relative w-48">
             <SymbolAutocomplete
               onPick={pickSymbol}
               onSubmitRaw={(raw) => pickSymbol(raw.toUpperCase())}
-            value={symbol}
               placeholder="Search symbol…"
               ariaLabel="Select symbol for slot picture"
+              inputClassName="w-full bg-surface-sunken border border-line rounded-lg px-3 py-1.5 text-xs text-fg placeholder:text-fg-muted focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent"
             />
           </div>
+        </div>
         <div>
           <label className="block text-xs text-fg-muted mb-1">Rack</label>
           <select
             value={rackId ?? ''}
             onChange={(e) => setSelectedRackId(e.target.value || null)}
-            className="rounded bg-bg-secondary border border-fg-muted/20 px-2 py-1.5 text-sm text-fg min-w-[180px]"
+            className="rounded-lg bg-surface-sunken border border-line px-3 py-1.5 text-xs text-fg min-w-[180px] focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent"
           >
             {racks.system.map((r) => (
               <option key={r.id} value={r.id}>{r.name}</option>

app/src/components/CorridorPanel.tsx

@@ -176,16 +176,18 @@ export function CorridorPanel() {
 
       {/* Header: symbol + watchlist */}
       <div className="flex flex-wrap items-end gap-4">
-        <div className="w-48">
+        <div>
           <label className="block text-xs text-fg-muted mb-1">Symbol</label>
+          <div className="relative w-48">
             <SymbolAutocomplete
               onPick={pickSymbol}
               onSubmitRaw={(raw) => pickSymbol(raw.toUpperCase())}
-            value={symbol}
               placeholder="Search symbol…"
               ariaLabel="Select symbol for corridor"
+              inputClassName="w-full bg-surface-sunken border border-line rounded-lg px-3 py-1.5 text-xs text-fg placeholder:text-fg-muted focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent"
             />
           </div>
+        </div>
         <div>
           <label className="block text-xs text-fg-muted mb-1">Watchlist</label>
           <div className="flex items-center gap-2">
@@ -194,13 +196,13 @@ export function CorridorPanel() {
               value={addInput}
               onChange={(e) => setAddInput(e.target.value.toUpperCase().trim())}
               placeholder="TICKER"
-              className="w-28 rounded bg-bg-secondary border border-fg-muted/20 px-2 py-1.5 text-sm text-fg"
+              className="w-28 rounded-lg bg-surface-sunken border border-line px-3 py-1.5 text-xs text-fg placeholder:text-fg-muted focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent"
               maxLength={12}
               onKeyDown={(e) => { if (e.key === 'Enter') addToWatchlist(); }}
             />
             <button
               onClick={addToWatchlist}
-              className="rounded bg-bg-secondary border border-fg-muted/30 px-3 py-1.5 text-xs text-fg hover:border-fg-muted/60"
+              className="rounded-lg bg-surface-sunken border border-line px-3 py-1.5 text-xs text-fg hover:border-accent transition-colors"
             >
               Add
             </button>