feat(ui): refine gem-blue acrylic palette and focus borders

Derive the gem-blue palette with OKLCH tonal and complementary-color
rules while preserving acrylic opacity, blur and surface hierarchy.

Darker focus tokens exposed stacked field rings, fallback outlines and
persistent basemap selection rings. Keep fallback focus styles in the
base layer and use one themed field boundary or inset card stroke.
Preserve keyboard focus, invalid states and native input semantics.

Add browser regression coverage for pointer and keyboard focus, all
basemap presentations, narrow layouts and rendered contrast.

Validation in an isolated checkout: pnpm lint, pnpm typecheck,
pnpm test (393 tests), focused browser suites and pnpm build.

src/features/workbench/peripheral-sample/managed-test-resources.tsx

@@ -219,7 +219,7 @@ function WorkOrders({ orders, canWrite, busy, mutate, client, onAgentTrigger }:
   });
 
   const canSave = canWrite && !busy && title.trim() && summary.trim();
-  const editorInputClassName = "mt-1 h-9 rounded-lg border-slate-200 bg-white focus-visible:outline-0! focus-visible:ring-2 focus-visible:ring-[var(--action-focus-ring)]";
+  const editorInputClassName = "mt-1 h-9 rounded-lg border-[var(--surface-divider)] bg-[var(--surface-reading)]";
 
   const orderEditor = editorOpen ? (
     <section

src/features/workbench/peripheral-sample/peripheral-sample-panel.tsx

@@ -4,6 +4,7 @@ import type { AccessTokenProvider } from "@/shared/auth/keycloak-auth";
 import { Button } from "@/shared/ui/button";
 import { cn } from "@/shared/ui/cn";
 import { Disclosure } from "@/shared/ui/disclosure";
+import { Input } from "@/shared/ui/input";
 import { ManagedTestResources } from "./managed-test-resources";
 import { WorkbenchNotice } from "../components/workbench-panel-ui";
 import {
@@ -100,12 +101,12 @@ export function PeripheralSamplePanel({ open, onClose, getAccessToken, onAgentTr
                 结果未知时只查询原请求，不会重复创建或更新工单。
               </p>
               <div className="flex gap-2 pb-3">
-                <input
+                <Input
                   aria-label="提交请求号"
                   value={receiptRequestId}
                   onChange={(event) => setReceiptRequestId(event.target.value.trim())}
                   placeholder="request_id"
-                  className="h-10 min-w-0 flex-1 rounded-lg border border-slate-200 bg-white px-3 font-mono text-xs focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[var(--action-focus-ring)]"
+                  className="h-10 min-w-0 flex-1 rounded-lg border-[var(--surface-divider)] bg-[var(--surface-reading)] font-mono text-xs md:text-xs"
                 />
                 <Button
                   variant="outline"