ui(desktop): unify settings cards on bordered chrome (drop shadow-md)

Sweep through settings-scope panels (Account, Billing, Submissions)
and replace card-shaped `shadow-md` with `border border-border` so the
visual language matches `SettingsCard` and the full-screen settings
reference. Net effect: every settings card now reads as a quiet
hairline-bordered group, with the page itself doing the heavy visual
framing.

Sites updated:
- `auth/AuthPanel.tsx` — connected-providers list (3567), empty-state
  CTA card (3579), add-provider clickable row (3600), and the two
  `theme-shell` outer sections (4308, 4315) drop `shadow-card`.
- `billing/BillingSummaryCard.tsx` — section card (133).
- `settings/SubmissionsPanel.tsx` — destructive error card (399);
  swaps to `border border-destructive/24` to keep the warning tone.

Skipped (intentional):
- `auth/AuthPanel.tsx:3763, 4104` — Dialog popups with `shadow-xl`.
  Floating modals; lift is correct for them.
- Workspace surfaces outside settings (PaneCard, AppShell sections,
  dashboard panels, ChatPane, AppSurfacePane). Out of scope; their
  lift is part of the workspace-pane visual language.
- `IntegrationsPane.tsx` standalone path — when mounted in settings
  via `<IntegrationsPane embedded />` the embedded branch already
  bypasses the card-shell wrapper, so settings already render
  shadow-free for integrations. Standalone path stays as-is.

Tests:
- `auth/AuthPanel.test.mjs` brittle assertions updated:
  - `assert.match(source, /shadow-md/)` → `assert.doesNotMatch(...)`
  - empty-state CTA card pattern: `bg-card shadow-md` → `border
    border-border bg-card`
  - setup-loading section pattern: `rounded-[24px] ... shadow-card`
    → `rounded-3xl ...` (also picks up the rounded-3xl scale move
    from #285).
- `npm run desktop:typecheck` clean
- `node --test` 57 pass / 1 pre-existing baseline fail

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: jotyy

desktop/src/components/auth/AuthPanel.test.mjs

@@ -25,7 +25,7 @@ test("billing summary card exposes web-only billing actions", async () => {
   assert.match(source, /Billing managed on web/);
   assert.match(source, />\s*Manage\s*</);
   assert.match(source, /openExternalUrl/);
-  assert.match(source, /shadow-md/);
+  assert.doesNotMatch(source, /shadow-md/);
   assert.doesNotMatch(source, /Available hosted credits/);
   assert.doesNotMatch(source, /Recent usage/);
   assert.doesNotMatch(source, /text-\[[0-9]+px\]/);
@@ -159,7 +159,9 @@ test("runtime auth panel keeps model provider settings compact", async () => {
   );
   assert.match(
     runtimeProviderSettingsBlock,
-    /<div className="flex flex-col items-center justify-center gap-2 rounded-xl bg-card shadow-md px-6 py-8 text-center">/,
+    // Card chrome migrated from `shadow-md` to bordered (matches the
+    // full-screen settings reference's quieter look).
+    /<div className="flex flex-col items-center justify-center gap-2 rounded-xl border border-border bg-card px-6 py-8 text-center">/,
   );
 });
 
@@ -352,7 +354,10 @@ test("account view uses an inline profile header and theme-colored sign-in actio
   assert.match(source, /if \(view === "account"\) \{/);
   assert.match(
     source,
-    /if \(showsSetupLoadingState\) \{\s*return \(\s*<section className="theme-shell w-full max-w-none overflow-hidden rounded-\[24px\] border border-border text-sm text-foreground shadow-card">\s*<div className="px-4 py-5">\s*\{setupLoadingPanel\}\s*<\/div>/,
+    // Card chrome migrated: `rounded-[24px]` → `rounded-3xl` (token
+    // scale) and `shadow-card` dropped (settings adopt border-only
+    // chrome — see SettingsCard).
+    /if \(showsSetupLoadingState\) \{\s*return \(\s*<section className="theme-shell w-full max-w-none overflow-hidden rounded-3xl border border-border text-sm text-foreground">\s*<div className="px-4 py-5">\s*\{setupLoadingPanel\}\s*<\/div>/,
   );
   assert.match(source, /className="flex items-start justify-between gap-3"/);
   assert.match(source, /className="grid h-11 w-11 shrink-0 place-items-center rounded-full border border-primary bg-primary\/10 text-lg font-semibold text-primary"/);

desktop/src/components/auth/AuthPanel.tsx

@@ -3564,7 +3564,7 @@ export function AuthPanel({ view = "full" }: AuthPanelProps) {
         description="Connect the providers you want the agent to be able to use."
       >
         {connectedProviderIds.length > 0 ? (
-          <div className="overflow-hidden rounded-xl bg-card shadow-md">
+          <div className="overflow-hidden rounded-xl border border-border bg-card">
             {connectedProviderIds.map((providerId, index) =>
               renderProviderRow(
                 providerId,
@@ -3576,7 +3576,7 @@ export function AuthPanel({ view = "full" }: AuthPanelProps) {
           // Empty state: card-shaped CTA. Cleaner than a full provider list
           // that's mostly disconnected; mirrors craft-agents-oss's connections
           // empty state.
-          <div className="flex flex-col items-center justify-center gap-2 rounded-xl bg-card shadow-md px-6 py-8 text-center">
+          <div className="flex flex-col items-center justify-center gap-2 rounded-xl border border-border bg-card px-6 py-8 text-center">
             <div className="text-sm font-medium text-foreground">
               No providers connected
             </div>
@@ -3597,7 +3597,7 @@ export function AuthPanel({ view = "full" }: AuthPanelProps) {
               render={
                 <button
                   type="button"
-                  className="group flex w-full items-center justify-between gap-3 rounded-xl bg-card px-3 py-2 shadow-md transition-colors hover:bg-accent"
+                  className="group flex w-full items-center justify-between gap-3 rounded-xl border border-border bg-card px-3 py-2 transition-colors hover:bg-accent"
                 >
                   <span className="flex items-center gap-2 text-sm font-medium text-foreground">
                     <Plus className="size-4 text-muted-foreground" />
@@ -4305,7 +4305,7 @@ export function AuthPanel({ view = "full" }: AuthPanelProps) {
 
   if (showsSetupLoadingState) {
     return (
-      <section className="theme-shell w-full max-w-none overflow-hidden rounded-3xl border border-border text-sm text-foreground shadow-card">
+      <section className="theme-shell w-full max-w-none overflow-hidden rounded-3xl border border-border text-sm text-foreground">
         <div className="px-4 py-5">{setupLoadingPanel}</div>
       </section>
     );

desktop/src/components/billing/BillingSummaryCard.tsx

@@ -130,7 +130,7 @@ export function BillingSummaryCard({
   const timelineLabel = billingTimelineLabel(overview);
 
   return (
-    <section className="overflow-hidden rounded-xl bg-card shadow-md [&>*+*]:border-t [&>*+*]:border-border">
+    <section className="overflow-hidden rounded-xl border border-border bg-card [&>*+*]:border-t [&>*+*]:border-border">
       {/* Header row */}
       <div className="flex items-center justify-between gap-3 px-4 py-3">
         <div className="flex min-w-0 items-center gap-2">

desktop/src/components/settings/SubmissionsPanel.tsx

@@ -394,9 +394,9 @@ export function SubmissionsPanel({ initialFocusedId = null }: SubmissionsPanelPr
   if (error) {
     return (
       <div className="grid gap-6">
-        {/* Destructive variant — stays a custom card since SettingsCard
-            uses bg-card; we want bg-destructive/5 for error tone. */}
-        <div className="overflow-hidden rounded-xl bg-destructive/5 shadow-md">
+        {/* Destructive variant — custom card (SettingsCard hard-codes
+            bg-card; we want bg-destructive/5 for error tone). */}
+        <div className="overflow-hidden rounded-xl border border-destructive/24 bg-destructive/5">
           <div className="flex items-center gap-2.5 px-4 py-3">
             <AlertTriangle className="size-4 shrink-0 text-destructive" />
             <p className="text-sm text-destructive">{error}</p>