diff --git a/src/app/app.e2e.ts b/src/app/app.e2e.ts
index e8fd3c9..bf771dc 100644
--- a/src/app/app.e2e.ts
+++ b/src/app/app.e2e.ts
@@ -67,3 +67,35 @@ test("renders map notices through a single toaster", async ({ page }) => {
 
   await expect(page.locator("[data-sonner-toast]")).toHaveCount(1);
 });
+
+test("preserves compact typography in header and agent controls", async ({ page }) => {
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await page.goto("/");
+
+  const headerControl = page.locator("header.acrylic-navigation button.font-semibold:visible").first();
+  const approvalControl = page.getByRole("button", { name: "权限批准模式" });
+  const suggestion = page.locator("[aria-label=推荐问题] button").first();
+
+  await expect(headerControl).toHaveCSS("font-weight", "600");
+  await expect(approvalControl).toHaveCSS("font-size", "12px");
+  await expect(approvalControl).toHaveCSS("line-height", "16px");
+  await expect(suggestion).toHaveCSS("font-size", "12px");
+  await expect(suggestion).toHaveCSS("font-weight", "500");
+});
+
+test("lets interactive utilities override surface materials", async ({ page }) => {
+  await page.goto("/");
+  await page.addStyleTag({ content: "*,*::before,*::after{transition:none!important}" });
+
+  const suggestion = page.locator("[aria-label=推荐问题] button").first();
+  const restingBackground = await suggestion.evaluate(
+    (element) => window.getComputedStyle(element).backgroundColor
+  );
+
+  await suggestion.hover();
+
+  const hoverBackground = await suggestion.evaluate(
+    (element) => window.getComputedStyle(element).backgroundColor
+  );
+  expect(hoverBackground).not.toBe(restingBackground);
+});
diff --git a/src/styles.css b/src/styles.css
index 36285fb..c1dc96e 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -175,11 +175,6 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-button,
-input {
-  font: inherit;
-}
-
 button:focus-visible,
 input:focus-visible {
   outline: 2px solid #0f172a;
@@ -202,10 +197,6 @@ input:focus-visible {
 .acrylic-navigation,
 .acrylic-panel,
 .acrylic-control,
-.surface-dock,
-.surface-control,
-.surface-well,
-.surface-reading,
 .glass-transient,
 .material-tone-info,
 .material-tone-normal,
@@ -257,10 +248,20 @@ input:focus-visible {
   -webkit-backdrop-filter: blur(var(--acrylic-control-blur)) saturate(var(--acrylic-backdrop-saturation));
 }
 
-.surface-dock { background-color: var(--surface-dock); }
-.surface-control { background-color: var(--surface-control); }
-.surface-well { background-color: var(--surface-well); }
-.surface-reading { background-color: var(--surface-reading); }
+@layer components {
+  .surface-dock,
+  .surface-control,
+  .surface-well,
+  .surface-reading {
+    border-color: var(--surface-border);
+    background-clip: padding-box;
+  }
+
+  .surface-dock { background-color: var(--surface-dock); }
+  .surface-control { background-color: var(--surface-control); }
+  .surface-well { background-color: var(--surface-well); }
+  .surface-reading { background-color: var(--surface-reading); }
+}
 
 .glass-transient {
   background-color: var(--glass-transient);