diff --git a/apps/web/e2e/import-vault.spec.ts b/apps/web/e2e/import-vault.spec.ts
index 1894fb0..546bc2b 100644
--- a/apps/web/e2e/import-vault.spec.ts
+++ b/apps/web/e2e/import-vault.spec.ts
@@ -63,6 +63,9 @@ test('a pond admin imports an Obsidian vault through the settings dialog', async
   await page.locator('.vault-import__open').click();
   const dialog = page.locator('.vault-import-dialog');
   await expect(dialog).toBeVisible();
+  // #120: the panel must be opaque — --color-surface was undefined and the
+  // whole .modal background silently dropped, letting the page bleed through.
+  await expect(dialog).toHaveCSS('background-color', 'rgb(255, 255, 255)');
 
   await dialog.locator('input[type="file"]').setInputFiles({
     name: 'vault.zip',
diff --git a/apps/web/src/styles/tokens.css b/apps/web/src/styles/tokens.css
index 96b6fcc..ded77ef 100644
--- a/apps/web/src/styles/tokens.css
+++ b/apps/web/src/styles/tokens.css
@@ -17,6 +17,10 @@
   --color-text-muted: #616e7c;
   --color-bg: #ffffff;
   --color-bg-subtle: #f5f7fa;
+  /* Elevated panels (modals, cards) — several rules already referenced this
+   * token with a #fff fallback; the fallback-less ones dropped their
+   * background entirely (#120). */
+  --color-surface: #ffffff;
   --color-border: #d9e2ec;
   --color-accent: #2f6f4f;
   --color-accent-contrast: #ffffff;