diff --git a/client/src/components/lanes/LaneChangesPanel.tsx b/client/src/components/lanes/LaneChangesPanel.tsx
index 032d1638..9e4c495f 100644
--- a/client/src/components/lanes/LaneChangesPanel.tsx
+++ b/client/src/components/lanes/LaneChangesPanel.tsx
@@ -984,7 +984,7 @@ export function LaneChangesPanel({
     <div data-testid="lane-changes-browse">
       {/* Pinned: the finder is what you reach for after scrolling a
                 long tree, not only from its top. */}
-      <div className="sticky top-0 z-10 flex items-center gap-1.5 bg-surface-3 pb-2">
+      <div className="sticky top-0 z-10 flex items-center gap-1.5 bg-surface-0 pb-2">
         <input
           value={query}
           onChange={(e) => setQuery(e.target.value)}
@@ -1320,7 +1320,7 @@ export function LaneChangesPanel({
               {(stagedCount > 0 || toStage.length > 0) && (
                 <div
                   data-testid="lane-changes-actions"
-                  className="sticky top-0 z-10 mb-1.5 flex items-center gap-1.5 border-b border-border-light bg-surface-3 pb-2"
+                  className="sticky top-0 z-10 mb-1.5 flex items-center gap-1.5 border-b border-border-light bg-surface-0 pb-2"
                 >
                   {/* ONE row: message, commit, then the two bulk index moves. */}
                   {stagedCount > 0 && (
diff --git a/client/src/components/lanes/LaneGitHeader.tsx b/client/src/components/lanes/LaneGitHeader.tsx
index 4d133a70..3543ee9e 100644
--- a/client/src/components/lanes/LaneGitHeader.tsx
+++ b/client/src/components/lanes/LaneGitHeader.tsx
@@ -276,10 +276,7 @@ export function LaneGitHeader({
     </>
   );
   return (
-    <div
-      data-testid="lane-git-header"
-      className="mb-2 rounded-md border border-border bg-surface-2 px-2 py-1"
-    >
+    <div data-testid="lane-git-header" className="mb-2 border-b border-border pb-1.5">
       <LaneGitBar
         laneId={laneId}
         session={session}
diff --git a/client/src/components/lanes/SessionReplay.tsx b/client/src/components/lanes/SessionReplay.tsx
index 6227a002..d3be5668 100644
--- a/client/src/components/lanes/SessionReplay.tsx
+++ b/client/src/components/lanes/SessionReplay.tsx
@@ -86,7 +86,7 @@ export function SessionReplay({
       <div className="min-h-0 flex-1 overflow-hidden">
         <ConversationView sessionId={sessionId} />
       </div>
-      <div className="rounded-2xl border border-border bg-surface-1 p-2 shadow-sm transition-colors focus-within:border-accent/50">
+      <div className="rounded-2xl border border-border p-2 transition-colors focus-within:border-accent/50">
         <PromptEditor
           bare
           images={images}
diff --git a/client/src/lib/__tests__/terminalTheme.test.ts b/client/src/lib/__tests__/terminalTheme.test.ts
index e7316e83..399d82c5 100644
--- a/client/src/lib/__tests__/terminalTheme.test.ts
+++ b/client/src/lib/__tests__/terminalTheme.test.ts
@@ -24,9 +24,9 @@ const vars: Record<string, string> = {
 describe("buildTerminalTheme", () => {
   it("maps theme tokens onto the xterm palette", () => {
     const t = buildTerminalTheme((n) => vars[n] ?? "");
-    // The card's colour, so the terminal blends into the card it sits on.
-    expect(t.background).toBe("#272a2d");
-    expect(t.cursorAccent).toBe("#272a2d");
+    // The page's colour: the console sits on the page, with no card or frame.
+    expect(t.background).toBe("#111113");
+    expect(t.cursorAccent).toBe("#111113");
     expect(t.foreground).toBe("#edeef0");
     expect(t.cursor).toBe("#edeef0");
     expect(t.selectionBackground).toBe("#43484e");
@@ -60,7 +60,7 @@ describe("buildTerminalTheme", () => {
 describe("terminalThemeFor", () => {
   it("resolves variables on a dark probe scoped to the theme id, then removes it", () => {
     const style = document.createElement("style");
-    style.textContent = `.dark { --surface-3: 1 2 3; } .dark[data-theme="darcula"] { --surface-3: 30 31 32; }`;
+    style.textContent = `.dark { --surface-0: 1 2 3; } .dark[data-theme="darcula"] { --surface-0: 30 31 32; }`;
     document.head.appendChild(style);
     try {
       expect(terminalThemeFor("default").background).toBe("#010203");
diff --git a/client/src/lib/terminalTheme.ts b/client/src/lib/terminalTheme.ts
index 2ac26284..8a6935ad 100644
--- a/client/src/lib/terminalTheme.ts
+++ b/client/src/lib/terminalTheme.ts
@@ -54,11 +54,11 @@ export function buildTerminalTheme(read: VarReader): ITheme {
   const magenta = "#c678dd";
   const cyan = "#56b6c2";
   return {
-    // The `.card` colour: the console sits on a card, with no frame between.
-    background: v("--surface-3"),
+    // The page's colour: the console sits on the page, with no card or frame.
+    background: v("--surface-0"),
     foreground: v("--fg-primary"),
     cursor: v("--fg-primary"),
-    cursorAccent: v("--surface-3"),
+    cursorAccent: v("--surface-0"),
     selectionBackground: v("--border-light"),
     black: v("--border-light"),
     red,
diff --git a/client/src/pages/Workspace.tsx b/client/src/pages/Workspace.tsx
index d05abcb5..63019989 100644
--- a/client/src/pages/Workspace.tsx
+++ b/client/src/pages/Workspace.tsx
@@ -621,7 +621,7 @@ export function Workspace() {
         <div className={`flex min-h-0 flex-1 gap-4${home ? " hidden" : ""}`}>
           <section
             data-testid="lane-detail"
-            className={`flex min-h-0 min-w-0 flex-1 flex-col ${currentLane ? "card p-4" : ""}${
+            className={`flex min-h-0 min-w-0 flex-1 flex-col${
               currentLane && changesOpen && changesSize === "full" ? " hidden" : ""
             }`}
           >
@@ -795,7 +795,9 @@ export function Workspace() {
               <aside
                 id="lane-changes-panel"
                 data-testid="lane-changes-card"
-                className={`card flex shrink-0 flex-col p-3 ${CHANGES_WIDTH[changesSize]}`}
+                className={`flex shrink-0 flex-col ${CHANGES_WIDTH[changesSize]}${
+                  changesSize === "full" ? "" : " border-l border-border pl-4"
+                }`}
               >
                 {/* Activity bar: Files · Changes · Sessions, then the resize control. */}
                 <div className="mb-2 flex items-center gap-1" role="toolbar">
@@ -891,7 +893,7 @@ export function Workspace() {
                 aria-controls="lane-changes-panel"
                 aria-label={tLanes("changes.expand")}
                 title={tLanes("changes.expand")}
-                className="card flex w-9 shrink-0 flex-col items-center gap-2 py-3 text-fg-muted transition-colors hover:text-fg-primary"
+                className="flex w-9 shrink-0 flex-col items-center gap-2 border-l border-border py-3 text-fg-muted transition-colors hover:text-fg-primary"
               >
                 <PanelLeftClose className="h-4 w-4" />
                 <span className="text-[10px] uppercase tracking-wide [writing-mode:vertical-rl]">
diff --git a/client/src/pages/__tests__/__snapshots__/screens.snapshot.test.tsx.snap b/client/src/pages/__tests__/__snapshots__/screens.snapshot.test.tsx.snap
index 814abc87..33e12ecb 100644
--- a/client/src/pages/__tests__/__snapshots__/screens.snapshot.test.tsx.snap
+++ b/client/src/pages/__tests__/__snapshots__/screens.snapshot.test.tsx.snap
@@ -5400,7 +5400,7 @@ exports[`screen snapshots > Run 1`] = `
         class="flex min-h-0 flex-1 gap-4"
       >
         <section
-          class="flex min-h-0 min-w-0 flex-1 flex-col "
+          class="flex min-h-0 min-w-0 flex-1 flex-col"
           data-testid="lane-detail"
         >
           <div