...`. Update each to:
+
+```typescript
+return `
+
+
...
+ ...
+
+`;
+```
+
+Apply this to `renderStep0`, `renderStep1`, `renderStep2`, `renderStep3New`, `renderStep3Attach`, `renderStep4`, `renderStep5`. The `wizard-step glass` combination preserves any existing `.wizard-step` rules while adding the glass treatment.
+
+- [ ] **Step 4: Update mode-card style to use glass class**
+
+In `renderStep0`, the mode cards use `
`. Add `glass` to the class list:
+
+```typescript
+
+```
+
+- [ ] **Step 5: Add `▸` glyph to all "next" buttons**
+
+Import `GLYPH_NEXT` at the top of `setup.ts`:
+
+```typescript
+import { GLYPH_NEXT } from '../shared/glyphs';
+```
+
+Update each "next" button (lines 239, 445, 546, 921) to include the glyph after the label. Use `btn-primary` instead of `btn btn-primary`:
+
+```typescript
+// Line 239:
+next ${GLYPH_NEXT}
+
+// Line 445:
+next ${GLYPH_NEXT}
+
+// Line 546:
+next ${GLYPH_NEXT}
+
+// Line 921 (continue button — also gets the glyph):
+continue ${GLYPH_NEXT}
+```
+
+For `attach-btn` (~line 301) and `create-btn` (~line 696), keep them as `btn-primary` but no arrow glyph (those are commit-action buttons, not "next"-style).
+
+- [ ] **Step 6: Build and visually verify in Chrome**
+
+```bash
+cd extension && npm run build 2>&1 | tail -3
+```
+
+Open the extension's setup page (or load the dist into Chrome) to confirm rendering. This is a manual visual check — there isn't an existing test harness for setup.ts views.
+
+- [ ] **Step 7: Run vitest to confirm nothing regressed**
+
+```bash
+cd extension && npx vitest run
+```
+
+Expected: all existing tests pass.
+
+- [ ] **Step 8: Commit**
+
+```bash
+git add extension/src/setup/setup.ts
+git commit -m "$(cat <<'EOF'
+feat(ext/setup): apply polish vocabulary to setup wizard
+
+- Wraps setup content in .surface-backdrop
+- Each wizard step gets a .glass card
+- Mode-picker cards become glass cards
+- 'next' / 'continue' buttons get the ▸ glyph
+- Migrate from .btn .btn-primary to the new .btn-primary class
+EOF
+)"
+```
+
+---
+
+## Task 9: Apply backdrop to fullscreen vault shell
+
+**Files:**
+- Modify: `extension/src/vault/vault.html`
+- Modify: `extension/src/vault/vault.ts`
+
+- [ ] **Step 1: Apply `.surface-backdrop` to body in vault.html**
+
+In `extension/src/vault/vault.html`, change `` to:
+
+```html
+
+```
+
+- [ ] **Step 2: Build and check the existing layout still works**
+
+```bash
+cd extension && npm run build 2>&1 | tail -3
+```
+
+The existing vault layout has its own panes / sidebar; the backdrop sits behind everything via the `::before` pseudo-element.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add extension/src/vault/vault.html
+git commit -m "$(cat <<'EOF'
+style(ext/vault): apply .surface-backdrop to fullscreen body
+
+Subtle radial top-glow + grid texture behind the existing vault shell.
+No layout changes — existing panes sit above the backdrop's ::before.
+EOF
+)"
+```
+
+---
+
+## Task 10: Add `surface` flag to renderForm and per-surface column wrapping
+
+**Files:**
+- Modify: `extension/src/popup/components/types/login.ts:238`
+- Modify: `extension/src/popup/popup.ts` (callers of renderForm)
+- Modify: `extension/src/vault/vault.ts` (callers of renderForm)
+- Test: `extension/src/popup/components/types/__tests__/login.test.ts`
+
+- [ ] **Step 1: Read the current renderForm signature**
+
+```bash
+grep -n "renderForm" extension/src/popup/components/types/login.ts | head -10
+```
+
+The current signature at line 238 is:
+
+```typescript
+export function renderForm(app: HTMLElement, mode: 'add' | 'edit', existing: Item | null): void
+```
+
+- [ ] **Step 2: Write the surface-flag test**
+
+In `extension/src/popup/components/types/__tests__/login.test.ts`, add a test:
+
+```typescript
+describe('renderForm surface flag', () => {
+ let app: HTMLElement;
+ beforeEach(() => {
+ document.body.innerHTML = '
';
+ app = document.getElementById('app')!;
+ // ... existing test setup mocks should already be in place above
+ });
+
+ it('renders single-column when surface is "popup" (default)', () => {
+ renderForm(app, 'add', null);
+ expect(app.querySelector('.form-grid')).toBeNull();
+ });
+
+ it('renders two-column .form-grid wrapper when surface is "fullscreen"', () => {
+ renderForm(app, 'add', null, { surface: 'fullscreen' });
+ const grid = app.querySelector('.form-grid');
+ expect(grid).toBeTruthy();
+ expect(grid!.querySelector('[data-form-section="identity"]')).toBeTruthy();
+ expect(grid!.querySelector('[data-form-section="credentials"]')).toBeTruthy();
+ });
+});
+```
+
+- [ ] **Step 3: Run test to verify it fails**
+
+```bash
+cd extension && npx vitest run src/popup/components/types/__tests__/login.test.ts -t "surface flag"
+```
+
+Expected: FAIL — type error on `{ surface }` arg.
+
+- [ ] **Step 4: Update renderForm signature with optional surface flag**
+
+In `extension/src/popup/components/types/login.ts:238`, change the signature:
+
+```typescript
+export interface RenderFormOptions {
+ surface?: 'popup' | 'fullscreen';
+}
+
+export function renderForm(
+ app: HTMLElement,
+ mode: 'add' | 'edit',
+ existing: Item | null,
+ opts: RenderFormOptions = {}
+): void {
+ const surface = opts.surface ?? 'popup';
+ // ... existing function body, with section wrapping below
+```
+
+- [ ] **Step 5: Wrap Identity / Credentials sections**
+
+Inside `renderForm`, locate the existing form-fields render block (search for the `>` etc. are placeholders for whatever the existing code generates for that field — leave that code unchanged, just relocate it inside the new wrappers:
+
+```typescript
+const identityHtml = `
+ <div data-form-section="identity" class="${surface === 'fullscreen' ? 'glass form-col' : ''}">
+ ${surface === 'fullscreen' ? '<div class="col-header">Identity</div>' : ''}
+ <<title field render>>
+ <<url field render>>
+ <<group field render>>
+ </div>
+`;
+
+const credentialsHtml = `
+ <div data-form-section="credentials" class="${surface === 'fullscreen' ? 'glass form-col' : ''}">
+ ${surface === 'fullscreen' ? '<div class="col-header">Credentials</div>' : ''}
+ <<username field render>>
+ <<password field render>>
+ <<totp field render>>
+ </div>
+`;
+
+const sectionsHtml = surface === 'fullscreen'
+ ? `<div class="form-grid">${identityHtml}${credentialsHtml}</div>`
+ : `${identityHtml}${credentialsHtml}`;
+```
+
+The notes / custom-sections / attachments blocks must remain *outside* the grid — they should sit below the column wrapper as full-width siblings, regardless of surface.
+
+- [ ] **Step 6: Add `.form-grid`, `.form-col`, `.col-header` to vault.css**
+
+Append to `extension/src/vault/vault.css`:
+
+```css
+.form-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 24px;
+ max-width: 960px;
+ margin: 0 auto;
+}
+@media (max-width: 720px) {
+ .form-grid { grid-template-columns: 1fr; }
+}
+.form-col {
+ padding: 14px 16px;
+}
+.col-header {
+ text-transform: uppercase;
+ letter-spacing: 1.2px;
+ font-weight: 500;
+ color: var(--text-muted);
+ font-size: 10px;
+ border-bottom: 1px solid var(--border-mid);
+ padding-bottom: 6px;
+ margin-bottom: 12px;
+}
+```
+
+- [ ] **Step 7: Update the vault.ts caller to pass `surface: 'fullscreen'`**
+
+```bash
+grep -n "renderForm" extension/src/vault/vault.ts
+```
+
+For each call site in vault.ts, add the surface flag:
+
+```typescript
+renderForm(app, mode, existing, { surface: 'fullscreen' });
+```
+
+The popup.ts callers stay unchanged (default `'popup'`).
+
+- [ ] **Step 8: Run tests**
+
+```bash
+cd extension && npx vitest run src/popup/components/types/__tests__/login.test.ts
+```
+
+Expected: PASS.
+
+- [ ] **Step 9: Commit**
+
+```bash
+git add extension/src/popup/components/types/login.ts extension/src/popup/components/types/__tests__/login.test.ts extension/src/vault/vault.ts extension/src/vault/vault.css
+git commit -m "$(cat <<'EOF'
+feat(ext/login): add surface flag for two-column fullscreen form
+
+renderForm() takes an optional { surface: 'popup' | 'fullscreen' }
+parameter. When 'fullscreen', the Identity and Credentials field
+groups render as glass cards inside a .form-grid (two columns,
+stacks at <=720px). Popup keeps its single-column layout.
+EOF
+)"
+```
+
+---
+
+## Task 11: Add sticky save bar in fullscreen forms
+
+**Files:**
+- Modify: `extension/src/vault/vault.css` (append)
+- Modify: `extension/src/vault/vault.ts` (form rendering wrapper)
+
+- [ ] **Step 1: Append sticky save bar CSS to vault.css**
+
+```css
+.form-pane {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ overflow: hidden;
+}
+.form-scroll {
+ flex: 1;
+ overflow-y: auto;
+ padding: 20px 24px;
+}
+.sticky-save-bar {
+ position: sticky;
+ bottom: 0;
+ background: rgba(17, 22, 30, 0.7);
+ backdrop-filter: blur(6px);
+ -webkit-backdrop-filter: blur(6px);
+ border-top: 1px solid var(--border-mid);
+ padding: 12px 24px;
+ display: flex;
+ justify-content: flex-end;
+ gap: 8px;
+ z-index: 10;
+}
+.sticky-save-bar::before {
+ content: '';
+ position: absolute;
+ top: -24px;
+ left: 0;
+ right: 0;
+ height: 24px;
+ background: linear-gradient(to top, rgba(17, 22, 30, 0.7), transparent);
+ pointer-events: none;
+}
+```
+
+- [ ] **Step 2: Wrap fullscreen form rendering with `.form-pane` + `.sticky-save-bar`**
+
+In `extension/src/vault/vault.ts`, wherever the form is rendered (look for the call to `renderForm`), wrap with the pane structure:
+
+```typescript
+function renderFormWrapped(app: HTMLElement, mode: 'add' | 'edit', existing: Item | null) {
+ const wrapper = document.createElement('div');
+ wrapper.className = 'form-pane';
+ wrapper.innerHTML = `
+ <div class="form-scroll" id="form-scroll"></div>
+ <div class="sticky-save-bar">
+ <button class="btn-secondary" id="form-cancel">cancel</button>
+ <button class="btn-primary" id="form-save">save</button>
+ </div>
+ `;
+ app.replaceChildren(wrapper);
+
+ const scrollEl = wrapper.querySelector('#form-scroll') as HTMLElement;
+ renderForm(scrollEl, mode, existing, { surface: 'fullscreen' });
+
+ wrapper.querySelector('#form-cancel')?.addEventListener('click', () => {
+ // dispatch existing cancel handler — wire up to existing flow
+ document.getElementById('form-cancel-existing')?.click();
+ });
+ wrapper.querySelector('#form-save')?.addEventListener('click', () => {
+ document.getElementById('form-save-existing')?.click();
+ });
+}
+```
+
+The exact wiring depends on how the existing form save/cancel buttons are structured. The save bar buttons should trigger the same handlers — easiest path is to make the existing form's save/cancel buttons hidden when `surface === 'fullscreen'` and let the sticky bar trigger them.
+
+A cleaner alternative: have `renderForm` accept a flag to skip rendering its own action buttons when the wrapper is providing them. Add to `RenderFormOptions`:
+
+```typescript
+export interface RenderFormOptions {
+ surface?: 'popup' | 'fullscreen';
+ /** When true, renderForm skips its own save/cancel buttons (caller provides them in a sticky bar). */
+ externalActions?: boolean;
+}
+```
+
+And inside renderForm, gate the existing save/cancel button render on `!opts.externalActions`. Then the sticky bar buttons can call the existing save/cancel functions directly (export them from `login.ts` if necessary).
+
+- [ ] **Step 3: Build to verify CSS / TS compile**
+
+```bash
+cd extension && npm run build 2>&1 | tail -3
+```
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add extension/src/vault/vault.css extension/src/vault/vault.ts extension/src/popup/components/types/login.ts
+git commit -m "$(cat <<'EOF'
+feat(ext/vault): sticky save bar in fullscreen forms
+
+The form pane gets a flex column layout: scrollable content above,
+sticky save bar at bottom. Bar uses translucent fill with backdrop-blur
+and a 24px gradient fade so content scrolls under it. Save / cancel
+buttons reuse the form's existing handlers via externalActions flag.
+EOF
+)"
+```
+
+---
+
+## Task 12: Header treatment with dirty-state subtitle
+
+**Files:**
+- Modify: `extension/src/vault/vault.css` (append)
+- Modify: `extension/src/vault/vault.ts`
+
+- [ ] **Step 1: Append form header styles to vault.css**
+
+```css
+.fullscreen-form-header {
+ padding: 14px 24px;
+ border-bottom: 1px solid var(--border-mid);
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+}
+.fullscreen-form-header .title {
+ font-size: 16px;
+ font-weight: 500;
+ color: var(--text);
+}
+.fullscreen-form-header .sub {
+ font-size: 11px;
+ color: var(--text-muted);
+ margin-top: 2px;
+}
+.fullscreen-form-header .hint {
+ font-size: 11px;
+ color: var(--text-dim);
+}
+```
+
+- [ ] **Step 2: Detect platform for keyboard hint label**
+
+Add a small helper near the top of `vault.ts`:
+
+```typescript
+const isMac = navigator.platform.toLowerCase().includes('mac');
+const SAVE_HINT = isMac ? '⌘+S to save' : 'Ctrl+S to save';
+```
+
+- [ ] **Step 3: Render the header above `.form-pane`**
+
+Update `renderFormWrapped` from Task 11 to include the header:
+
+```typescript
+function renderFormWrapped(app: HTMLElement, mode: 'add' | 'edit', existing: Item | null) {
+ const titleText = mode === 'add' ? 'new login' : 'edit login';
+ const wrapper = document.createElement('div');
+ wrapper.className = 'form-pane';
+ wrapper.innerHTML = `
+ <div class="fullscreen-form-header">
+ <div>
+ <div class="title">${titleText}</div>
+ <div class="sub" id="form-dirty-sub">no changes</div>
+ </div>
+ <div class="hint">${SAVE_HINT}</div>
+ </div>
+ <div class="form-scroll" id="form-scroll"></div>
+ <div class="sticky-save-bar">
+ <button class="btn-secondary" id="form-cancel">cancel</button>
+ <button class="btn-primary" id="form-save">save</button>
+ </div>
+ `;
+ app.replaceChildren(wrapper);
+ // ... rest of wiring from Task 11
+}
+```
+
+- [ ] **Step 4: Wire dirty-state subscription**
+
+Add a small dirty-tracker that listens for `input`/`change` events on the form scroll element. When any input fires, set the subtitle to "unsaved · esc to cancel"; on save/cancel, reset to "no changes":
+
+```typescript
+const scrollEl = wrapper.querySelector('#form-scroll') as HTMLElement;
+const subEl = wrapper.querySelector('#form-dirty-sub') as HTMLElement;
+let isDirty = false;
+const markDirty = () => {
+ if (isDirty) return;
+ isDirty = true;
+ subEl.textContent = 'unsaved · esc to cancel';
+};
+const markClean = () => {
+ isDirty = false;
+ subEl.textContent = 'no changes';
+};
+scrollEl.addEventListener('input', markDirty, true);
+scrollEl.addEventListener('change', markDirty, true);
+
+wrapper.querySelector('#form-cancel')?.addEventListener('click', () => {
+ markClean();
+ // ... existing cancel logic
+});
+wrapper.querySelector('#form-save')?.addEventListener('click', () => {
+ markClean();
+ // ... existing save logic
+});
+```
+
+- [ ] **Step 5: Write a happy-dom test for the dirty subtitle**
+
+In `extension/src/vault/__tests__/`, create or extend a test file:
+
+```typescript
+import { describe, it, expect, beforeEach } from 'vitest';
+
+// Pseudo-test — the actual test mounts renderFormWrapped with real wiring.
+// If renderFormWrapped is unexported, export it from vault.ts for testing.
+
+describe('fullscreen form dirty subtitle', () => {
+ let app: HTMLElement;
+ beforeEach(() => {
+ document.body.innerHTML = '<div id="app"></div>';
+ app = document.getElementById('app')!;
+ });
+
+ it('starts pristine and switches to dirty on first input', () => {
+ // Mount renderFormWrapped(app, 'add', null);
+ // const sub = app.querySelector('#form-dirty-sub')!;
+ // expect(sub.textContent).toBe('no changes');
+ // const titleInput = app.querySelector('input[type=text]') as HTMLInputElement;
+ // titleInput.value = 'x';
+ // titleInput.dispatchEvent(new Event('input', { bubbles: true }));
+ // expect(sub.textContent).toContain('unsaved');
+ });
+});
+```
+
+If `renderFormWrapped` is internal, expose it via `__test__` export gated on test env:
+
+```typescript
+// vault.ts
+export const __test__ = { renderFormWrapped };
+```
+
+- [ ] **Step 6: Build to verify**
+
+```bash
+cd extension && npm run build 2>&1 | tail -3
+```
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add extension/src/vault/vault.css extension/src/vault/vault.ts extension/src/vault/__tests__/
+git commit -m "$(cat <<'EOF'
+feat(ext/vault): fullscreen form header with dirty-state subtitle
+
+Title left ('new login' / 'edit login'), subtitle below cycles between
+'no changes' and 'unsaved · esc to cancel' on input events. Right side
+shows the platform-aware save hint ('⌘+S to save' / 'Ctrl+S to save').
+The actual ⌘+S keymap arrives in Phase 3 — this is a visual hint only.
+EOF
+)"
+```
+
+---
+
+## Task 13: Final verification
+
+- [ ] **Step 1: Run full test suite**
+
+```bash
+cd extension && npx vitest run
+```
+
+Expected: all tests pass. If any test fails, fix and recommit before proceeding.
+
+- [ ] **Step 2: Build for production (Chrome + Firefox)**
+
+```bash
+cd extension && npm run build:all
+```
+
+Expected: webpack compiles both targets with no errors (only the existing 4MB WASM warning).
+
+- [ ] **Step 3: Verify rebuilt extension manifest**
+
+```bash
+grep '"name"' extension/dist/manifest.json extension/dist-firefox/manifest.json
+```
+
+Expected: both show `"name": "Relicario"`.
+
+- [ ] **Step 4: Manual smoke test (load unpacked dist into Chrome)**
+
+Open `chrome://extensions`, enable Developer Mode, "Load unpacked" → `extension/dist/`. Verify:
+
+- Click the extension icon: popup opens, shows logo lockup, glass card with passphrase input, primary "unlock vault" button, secondary buttons below.
+- Open the setup wizard (e.g., via `extension/dist/setup.html`): each step renders inside a glass card, "next" buttons show `▸` glyph.
+- Open the fullscreen vault (extension menu → "Open Relicario vault"): backdrop visible behind the existing pane layout.
+- Add a new login item: form renders two-column with Identity and Credentials cards, sticky save bar at bottom, header subtitle changes from "no changes" to "unsaved · esc to cancel" on first input.
+
+- [ ] **Step 5: Commit verification log if anything was missed**
+
+If the smoke test reveals follow-up tweaks, fix them and commit with message `style(ext): polish smoke-test fixes`. Otherwise, no commit.
+
+---
+
+## Completion Checklist
+
+- [ ] Task 1: Patina tokens in popup/styles.css
+- [ ] Task 2: Patina tokens in vault.css
+- [ ] Task 3: `.surface-backdrop` class
+- [ ] Task 4: `.glass` card class
+- [ ] Task 5: `.btn-primary` / `.btn-secondary`
+- [ ] Task 6: `GLYPH_NEXT` + arrow replacements
+- [ ] Task 7: Unlock view restructure
+- [ ] Task 8: Setup wizard polish
+- [ ] Task 9: Vault shell backdrop
+- [ ] Task 10: Surface flag + two-column form
+- [ ] Task 11: Sticky save bar
+- [ ] Task 12: Header dirty subtitle
+- [ ] Task 13: Final verification
+