From da61529de6797ac34717acc655b010c54216e435 Mon Sep 17 00:00:00 2001
From: adlee-was-taken <aaron.daniel.lee@gmail.com>
Date: Sat, 2 May 2026 13:32:39 -0400
Subject: [PATCH] style(ext): add .surface-backdrop class

Subtle radial top-glow + 18px grid texture. Used as the backdrop for
the login popup, setup wizard, and fullscreen vault shell.
---
 extension/src/popup/styles.css | 24 ++++++++++++++++++++++++
 extension/src/vault/vault.css  | 24 ++++++++++++++++++++++++
 2 files changed, 48 insertions(+)

diff --git a/extension/src/popup/styles.css b/extension/src/popup/styles.css
index fcb7520..350a6e1 100644
--- a/extension/src/popup/styles.css
+++ b/extension/src/popup/styles.css
@@ -1470,3 +1470,27 @@ textarea {
 .f-notes--mono {
   font-family: ui-monospace, "JetBrains Mono", "SF Mono", monospace !important;
 }
+
+/* Phase 2B: surface backdrop — subtle radial top-glow + grid texture.
+   Apply to body or a top-level wrapper. Children must sit above the ::before. */
+.surface-backdrop {
+  position: relative;
+  background:
+    radial-gradient(ellipse 700px 240px at 50% -40px, rgba(184, 149, 86, 0.05), transparent 65%),
+    linear-gradient(180deg, #11161e 0%, #0a0e14 100%);
+}
+.surface-backdrop::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
+  background-size: 18px 18px;
+  pointer-events: none;
+  z-index: 0;
+}
+.surface-backdrop > * {
+  position: relative;
+  z-index: 1;
+}
diff --git a/extension/src/vault/vault.css b/extension/src/vault/vault.css
index 96f5db1..42a3f46 100644
--- a/extension/src/vault/vault.css
+++ b/extension/src/vault/vault.css
@@ -1500,3 +1500,27 @@ textarea {
 .f-notes--mono {
   font-family: ui-monospace, "JetBrains Mono", "SF Mono", monospace !important;
 }
+
+/* Phase 2B: surface backdrop — subtle radial top-glow + grid texture.
+   Apply to body or a top-level wrapper. Children must sit above the ::before. */
+.surface-backdrop {
+  position: relative;
+  background:
+    radial-gradient(ellipse 700px 240px at 50% -40px, rgba(184, 149, 86, 0.05), transparent 65%),
+    linear-gradient(180deg, #11161e 0%, #0a0e14 100%);
+}
+.surface-backdrop::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
+  background-size: 18px 18px;
+  pointer-events: none;
+  z-index: 0;
+}
+.surface-backdrop > * {
+  position: relative;
+  z-index: 1;
+}