diff --git a/capsules/_shared/elastos-theme.js b/capsules/_shared/elastos-theme.js
new file mode 100644
index 000000000..4b7127693
--- /dev/null
+++ b/capsules/_shared/elastos-theme.js
@@ -0,0 +1,121 @@
+/* ElastOS UI — shared theme runtime (single source of truth).
+ *
+ * Vendored into each participating capsule's browser/ dir by `just vendor-ui`,
+ * next to elastos-ui.css. Everything is served same-origin from the gateway,
+ * so localStorage is the one canonical store (mirrors PC2's approach):
+ *
+ *   localStorage["elastos.ui.theme"]  = "dark" | "light" | "auto"
+ *   localStorage["elastos.ui.accent"] = "blue" | "purple" | "pink" | "red" |
+ *                                       "orange" | "yellow" | "green" | "graphite"
+ *
+ * Dark is the default theme when unset; blue is the default accent. "auto"
+ * follows prefers-color-scheme. The resolved theme is applied as
+ * data-el-theme="light" on <html> (absence means dark); the accent as
+ * data-el-accent (absence means blue) — both activate token blocks in
+ * elastos-ui.css. Cross-document sync is the browser's own `storage` event —
+ * no shell messaging required, and sandboxed app frames (allow-same-origin)
+ * see it.
+ */
+(function () {
+  const KEY = "elastos.ui.theme";
+  const ACCENT_KEY = "elastos.ui.accent";
+  const ACCENTS = [
+    "blue",
+    "purple",
+    "pink",
+    "red",
+    "orange",
+    "yellow",
+    "green",
+    "graphite",
+  ];
+  const media = window.matchMedia
+    ? window.matchMedia("(prefers-color-scheme: light)")
+    : null;
+
+  function preference() {
+    try {
+      const value = localStorage.getItem(KEY);
+      if (value === "light" || value === "dark" || value === "auto") {
+        return value;
+      }
+    } catch (_error) {
+      // Storage may be unavailable; fall through to the default.
+    }
+    return "dark";
+  }
+
+  function resolve(pref) {
+    if (pref === "auto") {
+      return media && media.matches ? "light" : "dark";
+    }
+    return pref;
+  }
+
+  function accentPreference() {
+    try {
+      const value = localStorage.getItem(ACCENT_KEY);
+      if (ACCENTS.includes(value)) {
+        return value;
+      }
+    } catch (_error) {
+      // Storage may be unavailable; fall through to the default.
+    }
+    return "blue";
+  }
+
+  function apply() {
+    if (resolve(preference()) === "light") {
+      document.documentElement.setAttribute("data-el-theme", "light");
+    } else {
+      document.documentElement.removeAttribute("data-el-theme");
+    }
+    const accent = accentPreference();
+    if (accent === "blue") {
+      document.documentElement.removeAttribute("data-el-accent");
+    } else {
+      document.documentElement.setAttribute("data-el-accent", accent);
+    }
+  }
+
+  apply();
+
+  window.addEventListener("storage", (event) => {
+    if (event.key === KEY || event.key === ACCENT_KEY || event.key === null) {
+      apply();
+    }
+  });
+
+  if (media && typeof media.addEventListener === "function") {
+    media.addEventListener("change", () => {
+      if (preference() === "auto") {
+        apply();
+      }
+    });
+  }
+
+  window.elastosTheme = {
+    preference,
+    resolved: () => resolve(preference()),
+    set(value) {
+      const pref = value === "light" || value === "auto" ? value : "dark";
+      try {
+        localStorage.setItem(KEY, pref);
+      } catch (_error) {
+        // Applying still works for this document.
+      }
+      apply();
+    },
+    accents: ACCENTS.slice(),
+    accent: accentPreference,
+    setAccent(value) {
+      const accent = ACCENTS.includes(value) ? value : "blue";
+      try {
+        localStorage.setItem(ACCENT_KEY, accent);
+      } catch (_error) {
+        // Applying still works for this document.
+      }
+      apply();
+    },
+  };
+})();
diff --git a/capsules/_shared/elastos-ui.css b/capsules/_shared/elastos-ui.css
new file mode 100644
index 000000000..b1a3075db
--- /dev/null
+++ b/capsules/_shared/elastos-ui.css
@@ -0,0 +1,247 @@
+/* ElastOS UI — shared design tokens (single source of truth).
+ *
+ * This file lives at capsules/_shared/elastos-ui.css and is VENDORED into each
+ * participating capsule's browser/ dir by `just vendor-ui` (no gateway route,
+ * no shared runtime surface — capsules stay self-contained). Edit THIS file,
+ * then run `just vendor-ui`; `just alignment-check` fails on drift.
+ *
+ * Contents: Inter (OFL, latin variable subset), palette, type scale, radii,
+ * hairlines, blur/elevation steps, motion tokens, and minimal control
+ * primitives. Layout is each app's business — tokens only.
+ */
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: optional;
+  src: url("./assets/fonts/Inter-latin-var.woff2") format("woff2");
+}
+
+:root {
+  color-scheme: dark;
+
+  /* Palette */
+  --el-bg: #0b0d10;
+  --el-surface: rgba(22, 24, 29, 0.92);
+  --el-surface-raised: #16181d;
+  --el-inset: rgba(255, 255, 255, 0.06);
+  --el-text: #f5f7fa;
+  --el-muted: rgba(245, 247, 250, 0.7);
+  --el-soft: rgba(245, 247, 250, 0.48);
+  --el-brand: #f6921a;
+  --el-brand-strong: #ffb457;
+  --el-focus: rgba(246, 146, 26, 0.55);
+  --el-danger: #ff8f8f;
+  --el-ok: #34d399;
+
+  /* Hairlines (one pair, everywhere) */
+  --el-hairline: rgba(255, 255, 255, 0.12);
+  --el-hairline-strong: rgba(255, 255, 255, 0.18);
+
+  /* Type: 10/11/12/13/14/16/28; weights 400/500/600/700 */
+  --el-font: "Inter", -apple-system, "Segoe UI", "SF Pro Text", sans-serif;
+  --el-font-mono: ui-monospace, "SF Mono", Menlo, monospace;
+  --el-text-2xs: 10px;
+  --el-text-xs: 11px;
+  --el-text-sm: 12px;
+  --el-text-md: 13px;
+  --el-text-lg: 14px;
+  --el-text-xl: 16px;
+  --el-text-display: 28px;
+
+  /* Radii: 4/6/10/12/16/20 + pill */
+  --el-radius-xs: 4px;
+  --el-radius-sm: 6px;
+  --el-radius-md: 10px;
+  --el-radius-lg: 12px;
+  --el-radius-xl: 16px;
+  --el-radius-2xl: 20px;
+  --el-radius-pill: 999px;
+
+  /* Blur: three steps only */
+  --el-blur-1: 8px;
+  --el-blur-2: 16px;
+  --el-blur-3: 24px;
+
+  /* Elevation: three levels */
+  --el-shadow-1: 0 2px 10px rgba(0, 0, 0, 0.22);
+  --el-shadow-2: 0 12px 28px rgba(0, 0, 0, 0.28);
+  --el-shadow-3: 0 24px 80px rgba(0, 0, 0, 0.35);
+
+  /* Motion: 80/140/180/220, exits 150; one ease */
+  --el-dur-1: 80ms;
+  --el-dur-2: 140ms;
+  --el-dur-3: 180ms;
+  --el-dur-4: 220ms;
+  --el-dur-exit: 150ms;
+  --el-ease: cubic-bezier(0.2, 0, 0, 1);
+
+  /* System accent — ONE accent, chosen by the user in System > Personalization
+     (macOS model), obeyed by every app. Selected via data-el-accent on <html>
+     (absence = blue). Apps consume the derived tones and never define their own
+     accent colors. */
+  --el-accent: #0a84ff;
+  --el-accent-ink: #ffffff;
+  --el-accent-strong: color-mix(in srgb, var(--el-accent) 78%, #ffffff);
+  --el-accent-soft: color-mix(in srgb, var(--el-accent) 22%, transparent);
+  --el-accent-faint: color-mix(in srgb, var(--el-accent) 11%, transparent);
+}
+
+/* The eight macOS accents. Yellow and orange carry dark ink on filled controls. */
+:root[data-el-accent="purple"] {
+  --el-accent: #bf5af2;
+}
+
+:root[data-el-accent="pink"] {
+  --el-accent: #ff375f;
+}
+
+:root[data-el-accent="red"] {
+  --el-accent: #ff453a;
+}
+
+:root[data-el-accent="orange"] {
+  --el-accent: #f6921a;
+  --el-accent-ink: #161616;
+}
+
+:root[data-el-accent="yellow"] {
+  --el-accent: #ffd60a;
+  --el-accent-ink: #161616;
+}
+
+:root[data-el-accent="green"] {
+  --el-accent: #30b84f;
+}
+
+:root[data-el-accent="graphite"] {
+  --el-accent: #8e8e93;
+}
+
+/* Light theme: dark is the default (no attribute); the shell sets
+   data-el-theme="light" on <html> and broadcasts changes to app frames.
+   Values restore the pre-token light look: white raised panels over a cool
+   pale stage, navy ink, the same brand orange. */
+:root[data-el-theme="light"] {
+  color-scheme: light;
+
+  --el-bg: #eef1f6;
+  --el-surface: rgba(255, 255, 255, 0.88);
+  --el-surface-raised: #ffffff;
+  --el-inset: rgba(29, 36, 56, 0.055);
+  --el-text: #1d2438;
+  --el-muted: rgba(29, 36, 56, 0.72);
+  --el-soft: rgba(29, 36, 56, 0.5);
+  --el-brand: #f6921a;
+  --el-brand-strong: #e07f0a;
+  --el-focus: rgba(246, 146, 26, 0.55);
+  --el-danger: #b14c5a;
+  --el-ok: #0a7a52;
+
+  --el-hairline: rgba(29, 36, 56, 0.14);
+  --el-hairline-strong: rgba(29, 36, 56, 0.24);
+
+  --el-shadow-1: 0 2px 10px rgba(34, 49, 88, 0.1);
+  --el-shadow-2: 0 12px 28px rgba(34, 49, 88, 0.12);
+  --el-shadow-3: 0 24px 80px rgba(34, 49, 88, 0.16);
+
+  /* "Strong" means higher contrast against the CURRENT background: lighter on
+     dark, deeper on light. */
+  --el-accent-strong: color-mix(in srgb, var(--el-accent) 72%, #1d2438);
+}
+
+/* App base: opt in by putting .el-app on <body>. Dark shell surface, shared
+   type. Layout untouched. */
+.el-app {
+  margin: 0;
+  background: var(--el-bg);
+  color: var(--el-text);
+  font-family: var(--el-font);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+.el-app :focus-visible {
+  outline: 2px solid var(--el-focus);
+  outline-offset: 2px;
+}
+
+/* Minimal control primitives — enough that a capsule needs no bespoke button
+   or input styling to look native. */
+.el-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 32px;
+  padding: 0 14px;
+  border: 1px solid var(--el-hairline);
+  border-radius: var(--el-radius-md);
+  background: var(--el-inset);
+  color: var(--el-text);
+  font: 500 var(--el-text-md) / 1.2 var(--el-font);
+  cursor: pointer;
+  transition: background-color var(--el-dur-2) var(--el-ease);
+}
+
+/* Hover lift over inset surfaces — flips with the theme so apps don't need
+   their own literal rgba(255,255,255,x) hovers. */
+:root {
+  --el-lift: rgba(255, 255, 255, 0.1);
+  --el-lift-strong: rgba(255, 255, 255, 0.16);
+}
+
+:root[data-el-theme="light"] {
+  --el-lift: rgba(29, 36, 56, 0.08);
+  --el-lift-strong: rgba(29, 36, 56, 0.14);
+}
+
+.el-button:hover {
+  background: var(--el-lift);
+}
+
+.el-button:active {
+  transform: scale(0.96);
+}
+
+.el-button:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
+.el-button-primary {
+  border-color: transparent;
+  background: var(--el-brand);
+  color: #161616;
+  font-weight: 600;
+}
+
+.el-button-primary:hover {
+  background: var(--el-brand-strong);
+}
+
+.el-input {
+  min-height: 32px;
+  padding: 0 10px;
+  border: 1px solid var(--el-hairline);
+  border-radius: var(--el-radius-md);
+  background: var(--el-inset);
+  color: var(--el-text);
+  font: 400 var(--el-text-md) / 1.2 var(--el-font);
+}
+
+.el-input::placeholder {
+  color: var(--el-soft);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .el-app *,
+  .el-app *::before,
+  .el-app *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
diff --git a/capsules/_shared/fonts/Inter-latin-var.woff2 b/capsules/_shared/fonts/Inter-latin-var.woff2
new file mode 100644
index 000000000..91dc3e852
Binary files /dev/null and b/capsules/_shared/fonts/Inter-latin-var.woff2 differ
diff --git a/capsules/archive-manager/browser/assets/fonts/Inter-latin-var.woff2 b/capsules/archive-manager/browser/assets/fonts/Inter-latin-var.woff2
new file mode 100644
index 000000000..91dc3e852
Binary files /dev/null and b/capsules/archive-manager/browser/assets/fonts/Inter-latin-var.woff2 differ
diff --git a/capsules/archive-manager/browser/elastos-theme.js b/capsules/archive-manager/browser/elastos-theme.js
new file mode 100644
index 000000000..bad19b950
--- /dev/null
+++ b/capsules/archive-manager/browser/elastos-theme.js
@@ -0,0 +1,122 @@
+/* GENERATED from capsules/_shared/elastos-theme.js — do not edit. Run `just vendor-ui`. */
+/* ElastOS UI — shared theme runtime (single source of truth).
+ *
+ * Vendored into each participating capsule's browser/ dir by `just vendor-ui`,
+ * next to elastos-ui.css. Everything is served same-origin from the gateway,
+ * so localStorage is the one canonical store (mirrors PC2's approach):
+ *
+ *   localStorage["elastos.ui.theme"]  = "dark" | "light" | "auto"
+ *   localStorage["elastos.ui.accent"] = "blue" | "purple" | "pink" | "red" |
+ *                                       "orange" | "yellow" | "green" | "graphite"
+ *
+ * Dark is the default theme when unset; blue is the default accent. "auto"
+ * follows prefers-color-scheme. The resolved theme is applied as
+ * data-el-theme="light" on <html> (absence means dark); the accent as
+ * data-el-accent (absence means blue) — both activate token blocks in
+ * elastos-ui.css. Cross-document sync is the browser's own `storage` event —
+ * no shell messaging required, and sandboxed app frames (allow-same-origin)
+ * see it.
+ */
+(function () {
+  const KEY = "elastos.ui.theme";
+  const ACCENT_KEY = "elastos.ui.accent";
+  const ACCENTS = [
+    "blue",
+    "purple",
+    "pink",
+    "red",
+    "orange",
+    "yellow",
+    "green",
+    "graphite",
+  ];
+  const media = window.matchMedia
+    ? window.matchMedia("(prefers-color-scheme: light)")
+    : null;
+
+  function preference() {
+    try {
+      const value = localStorage.getItem(KEY);
+      if (value === "light" || value === "dark" || value === "auto") {
+        return value;
+      }
+    } catch (_error) {
+      // Storage may be unavailable; fall through to the default.
+    }
+    return "dark";
+  }
+
+  function resolve(pref) {
+    if (pref === "auto") {
+      return media && media.matches ? "light" : "dark";
+    }
+    return pref;
+  }
+
+  function accentPreference() {
+    try {
+      const value = localStorage.getItem(ACCENT_KEY);
+      if (ACCENTS.includes(value)) {
+        return value;
+      }
+    } catch (_error) {
+      // Storage may be unavailable; fall through to the default.
+    }
+    return "blue";
+  }
+
+  function apply() {
+    if (resolve(preference()) === "light") {
+      document.documentElement.setAttribute("data-el-theme", "light");
+    } else {
+      document.documentElement.removeAttribute("data-el-theme");
+    }
+    const accent = accentPreference();
+    if (accent === "blue") {
+      document.documentElement.removeAttribute("data-el-accent");
+    } else {
+      document.documentElement.setAttribute("data-el-accent", accent);
+    }
+  }
+
+  apply();
+
+  window.addEventListener("storage", (event) => {
+    if (event.key === KEY || event.key === ACCENT_KEY || event.key === null) {
+      apply();
+    }
+  });
+
+  if (media && typeof media.addEventListener === "function") {
+    media.addEventListener("change", () => {
+      if (preference() === "auto") {
+        apply();
+      }
+    });
+  }
+
+  window.elastosTheme = {
+    preference,
+    resolved: () => resolve(preference()),
+    set(value) {
+      const pref = value === "light" || value === "auto" ? value : "dark";
+      try {
+        localStorage.setItem(KEY, pref);
+      } catch (_error) {
+        // Applying still works for this document.
+      }
+      apply();
+    },
+    accents: ACCENTS.slice(),
+    accent: accentPreference,
+    setAccent(value) {
+      const accent = ACCENTS.includes(value) ? value : "blue";
+      try {
+        localStorage.setItem(ACCENT_KEY, accent);
+      } catch (_error) {
+        // Applying still works for this document.
+      }
+      apply();
+    },
+  };
+})();
diff --git a/capsules/archive-manager/browser/elastos-ui.css b/capsules/archive-manager/browser/elastos-ui.css
new file mode 100644
index 000000000..7529596ef
--- /dev/null
+++ b/capsules/archive-manager/browser/elastos-ui.css
@@ -0,0 +1,248 @@
+/* GENERATED from capsules/_shared/elastos-ui.css — do not edit. Run `just vendor-ui`. */
+/* ElastOS UI — shared design tokens (single source of truth).
+ *
+ * This file lives at capsules/_shared/elastos-ui.css and is VENDORED into each
+ * participating capsule's browser/ dir by `just vendor-ui` (no gateway route,
+ * no shared runtime surface — capsules stay self-contained). Edit THIS file,
+ * then run `just vendor-ui`; `just alignment-check` fails on drift.
+ *
+ * Contents: Inter (OFL, latin variable subset), palette, type scale, radii,
+ * hairlines, blur/elevation steps, motion tokens, and minimal control
+ * primitives. Layout is each app's business — tokens only.
+ */
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: optional;
+  src: url("./assets/fonts/Inter-latin-var.woff2") format("woff2");
+}
+
+:root {
+  color-scheme: dark;
+
+  /* Palette */
+  --el-bg: #0b0d10;
+  --el-surface: rgba(22, 24, 29, 0.92);
+  --el-surface-raised: #16181d;
+  --el-inset: rgba(255, 255, 255, 0.06);
+  --el-text: #f5f7fa;
+  --el-muted: rgba(245, 247, 250, 0.7);
+  --el-soft: rgba(245, 247, 250, 0.48);
+  --el-brand: #f6921a;
+  --el-brand-strong: #ffb457;
+  --el-focus: rgba(246, 146, 26, 0.55);
+  --el-danger: #ff8f8f;
+  --el-ok: #34d399;
+
+  /* Hairlines (one pair, everywhere) */
+  --el-hairline: rgba(255, 255, 255, 0.12);
+  --el-hairline-strong: rgba(255, 255, 255, 0.18);
+
+  /* Type: 10/11/12/13/14/16/28; weights 400/500/600/700 */
+  --el-font: "Inter", -apple-system, "Segoe UI", "SF Pro Text", sans-serif;
+  --el-font-mono: ui-monospace, "SF Mono", Menlo, monospace;
+  --el-text-2xs: 10px;
+  --el-text-xs: 11px;
+  --el-text-sm: 12px;
+  --el-text-md: 13px;
+  --el-text-lg: 14px;
+  --el-text-xl: 16px;
+  --el-text-display: 28px;
+
+  /* Radii: 4/6/10/12/16/20 + pill */
+  --el-radius-xs: 4px;
+  --el-radius-sm: 6px;
+  --el-radius-md: 10px;
+  --el-radius-lg: 12px;
+  --el-radius-xl: 16px;
+  --el-radius-2xl: 20px;
+  --el-radius-pill: 999px;
+
+  /* Blur: three steps only */
+  --el-blur-1: 8px;
+  --el-blur-2: 16px;
+  --el-blur-3: 24px;
+
+  /* Elevation: three levels */
+  --el-shadow-1: 0 2px 10px rgba(0, 0, 0, 0.22);
+  --el-shadow-2: 0 12px 28px rgba(0, 0, 0, 0.28);
+  --el-shadow-3: 0 24px 80px rgba(0, 0, 0, 0.35);
+
+  /* Motion: 80/140/180/220, exits 150; one ease */
+  --el-dur-1: 80ms;
+  --el-dur-2: 140ms;
+  --el-dur-3: 180ms;
+  --el-dur-4: 220ms;
+  --el-dur-exit: 150ms;
+  --el-ease: cubic-bezier(0.2, 0, 0, 1);
+
+  /* System accent — ONE accent, chosen by the user in System > Personalization
+     (macOS model), obeyed by every app. Selected via data-el-accent on <html>
+     (absence = blue). Apps consume the derived tones and never define their own
+     accent colors. */
+  --el-accent: #0a84ff;
+  --el-accent-ink: #ffffff;
+  --el-accent-strong: color-mix(in srgb, var(--el-accent) 78%, #ffffff);
+  --el-accent-soft: color-mix(in srgb, var(--el-accent) 22%, transparent);
+  --el-accent-faint: color-mix(in srgb, var(--el-accent) 11%, transparent);
+}
+
+/* The eight macOS accents. Yellow and orange carry dark ink on filled controls. */
+:root[data-el-accent="purple"] {
+  --el-accent: #bf5af2;
+}
+
+:root[data-el-accent="pink"] {
+  --el-accent: #ff375f;
+}
+
+:root[data-el-accent="red"] {
+  --el-accent: #ff453a;
+}
+
+:root[data-el-accent="orange"] {
+  --el-accent: #f6921a;
+  --el-accent-ink: #161616;
+}
+
+:root[data-el-accent="yellow"] {
+  --el-accent: #ffd60a;
+  --el-accent-ink: #161616;
+}
+
+:root[data-el-accent="green"] {
+  --el-accent: #30b84f;
+}
+
+:root[data-el-accent="graphite"] {
+  --el-accent: #8e8e93;
+}
+
+/* Light theme: dark is the default (no attribute); the shell sets
+   data-el-theme="light" on <html> and broadcasts changes to app frames.
+   Values restore the pre-token light look: white raised panels over a cool
+   pale stage, navy ink, the same brand orange. */
+:root[data-el-theme="light"] {
+  color-scheme: light;
+
+  --el-bg: #eef1f6;
+  --el-surface: rgba(255, 255, 255, 0.88);
+  --el-surface-raised: #ffffff;
+  --el-inset: rgba(29, 36, 56, 0.055);
+  --el-text: #1d2438;
+  --el-muted: rgba(29, 36, 56, 0.72);
+  --el-soft: rgba(29, 36, 56, 0.5);
+  --el-brand: #f6921a;
+  --el-brand-strong: #e07f0a;
+  --el-focus: rgba(246, 146, 26, 0.55);
+  --el-danger: #b14c5a;
+  --el-ok: #0a7a52;
+
+  --el-hairline: rgba(29, 36, 56, 0.14);
+  --el-hairline-strong: rgba(29, 36, 56, 0.24);
+
+  --el-shadow-1: 0 2px 10px rgba(34, 49, 88, 0.1);
+  --el-shadow-2: 0 12px 28px rgba(34, 49, 88, 0.12);
+  --el-shadow-3: 0 24px 80px rgba(34, 49, 88, 0.16);
+
+  /* "Strong" means higher contrast against the CURRENT background: lighter on
+     dark, deeper on light. */
+  --el-accent-strong: color-mix(in srgb, var(--el-accent) 72%, #1d2438);
+}
+
+/* App base: opt in by putting .el-app on <body>. Dark shell surface, shared
+   type. Layout untouched. */
+.el-app {
+  margin: 0;
+  background: var(--el-bg);
+  color: var(--el-text);
+  font-family: var(--el-font);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+.el-app :focus-visible {
+  outline: 2px solid var(--el-focus);
+  outline-offset: 2px;
+}
+
+/* Minimal control primitives — enough that a capsule needs no bespoke button
+   or input styling to look native. */
+.el-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 32px;
+  padding: 0 14px;
+  border: 1px solid var(--el-hairline);
+  border-radius: var(--el-radius-md);
+  background: var(--el-inset);
+  color: var(--el-text);
+  font: 500 var(--el-text-md) / 1.2 var(--el-font);
+  cursor: pointer;
+  transition: background-color var(--el-dur-2) var(--el-ease);
+}
+
+/* Hover lift over inset surfaces — flips with the theme so apps don't need
+   their own literal rgba(255,255,255,x) hovers. */
+:root {
+  --el-lift: rgba(255, 255, 255, 0.1);
+  --el-lift-strong: rgba(255, 255, 255, 0.16);
+}
+
+:root[data-el-theme="light"] {
+  --el-lift: rgba(29, 36, 56, 0.08);
+  --el-lift-strong: rgba(29, 36, 56, 0.14);
+}
+
+.el-button:hover {
+  background: var(--el-lift);
+}
+
+.el-button:active {
+  transform: scale(0.96);
+}
+
+.el-button:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
+.el-button-primary {
+  border-color: transparent;
+  background: var(--el-brand);
+  color: #161616;
+  font-weight: 600;
+}
+
+.el-button-primary:hover {
+  background: var(--el-brand-strong);
+}
+
+.el-input {
+  min-height: 32px;
+  padding: 0 10px;
+  border: 1px solid var(--el-hairline);
+  border-radius: var(--el-radius-md);
+  background: var(--el-inset);
+  color: var(--el-text);
+  font: 400 var(--el-text-md) / 1.2 var(--el-font);
+}
+
+.el-input::placeholder {
+  color: var(--el-soft);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .el-app *,
+  .el-app *::before,
+  .el-app *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
diff --git a/capsules/archive-manager/browser/index.html b/capsules/archive-manager/browser/index.html
index c61e10431..b045b0355 100644
--- a/capsules/archive-manager/browser/index.html
+++ b/capsules/archive-manager/browser/index.html
@@ -4,25 +4,27 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Archive - ElastOS</title>
+  <script src="./elastos-theme.js"></script>
+  <link rel="stylesheet" href="./elastos-ui.css">
   <style>
+    /* Rides the shared tokens (dark default, light via data-el-theme). */
     :root {
-      color-scheme: light;
-      --bg: #f6f7f9;
-      --panel: #ffffff;
-      --panel-soft: #f3f4f6;
-      --line: rgba(60, 60, 67, 0.14);
-      --line-strong: rgba(60, 60, 67, 0.26);
-      --ink: #1d1d1f;
-      --muted: #6b6b6b;
-      --accent: #007aff;
-      --accent-soft: rgba(0, 122, 255, 0.11);
-      --brand: #f6921a;
-      --good: #2f8f68;
-      --warn: #b57918;
-      --danger: #b14c5a;
-      --mono: "SFMono-Regular", "SF Mono", "Cascadia Code", "JetBrains Mono", monospace;
+      --bg: var(--el-bg);
+      --panel: var(--el-surface-raised);
+      --panel-soft: var(--el-inset);
+      --line: var(--el-hairline);
+      --line-strong: var(--el-hairline-strong);
+      --ink: var(--el-text);
+      --muted: var(--el-muted);
+      --accent: var(--el-accent);
+      --accent-soft: var(--el-accent-faint);
+      --brand: var(--el-brand);
+      --good: var(--el-ok);
+      --warn: var(--el-brand-strong);
+      --danger: var(--el-danger);
+      --mono: var(--el-font-mono);
       --archive-list-columns: 30px minmax(280px, 1fr) 92px 150px;
-      font-family: "Segoe UI", "Inter", "Helvetica Neue", sans-serif;
+      font-family: var(--el-font);
     }
 
     * {
@@ -75,7 +77,7 @@
       padding: 18px;
       border: 0;
       border-radius: 0;
-      background: #fff;
+      background: var(--panel);
     }
 
     .empty-card p,
@@ -99,7 +101,7 @@
       gap: 10px;
       border: 1px solid var(--line);
       border-radius: 9px;
-      background: #fff;
+      background: var(--panel);
       padding: 12px 14px;
       text-align: left;
       cursor: pointer;
@@ -116,7 +118,7 @@
     }
 
     .journey-button:hover {
-      border-color: rgba(0, 122, 255, 0.42);
+      border-color: color-mix(in srgb, var(--accent) 45%, transparent);
       background: var(--accent-soft);
     }
 
@@ -137,7 +139,7 @@
       gap: 12px;
       padding: 7px 10px;
       border-bottom: 1px solid var(--line);
-      background: #fafafa;
+      background: var(--panel-soft);
     }
 
     .title-group,
@@ -187,7 +189,7 @@
       min-width: 0;
       border: 1px solid var(--line);
       border-radius: 7px;
-      background: #fff;
+      background: var(--panel-soft);
       padding: 7px 9px;
       color: var(--ink);
       outline: none;
@@ -201,14 +203,14 @@
     .search:focus,
     .destination-input:focus,
     .select:focus {
-      border-color: rgba(0, 122, 255, 0.45);
-      box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.11);
+      border-color: color-mix(in srgb, var(--accent) 48%, transparent);
+      box-shadow: 0 0 0 3px var(--accent-soft);
     }
 
     .btn {
       border: 1px solid var(--line);
       border-radius: 7px;
-      background: rgba(255, 255, 255, 0.88);
+      background: var(--panel-soft);
       padding: 6px 10px;
       cursor: pointer;
       font-size: 0.84rem;
@@ -218,17 +220,17 @@
 
     .btn:hover:not(:disabled) {
       border-color: var(--line-strong);
-      background: #fff;
+      background: var(--el-lift);
     }
 
     .btn-primary {
       border-color: transparent;
-      background: var(--ink);
-      color: #f8fbff;
+      background: var(--el-accent);
+      color: var(--el-accent-ink);
     }
 
     .btn-primary:hover:not(:disabled) {
-      background: #333438;
+      background: var(--el-accent-strong);
     }
 
     .btn:disabled {
@@ -253,14 +255,14 @@
     }
 
     .status-chip.safe {
-      border-color: rgba(47, 143, 104, 0.22);
-      background: rgba(47, 143, 104, 0.12);
+      border-color: color-mix(in srgb, var(--good) 30%, transparent);
+      background: color-mix(in srgb, var(--good) 12%, transparent);
       color: var(--good);
     }
 
     .status-chip.blocked {
-      border-color: rgba(181, 121, 24, 0.24);
-      background: rgba(181, 121, 24, 0.14);
+      border-color: color-mix(in srgb, var(--warn) 30%, transparent);
+      background: color-mix(in srgb, var(--warn) 14%, transparent);
       color: var(--warn);
     }
 
@@ -276,7 +278,7 @@
       min-height: 0;
       display: grid;
       grid-template-rows: auto minmax(0, 1fr);
-      border-right: 0.5px solid #ccc;
+      border-right: 0.5px solid var(--line-strong);
     }
 
     .list-toolbar {
@@ -287,7 +289,7 @@
       gap: 8px;
       padding: 8px 10px;
       border-bottom: 1px solid var(--line);
-      background: #fff;
+      background: var(--panel);
     }
 
     .list-title {
@@ -309,7 +311,7 @@
     .content-pane {
       min-height: 0;
       overflow: auto;
-      background: #fff;
+      background: var(--panel);
     }
 
     .entry-head,
@@ -326,7 +328,7 @@
       z-index: 1;
       height: 30px;
       border-bottom: 1px solid var(--line);
-      background: #f8f8f9;
+      background: var(--panel-soft);
       color: var(--muted);
       font-size: 0.72rem;
       font-weight: 700;
@@ -346,14 +348,14 @@
 
     .entry-row {
       min-height: 39px;
-      border-bottom: 1px solid rgba(60, 60, 67, 0.08);
+      border-bottom: 1px solid var(--line);
       background: transparent;
       cursor: default;
       user-select: none;
     }
 
     .entry-row:hover {
-      background: rgba(0, 0, 0, 0.035);
+      background: var(--el-lift);
     }
 
     .entry-row.selected {
@@ -362,11 +364,11 @@
 
     .entry-row.blocked {
       color: var(--muted);
-      background: rgba(181, 121, 24, 0.08);
+      background: color-mix(in srgb, var(--warn) 8%, transparent);
     }
 
     .entry-row:focus {
-      outline: 2px solid rgba(0, 122, 255, 0.28);
+      outline: 2px solid var(--el-focus);
       outline-offset: -2px;
     }
 
@@ -390,7 +392,7 @@
       place-items: center;
       border: 1px solid var(--line);
       border-radius: 3px;
-      background: linear-gradient(180deg, #fff, #eef1f5);
+      background: var(--panel-soft);
       color: var(--accent);
       font-size: 0.68rem;
       font-weight: 800;
@@ -461,7 +463,7 @@
     .card {
       border: 1px solid var(--line);
       border-radius: 7px;
-      background: #fff;
+      background: var(--panel);
       padding: 10px;
     }
 
@@ -475,7 +477,7 @@
       padding: 12px;
       border: 1px dashed var(--line-strong);
       border-radius: 6px;
-      background: #fbfbfc;
+      background: var(--panel-soft);
     }
 
     .preview-body {
@@ -504,7 +506,7 @@
       gap: 8px;
       padding: 10px;
       border-top: 1px solid var(--line);
-      background: #fafafa;
+      background: var(--panel-soft);
     }
 
     .root-picker {
@@ -518,7 +520,7 @@
     .root-picker button {
       border: 1px solid var(--line);
       border-radius: 999px;
-      background: #fff;
+      background: var(--panel);
       padding: 4px 9px;
       cursor: pointer;
       font-size: 0.78rem;
@@ -775,6 +777,57 @@ <h2>Extract</h2>
       });
     }
 
+    // Shell menu bar: declare File/Edit menus to Home; commands come back as
+    // elastos:menu-command and route to the same functions the buttons use.
+    (function bindShellMenu() {
+      const homeToken = params.get("home_token") || "";
+      if (!homeToken || window.parent === window) {
+        return;
+      }
+      window.parent.postMessage({
+        type: "home:menu-manifest",
+        homeToken,
+        menus: [
+          {
+            title: "File",
+            items: [
+              { label: "Open Archive...", cmd: "open-archive" },
+              { label: "New Archive...", cmd: "new-archive" },
+              "-",
+              { label: "Close Window", cmd: "__close-window" },
+            ],
+          },
+          {
+            title: "Edit",
+            items: [
+              { label: "Select All Safe Files", cmd: "select-all-safe" },
+              { label: "Clear Selection", cmd: "clear-selection" },
+            ],
+          },
+        ],
+      }, window.location.origin);
+      window.addEventListener("message", (event) => {
+        if (event.origin !== window.location.origin) return;
+        const message = event.data;
+        if (message?.type !== "elastos:menu-command" || typeof message.cmd !== "string") return;
+        switch (message.cmd) {
+          case "open-archive":
+            openLibraryPicker("open");
+            return;
+          case "new-archive":
+            openLibraryPicker("create");
+            return;
+          case "select-all-safe":
+            document.querySelector("#select-all-safe").click();
+            return;
+          case "clear-selection":
+            document.querySelector("#clear-selection").click();
+            return;
+          default:
+        }
+      });
+    })();
+
     function showEmptyState() {
       document.querySelector("#empty-state").hidden = false;
       document.querySelector("#archive-workspace").hidden = true;
diff --git a/capsules/browser/browser/assets/fonts/Inter-latin-var.woff2 b/capsules/browser/browser/assets/fonts/Inter-latin-var.woff2
new file mode 100644
index 000000000..91dc3e852
Binary files /dev/null and b/capsules/browser/browser/assets/fonts/Inter-latin-var.woff2 differ
diff --git a/capsules/browser/browser/browser.js b/capsules/browser/browser/browser.js
index 8913f6716..6e924f690 100644
--- a/capsules/browser/browser/browser.js
+++ b/capsules/browser/browser/browser.js
@@ -63,6 +63,9 @@ const backButton = document.querySelector("#browser-back");
 const forwardButton = document.querySelector("#browser-forward");
 const refreshButton = document.querySelector("#browser-refresh");
 const profileResetButton = document.querySelector("#browser-profile-reset");
+const profileResetConfirm = document.querySelector("#browser-profile-reset-confirm");
+const profileResetCommitButton = document.querySelector("#browser-profile-reset-commit");
+const profileResetCancelButton = document.querySelector("#browser-profile-reset-cancel");
 const settingsButton = document.querySelector("#browser-settings");
 const settingsPanel = document.querySelector("#browser-settings-panel");
 const settingsCloseButton = document.querySelector("#browser-settings-close");
@@ -111,6 +114,22 @@ function setSettingsOpen(open) {
   }
   settingsPanel.hidden = !open;
   settingsButton.setAttribute("aria-expanded", open ? "true" : "false");
+  if (!open) {
+    setProfileResetConfirmOpen(false);
+  }
+}
+
+function setProfileResetConfirmOpen(open) {
+  if (!profileResetConfirm) {
+    return;
+  }
+  profileResetConfirm.hidden = !open;
+  if (profileResetButton) {
+    profileResetButton.hidden = open;
+  }
+  if (open) {
+    profileResetCancelButton?.focus();
+  }
 }
 
 function focusRemoteInput() {
@@ -1433,9 +1452,7 @@ async function resetBrowserProfile() {
     showStatus("Browser profile reset requires a Browser launch token.", { sticky: true });
     return;
   }
-  if (!window.confirm("Reset Browser cookies, local storage, history, and cache for this account?")) {
-    return;
-  }
+  setProfileResetConfirmOpen(false);
   const activePage = currentPage;
   const rememberedPage = rememberedRuntimePage();
   const stalePage =
@@ -1473,11 +1490,90 @@ async function resetBrowserProfile() {
 }
 
 profileResetButton?.addEventListener("click", () => {
+  setProfileResetConfirmOpen(true);
+});
+
+profileResetCancelButton?.addEventListener("click", () => {
+  setProfileResetConfirmOpen(false);
+  profileResetButton?.focus();
+});
+
+profileResetCommitButton?.addEventListener("click", () => {
   resetBrowserProfile().catch((error) => {
     showStatus(friendlyOpenError(error), { sticky: true });
   });
 });
 
+// Shell menu bar: declare File/View/History menus to Home; commands come back
+// as elastos:menu-command and drive the same toolbar handlers.
+function announceShellMenuManifest() {
+  if (!launchToken || window.parent === window) {
+    return;
+  }
+  window.parent.postMessage({
+    type: "home:menu-manifest",
+    homeToken: launchToken,
+    menus: [
+      {
+        title: "File",
+        items: [
+          { label: "Open Location", cmd: "open-location" },
+          "-",
+          { label: "Settings...", cmd: "settings" },
+          "-",
+          { label: "Close Window", cmd: "__close-window" },
+        ],
+      },
+      {
+        title: "View",
+        items: [
+          { label: "Reload Page", cmd: "reload" },
+        ],
+      },
+      {
+        title: "History",
+        items: [
+          { label: "Back", cmd: "back" },
+          { label: "Forward", cmd: "forward" },
+        ],
+      },
+    ],
+  }, window.location.origin);
+}
+
+function onShellMenuCommand(event) {
+  if (event.origin !== window.location.origin) {
+    return;
+  }
+  const message = event.data;
+  if (message?.type !== "elastos:menu-command" || typeof message.cmd !== "string") {
+    return;
+  }
+  switch (message.cmd) {
+    case "open-location":
+      addressInput.focus();
+      addressInput.select();
+      return;
+    case "settings":
+      setSettingsOpen(true);
+      void fetchBrowserSummary();
+      return;
+    case "reload":
+      refreshButton.click();
+      return;
+    case "back":
+      backButton.click();
+      return;
+    case "forward":
+      forwardButton.click();
+      return;
+    default:
+  }
+}
+
+window.addEventListener("message", onShellMenuCommand);
+announceShellMenuManifest();
+
 bindBrowserInputSurface({
   copyRemoteClipboardToHost,
   friendlyOpenError,
diff --git a/capsules/browser/browser/elastos-theme.js b/capsules/browser/browser/elastos-theme.js
new file mode 100644
index 000000000..bad19b950
--- /dev/null
+++ b/capsules/browser/browser/elastos-theme.js
@@ -0,0 +1,122 @@
+/* GENERATED from capsules/_shared/elastos-theme.js — do not edit. Run `just vendor-ui`. */
+/* ElastOS UI — shared theme runtime (single source of truth).
+ *
+ * Vendored into each participating capsule's browser/ dir by `just vendor-ui`,
+ * next to elastos-ui.css. Everything is served same-origin from the gateway,
+ * so localStorage is the one canonical store (mirrors PC2's approach):
+ *
+ *   localStorage["elastos.ui.theme"]  = "dark" | "light" | "auto"
+ *   localStorage["elastos.ui.accent"] = "blue" | "purple" | "pink" | "red" |
+ *                                       "orange" | "yellow" | "green" | "graphite"
+ *
+ * Dark is the default theme when unset; blue is the default accent. "auto"
+ * follows prefers-color-scheme. The resolved theme is applied as
+ * data-el-theme="light" on <html> (absence means dark); the accent as
+ * data-el-accent (absence means blue) — both activate token blocks in
+ * elastos-ui.css. Cross-document sync is the browser's own `storage` event —
+ * no shell messaging required, and sandboxed app frames (allow-same-origin)
+ * see it.
+ */
+(function () {
+  const KEY = "elastos.ui.theme";
+  const ACCENT_KEY = "elastos.ui.accent";
+  const ACCENTS = [
+    "blue",
+    "purple",
+    "pink",
+    "red",
+    "orange",
+    "yellow",
+    "green",
+    "graphite",
+  ];
+  const media = window.matchMedia
+    ? window.matchMedia("(prefers-color-scheme: light)")
+    : null;
+
+  function preference() {
+    try {
+      const value = localStorage.getItem(KEY);
+      if (value === "light" || value === "dark" || value === "auto") {
+        return value;
+      }
+    } catch (_error) {
+      // Storage may be unavailable; fall through to the default.
+    }
+    return "dark";
+  }
+
+  function resolve(pref) {
+    if (pref === "auto") {
+      return media && media.matches ? "light" : "dark";
+    }
+    return pref;
+  }
+
+  function accentPreference() {
+    try {
+      const value = localStorage.getItem(ACCENT_KEY);
+      if (ACCENTS.includes(value)) {
+        return value;
+      }
+    } catch (_error) {
+      // Storage may be unavailable; fall through to the default.
+    }
+    return "blue";
+  }
+
+  function apply() {
+    if (resolve(preference()) === "light") {
+      document.documentElement.setAttribute("data-el-theme", "light");
+    } else {
+      document.documentElement.removeAttribute("data-el-theme");
+    }
+    const accent = accentPreference();
+    if (accent === "blue") {
+      document.documentElement.removeAttribute("data-el-accent");
+    } else {
+      document.documentElement.setAttribute("data-el-accent", accent);
+    }
+  }
+
+  apply();
+
+  window.addEventListener("storage", (event) => {
+    if (event.key === KEY || event.key === ACCENT_KEY || event.key === null) {
+      apply();
+    }
+  });
+
+  if (media && typeof media.addEventListener === "function") {
+    media.addEventListener("change", () => {
+      if (preference() === "auto") {
+        apply();
+      }
+    });
+  }
+
+  window.elastosTheme = {
+    preference,
+    resolved: () => resolve(preference()),
+    set(value) {
+      const pref = value === "light" || value === "auto" ? value : "dark";
+      try {
+        localStorage.setItem(KEY, pref);
+      } catch (_error) {
+        // Applying still works for this document.
+      }
+      apply();
+    },
+    accents: ACCENTS.slice(),
+    accent: accentPreference,
+    setAccent(value) {
+      const accent = ACCENTS.includes(value) ? value : "blue";
+      try {
+        localStorage.setItem(ACCENT_KEY, accent);
+      } catch (_error) {
+        // Applying still works for this document.
+      }
+      apply();
+    },
+  };
+})();
diff --git a/capsules/browser/browser/elastos-ui.css b/capsules/browser/browser/elastos-ui.css
new file mode 100644
index 000000000..7529596ef
--- /dev/null
+++ b/capsules/browser/browser/elastos-ui.css
@@ -0,0 +1,248 @@
+/* GENERATED from capsules/_shared/elastos-ui.css — do not edit. Run `just vendor-ui`. */
+/* ElastOS UI — shared design tokens (single source of truth).
+ *
+ * This file lives at capsules/_shared/elastos-ui.css and is VENDORED into each
+ * participating capsule's browser/ dir by `just vendor-ui` (no gateway route,
+ * no shared runtime surface — capsules stay self-contained). Edit THIS file,
+ * then run `just vendor-ui`; `just alignment-check` fails on drift.
+ *
+ * Contents: Inter (OFL, latin variable subset), palette, type scale, radii,
+ * hairlines, blur/elevation steps, motion tokens, and minimal control
+ * primitives. Layout is each app's business — tokens only.
+ */
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: optional;
+  src: url("./assets/fonts/Inter-latin-var.woff2") format("woff2");
+}
+
+:root {
+  color-scheme: dark;
+
+  /* Palette */
+  --el-bg: #0b0d10;
+  --el-surface: rgba(22, 24, 29, 0.92);
+  --el-surface-raised: #16181d;
+  --el-inset: rgba(255, 255, 255, 0.06);
+  --el-text: #f5f7fa;
+  --el-muted: rgba(245, 247, 250, 0.7);
+  --el-soft: rgba(245, 247, 250, 0.48);
+  --el-brand: #f6921a;
+  --el-brand-strong: #ffb457;
+  --el-focus: rgba(246, 146, 26, 0.55);
+  --el-danger: #ff8f8f;
+  --el-ok: #34d399;
+
+  /* Hairlines (one pair, everywhere) */
+  --el-hairline: rgba(255, 255, 255, 0.12);
+  --el-hairline-strong: rgba(255, 255, 255, 0.18);
+
+  /* Type: 10/11/12/13/14/16/28; weights 400/500/600/700 */
+  --el-font: "Inter", -apple-system, "Segoe UI", "SF Pro Text", sans-serif;
+  --el-font-mono: ui-monospace, "SF Mono", Menlo, monospace;
+  --el-text-2xs: 10px;
+  --el-text-xs: 11px;
+  --el-text-sm: 12px;
+  --el-text-md: 13px;
+  --el-text-lg: 14px;
+  --el-text-xl: 16px;
+  --el-text-display: 28px;
+
+  /* Radii: 4/6/10/12/16/20 + pill */
+  --el-radius-xs: 4px;
+  --el-radius-sm: 6px;
+  --el-radius-md: 10px;
+  --el-radius-lg: 12px;
+  --el-radius-xl: 16px;
+  --el-radius-2xl: 20px;
+  --el-radius-pill: 999px;
+
+  /* Blur: three steps only */
+  --el-blur-1: 8px;
+  --el-blur-2: 16px;
+  --el-blur-3: 24px;
+
+  /* Elevation: three levels */
+  --el-shadow-1: 0 2px 10px rgba(0, 0, 0, 0.22);
+  --el-shadow-2: 0 12px 28px rgba(0, 0, 0, 0.28);
+  --el-shadow-3: 0 24px 80px rgba(0, 0, 0, 0.35);
+
+  /* Motion: 80/140/180/220, exits 150; one ease */
+  --el-dur-1: 80ms;
+  --el-dur-2: 140ms;
+  --el-dur-3: 180ms;
+  --el-dur-4: 220ms;
+  --el-dur-exit: 150ms;
+  --el-ease: cubic-bezier(0.2, 0, 0, 1);
+
+  /* System accent — ONE accent, chosen by the user in System > Personalization
+     (macOS model), obeyed by every app. Selected via data-el-accent on <html>
+     (absence = blue). Apps consume the derived tones and never define their own
+     accent colors. */
+  --el-accent: #0a84ff;
+  --el-accent-ink: #ffffff;
+  --el-accent-strong: color-mix(in srgb, var(--el-accent) 78%, #ffffff);
+  --el-accent-soft: color-mix(in srgb, var(--el-accent) 22%, transparent);
+  --el-accent-faint: color-mix(in srgb, var(--el-accent) 11%, transparent);
+}
+
+/* The eight macOS accents. Yellow and orange carry dark ink on filled controls. */
+:root[data-el-accent="purple"] {
+  --el-accent: #bf5af2;
+}
+
+:root[data-el-accent="pink"] {
+  --el-accent: #ff375f;
+}
+
+:root[data-el-accent="red"] {
+  --el-accent: #ff453a;
+}
+
+:root[data-el-accent="orange"] {
+  --el-accent: #f6921a;
+  --el-accent-ink: #161616;
+}
+
+:root[data-el-accent="yellow"] {
+  --el-accent: #ffd60a;
+  --el-accent-ink: #161616;
+}
+
+:root[data-el-accent="green"] {
+  --el-accent: #30b84f;
+}
+
+:root[data-el-accent="graphite"] {
+  --el-accent: #8e8e93;
+}
+
+/* Light theme: dark is the default (no attribute); the shell sets
+   data-el-theme="light" on <html> and broadcasts changes to app frames.
+   Values restore the pre-token light look: white raised panels over a cool
+   pale stage, navy ink, the same brand orange. */
+:root[data-el-theme="light"] {
+  color-scheme: light;
+
+  --el-bg: #eef1f6;
+  --el-surface: rgba(255, 255, 255, 0.88);
+  --el-surface-raised: #ffffff;
+  --el-inset: rgba(29, 36, 56, 0.055);
+  --el-text: #1d2438;
+  --el-muted: rgba(29, 36, 56, 0.72);
+  --el-soft: rgba(29, 36, 56, 0.5);
+  --el-brand: #f6921a;
+  --el-brand-strong: #e07f0a;
+  --el-focus: rgba(246, 146, 26, 0.55);
+  --el-danger: #b14c5a;
+  --el-ok: #0a7a52;
+
+  --el-hairline: rgba(29, 36, 56, 0.14);
+  --el-hairline-strong: rgba(29, 36, 56, 0.24);
+
+  --el-shadow-1: 0 2px 10px rgba(34, 49, 88, 0.1);
+  --el-shadow-2: 0 12px 28px rgba(34, 49, 88, 0.12);
+  --el-shadow-3: 0 24px 80px rgba(34, 49, 88, 0.16);
+
+  /* "Strong" means higher contrast against the CURRENT background: lighter on
+     dark, deeper on light. */
+  --el-accent-strong: color-mix(in srgb, var(--el-accent) 72%, #1d2438);
+}
+
+/* App base: opt in by putting .el-app on <body>. Dark shell surface, shared
+   type. Layout untouched. */
+.el-app {
+  margin: 0;
+  background: var(--el-bg);
+  color: var(--el-text);
+  font-family: var(--el-font);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+.el-app :focus-visible {
+  outline: 2px solid var(--el-focus);
+  outline-offset: 2px;
+}
+
+/* Minimal control primitives — enough that a capsule needs no bespoke button
+   or input styling to look native. */
+.el-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 32px;
+  padding: 0 14px;
+  border: 1px solid var(--el-hairline);
+  border-radius: var(--el-radius-md);
+  background: var(--el-inset);
+  color: var(--el-text);
+  font: 500 var(--el-text-md) / 1.2 var(--el-font);
+  cursor: pointer;
+  transition: background-color var(--el-dur-2) var(--el-ease);
+}
+
+/* Hover lift over inset surfaces — flips with the theme so apps don't need
+   their own literal rgba(255,255,255,x) hovers. */
+:root {
+  --el-lift: rgba(255, 255, 255, 0.1);
+  --el-lift-strong: rgba(255, 255, 255, 0.16);
+}
+
+:root[data-el-theme="light"] {
+  --el-lift: rgba(29, 36, 56, 0.08);
+  --el-lift-strong: rgba(29, 36, 56, 0.14);
+}
+
+.el-button:hover {
+  background: var(--el-lift);
+}
+
+.el-button:active {
+  transform: scale(0.96);
+}
+
+.el-button:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
+.el-button-primary {
+  border-color: transparent;
+  background: var(--el-brand);
+  color: #161616;
+  font-weight: 600;
+}
+
+.el-button-primary:hover {
+  background: var(--el-brand-strong);
+}
+
+.el-input {
+  min-height: 32px;
+  padding: 0 10px;
+  border: 1px solid var(--el-hairline);
+  border-radius: var(--el-radius-md);
+  background: var(--el-inset);
+  color: var(--el-text);
+  font: 400 var(--el-text-md) / 1.2 var(--el-font);
+}
+
+.el-input::placeholder {
+  color: var(--el-soft);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .el-app *,
+  .el-app *::before,
+  .el-app *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
diff --git a/capsules/browser/browser/index.html b/capsules/browser/browser/index.html
index 72a18bd57..aaa18681f 100644
--- a/capsules/browser/browser/index.html
+++ b/capsules/browser/browser/index.html
@@ -4,7 +4,9 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>ElastOS Browser</title>
-    <link rel="stylesheet" href="./style.css?v=browser-20260626a" />
+    <script src="./elastos-theme.js"></script>
+    <link rel="stylesheet" href="./elastos-ui.css" />
+    <link rel="stylesheet" href="./style.css?v=browser-20260717a" />
   </head>
   <body data-shell-window-fit="fixed">
     <main class="browser-shell">
@@ -54,6 +56,19 @@
         <button id="browser-profile-reset" class="browser-settings-action browser-settings-danger" type="button" aria-label="Reset Browser profile" title="Reset Browser profile">
           Reset profile
         </button>
+        <div id="browser-profile-reset-confirm" class="browser-settings-confirm" role="alertdialog" aria-labelledby="browser-profile-reset-copy" hidden>
+          <p id="browser-profile-reset-copy">
+            Reset Browser cookies, local storage, history, and cache for this account?
+          </p>
+          <div class="browser-settings-confirm-row">
+            <button id="browser-profile-reset-commit" class="browser-settings-action browser-settings-confirm-commit" type="button">
+              Reset
+            </button>
+            <button id="browser-profile-reset-cancel" class="browser-settings-action" type="button">
+              Cancel
+            </button>
+          </div>
+        </div>
       </section>
 
       <section class="browser-stage" aria-label="Web page">
@@ -81,6 +96,6 @@
       </section>
     </main>
 
-    <script type="module" src="./browser.js?v=browser-20260629b"></script>
+    <script type="module" src="./browser.js?v=browser-20260717a"></script>
   </body>
 </html>
diff --git a/capsules/browser/browser/style.css b/capsules/browser/browser/style.css
index 99be88724..34fed493b 100644
--- a/capsules/browser/browser/style.css
+++ b/capsules/browser/browser/style.css
@@ -1,16 +1,17 @@
+/* Chrome rides the shared tokens (dark default, light via data-el-theme).
+   The page stage itself stays white below — that is content, not chrome. */
 :root {
-  color-scheme: light;
-  --bg: #f7f3ea;
-  --surface: rgba(255, 255, 255, 0.88);
-  --surface-strong: #ffffff;
-  --ink: #16130e;
-  --ink-soft: rgba(22, 19, 14, 0.66);
-  --ink-mute: rgba(22, 19, 14, 0.44);
-  --line: rgba(22, 19, 14, 0.12);
-  --line-strong: rgba(22, 19, 14, 0.22);
-  --accent: #d46f24;
-  --accent-soft: rgba(212, 111, 36, 0.14);
-  --shadow: 0 10px 34px rgba(38, 29, 18, 0.1);
+  --bg: var(--el-bg);
+  --surface: var(--el-surface);
+  --surface-strong: var(--el-surface-raised);
+  --ink: var(--el-text);
+  --ink-soft: var(--el-muted);
+  --ink-mute: var(--el-soft);
+  --line: var(--el-hairline);
+  --line-strong: var(--el-hairline-strong);
+  --accent: var(--el-accent);
+  --accent-soft: var(--el-accent-soft);
+  --shadow: var(--el-shadow-2);
 }
 
 * {
@@ -28,7 +29,8 @@ body {
   margin: 0;
   background: var(--bg);
   color: var(--ink);
-  font: 13px/1.4 "Geist", "Inter Tight", ui-sans-serif, system-ui, sans-serif;
+  font: 13px/1.4 var(--el-font);
+  -webkit-font-smoothing: antialiased;
 }
 
 button,
@@ -75,7 +77,7 @@ select {
   height: 34px;
   border: 1px solid var(--line);
   border-radius: 10px;
-  background: rgba(255, 255, 255, 0.72);
+  background: var(--el-inset);
   color: var(--ink);
   cursor: pointer;
   font-size: 16px;
@@ -110,7 +112,7 @@ select {
   width: min(280px, calc(100% - 16px));
   border: 1px solid var(--line);
   border-radius: 8px;
-  background: rgba(255, 255, 255, 0.96);
+  background: var(--surface-strong);
   box-shadow: var(--shadow);
   padding: 10px;
 }
@@ -163,7 +165,7 @@ select {
   height: 34px;
   border: 1px solid var(--line);
   border-radius: 10px;
-  background: rgba(255, 255, 255, 0.82);
+  background: var(--el-inset);
   color: var(--ink);
   padding: 0 26px 0 10px;
   outline: none;
@@ -188,7 +190,7 @@ select {
   margin-top: 12px;
   border: 1px solid var(--line);
   border-radius: 8px;
-  background: rgba(255, 255, 255, 0.82);
+  background: var(--el-inset);
   color: var(--ink);
   cursor: pointer;
   font-weight: 650;
@@ -208,12 +210,51 @@ select {
 }
 
 .browser-settings-danger {
-  color: #7f1d1d;
+  color: var(--el-danger);
 }
 
 .browser-settings-danger:hover,
 .browser-settings-danger:focus-visible {
-  background: rgba(239, 68, 68, 0.1);
+  background: color-mix(in srgb, var(--el-danger) 12%, transparent);
+}
+
+/* In-panel confirm for profile reset (replaces window.confirm). */
+.browser-settings-confirm {
+  margin-top: 12px;
+  border: 1px solid color-mix(in srgb, var(--el-danger) 40%, transparent);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--el-danger) 8%, transparent);
+  padding: 10px;
+}
+
+.browser-settings-confirm[hidden] {
+  display: none;
+}
+
+.browser-settings-confirm p {
+  margin: 0 0 10px;
+  color: var(--ink);
+  font-size: 12px;
+}
+
+.browser-settings-confirm-row {
+  display: flex;
+  gap: 8px;
+}
+
+.browser-settings-confirm-row .browser-settings-action {
+  margin-top: 0;
+}
+
+.browser-settings-confirm-commit {
+  border-color: transparent;
+  background: var(--el-danger);
+  color: var(--el-bg);
+}
+
+.browser-settings-confirm-commit:hover,
+.browser-settings-confirm-commit:focus-visible {
+  background: color-mix(in srgb, var(--el-danger) 84%, var(--el-text));
 }
 
 .browser-address {
@@ -222,11 +263,11 @@ select {
   height: 34px;
   border: 1px solid var(--line);
   border-radius: 12px;
-  background: rgba(255, 255, 255, 0.82);
+  background: var(--el-inset);
   color: var(--ink);
   padding: 0 12px;
   outline: none;
-  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
+  font-family: var(--el-font-mono);
   font-size: 12px;
 }
 
@@ -243,6 +284,8 @@ select {
   background: var(--surface-strong);
 }
 
+/* The stage is the web page itself — white is content ground, not chrome
+   (same rule as the viewers' PDF paper / video letterbox). */
 .browser-render-panel {
   position: relative;
   display: grid;
@@ -303,7 +346,7 @@ select {
   max-width: min(520px, calc(100% - 24px));
   border: 1px solid var(--line);
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.94);
+  background: var(--surface-strong);
   box-shadow: var(--shadow);
   color: var(--ink-soft);
   display: inline-flex;
@@ -361,11 +404,11 @@ select {
   max-width: min(720px, calc(100% - 24px));
   border: 1px solid var(--line);
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.9);
+  background: var(--surface-strong);
   box-shadow: var(--shadow);
   color: var(--ink-soft);
   padding: 6px 10px;
-  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
+  font-family: var(--el-font-mono);
   font-size: 11px;
   white-space: nowrap;
   overflow: hidden;
diff --git a/capsules/chat-room/browser/assets/fonts/Inter-latin-var.woff2 b/capsules/chat-room/browser/assets/fonts/Inter-latin-var.woff2
new file mode 100644
index 000000000..91dc3e852
Binary files /dev/null and b/capsules/chat-room/browser/assets/fonts/Inter-latin-var.woff2 differ
diff --git a/capsules/chat-room/browser/elastos-theme.js b/capsules/chat-room/browser/elastos-theme.js
new file mode 100644
index 000000000..bad19b950
--- /dev/null
+++ b/capsules/chat-room/browser/elastos-theme.js
@@ -0,0 +1,122 @@
+/* GENERATED from capsules/_shared/elastos-theme.js — do not edit. Run `just vendor-ui`. */
+/* ElastOS UI — shared theme runtime (single source of truth).
+ *
+ * Vendored into each participating capsule's browser/ dir by `just vendor-ui`,
+ * next to elastos-ui.css. Everything is served same-origin from the gateway,
+ * so localStorage is the one canonical store (mirrors PC2's approach):
+ *
+ *   localStorage["elastos.ui.theme"]  = "dark" | "light" | "auto"
+ *   localStorage["elastos.ui.accent"] = "blue" | "purple" | "pink" | "red" |
+ *                                       "orange" | "yellow" | "green" | "graphite"
+ *
+ * Dark is the default theme when unset; blue is the default accent. "auto"
+ * follows prefers-color-scheme. The resolved theme is applied as
+ * data-el-theme="light" on <html> (absence means dark); the accent as
+ * data-el-accent (absence means blue) — both activate token blocks in
+ * elastos-ui.css. Cross-document sync is the browser's own `storage` event —
+ * no shell messaging required, and sandboxed app frames (allow-same-origin)
+ * see it.
+ */
+(function () {
+  const KEY = "elastos.ui.theme";
+  const ACCENT_KEY = "elastos.ui.accent";
+  const ACCENTS = [
+    "blue",
+    "purple",
+    "pink",
+    "red",
+    "orange",
+    "yellow",
+    "green",
+    "graphite",
+  ];
+  const media = window.matchMedia
+    ? window.matchMedia("(prefers-color-scheme: light)")
+    : null;
+
+  function preference() {
+    try {
+      const value = localStorage.getItem(KEY);
+      if (value === "light" || value === "dark" || value === "auto") {
+        return value;
+      }
+    } catch (_error) {
+      // Storage may be unavailable; fall through to the default.
+    }
+    return "dark";
+  }
+
+  function resolve(pref) {
+    if (pref === "auto") {
+      return media && media.matches ? "light" : "dark";
+    }
+    return pref;
+  }
+
+  function accentPreference() {
+    try {
+      const value = localStorage.getItem(ACCENT_KEY);
+      if (ACCENTS.includes(value)) {
+        return value;
+      }
+    } catch (_error) {
+      // Storage may be unavailable; fall through to the default.
+    }
+    return "blue";
+  }
+
+  function apply() {
+    if (resolve(preference()) === "light") {
+      document.documentElement.setAttribute("data-el-theme", "light");
+    } else {
+      document.documentElement.removeAttribute("data-el-theme");
+    }
+    const accent = accentPreference();
+    if (accent === "blue") {
+      document.documentElement.removeAttribute("data-el-accent");
+    } else {
+      document.documentElement.setAttribute("data-el-accent", accent);
+    }
+  }
+
+  apply();
+
+  window.addEventListener("storage", (event) => {
+    if (event.key === KEY || event.key === ACCENT_KEY || event.key === null) {
+      apply();
+    }
+  });
+
+  if (media && typeof media.addEventListener === "function") {
+    media.addEventListener("change", () => {
+      if (preference() === "auto") {
+        apply();
+      }
+    });
+  }
+
+  window.elastosTheme = {
+    preference,
+    resolved: () => resolve(preference()),
+    set(value) {
+      const pref = value === "light" || value === "auto" ? value : "dark";
+      try {
+        localStorage.setItem(KEY, pref);
+      } catch (_error) {
+        // Applying still works for this document.
+      }
+      apply();
+    },
+    accents: ACCENTS.slice(),
+    accent: accentPreference,
+    setAccent(value) {
+      const accent = ACCENTS.includes(value) ? value : "blue";
+      try {
+        localStorage.setItem(ACCENT_KEY, accent);
+      } catch (_error) {
+        // Applying still works for this document.
+      }
+      apply();
+    },
+  };
+})();
diff --git a/capsules/chat-room/browser/elastos-ui.css b/capsules/chat-room/browser/elastos-ui.css
new file mode 100644
index 000000000..7529596ef
--- /dev/null
+++ b/capsules/chat-room/browser/elastos-ui.css
@@ -0,0 +1,248 @@
+/* GENERATED from capsules/_shared/elastos-ui.css — do not edit. Run `just vendor-ui`. */
+/* ElastOS UI — shared design tokens (single source of truth).
+ *
+ * This file lives at capsules/_shared/elastos-ui.css and is VENDORED into each
+ * participating capsule's browser/ dir by `just vendor-ui` (no gateway route,
+ * no shared runtime surface — capsules stay self-contained). Edit THIS file,
+ * then run `just vendor-ui`; `just alignment-check` fails on drift.
+ *
+ * Contents: Inter (OFL, latin variable subset), palette, type scale, radii,
+ * hairlines, blur/elevation steps, motion tokens, and minimal control
+ * primitives. Layout is each app's business — tokens only.
+ */
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: optional;
+  src: url("./assets/fonts/Inter-latin-var.woff2") format("woff2");
+}
+
+:root {
+  color-scheme: dark;
+
+  /* Palette */
+  --el-bg: #0b0d10;
+  --el-surface: rgba(22, 24, 29, 0.92);
+  --el-surface-raised: #16181d;
+  --el-inset: rgba(255, 255, 255, 0.06);
+  --el-text: #f5f7fa;
+  --el-muted: rgba(245, 247, 250, 0.7);
+  --el-soft: rgba(245, 247, 250, 0.48);
+  --el-brand: #f6921a;
+  --el-brand-strong: #ffb457;
+  --el-focus: rgba(246, 146, 26, 0.55);
+  --el-danger: #ff8f8f;
+  --el-ok: #34d399;
+
+  /* Hairlines (one pair, everywhere) */
+  --el-hairline: rgba(255, 255, 255, 0.12);
+  --el-hairline-strong: rgba(255, 255, 255, 0.18);
+
+  /* Type: 10/11/12/13/14/16/28; weights 400/500/600/700 */
+  --el-font: "Inter", -apple-system, "Segoe UI", "SF Pro Text", sans-serif;
+  --el-font-mono: ui-monospace, "SF Mono", Menlo, monospace;
+  --el-text-2xs: 10px;
+  --el-text-xs: 11px;
+  --el-text-sm: 12px;
+  --el-text-md: 13px;
+  --el-text-lg: 14px;
+  --el-text-xl: 16px;
+  --el-text-display: 28px;
+
+  /* Radii: 4/6/10/12/16/20 + pill */
+  --el-radius-xs: 4px;
+  --el-radius-sm: 6px;
+  --el-radius-md: 10px;
+  --el-radius-lg: 12px;
+  --el-radius-xl: 16px;
+  --el-radius-2xl: 20px;
+  --el-radius-pill: 999px;
+
+  /* Blur: three steps only */
+  --el-blur-1: 8px;
+  --el-blur-2: 16px;
+  --el-blur-3: 24px;
+
+  /* Elevation: three levels */
+  --el-shadow-1: 0 2px 10px rgba(0, 0, 0, 0.22);
+  --el-shadow-2: 0 12px 28px rgba(0, 0, 0, 0.28);
+  --el-shadow-3: 0 24px 80px rgba(0, 0, 0, 0.35);
+
+  /* Motion: 80/140/180/220, exits 150; one ease */
+  --el-dur-1: 80ms;
+  --el-dur-2: 140ms;
+  --el-dur-3: 180ms;
+  --el-dur-4: 220ms;
+  --el-dur-exit: 150ms;
+  --el-ease: cubic-bezier(0.2, 0, 0, 1);
+
+  /* System accent — ONE accent, chosen by the user in System > Personalization
+     (macOS model), obeyed by every app. Selected via data-el-accent on <html>
+     (absence = blue). Apps consume the derived tones and never define their own
+     accent colors. */
+  --el-accent: #0a84ff;
+  --el-accent-ink: #ffffff;
+  --el-accent-strong: color-mix(in srgb, var(--el-accent) 78%, #ffffff);
+  --el-accent-soft: color-mix(in srgb, var(--el-accent) 22%, transparent);
+  --el-accent-faint: color-mix(in srgb, var(--el-accent) 11%, transparent);
+}
+
+/* The eight macOS accents. Yellow and orange carry dark ink on filled controls. */
+:root[data-el-accent="purple"] {
+  --el-accent: #bf5af2;
+}
+
+:root[data-el-accent="pink"] {
+  --el-accent: #ff375f;
+}
+
+:root[data-el-accent="red"] {
+  --el-accent: #ff453a;
+}
+
+:root[data-el-accent="orange"] {
+  --el-accent: #f6921a;
+  --el-accent-ink: #161616;
+}
+
+:root[data-el-accent="yellow"] {
+  --el-accent: #ffd60a;
+  --el-accent-ink: #161616;
+}
+
+:root[data-el-accent="green"] {
+  --el-accent: #30b84f;
+}
+
+:root[data-el-accent="graphite"] {
+  --el-accent: #8e8e93;
+}
+
+/* Light theme: dark is the default (no attribute); the shell sets
+   data-el-theme="light" on <html> and broadcasts changes to app frames.
+   Values restore the pre-token light look: white raised panels over a cool
+   pale stage, navy ink, the same brand orange. */
+:root[data-el-theme="light"] {
+  color-scheme: light;
+
+  --el-bg: #eef1f6;
+  --el-surface: rgba(255, 255, 255, 0.88);
+  --el-surface-raised: #ffffff;
+  --el-inset: rgba(29, 36, 56, 0.055);
+  --el-text: #1d2438;
+  --el-muted: rgba(29, 36, 56, 0.72);
+  --el-soft: rgba(29, 36, 56, 0.5);
+  --el-brand: #f6921a;
+  --el-brand-strong: #e07f0a;
+  --el-focus: rgba(246, 146, 26, 0.55);
+  --el-danger: #b14c5a;
+  --el-ok: #0a7a52;
+
+  --el-hairline: rgba(29, 36, 56, 0.14);
+  --el-hairline-strong: rgba(29, 36, 56, 0.24);
+
+  --el-shadow-1: 0 2px 10px rgba(34, 49, 88, 0.1);
+  --el-shadow-2: 0 12px 28px rgba(34, 49, 88, 0.12);
+  --el-shadow-3: 0 24px 80px rgba(34, 49, 88, 0.16);
+
+  /* "Strong" means higher contrast against the CURRENT background: lighter on
+     dark, deeper on light. */
+  --el-accent-strong: color-mix(in srgb, var(--el-accent) 72%, #1d2438);
+}
+
+/* App base: opt in by putting .el-app on <body>. Dark shell surface, shared
+   type. Layout untouched. */
+.el-app {
+  margin: 0;
+  background: var(--el-bg);
+  color: var(--el-text);
+  font-family: var(--el-font);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+.el-app :focus-visible {
+  outline: 2px solid var(--el-focus);
+  outline-offset: 2px;
+}
+
+/* Minimal control primitives — enough that a capsule needs no bespoke button
+   or input styling to look native. */
+.el-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 32px;
+  padding: 0 14px;
+  border: 1px solid var(--el-hairline);
+  border-radius: var(--el-radius-md);
+  background: var(--el-inset);
+  color: var(--el-text);
+  font: 500 var(--el-text-md) / 1.2 var(--el-font);
+  cursor: pointer;
+  transition: background-color var(--el-dur-2) var(--el-ease);
+}
+
+/* Hover lift over inset surfaces — flips with the theme so apps don't need
+   their own literal rgba(255,255,255,x) hovers. */
+:root {
+  --el-lift: rgba(255, 255, 255, 0.1);
+  --el-lift-strong: rgba(255, 255, 255, 0.16);
+}
+
+:root[data-el-theme="light"] {
+  --el-lift: rgba(29, 36, 56, 0.08);
+  --el-lift-strong: rgba(29, 36, 56, 0.14);
+}
+
+.el-button:hover {
+  background: var(--el-lift);
+}
+
+.el-button:active {
+  transform: scale(0.96);
+}
+
+.el-button:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
+.el-button-primary {
+  border-color: transparent;
+  background: var(--el-brand);
+  color: #161616;
+  font-weight: 600;
+}
+
+.el-button-primary:hover {
+  background: var(--el-brand-strong);
+}
+
+.el-input {
+  min-height: 32px;
+  padding: 0 10px;
+  border: 1px solid var(--el-hairline);
+  border-radius: var(--el-radius-md);
+  background: var(--el-inset);
+  color: var(--el-text);
+  font: 400 var(--el-text-md) / 1.2 var(--el-font);
+}
+
+.el-input::placeholder {
+  color: var(--el-soft);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .el-app *,
+  .el-app *::before,
+  .el-app *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
diff --git a/capsules/chat-room/browser/index.html b/capsules/chat-room/browser/index.html
index a065024c3..0c45db97e 100644
--- a/capsules/chat-room/browser/index.html
+++ b/capsules/chat-room/browser/index.html
@@ -4,6 +4,8 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>Chat</title>
+  <script src="./elastos-theme.js"></script>
+  <link rel="stylesheet" href="./elastos-ui.css" />
   <link rel="stylesheet" href="./style.css" />
 </head>
 <body data-room-session-active="false">
@@ -110,5 +112,49 @@ <h4>Invite another device</h4>
     import init from "./chat_room_ui.js?v=chat-room-ui-20260612c";
     init(new URL("./chat_room_ui_bg.wasm?v=chat-room-ui-20260612c", import.meta.url));
   </script>
+  <script>
+    // Shell menu bar: the WASM app owns the room logic, so the host page
+    // declares the menus and routes each command to the SAME on-screen
+    // control the pointer would use — no second path into the app.
+    (function () {
+      const homeToken = new URLSearchParams(window.location.search).get("home_token") || "";
+      if (!homeToken || window.parent === window) {
+        return;
+      }
+      window.parent.postMessage({
+        type: "home:menu-manifest",
+        homeToken,
+        menus: [
+          {
+            title: "File",
+            items: [
+              { label: "Close Window", cmd: "__close-window" },
+            ],
+          },
+          {
+            title: "View",
+            items: [
+              { label: "People", cmd: "toggle-people" },
+              { label: "Access Settings", cmd: "toggle-access" },
+            ],
+          },
+        ],
+      }, window.location.origin);
+      window.addEventListener("message", (event) => {
+        if (event.origin !== window.location.origin) {
+          return;
+        }
+        const message = event.data;
+        if (message?.type !== "elastos:menu-command" || typeof message.cmd !== "string") {
+          return;
+        }
+        if (message.cmd === "toggle-people") {
+          document.getElementById("participant-toggle")?.click();
+        } else if (message.cmd === "toggle-access") {
+          document.getElementById("room-access-toggle")?.click();
+        }
+      });
+    })();
+  </script>
 </body>
 </html>
diff --git a/capsules/chat-room/browser/style.css b/capsules/chat-room/browser/style.css
index e679a04d2..fc3d40a97 100644
--- a/capsules/chat-room/browser/style.css
+++ b/capsules/chat-room/browser/style.css
@@ -1,22 +1,92 @@
 :root {
-  --bg: #edf1fb;
+  color-scheme: dark;
+  --bg: var(--el-bg);
+  --bg-strong: #10131a;
+  --panel: var(--el-surface);
+  --panel-strong: var(--el-surface-raised);
+  --panel-soft: var(--el-inset);
+  --line: var(--el-hairline);
+  --line-strong: var(--el-hairline-strong);
+  --ink: var(--el-text);
+  --muted: var(--el-muted);
+  --brand: var(--el-brand);
+  --brand-soft: rgba(246, 146, 26, 0.16);
+  --accent: var(--el-accent);
+  --accent-soft: var(--el-accent-soft);
+  --accent-deep: var(--el-accent-strong);
+  --danger: var(--el-danger);
+  --self: rgba(246, 146, 26, 0.14);
+  --shadow: var(--el-shadow-2);
+  font-family: var(--el-font);
+}
+
+/* Light (shared runtime sets data-el-theme="light"; no attribute = dark). Tokens aliased to
+   --el-* flip via elastos-ui.css; the values below restore the capsule's pre-dark light palette
+   for the vars and literals that stayed hardcoded dark. */
+:root[data-el-theme="light"] {
+  color-scheme: light;
   --bg-strong: #e3e9fb;
-  --panel: rgba(255, 255, 255, 0.9);
-  --panel-strong: #ffffff;
-  --panel-soft: #eef2ff;
-  --line: rgba(83, 103, 164, 0.14);
-  --line-strong: rgba(83, 103, 164, 0.22);
-  --ink: #1d2438;
-  --muted: #66708a;
-  --brand: #f6921a;
   --brand-soft: #fff1dc;
-  --accent: #5f76d8;
-  --accent-soft: #e8edff;
-  --accent-deep: #3c53a7;
   --danger: #b14c5a;
   --self: #edf2ff;
-  --shadow: 0 24px 60px rgba(34, 49, 88, 0.12);
-  font-family: "IBM Plex Sans", "Avenir Next", "Segoe UI", sans-serif;
+}
+
+:root[data-el-theme="light"] body {
+  background:
+    radial-gradient(circle at top left, rgba(95, 118, 216, 0.14), transparent 28%),
+    radial-gradient(circle at bottom right, rgba(126, 149, 226, 0.12), transparent 24%),
+    linear-gradient(180deg, #f7f9ff 0%, var(--bg) 100%);
+}
+
+/* accent-filled buttons: light accent (#5f76d8) takes white ink, not the dark-theme #0b0d10 */
+:root[data-el-theme="light"] button,
+:root[data-el-theme="light"] .room-access-toggle[aria-expanded="true"],
+:root[data-el-theme="light"] .policy-row button[aria-pressed="true"] {
+  color: #f8fbff;
+}
+
+:root[data-el-theme="light"] button.secondary,
+:root[data-el-theme="light"] .emoji-chip {
+  color: var(--ink);
+}
+
+:root[data-el-theme="light"] .attachment-open {
+  color: var(--accent-deep);
+}
+
+:root[data-el-theme="light"] .join-link-card,
+:root[data-el-theme="light"] .browser-access-request,
+:root[data-el-theme="light"] .node-row,
+:root[data-el-theme="light"] .policy-row {
+  border-color: rgba(95, 118, 216, 0.18);
+}
+
+:root[data-el-theme="light"] .participant-local {
+  border-color: rgba(95, 118, 216, 0.18);
+}
+
+:root[data-el-theme="light"] .participant-avatar {
+  background: linear-gradient(180deg, #7f95e4 0%, var(--accent) 100%);
+  color: white;
+}
+
+:root[data-el-theme="light"] .message.self-message {
+  border-color: rgba(95, 118, 216, 0.18);
+}
+
+:root[data-el-theme="light"] .browser-access-request-actions .danger,
+:root[data-el-theme="light"] .node-row-actions .danger {
+  background: rgba(177, 76, 90, 0.12);
+}
+
+:root[data-el-theme="light"] .link-body a {
+  border-color: rgba(95, 118, 216, 0.12);
+}
+
+@media (max-width: 760px) {
+  :root[data-el-theme="light"] .chat-card[data-roster-open="true"] .participant-scrim {
+    background: rgba(29, 36, 56, 0.22);
+  }
 }
 
 * {
@@ -36,9 +106,9 @@ body {
 
 body {
   background:
-    radial-gradient(circle at top left, rgba(95, 118, 216, 0.14), transparent 28%),
-    radial-gradient(circle at bottom right, rgba(126, 149, 226, 0.12), transparent 24%),
-    linear-gradient(180deg, #f7f9ff 0%, var(--bg) 100%);
+    radial-gradient(circle at top left, rgba(125, 149, 240, 0.12), transparent 28%),
+    radial-gradient(circle at bottom right, rgba(246, 146, 26, 0.07), transparent 24%),
+    linear-gradient(180deg, var(--bg-strong) 0%, var(--bg) 100%);
   color: var(--ink);
 }
 
@@ -162,19 +232,25 @@ label span {
 
 input {
   width: 100%;
-  border: 1px solid var(--line-strong);
+  border: 1px solid var(--el-hairline);
   border-radius: 1rem;
-  background: rgba(255, 255, 255, 0.98);
+  background: var(--el-inset);
   padding: 0.92rem 0.98rem;
   color: var(--ink);
 }
 
+input:focus-visible {
+  border-color: var(--el-brand);
+  outline: 2px solid var(--el-focus);
+  outline-offset: 0;
+}
+
 button {
   border: 0;
   border-radius: 1rem;
   padding: 0.85rem 1rem;
   background: var(--accent);
-  color: #f8fbff;
+  color: #0b0d10;
   font-weight: 700;
   cursor: pointer;
 }
@@ -251,7 +327,7 @@ body[data-room-session-active="true"] .chat-card {
   min-width: 0;
   border: 1px solid var(--line);
   border-radius: 1.25rem;
-  background: rgba(255, 255, 255, 0.88);
+  background: var(--panel);
 }
 
 .conversation-card {
@@ -305,9 +381,9 @@ body[data-room-access-mode="gateway"][data-room-session-active="false"] .browser
   margin: auto;
   padding: 1rem;
   border-radius: 1.2rem;
-  border: 1px solid rgba(95, 118, 216, 0.16);
-  background: rgba(255, 255, 255, 0.72);
-  box-shadow: 0 16px 42px rgba(34, 49, 88, 0.08);
+  border: 1px solid var(--line);
+  background: var(--panel-strong);
+  box-shadow: var(--el-shadow-1);
 }
 
 .conversation-join-copy {
@@ -389,7 +465,7 @@ body[data-room-access-mode="gateway"][data-room-session-active="false"] .convers
   height: auto;
   padding: 1.05rem;
   gap: 0.8rem;
-  box-shadow: 0 18px 42px rgba(34, 49, 88, 0.11);
+  box-shadow: var(--el-shadow-2);
 }
 
 .chat-room-toggle {
@@ -418,7 +494,7 @@ body[data-room-access-mode="gateway"][data-room-session-active="false"] .convers
 
 .room-access-toggle[aria-expanded="true"] {
   background: var(--accent);
-  color: #f8fbff;
+  color: #0b0d10;
 }
 
 .roster-title {
@@ -444,7 +520,7 @@ body[data-room-access-mode="gateway"][data-room-session-active="false"] .convers
   gap: 0.55rem;
   min-height: 0;
   padding-top: 0.2rem;
-  border-top: 1px solid rgba(83, 103, 164, 0.1);
+  border-top: 1px solid var(--line);
 }
 
 .browser-access-head,
@@ -480,8 +556,8 @@ body[data-room-access-mode="gateway"][data-room-session-active="false"] .convers
   gap: 0.55rem;
   padding: 0.68rem;
   border-radius: 0.95rem;
-  border: 1px solid rgba(95, 118, 216, 0.18);
-  background: rgba(95, 118, 216, 0.08);
+  border: 1px solid rgba(125, 149, 240, 0.26);
+  background: var(--accent-soft);
 }
 
 .browser-access-request-head,
@@ -555,7 +631,7 @@ body[data-room-access-mode="gateway"][data-room-session-active="false"] .convers
 
 .browser-access-request-actions .danger,
 .node-row-actions .danger {
-  background: rgba(177, 76, 90, 0.12);
+  background: rgba(255, 143, 143, 0.14);
   color: var(--danger);
 }
 
@@ -583,7 +659,7 @@ body[data-room-access-mode="gateway"][data-room-session-active="false"] .convers
 
 .policy-row button[aria-pressed="true"] {
   background: var(--accent);
-  color: #f8fbff;
+  color: #0b0d10;
 }
 
 .participant,
@@ -595,7 +671,7 @@ body[data-room-access-mode="gateway"][data-room-session-active="false"] .convers
   padding: 0.62rem 0.68rem;
   border-radius: 0.9rem;
   background: var(--panel-strong);
-  border: 1px solid rgba(83, 103, 164, 0.08);
+  border: 1px solid var(--line);
 }
 
 body[data-room-access-mode="shell"][data-room-session-active="false"] .roster-head {
@@ -649,7 +725,7 @@ body[data-room-access-mode="shell"][data-room-session-active="false"] .roster-he
 
 .participant-local {
   background: var(--accent-soft);
-  border-color: rgba(95, 118, 216, 0.18);
+  border-color: rgba(125, 149, 240, 0.3);
 }
 
 .participant-avatar {
@@ -658,8 +734,8 @@ body[data-room-access-mode="shell"][data-room-session-active="false"] .roster-he
   border-radius: 999px;
   display: grid;
   place-items: center;
-  background: linear-gradient(180deg, #7f95e4 0%, var(--accent) 100%);
-  color: white;
+  background: linear-gradient(180deg, #93a8f4 0%, var(--accent) 100%);
+  color: #0b0d10;
   font-size: 0.8rem;
   font-weight: 800;
 }
@@ -716,15 +792,15 @@ body[data-room-access-mode="shell"][data-room-session-active="false"] .roster-he
   max-width: min(100%, 42rem);
   padding: 0.76rem 0.9rem;
   border-radius: 1.1rem 1.1rem 1.1rem 0.45rem;
-  border: 1px solid rgba(83, 103, 164, 0.1);
+  border: 1px solid var(--line);
   background: var(--panel-strong);
-  box-shadow: 0 10px 22px rgba(34, 49, 88, 0.06);
+  box-shadow: var(--el-shadow-1);
 }
 
 .message.self-message {
   align-self: flex-end;
   background: var(--self);
-  border-color: rgba(95, 118, 216, 0.18);
+  border-color: rgba(246, 146, 26, 0.32);
   border-radius: 1.1rem 1.1rem 0.45rem 1.1rem;
 }
 
@@ -755,8 +831,8 @@ body[data-room-access-mode="shell"][data-room-session-active="false"] .roster-he
   align-items: center;
   padding: 0.45rem 0.7rem;
   border-radius: 999px;
-  background: rgba(95, 118, 216, 0.08);
-  color: var(--muted);
+  background: var(--el-inset);
+  color: var(--el-soft);
   font-weight: 700;
 }
 
@@ -775,14 +851,14 @@ body[data-room-access-mode="shell"][data-room-session-active="false"] .roster-he
 
 .link-body a {
   padding: 0.85rem 0.9rem;
-  background: rgba(95, 118, 216, 0.08);
-  border: 1px solid rgba(95, 118, 216, 0.12);
+  background: var(--accent-soft);
+  border: 1px solid rgba(125, 149, 240, 0.26);
 }
 
 .attachment-card {
   padding: 0.8rem 0.85rem;
-  background: rgba(83, 103, 164, 0.04);
-  border: 1px solid rgba(83, 103, 164, 0.1);
+  background: var(--el-inset);
+  border: 1px solid var(--line);
 }
 
 .link-title,
@@ -804,8 +880,8 @@ body[data-room-access-mode="shell"][data-room-session-active="false"] .roster-he
   max-height: 18rem;
   margin-bottom: 0.65rem;
   border-radius: 0.85rem;
-  border: 1px solid rgba(83, 103, 164, 0.1);
-  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid var(--line);
+  background: var(--el-inset);
 }
 
 .attachment-audio {
@@ -853,8 +929,8 @@ body[data-room-access-mode="gateway"][data-room-session-active="false"] #browser
   min-width: 2.55rem;
   padding: 0.46rem 0.62rem;
   border-radius: 999px;
-  border: 1px solid rgba(83, 103, 164, 0.12);
-  background: rgba(255, 255, 255, 0.94);
+  border: 1px solid var(--line);
+  background: var(--el-inset);
   font-size: 1.05rem;
   line-height: 1;
   color: var(--ink);
@@ -879,7 +955,7 @@ body[data-room-access-mode="shell"] .conversation-card,
 body[data-room-access-mode="shell"] .presence-card,
 body[data-room-session-active="true"] .conversation-card,
 body[data-room-session-active="true"] .presence-card {
-  box-shadow: 0 14px 34px rgba(34, 49, 88, 0.09);
+  box-shadow: var(--el-shadow-1);
 }
 
 @media (max-width: 960px) {
@@ -915,7 +991,7 @@ body[data-room-session-active="true"] .presence-card {
   .card {
     border-radius: 0.82rem;
     padding: 0.48rem;
-    box-shadow: 0 10px 26px rgba(34, 49, 88, 0.08);
+    box-shadow: var(--el-shadow-1);
   }
 
   .participant-toggle,
@@ -948,7 +1024,7 @@ body[data-room-session-active="true"] .presence-card {
     position: fixed;
     inset: 0;
     z-index: 39;
-    background: rgba(29, 36, 56, 0.22);
+    background: rgba(5, 7, 10, 0.55);
   }
 
   .chat-card[data-roster-open="true"] .presence-card {
@@ -960,7 +1036,7 @@ body[data-room-session-active="true"] .presence-card {
     left: 0.75rem;
     z-index: 40;
     max-height: none;
-    box-shadow: 0 32px 72px rgba(29, 36, 56, 0.2);
+    box-shadow: var(--el-shadow-3);
   }
 
   body[data-room-access-mode="shell"] .chat-room-shell[data-roster-open="true"] .presence-card,
@@ -1006,3 +1082,51 @@ body[data-room-session-active="true"] .presence-card {
     display: none !important;
   }
 }
+
+/* ---- Shell chrome ----------------------------------------------------------
+   Inside a Home window the room is an OS app, not a webpage: no gradient
+   backdrop, no floating rounded cards. The conversation is the content plane
+   and the roster is a real sidebar behind one hairline. Gateway/standalone
+   mode keeps the card look above. */
+body[data-room-access-mode="shell"] {
+  background: var(--el-bg);
+}
+
+body[data-room-access-mode="shell"] .shell {
+  padding: 0;
+}
+
+body[data-room-access-mode="shell"] .chat-room-shell {
+  height: 100vh;
+  height: 100dvh;
+}
+
+body[data-room-access-mode="shell"] .chat-card {
+  gap: 0;
+}
+
+body[data-room-access-mode="shell"] .conversation-card,
+body[data-room-access-mode="shell"] .presence-card {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+body[data-room-access-mode="shell"] .conversation-card {
+  padding: 0.75rem 0.9rem;
+}
+
+body[data-room-access-mode="shell"] .presence-card {
+  border-left: 1px solid var(--line);
+  background: var(--el-surface);
+  padding: 0.75rem;
+}
+
+@media (max-width: 760px) {
+  body[data-room-access-mode="shell"] .chat-card[data-roster-open="true"] .presence-card {
+    border: 1px solid var(--line);
+    border-radius: 0.9rem;
+    background: var(--panel-strong);
+  }
+}
diff --git a/capsules/documents/browser/assets/fonts/Inter-latin-var.woff2 b/capsules/documents/browser/assets/fonts/Inter-latin-var.woff2
new file mode 100644
index 000000000..91dc3e852
Binary files /dev/null and b/capsules/documents/browser/assets/fonts/Inter-latin-var.woff2 differ
diff --git a/capsules/documents/browser/elastos-theme.js b/capsules/documents/browser/elastos-theme.js
new file mode 100644
index 000000000..bad19b950
--- /dev/null
+++ b/capsules/documents/browser/elastos-theme.js
@@ -0,0 +1,122 @@
+/* GENERATED from capsules/_shared/elastos-theme.js — do not edit. Run `just vendor-ui`. */
+/* ElastOS UI — shared theme runtime (single source of truth).
+ *
+ * Vendored into each participating capsule's browser/ dir by `just vendor-ui`,
+ * next to elastos-ui.css. Everything is served same-origin from the gateway,
+ * so localStorage is the one canonical store (mirrors PC2's approach):
+ *
+ *   localStorage["elastos.ui.theme"]  = "dark" | "light" | "auto"
+ *   localStorage["elastos.ui.accent"] = "blue" | "purple" | "pink" | "red" |
+ *                                       "orange" | "yellow" | "green" | "graphite"
+ *
+ * Dark is the default theme when unset; blue is the default accent. "auto"
+ * follows prefers-color-scheme. The resolved theme is applied as
+ * data-el-theme="light" on <html> (absence means dark); the accent as
+ * data-el-accent (absence means blue) — both activate token blocks in
+ * elastos-ui.css. Cross-document sync is the browser's own `storage` event —
+ * no shell messaging required, and sandboxed app frames (allow-same-origin)
+ * see it.
+ */
+(function () {
+  const KEY = "elastos.ui.theme";
+  const ACCENT_KEY = "elastos.ui.accent";
+  const ACCENTS = [
+    "blue",
+    "purple",
+    "pink",
+    "red",
+    "orange",
+    "yellow",
+    "green",
+    "graphite",
+  ];
+  const media = window.matchMedia
+    ? window.matchMedia("(prefers-color-scheme: light)")
+    : null;
+
+  function preference() {
+    try {
+      const value = localStorage.getItem(KEY);
+      if (value === "light" || value === "dark" || value === "auto") {
+        return value;
+      }
+    } catch (_error) {
+      // Storage may be unavailable; fall through to the default.
+    }
+    return "dark";
+  }
+
+  function resolve(pref) {
+    if (pref === "auto") {
+      return media && media.matches ? "light" : "dark";
+    }
+    return pref;
+  }
+
+  function accentPreference() {
+    try {
+      const value = localStorage.getItem(ACCENT_KEY);
+      if (ACCENTS.includes(value)) {
+        return value;
+      }
+    } catch (_error) {
+      // Storage may be unavailable; fall through to the default.
+    }
+    return "blue";
+  }
+
+  function apply() {
+    if (resolve(preference()) === "light") {
+      document.documentElement.setAttribute("data-el-theme", "light");
+    } else {
+      document.documentElement.removeAttribute("data-el-theme");
+    }
+    const accent = accentPreference();
+    if (accent === "blue") {
+      document.documentElement.removeAttribute("data-el-accent");
+    } else {
+      document.documentElement.setAttribute("data-el-accent", accent);
+    }
+  }
+
+  apply();
+
+  window.addEventListener("storage", (event) => {
+    if (event.key === KEY || event.key === ACCENT_KEY || event.key === null) {
+      apply();
+    }
+  });
+
+  if (media && typeof media.addEventListener === "function") {
+    media.addEventListener("change", () => {
+      if (preference() === "auto") {
+        apply();
+      }
+    });
+  }
+
+  window.elastosTheme = {
+    preference,
+    resolved: () => resolve(preference()),
+    set(value) {
+      const pref = value === "light" || value === "auto" ? value : "dark";
+      try {
+        localStorage.setItem(KEY, pref);
+      } catch (_error) {
+        // Applying still works for this document.
+      }
+      apply();
+    },
+    accents: ACCENTS.slice(),
+    accent: accentPreference,
+    setAccent(value) {
+      const accent = ACCENTS.includes(value) ? value : "blue";
+      try {
+        localStorage.setItem(ACCENT_KEY, accent);
+      } catch (_error) {
+        // Applying still works for this document.
+      }
+      apply();
+    },
+  };
+})();
diff --git a/capsules/documents/browser/elastos-ui.css b/capsules/documents/browser/elastos-ui.css
new file mode 100644
index 000000000..7529596ef
--- /dev/null
+++ b/capsules/documents/browser/elastos-ui.css
@@ -0,0 +1,248 @@
+/* GENERATED from capsules/_shared/elastos-ui.css — do not edit. Run `just vendor-ui`. */
+/* ElastOS UI — shared design tokens (single source of truth).
+ *
+ * This file lives at capsules/_shared/elastos-ui.css and is VENDORED into each
+ * participating capsule's browser/ dir by `just vendor-ui` (no gateway route,
+ * no shared runtime surface — capsules stay self-contained). Edit THIS file,
+ * then run `just vendor-ui`; `just alignment-check` fails on drift.
+ *
+ * Contents: Inter (OFL, latin variable subset), palette, type scale, radii,
+ * hairlines, blur/elevation steps, motion tokens, and minimal control
+ * primitives. Layout is each app's business — tokens only.
+ */
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: optional;
+  src: url("./assets/fonts/Inter-latin-var.woff2") format("woff2");
+}
+
+:root {
+  color-scheme: dark;
+
+  /* Palette */
+  --el-bg: #0b0d10;
+  --el-surface: rgba(22, 24, 29, 0.92);
+  --el-surface-raised: #16181d;
+  --el-inset: rgba(255, 255, 255, 0.06);
+  --el-text: #f5f7fa;
+  --el-muted: rgba(245, 247, 250, 0.7);
+  --el-soft: rgba(245, 247, 250, 0.48);
+  --el-brand: #f6921a;
+  --el-brand-strong: #ffb457;
+  --el-focus: rgba(246, 146, 26, 0.55);
+  --el-danger: #ff8f8f;
+  --el-ok: #34d399;
+
+  /* Hairlines (one pair, everywhere) */
+  --el-hairline: rgba(255, 255, 255, 0.12);
+  --el-hairline-strong: rgba(255, 255, 255, 0.18);
+
+  /* Type: 10/11/12/13/14/16/28; weights 400/500/600/700 */
+  --el-font: "Inter", -apple-system, "Segoe UI", "SF Pro Text", sans-serif;
+  --el-font-mono: ui-monospace, "SF Mono", Menlo, monospace;
+  --el-text-2xs: 10px;
+  --el-text-xs: 11px;
+  --el-text-sm: 12px;
+  --el-text-md: 13px;
+  --el-text-lg: 14px;
+  --el-text-xl: 16px;
+  --el-text-display: 28px;
+
+  /* Radii: 4/6/10/12/16/20 + pill */
+  --el-radius-xs: 4px;
+  --el-radius-sm: 6px;
+  --el-radius-md: 10px;
+  --el-radius-lg: 12px;
+  --el-radius-xl: 16px;
+  --el-radius-2xl: 20px;
+  --el-radius-pill: 999px;
+
+  /* Blur: three steps only */
+  --el-blur-1: 8px;
+  --el-blur-2: 16px;
+  --el-blur-3: 24px;
+
+  /* Elevation: three levels */
+  --el-shadow-1: 0 2px 10px rgba(0, 0, 0, 0.22);
+  --el-shadow-2: 0 12px 28px rgba(0, 0, 0, 0.28);
+  --el-shadow-3: 0 24px 80px rgba(0, 0, 0, 0.35);
+
+  /* Motion: 80/140/180/220, exits 150; one ease */
+  --el-dur-1: 80ms;
+  --el-dur-2: 140ms;
+  --el-dur-3: 180ms;
+  --el-dur-4: 220ms;
+  --el-dur-exit: 150ms;
+  --el-ease: cubic-bezier(0.2, 0, 0, 1);
+
+  /* System accent — ONE accent, chosen by the user in System > Personalization
+     (macOS model), obeyed by every app. Selected via data-el-accent on <html>
+     (absence = blue). Apps consume the derived tones and never define their own
+     accent colors. */
+  --el-accent: #0a84ff;
+  --el-accent-ink: #ffffff;
+  --el-accent-strong: color-mix(in srgb, var(--el-accent) 78%, #ffffff);
+  --el-accent-soft: color-mix(in srgb, var(--el-accent) 22%, transparent);
+  --el-accent-faint: color-mix(in srgb, var(--el-accent) 11%, transparent);
+}
+
+/* The eight macOS accents. Yellow and orange carry dark ink on filled controls. */
+:root[data-el-accent="purple"] {
+  --el-accent: #bf5af2;
+}
+
+:root[data-el-accent="pink"] {
+  --el-accent: #ff375f;
+}
+
+:root[data-el-accent="red"] {
+  --el-accent: #ff453a;
+}
+
+:root[data-el-accent="orange"] {
+  --el-accent: #f6921a;
+  --el-accent-ink: #161616;
+}
+
+:root[data-el-accent="yellow"] {
+  --el-accent: #ffd60a;
+  --el-accent-ink: #161616;
+}
+
+:root[data-el-accent="green"] {
+  --el-accent: #30b84f;
+}
+
+:root[data-el-accent="graphite"] {
+  --el-accent: #8e8e93;
+}
+
+/* Light theme: dark is the default (no attribute); the shell sets
+   data-el-theme="light" on <html> and broadcasts changes to app frames.
+   Values restore the pre-token light look: white raised panels over a cool
+   pale stage, navy ink, the same brand orange. */
+:root[data-el-theme="light"] {
+  color-scheme: light;
+
+  --el-bg: #eef1f6;
+  --el-surface: rgba(255, 255, 255, 0.88);
+  --el-surface-raised: #ffffff;
+  --el-inset: rgba(29, 36, 56, 0.055);
+  --el-text: #1d2438;
+  --el-muted: rgba(29, 36, 56, 0.72);
+  --el-soft: rgba(29, 36, 56, 0.5);
+  --el-brand: #f6921a;
+  --el-brand-strong: #e07f0a;
+  --el-focus: rgba(246, 146, 26, 0.55);
+  --el-danger: #b14c5a;
+  --el-ok: #0a7a52;
+
+  --el-hairline: rgba(29, 36, 56, 0.14);
+  --el-hairline-strong: rgba(29, 36, 56, 0.24);
+
+  --el-shadow-1: 0 2px 10px rgba(34, 49, 88, 0.1);
+  --el-shadow-2: 0 12px 28px rgba(34, 49, 88, 0.12);
+  --el-shadow-3: 0 24px 80px rgba(34, 49, 88, 0.16);
+
+  /* "Strong" means higher contrast against the CURRENT background: lighter on
+     dark, deeper on light. */
+  --el-accent-strong: color-mix(in srgb, var(--el-accent) 72%, #1d2438);
+}
+
+/* App base: opt in by putting .el-app on <body>. Dark shell surface, shared
+   type. Layout untouched. */
+.el-app {
+  margin: 0;
+  background: var(--el-bg);
+  color: var(--el-text);
+  font-family: var(--el-font);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+.el-app :focus-visible {
+  outline: 2px solid var(--el-focus);
+  outline-offset: 2px;
+}
+
+/* Minimal control primitives — enough that a capsule needs no bespoke button
+   or input styling to look native. */
+.el-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 32px;
+  padding: 0 14px;
+  border: 1px solid var(--el-hairline);
+  border-radius: var(--el-radius-md);
+  background: var(--el-inset);
+  color: var(--el-text);
+  font: 500 var(--el-text-md) / 1.2 var(--el-font);
+  cursor: pointer;
+  transition: background-color var(--el-dur-2) var(--el-ease);
+}
+
+/* Hover lift over inset surfaces — flips with the theme so apps don't need
+   their own literal rgba(255,255,255,x) hovers. */
+:root {
+  --el-lift: rgba(255, 255, 255, 0.1);
+  --el-lift-strong: rgba(255, 255, 255, 0.16);
+}
+
+:root[data-el-theme="light"] {
+  --el-lift: rgba(29, 36, 56, 0.08);
+  --el-lift-strong: rgba(29, 36, 56, 0.14);
+}
+
+.el-button:hover {
+  background: var(--el-lift);
+}
+
+.el-button:active {
+  transform: scale(0.96);
+}
+
+.el-button:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
+.el-button-primary {
+  border-color: transparent;
+  background: var(--el-brand);
+  color: #161616;
+  font-weight: 600;
+}
+
+.el-button-primary:hover {
+  background: var(--el-brand-strong);
+}
+
+.el-input {
+  min-height: 32px;
+  padding: 0 10px;
+  border: 1px solid var(--el-hairline);
+  border-radius: var(--el-radius-md);
+  background: var(--el-inset);
+  color: var(--el-text);
+  font: 400 var(--el-text-md) / 1.2 var(--el-font);
+}
+
+.el-input::placeholder {
+  color: var(--el-soft);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .el-app *,
+  .el-app *::before,
+  .el-app *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
diff --git a/capsules/documents/browser/index.html b/capsules/documents/browser/index.html
index 9e80d75af..a765e1021 100644
--- a/capsules/documents/browser/index.html
+++ b/capsules/documents/browser/index.html
@@ -4,38 +4,127 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Documents · ElastOS</title>
+<script src="./elastos-theme.js"></script>
+<link rel="stylesheet" href="./elastos-ui.css">
 <style>
 :root {
-  --bg: #edf1fb;
-  --bg-strong: #e3e9fb;
-  --panel: rgba(255, 255, 255, 0.9);
-  --panel-strong: #ffffff;
-  --panel-soft: #eef2ff;
-  --line: rgba(83, 103, 164, 0.14);
-  --line-strong: rgba(83, 103, 164, 0.22);
-  --ink: #1d2438;
+  --bg: var(--el-bg);
+  --bg-strong: #10131a;
+  --panel: rgba(22, 24, 29, 0.78);
+  --panel-strong: var(--el-surface-raised);
+  --panel-soft: var(--el-inset);
+  --line: var(--el-hairline);
+  --line-strong: var(--el-hairline-strong);
+  --ink: var(--el-text);
   --text: var(--ink);
   --paper: var(--panel);
-  --muted: #66708a;
-  --brand: #f6921a;
-  --brand-soft: #fff1dc;
-  --accent: #5f76d8;
-  --accent-soft: #e8edff;
-  --accent-deep: #3c53a7;
-  --warning: #b14c5a;
-  --danger: #b14c5a;
+  --muted: var(--el-muted);
+  --brand: var(--el-brand);
+  --brand-soft: rgba(246, 146, 26, 0.16);
+  --accent: var(--el-accent);
+  --accent-soft: var(--el-accent-soft);
+  --accent-deep: var(--el-accent-strong);
+  --warning: var(--el-danger);
+  --danger: var(--el-danger);
   --sidebar-bg: var(--panel);
   --sidebar-panel: var(--panel-strong);
   --sidebar-line: var(--line);
   --sidebar-text: var(--ink);
   --sidebar-muted: var(--muted);
-  --shadow: 0 24px 60px rgba(34, 49, 88, 0.12);
+  --shadow: var(--el-shadow-2);
   --radius-xl: 1.35rem;
   --radius-lg: 1.25rem;
   --radius-md: 0.95rem;
   --radius-sm: 0.85rem;
+  color-scheme: dark;
+  font-family: var(--el-font);
+}
+
+:root[data-el-theme="light"] {
+  --bg-strong: #e3e9fb;
+  --panel: rgba(255, 255, 255, 0.9);
+  --brand-soft: #fff1dc;
   color-scheme: light;
-  font-family: "IBM Plex Sans", "Avenir Next", "Segoe UI", sans-serif;
+}
+
+:root[data-el-theme="light"] body {
+  background:
+    radial-gradient(circle at top left, rgba(95, 118, 216, 0.14), transparent 28%),
+    radial-gradient(circle at bottom right, rgba(126, 149, 226, 0.12), transparent 24%),
+    linear-gradient(180deg, #f7f9ff 0%, var(--bg) 100%);
+}
+
+:root[data-el-theme="light"] .document-list-item,
+:root[data-el-theme="light"] .share-doc-link,
+:root[data-el-theme="light"] .outline-item,
+:root[data-el-theme="light"] .history-item {
+  border-color: rgba(83, 103, 164, 0.08);
+}
+
+:root[data-el-theme="light"] .document-list-item:hover,
+:root[data-el-theme="light"] .share-doc-link:hover,
+:root[data-el-theme="light"] .outline-item:hover,
+:root[data-el-theme="light"] .history-item:hover {
+  background: rgba(255, 255, 255, 0.72);
+  border-color: var(--line);
+}
+
+:root[data-el-theme="light"] .document-list-item.active,
+:root[data-el-theme="light"] .share-doc-link.active,
+:root[data-el-theme="light"] .workspace-tab.active {
+  background: var(--accent-soft);
+  border-color: rgba(95, 118, 216, 0.18);
+}
+
+:root[data-el-theme="light"] .document-list-item.published {
+  background: rgba(232, 237, 255, 0.94);
+  border-color: rgba(95, 118, 216, 0.28);
+}
+
+:root[data-el-theme="light"] .document-list-item.published:hover,
+:root[data-el-theme="light"] .document-list-item.published.active {
+  background: rgba(219, 227, 255, 0.98);
+  border-color: rgba(95, 118, 216, 0.36);
+}
+
+:root[data-el-theme="light"] .document-list-published-icon {
+  background: rgba(95, 118, 216, 0.14);
+}
+
+:root[data-el-theme="light"] .action-danger {
+  border-color: rgba(177, 76, 90, 0.22);
+}
+
+:root[data-el-theme="light"] .action-danger:hover:not(:disabled),
+:root[data-el-theme="light"] .action-danger:focus-visible:not(:disabled) {
+  background: rgba(177, 76, 90, 0.1);
+}
+
+:root[data-el-theme="light"] .action-danger-solid {
+  color: #fffaf9;
+}
+
+:root[data-el-theme="light"] .action-danger-solid:hover:not(:disabled),
+:root[data-el-theme="light"] .action-danger-solid:focus-visible:not(:disabled) {
+  background: #963846;
+}
+
+:root[data-el-theme="light"] .modal-backdrop {
+  background: rgba(29, 36, 56, 0.22);
+}
+
+:root[data-el-theme="light"] .markdown-body code,
+:root[data-el-theme="light"] .markdown-body pre,
+:root[data-el-theme="light"] .markdown-body th {
+  background: rgba(83, 103, 164, 0.08);
+}
+
+:root[data-el-theme="light"] .markdown-body pre code {
+  background: transparent;
+}
+
+:root[data-el-theme="light"] .markdown-body blockquote {
+  border-left-color: rgba(95, 118, 216, 0.28);
 }
 
 * {
@@ -52,9 +141,9 @@
   font-family: inherit;
   color: var(--text);
   background:
-    radial-gradient(circle at top left, rgba(95, 118, 216, 0.14), transparent 28%),
-    radial-gradient(circle at bottom right, rgba(126, 149, 226, 0.12), transparent 24%),
-    linear-gradient(180deg, #f7f9ff 0%, var(--bg) 100%);
+    radial-gradient(circle at top left, rgba(125, 149, 240, 0.1), transparent 30%),
+    radial-gradient(circle at bottom right, rgba(125, 149, 240, 0.07), transparent 24%),
+    linear-gradient(180deg, #0f1218 0%, var(--bg) 100%);
 }
 
 button,
@@ -183,7 +272,7 @@
   padding: 0.72rem 0.85rem;
   border: 1px solid var(--sidebar-line);
   border-radius: var(--radius-sm);
-  background: rgba(255, 255, 255, 0.98);
+  background: var(--el-inset);
   color: var(--text);
   outline: none;
 }
@@ -210,14 +299,14 @@
   padding: 0.72rem 0.78rem;
   border-radius: var(--radius-md);
   background: var(--panel-strong);
-  border: 1px solid rgba(83, 103, 164, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.07);
   text-align: left;
   transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
 }
 
 .document-list-item:hover,
 .share-doc-link:hover {
-  background: rgba(255, 255, 255, 0.72);
+  background: rgba(255, 255, 255, 0.08);
   border-color: var(--line);
   transform: translateY(-1px);
 }
@@ -225,18 +314,18 @@
 .document-list-item.active,
 .share-doc-link.active {
   background: var(--accent-soft);
-  border-color: rgba(95, 118, 216, 0.18);
+  border-color: rgba(125, 149, 240, 0.35);
 }
 
 .document-list-item.published {
-  background: rgba(232, 237, 255, 0.94);
-  border-color: rgba(95, 118, 216, 0.28);
+  background: rgba(125, 149, 240, 0.14);
+  border-color: rgba(125, 149, 240, 0.3);
 }
 
 .document-list-item.published:hover,
 .document-list-item.published.active {
-  background: rgba(219, 227, 255, 0.98);
-  border-color: rgba(95, 118, 216, 0.36);
+  background: rgba(125, 149, 240, 0.2);
+  border-color: rgba(125, 149, 240, 0.4);
 }
 
 .document-list-title-row {
@@ -288,7 +377,7 @@
   min-width: 1.35rem;
   height: 1.35rem;
   border-radius: 999px;
-  background: rgba(95, 118, 216, 0.14);
+  background: rgba(125, 149, 240, 0.2);
   color: var(--accent-deep);
 }
 
@@ -414,23 +503,23 @@
 }
 
 .action-danger {
-  border-color: rgba(177, 76, 90, 0.22);
+  border-color: rgba(255, 143, 143, 0.35);
   color: var(--danger);
 }
 
 .action-danger:hover:not(:disabled),
 .action-danger:focus-visible:not(:disabled) {
-  background: rgba(177, 76, 90, 0.1);
+  background: rgba(255, 143, 143, 0.12);
 }
 
 .action-danger-solid {
   background: var(--danger);
-  color: #fffaf9;
+  color: #2a1215;
 }
 
 .action-danger-solid:hover:not(:disabled),
 .action-danger-solid:focus-visible:not(:disabled) {
-  background: #963846;
+  background: #ff9f9f;
 }
 
 .action-link {
@@ -496,7 +585,7 @@
   padding: 0.72rem 0.9rem;
   border-radius: 999px;
   border: 1px solid var(--line);
-  background: rgba(255, 255, 255, 0.56);
+  background: var(--el-inset);
   color: var(--muted);
   font-size: 0.84rem;
   font-weight: 700;
@@ -506,7 +595,7 @@
 
 .workspace-tab.active {
   background: var(--accent-soft);
-  border-color: rgba(95, 118, 216, 0.18);
+  border-color: rgba(125, 149, 240, 0.35);
   color: var(--accent-deep);
 }
 
@@ -591,7 +680,7 @@
 }
 
 .editor::placeholder {
-  color: rgba(102, 112, 138, 0.78);
+  color: var(--el-soft);
 }
 
 .preview-scroll {
@@ -620,12 +709,12 @@
   padding: 0.8rem 0.9rem;
   border-radius: var(--radius-md);
   background: var(--panel-strong);
-  border: 1px solid rgba(83, 103, 164, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.07);
 }
 
 .outline-item:hover,
 .history-item:hover {
-  background: rgba(255, 255, 255, 0.72);
+  background: rgba(255, 255, 255, 0.08);
   border-color: var(--line);
 }
 
@@ -747,7 +836,7 @@
   display: none;
   align-items: center;
   justify-content: center;
-  background: rgba(29, 36, 56, 0.22);
+  background: rgba(0, 0, 0, 0.55);
   padding: 1rem;
   z-index: 30;
 }
@@ -795,7 +884,7 @@
   padding: 0.8rem 0.85rem;
   border: 1px solid var(--line-strong);
   border-radius: var(--radius-sm);
-  background: #fff;
+  background: var(--el-inset);
 }
 
 .modal-actions {
@@ -866,10 +955,10 @@
 }
 
 .markdown-body code {
-  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
+  font-family: var(--el-font-mono);
   font-size: 0.9em;
   padding: 0.15em 0.35em;
-  background: rgba(83, 103, 164, 0.08);
+  background: rgba(255, 255, 255, 0.07);
   border-radius: 0.35rem;
 }
 
@@ -877,7 +966,7 @@
   overflow: auto;
   padding: 0.95rem 1rem;
   border-radius: var(--radius-sm);
-  background: rgba(83, 103, 164, 0.08);
+  background: rgba(255, 255, 255, 0.07);
 }
 
 .markdown-body pre code {
@@ -887,7 +976,7 @@
 
 .markdown-body blockquote {
   padding-left: 1rem;
-  border-left: 3px solid rgba(95, 118, 216, 0.28);
+  border-left: 3px solid rgba(125, 149, 240, 0.35);
   color: var(--muted);
 }
 
@@ -904,7 +993,7 @@
 }
 
 .markdown-body th {
-  background: rgba(83, 103, 164, 0.08);
+  background: rgba(255, 255, 255, 0.07);
 }
 
 @media (max-width: 980px) {
@@ -965,7 +1054,7 @@
   .documents-sidebar,
   .share-sidebar {
     border-radius: 0.82rem;
-    box-shadow: 0 10px 26px rgba(34, 49, 88, 0.08);
+    box-shadow: var(--el-shadow-1);
   }
 
   .documents-main,
@@ -2228,6 +2317,10 @@ <h2 id="confirm-title">Continue?</h2>
       return;
     }
     const data = event.data;
+    if (data && typeof data === "object" && data.type === "elastos:menu-command") {
+      handleShellMenuCommand(data.cmd);
+      return;
+    }
     if (!data || typeof data !== "object" || data.type !== "documents:open-chat-attachment") {
       return;
     }
@@ -2479,8 +2572,75 @@ <h2 id="confirm-title">Continue?</h2>
     '<div class="empty-document"><h2>Documents is ready.</h2><p>Open it from Home to create, edit, or publish documents.</p></div>';
 }
 
+// Shell menu bar: declare File/View menus to Home; commands come back as
+// elastos:menu-command and route to the same functions the toolbar uses.
+function announceShellMenuManifest() {
+  if (!state.homeToken || window.parent === window) {
+    return;
+  }
+  window.parent.postMessage({
+    type: "home:menu-manifest",
+    homeToken: state.homeToken,
+    menus: [
+      {
+        title: "File",
+        items: [
+          { label: "New Document", cmd: "new-document" },
+          "-",
+          { label: "Save", cmd: "save" },
+          { label: "Save As...", cmd: "save-as" },
+          "-",
+          { label: "Publish", cmd: "publish" },
+          { label: "Delete Document", cmd: "delete" },
+          "-",
+          { label: "Close Window", cmd: "__close-window" },
+        ],
+      },
+      {
+        title: "View",
+        items: [
+          { label: "Write", cmd: "view-write" },
+          { label: "Split", cmd: "view-split" },
+          { label: "Read", cmd: "view-read" },
+        ],
+      },
+    ],
+  }, window.location.origin);
+}
+
+function handleShellMenuCommand(cmd) {
+  switch (cmd) {
+    case "new-document":
+      createDocument("");
+      return;
+    case "save":
+      saveCurrent().catch((error) => setStatus(error.message || "Save failed.", "warning"));
+      return;
+    case "save-as":
+      openSaveAsModal();
+      return;
+    case "publish":
+      publishCurrent().catch((error) => setStatus(error.message || "Publish failed.", "warning"));
+      return;
+    case "delete":
+      requestDeleteCurrent();
+      return;
+    case "view-write":
+      setWorkspaceView("write");
+      return;
+    case "view-split":
+      setWorkspaceView("split");
+      return;
+    case "view-read":
+      setWorkspaceView("read");
+      return;
+    default:
+  }
+}
+
 (async function init() {
   if (state.homeToken) {
+    announceShellMenuManifest();
     await loadShellMode();
   } else if (window.location.pathname.startsWith("/apps/documents")) {
     loadLockedMode();
diff --git a/capsules/gba-emulator/browser/assets/fonts/Inter-latin-var.woff2 b/capsules/gba-emulator/browser/assets/fonts/Inter-latin-var.woff2
new file mode 100644
index 000000000..91dc3e852
Binary files /dev/null and b/capsules/gba-emulator/browser/assets/fonts/Inter-latin-var.woff2 differ
diff --git a/capsules/gba-emulator/browser/elastos-theme.js b/capsules/gba-emulator/browser/elastos-theme.js
new file mode 100644
index 000000000..bad19b950
--- /dev/null
+++ b/capsules/gba-emulator/browser/elastos-theme.js
@@ -0,0 +1,122 @@
+/* GENERATED from capsules/_shared/elastos-theme.js — do not edit. Run `just vendor-ui`. */
+/* ElastOS UI — shared theme runtime (single source of truth).
+ *
+ * Vendored into each participating capsule's browser/ dir by `just vendor-ui`,
+ * next to elastos-ui.css. Everything is served same-origin from the gateway,
+ * so localStorage is the one canonical store (mirrors PC2's approach):
+ *
+ *   localStorage["elastos.ui.theme"]  = "dark" | "light" | "auto"
+ *   localStorage["elastos.ui.accent"] = "blue" | "purple" | "pink" | "red" |
+ *                                       "orange" | "yellow" | "green" | "graphite"
+ *
+ * Dark is the default theme when unset; blue is the default accent. "auto"
+ * follows prefers-color-scheme. The resolved theme is applied as
+ * data-el-theme="light" on <html> (absence means dark); the accent as
+ * data-el-accent (absence means blue) — both activate token blocks in
+ * elastos-ui.css. Cross-document sync is the browser's own `storage` event —
+ * no shell messaging required, and sandboxed app frames (allow-same-origin)
+ * see it.
+ */
+(function () {
+  const KEY = "elastos.ui.theme";
+  const ACCENT_KEY = "elastos.ui.accent";
+  const ACCENTS = [
+    "blue",
+    "purple",
+    "pink",
+    "red",
+    "orange",
+    "yellow",
+    "green",
+    "graphite",
+  ];
+  const media = window.matchMedia
+    ? window.matchMedia("(prefers-color-scheme: light)")
+    : null;
+
+  function preference() {
+    try {
+      const value = localStorage.getItem(KEY);
+      if (value === "light" || value === "dark" || value === "auto") {
+        return value;
+      }
+    } catch (_error) {
+      // Storage may be unavailable; fall through to the default.
+    }
+    return "dark";
+  }
+
+  function resolve(pref) {
+    if (pref === "auto") {
+      return media && media.matches ? "light" : "dark";
+    }
+    return pref;
+  }
+
+  function accentPreference() {
+    try {
+      const value = localStorage.getItem(ACCENT_KEY);
+      if (ACCENTS.includes(value)) {
+        return value;
+      }
+    } catch (_error) {
+      // Storage may be unavailable; fall through to the default.
+    }
+    return "blue";
+  }
+
+  function apply() {
+    if (resolve(preference()) === "light") {
+      document.documentElement.setAttribute("data-el-theme", "light");
+    } else {
+      document.documentElement.removeAttribute("data-el-theme");
+    }
+    const accent = accentPreference();
+    if (accent === "blue") {
+      document.documentElement.removeAttribute("data-el-accent");
+    } else {
+      document.documentElement.setAttribute("data-el-accent", accent);
+    }
+  }
+
+  apply();
+
+  window.addEventListener("storage", (event) => {
+    if (event.key === KEY || event.key === ACCENT_KEY || event.key === null) {
+      apply();
+    }
+  });
+
+  if (media && typeof media.addEventListener === "function") {
+    media.addEventListener("change", () => {
+      if (preference() === "auto") {
+        apply();
+      }
+    });
+  }
+
+  window.elastosTheme = {
+    preference,
+    resolved: () => resolve(preference()),
+    set(value) {
+      const pref = value === "light" || value === "auto" ? value : "dark";
+      try {
+        localStorage.setItem(KEY, pref);
+      } catch (_error) {
+        // Applying still works for this document.
+      }
+      apply();
+    },
+    accents: ACCENTS.slice(),
+    accent: accentPreference,
+    setAccent(value) {
+      const accent = ACCENTS.includes(value) ? value : "blue";
+      try {
+        localStorage.setItem(ACCENT_KEY, accent);
+      } catch (_error) {
+        // Applying still works for this document.
+      }
+      apply();
+    },
+  };
+})();
diff --git a/capsules/gba-emulator/browser/elastos-ui.css b/capsules/gba-emulator/browser/elastos-ui.css
new file mode 100644
index 000000000..7529596ef
--- /dev/null
+++ b/capsules/gba-emulator/browser/elastos-ui.css
@@ -0,0 +1,248 @@
+/* GENERATED from capsules/_shared/elastos-ui.css — do not edit. Run `just vendor-ui`. */
+/* ElastOS UI — shared design tokens (single source of truth).
+ *
+ * This file lives at capsules/_shared/elastos-ui.css and is VENDORED into each
+ * participating capsule's browser/ dir by `just vendor-ui` (no gateway route,
+ * no shared runtime surface — capsules stay self-contained). Edit THIS file,
+ * then run `just vendor-ui`; `just alignment-check` fails on drift.
+ *
+ * Contents: Inter (OFL, latin variable subset), palette, type scale, radii,
+ * hairlines, blur/elevation steps, motion tokens, and minimal control
+ * primitives. Layout is each app's business — tokens only.
+ */
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: optional;
+  src: url("./assets/fonts/Inter-latin-var.woff2") format("woff2");
+}
+
+:root {
+  color-scheme: dark;
+
+  /* Palette */
+  --el-bg: #0b0d10;
+  --el-surface: rgba(22, 24, 29, 0.92);
+  --el-surface-raised: #16181d;
+  --el-inset: rgba(255, 255, 255, 0.06);
+  --el-text: #f5f7fa;
+  --el-muted: rgba(245, 247, 250, 0.7);
+  --el-soft: rgba(245, 247, 250, 0.48);
+  --el-brand: #f6921a;
+  --el-brand-strong: #ffb457;
+  --el-focus: rgba(246, 146, 26, 0.55);
+  --el-danger: #ff8f8f;
+  --el-ok: #34d399;
+
+  /* Hairlines (one pair, everywhere) */
+  --el-hairline: rgba(255, 255, 255, 0.12);
+  --el-hairline-strong: rgba(255, 255, 255, 0.18);
+
+  /* Type: 10/11/12/13/14/16/28; weights 400/500/600/700 */
+  --el-font: "Inter", -apple-system, "Segoe UI", "SF Pro Text", sans-serif;
+  --el-font-mono: ui-monospace, "SF Mono", Menlo, monospace;
+  --el-text-2xs: 10px;
+  --el-text-xs: 11px;
+  --el-text-sm: 12px;
+  --el-text-md: 13px;
+  --el-text-lg: 14px;
+  --el-text-xl: 16px;
+  --el-text-display: 28px;
+
+  /* Radii: 4/6/10/12/16/20 + pill */
+  --el-radius-xs: 4px;
+  --el-radius-sm: 6px;
+  --el-radius-md: 10px;
+  --el-radius-lg: 12px;
+  --el-radius-xl: 16px;
+  --el-radius-2xl: 20px;
+  --el-radius-pill: 999px;
+
+  /* Blur: three steps only */
+  --el-blur-1: 8px;
+  --el-blur-2: 16px;
+  --el-blur-3: 24px;
+
+  /* Elevation: three levels */
+  --el-shadow-1: 0 2px 10px rgba(0, 0, 0, 0.22);
+  --el-shadow-2: 0 12px 28px rgba(0, 0, 0, 0.28);
+  --el-shadow-3: 0 24px 80px rgba(0, 0, 0, 0.35);
+
+  /* Motion: 80/140/180/220, exits 150; one ease */
+  --el-dur-1: 80ms;
+  --el-dur-2: 140ms;
+  --el-dur-3: 180ms;
+  --el-dur-4: 220ms;
+  --el-dur-exit: 150ms;
+  --el-ease: cubic-bezier(0.2, 0, 0, 1);
+
+  /* System accent — ONE accent, chosen by the user in System > Personalization
+     (macOS model), obeyed by every app. Selected via data-el-accent on <html>
+     (absence = blue). Apps consume the derived tones and never define their own
+     accent colors. */
+  --el-accent: #0a84ff;
+  --el-accent-ink: #ffffff;
+  --el-accent-strong: color-mix(in srgb, var(--el-accent) 78%, #ffffff);
+  --el-accent-soft: color-mix(in srgb, var(--el-accent) 22%, transparent);
+  --el-accent-faint: color-mix(in srgb, var(--el-accent) 11%, transparent);
+}
+
+/* The eight macOS accents. Yellow and orange carry dark ink on filled controls. */
+:root[data-el-accent="purple"] {
+  --el-accent: #bf5af2;
+}
+
+:root[data-el-accent="pink"] {
+  --el-accent: #ff375f;
+}
+
+:root[data-el-accent="red"] {
+  --el-accent: #ff453a;
+}
+
+:root[data-el-accent="orange"] {
+  --el-accent: #f6921a;
+  --el-accent-ink: #161616;
+}
+
+:root[data-el-accent="yellow"] {
+  --el-accent: #ffd60a;
+  --el-accent-ink: #161616;
+}
+
+:root[data-el-accent="green"] {
+  --el-accent: #30b84f;
+}
+
+:root[data-el-accent="graphite"] {
+  --el-accent: #8e8e93;
+}
+
+/* Light theme: dark is the default (no attribute); the shell sets
+   data-el-theme="light" on <html> and broadcasts changes to app frames.
+   Values restore the pre-token light look: white raised panels over a cool
+   pale stage, navy ink, the same brand orange. */
+:root[data-el-theme="light"] {
+  color-scheme: light;
+
+  --el-bg: #eef1f6;
+  --el-surface: rgba(255, 255, 255, 0.88);
+  --el-surface-raised: #ffffff;
+  --el-inset: rgba(29, 36, 56, 0.055);
+  --el-text: #1d2438;
+  --el-muted: rgba(29, 36, 56, 0.72);
+  --el-soft: rgba(29, 36, 56, 0.5);
+  --el-brand: #f6921a;
+  --el-brand-strong: #e07f0a;
+  --el-focus: rgba(246, 146, 26, 0.55);
+  --el-danger: #b14c5a;
+  --el-ok: #0a7a52;
+
+  --el-hairline: rgba(29, 36, 56, 0.14);
+  --el-hairline-strong: rgba(29, 36, 56, 0.24);
+
+  --el-shadow-1: 0 2px 10px rgba(34, 49, 88, 0.1);
+  --el-shadow-2: 0 12px 28px rgba(34, 49, 88, 0.12);
+  --el-shadow-3: 0 24px 80px rgba(34, 49, 88, 0.16);
+
+  /* "Strong" means higher contrast against the CURRENT background: lighter on
+     dark, deeper on light. */
+  --el-accent-strong: color-mix(in srgb, var(--el-accent) 72%, #1d2438);
+}
+
+/* App base: opt in by putting .el-app on <body>. Dark shell surface, shared
+   type. Layout untouched. */
+.el-app {
+  margin: 0;
+  background: var(--el-bg);
+  color: var(--el-text);
+  font-family: var(--el-font);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+.el-app :focus-visible {
+  outline: 2px solid var(--el-focus);
+  outline-offset: 2px;
+}
+
+/* Minimal control primitives — enough that a capsule needs no bespoke button
+   or input styling to look native. */
+.el-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 32px;
+  padding: 0 14px;
+  border: 1px solid var(--el-hairline);
+  border-radius: var(--el-radius-md);
+  background: var(--el-inset);
+  color: var(--el-text);
+  font: 500 var(--el-text-md) / 1.2 var(--el-font);
+  cursor: pointer;
+  transition: background-color var(--el-dur-2) var(--el-ease);
+}
+
+/* Hover lift over inset surfaces — flips with the theme so apps don't need
+   their own literal rgba(255,255,255,x) hovers. */
+:root {
+  --el-lift: rgba(255, 255, 255, 0.1);
+  --el-lift-strong: rgba(255, 255, 255, 0.16);
+}
+
+:root[data-el-theme="light"] {
+  --el-lift: rgba(29, 36, 56, 0.08);
+  --el-lift-strong: rgba(29, 36, 56, 0.14);
+}
+
+.el-button:hover {
+  background: var(--el-lift);
+}
+
+.el-button:active {
+  transform: scale(0.96);
+}
+
+.el-button:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
+.el-button-primary {
+  border-color: transparent;
+  background: var(--el-brand);
+  color: #161616;
+  font-weight: 600;
+}
+
+.el-button-primary:hover {
+  background: var(--el-brand-strong);
+}
+
+.el-input {
+  min-height: 32px;
+  padding: 0 10px;
+  border: 1px solid var(--el-hairline);
+  border-radius: var(--el-radius-md);
+  background: var(--el-inset);
+  color: var(--el-text);
+  font: 400 var(--el-text-md) / 1.2 var(--el-font);
+}
+
+.el-input::placeholder {
+  color: var(--el-soft);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .el-app *,
+  .el-app *::before,
+  .el-app *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
diff --git a/capsules/gba-emulator/browser/index.html b/capsules/gba-emulator/browser/index.html
index cb7d5fbcd..24aaa40e0 100644
--- a/capsules/gba-emulator/browser/index.html
+++ b/capsules/gba-emulator/browser/index.html
@@ -5,6 +5,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <title>GBA Emulator - ElastOS</title>
   <link rel="icon" href="favicon.svg" type="image/svg+xml">
+  <script src="elastos-theme.js"></script>
+  <link rel="stylesheet" href="elastos-ui.css">
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
diff --git a/capsules/gba-emulator/browser/style.css b/capsules/gba-emulator/browser/style.css
index 8af704798..f909cf2f8 100644
--- a/capsules/gba-emulator/browser/style.css
+++ b/capsules/gba-emulator/browser/style.css
@@ -1,24 +1,27 @@
+/* Chrome rides the shared tokens (dark default, light via data-el-theme).
+   The console bezel, screen, and their overlays stay deliberately dark in
+   both themes — that zone is device hardware, not app chrome. */
 :root {
-  --bg: #edf1fb;
-  --bg-strong: #e3e9fb;
-  --panel: rgba(255, 255, 255, 0.9);
-  --panel-strong: #ffffff;
-  --panel-soft: #eef2ff;
-  --line: rgba(83, 103, 164, 0.14);
-  --line-strong: rgba(83, 103, 164, 0.22);
-  --ink: #1d2438;
-  --muted: #66708a;
-  --brand: #f6921a;
-  --brand-soft: #fff1dc;
-  --accent: #5f76d8;
-  --accent-soft: #e8edff;
-  --accent-deep: #3c53a7;
-  --danger: #b14c5a;
-  --shadow: 0 24px 60px rgba(34, 49, 88, 0.12);
+  --bg: var(--el-bg);
+  --bg-strong: var(--el-bg);
+  --panel: var(--el-surface);
+  --panel-strong: var(--el-surface-raised);
+  --panel-soft: var(--el-inset);
+  --line: var(--el-hairline);
+  --line-strong: var(--el-hairline-strong);
+  --ink: var(--el-text);
+  --muted: var(--el-muted);
+  --brand: var(--el-brand);
+  --brand-soft: color-mix(in srgb, var(--el-brand) 16%, transparent);
+  --accent: var(--el-accent);
+  --accent-soft: var(--el-accent-faint);
+  --accent-deep: var(--el-accent-strong);
+  --danger: var(--el-danger);
+  --shadow: var(--el-shadow-2);
   --control-size: 2.7rem;
   --action-size: 3.15rem;
   --control-gap: 0.75rem;
-  font-family: "IBM Plex Sans", "Avenir Next", "Segoe UI", sans-serif;
+  font-family: var(--el-font);
 }
 
 * {
@@ -38,9 +41,8 @@ body {
 
 body {
   background:
-    radial-gradient(circle at top left, rgba(95, 118, 216, 0.14), transparent 28%),
-    radial-gradient(circle at bottom right, rgba(126, 149, 226, 0.12), transparent 24%),
-    linear-gradient(180deg, #f7f9ff 0%, var(--bg) 100%);
+    radial-gradient(circle at top left, var(--el-accent-faint), transparent 28%),
+    var(--bg);
   color: var(--ink);
   overflow: hidden;
   overscroll-behavior: none;
@@ -102,7 +104,7 @@ body[data-emulator-host-mode="embedded"] .shell {
 .utility-card {
   border: 1px solid var(--line);
   border-radius: 1.25rem;
-  background: rgba(255, 255, 255, 0.88);
+  background: var(--panel);
   box-shadow: var(--shadow);
   backdrop-filter: blur(12px);
 }
@@ -232,8 +234,8 @@ body[data-emulator-host-mode="standalone"] #screen-container {
 }
 
 #drop-zone.drag-over {
-  background: rgba(95, 118, 216, 0.18);
-  box-shadow: inset 0 0 0 2px rgba(95, 118, 216, 0.5);
+  background: var(--el-accent-soft);
+  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--el-accent) 50%, transparent);
 }
 
 #drop-zone.hidden {
@@ -303,11 +305,16 @@ body[data-emulator-host-mode="standalone"] #screen-container {
   color: rgba(223, 230, 255, 0.72);
 }
 
-.rom-library-item:hover,
+.rom-library-item:hover {
+  border-color: color-mix(in srgb, var(--el-accent) 48%, transparent);
+  background: rgba(22, 34, 58, 0.94);
+}
+
 .rom-library-item:focus-visible {
-  border-color: rgba(95, 118, 216, 0.48);
+  border-color: color-mix(in srgb, var(--el-accent) 48%, transparent);
   background: rgba(22, 34, 58, 0.94);
-  outline: none;
+  outline: 2px solid var(--el-focus);
+  outline-offset: 2px;
 }
 
 #file-input {
@@ -391,7 +398,7 @@ body[data-emulator-host-mode="standalone"] #screen-container {
 #emulator-controls button:hover,
 .state-actions button:hover {
   background: var(--accent-soft);
-  border-color: rgba(95, 118, 216, 0.32);
+  border-color: color-mix(in srgb, var(--el-accent) 34%, transparent);
 }
 
 .shoulder-btn:active,
@@ -466,9 +473,9 @@ body[data-emulator-host-mode="standalone"] #screen-container {
   width: var(--action-size);
   height: var(--action-size);
   border-radius: 999px;
-  background: linear-gradient(180deg, #7f95e4 0%, var(--accent) 100%);
+  background: linear-gradient(180deg, var(--el-accent-strong) 0%, var(--accent) 100%);
   border: 0;
-  color: white;
+  color: var(--el-accent-ink);
   font-size: 0.98rem;
   font-weight: 800;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
@@ -859,7 +866,7 @@ input:disabled {
     aspect-ratio: auto;
     padding: 0.4rem 0.82rem;
     border-radius: 999px;
-    box-shadow: 0 10px 22px rgba(34, 49, 88, 0.12);
+    box-shadow: var(--el-shadow-1);
   }
 }
 
diff --git a/capsules/home-gui/browser/assets/fonts/Inter-latin-var.woff2 b/capsules/home-gui/browser/assets/fonts/Inter-latin-var.woff2
new file mode 100644
index 000000000..91dc3e852
Binary files /dev/null and b/capsules/home-gui/browser/assets/fonts/Inter-latin-var.woff2 differ
diff --git a/capsules/home-gui/browser/elastos-logo-ink.svg b/capsules/home-gui/browser/elastos-logo-ink.svg
new file mode 100644
index 000000000..e707b602a
--- /dev/null
+++ b/capsules/home-gui/browser/elastos-logo-ink.svg
@@ -0,0 +1,18 @@
+<svg width="2910" height="485" viewBox="0 0 2910 485" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M669.61 232.852L591.367 186.764L558.141 167.471C545.279 159.968 530.273 159.968 517.411 167.471L365.212 255.361C352.351 262.863 337.345 262.863 324.483 255.361L173.356 167.471C160.494 159.968 145.489 159.968 132.627 167.471L99.4004 186.764L21.1572 232.852C-5.63835 248.93 -5.63835 287.515 21.1572 302.521L154.063 379.692L326.627 479.372C339.489 486.875 354.494 486.875 367.356 479.372L539.92 379.692L672.826 302.521C697.478 287.515 697.478 248.93 669.61 232.852Z" fill="url(#paint0_linear_47_14)"/>
+<path d="M669.622 71.0086L557.08 5.62709C544.218 -1.8757 529.213 -1.8757 516.351 5.62709L364.152 93.517C351.29 101.02 336.284 101.02 323.423 93.517L171.224 5.62709C158.362 -1.8757 143.356 -1.8757 130.494 5.62709L20.0967 71.0086C-6.6989 87.086 -6.6989 125.672 20.0967 140.677L99.4116 186.766L153.003 217.849L325.566 317.529C338.428 325.031 353.434 325.031 366.296 317.529L538.859 217.849L592.45 186.766L671.765 140.677C697.489 125.672 697.489 87.086 669.622 71.0086Z" fill="url(#paint1_linear_47_14)"/>
+<g opacity="0.3">
+<path d="M324.478 318.616C337.34 326.119 352.345 326.119 365.207 318.616L537.771 218.936L591.362 187.853L558.135 168.561C545.273 161.058 530.268 161.058 517.406 168.561L365.207 256.45C352.345 263.953 337.34 263.953 324.478 256.45L173.351 167.489C160.489 159.986 145.483 159.986 132.622 167.489L99.395 186.782L152.986 217.864L324.478 318.616Z" fill="#F6921A"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1901.36 101.85C1867.24 101.85 1841.57 110.28 1824.34 124.655C1807.02 139.105 1798.73 159.153 1798.73 181.196C1798.73 201.472 1804.13 218.037 1815.94 230.381C1827.67 242.643 1845.14 250.116 1868.05 253.504L1868.06 253.506L1928.92 262.809C1944.78 265.457 1955.36 269.971 1961.99 276.431C1968.46 282.735 1971.78 291.508 1971.78 304.192C1971.78 318.222 1968 328.551 1958.87 335.616C1949.43 342.919 1933.4 347.454 1907.18 347.454C1878.03 347.454 1859.37 340.355 1847.89 329.269C1836.42 318.198 1831.31 302.37 1830.94 283.146L1830.84 278.39H1814.06C1800.95 278.39 1789.07 289.266 1791.4 303.352C1795.03 325.379 1805.17 345.317 1824.13 359.676C1843.02 373.987 1870.18 382.374 1907.18 382.374C1943.76 382.374 1970.57 375.219 1988.3 360.984C2006.24 346.578 2014.07 325.59 2014.07 299.924C2014.07 278.158 2007.72 261.343 1994.81 249.072C1982.06 236.956 1963.49 229.83 1940.15 226.071L1875.73 216.369L1875.71 216.366C1861.72 214.154 1853.24 209.393 1848.21 203.47C1843.18 197.545 1841.02 189.787 1841.02 180.42C1841.02 167.234 1845.42 156.621 1854.64 149.177C1864.03 141.6 1879.07 136.77 1901.36 136.77C1924.85 136.77 1941.04 142.498 1951.72 151.78C1962.38 161.038 1968.2 174.394 1969.86 190.99L1970.3 195.358H1985.31C1999 195.358 2011.39 183.356 2007.4 168.724C2001.88 148.517 1990.4 131.665 1972.56 119.931C1954.8 108.24 1931.07 101.85 1901.36 101.85ZM2478.45 101.85C2432.5 101.85 2398.85 117.014 2376.76 142.623C2354.77 168.115 2344.78 203.329 2344.78 242.5C2344.78 282.238 2354.77 317.466 2376.77 342.824C2398.87 368.296 2432.53 383.15 2478.45 383.15C2524.38 383.15 2557.95 368.192 2579.95 342.666C2601.85 317.261 2611.73 282.038 2611.73 242.5C2611.73 203.529 2601.84 168.32 2579.96 142.781C2557.97 117.119 2524.41 101.85 2478.45 101.85ZM2388.24 242.5C2388.24 206.732 2395.44 180.846 2409.88 163.926C2424.18 147.166 2446.36 138.322 2478.45 138.322C2510.54 138.322 2532.62 147.166 2546.82 163.914C2561.17 180.831 2568.27 206.719 2568.27 242.5C2568.27 278.281 2561.17 304.168 2546.82 321.086C2532.62 337.834 2510.54 346.678 2478.45 346.678C2446.36 346.678 2424.18 337.833 2409.88 321.074C2395.44 304.154 2388.24 278.268 2388.24 242.5ZM2796.74 101.85C2762.63 101.85 2736.95 110.28 2719.72 124.655C2702.4 139.105 2694.12 159.153 2694.12 181.196C2694.12 201.472 2699.51 218.037 2711.32 230.381C2723.05 242.643 2740.52 250.116 2763.43 253.504L2763.44 253.506L2824.3 262.809C2840.17 265.457 2850.75 269.971 2857.38 276.431C2863.85 282.735 2867.17 291.508 2867.17 304.192C2867.17 318.222 2863.39 328.551 2854.26 335.616C2844.82 342.919 2828.78 347.454 2802.56 347.454C2773.41 347.454 2754.75 340.355 2743.27 329.269C2731.81 318.198 2726.69 302.37 2726.32 283.146L2726.23 278.39H2709.44C2696.33 278.39 2684.46 289.266 2686.78 303.352C2690.42 325.379 2700.55 345.317 2719.51 359.676C2738.41 373.987 2765.56 382.374 2802.56 382.374C2839.14 382.374 2865.96 375.219 2883.69 360.984C2901.63 346.578 2909.46 325.59 2909.46 299.924C2909.46 278.158 2903.11 261.343 2890.2 249.072C2877.45 236.956 2858.88 229.83 2835.54 226.071L2771.12 216.369L2771.1 216.366C2757.1 214.154 2748.63 209.393 2743.6 203.47C2738.57 197.545 2736.41 189.787 2736.41 180.42C2736.41 167.234 2740.81 156.621 2750.03 149.177C2759.41 141.6 2774.45 136.77 2796.74 136.77C2820.24 136.77 2836.42 142.498 2847.11 151.78C2857.76 161.038 2863.59 174.394 2865.25 190.99L2865.69 195.358H2880.69C2894.38 195.358 2906.78 183.356 2902.78 168.724C2897.27 148.517 2885.78 131.665 2867.95 119.931C2850.18 108.24 2826.46 101.85 2796.74 101.85ZM2091.66 108.841C2078.27 108.841 2067.41 119.698 2067.41 133.091V144.537H2160.53V376.949H2177.8C2191.19 376.949 2202.05 366.092 2202.05 352.699V144.537H2294.39V133.091C2294.39 119.698 2283.54 108.841 2270.14 108.841H2091.66ZM1616.42 108.841H1578.75L1489.4 343.688C1483.36 359.559 1495.09 376.561 1512.07 376.561H1519.86L1545.08 310.601H1666.06L1691.28 376.561H1699.5C1716.46 376.561 1728.18 359.584 1722.17 343.718L1639.1 124.498C1635.53 115.074 1626.5 108.841 1616.42 108.841ZM1652.68 274.905H1558.48L1605.74 150.654L1652.68 274.905ZM1270.66 108.841C1257.27 108.841 1246.41 119.698 1246.41 133.091V376.561H1399.09C1412.48 376.561 1423.34 365.704 1423.34 352.311V340.865H1288.32V108.841H1270.66ZM978.771 108.841C965.379 108.841 954.521 119.698 954.521 133.091V352.311C954.521 365.704 965.379 376.561 978.771 376.561H1132.03C1145.42 376.561 1156.28 365.704 1156.28 352.311V340.865H996.425V256.669H1119.23C1132.62 256.669 1143.48 245.812 1143.48 232.419V221.361H996.425V144.537H1155.12V133.091C1155.12 119.698 1144.26 108.841 1130.87 108.841H978.771Z" fill="#1d2438"/>
+<defs>
+<linearGradient id="paint0_linear_47_14" x1="345.237" y1="486.014" x2="345.237" y2="162.483" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F6921A"/>
+<stop offset="1" stop-color="#B04200"/>
+</linearGradient>
+<linearGradient id="paint1_linear_47_14" x1="345.229" y1="123.045" x2="345.229" y2="324.279" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFEEDC"/>
+<stop offset="1" stop-color="#FFC382"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/capsules/home-gui/browser/elastos-theme.js b/capsules/home-gui/browser/elastos-theme.js
new file mode 100644
index 000000000..bad19b950
--- /dev/null
+++ b/capsules/home-gui/browser/elastos-theme.js
@@ -0,0 +1,122 @@
+/* GENERATED from capsules/_shared/elastos-theme.js — do not edit. Run `just vendor-ui`. */
+/* ElastOS UI — shared theme runtime (single source of truth).
+ *
+ * Vendored into each participating capsule's browser/ dir by `just vendor-ui`,
+ * next to elastos-ui.css. Everything is served same-origin from the gateway,
+ * so localStorage is the one canonical store (mirrors PC2's approach):
+ *
+ *   localStorage["elastos.ui.theme"]  = "dark" | "light" | "auto"
+ *   localStorage["elastos.ui.accent"] = "blue" | "purple" | "pink" | "red" |
+ *                                       "orange" | "yellow" | "green" | "graphite"
+ *
+ * Dark is the default theme when unset; blue is the default accent. "auto"
+ * follows prefers-color-scheme. The resolved theme is applied as
+ * data-el-theme="light" on <html> (absence means dark); the accent as
+ * data-el-accent (absence means blue) — both activate token blocks in
+ * elastos-ui.css. Cross-document sync is the browser's own `storage` event —
+ * no shell messaging required, and sandboxed app frames (allow-same-origin)
+ * see it.
+ */
+(function () {
+  const KEY = "elastos.ui.theme";
+  const ACCENT_KEY = "elastos.ui.accent";
+  const ACCENTS = [
+    "blue",
+    "purple",
+    "pink",
+    "red",
+    "orange",
+    "yellow",
+    "green",
+    "graphite",
+  ];
+  const media = window.matchMedia
+    ? window.matchMedia("(prefers-color-scheme: light)")
+    : null;
+
+  function preference() {
+    try {
+      const value = localStorage.getItem(KEY);
+      if (value === "light" || value === "dark" || value === "auto") {
+        return value;
+      }
+    } catch (_error) {
+      // Storage may be unavailable; fall through to the default.
+    }
+    return "dark";
+  }
+
+  function resolve(pref) {
+    if (pref === "auto") {
+      return media && media.matches ? "light" : "dark";
+    }
+    return pref;
+  }
+
+  function accentPreference() {
+    try {
+      const value = localStorage.getItem(ACCENT_KEY);
+      if (ACCENTS.includes(value)) {
+        return value;
+      }
+    } catch (_error) {
+      // Storage may be unavailable; fall through to the default.
+    }
+    return "blue";
+  }
+
+  function apply() {
+    if (resolve(preference()) === "light") {
+      document.documentElement.setAttribute("data-el-theme", "light");
+    } else {
+      document.documentElement.removeAttribute("data-el-theme");
+    }
+    const accent = accentPreference();
+    if (accent === "blue") {
+      document.documentElement.removeAttribute("data-el-accent");
+    } else {
+      document.documentElement.setAttribute("data-el-accent", accent);
+    }
+  }
+
+  apply();
+
+  window.addEventListener("storage", (event) => {
+    if (event.key === KEY || event.key === ACCENT_KEY || event.key === null) {
+      apply();
+    }
+  });
+
+  if (media && typeof media.addEventListener === "function") {
+    media.addEventListener("change", () => {
+      if (preference() === "auto") {
+        apply();
+      }
+    });
+  }
+
+  window.elastosTheme = {
+    preference,
+    resolved: () => resolve(preference()),
+    set(value) {
+      const pref = value === "light" || value === "auto" ? value : "dark";
+      try {
+        localStorage.setItem(KEY, pref);
+      } catch (_error) {
+        // Applying still works for this document.
+      }
+      apply();
+    },
+    accents: ACCENTS.slice(),
+    accent: accentPreference,
+    setAccent(value) {
+      const accent = ACCENTS.includes(value) ? value : "blue";
+      try {
+        localStorage.setItem(ACCENT_KEY, accent);
+      } catch (_error) {
+        // Applying still works for this document.
+      }
+      apply();
+    },
+  };
+})();
diff --git a/capsules/home-gui/browser/elastos-ui.css b/capsules/home-gui/browser/elastos-ui.css
new file mode 100644
index 000000000..7529596ef
--- /dev/null
+++ b/capsules/home-gui/browser/elastos-ui.css
@@ -0,0 +1,248 @@
+/* GENERATED from capsules/_shared/elastos-ui.css — do not edit. Run `just vendor-ui`. */
+/* ElastOS UI — shared design tokens (single source of truth).
+ *
+ * This file lives at capsules/_shared/elastos-ui.css and is VENDORED into each
+ * participating capsule's browser/ dir by `just vendor-ui` (no gateway route,
+ * no shared runtime surface — capsules stay self-contained). Edit THIS file,
+ * then run `just vendor-ui`; `just alignment-check` fails on drift.
+ *
+ * Contents: Inter (OFL, latin variable subset), palette, type scale, radii,
+ * hairlines, blur/elevation steps, motion tokens, and minimal control
+ * primitives. Layout is each app's business — tokens only.
+ */
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: optional;
+  src: url("./assets/fonts/Inter-latin-var.woff2") format("woff2");
+}
+
+:root {
+  color-scheme: dark;
+
+  /* Palette */
+  --el-bg: #0b0d10;
+  --el-surface: rgba(22, 24, 29, 0.92);
+  --el-surface-raised: #16181d;
+  --el-inset: rgba(255, 255, 255, 0.06);
+  --el-text: #f5f7fa;
+  --el-muted: rgba(245, 247, 250, 0.7);
+  --el-soft: rgba(245, 247, 250, 0.48);
+  --el-brand: #f6921a;
+  --el-brand-strong: #ffb457;
+  --el-focus: rgba(246, 146, 26, 0.55);
+  --el-danger: #ff8f8f;
+  --el-ok: #34d399;
+
+  /* Hairlines (one pair, everywhere) */
+  --el-hairline: rgba(255, 255, 255, 0.12);
+  --el-hairline-strong: rgba(255, 255, 255, 0.18);
+
+  /* Type: 10/11/12/13/14/16/28; weights 400/500/600/700 */
+  --el-font: "Inter", -apple-system, "Segoe UI", "SF Pro Text", sans-serif;
+  --el-font-mono: ui-monospace, "SF Mono", Menlo, monospace;
+  --el-text-2xs: 10px;
+  --el-text-xs: 11px;
+  --el-text-sm: 12px;
+  --el-text-md: 13px;
+  --el-text-lg: 14px;
+  --el-text-xl: 16px;
+  --el-text-display: 28px;
+
+  /* Radii: 4/6/10/12/16/20 + pill */
+  --el-radius-xs: 4px;
+  --el-radius-sm: 6px;
+  --el-radius-md: 10px;
+  --el-radius-lg: 12px;
+  --el-radius-xl: 16px;
+  --el-radius-2xl: 20px;
+  --el-radius-pill: 999px;
+
+  /* Blur: three steps only */
+  --el-blur-1: 8px;
+  --el-blur-2: 16px;
+  --el-blur-3: 24px;
+
+  /* Elevation: three levels */
+  --el-shadow-1: 0 2px 10px rgba(0, 0, 0, 0.22);
+  --el-shadow-2: 0 12px 28px rgba(0, 0, 0, 0.28);
+  --el-shadow-3: 0 24px 80px rgba(0, 0, 0, 0.35);
+
+  /* Motion: 80/140/180/220, exits 150; one ease */
+  --el-dur-1: 80ms;
+  --el-dur-2: 140ms;
+  --el-dur-3: 180ms;
+  --el-dur-4: 220ms;
+  --el-dur-exit: 150ms;
+  --el-ease: cubic-bezier(0.2, 0, 0, 1);
+
+  /* System accent — ONE accent, chosen by the user in System > Personalization
+     (macOS model), obeyed by every app. Selected via data-el-accent on <html>
+     (absence = blue). Apps consume the derived tones and never define their own
+     accent colors. */
+  --el-accent: #0a84ff;
+  --el-accent-ink: #ffffff;
+  --el-accent-strong: color-mix(in srgb, var(--el-accent) 78%, #ffffff);
+  --el-accent-soft: color-mix(in srgb, var(--el-accent) 22%, transparent);
+  --el-accent-faint: color-mix(in srgb, var(--el-accent) 11%, transparent);
+}
+
+/* The eight macOS accents. Yellow and orange carry dark ink on filled controls. */
+:root[data-el-accent="purple"] {
+  --el-accent: #bf5af2;
+}
+
+:root[data-el-accent="pink"] {
+  --el-accent: #ff375f;
+}
+
+:root[data-el-accent="red"] {
+  --el-accent: #ff453a;
+}
+
+:root[data-el-accent="orange"] {
+  --el-accent: #f6921a;
+  --el-accent-ink: #161616;
+}
+
+:root[data-el-accent="yellow"] {
+  --el-accent: #ffd60a;
+  --el-accent-ink: #161616;
+}
+
+:root[data-el-accent="green"] {
+  --el-accent: #30b84f;
+}
+
+:root[data-el-accent="graphite"] {
+  --el-accent: #8e8e93;
+}
+
+/* Light theme: dark is the default (no attribute); the shell sets
+   data-el-theme="light" on <html> and broadcasts changes to app frames.
+   Values restore the pre-token light look: white raised panels over a cool
+   pale stage, navy ink, the same brand orange. */
+:root[data-el-theme="light"] {
+  color-scheme: light;
+
+  --el-bg: #eef1f6;
+  --el-surface: rgba(255, 255, 255, 0.88);
+  --el-surface-raised: #ffffff;
+  --el-inset: rgba(29, 36, 56, 0.055);
+  --el-text: #1d2438;
+  --el-muted: rgba(29, 36, 56, 0.72);
+  --el-soft: rgba(29, 36, 56, 0.5);
+  --el-brand: #f6921a;
+  --el-brand-strong: #e07f0a;
+  --el-focus: rgba(246, 146, 26, 0.55);
+  --el-danger: #b14c5a;
+  --el-ok: #0a7a52;
+
+  --el-hairline: rgba(29, 36, 56, 0.14);
+  --el-hairline-strong: rgba(29, 36, 56, 0.24);
+
+  --el-shadow-1: 0 2px 10px rgba(34, 49, 88, 0.1);
+  --el-shadow-2: 0 12px 28px rgba(34, 49, 88, 0.12);
+  --el-shadow-3: 0 24px 80px rgba(34, 49, 88, 0.16);
+
+  /* "Strong" means higher contrast against the CURRENT background: lighter on
+     dark, deeper on light. */
+  --el-accent-strong: color-mix(in srgb, var(--el-accent) 72%, #1d2438);
+}
+
+/* App base: opt in by putting .el-app on <body>. Dark shell surface, shared
+   type. Layout untouched. */
+.el-app {
+  margin: 0;
+  background: var(--el-bg);
+  color: var(--el-text);
+  font-family: var(--el-font);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+.el-app :focus-visible {
+  outline: 2px solid var(--el-focus);
+  outline-offset: 2px;
+}
+
+/* Minimal control primitives — enough that a capsule needs no bespoke button
+   or input styling to look native. */
+.el-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 32px;
+  padding: 0 14px;
+  border: 1px solid var(--el-hairline);
+  border-radius: var(--el-radius-md);
+  background: var(--el-inset);
+  color: var(--el-text);
+  font: 500 var(--el-text-md) / 1.2 var(--el-font);
+  cursor: pointer;
+  transition: background-color var(--el-dur-2) var(--el-ease);
+}
+
+/* Hover lift over inset surfaces — flips with the theme so apps don't need
+   their own literal rgba(255,255,255,x) hovers. */
+:root {
+  --el-lift: rgba(255, 255, 255, 0.1);
+  --el-lift-strong: rgba(255, 255, 255, 0.16);
+}
+
+:root[data-el-theme="light"] {
+  --el-lift: rgba(29, 36, 56, 0.08);
+  --el-lift-strong: rgba(29, 36, 56, 0.14);
+}
+
+.el-button:hover {
+  background: var(--el-lift);
+}
+
+.el-button:active {
+  transform: scale(0.96);
+}
+
+.el-button:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
+.el-button-primary {
+  border-color: transparent;
+  background: var(--el-brand);
+  color: #161616;
+  font-weight: 600;
+}
+
+.el-button-primary:hover {
+  background: var(--el-brand-strong);
+}
+
+.el-input {
+  min-height: 32px;
+  padding: 0 10px;
+  border: 1px solid var(--el-hairline);
+  border-radius: var(--el-radius-md);
+  background: var(--el-inset);
+  color: var(--el-text);
+  font: 400 var(--el-text-md) / 1.2 var(--el-font);
+}
+
+.el-input::placeholder {
+  color: var(--el-soft);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .el-app *,
+  .el-app *::before,
+  .el-app *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
diff --git a/capsules/home-gui/browser/home-gui-template.html b/capsules/home-gui/browser/home-gui-template.html
index 844f32423..06ae4e27e 100644
--- a/capsules/home-gui/browser/home-gui-template.html
+++ b/capsules/home-gui/browser/home-gui-template.html
@@ -7,11 +7,82 @@
   hidden
 ></div>
 
-<header class="toolbar" aria-label="Home toolbar" data-home-gui-hidden-by-host="hidden" inert hidden>
-  <button id="toolbar-home" class="toolbar-btn toolbar-brand" type="button" aria-label="Go Home" title="ElastOS">
-    <img src="/apps/home-gui/elastos-logo.svg" alt="ElastOS" draggable="false" />
-  </button>
+<header class="toolbar" aria-label="System bar" data-home-gui-hidden-by-host="hidden" inert hidden>
+  <div id="toolbar-system" class="toolbar-system">
+    <button
+      id="toolbar-home"
+      class="toolbar-btn toolbar-brand"
+      type="button"
+      aria-label="ElastOS menu"
+      title="ElastOS"
+      aria-haspopup="menu"
+      aria-expanded="false"
+      aria-controls="toolbar-identity-menu"
+    >
+      <img src="/apps/home-gui/elastos-logo.svg" alt="" draggable="false" />
+    </button>
+    <div
+      id="toolbar-identity-menu"
+      class="toolbar-identity-menu toolbar-system-menu"
+      role="menu"
+      aria-label="ElastOS"
+      hidden
+    >
+      <div class="toolbar-identity-header" role="presentation">
+        Signed in as <strong id="toolbar-identity-menu-name"></strong>
+      </div>
+      <button id="identity-menu-about" class="toolbar-identity-item" type="button" role="menuitem">
+        About ElastOS
+      </button>
+      <button id="identity-menu-system" class="toolbar-identity-item" type="button" role="menuitem">
+        System Settings…
+      </button>
+      <div class="toolbar-identity-divider" role="separator"></div>
+      <button id="identity-menu-show-desktop" class="toolbar-identity-item" type="button" role="menuitem">
+        Show Desktop
+      </button>
+      <button id="identity-menu-shortcuts" class="toolbar-identity-item" type="button" role="menuitem">
+        Keyboard Shortcuts
+        <span class="toolbar-identity-shortcut" aria-hidden="true">⌘/</span>
+      </button>
+      <div class="toolbar-identity-divider" role="separator"></div>
+      <button id="identity-menu-sign-out" class="toolbar-identity-item" type="button" role="menuitem">
+        Sign Out…
+      </button>
+    </div>
+  </div>
+  <span id="toolbar-active-title" class="toolbar-active-title">Home</span>
+  <nav id="toolbar-menubar" class="toolbar-menubar" aria-label="App menus"></nav>
   <div class="toolbar-spacer"></div>
+  <button
+    id="toolbar-spotlight"
+    class="toolbar-btn spotlight-btn"
+    type="button"
+    aria-label="Search"
+    title="Search (Cmd+Space)"
+  ></button>
+  <button
+    id="toolbar-control-centre"
+    class="toolbar-btn control-centre-btn"
+    type="button"
+    aria-label="Control Centre"
+    title="Control Centre"
+    aria-haspopup="dialog"
+    aria-expanded="false"
+    aria-controls="control-centre"
+  >
+    <span class="control-centre-glyph" aria-hidden="true"></span>
+  </button>
+  <button
+    id="toolbar-wallet"
+    class="toolbar-btn wallet-btn"
+    type="button"
+    aria-label="Wallet"
+    title="Wallet"
+    aria-expanded="false"
+    aria-controls="wallet-rail"
+    hidden
+  ></button>
   <button
     id="toolbar-inbox"
     class="toolbar-btn inbox-btn"
@@ -22,36 +93,200 @@
     <span id="toolbar-inbox-count" class="toolbar-inbox-count" hidden></span>
   </button>
   <button
-    id="toolbar-fullscreen"
-    class="toolbar-btn fullscreen-btn"
+    id="clock"
+    class="toolbar-clock"
     type="button"
-    aria-label="Enter fullscreen"
-    title="Fullscreen"
-    aria-pressed="false"
-  >
-    <img src="/apps/home-gui/fullscreen.svg" alt="" draggable="false" />
-  </button>
-  <button
-    id="toolbar-sign-out"
-    class="toolbar-btn sign-out-btn"
-    type="button"
-    aria-label="Sign out"
-    title="Sign out"
-  ></button>
-  <div id="clock" class="toolbar-clock">--:--</div>
+    aria-haspopup="true"
+    aria-expanded="false"
+    aria-controls="notification-center"
+    aria-label="Clock. Open notifications"
+    title="Notifications"
+  >--:--</button>
 </header>
 
+<aside
+  id="notification-center"
+  class="notification-center"
+  role="group"
+  aria-label="Notification Center"
+  tabindex="-1"
+  aria-hidden="true"
+  inert
+  hidden
+>
+  <div class="notification-center-head">
+    <h2 class="notification-center-title">Notifications</h2>
+    <button id="notification-center-clear" class="notification-center-clear" type="button">
+      Clear all
+    </button>
+  </div>
+  <div id="notification-center-list" class="notification-center-list hide-scrollbar"></div>
+  <p id="notification-center-empty" class="notification-center-empty" hidden>No notifications</p>
+</aside>
+
+<aside
+  id="control-centre"
+  class="control-centre"
+  role="group"
+  aria-label="Control Centre"
+  tabindex="-1"
+  aria-hidden="true"
+  inert
+  hidden
+>
+  <div class="control-centre-section" role="radiogroup" aria-label="Appearance">
+    <div class="control-centre-label">Appearance</div>
+    <div id="control-centre-theme" class="control-centre-segment">
+      <span class="control-centre-segment-thumb" aria-hidden="true"></span>
+      <button type="button" class="control-centre-segment-option" data-theme-option="auto" role="radio" aria-checked="false">
+        Auto
+      </button>
+      <button type="button" class="control-centre-segment-option" data-theme-option="light" role="radio" aria-checked="false">
+        Light
+      </button>
+      <button type="button" class="control-centre-segment-option" data-theme-option="dark" role="radio" aria-checked="false">
+        Dark
+      </button>
+    </div>
+  </div>
+  <div class="control-centre-divider" role="separator"></div>
+  <button id="control-centre-sounds" class="control-centre-row" type="button" role="switch" aria-checked="false">
+    <span class="control-centre-row-label">UI Sounds</span>
+    <span class="control-centre-switch" aria-hidden="true"></span>
+  </button>
+  <button id="control-centre-fullscreen" class="control-centre-row" type="button">
+    <span class="control-centre-row-label">Enter fullscreen</span>
+  </button>
+  <div class="control-centre-divider" role="separator"></div>
+  <button id="control-centre-wallet" class="control-centre-row control-centre-wallet" type="button">
+    <span class="control-centre-row-label">Wallet</span>
+    <span class="control-centre-row-detail">Open</span>
+  </button>
+</aside>
+
+<aside
+  id="wallet-rail"
+  class="wallet-rail"
+  role="complementary"
+  aria-label="Wallet"
+  tabindex="-1"
+  aria-hidden="true"
+  inert
+  hidden
+>
+  <div class="wallet-rail-head">
+    <h2 class="wallet-rail-title">Wallet</h2>
+    <div class="wallet-rail-head-actions">
+      <!-- Chrome only — clicks post into the Wallet frame; authority stays in-capsule. -->
+      <button
+        id="wallet-rail-approvals"
+        class="wallet-rail-head-btn wallet-rail-text-btn"
+        type="button"
+        aria-label="Activity"
+        title="Activity"
+      >
+        <svg class="wallet-rail-icon-svg" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
+          <rect x="3.25" y="2.5" width="9.5" height="11" rx="1.5" />
+          <path d="M5.5 5.5h5M5.5 8h5M5.5 10.5h3" />
+        </svg>
+        <span>Activity</span>
+        <span id="wallet-rail-approvals-badge" class="wallet-rail-badge" hidden></span>
+      </button>
+      <button
+        id="wallet-rail-settings"
+        class="wallet-rail-head-btn wallet-rail-icon-btn"
+        type="button"
+        aria-label="Settings"
+        title="Settings"
+      >
+        <svg class="wallet-rail-icon-svg" viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="12" cy="12" r="3" />
+          <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z" />
+        </svg>
+      </button>
+      <button
+        id="wallet-rail-privacy"
+        class="wallet-rail-head-btn wallet-rail-icon-btn"
+        type="button"
+        aria-label="Hide balances"
+        aria-pressed="false"
+        title="Hide balances"
+      >
+        <svg class="wallet-rail-icon-svg" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M1.75 8s2.5-3.75 6.25-3.75S14.25 8 14.25 8s-2.5 3.75-6.25 3.75S1.75 8 1.75 8Z" />
+          <circle cx="8" cy="8" r="1.75" />
+        </svg>
+      </button>
+      <button
+        id="wallet-rail-open-window"
+        class="wallet-rail-head-btn wallet-rail-text-btn"
+        type="button"
+        aria-label="Open as a window"
+        title="Open as a window"
+      >
+        Open
+      </button>
+      <button
+        id="wallet-rail-close"
+        class="wallet-rail-head-btn wallet-rail-icon-btn wallet-rail-close"
+        type="button"
+        aria-label="Close wallet"
+      >
+        <img src="/apps/home-gui/close.svg" alt="" draggable="false" />
+      </button>
+    </div>
+  </div>
+  <iframe id="wallet-rail-frame" class="wallet-rail-frame" title="Wallet" hidden></iframe>
+  <div id="wallet-rail-error" class="wallet-rail-error" hidden>
+    <h3 class="wallet-rail-error-title">Could not open Wallet</h3>
+    <p class="wallet-rail-error-copy">
+      Home asked the runtime to open Wallet, but the launch did not complete. It may be
+      momentary — trying again is safe.
+    </p>
+    <p id="wallet-rail-error-detail" class="wallet-rail-error-detail"></p>
+    <button id="wallet-rail-retry" class="window-error-retry" type="button">Try Again</button>
+  </div>
+</aside>
+
+<aside
+  id="connector-sheet"
+  class="connector-sheet"
+  role="dialog"
+  aria-modal="true"
+  aria-labelledby="connector-sheet-title"
+  tabindex="-1"
+  aria-hidden="true"
+  inert
+  hidden
+>
+  <div class="connector-sheet-head">
+    <h2 id="connector-sheet-title" class="connector-sheet-title">Connect wallet</h2>
+    <button
+      id="connector-sheet-close"
+      class="wallet-rail-head-btn wallet-rail-icon-btn wallet-rail-close"
+      type="button"
+      aria-label="Close connector"
+    >
+      <img src="/apps/home-gui/close.svg" alt="" draggable="false" />
+    </button>
+  </div>
+  <iframe id="connector-sheet-frame" class="connector-sheet-frame" title="Wallet connector" hidden></iframe>
+</aside>
+
 <main class="desktop-workspace" data-home-gui-hidden-by-host="hidden" inert hidden>
-  <div id="window-snap-preview" class="window-snap-preview" aria-hidden="true" hidden></div>
-  <section id="desktop" class="desktop" aria-live="polite">
+  <section id="desktop" class="desktop">
     <section
       id="desktop-shortcuts"
       class="desktop-shortcuts"
       role="listbox"
       aria-label="Home items"
-      aria-multiselectable="false"
+      aria-multiselectable="true"
       tabindex="0"
     ></section>
+    <div id="window-snap-preview" class="window-snap-preview" aria-hidden="true" hidden></div>
+    <button id="desktop-first-run-hint" class="desktop-first-run-hint" type="button" hidden>
+      Your files live here. Apps are in the Dock below.
+    </button>
   </section>
 </main>
 
@@ -65,6 +300,7 @@
         aria-label="Open launcher"
         aria-controls="launcher"
         aria-expanded="false"
+        data-label="Launcher"
       >
         <span class="taskbar-icon taskbar-icon-launcher"></span>
       </button>
@@ -73,34 +309,151 @@
   </div>
 </footer>
 
-<aside id="launcher" class="launcher" aria-hidden="true" data-open="false" inert hidden>
-  <div class="launcher-popover hide-scrollbar" role="dialog" aria-modal="true" aria-label="Home launcher">
-    <button id="close-launcher" class="launcher-close" type="button" aria-label="Close launcher">
-      <img src="/apps/home-gui/close.svg" alt="" draggable="false" />
-    </button>
-    <div class="launcher-search-wrap">
+<aside id="launcher" class="launcher" aria-hidden="true" data-open="false" data-view="grid" inert hidden>
+  <div class="launcher-popover" role="dialog" aria-modal="true" aria-label="Home launcher">
+    <div class="launcher-header">
+      <div class="launcher-search-wrap">
+        <input
+          id="launcher-search"
+          class="launcher-search-field"
+          type="search"
+          autocomplete="off"
+          placeholder="Search Home"
+          spellcheck="false"
+        />
+      </div>
+      <button
+        id="launcher-view-toggle"
+        class="launcher-header-btn"
+        type="button"
+        aria-label="Switch to list view"
+        aria-pressed="false"
+      ></button>
+      <button id="close-launcher" class="launcher-close launcher-header-btn" type="button" aria-label="Close launcher">
+        <img src="/apps/home-gui/close.svg" alt="" draggable="false" />
+      </button>
+    </div>
+    <div class="launcher-scroll hide-scrollbar">
+      <h1 class="launcher-heading">Open</h1>
+      <div id="launcher-grid" class="launcher-sections"></div>
+      <p id="launcher-empty-state" class="launcher-empty" hidden>No matching items</p>
+    </div>
+  </div>
+</aside>
+
+<aside id="spotlight" class="spotlight" aria-hidden="true" inert hidden>
+  <div class="spotlight-panel" role="dialog" aria-modal="true" aria-label="Spotlight search">
+    <div class="spotlight-bar">
       <input
-        id="launcher-search"
-        class="launcher-search-field"
+        id="spotlight-input"
+        class="spotlight-field"
         type="search"
         autocomplete="off"
-        placeholder="Search Home"
         spellcheck="false"
+        placeholder="Spotlight Search"
+        role="combobox"
+        aria-expanded="false"
+        aria-controls="spotlight-results"
+        aria-activedescendant=""
+        aria-label="Spotlight search"
       />
     </div>
-    <h1 class="launcher-heading">Open</h1>
-    <div id="launcher-grid" class="launcher-sections"></div>
-    <p id="launcher-empty-state" class="launcher-empty" hidden>No matching items</p>
+    <div
+      id="spotlight-results"
+      class="spotlight-results hide-scrollbar"
+      role="listbox"
+      aria-label="Search results"
+      hidden
+    ></div>
   </div>
 </aside>
 
 <div id="desktop-context-menu" class="context-menu" role="menu" aria-label="Home actions" inert hidden></div>
 
+<div id="window-switcher" class="window-switcher" aria-hidden="true" inert hidden>
+  <div
+    id="window-switcher-list"
+    class="window-switcher-list"
+    role="listbox"
+    aria-label="Open windows"
+  ></div>
+</div>
+
+<aside
+  id="quick-look"
+  class="quick-look"
+  role="dialog"
+  aria-modal="true"
+  aria-label="Quick Look"
+  aria-hidden="true"
+  inert
+  hidden
+>
+  <div class="quick-look-panel">
+    <header class="quick-look-head">
+      <div class="quick-look-head-copy">
+        <h2 id="quick-look-title" class="quick-look-title">Preview</h2>
+        <p id="quick-look-meta" class="quick-look-meta"></p>
+      </div>
+      <div class="quick-look-actions">
+        <button id="quick-look-open" class="quick-look-open" type="button">Open</button>
+        <button id="quick-look-close" class="quick-look-close" type="button" aria-label="Close Quick Look">
+          <img src="/apps/home-gui/close.svg" alt="" draggable="false" />
+        </button>
+      </div>
+    </header>
+    <div id="quick-look-stage" class="quick-look-stage"></div>
+  </div>
+</aside>
+
+<section
+  id="shortcuts-overlay"
+  class="shortcuts-overlay"
+  aria-hidden="true"
+  inert
+  hidden
+>
+  <div class="shortcuts-card" role="dialog" aria-modal="true" aria-labelledby="shortcuts-title">
+    <button id="shortcuts-close" class="launcher-close" type="button" aria-label="Close shortcuts">
+      <img src="/apps/home-gui/close.svg" alt="" draggable="false" />
+    </button>
+    <h1 id="shortcuts-title" class="shortcuts-title">Keyboard shortcuts</h1>
+    <dl class="shortcuts-list">
+      <div class="shortcuts-row"><dt>Search (Spotlight)</dt><dd><kbd>⌘</kbd><kbd>Space</kbd> or <kbd>Ctrl</kbd><kbd>Space</kbd></dd></div>
+      <div class="shortcuts-row"><dt>Quick Look</dt><dd><kbd>Space</kbd> on a desktop icon</dd></div>
+      <div class="shortcuts-row"><dt>Mission Control</dt><dd><kbd>F3</kbd></dd></div>
+      <div class="shortcuts-row"><dt>Switch windows</dt><dd><kbd>Alt</kbd><kbd>Tab</kbd></dd></div>
+      <div class="shortcuts-row"><dt>Cycle windows</dt><dd><kbd>⌘</kbd><kbd>`</kbd></dd></div>
+      <div class="shortcuts-row"><dt>Close window</dt><dd><kbd>⌘</kbd><kbd>W</kbd></dd></div>
+      <div class="shortcuts-row"><dt>Navigate desktop</dt><dd><kbd>↑</kbd><kbd>↓</kbd><kbd>←</kbd><kbd>→</kbd> then <kbd>Enter</kbd></dd></div>
+      <div class="shortcuts-row"><dt>App actions</dt><dd><kbd>Shift</kbd><kbd>F10</kbd> on an icon</dd></div>
+      <div class="shortcuts-row"><dt>This overlay</dt><dd><kbd>⌘</kbd><kbd>/</kbd></dd></div>
+    </dl>
+  </div>
+</section>
+
+<section
+  id="about-overlay"
+  class="about-overlay"
+  aria-hidden="true"
+  inert
+  hidden
+>
+  <div class="about-card" role="dialog" aria-modal="true" aria-labelledby="about-title">
+    <button id="about-close" class="launcher-close" type="button" aria-label="Close About ElastOS">
+      <img src="/apps/home-gui/close.svg" alt="" draggable="false" />
+    </button>
+    <img class="about-logo" src="/apps/home-gui/elastos-logo.svg" alt="" draggable="false" />
+    <h1 id="about-title" class="about-title">ElastOS</h1>
+    <p class="about-line">Home GUI shell</p>
+    <p id="about-identity" class="about-line about-identity"></p>
+  </div>
+</section>
+
 <section
   id="home-notification-toast"
   class="home-notification-toast"
-  role="status"
-  aria-live="assertive"
+  role="alert"
   aria-hidden="true"
   inert
   hidden
@@ -121,21 +474,24 @@ <h1 class="launcher-heading">Open</h1>
 </section>
 
 <template id="window-template">
-  <section class="window" role="dialog" aria-modal="false" aria-hidden="true">
+  <section class="window" role="dialog" aria-modal="false" aria-hidden="true" tabindex="-1">
     <div class="window-head">
+      <div class="window-traffic-lights">
+        <button class="window-action-btn" data-action="close" type="button" aria-label="Close">
+          <img src="/apps/home-gui/close.svg" alt="" draggable="false" />
+        </button>
+        <button class="window-action-btn" data-action="minimize" type="button" aria-label="Minimize">
+          <img src="/apps/home-gui/minimize.svg" alt="" draggable="false" />
+        </button>
+        <button class="window-action-btn" data-action="maximize" type="button" aria-label="Maximize">
+          <img src="/apps/home-gui/scale.svg" alt="" draggable="false" />
+        </button>
+      </div>
       <div class="window-head-draggable">
         <span class="window-head-icon"></span>
         <span class="window-head-title"></span>
       </div>
-      <button class="window-action-btn" data-action="minimize" type="button" aria-label="Minimize">
-        <img src="/apps/home-gui/minimize.svg" alt="" draggable="false" />
-      </button>
-      <button class="window-action-btn" data-action="maximize" type="button" aria-label="Maximize">
-        <img src="/apps/home-gui/scale.svg" alt="" draggable="false" />
-      </button>
-      <button class="window-action-btn" data-action="close" type="button" aria-label="Close">
-        <img src="/apps/home-gui/close.svg" alt="" draggable="false" />
-      </button>
+      <div class="window-head-balance" aria-hidden="true"></div>
     </div>
     <div class="window-body"></div>
     <div class="window-resize-handle window-resize-handle-n" data-resize="n" aria-hidden="true"></div>
@@ -179,6 +535,9 @@ <h3 class="window-error-title">Runtime data not attached on this host</h3>
         <dd class="window-error-detail"></dd>
       </div>
     </dl>
+    <div class="window-error-actions" hidden>
+      <button class="window-error-retry" type="button">Try Again</button>
+    </div>
   </div>
 </template>
 
diff --git a/capsules/home-gui/browser/home-gui.js b/capsules/home-gui/browser/home-gui.js
index 00d660571..104734de5 100644
--- a/capsules/home-gui/browser/home-gui.js
+++ b/capsules/home-gui/browser/home-gui.js
@@ -7,11 +7,14 @@ import {
   launcher,
   launcherSearch,
   launcherToggleButton,
+  launcherViewToggle,
   closeLauncherButton,
+  identityMenuSystemButton,
   shellState,
   taskbarTargets,
   toolbarFullscreenButton,
   toolbarHomeButton,
+  identityMenuShowDesktopButton,
   toolbarInboxButton,
   toolbarSignOutButton,
   ensureHomeGuiDom,
@@ -20,16 +23,20 @@ import {
   shellInteractionActive,
   shouldIgnoreDesktopKeydown,
   targetById,
-} from "./shell-core.js?v=home-20260705a";
+} from "./shell-core.js?v=home-20260718m";
 import {
+  bindIdentityMenu,
   clearIdentitySurface,
   syncIdentity,
   updateClock,
-} from "./shell-chrome.js?v=home-20260705a";
+} from "./shell-chrome.js?v=home-20260718m";
 import {
+  beginDesktopMarquee,
+  bindShellSurfaceDom,
   clearDesktopSelection,
   continueTargetDrag,
   filterLauncherItems,
+  finishDesktopMarquee,
   finishTargetDrag,
   handleContextAction,
   hideDesktopContextMenu,
@@ -44,9 +51,11 @@ import {
   renderDesktop,
   renderLauncher,
   renderTaskbar,
+  selectAllDesktopIcons,
   toggleLauncher,
+  updateDesktopMarquee,
   updateTaskbarState,
-} from "./shell-surface.js?v=home-20260705a";
+} from "./shell-surface.js?v=home-20260718m";
 import {
   closeWindow,
   cleanupBeforeUnload,
@@ -57,9 +66,71 @@ import {
   refreshHomeInternalWindows,
   restoreShellSession,
   showDesktopHome,
-} from "./shell-windows.js?v=home-20260705a";
+  supportsMenuNewWindow,
+} from "./shell-windows.js?v=home-20260718m";
+import {
+  bindShellKeyboard,
+  handleDesktopArrowKey,
+  retireKeyboardSurfaces,
+  toggleShortcutsOverlay,
+} from "./shell-keyboard.js?v=home-20260718m";
+import {
+  bindSpotlight,
+  hideSpotlight,
+  showSpotlight,
+} from "./shell-spotlight.js?v=home-20260718m";
+import {
+  bindNotificationCenter,
+  hideNotificationCenter,
+  recordNotifications,
+} from "./shell-notifications.js?v=home-20260718m";
+import {
+  bindMenubar,
+  closeMenus,
+  setMenuManifest,
+  syncMenubar,
+} from "./shell-menubar.js?v=home-20260718m";
+import {
+  bindQuickLook,
+  hideQuickLook,
+  toggleQuickLook,
+} from "./shell-quicklook.js?v=home-20260718m";
+import { bindExpose, closeExpose } from "./shell-expose.js?v=home-20260718m";
+import {
+  bindControlCentre,
+  hideControlCentre,
+} from "./shell-control-centre.js?v=home-20260718m";
+import {
+  bindWalletRail,
+  retireWalletRail,
+  showWalletRail,
+  syncWalletRailAvailability,
+  walletRailFrame,
+  walletRailOpen,
+  walletRailSessionMounted,
+} from "./shell-wallet-rail.js?v=home-20260718m";
+import {
+  bindConnectorSheet,
+  connectorSheetFrame,
+  connectorSheetTarget,
+  isConnectorSheetTarget,
+  noteConnectorSheetSummaryRefresh,
+  retireConnectorSheet,
+  showConnectorSheet,
+} from "./shell-connector-sheet.js?v=home-20260718m";
 
 await ensureHomeGuiDom();
+bindIdentityMenu();
+bindShellSurfaceDom();
+bindSpotlight();
+bindNotificationCenter();
+bindQuickLook();
+bindExpose();
+bindShellKeyboard();
+bindMenubar({ closeWindow, openTarget, supportsNewWindow: supportsMenuNewWindow });
+bindControlCentre();
+bindWalletRail();
+bindConnectorSheet();
 
 const HOME_GUI_HOST_SELECTORS = Object.freeze([
   ".desktop-backdrop",
@@ -69,6 +140,15 @@ const HOME_GUI_HOST_SELECTORS = Object.freeze([
   ".launcher",
   "#desktop-context-menu",
   "#home-notification-toast",
+  "#notification-center",
+  "#control-centre",
+  "#wallet-rail",
+  "#connector-sheet",
+  "#spotlight",
+  "#window-switcher",
+  "#quick-look",
+  "#shortcuts-overlay",
+  "#about-overlay",
 ]);
 let homeGuiInteractionsBound = false;
 
@@ -94,7 +174,16 @@ configureWindowHooks({
   refreshLauncherIfVisible,
   renderDesktop,
   renderTaskbar,
+  syncMenubar,
   updateTaskbarState,
+  // One Wallet session: dock/desktop window launch retires the rail so we
+  // do not keep two iframes / home_tokens for the same capsule — including
+  // when the rail is hidden but the warm iframe is still mounted.
+  retireWalletRailBeforeWindow: () => {
+    if (walletRailSessionMounted() || walletRailOpen()) {
+      retireWalletRail();
+    }
+  },
 });
 
 function homeGuiHostNodes() {
@@ -130,6 +219,16 @@ export function retireHomeGuiSurface(options = {}) {
   hideLauncher();
   hideDesktopContextMenu();
   clearDesktopSelection();
+  hideSpotlight({ restoreFocus: false });
+  hideNotificationCenter();
+  hideControlCentre({ restoreFocus: false });
+  retireWalletRail();
+  retireConnectorSheet();
+  hideAboutOverlay({ restoreFocus: false });
+  hideQuickLook();
+  closeExpose();
+  retireKeyboardSurfaces();
+  closeMenus({ restoreFocus: false });
   if (options.closeWindows === true) {
     for (const id of [...shellState.windows.keys()]) {
       closeWindow(id);
@@ -140,6 +239,7 @@ export function retireHomeGuiSurface(options = {}) {
 }
 
 export function setHomeGuiMounted(mounted, options = {}) {
+  const wasMounted = document.body.dataset.homeGui === "mounted";
   document.body.dataset.homeGui = mounted ? "mounted" : "dormant";
   if (mounted) {
     shellState.homeGuiMounted = true;
@@ -148,6 +248,9 @@ export function setHomeGuiMounted(mounted, options = {}) {
     for (const node of homeGuiHostNodes()) {
       setHomeGuiHostNodeMounted(node, true);
     }
+    if (!wasMounted) {
+      playHomeGuiArrival();
+    }
     return;
   }
   retireHomeGuiSurface({ closeWindows: options.closeWindows === true });
@@ -159,6 +262,27 @@ export function setHomeGuiMounted(mounted, options = {}) {
   }
 }
 
+// Arrival: the desktop settles in as the GUI mounts (unlock hand-off or a
+// switch back from an alternate shell). Opacity/transform only — compositor
+// work, no layout. The host's neutral mask never carries the desktop; this
+// beat is the GUI's own. Reduced motion skips it.
+function playHomeGuiArrival() {
+  if (window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches === true) {
+    return;
+  }
+  const arriving = [".desktop-backdrop", ".toolbar", ".desktop-workspace", ".taskbar"]
+    .map((selector) => document.querySelector(selector))
+    .filter((node) => node && !node.hidden);
+  for (const node of arriving) {
+    node.classList.add("home-gui-arriving");
+  }
+  window.setTimeout(() => {
+    for (const node of arriving) {
+      node.classList.remove("home-gui-arriving");
+    }
+  }, 760);
+}
+
 function startHomeGuiClock() {
   updateClock();
   if (shellState.clockTimer) {
@@ -196,9 +320,29 @@ export function closeHomeGuiWindowsForTarget(targetId) {
 }
 
 export function openHomeGuiTarget(target, options = {}) {
+  const query = options.query && typeof options.query === "object" ? options.query : {};
+  // Wallet connectors open as an in-rail ceremony sheet — not a second
+  // desktop product window — when the wallet asks for sheet presentation
+  // or the wallet rail is already open.
+  if (
+    isConnectorSheetTarget(target) &&
+    (query.presentation === "sheet" || walletRailOpen())
+  ) {
+    showConnectorSheet(target, { ...options, query: { ...query, presentation: "sheet" } }).catch(
+      (error) => {
+        console.error("connector sheet open failed", error);
+        openTarget(target, options);
+      },
+    );
+    return;
+  }
   openTarget(target, options);
 }
 
+export function noteHomeGuiConnectorSheetSummaryRefresh(source) {
+  noteConnectorSheetSummaryRefresh(source);
+}
+
 export function homeGuiHasWindows() {
   return shellState.windows.size > 0;
 }
@@ -217,6 +361,18 @@ export function relaunchHomeGuiTarget(windowId, target) {
 }
 
 export function deliverMessageToHomeGuiTargetFrame(target, payload, options = null) {
+  // Prefer an open wallet rail over a desktop window — same capsule, user's
+  // current surface. Focus shows the rail; window focus is the fallback.
+  if (target === "wallet" && walletRailOpen()) {
+    const railFrame = walletRailFrame();
+    if (railFrame?.contentWindow) {
+      railFrame.contentWindow.postMessage(payload, window.location.origin);
+      if (options?.focus === true) {
+        showWalletRail();
+      }
+      return true;
+    }
+  }
   const entries = [...shellState.windows.values()]
     .filter((entry) => entry.kind === "browser" && entry.targetId === target)
     .sort((left, right) => Number(right.serial || 0) - Number(left.serial || 0));
@@ -236,6 +392,8 @@ export function openHomeGuiTargetWithPayload(target, payload) {
   let deliveredCount = 0;
   if (deliverMessageToHomeGuiTargetFrame(target, payload, { focus: true })) {
     deliveredCount += 1;
+  } else if (target === "wallet" && targetById(shellState.currentSummary, "wallet")) {
+    showWalletRail();
   } else if (targetById(shellState.currentSummary, target)) {
     openTarget(target);
   } else {
@@ -268,12 +426,60 @@ export function broadcastHomeGuiRuntimeEvents(events) {
       console.warn("could not deliver runtime event to app frame", error);
     }
   }
+  const railFrame = walletRailFrame();
+  try {
+    railFrame?.contentWindow?.postMessage(message, window.location.origin);
+  } catch (error) {
+    console.warn("could not deliver runtime event to wallet rail", error);
+  }
 }
 
 export function homeGuiMessageContextForSource(source, homeToken) {
   if (!source || !homeToken) {
     return null;
   }
+  const railFrame = walletRailFrame();
+  let railWindow = null;
+  try {
+    railWindow = railFrame?.contentWindow || null;
+  } catch (_error) {
+    railWindow = null;
+  }
+  if (railWindow && railWindow === source) {
+    const expectedToken = homeLaunchTokenFromRoute(
+      railFrame?.dataset?.route || railFrame?.getAttribute("src") || "",
+    );
+    if (expectedToken && expectedToken === homeToken) {
+      return {
+        kind: "app-frame",
+        targetId: "wallet",
+        windowId: "wallet-rail",
+        homeToken,
+      };
+    }
+    return null;
+  }
+  const sheetFrame = connectorSheetFrame();
+  let sheetWindow = null;
+  try {
+    sheetWindow = sheetFrame?.contentWindow || null;
+  } catch (_error) {
+    sheetWindow = null;
+  }
+  if (sheetWindow && sheetWindow === source) {
+    const expectedToken = homeLaunchTokenFromRoute(
+      sheetFrame?.dataset?.route || sheetFrame?.getAttribute("src") || "",
+    );
+    if (expectedToken && expectedToken === homeToken) {
+      return {
+        kind: "app-frame",
+        targetId: connectorSheetTarget() || "wallet-metamask",
+        windowId: "connector-sheet",
+        homeToken,
+      };
+    }
+    return null;
+  }
   for (const entry of shellState.windows.values()) {
     const frame = entry?.node?.querySelector(".window-frame");
     let frameWindow = null;
@@ -353,7 +559,15 @@ export function syncHomeGuiChrome(previous, summary) {
   updateClock();
   syncIdentity(summary);
   renderInboxBadge(summary);
+  syncWalletRailAvailability(summary);
   maybeShowWalletApprovalToast(previous, summary);
+  recordNotifications(summary);
+}
+
+/* Menus are self-declared UI, not authority: the host verifies the sender's
+   frame identity and hands us only that window's id. */
+export function setHomeGuiMenuManifest(windowId, menus) {
+  setMenuManifest(windowId, menus);
 }
 
 export function renderHomeGuiShell(summary, options = {}) {
@@ -433,14 +647,86 @@ function fullscreenApi() {
   return { root, request, exit };
 }
 
+/* About ElastOS: the smallest honest dialog — logo, product name, which
+   shell this is, who is signed in. No version claims the shell cannot
+   verify from runtime facts. */
+let aboutOverlayBound = false;
+
+function aboutOverlayNode() {
+  return document.querySelector("#about-overlay");
+}
+
+function showAboutOverlay() {
+  const overlay = aboutOverlayNode();
+  if (!overlay) {
+    return;
+  }
+  const identityLine = overlay.querySelector("#about-identity");
+  if (identityLine) {
+    const name = document.querySelector("#toolbar-identity-menu-name")?.textContent?.trim();
+    identityLine.textContent = name ? `Signed in as ${name}` : "";
+    identityLine.hidden = !name;
+  }
+  overlay.hidden = false;
+  overlay.inert = false;
+  overlay.setAttribute("aria-hidden", "false");
+  overlay.querySelector("#about-close")?.focus();
+}
+
+function hideAboutOverlay({ restoreFocus = true } = {}) {
+  const overlay = aboutOverlayNode();
+  if (!overlay || overlay.hidden) {
+    return;
+  }
+  overlay.hidden = true;
+  overlay.inert = true;
+  overlay.setAttribute("aria-hidden", "true");
+  if (restoreFocus) {
+    toolbarHomeButton?.focus();
+  }
+}
+
+function bindAboutOverlay() {
+  if (aboutOverlayBound) {
+    return;
+  }
+  aboutOverlayBound = true;
+  document.querySelector("#identity-menu-about")?.addEventListener("click", () => {
+    showAboutOverlay();
+  });
+  const overlay = aboutOverlayNode();
+  if (!overlay) {
+    return;
+  }
+  overlay.querySelector("#about-close")?.addEventListener("click", () => hideAboutOverlay());
+  overlay.addEventListener("pointerdown", (event) => {
+    if (!event.target.closest(".about-card")) {
+      hideAboutOverlay({ restoreFocus: false });
+    }
+  });
+  overlay.addEventListener("keydown", (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      hideAboutOverlay();
+      return;
+    }
+    if (event.key === "Tab") {
+      // Single focusable control; keep focus inside the modal.
+      event.preventDefault();
+    }
+  });
+}
+
 function syncFullscreenButton() {
   if (!toolbarFullscreenButton) {
     return;
   }
+  // The fullscreen control is a Control Centre row; its visible label is its
+  // accessible name.
   const active = Boolean(fullscreenElement());
-  toolbarFullscreenButton.setAttribute("aria-pressed", active ? "true" : "false");
-  toolbarFullscreenButton.setAttribute("aria-label", active ? "Exit fullscreen" : "Enter fullscreen");
-  toolbarFullscreenButton.title = active ? "Exit fullscreen" : "Fullscreen";
+  const label = toolbarFullscreenButton.querySelector(".control-centre-row-label");
+  (label || toolbarFullscreenButton).textContent = active ? "Exit fullscreen" : "Enter fullscreen";
 }
 
 function toggleHomeGuiFullscreen() {
@@ -485,8 +771,7 @@ function bindHomeGuiFullscreenControl() {
   }
   const { request, exit } = fullscreenApi();
   if (!request || !exit) {
-    toolbarFullscreenButton.disabled = true;
-    toolbarFullscreenButton.title = "Fullscreen is not available in this browser";
+    toolbarFullscreenButton.hidden = true;
     return;
   }
   toolbarFullscreenButton.addEventListener("click", toggleHomeGuiFullscreen);
@@ -495,6 +780,38 @@ function bindHomeGuiFullscreenControl() {
   syncFullscreenButton();
 }
 
+/* Grid/list view for the launcher (macOS Apps panel view control). The
+   preference is a pure browser concern, so localStorage — same store the
+   theme runtime uses. */
+const LAUNCHER_VIEW_KEY = "elastos.ui.launcherView";
+
+function applyLauncherView(view) {
+  const list = view === "list";
+  launcher.dataset.view = list ? "list" : "grid";
+  launcherViewToggle?.setAttribute("aria-pressed", list ? "true" : "false");
+  launcherViewToggle?.setAttribute(
+    "aria-label",
+    list ? "Switch to grid view" : "Switch to list view",
+  );
+}
+
+function bindLauncherViewToggle() {
+  try {
+    applyLauncherView(localStorage.getItem(LAUNCHER_VIEW_KEY));
+  } catch (_error) {
+    applyLauncherView("grid");
+  }
+  launcherViewToggle?.addEventListener("click", () => {
+    const next = launcher.dataset.view === "list" ? "grid" : "list";
+    applyLauncherView(next);
+    try {
+      localStorage.setItem(LAUNCHER_VIEW_KEY, next);
+    } catch (_error) {
+      // Preference still applies for this session.
+    }
+  });
+}
+
 export function bindHomeGuiInteractions(options = {}) {
   if (homeGuiInteractionsBound) {
     return;
@@ -514,7 +831,9 @@ export function bindHomeGuiInteractions(options = {}) {
     : null;
   shellState.requestSummaryRefresh = homeGuiHostActions.requestSummaryRefresh;
 
-  toolbarHomeButton?.addEventListener("click", () => {
+  // The brand button itself toggles the ElastOS menu (bound in
+  // bindIdentityMenu); the go-home action lives inside it as Show desktop.
+  identityMenuShowDesktopButton?.addEventListener("click", () => {
     activateHomeGui().catch((error) => {
       console.error("home-gui activation failed", error);
     });
@@ -528,6 +847,20 @@ export function bindHomeGuiInteractions(options = {}) {
   });
 
   bindHomeGuiFullscreenControl();
+  bindLauncherViewToggle();
+
+  identityMenuSystemButton?.addEventListener("click", () => {
+    if (!targetById(shellState.currentSummary, "system")) {
+      return;
+    }
+    openTarget("system");
+  });
+
+  document.querySelector("#identity-menu-shortcuts")?.addEventListener("click", () => {
+    toggleShortcutsOverlay();
+  });
+
+  bindAboutOverlay();
 
   toolbarSignOutButton?.addEventListener("click", () => {
     document.body.dataset.homeStatus = "booting";
@@ -540,6 +873,10 @@ export function bindHomeGuiInteractions(options = {}) {
       });
   });
 
+  document.querySelector("#toolbar-spotlight")?.addEventListener("click", () => {
+    showSpotlight();
+  });
+
   launcherToggleButton?.addEventListener("click", () => {
     toggleLauncher();
   });
@@ -578,24 +915,43 @@ export function bindHomeGuiInteractions(options = {}) {
       clearDesktopSelection();
       return;
     }
-    if ((event.key === "Enter" || event.key === " ") && shellState.selectedDesktopTargetId) {
+    // Space = Quick Look (macOS); Enter opens. Bare Space must not also open.
+    if (event.code === "Space" && !event.metaKey && !event.ctrlKey && !event.altKey) {
+      event.preventDefault();
+      event.stopPropagation();
+      toggleQuickLook();
+      return;
+    }
+    if (event.key === "Enter" && shellState.selectedDesktopTargetId) {
       event.preventDefault();
       event.stopPropagation();
       openSelectedDesktopEntry();
+      return;
+    }
+    if ((event.key === "a" || event.key === "A") && (event.metaKey || event.ctrlKey)) {
+      event.preventDefault();
+      selectAllDesktopIcons();
+      return;
+    }
+    if (event.key.startsWith("Arrow") && !event.metaKey && !event.ctrlKey && !event.altKey) {
+      handleDesktopArrowKey(event);
     }
   });
 
   document.addEventListener("pointermove", (event) => {
     trackPointerMove(event);
     continueTargetDrag(event);
+    updateDesktopMarquee(event);
   });
 
   document.addEventListener("pointerup", (event) => {
     finishTargetDrag(event);
+    finishDesktopMarquee(event);
   });
 
   document.addEventListener("pointercancel", (event) => {
     finishTargetDrag(event);
+    finishDesktopMarquee(event);
   });
 
   document.addEventListener("pointerdown", (event) => {
@@ -630,7 +986,7 @@ export function bindHomeGuiInteractions(options = {}) {
 
   document.addEventListener("keydown", (event) => {
     if (event.key === "Escape" && shellState.contextMenuOpen) {
-      hideDesktopContextMenu();
+      hideDesktopContextMenu({ restoreFocus: true });
     }
     if (event.key === "Escape" && !launcher.hidden) {
       hideLauncher();
@@ -672,6 +1028,7 @@ export function bindHomeGuiInteractions(options = {}) {
       return;
     }
     clearDesktopSelection();
+    beginDesktopMarquee(event);
   });
 
   desktopContextMenu?.addEventListener("click", (event) => {
diff --git a/capsules/home-gui/browser/shell-chrome.js b/capsules/home-gui/browser/shell-chrome.js
index 70fb28210..7e34da399 100644
--- a/capsules/home-gui/browser/shell-chrome.js
+++ b/capsules/home-gui/browser/shell-chrome.js
@@ -1,8 +1,146 @@
-import { clockNode } from "./shell-core.js?v=home-20260705a";
+import {
+  clockNode,
+  toolbarHomeButton,
+  toolbarSystem,
+  toolbarIdentityMenu,
+  toolbarIdentityMenuName,
+} from "./shell-core.js?v=home-20260718m";
 
-export function syncIdentity(_summary) {}
+/* System chrome: the ElastOS brand at the far left of the bar is the system
+   menu (the macOS Apple-menu position) — show desktop, fullscreen, System,
+   sign out, headed by the signed-in principal from the home summary. The name
+   is always rendered as textContent — never HTML. */
 
-export function clearIdentitySurface() {}
+function summaryDisplayName(summary) {
+  const handle = summary?.identity?.handle;
+  if (typeof handle === "string" && handle.trim()) {
+    return handle.trim();
+  }
+  return "Operator";
+}
+
+export function syncIdentity(summary) {
+  if (!toolbarIdentityMenuName) {
+    return;
+  }
+  const signedIn = Boolean(summary?.authority?.signed_in);
+  if (!signedIn) {
+    clearIdentitySurface();
+    return;
+  }
+  toolbarIdentityMenuName.textContent = summaryDisplayName(summary);
+}
+
+export function clearIdentitySurface() {
+  if (!toolbarIdentityMenuName) {
+    return;
+  }
+  closeIdentityMenu({ restoreFocus: false });
+  toolbarIdentityMenuName.textContent = "";
+}
+
+/* Disclosure menu behavior (APG menu-button pattern): click or ArrowDown opens
+   and focuses the first item; arrows/Home/End navigate; Escape or Tab closes
+   and restores focus to the button; pointer-outside closes. */
+
+function identityMenuItems() {
+  return Array.from(
+    toolbarIdentityMenu.querySelectorAll('[role="menuitem"]:not([hidden])'),
+  );
+}
+
+function identityMenuOpen() {
+  return !toolbarIdentityMenu.hidden;
+}
+
+function openIdentityMenu({ focusLast = false } = {}) {
+  toolbarIdentityMenu.hidden = false;
+  toolbarHomeButton.setAttribute("aria-expanded", "true");
+  const items = identityMenuItems();
+  const target = focusLast ? items[items.length - 1] : items[0];
+  target?.focus();
+}
+
+function closeIdentityMenu({ restoreFocus = true } = {}) {
+  if (!toolbarIdentityMenu || toolbarIdentityMenu.hidden) {
+    return;
+  }
+  toolbarIdentityMenu.hidden = true;
+  toolbarHomeButton.setAttribute("aria-expanded", "false");
+  if (restoreFocus) {
+    toolbarHomeButton.focus();
+  }
+}
+
+function moveIdentityMenuFocus(delta) {
+  const items = identityMenuItems();
+  if (items.length === 0) {
+    return;
+  }
+  const index = items.indexOf(document.activeElement);
+  const next = index < 0
+    ? (delta > 0 ? 0 : items.length - 1)
+    : (index + delta + items.length) % items.length;
+  items[next].focus();
+}
+
+/* Bound by the home-gui facade after ensureHomeGuiDom() instantiates the lazy
+   GUI template — the identity nodes do not exist in the first host document. */
+let identityMenuBound = false;
+
+export function bindIdentityMenu() {
+  if (identityMenuBound || !toolbarHomeButton || !toolbarIdentityMenu) {
+    return;
+  }
+  identityMenuBound = true;
+  toolbarHomeButton.addEventListener("click", () => {
+    if (identityMenuOpen()) {
+      closeIdentityMenu();
+    } else {
+      openIdentityMenu();
+    }
+  });
+  toolbarHomeButton.addEventListener("keydown", (event) => {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      openIdentityMenu();
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      openIdentityMenu({ focusLast: true });
+    }
+  });
+  toolbarIdentityMenu.addEventListener("keydown", (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      closeIdentityMenu();
+    } else if (event.key === "ArrowDown") {
+      event.preventDefault();
+      moveIdentityMenuFocus(1);
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      moveIdentityMenuFocus(-1);
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      identityMenuItems()[0]?.focus();
+    } else if (event.key === "End") {
+      event.preventDefault();
+      identityMenuItems().at(-1)?.focus();
+    } else if (event.key === "Tab") {
+      closeIdentityMenu();
+    }
+  });
+  toolbarIdentityMenu.addEventListener("click", (event) => {
+    if (event.target.closest('[role="menuitem"]')) {
+      closeIdentityMenu({ restoreFocus: false });
+    }
+  });
+  document.addEventListener("pointerdown", (event) => {
+    if (identityMenuOpen() && !toolbarSystem.contains(event.target)) {
+      closeIdentityMenu({ restoreFocus: false });
+    }
+  });
+}
 
 export function updateClock() {
   clockNode.textContent = new Intl.DateTimeFormat([], {
diff --git a/capsules/home-gui/browser/shell-connector-sheet.js b/capsules/home-gui/browser/shell-connector-sheet.js
new file mode 100644
index 000000000..c4e309b87
--- /dev/null
+++ b/capsules/home-gui/browser/shell-connector-sheet.js
@@ -0,0 +1,236 @@
+import {
+  escapeHtml,
+  fetchJson,
+} from "./shell-core.js?v=home-20260718m";
+import {
+  iframeAllowForLaunch,
+  iframeSandboxForLaunch,
+} from "./shell-windows.js?v=home-20260718m";
+import { showWalletRail, walletRailOpen } from "./shell-wallet-rail.js?v=home-20260718m";
+
+/* Connector sheet: thin ceremony surface for wallet-metamask / unisat /
+   walletconnect. Same launch path as a window, mounted in a rail-aligned
+   overlay instead of a second product window. Authority stays in the
+   connector capsule; this module is chrome only. */
+
+const CONNECTOR_SHEET_TARGETS = new Set([
+  "wallet-metamask",
+  "wallet-unisat",
+  "wallet-walletconnect",
+]);
+
+const SHEET_TITLES = {
+  "wallet-metamask": "Connect MetaMask",
+  "wallet-unisat": "Connect UniSat",
+  "wallet-walletconnect": "Connect WalletConnect",
+};
+
+let sheet = null;
+let frame = null;
+let titleNode = null;
+let closeButton = null;
+let launching = false;
+let activeTarget = "";
+let bound = false;
+
+export function bindConnectorSheet() {
+  if (bound) {
+    return;
+  }
+  sheet = document.querySelector("#connector-sheet");
+  frame = document.querySelector("#connector-sheet-frame");
+  titleNode = document.querySelector("#connector-sheet-title");
+  closeButton = document.querySelector("#connector-sheet-close");
+  if (!sheet || !frame) {
+    return;
+  }
+  bound = true;
+  closeButton?.addEventListener("click", () => hideConnectorSheet());
+  sheet.addEventListener("keydown", (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      hideConnectorSheet();
+    }
+  });
+}
+
+export function isConnectorSheetTarget(targetId) {
+  return CONNECTOR_SHEET_TARGETS.has(targetId);
+}
+
+export function connectorSheetOpen() {
+  return Boolean(sheet) && !sheet.hidden;
+}
+
+export function connectorSheetFrame() {
+  return frame;
+}
+
+export function connectorSheetTarget() {
+  return activeTarget;
+}
+
+export async function showConnectorSheet(targetId, options = {}) {
+  if (!sheet || !frame || !isConnectorSheetTarget(targetId)) {
+    return false;
+  }
+  // Connectors are often hidden from the launcher; launch fails closed via API.
+  if (!walletRailOpen()) {
+    showWalletRail();
+  }
+  activeTarget = targetId;
+  if (titleNode) {
+    titleNode.textContent = SHEET_TITLES[targetId] || "Connect wallet";
+  }
+  sheet.hidden = false;
+  sheet.inert = false;
+  sheet.setAttribute("aria-hidden", "false");
+  sheet.focus({ preventScroll: true });
+  await mountConnectorFrame(targetId, options.query || {});
+  return true;
+}
+
+export function hideConnectorSheet() {
+  if (!sheet || sheet.hidden) {
+    return;
+  }
+  sheet.hidden = true;
+  sheet.inert = true;
+  sheet.setAttribute("aria-hidden", "true");
+  if (frame) {
+    frame.removeAttribute("src");
+    delete frame.dataset.route;
+    frame.hidden = true;
+    frame.classList.remove("is-ready");
+  }
+  activeTarget = "";
+}
+
+export function retireConnectorSheet() {
+  hideConnectorSheet();
+}
+
+/* After a successful link the connector posts home:refresh-summary. Tell every
+   Wallet surface to reload accounts (summary refresh alone does not), then
+   close the ceremony so the user lands back on the rail. */
+export function noteConnectorSheetSummaryRefresh(source) {
+  if (!connectorSheetOpen()) {
+    return;
+  }
+  let frameWindow = null;
+  try {
+    frameWindow = frame?.contentWindow || null;
+  } catch (_error) {
+    return;
+  }
+  if (!source || !frameWindow || source !== frameWindow) {
+    return;
+  }
+  broadcastWalletAccountsRefresh();
+  window.setTimeout(() => {
+    hideConnectorSheet();
+    if (walletRailOpen()) {
+      showWalletRail();
+    }
+    // Second nudge after the sheet is gone — covers slow provider write.
+    broadcastWalletAccountsRefresh();
+  }, 450);
+}
+
+function broadcastWalletAccountsRefresh() {
+  const message = {
+    type: "elastos:wallet-refresh",
+    schema: "elastos.home.wallet-refresh/v1",
+  };
+  const origin = window.location.origin;
+  const post = (contentWindow) => {
+    try {
+      contentWindow?.postMessage(message, origin);
+    } catch (_error) {
+      // Frame may be unloaded or mid-nav.
+    }
+  };
+  post(document.querySelector("#wallet-rail-frame")?.contentWindow);
+  for (const node of document.querySelectorAll(".window[data-target='wallet'] .window-frame")) {
+    post(node.contentWindow);
+  }
+}
+
+async function mountConnectorFrame(targetId, query) {
+  if (launching) {
+    return;
+  }
+  launching = true;
+  frame.hidden = false;
+  frame.classList.remove("is-ready");
+  try {
+    const launchQuery = {
+      ...normalizedQuery(query),
+      presentation: "sheet",
+    };
+    const launched = await fetchJson("/api/apps/home/launch", {
+      method: "POST",
+      body: JSON.stringify({ target: targetId, query: launchQuery }),
+    });
+    if (launched.attach_kind !== "iframe") {
+      throw new Error(`unsupported attach kind: ${launched.attach_kind || "unknown"}`);
+    }
+    if (
+      typeof launched.launch_status === "string" &&
+      launched.launch_status.trim() !== "" &&
+      launched.launch_status !== "launched"
+    ) {
+      throw new Error(
+        typeof launched.launch_detail === "string" && launched.launch_detail.trim() !== ""
+          ? launched.launch_detail.trim()
+          : `launch status: ${launched.launch_status}`,
+      );
+    }
+    frame.setAttribute("sandbox", iframeSandboxForLaunch(launched));
+    frame.setAttribute("allow", iframeAllowForLaunch(launched));
+    frame.title = escapeHtml(launched.title || SHEET_TITLES[targetId] || "Connector");
+    frame.addEventListener(
+      "load",
+      () => {
+        frame.classList.add("is-ready");
+      },
+      { once: true },
+    );
+    // Ensure the connector sees presentation=sheet even if the gateway
+    // does not echo query params onto the route.
+    const route = withPresentationSheet(launched.route);
+    frame.src = route;
+    frame.dataset.route = route;
+  } catch (error) {
+    console.error("connector sheet launch failed", error);
+    hideConnectorSheet();
+    throw error;
+  } finally {
+    launching = false;
+  }
+}
+
+function normalizedQuery(query) {
+  if (!query || typeof query !== "object") {
+    return {};
+  }
+  const next = {};
+  for (const [key, value] of Object.entries(query)) {
+    if (typeof key !== "string" || !key.trim()) {
+      continue;
+    }
+    next[key] = typeof value === "string" ? value : String(value ?? "");
+  }
+  return next;
+}
+
+function withPresentationSheet(route) {
+  try {
+    const url = new URL(route, window.location.href);
+    url.searchParams.set("presentation", "sheet");
+    return `${url.pathname}${url.search}${url.hash}`;
+  } catch (_error) {
+    return route;
+  }
+}
diff --git a/capsules/home-gui/browser/shell-control-centre.js b/capsules/home-gui/browser/shell-control-centre.js
new file mode 100644
index 000000000..7a388aa6d
--- /dev/null
+++ b/capsules/home-gui/browser/shell-control-centre.js
@@ -0,0 +1,160 @@
+import { uiSoundsEnabled, setUiSoundsEnabled, playUiSound } from "./shell-sounds.js?v=home-20260718m";
+import { showWalletRail, walletRailAvailable } from "./shell-wallet-rail.js?v=home-20260718m";
+
+/* Control Centre: the quick layer for controls that already have canonical
+   stores — theme (elastos-theme.js), UI sounds (shell-sounds.js), fullscreen
+   (home-gui facade) — plus the wallet entry point. The System app keeps the
+   deep versions; this panel only projects and toggles existing state, it
+   owns none of its own.
+
+   Same popover contract as the notification center: starts hidden, outside
+   pointerdown or Escape dismisses, focus returns to the bar button. */
+
+let panel = null;
+let button = null;
+let themeSegment = null;
+let soundsSwitch = null;
+let walletRow = null;
+let outsideDismissBound = false;
+
+export function bindControlCentre() {
+  if (panel) {
+    return;
+  }
+  panel = document.querySelector("#control-centre");
+  button = document.querySelector("#toolbar-control-centre");
+  themeSegment = document.querySelector("#control-centre-theme");
+  soundsSwitch = document.querySelector("#control-centre-sounds");
+  walletRow = document.querySelector("#control-centre-wallet");
+  if (!panel || !button) {
+    return;
+  }
+
+  button.addEventListener("click", () => {
+    toggleControlCentre();
+  });
+
+  themeSegment?.addEventListener("click", (event) => {
+    const option = event.target.closest("[data-theme-option]");
+    if (!option || !window.elastosTheme) {
+      return;
+    }
+    window.elastosTheme.set(option.dataset.themeOption);
+    syncThemeSegment();
+  });
+
+  soundsSwitch?.addEventListener("click", () => {
+    const next = !uiSoundsEnabled();
+    setUiSoundsEnabled(next);
+    syncSoundsSwitch();
+    if (next) {
+      playUiSound("notification");
+    }
+  });
+
+  walletRow?.addEventListener("click", () => {
+    if (!walletRailAvailable()) {
+      return;
+    }
+    hideControlCentre({ restoreFocus: false });
+    showWalletRail();
+  });
+
+  panel.addEventListener("keydown", (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      hideControlCentre();
+    }
+  });
+}
+
+export function controlCentreOpen() {
+  return Boolean(panel) && !panel.hidden;
+}
+
+export function showControlCentre() {
+  if (!panel) {
+    return;
+  }
+  syncThemeSegment();
+  syncSoundsSwitch();
+  syncWalletRow();
+  panel.hidden = false;
+  panel.inert = false;
+  panel.setAttribute("aria-hidden", "false");
+  button?.setAttribute("aria-expanded", "true");
+  bindOutsideDismiss();
+  panel.focus({ preventScroll: true });
+}
+
+export function hideControlCentre({ restoreFocus = true } = {}) {
+  if (!controlCentreOpen()) {
+    return;
+  }
+  panel.hidden = true;
+  panel.inert = true;
+  panel.setAttribute("aria-hidden", "true");
+  button?.setAttribute("aria-expanded", "false");
+  if (restoreFocus) {
+    button?.focus();
+  }
+}
+
+export function toggleControlCentre() {
+  if (controlCentreOpen()) {
+    hideControlCentre();
+  } else {
+    showControlCentre();
+  }
+}
+
+function syncThemeSegment() {
+  if (!themeSegment) {
+    return;
+  }
+  const preference = window.elastosTheme?.preference() || "dark";
+  const options = Array.from(themeSegment.querySelectorAll("[data-theme-option]"));
+  for (const [index, option] of options.entries()) {
+    const active = option.dataset.themeOption === preference;
+    option.setAttribute("aria-checked", active ? "true" : "false");
+    option.classList.toggle("active", active);
+    if (active) {
+      // Drives the sliding thumb; while the panel is display:none the value
+      // still lands, so reopening snaps into place without a phantom slide.
+      themeSegment.style.setProperty("--segment-index", String(index));
+    }
+  }
+}
+
+function syncSoundsSwitch() {
+  if (!soundsSwitch) {
+    return;
+  }
+  soundsSwitch.setAttribute("aria-checked", uiSoundsEnabled() ? "true" : "false");
+}
+
+function syncWalletRow() {
+  if (!walletRow) {
+    return;
+  }
+  // No wallet target in this home means no wallet affordance — never a dead
+  // button (fail-closed, matching the capability discipline everywhere else).
+  walletRow.hidden = !walletRailAvailable();
+}
+
+function bindOutsideDismiss() {
+  if (outsideDismissBound) {
+    return;
+  }
+  outsideDismissBound = true;
+  document.addEventListener("pointerdown", (event) => {
+    if (
+      controlCentreOpen() &&
+      !panel.contains(event.target) &&
+      !button.contains(event.target)
+    ) {
+      hideControlCentre({ restoreFocus: false });
+    }
+  });
+}
diff --git a/capsules/home-gui/browser/shell-core.js b/capsules/home-gui/browser/shell-core.js
index 83efb3be9..fd2369a6b 100644
--- a/capsules/home-gui/browser/shell-core.js
+++ b/capsules/home-gui/browser/shell-core.js
@@ -9,11 +9,18 @@ export let launcherEmptyState = document.querySelector("#launcher-empty-state");
 export let launcherSearch = document.querySelector("#launcher-search");
 export let launcherToggleButton = document.querySelector("#launcher-toggle");
 export let closeLauncherButton = document.querySelector("#close-launcher");
+export let launcherViewToggle = document.querySelector("#launcher-view-toggle");
 export let toolbarHomeButton = document.querySelector("#toolbar-home");
+export let toolbarActiveTitleNode = document.querySelector("#toolbar-active-title");
 export let toolbarInboxButton = document.querySelector("#toolbar-inbox");
 export let toolbarInboxCount = document.querySelector("#toolbar-inbox-count");
-export let toolbarFullscreenButton = document.querySelector("#toolbar-fullscreen");
-export let toolbarSignOutButton = document.querySelector("#toolbar-sign-out");
+export let toolbarFullscreenButton = document.querySelector("#control-centre-fullscreen");
+export let toolbarSignOutButton = document.querySelector("#identity-menu-sign-out");
+export let toolbarSystem = document.querySelector("#toolbar-system");
+export let toolbarIdentityMenu = document.querySelector("#toolbar-identity-menu");
+export let toolbarIdentityMenuName = document.querySelector("#toolbar-identity-menu-name");
+export let identityMenuSystemButton = document.querySelector("#identity-menu-system");
+export let identityMenuShowDesktopButton = document.querySelector("#identity-menu-show-desktop");
 export let homeNotificationToast = document.querySelector("#home-notification-toast");
 export let homeNotificationTitle = document.querySelector("#home-notification-title");
 export let homeNotificationBody = document.querySelector("#home-notification-body");
@@ -55,9 +62,9 @@ export const WINDOW_TOP_INSET = 8;
 export const WINDOW_BOTTOM_INSET = 72;
 export const CONTEXT_MENU_IGNORE_OUTSIDE_MS = 220;
 const HOME_GUI_TEMPLATE_ID = "home-gui-template";
-const HOME_GUI_TEMPLATE_URL = new URL("./home-gui-template.html?v=home-20260705a", import.meta.url).href;
+const HOME_GUI_TEMPLATE_URL = new URL("./home-gui-template.html?v=home-20260718m", import.meta.url).href;
 const HOME_GUI_STYLESHEET_ID = "home-gui-stylesheet";
-const HOME_GUI_STYLESHEET_URL = new URL("./style.css?v=home-20260705a", import.meta.url).href;
+const HOME_GUI_STYLESHEET_URL = new URL("./style.css?v=home-20260718m", import.meta.url).href;
 let homeGuiTemplateHtmlPromise = null;
 
 export const shellState = {
@@ -89,7 +96,7 @@ export const shellState = {
     taskbar: [],
     desktop: {},
     desktopLabels: {},
-    desktopHidden: [],
+    desktopApps: [],
     desktopIconsVisible: true,
   },
   dragState: null,
@@ -98,6 +105,7 @@ export const shellState = {
   contextMenuTarget: { kind: "desktop" },
   contextMenuIgnoreOutsideUntil: 0,
   selectedDesktopTargetId: null,
+  marqueeSelection: new Set(),
   recentTargetIds: [],
   selectedLauncherTargetId: null,
   launcherIgnoreOutsideUntil: 0,
@@ -111,6 +119,40 @@ export const shellState = {
   homeGuiMounted: false,
 };
 
+// Keyboard focus trap for modal shell surfaces (launcher, unlock). Wraps Tab
+// and Shift+Tab within the container's visible, enabled controls. Returns true
+// when the event was handled.
+export function trapTabWithin(container, event) {
+  if (event.key !== "Tab" || !container) {
+    return false;
+  }
+  const focusables = Array.from(
+    container.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+    ),
+  ).filter(
+    (element) => !element.hidden && !element.disabled && element.offsetParent !== null,
+  );
+  if (focusables.length === 0) {
+    event.preventDefault();
+    return true;
+  }
+  const first = focusables[0];
+  const last = focusables[focusables.length - 1];
+  const active = document.activeElement;
+  if (event.shiftKey && (active === first || !container.contains(active))) {
+    event.preventDefault();
+    last.focus();
+    return true;
+  }
+  if (!event.shiftKey && (active === last || !container.contains(active))) {
+    event.preventDefault();
+    first.focus();
+    return true;
+  }
+  return false;
+}
+
 export function retireHomeGuiWindowState() {
   if (shellState.windows.size === 0) {
     return;
@@ -134,11 +176,18 @@ function bindHomeGuiDomRefs() {
   launcherSearch = document.querySelector("#launcher-search");
   launcherToggleButton = document.querySelector("#launcher-toggle");
   closeLauncherButton = document.querySelector("#close-launcher");
+  launcherViewToggle = document.querySelector("#launcher-view-toggle");
   toolbarHomeButton = document.querySelector("#toolbar-home");
+  toolbarActiveTitleNode = document.querySelector("#toolbar-active-title");
   toolbarInboxButton = document.querySelector("#toolbar-inbox");
   toolbarInboxCount = document.querySelector("#toolbar-inbox-count");
-  toolbarFullscreenButton = document.querySelector("#toolbar-fullscreen");
-  toolbarSignOutButton = document.querySelector("#toolbar-sign-out");
+  toolbarFullscreenButton = document.querySelector("#control-centre-fullscreen");
+  toolbarSignOutButton = document.querySelector("#identity-menu-sign-out");
+  toolbarSystem = document.querySelector("#toolbar-system");
+  toolbarIdentityMenu = document.querySelector("#toolbar-identity-menu");
+  toolbarIdentityMenuName = document.querySelector("#toolbar-identity-menu-name");
+  identityMenuSystemButton = document.querySelector("#identity-menu-system");
+  identityMenuShowDesktopButton = document.querySelector("#identity-menu-show-desktop");
   homeNotificationToast = document.querySelector("#home-notification-toast");
   homeNotificationTitle = document.querySelector("#home-notification-title");
   homeNotificationBody = document.querySelector("#home-notification-body");
@@ -317,11 +366,13 @@ export function desktopEntryExists(summary, entryId) {
 }
 
 export function desktopLayoutEntries(summary) {
-  const appEntries = allVisibleTargets(summary).map((target) => ({
-    id: target.target,
-    kind: "target",
-    target,
-  }));
+  const appEntries = allVisibleTargets(summary)
+    .filter((target) => isTargetOnDesktop(target.target))
+    .map((target) => ({
+      id: target.target,
+      kind: "target",
+      target,
+    }));
   const objectEntries = desktopObjects(summary).map((object) => ({
     id: desktopObjectEntryId(object),
     kind: "object",
@@ -401,23 +452,41 @@ function sortedDesktopTargets(summary) {
 export function initializeShellLayout(summary) {
   syncHomeBrowserState(summary);
   const stored = shellState.homeBrowserState.layout;
-  const normalizedDesktopHidden = normalizeDesktopHiddenTargets(
-    stored ? stored.desktopHidden : null,
+  /* Desktop philosophy (macOS): the desktop belongs to the user's objects —
+     files, folders, Trash. Apps live in the dock and the launcher. App icons
+     appear on the desktop only when the user explicitly adds them, so the
+     app list is opt-in (desktopApps), not opt-out. */
+  const normalizedDesktopApps = normalizeDesktopAppTargets(
+    stored && Array.isArray(stored.desktopApps)
+      ? stored.desktopApps
+      : defaultDesktopTargets(summary),
     summary,
   );
+  /* Layouts saved before the desktopApps model migrate here: their desktop
+     empties of app icons, so they get the default dock pins exactly once —
+     otherwise "where did my apps go" has no visible answer. Layouts that
+     know the model keep whatever dock the user chose, including empty. */
+  const migratingLayout = Boolean(stored) && !Array.isArray(stored.desktopApps);
+  const storedTaskbar = stored && Array.isArray(stored.taskbar) ? stored.taskbar : [];
   shellState.shellLayoutState = {
-    taskbar: normalizeTaskbarLayout(stored ? stored.taskbar : null, summary),
+    taskbar: normalizeTaskbarLayout(
+      !stored || (migratingLayout && storedTaskbar.length === 0)
+        ? defaultTaskbarPins(summary)
+        : storedTaskbar,
+      summary,
+    ),
     desktop: {},
     desktopLabels: normalizeDesktopLabels(stored ? stored.desktopLabels : null, summary),
-    desktopHidden: normalizedDesktopHidden,
+    desktopApps: normalizedDesktopApps,
     desktopIconsVisible: normalizeDesktopIconsVisible(stored ? stored.desktopIconsVisible : null),
   };
 
   let changed =
     !stored ||
+    migratingLayout ||
     !arrayEquals(
-      Array.isArray(stored.desktopHidden) ? stored.desktopHidden : [],
-      normalizedDesktopHidden,
+      Array.isArray(stored.desktopApps) ? stored.desktopApps : [],
+      normalizedDesktopApps,
     ) ||
     typeof stored.desktopIconsVisible !== "boolean";
   const storedDesktop = stored && stored.desktop && typeof stored.desktop === "object"
@@ -587,7 +656,7 @@ function normalizeDesktopLabels(labels, summary) {
   return normalized;
 }
 
-function normalizeDesktopHiddenTargets(targetIds, summary) {
+function normalizeDesktopAppTargets(targetIds, summary) {
   const knownTargets = new Set(allVisibleTargets(summary).map((target) => target.target));
   const normalized = [];
   for (const targetId of Array.isArray(targetIds) ? targetIds : []) {
@@ -603,6 +672,25 @@ function normalizeDesktopHiddenTargets(targetIds, summary) {
   return normalized;
 }
 
+/* Fresh principals get a working dock instead of an empty bar: the everyday
+   surfaces, pinned in a fixed order. Purely a first-run default — the saved
+   layout owns the dock from the first change onward. */
+const DEFAULT_TASKBAR_PINS = ["browser", "library", "wallet", "documents", "chat", "system"];
+
+function defaultTaskbarPins(summary) {
+  const knownTargets = new Set(allVisibleTargets(summary).map((target) => target.target));
+  return DEFAULT_TASKBAR_PINS.filter((targetId) => knownTargets.has(targetId));
+}
+
+/* First-run desktop membership: object-kind targets (content projections)
+   belong on the desktop; app targets do not — they live in the dock and the
+   launcher until the user explicitly adds them. */
+function defaultDesktopTargets(summary) {
+  return allVisibleTargets(summary)
+    .filter((target) => target.target_kind === "object")
+    .map((target) => target.target);
+}
+
 function normalizeDesktopIconsVisible(value) {
   return typeof value === "boolean" ? value : true;
 }
@@ -682,6 +770,22 @@ export function clampDesktopPosition(position) {
   };
 }
 
+// Snap a dropped icon to the nearest grid cell; fall back to the free-form
+// position when that cell is already occupied by another icon.
+export function snapDesktopPosition(entryId, position) {
+  const clamped = clampDesktopPosition(position);
+  const snapped = clampDesktopPosition({
+    x: DESKTOP_ICON_MARGIN +
+      Math.round((clamped.x - DESKTOP_ICON_MARGIN) / DESKTOP_ICON_GAP_X) * DESKTOP_ICON_GAP_X,
+    y: DESKTOP_ICON_MARGIN +
+      Math.round((clamped.y - DESKTOP_ICON_MARGIN) / DESKTOP_ICON_GAP_Y) * DESKTOP_ICON_GAP_Y,
+  });
+  if (desktopPositionOverlapsAny(snapped, occupiedDesktopPositionsExcept(entryId))) {
+    return clamped;
+  }
+  return snapped;
+}
+
 export function desktopPositionForTarget(targetId, defaultIndex) {
   const stored = shellState.shellLayoutState.desktop[targetId];
   if (stored) {
@@ -716,31 +820,31 @@ export function setDesktopIconsVisible(visible) {
 }
 
 export function isTargetOnDesktop(targetId) {
-  return !shellState.shellLayoutState.desktopHidden.includes(targetId);
+  return shellState.shellLayoutState.desktopApps.includes(targetId);
 }
 
 export function addTargetToDesktop(targetId) {
-  const next = shellState.shellLayoutState.desktopHidden.filter(
-    (candidate) => candidate !== targetId,
-  );
-  if (arrayEquals(next, shellState.shellLayoutState.desktopHidden)) {
+  if (!shellState.currentSummary || !targetById(shellState.currentSummary, targetId)) {
+    return false;
+  }
+  if (shellState.shellLayoutState.desktopApps.includes(targetId)) {
     return false;
   }
-  shellState.shellLayoutState.desktopHidden = next;
+  shellState.shellLayoutState.desktopApps = [
+    ...shellState.shellLayoutState.desktopApps,
+    targetId,
+  ];
   return true;
 }
 
 export function removeTargetFromDesktop(targetId) {
-  if (!shellState.currentSummary || !targetById(shellState.currentSummary, targetId)) {
-    return false;
-  }
-  if (shellState.shellLayoutState.desktopHidden.includes(targetId)) {
+  const next = shellState.shellLayoutState.desktopApps.filter(
+    (candidate) => candidate !== targetId,
+  );
+  if (arrayEquals(next, shellState.shellLayoutState.desktopApps)) {
     return false;
   }
-  shellState.shellLayoutState.desktopHidden = [
-    ...shellState.shellLayoutState.desktopHidden,
-    targetId,
-  ];
+  shellState.shellLayoutState.desktopApps = next;
   return true;
 }
 
diff --git a/capsules/home-gui/browser/shell-expose.js b/capsules/home-gui/browser/shell-expose.js
new file mode 100644
index 000000000..f52944471
--- /dev/null
+++ b/capsules/home-gui/browser/shell-expose.js
@@ -0,0 +1,139 @@
+/* Exposé-lite — scale every visible window into a glanceable grid using
+ * transform/opacity only (no layout thrash). F3 toggles; click a card to
+ * focus that window; Esc dismisses. Pure shell presentation — no gateway.
+ */
+
+import { shellState } from "./shell-core.js?v=home-20260718m";
+import {
+  browserWindowEntries,
+  focusWindow,
+  sortWindowEntriesByZOrder,
+} from "./shell-windows.js?v=home-20260718m";
+
+// Queried lazily: matchMedia is unavailable in the host's DOM-stubbed smoke
+// harnesses, and the GUI module graph must stay import-safe there.
+function exposeReducedMotion() {
+  return window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
+}
+
+let active = false;
+const originals = new Map(); // windowId -> { transform, transition, zIndex, boxShadow }
+
+function visibleEntries() {
+  return sortWindowEntriesByZOrder(browserWindowEntries()).filter(
+    (entry) => !entry.node.classList.contains("hidden"),
+  );
+}
+
+function gridSpec(count) {
+  const cols = Math.ceil(Math.sqrt(count));
+  const rows = Math.ceil(count / cols);
+  return { cols, rows };
+}
+
+export function isExposeOpen() {
+  return active;
+}
+
+export function closeExpose() {
+  if (!active) {
+    return;
+  }
+  active = false;
+  document.body.classList.remove("expose-active");
+  for (const [windowId, style] of originals) {
+    const entry = shellState.windows.get(windowId);
+    if (entry?.node) {
+      entry.node.style.transform = style.transform;
+      entry.node.style.transition = style.transition;
+      entry.node.style.zIndex = style.zIndex;
+      entry.node.style.boxShadow = style.boxShadow;
+      entry.node.classList.remove("expose-card");
+      entry.node.removeAttribute("data-expose");
+    }
+  }
+  originals.clear();
+}
+
+export function openExpose() {
+  const entries = visibleEntries();
+  if (entries.length < 2) {
+    return false;
+  }
+  closeExpose();
+  active = true;
+  document.body.classList.add("expose-active");
+  const stage = document.querySelector("#desktop") || document.body;
+  const stageRect = stage.getBoundingClientRect();
+  const pad = 24;
+  const { cols, rows } = gridSpec(entries.length);
+  const cellW = (stageRect.width - pad * (cols + 1)) / cols;
+  const cellH = (stageRect.height - pad * (rows + 1)) / rows;
+
+  entries.forEach((entry, index) => {
+    const node = entry.node;
+    const rect = node.getBoundingClientRect();
+    originals.set(entry.id, {
+      transform: node.style.transform,
+      transition: node.style.transition,
+      zIndex: node.style.zIndex,
+      boxShadow: node.style.boxShadow,
+    });
+    const col = index % cols;
+    const row = Math.floor(index / cols);
+    const targetX = stageRect.left + pad + col * (cellW + pad) + cellW / 2;
+    const targetY = stageRect.top + pad + row * (cellH + pad) + cellH / 2;
+    const scale = Math.min(cellW / Math.max(rect.width, 1), cellH / Math.max(rect.height, 1), 1) * 0.92;
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+    const dx = targetX - centerX;
+    const dy = targetY - centerY;
+    node.classList.add("expose-card");
+    node.dataset.expose = entry.id;
+    node.style.zIndex = String(200000 + index);
+    node.style.boxShadow = "0 18px 50px rgba(0, 0, 0, 0.45)";
+    if (!exposeReducedMotion()) {
+      node.style.transition = "transform 220ms cubic-bezier(0.2, 0, 0, 1)";
+    }
+    node.style.transform = `translate(${dx}px, ${dy}px) scale(${scale})`;
+  });
+  return true;
+}
+
+export function toggleExpose() {
+  if (active) {
+    closeExpose();
+    return true;
+  }
+  return openExpose();
+}
+
+let exposeBound = false;
+
+export function bindExpose() {
+  if (exposeBound) {
+    return;
+  }
+  exposeBound = true;
+  document.addEventListener(
+    "click",
+    (event) => {
+      if (!active) {
+        return;
+      }
+      const card = event.target.closest(".window[data-expose]");
+      if (card?.dataset.expose) {
+        event.preventDefault();
+        event.stopPropagation();
+        const id = card.dataset.expose;
+        closeExpose();
+        focusWindow(id, { moveFocus: true });
+        return;
+      }
+      if (!event.target.closest(".window")) {
+        closeExpose();
+      }
+    },
+    true,
+  );
+}
diff --git a/capsules/home-gui/browser/shell-keyboard.js b/capsules/home-gui/browser/shell-keyboard.js
new file mode 100644
index 000000000..93832867a
--- /dev/null
+++ b/capsules/home-gui/browser/shell-keyboard.js
@@ -0,0 +1,389 @@
+import {
+  shellState,
+  mountGlyph,
+  trapTabWithin,
+  launcher,
+} from "./shell-core.js?v=home-20260718m";
+import {
+  moveDesktopSelection,
+} from "./shell-surface.js?v=home-20260718m";
+import { toggleSpotlight } from "./shell-spotlight.js?v=home-20260718m";
+import {
+  focusWindow,
+  closeWindow,
+  sortWindowEntriesByZOrder,
+} from "./shell-windows.js?v=home-20260718m";
+import {
+  closeExpose,
+  isExposeOpen,
+  toggleExpose,
+} from "./shell-expose.js?v=home-20260718m";
+import {
+  hideQuickLook,
+  isQuickLookOpen,
+  toggleQuickLook,
+} from "./shell-quicklook.js?v=home-20260718m";
+
+/* Shell keyboard layer.
+ *
+ * Scope honesty: key events only reach the shell while focus is in the shell
+ * document — an app iframe with focus receives its own keys (that is correct
+ * app behavior, same as any OS). macOS reserves Cmd+Space (Spotlight) and
+ * Cmd+Tab at the system level, so each binding has an in-browser equivalent:
+ *   spotlight  Cmd+Space / Ctrl+Space (the launcher stays on the dock icon)
+ *   switcher   Alt+Tab (hold Alt, Tab advances, release commits)
+ *   cycle      Cmd+`
+ *   close      Cmd+W (honored when the browser lets the page claim it,
+ *              e.g. installed/kiosk mode)
+ *   overlay    Cmd+/
+ *
+ * The layer sleeps whenever Home GUI is not the mounted shell: while an
+ * alternate root shell (home-cli) owns the surface, the host document must
+ * not answer desktop chords.
+ */
+
+/* Bound by bindShellKeyboard() once the lazy GUI template is in the DOM. */
+let switcherRoot = null;
+let switcherList = null;
+let shortcutsOverlay = null;
+let shortcutsClose = null;
+
+const switcherState = {
+  open: false,
+  entries: [],
+  index: 0,
+  invoker: null,
+};
+
+function homeGuiOwnsKeys() {
+  return shellState.homeGuiMounted === true;
+}
+
+function allWindowEntriesByRecency() {
+  return sortWindowEntriesByZOrder(Array.from(shellState.windows.values()));
+}
+
+function typingInField(event) {
+  const target = event.target;
+  if (!target || typeof target.closest !== "function") {
+    return false;
+  }
+  return Boolean(target.closest("input, textarea, select, [contenteditable='true']"));
+}
+
+/* ---- Alt+Tab window switcher (listbox semantics) ---- */
+
+function openSwitcher() {
+  const entries = allWindowEntriesByRecency();
+  if (entries.length === 0) {
+    return false;
+  }
+  switcherState.open = true;
+  switcherState.entries = entries;
+  switcherState.index = entries.length > 1 ? 1 : 0;
+  switcherState.invoker = document.activeElement;
+  renderSwitcher();
+  switcherRoot.hidden = false;
+  switcherRoot.setAttribute("aria-hidden", "false");
+  return true;
+}
+
+function renderSwitcher() {
+  switcherList.replaceChildren();
+  switcherState.entries.forEach((entry, index) => {
+    const item = document.createElement("div");
+    item.className = "window-switcher-item";
+    item.id = `window-switcher-item-${index}`;
+    item.setAttribute("role", "option");
+    item.setAttribute("aria-selected", index === switcherState.index ? "true" : "false");
+    const glyph = document.createElement("span");
+    glyph.className = "window-switcher-glyph app-glyph";
+    glyph.setAttribute("aria-hidden", "true");
+    mountGlyph(glyph, entry.targetId || entry.id);
+    const label = document.createElement("span");
+    label.className = "window-switcher-title";
+    label.textContent = entry.title || entry.id;
+    item.append(glyph, label);
+    if (entry.node.classList.contains("hidden")) {
+      item.dataset.minimized = "true";
+    }
+    item.addEventListener("pointerdown", (event) => {
+      event.preventDefault();
+      switcherState.index = index;
+      commitSwitcher();
+    });
+    switcherList.appendChild(item);
+  });
+  switcherList.setAttribute(
+    "aria-activedescendant",
+    `window-switcher-item-${switcherState.index}`,
+  );
+}
+
+function moveSwitcherSelection(delta) {
+  const count = switcherState.entries.length;
+  if (count === 0) {
+    return;
+  }
+  switcherState.index = (switcherState.index + delta + count) % count;
+  for (const [index, item] of Array.from(switcherList.children).entries()) {
+    item.setAttribute("aria-selected", index === switcherState.index ? "true" : "false");
+  }
+  switcherList.setAttribute(
+    "aria-activedescendant",
+    `window-switcher-item-${switcherState.index}`,
+  );
+}
+
+function closeSwitcher() {
+  switcherState.open = false;
+  switcherState.entries = [];
+  switcherRoot.hidden = true;
+  switcherRoot.setAttribute("aria-hidden", "true");
+  switcherList.replaceChildren();
+}
+
+function commitSwitcher() {
+  const entry = switcherState.entries[switcherState.index];
+  closeSwitcher();
+  if (entry && shellState.windows.has(entry.id)) {
+    focusWindow(entry.id, { moveFocus: true });
+  }
+}
+
+/* ---- Cmd+` cycle among visible windows ---- */
+
+function cycleVisibleWindows() {
+  const visible = allWindowEntriesByRecency().filter(
+    (entry) => !entry.node.classList.contains("hidden"),
+  );
+  if (visible.length < 2) {
+    return false;
+  }
+  // Frontmost is first; send it to the back of the rotation.
+  focusWindow(visible[visible.length - 1].id, { moveFocus: true });
+  return true;
+}
+
+/* ---- Shortcuts overlay ---- */
+
+function shortcutsOverlayOpen() {
+  return shortcutsOverlay ? !shortcutsOverlay.hidden : false;
+}
+
+let shortcutsInvoker = null;
+
+export function toggleShortcutsOverlay() {
+  if (!shortcutsOverlay) {
+    return;
+  }
+  if (shortcutsOverlayOpen()) {
+    hideShortcutsOverlay();
+    return;
+  }
+  shortcutsInvoker =
+    document.activeElement && document.activeElement !== document.body
+      ? document.activeElement
+      : null;
+  shortcutsOverlay.hidden = false;
+  shortcutsOverlay.setAttribute("aria-hidden", "false");
+  shortcutsClose?.focus();
+}
+
+function hideShortcutsOverlay() {
+  if (!shortcutsOverlay || shortcutsOverlay.hidden) {
+    return;
+  }
+  shortcutsOverlay.hidden = true;
+  shortcutsOverlay.setAttribute("aria-hidden", "true");
+  shortcutsInvoker?.focus?.();
+  shortcutsInvoker = null;
+}
+
+/* Shell-switch retirement: the host may unmount the GUI while any of these
+   transient surfaces is open. */
+export function retireKeyboardSurfaces() {
+  if (switcherState.open) {
+    closeSwitcher();
+  }
+  hideShortcutsOverlay();
+}
+
+/* ---- Global bindings ---- */
+
+let keyboardBound = false;
+
+/* Called by the home-gui facade once ensureHomeGuiDom() has instantiated the
+   lazy GUI template — these nodes do not exist at module-evaluation time. */
+export function bindShellKeyboard() {
+  if (keyboardBound) {
+    return;
+  }
+  keyboardBound = true;
+  switcherRoot = document.querySelector("#window-switcher");
+  switcherList = document.querySelector("#window-switcher-list");
+  shortcutsOverlay = document.querySelector("#shortcuts-overlay");
+  shortcutsClose = document.querySelector("#shortcuts-close");
+
+  shortcutsClose?.addEventListener("click", hideShortcutsOverlay);
+  shortcutsOverlay?.addEventListener("pointerdown", (event) => {
+    if (!event.target.closest(".shortcuts-card")) {
+      hideShortcutsOverlay();
+    }
+  });
+  shortcutsOverlay?.addEventListener("keydown", (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      hideShortcutsOverlay();
+      return;
+    }
+    trapTabWithin(shortcutsOverlay.querySelector(".shortcuts-card"), event);
+  });
+
+  // Capture phase so the switcher wins over surface-level handlers.
+  document.addEventListener(
+    "keydown",
+    (event) => {
+      if (!homeGuiOwnsKeys()) {
+        return;
+      }
+      if (event.key === "Escape") {
+        if (isExposeOpen()) {
+          event.preventDefault();
+          event.stopPropagation();
+          closeExpose();
+          return;
+        }
+        if (isQuickLookOpen()) {
+          event.preventDefault();
+          event.stopPropagation();
+          hideQuickLook();
+          return;
+        }
+      }
+      if (event.key === "F3" && !event.metaKey && !event.ctrlKey && !event.altKey && !typingInField(event)) {
+        if (toggleExpose()) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+        return;
+      }
+      // Quick Look: bare Space with a desktop selection, when focus is still in
+      // the shell document (not an app iframe) — matches desktop-OS convention.
+      if (
+        event.code === "Space" &&
+        !event.metaKey &&
+        !event.ctrlKey &&
+        !event.altKey &&
+        !typingInField(event) &&
+        !isExposeOpen() &&
+        launcher.hidden &&
+        shellState.selectedDesktopTargetId
+      ) {
+        const el = document.activeElement;
+        const inAppFrame =
+          el?.tagName === "IFRAME" || Boolean(el?.closest?.(".window-frame"));
+        if (!inAppFrame && toggleQuickLook()) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+      }
+      if (switcherState.open) {
+        if (event.key === "Tab" || event.key === "ArrowRight" || event.key === "ArrowDown") {
+          event.preventDefault();
+          event.stopPropagation();
+          moveSwitcherSelection(event.shiftKey && event.key === "Tab" ? -1 : 1);
+          return;
+        }
+        if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+          event.preventDefault();
+          event.stopPropagation();
+          moveSwitcherSelection(-1);
+          return;
+        }
+        if (event.key === "Escape") {
+          event.preventDefault();
+          event.stopPropagation();
+          closeSwitcher();
+          return;
+        }
+        if (event.key === "Enter") {
+          event.preventDefault();
+          event.stopPropagation();
+          commitSwitcher();
+          return;
+        }
+        return;
+      }
+
+      if (event.altKey && event.key === "Tab" && !event.metaKey && !event.ctrlKey) {
+        if (openSwitcher()) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+        return;
+      }
+
+      const primaryModifier = event.metaKey || event.ctrlKey;
+      if (!primaryModifier) {
+        return;
+      }
+      if (event.code === "Space" && !event.shiftKey && !event.altKey) {
+        event.preventDefault();
+        toggleSpotlight();
+        return;
+      }
+      if (event.key === "`" && !event.shiftKey && !event.altKey) {
+        if (cycleVisibleWindows()) {
+          event.preventDefault();
+        }
+        return;
+      }
+      if ((event.key === "w" || event.key === "W") && !event.shiftKey && !event.altKey) {
+        if (shellState.activeWindowId && !typingInField(event) && launcher.hidden) {
+          event.preventDefault();
+          closeWindow(shellState.activeWindowId);
+        }
+        return;
+      }
+      if (event.key === "/" && !event.shiftKey && !event.altKey) {
+        event.preventDefault();
+        toggleShortcutsOverlay();
+      }
+    },
+    { capture: true },
+  );
+
+  document.addEventListener("keyup", (event) => {
+    if (switcherState.open && event.key === "Alt") {
+      commitSwitcher();
+    }
+  });
+
+  window.addEventListener("blur", () => {
+    if (switcherState.open) {
+      closeSwitcher();
+    }
+  });
+}
+
+/* ---- Desktop arrow-key navigation (wired from the home-gui facade) ---- */
+
+export function handleDesktopArrowKey(event) {
+  const direction = {
+    ArrowLeft: "left",
+    ArrowRight: "right",
+    ArrowUp: "up",
+    ArrowDown: "down",
+  }[event.key];
+  if (!direction) {
+    return false;
+  }
+  if (moveDesktopSelection(direction)) {
+    event.preventDefault();
+    return true;
+  }
+  return false;
+}
diff --git a/capsules/home-gui/browser/shell-menubar.js b/capsules/home-gui/browser/shell-menubar.js
new file mode 100644
index 000000000..95611cffe
--- /dev/null
+++ b/capsules/home-gui/browser/shell-menubar.js
@@ -0,0 +1,311 @@
+/* App menu bar — the macOS contract: the top bar owns File/Edit/View for the
+ * FOCUSED app. Apps declare their menus with a tiny postMessage manifest
+ * (`home:menu-manifest`); the shell renders the titles next to the app name
+ * and posts each chosen command straight back to that app's iframe as
+ * `elastos:menu-command`. Apps that never send a manifest get the default
+ * File menu (New Window / Close Window), so the bar always behaves like an
+ * operating system, never like a webpage.
+ *
+ * Trust: manifests are DATA only — sanitized, size-capped, rendered via
+ * textContent. A manifest can never inject markup or reach another window;
+ * commands are dispatched only to the window that declared them.
+ */
+
+import { shellState } from "./shell-core.js?v=home-20260718m";
+
+/* Resolved lazily — the menubar lives in the lazy GUI template, which is not
+   in the DOM at module-evaluation time. */
+let menubarNode = null;
+
+function menubarRoot() {
+  if (!menubarNode) {
+    menubarNode = document.querySelector("#toolbar-menubar");
+  }
+  return menubarNode;
+}
+
+const MAX_MENUS = 6;
+const MAX_ITEMS = 20;
+const MAX_LABEL = 48;
+const CMD_PATTERN = /^[a-z0-9:._-]{1,64}$/i;
+
+/* Shell-handled commands (never posted to the app). */
+const CMD_NEW_WINDOW = "__new-window";
+const CMD_CLOSE_WINDOW = "__close-window";
+
+const manifests = new Map(); // windowId -> sanitized menus
+let deps = null;
+let openMenu = null; // { index, button, popover }
+let outsideDismissBound = false;
+
+export function bindMenubar(nextDeps) {
+  deps = nextDeps;
+}
+
+export function setMenuManifest(windowId, rawMenus) {
+  const menus = sanitizeMenus(rawMenus);
+  if (menus.length) {
+    manifests.set(windowId, menus);
+  } else {
+    manifests.delete(windowId);
+  }
+  syncMenubar();
+}
+
+function sanitizeMenus(rawMenus) {
+  if (!Array.isArray(rawMenus)) {
+    return [];
+  }
+  const menus = [];
+  for (const rawMenu of rawMenus.slice(0, MAX_MENUS)) {
+    const title = cleanLabel(rawMenu?.title);
+    if (!title || !Array.isArray(rawMenu.items)) {
+      continue;
+    }
+    const items = [];
+    for (const rawItem of rawMenu.items.slice(0, MAX_ITEMS)) {
+      if (rawItem === "-") {
+        items.push("-");
+        continue;
+      }
+      const label = cleanLabel(rawItem?.label);
+      const cmd = typeof rawItem?.cmd === "string" && CMD_PATTERN.test(rawItem.cmd)
+        ? rawItem.cmd
+        : "";
+      if (!label || !cmd) {
+        continue;
+      }
+      items.push({ label, cmd, disabled: rawItem?.disabled === true });
+    }
+    if (items.some((item) => item !== "-")) {
+      menus.push({ title, items });
+    }
+  }
+  return menus;
+}
+
+function cleanLabel(value) {
+  return typeof value === "string" ? value.trim().slice(0, MAX_LABEL) : "";
+}
+
+function defaultMenus(targetId) {
+  // "New Window" only where opening one is what actually happens: single-
+  // session apps refocus, and the protected viewers must never get a menu
+  // side door into a dKMS open.
+  const items = [];
+  if (deps?.supportsNewWindow?.(targetId)) {
+    items.push({ label: "New Window", cmd: CMD_NEW_WINDOW, disabled: false }, "-");
+  }
+  items.push({ label: "Close Window", cmd: CMD_CLOSE_WINDOW, disabled: false });
+  return [{ title: "File", items }];
+}
+
+function activeBrowserWindow() {
+  const entry = shellState.activeWindowId
+    ? shellState.windows.get(shellState.activeWindowId)
+    : null;
+  if (!entry || entry.node.classList.contains("hidden")) {
+    return null;
+  }
+  return entry;
+}
+
+/* Re-render for the focused window. Runs on every window UI refresh, so it
+   also prunes manifests whose windows are gone. */
+export function syncMenubar() {
+  const root = menubarRoot();
+  if (!root) {
+    return;
+  }
+  for (const windowId of [...manifests.keys()]) {
+    if (!shellState.windows.has(windowId)) {
+      manifests.delete(windowId);
+    }
+  }
+  closeMenus();
+  root.replaceChildren();
+  const entry = activeBrowserWindow();
+  if (!entry) {
+    return;
+  }
+  const menus = manifests.get(entry.id) || defaultMenus(entry.targetId);
+  menus.forEach((menu, index) => {
+    root.appendChild(buildMenu(menu, index, entry.id));
+  });
+}
+
+function buildMenu(menu, index, windowId) {
+  const container = document.createElement("div");
+  container.className = "toolbar-menu";
+
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = "toolbar-menu-title";
+  button.textContent = menu.title;
+  button.setAttribute("aria-haspopup", "true");
+  button.setAttribute("aria-expanded", "false");
+
+  const popover = document.createElement("div");
+  popover.className = "toolbar-menu-popover";
+  popover.setAttribute("role", "menu");
+  popover.setAttribute("aria-label", menu.title);
+  popover.hidden = true;
+
+  for (const item of menu.items) {
+    if (item === "-") {
+      const divider = document.createElement("div");
+      divider.className = "toolbar-menu-divider";
+      divider.setAttribute("role", "separator");
+      popover.appendChild(divider);
+      continue;
+    }
+    const row = document.createElement("button");
+    row.type = "button";
+    row.className = "toolbar-menu-item";
+    row.setAttribute("role", "menuitem");
+    row.textContent = item.label;
+    row.disabled = item.disabled;
+    row.tabIndex = -1;
+    row.addEventListener("click", () => {
+      closeMenus({ restoreFocus: false });
+      runMenuCommand(windowId, item.cmd);
+    });
+    popover.appendChild(row);
+  }
+
+  button.addEventListener("click", () => {
+    if (openMenu?.index === index) {
+      closeMenus();
+      return;
+    }
+    openMenuAt(index);
+  });
+  // macOS sweep: while one menu is open, pointing at another title opens it.
+  button.addEventListener("pointerenter", () => {
+    if (openMenu && openMenu.index !== index) {
+      openMenuAt(index);
+    }
+  });
+  button.addEventListener("keydown", (event) => {
+    if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      openMenuAt(index, { focusFirst: true });
+    }
+  });
+  popover.addEventListener("keydown", (event) => onPopoverKeydown(event, index));
+
+  container.append(button, popover);
+  return container;
+}
+
+function menuContainers() {
+  const root = menubarRoot();
+  return root ? [...root.querySelectorAll(".toolbar-menu")] : [];
+}
+
+function openMenuAt(index, options = {}) {
+  closeMenus({ restoreFocus: false });
+  const container = menuContainers()[index];
+  if (!container) {
+    return;
+  }
+  const button = container.querySelector(".toolbar-menu-title");
+  const popover = container.querySelector(".toolbar-menu-popover");
+  popover.hidden = false;
+  button.setAttribute("aria-expanded", "true");
+  openMenu = { index, button, popover };
+  bindOutsideDismiss();
+  if (options.focusFirst) {
+    focusMenuItem(popover, 0);
+  }
+}
+
+export function closeMenus(options = {}) {
+  if (!openMenu) {
+    return;
+  }
+  const { button, popover } = openMenu;
+  popover.hidden = true;
+  button.setAttribute("aria-expanded", "false");
+  if (options.restoreFocus !== false && popover.contains(document.activeElement)) {
+    button.focus();
+  }
+  openMenu = null;
+}
+
+function bindOutsideDismiss() {
+  if (outsideDismissBound) {
+    return;
+  }
+  outsideDismissBound = true;
+  document.addEventListener("pointerdown", (event) => {
+    if (openMenu && !event.target.closest(".toolbar-menu")) {
+      closeMenus({ restoreFocus: false });
+    }
+  });
+  window.addEventListener("keydown", (event) => {
+    if (event.key === "Escape" && openMenu) {
+      event.stopPropagation();
+      closeMenus();
+    }
+  }, true);
+}
+
+function focusMenuItem(popover, index) {
+  const items = [...popover.querySelectorAll(".toolbar-menu-item:not(:disabled)")];
+  if (!items.length) {
+    return;
+  }
+  const clamped = ((index % items.length) + items.length) % items.length;
+  items[clamped].focus();
+}
+
+function onPopoverKeydown(event, index) {
+  const popover = openMenu?.popover;
+  if (!popover) {
+    return;
+  }
+  const items = [...popover.querySelectorAll(".toolbar-menu-item:not(:disabled)")];
+  const current = items.indexOf(document.activeElement);
+  if (event.key === "ArrowDown") {
+    event.preventDefault();
+    focusMenuItem(popover, current + 1);
+  } else if (event.key === "ArrowUp") {
+    event.preventDefault();
+    focusMenuItem(popover, current - 1);
+  } else if (event.key === "ArrowRight") {
+    event.preventDefault();
+    openSiblingMenu(index + 1);
+  } else if (event.key === "ArrowLeft") {
+    event.preventDefault();
+    openSiblingMenu(index - 1);
+  }
+}
+
+function openSiblingMenu(index) {
+  const count = menuContainers().length;
+  if (count < 2) {
+    return;
+  }
+  openMenuAt(((index % count) + count) % count, { focusFirst: true });
+}
+
+function runMenuCommand(windowId, cmd) {
+  const entry = shellState.windows.get(windowId);
+  if (!entry) {
+    return;
+  }
+  if (cmd === CMD_CLOSE_WINDOW) {
+    deps?.closeWindow(windowId);
+    return;
+  }
+  if (cmd === CMD_NEW_WINDOW) {
+    deps?.openTarget(entry.targetId);
+    return;
+  }
+  const frame = entry.node.querySelector(".window-frame");
+  frame?.contentWindow?.postMessage(
+    { type: "elastos:menu-command", cmd },
+    window.location.origin,
+  );
+}
diff --git a/capsules/home-gui/browser/shell-notifications.js b/capsules/home-gui/browser/shell-notifications.js
new file mode 100644
index 000000000..37b4910cd
--- /dev/null
+++ b/capsules/home-gui/browser/shell-notifications.js
@@ -0,0 +1,204 @@
+/* Notification Center — the clock's other job (macOS model: the clock is the
+ * door to notification history). Every entry that flows through the summary
+ * poll is remembered in a small client-side ring buffer, so a toast you missed
+ * is never gone. Purely a browser concern: localStorage only, no gateway
+ * writes, and clearing history here never touches the server-side entries that
+ * drive the inbox badge.
+ */
+
+import { clockNode } from "./shell-core.js?v=home-20260718m";
+import { openTarget } from "./shell-windows.js?v=home-20260718m";
+
+const STORE_KEY = "elastos.home.notifications";
+const MAX_ENTRIES = 50;
+
+/* Bound by bindNotificationCenter() once the lazy GUI template is in the DOM. */
+let panel = null;
+let list = null;
+let emptyState = null;
+let clearButton = null;
+
+let outsideDismissBound = false;
+
+function loadHistory() {
+  try {
+    const raw = localStorage.getItem(STORE_KEY);
+    const parsed = raw ? JSON.parse(raw) : [];
+    return Array.isArray(parsed) ? parsed : [];
+  } catch (_error) {
+    return [];
+  }
+}
+
+function saveHistory(entries) {
+  try {
+    localStorage.setItem(STORE_KEY, JSON.stringify(entries.slice(0, MAX_ENTRIES)));
+  } catch (_error) {
+    // History is a convenience; losing it is acceptable.
+  }
+}
+
+/* Called on every summary poll: remember entries we have not seen before,
+   newest first. The summary is the source; this buffer is only the memory. */
+export function recordNotifications(summary) {
+  const entries = Array.isArray(summary?.notifications?.entries)
+    ? summary.notifications.entries
+    : [];
+  if (entries.length === 0) {
+    return;
+  }
+  const history = loadHistory();
+  const known = new Set(history.map((item) => item.id));
+  let changed = false;
+  for (const entry of entries) {
+    const id = String(entry?.id || entry?.action_ref?.action_id || "");
+    if (!id || known.has(id)) {
+      continue;
+    }
+    history.unshift({
+      id,
+      kind: String(entry?.kind || ""),
+      title: String(entry?.title || "Notification"),
+      body: String(entry?.body || ""),
+      seenAt: Date.now(),
+    });
+    known.add(id);
+    changed = true;
+  }
+  if (changed) {
+    saveHistory(history);
+    if (panel && !panel.hidden) {
+      renderNotificationCenter();
+    }
+  }
+}
+
+function timeLabel(seenAt) {
+  const seen = new Date(seenAt);
+  const now = new Date();
+  const sameDay = seen.toDateString() === now.toDateString();
+  if (sameDay) {
+    return new Intl.DateTimeFormat([], { hour: "numeric", minute: "2-digit" }).format(seen);
+  }
+  return new Intl.DateTimeFormat([], { weekday: "short", hour: "numeric", minute: "2-digit" }).format(seen);
+}
+
+function isToday(seenAt) {
+  return new Date(seenAt).toDateString() === new Date().toDateString();
+}
+
+function renderNotificationCenter() {
+  if (!panel || !list || !emptyState) {
+    return;
+  }
+  const history = loadHistory();
+  list.textContent = "";
+  emptyState.hidden = history.length > 0;
+  if (clearButton) {
+    clearButton.hidden = history.length === 0;
+  }
+  let renderedSection = "";
+  for (const item of history) {
+    const section = isToday(item.seenAt) ? "Today" : "Earlier";
+    if (section !== renderedSection) {
+      const heading = document.createElement("h3");
+      heading.className = "notification-center-section";
+      heading.textContent = section;
+      list.appendChild(heading);
+      renderedSection = section;
+    }
+    const card = document.createElement("button");
+    card.type = "button";
+    card.className = "notification-center-item";
+    const head = document.createElement("div");
+    head.className = "notification-center-item-head";
+    const title = document.createElement("span");
+    title.className = "notification-center-item-title";
+    title.textContent = item.title;
+    const when = document.createElement("span");
+    when.className = "notification-center-item-time";
+    when.textContent = timeLabel(item.seenAt);
+    head.append(title, when);
+    card.appendChild(head);
+    if (item.body) {
+      const body = document.createElement("p");
+      body.className = "notification-center-item-body";
+      body.textContent = item.body;
+      card.appendChild(body);
+    }
+    card.addEventListener("click", () => {
+      hideNotificationCenter();
+      openTarget("inbox");
+    });
+    list.appendChild(card);
+  }
+}
+
+export function toggleNotificationCenter() {
+  if (!panel) {
+    return;
+  }
+  if (panel.hidden) {
+    showNotificationCenter();
+  } else {
+    hideNotificationCenter();
+  }
+}
+
+function showNotificationCenter() {
+  renderNotificationCenter();
+  panel.hidden = false;
+  clockNode?.setAttribute("aria-expanded", "true");
+  bindOutsideDismiss();
+  panel.focus({ preventScroll: true });
+}
+
+export function hideNotificationCenter() {
+  if (!panel || panel.hidden) {
+    return;
+  }
+  panel.hidden = true;
+  clockNode?.setAttribute("aria-expanded", "false");
+}
+
+function bindOutsideDismiss() {
+  if (outsideDismissBound) {
+    return;
+  }
+  outsideDismissBound = true;
+  document.addEventListener("pointerdown", (event) => {
+    if (panel.hidden) {
+      return;
+    }
+    if (!panel.contains(event.target) && event.target !== clockNode && !clockNode?.contains(event.target)) {
+      hideNotificationCenter();
+    }
+  });
+  document.addEventListener("keydown", (event) => {
+    if (event.key === "Escape" && !panel.hidden) {
+      hideNotificationCenter();
+    }
+  });
+}
+
+/* Called by the home-gui facade once ensureHomeGuiDom() has instantiated the
+   lazy GUI template — these nodes do not exist at module-evaluation time. */
+export function bindNotificationCenter() {
+  if (panel) {
+    return;
+  }
+  panel = document.querySelector("#notification-center");
+  list = document.querySelector("#notification-center-list");
+  emptyState = document.querySelector("#notification-center-empty");
+  clearButton = document.querySelector("#notification-center-clear");
+  if (!panel || !clockNode) {
+    return;
+  }
+  clockNode.addEventListener("click", () => {
+    toggleNotificationCenter();
+  });
+  clearButton?.addEventListener("click", () => {
+    saveHistory([]);
+    renderNotificationCenter();
+  });
+}
diff --git a/capsules/home-gui/browser/shell-quicklook.js b/capsules/home-gui/browser/shell-quicklook.js
new file mode 100644
index 000000000..82d9fb23e
--- /dev/null
+++ b/capsules/home-gui/browser/shell-quicklook.js
@@ -0,0 +1,144 @@
+/* Quick Look — Space on a selected desktop item opens a frameless preview
+ * card (glyph, name, type, Open). Esc / click-outside / Space again closes.
+ *
+ * Deliberately NO byte-level preview: raw object bytes are gated behind
+ * Library-scoped launch tokens (header-only, no cookies) and the shell holds
+ * no such token. Widening that route to Home would be ambient authority;
+ * "Open" routes through the same canonical openFileObject/openTarget path
+ * the desktop already uses, so the viewer capsule does the real rendering.
+ */
+
+import {
+  shellState,
+  mountGlyph,
+  targetById,
+  desktopObjectByEntryId,
+} from "./shell-core.js?v=home-20260718m";
+import { openFileObject } from "./shell-surface.js?v=home-20260718m";
+import { openTarget } from "./shell-windows.js?v=home-20260718m";
+
+/* Bound by bindQuickLook() once the lazy GUI template is in the DOM. */
+let panel = null;
+let stage = null;
+let titleNode = null;
+let metaNode = null;
+let openButton = null;
+let closeButton = null;
+
+let open = false;
+
+function selectedEntry() {
+  const entryId = shellState.selectedDesktopTargetId;
+  if (!entryId) {
+    return null;
+  }
+  const app = targetById(shellState.currentSummary, entryId);
+  if (app) {
+    return { kind: "app", entryId, app };
+  }
+  const object = desktopObjectByEntryId(shellState.currentSummary, entryId);
+  if (object) {
+    return { kind: "object", entryId, object };
+  }
+  return null;
+}
+
+function renderQuickLook(entry) {
+  stage.replaceChildren();
+  if (entry.kind === "app") {
+    const glyph = document.createElement("span");
+    glyph.className = "quick-look-glyph app-glyph";
+    mountGlyph(glyph, entry.app.target);
+    stage.appendChild(glyph);
+    titleNode.textContent = entry.app.title || entry.app.target;
+    metaNode.textContent = "Application";
+    return;
+  }
+  const object = entry.object;
+  titleNode.textContent = object.name || "Item";
+  metaNode.textContent = object.mime || (object.kind === "directory" ? "Folder" : "File");
+  const glyph = document.createElement("span");
+  glyph.className = "quick-look-glyph app-glyph";
+  const glyphId =
+    object.kind === "directory"
+      ? "file-folder"
+      : object.metadata?.system_kind === "trash"
+        ? object.metadata?.empty === false
+          ? "trash-full"
+          : "trash"
+        : "documents";
+  mountGlyph(glyph, glyphId);
+  stage.appendChild(glyph);
+}
+
+function openEntry() {
+  const entry = selectedEntry();
+  if (!entry) {
+    return;
+  }
+  hideQuickLook();
+  if (entry.kind === "app") {
+    openTarget(entry.app.target);
+    return;
+  }
+  openFileObject(entry.object);
+}
+
+export function showQuickLook() {
+  if (!panel || !selectedEntry()) {
+    return false;
+  }
+  const entry = selectedEntry();
+  open = true;
+  panel.hidden = false;
+  panel.setAttribute("aria-hidden", "false");
+  renderQuickLook(entry);
+  closeButton?.focus();
+  return true;
+}
+
+export function hideQuickLook() {
+  if (!panel || !open) {
+    return;
+  }
+  open = false;
+  panel.hidden = true;
+  panel.setAttribute("aria-hidden", "true");
+  stage?.replaceChildren();
+}
+
+export function toggleQuickLook() {
+  if (open) {
+    hideQuickLook();
+    return true;
+  }
+  return showQuickLook();
+}
+
+export function isQuickLookOpen() {
+  return open;
+}
+
+/* Called by the home-gui facade once ensureHomeGuiDom() has instantiated the
+   lazy GUI template — these nodes do not exist at module-evaluation time. */
+export function bindQuickLook() {
+  if (panel) {
+    return;
+  }
+  panel = document.querySelector("#quick-look");
+  stage = document.querySelector("#quick-look-stage");
+  titleNode = document.querySelector("#quick-look-title");
+  metaNode = document.querySelector("#quick-look-meta");
+  openButton = document.querySelector("#quick-look-open");
+  closeButton = document.querySelector("#quick-look-close");
+  if (!panel) {
+    return;
+  }
+  closeButton?.addEventListener("click", () => hideQuickLook());
+  openButton?.addEventListener("click", () => openEntry());
+  panel.addEventListener("click", (event) => {
+    if (event.target === panel) {
+      hideQuickLook();
+    }
+  });
+}
diff --git a/capsules/home-gui/browser/shell-sounds.js b/capsules/home-gui/browser/shell-sounds.js
new file mode 100644
index 000000000..a061aa0de
--- /dev/null
+++ b/capsules/home-gui/browser/shell-sounds.js
@@ -0,0 +1,78 @@
+/* Optional UI sounds — three only, off by default (macOS restraint). Pure
+ * Web Audio oscillators; no network, no asset fetch. Persisted under
+ * elastos.ui.sounds. Triggered from shell toast / trash empty / refusal paths.
+ */
+
+const KEY = "elastos.ui.sounds";
+let context = null;
+
+function enabled() {
+  try {
+    return localStorage.getItem(KEY) === "on";
+  } catch (_error) {
+    return false;
+  }
+}
+
+function audioContext() {
+  if (!context) {
+    const Ctor = window.AudioContext || window.webkitAudioContext;
+    if (!Ctor) {
+      return null;
+    }
+    context = new Ctor();
+  }
+  if (context.state === "suspended") {
+    context.resume().catch(() => {});
+  }
+  return context;
+}
+
+function tone({ frequency, duration, type = "sine", gain = 0.08, when = 0 }) {
+  const ctx = audioContext();
+  if (!ctx) {
+    return;
+  }
+  const osc = ctx.createOscillator();
+  const amp = ctx.createGain();
+  osc.type = type;
+  osc.frequency.value = frequency;
+  const t0 = ctx.currentTime + when;
+  amp.gain.setValueAtTime(0, t0);
+  amp.gain.linearRampToValueAtTime(gain, t0 + 0.01);
+  amp.gain.exponentialRampToValueAtTime(0.0001, t0 + duration);
+  osc.connect(amp);
+  amp.connect(ctx.destination);
+  osc.start(t0);
+  osc.stop(t0 + duration + 0.02);
+}
+
+export function playUiSound(kind) {
+  if (!enabled()) {
+    return;
+  }
+  switch (kind) {
+    case "notification":
+      tone({ frequency: 880, duration: 0.09, gain: 0.06 });
+      tone({ frequency: 1175, duration: 0.12, gain: 0.05, when: 0.08 });
+      return;
+    case "trash":
+      tone({ frequency: 220, duration: 0.08, type: "triangle", gain: 0.05 });
+      tone({ frequency: 140, duration: 0.14, type: "triangle", gain: 0.04, when: 0.06 });
+      return;
+    case "error":
+      tone({ frequency: 180, duration: 0.16, type: "square", gain: 0.04 });
+      return;
+    default:
+  }
+}
+
+export function uiSoundsEnabled() {
+  return enabled();
+}
+
+export function setUiSoundsEnabled(on) {
+  try {
+    localStorage.setItem(KEY, on ? "on" : "off");
+  } catch (_error) {}
+}
diff --git a/capsules/home-gui/browser/shell-spotlight.js b/capsules/home-gui/browser/shell-spotlight.js
new file mode 100644
index 000000000..cb3e1f7bb
--- /dev/null
+++ b/capsules/home-gui/browser/shell-spotlight.js
@@ -0,0 +1,397 @@
+import {
+  shellState,
+  fetchJson,
+  mountGlyph,
+  allVisibleTargets,
+  desktopObjects,
+} from "./shell-core.js?v=home-20260718m";
+import { openFileObject } from "./shell-surface.js?v=home-20260718m";
+import {
+  openTarget,
+  focusWindow,
+  browserWindowEntries,
+  sortWindowEntriesByZOrder,
+  browserWindowDisplayTitle,
+} from "./shell-windows.js?v=home-20260718m";
+
+/* Spotlight: shell-wide search (macOS anatomy — dimmed backdrop, centered
+ * floating bar, grouped results that grow beneath it). Searches everything
+ * the shell already knows without new server sweeps:
+ *
+ *   windows      shellState.windows (switch to)         in memory
+ *   apps         summary.targets (launch/focus)         in memory
+ *   documents    documents summary (titles + uris)      one cheap POST, cached
+ *   files        summary.desktop_objects                in memory
+ *   library      summary.targets (target_kind=object)   in memory
+ *   people       summary.people.contacts                in memory
+ *
+ * Focus stays in the field the whole time (real Spotlight behavior): arrows
+ * move the aria-activedescendant selection, Enter activates, Esc closes.
+ */
+
+/* Bound by bindSpotlight() once the lazy GUI template is in the DOM. */
+let spotlight = null;
+let spotlightInput = null;
+let spotlightResults = null;
+
+const DOCUMENTS_CACHE_MS = 60_000;
+
+const spotlightState = {
+  invoker: null,
+  query: "",
+  results: [],
+  index: -1,
+  documents: [],
+  documentsFetchedAt: 0,
+};
+
+/* ---- Sources ---- */
+
+function windowResults() {
+  return sortWindowEntriesByZOrder(browserWindowEntries()).map((entry) => ({
+    kind: "window",
+    group: "Windows",
+    title: browserWindowDisplayTitle(entry) || entry.title || entry.id,
+    detail: "Switch to window",
+    glyphTarget: entry.targetId || entry.id,
+    activate: () => focusWindow(entry.id, { moveFocus: true }),
+  }));
+}
+
+function targetResults() {
+  const recents = shellState.recentTargetIds || [];
+  return allVisibleTargets(shellState.currentSummary).map((target) => ({
+    kind: target.target_kind === "object" ? "library" : "app",
+    group: target.target_kind === "object" ? "Library" : "Applications",
+    title: target.title || target.target,
+    detail: target.target_kind === "object" ? "Library item" : "Application",
+    glyphTarget: target.target,
+    extraText: target.description || "",
+    recentRank: recents.indexOf(target.target),
+    activate: () => openTarget(target.target),
+  }));
+}
+
+function documentResults() {
+  return spotlightState.documents.map((doc) => {
+    const title = doc.title || doc.file_name || "Untitled";
+    const uri = doc.working_copy_uri || doc.document_uri || "";
+    return {
+      kind: "document",
+      group: "Documents",
+      title,
+      detail: "Document",
+      glyphTarget: "documents",
+      activate: () =>
+        openTarget("documents", {
+          query: uri ? { objectUri: uri, uri, name: title } : {},
+        }),
+    };
+  });
+}
+
+function fileResults() {
+  return desktopObjects(shellState.currentSummary).map((object) => ({
+    kind: "file",
+    group: "Files",
+    title: object.name,
+    detail: object.kind === "directory" ? "Folder" : "Desktop file",
+    glyphTarget: object.kind === "directory" ? "library" : "documents",
+    extraText: object.mime || "",
+    activate: () => openFileObject(object),
+  }));
+}
+
+function peopleResults() {
+  const contacts = shellState.currentSummary?.people?.contacts;
+  if (!Array.isArray(contacts)) {
+    return [];
+  }
+  return contacts
+    .filter((contact) => contact && typeof contact.display_name === "string")
+    .map((contact) => ({
+      kind: "person",
+      group: "People",
+      title: contact.display_name,
+      detail: "Contact",
+      glyphTarget: "people",
+      extraText: typeof contact.handle === "string" ? contact.handle : "",
+      activate: () => openTarget("people"),
+    }));
+}
+
+/* Documents titles come from ONE cheap summary op (no bodies), cached for a
+   minute; a fetch failure just means no Documents group this open. */
+async function refreshDocuments() {
+  if (Date.now() - spotlightState.documentsFetchedAt < DOCUMENTS_CACHE_MS) {
+    return;
+  }
+  spotlightState.documentsFetchedAt = Date.now();
+  try {
+    const response = await fetchJson("/api/provider/documents/summary", {
+      method: "POST",
+      body: JSON.stringify({}),
+    });
+    const docs = response?.data?.documents || response?.documents;
+    spotlightState.documents = Array.isArray(docs) ? docs : [];
+  } catch (_error) {
+    spotlightState.documents = [];
+  }
+  if (spotlightOpen() && spotlightInput.value.trim() !== "") {
+    runSearch(spotlightInput.value);
+  }
+}
+
+/* ---- Matching + ranking ---- */
+
+const GROUP_ORDER = ["Windows", "Applications", "Documents", "Files", "Library", "People"];
+
+function matchScore(item, query) {
+  const title = item.title.toLowerCase();
+  if (title.startsWith(query)) {
+    return 3;
+  }
+  if (title.includes(query)) {
+    return 2;
+  }
+  if ((item.extraText || "").toLowerCase().includes(query)) {
+    return 1;
+  }
+  return 0;
+}
+
+function collectResults(rawQuery) {
+  const query = rawQuery.trim().toLowerCase();
+  if (query === "") {
+    return [];
+  }
+  const all = [
+    ...windowResults(),
+    ...targetResults(),
+    ...documentResults(),
+    ...fileResults(),
+    ...peopleResults(),
+  ];
+  const matched = [];
+  for (const item of all) {
+    const score = matchScore(item, query);
+    if (score > 0) {
+      matched.push({ ...item, score });
+    }
+  }
+  matched.sort((a, b) => {
+    const groupDelta = GROUP_ORDER.indexOf(a.group) - GROUP_ORDER.indexOf(b.group);
+    if (groupDelta !== 0) {
+      return groupDelta;
+    }
+    if (a.score !== b.score) {
+      return b.score - a.score;
+    }
+    // Recently used apps float within their group.
+    const aRecent = a.recentRank ?? -1;
+    const bRecent = b.recentRank ?? -1;
+    if (aRecent !== bRecent) {
+      if (aRecent === -1) return 1;
+      if (bRecent === -1) return -1;
+      return aRecent - bRecent;
+    }
+    return a.title.localeCompare(b.title);
+  });
+  return matched.slice(0, 40);
+}
+
+/* ---- Rendering ---- */
+
+function renderResults() {
+  spotlightResults.replaceChildren();
+  let lastGroup = null;
+  spotlightState.results.forEach((item, index) => {
+    if (item.group !== lastGroup) {
+      lastGroup = item.group;
+      const header = document.createElement("div");
+      header.className = "spotlight-section";
+      header.setAttribute("role", "presentation");
+      header.textContent = item.group;
+      spotlightResults.appendChild(header);
+    }
+    const row = document.createElement("div");
+    row.className = "spotlight-item";
+    row.id = `spotlight-item-${index}`;
+    row.setAttribute("role", "option");
+    row.setAttribute("aria-selected", index === spotlightState.index ? "true" : "false");
+    const glyph = document.createElement("span");
+    glyph.className = "spotlight-glyph app-glyph";
+    glyph.setAttribute("aria-hidden", "true");
+    mountGlyph(glyph, item.glyphTarget);
+    const title = document.createElement("span");
+    title.className = "spotlight-title";
+    title.textContent = item.title;
+    const detail = document.createElement("span");
+    detail.className = "spotlight-detail";
+    detail.textContent = item.detail;
+    row.append(glyph, title, detail);
+    row.addEventListener("pointerdown", (event) => {
+      event.preventDefault();
+      activateResult(index);
+    });
+    row.addEventListener("pointerenter", () => {
+      setSelection(index);
+    });
+    spotlightResults.appendChild(row);
+  });
+  // A searched-for miss deserves an answer, not a silent panel (the empty
+  // prompt state, before typing, stays quiet).
+  if (spotlightState.results.length === 0 && spotlightState.query) {
+    const empty = document.createElement("div");
+    empty.className = "spotlight-empty";
+    empty.setAttribute("role", "presentation");
+    empty.textContent = `No results for \u201C${spotlightState.query}\u201D`;
+    spotlightResults.appendChild(empty);
+  }
+  spotlightResults.hidden =
+    spotlightState.results.length === 0 && !spotlightState.query;
+  spotlightInput.setAttribute(
+    "aria-expanded",
+    spotlightState.results.length > 0 ? "true" : "false",
+  );
+  syncActiveDescendant();
+}
+
+function setSelection(index) {
+  if (index === spotlightState.index) {
+    return;
+  }
+  spotlightState.index = index;
+  for (const row of spotlightResults.querySelectorAll(".spotlight-item")) {
+    const rowIndex = Number(row.id.slice("spotlight-item-".length));
+    row.setAttribute("aria-selected", rowIndex === index ? "true" : "false");
+  }
+  syncActiveDescendant();
+}
+
+function syncActiveDescendant() {
+  const active =
+    spotlightState.index >= 0 ? `spotlight-item-${spotlightState.index}` : "";
+  spotlightInput.setAttribute("aria-activedescendant", active);
+  if (active) {
+    document.getElementById(active)?.scrollIntoView({ block: "nearest" });
+  }
+}
+
+function runSearch(rawQuery) {
+  spotlightState.query = String(rawQuery || "").trim();
+  spotlightState.results = collectResults(rawQuery);
+  spotlightState.index = spotlightState.results.length > 0 ? 0 : -1;
+  renderResults();
+}
+
+function activateResult(index) {
+  const item = spotlightState.results[index];
+  if (!item) {
+    return;
+  }
+  hideSpotlight({ restoreFocus: false });
+  item.activate();
+}
+
+/* ---- Open / close ---- */
+
+export function spotlightOpen() {
+  return spotlight ? !spotlight.hidden : false;
+}
+
+export function showSpotlight() {
+  if (!spotlight || spotlightOpen()) {
+    spotlightInput?.focus();
+    return;
+  }
+  spotlightState.invoker =
+    document.activeElement && document.activeElement !== document.body
+      ? document.activeElement
+      : null;
+  spotlight.hidden = false;
+  spotlight.setAttribute("aria-hidden", "false");
+  spotlightInput.value = "";
+  runSearch("");
+  spotlightInput.focus();
+  refreshDocuments();
+}
+
+export function hideSpotlight({ restoreFocus = true } = {}) {
+  if (!spotlight || spotlight.hidden) {
+    return;
+  }
+  spotlight.hidden = true;
+  spotlight.setAttribute("aria-hidden", "true");
+  spotlightState.query = "";
+  spotlightState.results = [];
+  spotlightState.index = -1;
+  spotlightResults.replaceChildren();
+  spotlightInput.value = "";
+  if (restoreFocus) {
+    spotlightState.invoker?.focus?.();
+  }
+  spotlightState.invoker = null;
+}
+
+export function toggleSpotlight() {
+  if (spotlightOpen()) {
+    hideSpotlight();
+  } else {
+    showSpotlight();
+  }
+}
+
+/* ---- Events ---- */
+
+/* Called by the home-gui facade once ensureHomeGuiDom() has instantiated the
+   lazy GUI template — these nodes do not exist at module-evaluation time. */
+export function bindSpotlight() {
+  if (spotlight) {
+    return;
+  }
+  spotlight = document.querySelector("#spotlight");
+  spotlightInput = document.querySelector("#spotlight-input");
+  spotlightResults = document.querySelector("#spotlight-results");
+  if (!spotlight || !spotlightInput) {
+    return;
+  }
+  spotlightInput.addEventListener("input", () => {
+    runSearch(spotlightInput.value);
+  });
+  spotlight.addEventListener("keydown", (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      hideSpotlight();
+      return;
+    }
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      const count = spotlightState.results.length;
+      if (count === 0) {
+        return;
+      }
+      const delta = event.key === "ArrowDown" ? 1 : -1;
+      setSelection((spotlightState.index + delta + count) % count);
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      if (spotlightState.index >= 0) {
+        activateResult(spotlightState.index);
+      }
+      return;
+    }
+    // Focus lives in the field for the whole session (real Spotlight): Tab
+    // neither leaves the dialog nor moves focus.
+    if (event.key === "Tab") {
+      event.preventDefault();
+    }
+  });
+  spotlight.addEventListener("pointerdown", (event) => {
+    if (!event.target.closest(".spotlight-panel")) {
+      hideSpotlight({ restoreFocus: false });
+    }
+  });
+}
diff --git a/capsules/home-gui/browser/shell-surface.js b/capsules/home-gui/browser/shell-surface.js
index 12f8a6e43..753a398b6 100644
--- a/capsules/home-gui/browser/shell-surface.js
+++ b/capsules/home-gui/browser/shell-surface.js
@@ -36,6 +36,7 @@ import {
   unpinTargetFromTaskbar,
   isTargetPinnedToTaskbar,
   clampDesktopPosition,
+  snapDesktopPosition,
   saveShellLayoutState,
   mountGlyph,
   clamp,
@@ -45,7 +46,8 @@ import {
   desktopObjectEntryId,
   desktopObjectByEntryId,
   desktopEntryExists,
-} from "./shell-core.js?v=home-20260705a";
+  trapTabWithin,
+} from "./shell-core.js?v=home-20260718m";
 import {
   browserWindowEntries,
   sortWindowEntriesByZOrder,
@@ -59,7 +61,9 @@ import {
   hideAllTargetWindows,
   closeAllTargetWindows,
   focusWindow,
-} from "./shell-windows.js?v=home-20260705a";
+} from "./shell-windows.js?v=home-20260718m";
+import { playUiSound } from "./shell-sounds.js?v=home-20260718m";
+import { showWalletRail, walletRailAvailable } from "./shell-wallet-rail.js?v=home-20260718m";
 
 const DESKTOP_LONG_PRESS_MS = 520;
 const DESKTOP_RENAME_BLUR_GUARD_MS = 350;
@@ -108,6 +112,52 @@ export function renderDesktop(summary) {
   }
   syncDesktopIconsVisibility();
   updateDesktopSelectionState();
+  syncDesktopFirstRunHint();
+}
+
+/* First-contact teaching (shown once per browser): after the desktop stopped
+   carrying app icons, a fresh user must still get a visible answer to "where
+   are my apps". The hint sits above the dock and retires forever the first
+   time the launcher opens or the hint itself is clicked. */
+const DESKTOP_HINT_KEY = "elastos.shell.desktopHintDone";
+let desktopHintBound = false;
+
+function desktopFirstRunHintNode() {
+  return document.querySelector("#desktop-first-run-hint");
+}
+
+function syncDesktopFirstRunHint() {
+  const hint = desktopFirstRunHintNode();
+  if (!hint) {
+    return;
+  }
+  let done = false;
+  try {
+    done = localStorage.getItem(DESKTOP_HINT_KEY) === "1";
+  } catch (_error) {
+    done = true;
+  }
+  const show = !done && shellState.shellLayoutState.desktopApps.length === 0;
+  hint.hidden = !show;
+  launcherToggleButton?.classList.toggle("launcher-first-run", show);
+  if (show && !desktopHintBound) {
+    desktopHintBound = true;
+    hint.addEventListener("click", () => dismissDesktopFirstRunHint());
+  }
+}
+
+function dismissDesktopFirstRunHint() {
+  const hint = desktopFirstRunHintNode();
+  if (!hint || hint.hidden) {
+    return;
+  }
+  try {
+    localStorage.setItem(DESKTOP_HINT_KEY, "1");
+  } catch (_error) {
+    // Session-only dismissal still applies below.
+  }
+  hint.hidden = true;
+  launcherToggleButton?.classList.remove("launcher-first-run");
 }
 
 function desktopShortcutIdForEntry(entryId) {
@@ -132,7 +182,9 @@ function syncDesktopIconsVisibility() {
 }
 
 function selectDesktopTarget(entryId) {
+  shellState.marqueeSelection.clear();
   if (shellState.selectedDesktopTargetId === entryId) {
+    updateDesktopSelectionState();
     focusDesktopSelectionSurface();
     return;
   }
@@ -142,11 +194,67 @@ function selectDesktopTarget(entryId) {
 }
 
 export function clearDesktopSelection() {
-  if (!shellState.selectedDesktopTargetId) {
+  if (!shellState.selectedDesktopTargetId && shellState.marqueeSelection.size === 0) {
     return;
   }
   shellState.selectedDesktopTargetId = null;
+  shellState.marqueeSelection.clear();
+  updateDesktopSelectionState();
+}
+
+/* Multi-select (macOS): the full selection is the marquee set plus the
+   primary. Cmd/Ctrl+click toggles membership; the last icon added becomes the
+   primary so Enter / arrow keys / context menu keep an anchor. */
+function selectedDesktopEntryIds() {
+  const ids = new Set(shellState.marqueeSelection);
+  if (shellState.selectedDesktopTargetId) {
+    ids.add(shellState.selectedDesktopTargetId);
+  }
+  return ids;
+}
+
+function entryInDesktopSelection(entryId) {
+  return selectedDesktopEntryIds().has(entryId);
+}
+
+function toggleDesktopSelection(entryId) {
+  const ids = selectedDesktopEntryIds();
+  if (ids.has(entryId)) {
+    ids.delete(entryId);
+  } else {
+    ids.add(entryId);
+  }
+  const list = [...ids];
+  shellState.selectedDesktopTargetId = ids.has(entryId)
+    ? entryId
+    : list[list.length - 1] || null;
+  shellState.marqueeSelection.clear();
+  for (const id of list) {
+    if (id !== shellState.selectedDesktopTargetId) {
+      shellState.marqueeSelection.add(id);
+    }
+  }
   updateDesktopSelectionState();
+  focusDesktopSelectionSurface();
+}
+
+export function selectAllDesktopIcons() {
+  shellState.marqueeSelection.clear();
+  let last = null;
+  for (const shortcut of desktopShortcuts.querySelectorAll(".desktop-shortcut")) {
+    const entryId = shortcut.dataset.desktopEntryId || shortcut.dataset.target || "";
+    if (!entryId) {
+      continue;
+    }
+    shellState.marqueeSelection.add(entryId);
+    last = entryId;
+  }
+  if (last) {
+    shellState.marqueeSelection.delete(last);
+    shellState.selectedDesktopTargetId = last;
+  }
+  updateDesktopSelectionState();
+  focusDesktopSelectionSurface();
 }
 
 function focusDesktopSelectionSurface() {
@@ -167,10 +275,12 @@ function updateDesktopSelectionState() {
   }
   for (const shortcut of desktopShortcuts.querySelectorAll(".desktop-shortcut")) {
     const entryId = shortcut.dataset.desktopEntryId || shortcut.dataset.target || "";
-    const selected = entryId === shellState.selectedDesktopTargetId;
+    const selected =
+      entryId === shellState.selectedDesktopTargetId ||
+      shellState.marqueeSelection.has(entryId);
     shortcut.classList.toggle("selected", selected);
     shortcut.setAttribute("aria-selected", selected ? "true" : "false");
-    if (selected) {
+    if (entryId === shellState.selectedDesktopTargetId) {
       activeDescendant = shortcut.id;
     }
   }
@@ -183,30 +293,128 @@ function updateDesktopSelectionState() {
   delete desktopShortcuts.dataset.selectedTarget;
 }
 
+// Spatial (nearest-in-direction) selection so arrows behave sensibly on a
+// free-form icon grid, not just DOM order.
+export function moveDesktopSelection(direction) {
+  const shortcuts = Array.from(desktopShortcuts.querySelectorAll(".desktop-shortcut")).filter(
+    (node) => !node.hidden,
+  );
+  if (shortcuts.length === 0) {
+    return false;
+  }
+  const entryIdOf = (node) => node.dataset.desktopEntryId || node.dataset.target || "";
+  const centerOf = (node) => {
+    const rect = node.getBoundingClientRect();
+    return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+  };
+  const current = shortcuts.find((node) => entryIdOf(node) === shellState.selectedDesktopTargetId);
+  if (!current) {
+    const first = shortcuts
+      .map((node) => ({ node, center: centerOf(node) }))
+      .sort((a, b) => a.center.y - b.center.y || a.center.x - b.center.x)[0];
+    selectDesktopTarget(entryIdOf(first.node));
+    return true;
+  }
+  const origin = centerOf(current);
+  let best = null;
+  let bestScore = Infinity;
+  for (const node of shortcuts) {
+    if (node === current) {
+      continue;
+    }
+    const center = centerOf(node);
+    const dx = center.x - origin.x;
+    const dy = center.y - origin.y;
+    const along =
+      direction === "left" ? -dx : direction === "right" ? dx : direction === "up" ? -dy : dy;
+    if (along <= 1) {
+      continue;
+    }
+    const cross = direction === "left" || direction === "right" ? Math.abs(dy) : Math.abs(dx);
+    // Weight cross-axis drift heavier so arrows track rows/columns.
+    const score = along + cross * 2.5;
+    if (score < bestScore) {
+      bestScore = score;
+      best = node;
+    }
+  }
+  if (!best) {
+    return false;
+  }
+  selectDesktopTarget(entryIdOf(best));
+  return true;
+}
+
 export function renderTaskbar(summary) {
   taskbarTargets.replaceChildren();
+  const pinnedIds = new Set(shellState.shellLayoutState.taskbar);
+  let separatorInserted = false;
   for (const targetId of visibleTaskbarTargets(summary)) {
     const app = targetById(summary, targetId);
     if (!app) {
       continue;
     }
+    if (
+      !pinnedIds.has(targetId) &&
+      !separatorInserted &&
+      taskbarTargets.childElementCount > 0
+    ) {
+      const separator = document.createElement("span");
+      separator.className = "taskbar-separator";
+      separator.setAttribute("aria-hidden", "true");
+      taskbarTargets.appendChild(separator);
+      separatorInserted = true;
+    }
     const entry = taskbarItemTemplate.content.firstElementChild.cloneNode(true);
     const button = entry.querySelector(".taskbar-item");
     const openCount = browserWindowCount(app.target);
     button.dataset.target = app.target;
-    button.title = taskbarItemTitle(app, summary, openCount);
+    button.dataset.label = app.title;
     mountGlyph(button.querySelector(".taskbar-item-icon"), app.target);
     button.dataset.openWindows = String(openCount);
     attachTargetIconInteractions(button, app.target, "taskbar");
     syncTaskbarGroupButton(entry, app.target, app.title, openCount);
     taskbarTargets.appendChild(entry);
   }
+  appendTaskbarTrash(summary);
   updateTaskbarState();
 }
 
-function taskbarItemTitle(app, summary, openCount = 0) {
-  const countLine = openCount > 1 ? `\n${openCount} windows open` : "";
-  return `${app.title}${countLine}`;
+/* Trash anchors the right end of the dock, past its own divider (the macOS
+   position). It is the same desktop Trash object: the glyph fills when it
+   holds items, click opens it in Library, right-click offers Empty Trash. */
+function appendTaskbarTrash(summary) {
+  const trashObject = desktopObjects(summary).find(isTrashDesktopObject);
+  if (!trashObject) {
+    return;
+  }
+  if (taskbarTargets.childElementCount > 0) {
+    const separator = document.createElement("span");
+    separator.className = "taskbar-separator";
+    separator.setAttribute("aria-hidden", "true");
+    taskbarTargets.appendChild(separator);
+  }
+  const entryId = desktopObjectEntryId(trashObject);
+  const entry = taskbarItemTemplate.content.firstElementChild.cloneNode(true);
+  const button = entry.querySelector(".taskbar-item");
+  const empty = trashObject.metadata?.empty !== false;
+  button.dataset.label = "Trash";
+  button.setAttribute("aria-label", empty ? "Trash. Empty." : "Trash. Contains items.");
+  mountGlyph(button.querySelector(".taskbar-item-icon"), empty ? "trash" : "trash-full");
+  button.addEventListener("click", () => {
+    openDesktopObject(entryId);
+  });
+  button.addEventListener("contextmenu", (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const anchor = contextMenuAnchorPoint(event, button);
+    openDesktopContextMenu(anchor.x, anchor.y, {
+      kind: "desktop-object",
+      entryId,
+      source: "taskbar",
+    });
+  });
+  taskbarTargets.appendChild(entry);
 }
 
 function visibleTaskbarTargets(summary) {
@@ -259,7 +467,7 @@ function updateTaskbarButton(button, targetId) {
   button.dataset.active = isActive ? "true" : "false";
   button.dataset.openWindows = String(openCount);
   if (appInfo && shellState.currentSummary) {
-    button.title = taskbarItemTitle(appInfo, shellState.currentSummary, openCount);
+    button.dataset.label = appInfo.title;
     button.setAttribute("aria-label", taskbarItemAriaLabel(appInfo.title, openCount, isActive));
   }
   const entry = button.closest(".taskbar-entry");
@@ -304,24 +512,16 @@ function syncTaskbarGroupButton(entry, targetId, title, openCount) {
 export function renderLauncher(summary) {
   const query = launcherSearch.value;
   launcherGrid.replaceChildren();
+  /* One continuous grid (macOS Apps panel) — section order still puts
+     running, then recent, then the rest first, but without header breaks. */
+  const grid = document.createElement("div");
+  grid.className = "launcher-group-grid";
   for (const section of launcherSections(summary)) {
-    if (section.targets.length === 0) {
-      continue;
-    }
-    const group = document.createElement("section");
-    group.className = "launcher-group";
-    const heading = document.createElement("h2");
-    heading.className = "launcher-group-heading";
-    heading.textContent = section.label;
-    group.appendChild(heading);
-    const grid = document.createElement("div");
-    grid.className = "launcher-group-grid";
     for (const target of section.targets) {
       grid.appendChild(createLauncherCard(target));
     }
-    group.appendChild(grid);
-    launcherGrid.appendChild(group);
   }
+  launcherGrid.appendChild(grid);
   filterLauncherItems(query);
 }
 
@@ -487,10 +687,34 @@ function attachTargetIconInteractions(node, targetId, source) {
       return;
     }
     if (source === "desktop") {
+      if (event.metaKey || event.ctrlKey) {
+        toggleDesktopSelection(targetId);
+        return;
+      }
       if (shouldOpenDesktopShortcutFromClick(node, event)) {
         openTarget(targetId);
         return;
       }
+      // Slow click: a second click on an already-selected icon's label starts
+      // rename, unless a double-click (open) lands first. Selection state is
+      // sampled at pointerdown, before beginTargetDrag reselects the icon.
+      const wasSelected = node.dataset.wasSelectedOnPointerdown === "true";
+      delete node.dataset.wasSelectedOnPointerdown;
+      if (
+        wasSelected &&
+        shellState.selectedDesktopTargetId === targetId &&
+        !node.classList.contains("editing") &&
+        event.target.closest(".desktop-shortcut-title")
+      ) {
+        clearSlowClickRename();
+        slowClickRenameTimer = window.setTimeout(() => {
+          slowClickRenameTimer = null;
+          if (shellState.selectedDesktopTargetId === targetId) {
+            startDesktopRename(targetId);
+          }
+        }, SLOW_CLICK_RENAME_MS);
+        return;
+      }
       selectDesktopTarget(targetId);
       return;
     }
@@ -498,6 +722,9 @@ function attachTargetIconInteractions(node, targetId, source) {
       if (event.target.closest(".taskbar-window-count")) {
         return;
       }
+      if (browserWindowCount(targetId) === 0) {
+        startDockLaunchBounce(node);
+      }
       handleTaskbarTargetClick(targetId);
       return;
     }
@@ -509,6 +736,7 @@ function attachTargetIconInteractions(node, targetId, source) {
 
   if (source === "desktop") {
     node.addEventListener("dblclick", () => {
+      clearSlowClickRename();
       selectDesktopTarget(targetId);
       openTarget(targetId);
     });
@@ -552,13 +780,23 @@ function attachTargetIconInteractions(node, targetId, source) {
   node.addEventListener("contextmenu", (event) => {
     event.preventDefault();
     event.stopPropagation();
+    if (
+      source === "desktop" &&
+      entryInDesktopSelection(targetId) &&
+      selectedDesktopEntryIds().size > 1
+    ) {
+      const anchor = contextMenuAnchorPoint(event, node);
+      openDesktopContextMenu(anchor.x, anchor.y, { kind: "desktop-group" });
+      return;
+    }
     if (source === "desktop") {
       selectDesktopTarget(targetId);
     }
     if (source === "launcher") {
       setSelectedLauncherTarget(targetId);
     }
-    openDesktopContextMenu(event.clientX, event.clientY, {
+    const anchor = contextMenuAnchorPoint(event, node);
+    openDesktopContextMenu(anchor.x, anchor.y, {
       kind: "target",
       targetId,
       source,
@@ -569,13 +807,20 @@ function attachTargetIconInteractions(node, targetId, source) {
 
 function attachDesktopObjectInteractions(node, entryId) {
   node.addEventListener("click", (event) => {
+    if (event.metaKey || event.ctrlKey) {
+      toggleDesktopSelection(entryId);
+      return;
+    }
     if (shouldOpenDesktopShortcutFromClick(node, event)) {
       openDesktopObject(entryId);
       return;
     }
     selectDesktopTarget(entryId);
   });
-  node.addEventListener("dblclick", () => {
+  node.addEventListener("dblclick", (event) => {
+    if (event.metaKey || event.ctrlKey) {
+      return;
+    }
     selectDesktopTarget(entryId);
     openDesktopObject(entryId);
   });
@@ -598,15 +843,25 @@ function attachDesktopObjectInteractions(node, entryId) {
     node.dataset.lastPointerType = event.pointerType || "";
     maybeStartLongPressGesture(event, entryId, "desktop-object", node);
     beginTargetDrag(event, entryId, "desktop-object", node);
-    if (!isTouchLikePointer(event)) {
+    if (
+      !isTouchLikePointer(event) &&
+      !(event.metaKey || event.ctrlKey) &&
+      !(entryInDesktopSelection(entryId) && selectedDesktopEntryIds().size > 1)
+    ) {
       selectDesktopTarget(entryId);
     }
   });
   node.addEventListener("contextmenu", (event) => {
     event.preventDefault();
     event.stopPropagation();
+    if (entryInDesktopSelection(entryId) && selectedDesktopEntryIds().size > 1) {
+      const anchor = contextMenuAnchorPoint(event, node);
+      openDesktopContextMenu(anchor.x, anchor.y, { kind: "desktop-group" });
+      return;
+    }
     selectDesktopTarget(entryId);
-    openDesktopContextMenu(event.clientX, event.clientY, {
+    const anchor = contextMenuAnchorPoint(event, node);
+    openDesktopContextMenu(anchor.x, anchor.y, {
       kind: "desktop-object",
       entryId,
       source: "desktop",
@@ -614,17 +869,34 @@ function attachDesktopObjectInteractions(node, entryId) {
   });
 }
 
+// Keyboard-invoked contextmenu events (Shift+F10 / Menu key) arrive with
+// (0,0) coordinates — anchor the menu to the element instead.
+function contextMenuAnchorPoint(event, node) {
+  if (event.clientX > 0 || event.clientY > 0) {
+    return { x: event.clientX, y: event.clientY };
+  }
+  const rect = node.getBoundingClientRect();
+  return {
+    x: rect.left + rect.width / 2,
+    y: rect.top + rect.height / 2,
+  };
+}
+
 function openDesktopObject(entryId) {
   const object = desktopObjectByEntryId(shellState.currentSummary, entryId);
-  if (!object) {
-    return false;
-  }
-  if (!canOpenDesktopObject(object)) {
+  if (!object || !canOpenDesktopObject(object)) {
     return false;
   }
+  openFileObject(object);
+  return true;
+}
+
+/* One canonical "open this file object" path — desktop double-click and
+   Spotlight activation both land here. */
+export function openFileObject(object) {
   if (object.kind === "directory") {
     openTarget("library", { query: { uri: object.uri } });
-    return true;
+    return;
   }
   const viewer = desktopObjectViewer(object);
   openTarget(viewer, {
@@ -635,7 +907,6 @@ function openDesktopObject(entryId) {
       mime: object.mime || "application/octet-stream",
     },
   });
-  return true;
 }
 
 export function openSelectedDesktopEntry() {
@@ -717,6 +988,16 @@ function clearDragSelection() {
   window.getSelection?.()?.removeAllRanges();
 }
 
+const SLOW_CLICK_RENAME_MS = 620;
+let slowClickRenameTimer = null;
+
+function clearSlowClickRename() {
+  if (slowClickRenameTimer !== null) {
+    window.clearTimeout(slowClickRenameTimer);
+    slowClickRenameTimer = null;
+  }
+}
+
 function beginTargetDrag(event, targetId, source, sourceElement) {
   if (event.button !== 0 || !shellState.currentSummary) {
     return;
@@ -724,12 +1005,33 @@ function beginTargetDrag(event, targetId, source, sourceElement) {
   if (sourceElement.classList.contains("editing")) {
     return;
   }
+  clearSlowClickRename();
   if (!isTouchLikePointer(event)) {
     clearDragSelection();
   }
   hideDesktopContextMenu();
-  if ((source === "desktop" || source === "desktop-object") && !isTouchLikePointer(event)) {
-    selectDesktopTarget(targetId);
+  const onDesktop = source === "desktop" || source === "desktop-object";
+  // Cmd/Ctrl+pointerdown is a selection toggle (handled on click), never a
+  // drag, and must not disturb the current multi-selection.
+  if (onDesktop && (event.metaKey || event.ctrlKey)) {
+    return;
+  }
+  let groupEntryIds = null;
+  if (onDesktop && !isTouchLikePointer(event)) {
+    // Pressing an icon that is already part of a multi-selection keeps the
+    // group (macOS): the drag moves all of them; a plain click on it later
+    // collapses selection via the click handler.
+    if (entryInDesktopSelection(targetId) && selectedDesktopEntryIds().size > 1) {
+      groupEntryIds = [...selectedDesktopEntryIds()];
+      sourceElement.dataset.wasSelectedOnPointerdown = "false";
+    } else {
+      sourceElement.dataset.wasSelectedOnPointerdown =
+        shellState.selectedDesktopTargetId === targetId &&
+        shellState.marqueeSelection.size === 0
+          ? "true"
+          : "false";
+      selectDesktopTarget(targetId);
+    }
   }
   const rect = sourceElement.getBoundingClientRect();
   shellState.dragState = {
@@ -747,6 +1049,7 @@ function beginTargetDrag(event, targetId, source, sourceElement) {
     offsetY: event.clientY - rect.top,
     dropTarget: null,
     ghost: null,
+    groupEntryIds,
   };
 }
 
@@ -894,6 +1197,14 @@ function startTargetDrag() {
   ghost.classList.add("desktop-shortcut-ghost");
   mountGlyph(ghost.querySelector(".desktop-shortcut-icon"), dragEntry.glyphId);
   ghost.querySelector(".desktop-shortcut-title").textContent = dragEntry.title;
+  const group = shellState.dragState.groupEntryIds;
+  if (group && group.length > 1) {
+    const badge = document.createElement("span");
+    badge.className = "desktop-shortcut-ghost-count";
+    badge.textContent = String(group.length);
+    badge.setAttribute("aria-hidden", "true");
+    ghost.appendChild(badge);
+  }
   document.body.appendChild(ghost);
   shellState.dragState.ghost = ghost;
 }
@@ -980,7 +1291,7 @@ function desktopDropTarget(clientX, clientY) {
   }
   return {
     kind: "desktop",
-    position: clampDesktopPosition({
+    position: snapDesktopPosition(shellState.dragState.targetId, {
       x: clientX - rect.left - shellState.dragState.offsetX,
       y: clientY - rect.top - shellState.dragState.offsetY,
     }),
@@ -1018,7 +1329,11 @@ export function finishTargetDrag(event) {
   ) {
     changed = pinTargetToTaskbar(state.targetId, state.dropTarget.index) || changed;
   } else if (state.dropTarget && state.dropTarget.kind === "desktop") {
-    changed = setDesktopPosition(state.targetId, state.dropTarget.position) || changed;
+    if (state.groupEntryIds && state.groupEntryIds.length > 1) {
+      changed = moveDesktopGroup(state, state.dropTarget.position) || changed;
+    } else {
+      changed = setDesktopPosition(state.targetId, state.dropTarget.position) || changed;
+    }
     if (state.source === "taskbar") {
       changed = unpinTargetFromTaskbar(state.targetId) || changed;
     }
@@ -1035,6 +1350,127 @@ export function finishTargetDrag(event) {
   }
 }
 
+/* Group drag: every selected icon moves by the dragged icon's delta, each
+   snapping (or falling back to free-form) independently — the formation is
+   preserved, honest to what macOS does. */
+function moveDesktopGroup(state, droppedPosition) {
+  const anchorNode = state.sourceElement;
+  const anchorLeft = parseFloat(anchorNode.style.left) || 0;
+  const anchorTop = parseFloat(anchorNode.style.top) || 0;
+  const deltaX = droppedPosition.x - anchorLeft;
+  const deltaY = droppedPosition.y - anchorTop;
+  let changed = setDesktopPosition(state.targetId, droppedPosition);
+  for (const entryId of state.groupEntryIds) {
+    if (entryId === state.targetId) {
+      continue;
+    }
+    const node = [...desktopShortcuts.querySelectorAll(".desktop-shortcut")].find(
+      (candidate) =>
+        (candidate.dataset.desktopEntryId || candidate.dataset.target || "") === entryId,
+    );
+    if (!node) {
+      continue;
+    }
+    const next = snapDesktopPosition(entryId, {
+      x: (parseFloat(node.style.left) || 0) + deltaX,
+      y: (parseFloat(node.style.top) || 0) + deltaY,
+    });
+    changed = setDesktopPosition(entryId, next) || changed;
+  }
+  return changed;
+}
+
+/* Rubber-band (marquee) selection on empty desktop. Pointer-driven visual
+   selection; the anchor icon (last one swept) becomes the primary selection so
+   Enter/context-menu keep working unchanged. */
+
+let marqueeState = null;
+
+export function beginDesktopMarquee(event) {
+  if (event.button !== 0 || isTouchLikePointer(event)) {
+    return false;
+  }
+  const rect = desktop.getBoundingClientRect();
+  marqueeState = {
+    pointerId: event.pointerId,
+    originX: event.clientX - rect.left,
+    originY: event.clientY - rect.top,
+    node: null,
+    swept: false,
+  };
+  return true;
+}
+
+export function updateDesktopMarquee(event) {
+  if (!marqueeState || event.pointerId !== marqueeState.pointerId) {
+    return;
+  }
+  const rect = desktop.getBoundingClientRect();
+  const currentX = clamp(event.clientX - rect.left, 0, rect.width);
+  const currentY = clamp(event.clientY - rect.top, 0, rect.height);
+  const left = Math.min(marqueeState.originX, currentX);
+  const top = Math.min(marqueeState.originY, currentY);
+  const width = Math.abs(currentX - marqueeState.originX);
+  const height = Math.abs(currentY - marqueeState.originY);
+  if (!marqueeState.node) {
+    if (Math.hypot(width, height) < ICON_DRAG_THRESHOLD) {
+      return;
+    }
+    const node = document.createElement("div");
+    node.className = "desktop-marquee";
+    node.setAttribute("aria-hidden", "true");
+    desktop.appendChild(node);
+    marqueeState.node = node;
+    clearDragSelection();
+  }
+  const node = marqueeState.node;
+  node.style.left = `${left}px`;
+  node.style.top = `${top}px`;
+  node.style.width = `${width}px`;
+  node.style.height = `${height}px`;
+
+  const band = {
+    left: rect.left + left,
+    top: rect.top + top,
+    right: rect.left + left + width,
+    bottom: rect.top + top + height,
+  };
+  marqueeState.swept = true;
+  shellState.marqueeSelection.clear();
+  let primary = null;
+  for (const shortcut of desktopShortcuts.querySelectorAll(".desktop-shortcut")) {
+    const iconRect = shortcut.getBoundingClientRect();
+    const hit =
+      iconRect.left < band.right &&
+      iconRect.right > band.left &&
+      iconRect.top < band.bottom &&
+      iconRect.bottom > band.top;
+    if (hit) {
+      const entryId = shortcut.dataset.desktopEntryId || shortcut.dataset.target || "";
+      shellState.marqueeSelection.add(entryId);
+      primary = entryId;
+    }
+  }
+  shellState.selectedDesktopTargetId = primary;
+  updateDesktopSelectionState();
+}
+
+export function finishDesktopMarquee(event) {
+  if (!marqueeState || event.pointerId !== marqueeState.pointerId) {
+    return;
+  }
+  const state = marqueeState;
+  marqueeState = null;
+  state.node?.remove();
+  if (state.swept && shellState.selectedDesktopTargetId) {
+    focusDesktopSelectionSurface();
+  }
+}
+
+export function desktopMarqueeActive() {
+  return Boolean(marqueeState?.node);
+}
+
 export function toggleLauncher() {
   if (launcher.hidden) {
     showLauncher();
@@ -1044,6 +1480,7 @@ export function toggleLauncher() {
 }
 
 export function showLauncher() {
+  dismissDesktopFirstRunHint();
   if (shellState.currentSummary) {
     renderLauncher(shellState.currentSummary);
   }
@@ -1055,10 +1492,16 @@ export function showLauncher() {
 }
 
 export function hideLauncher() {
+  const hadFocus = launcher.contains?.(document.activeElement) === true;
   syncLauncherVisibility(false);
   launcherSearch.value = "";
   shellState.selectedLauncherTargetId = null;
   filterLauncherItems("");
+  // A closed modal must hand keyboard focus back to its invoker, never drop
+  // it on <body>.
+  if (hadFocus) {
+    launcherToggleButton.focus();
+  }
 }
 
 function syncLauncherVisibility(isVisible) {
@@ -1083,6 +1526,10 @@ export function openDesktopContextMenu(clientX, clientY, target) {
     hideLauncher();
   }
   shellState.contextMenuTarget = target;
+  shellState.contextMenuInvoker =
+    document.activeElement && document.activeElement !== document.body
+      ? document.activeElement
+      : null;
   renderContextMenu(target);
   desktopContextMenu.hidden = false;
   shellState.contextMenuOpen = true;
@@ -1096,11 +1543,49 @@ export function openDesktopContextMenu(clientX, clientY, target) {
 
   desktopContextMenu.style.left = `${left}px`;
   desktopContextMenu.style.top = `${top}px`;
+  contextMenuFocusables()[0]?.focus();
 }
 
-export function hideDesktopContextMenu() {
+export function hideDesktopContextMenu({ restoreFocus = false } = {}) {
+  const hadFocus = desktopContextMenu.contains?.(document.activeElement) === true;
   desktopContextMenu.hidden = true;
   shellState.contextMenuOpen = false;
+  if (restoreFocus && hadFocus) {
+    shellState.contextMenuInvoker?.focus?.();
+  }
+  shellState.contextMenuInvoker = null;
+}
+
+function contextMenuFocusables() {
+  return Array.from(desktopContextMenu.querySelectorAll('[role="menuitem"]'));
+}
+
+function moveContextMenuFocus(delta) {
+  const items = contextMenuFocusables();
+  if (items.length === 0) {
+    return;
+  }
+  const index = items.indexOf(document.activeElement);
+  const next = index < 0
+    ? (delta > 0 ? 0 : items.length - 1)
+    : (index + delta + items.length) % items.length;
+  items[next].focus();
+}
+
+function handleContextMenuKeydown(event) {
+  if (event.key === "ArrowDown") {
+    event.preventDefault();
+    moveContextMenuFocus(1);
+  } else if (event.key === "ArrowUp") {
+    event.preventDefault();
+    moveContextMenuFocus(-1);
+  } else if (event.key === "Home") {
+    event.preventDefault();
+    contextMenuFocusables()[0]?.focus();
+  } else if (event.key === "End") {
+    event.preventDefault();
+    contextMenuFocusables().at(-1)?.focus();
+  }
 }
 
 function renderContextMenu(target) {
@@ -1146,6 +1631,14 @@ function contextMenuItems(target) {
   if (target.kind === "desktop-object") {
     return desktopObjectContextMenuItems(target);
   }
+  if (target.kind === "desktop-group") {
+    const count = selectedDesktopEntryIds().size;
+    return [
+      { action: "open-desktop-group", label: `Open ${count} Items` },
+      { kind: "divider" },
+      { action: "clear-desktop-selection", label: "Deselect All" },
+    ];
+  }
   const iconsVisible = shellState.shellLayoutState.desktopIconsVisible !== false;
   const items = [
     {
@@ -1239,6 +1732,20 @@ function desktopPinMenuItem(targetId) {
 }
 
 export function handleContextAction(action) {
+  if (action === "open-desktop-group") {
+    for (const entryId of selectedDesktopEntryIds()) {
+      if (targetById(shellState.currentSummary, entryId)) {
+        openTarget(entryId);
+      } else if (desktopObjectByEntryId(shellState.currentSummary, entryId)) {
+        openDesktopObject(entryId);
+      }
+    }
+    return;
+  }
+  if (action === "clear-desktop-selection") {
+    clearDesktopSelection();
+    return;
+  }
   if (shellState.contextMenuTarget.kind === "desktop-object") {
     if (action === "open-desktop-object" || action === "open-desktop-object-new-window") {
       openDesktopObject(shellState.contextMenuTarget.entryId);
@@ -1268,13 +1775,14 @@ export function handleContextAction(action) {
         shellState.contextMenuTarget.entryId,
       );
       if (object && isTrashDesktopObject(object) && hasObjectCapability(object, "empty_trash")) {
+        playUiSound("trash");
         libraryActionForObject(object, "empty-trash");
       }
       return;
     }
   }
   if (action.startsWith("focus-window:")) {
-    focusWindow(action.slice("focus-window:".length));
+    focusWindow(action.slice("focus-window:".length), { moveFocus: true });
     return;
   }
   if (action === "toggle-desktop-icons") {
@@ -1448,16 +1956,10 @@ function cancelDesktopRename() {
 
 export function filterLauncherItems(query) {
   const normalized = query.trim().toLowerCase();
+  let visibleCount = 0;
   for (const item of launcherGrid.querySelectorAll(".launcher-card")) {
     item.hidden = normalized !== "" && !item.dataset.search.includes(normalized);
-  }
-  let visibleCount = 0;
-  for (const group of launcherGrid.querySelectorAll(".launcher-group")) {
-    const hasVisibleItems = Array.from(group.querySelectorAll(".launcher-card")).some(
-      (item) => !item.hidden,
-    );
-    group.hidden = !hasVisibleItems;
-    if (hasVisibleItems) {
+    if (!item.hidden) {
       visibleCount += 1;
     }
   }
@@ -1543,6 +2045,7 @@ function showHomeNotificationToast(entry) {
   homeNotificationBody.textContent = entry.body || "A capsule requests wallet approval.";
   homeNotificationToast.hidden = false;
   homeNotificationToast.setAttribute("aria-hidden", "false");
+  playUiSound("notification");
   window.clearTimeout(homeNotificationToastTimer);
   homeNotificationToastTimer = window.setTimeout(hideHomeNotificationToast, HOME_NOTIFICATION_TOAST_MS);
 }
@@ -1554,6 +2057,15 @@ function bindHomeNotificationToast() {
   homeNotificationToast.dataset.bound = "true";
   homeNotificationAction.addEventListener("click", () => {
     hideHomeNotificationToast();
+    // Wallet approvals belong in Wallet — Inbox is the wrong room.
+    if (walletRailAvailable()) {
+      showWalletRail();
+      return;
+    }
+    if (targetById(shellState.currentSummary, "wallet")) {
+      openTarget("wallet");
+      return;
+    }
     openTarget("inbox");
   });
   homeNotificationDismiss.addEventListener("click", hideHomeNotificationToast);
@@ -1567,3 +2079,351 @@ function hideHomeNotificationToast() {
   homeNotificationToast.setAttribute("aria-hidden", "true");
   homeNotificationToast.hidden = true;
 }
+
+/* ---- Dock behavior: magnification, tooltips, launch bounce ----
+   Magnification is paint-only: layout slots stay fixed at 40px so hit targets
+   never move; only the inner .taskbar-icon scales (origin bottom-center) with
+   a cosine falloff around the pointer. Icon centers are cached on hover entry;
+   pointermove only reads clientX and writes transforms inside one rAF per
+   frame. Disabled while dragging and under prefers-reduced-motion. */
+const DOCK_MAG_MAX_SCALE = 1.55;
+const DOCK_MAG_RANGE_PX = 88;
+const DOCK_MAG_LIFT_RATIO = 0.35;
+/* Neighbors slide away from the cursor by a fraction of the magnified peers'
+   width growth (macOS grows the whole dock; we spread within the pill). */
+const DOCK_MAG_SPREAD = 0.3;
+const DOCK_ICON_BASE_PX = 40;
+const DOCK_TOOLTIP_SHOW_MS = 320;
+const DOCK_TOOLTIP_HIDE_MS = 100;
+
+// Queried lazily: matchMedia is unavailable in the host's DOM-stubbed smoke
+// harnesses, and the GUI module graph must stay import-safe there.
+function dockReducedMotion() {
+  return window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
+}
+const dockState = {
+  taskbar: null,
+  icons: [],
+  raf: 0,
+  pointerX: null,
+  tooltipNode: null,
+  tooltipShowTimer: 0,
+  tooltipHideTimer: 0,
+  tooltipAnchor: null,
+};
+
+function dockMagnifyEnabled() {
+  return (
+    !dockReducedMotion() &&
+    !document.body.classList.contains("dragging-target") &&
+    window.matchMedia?.("(hover: hover) and (min-width: 641px)").matches === true
+  );
+}
+
+function rebuildDockIconCache() {
+  dockState.icons = Array.from(
+    dockState.taskbar.querySelectorAll(".taskbar-item"),
+  ).map((item) => {
+    const rect = item.getBoundingClientRect();
+    return {
+      node: item.querySelector(".taskbar-icon"),
+      item,
+      center: rect.left + rect.width / 2,
+    };
+  });
+  /* The wave should span ~2 icons each side of the cursor, whatever the
+     current pitch (icon + gap) is — a fixed px range covers barely one. */
+  let pitch = 0;
+  for (let i = 1; i < dockState.icons.length; i += 1) {
+    const gap = dockState.icons[i].center - dockState.icons[i - 1].center;
+    if (gap > 0 && (pitch === 0 || gap < pitch)) {
+      pitch = gap;
+    }
+  }
+  dockState.range = Math.max(DOCK_MAG_RANGE_PX, pitch * 2.4);
+}
+
+function resetDockMagnification() {
+  dockState.pointerX = null;
+  for (const entry of dockState.icons) {
+    if (entry.node) {
+      entry.node.style.transform = "";
+    }
+    entry.item?.style.removeProperty("--dock-shift");
+  }
+}
+
+function applyDockMagnification() {
+  dockState.raf = 0;
+  if (dockState.pointerX === null) {
+    return;
+  }
+  const range = dockState.range || DOCK_MAG_RANGE_PX;
+  const scales = dockState.icons.map((entry) => {
+    const distance = Math.abs(dockState.pointerX - entry.center);
+    if (distance >= range) {
+      return 1;
+    }
+    const falloff = 0.5 * (1 + Math.cos((Math.PI * distance) / range));
+    return 1 + (DOCK_MAG_MAX_SCALE - 1) * falloff;
+  });
+  for (let i = 0; i < dockState.icons.length; i += 1) {
+    const entry = dockState.icons[i];
+    if (!entry.node) {
+      continue;
+    }
+    const scale = scales[i];
+    /* Every magnified peer pushes this icon away from itself, so the row
+       spreads around the cursor like the macOS dock wave. */
+    let shift = 0;
+    for (let j = 0; j < dockState.icons.length; j += 1) {
+      if (j === i || scales[j] <= 1) {
+        continue;
+      }
+      shift +=
+        Math.sign(entry.center - dockState.icons[j].center) *
+        (scales[j] - 1) *
+        DOCK_ICON_BASE_PX *
+        DOCK_MAG_SPREAD;
+    }
+    if (scale <= 1.004 && Math.abs(shift) < 0.5) {
+      entry.node.style.transform = "";
+      entry.item?.style.removeProperty("--dock-shift");
+      continue;
+    }
+    const lift = -(scale - 1) * DOCK_ICON_BASE_PX * DOCK_MAG_LIFT_RATIO;
+    entry.node.style.transform = `translate(${shift.toFixed(2)}px, ${lift.toFixed(2)}px) scale(${scale.toFixed(3)})`;
+    entry.item?.style.setProperty("--dock-shift", `${shift.toFixed(2)}px`);
+  }
+  repositionDockTooltip();
+}
+
+/* Keep the visible label riding the magnified icon (macOS labels track). */
+function repositionDockTooltip() {
+  const tooltip = dockState.tooltipNode;
+  const anchor = dockState.tooltipAnchor;
+  if (!tooltip || tooltip.hidden || !anchor?.isConnected) {
+    return;
+  }
+  const icon = anchor.querySelector(".taskbar-icon");
+  const rect = (icon || anchor).getBoundingClientRect();
+  tooltip.style.left = `${rect.left + rect.width / 2}px`;
+  tooltip.style.top = `${rect.top - 11}px`;
+}
+
+function dockTooltipNode() {
+  if (!dockState.tooltipNode) {
+    const node = document.createElement("div");
+    node.id = "dock-tooltip";
+    node.className = "dock-tooltip";
+    node.setAttribute("role", "tooltip");
+    node.hidden = true;
+    document.body.appendChild(node);
+    dockState.tooltipNode = node;
+  }
+  return dockState.tooltipNode;
+}
+
+function scheduleDockTooltip(item, delay) {
+  const label = item.dataset.label || "";
+  if (!label) {
+    return;
+  }
+  window.clearTimeout(dockState.tooltipHideTimer);
+  window.clearTimeout(dockState.tooltipShowTimer);
+  /* macOS timing: the first label waits, but while one is already up,
+     sweeping across icons retargets it instantly — no stale label. */
+  const tooltipUp = dockState.tooltipNode && !dockState.tooltipNode.hidden;
+  if (tooltipUp || delay === 0) {
+    showDockTooltip(item, label);
+    return;
+  }
+  dockState.tooltipShowTimer = window.setTimeout(() => {
+    showDockTooltip(item, label);
+  }, delay);
+}
+
+function showDockTooltip(item, label) {
+  if (!item.isConnected) {
+    return;
+  }
+  const tooltip = dockTooltipNode();
+  tooltip.textContent = label;
+  tooltip.hidden = false;
+  /* Anchor to the icon's live (possibly magnified) rect so the label floats
+     clear above the grown icon, tail pointing at it — not glued to the bar. */
+  const icon = item.querySelector(".taskbar-icon");
+  const rect = (icon || item).getBoundingClientRect();
+  tooltip.style.left = `${rect.left + rect.width / 2}px`;
+  tooltip.style.top = `${rect.top - 11}px`;
+  tooltip.dataset.visible = "true";
+  if (dockState.tooltipAnchor && dockState.tooltipAnchor !== item) {
+    dockState.tooltipAnchor.removeAttribute("aria-describedby");
+  }
+  dockState.tooltipAnchor = item;
+  item.setAttribute("aria-describedby", "dock-tooltip");
+}
+
+function scheduleDockTooltipHide() {
+  window.clearTimeout(dockState.tooltipShowTimer);
+  window.clearTimeout(dockState.tooltipHideTimer);
+  dockState.tooltipHideTimer = window.setTimeout(hideDockTooltip, DOCK_TOOLTIP_HIDE_MS);
+}
+
+function hideDockTooltip() {
+  window.clearTimeout(dockState.tooltipShowTimer);
+  if (dockState.tooltipNode) {
+    dockState.tooltipNode.hidden = true;
+    delete dockState.tooltipNode.dataset.visible;
+  }
+  if (dockState.tooltipAnchor) {
+    dockState.tooltipAnchor.removeAttribute("aria-describedby");
+    dockState.tooltipAnchor = null;
+  }
+}
+
+function startDockLaunchBounce(item) {
+  if (dockReducedMotion()) {
+    return;
+  }
+  const icon = item.querySelector(".taskbar-icon");
+  if (!icon) {
+    return;
+  }
+  item.classList.remove("launching");
+  // Restart the keyframe animation if a bounce is already mid-flight.
+  void item.offsetWidth;
+  item.classList.add("launching");
+  icon.addEventListener(
+    "animationend",
+    () => {
+      item.classList.remove("launching");
+    },
+    { once: true },
+  );
+}
+
+function setupDock() {
+  dockState.taskbar = document.querySelector(".taskbar");
+  const taskbar = dockState.taskbar;
+  if (!taskbar) {
+    return;
+  }
+  taskbar.addEventListener("pointerenter", () => {
+    if (dockMagnifyEnabled()) {
+      rebuildDockIconCache();
+    }
+  });
+  taskbar.addEventListener("pointermove", (event) => {
+    if (!dockMagnifyEnabled()) {
+      resetDockMagnification();
+      return;
+    }
+    if (dockState.icons.length === 0) {
+      rebuildDockIconCache();
+    }
+    dockState.pointerX = event.clientX;
+    if (!dockState.raf) {
+      dockState.raf = window.requestAnimationFrame(applyDockMagnification);
+    }
+  });
+  taskbar.addEventListener("pointerleave", resetDockMagnification);
+  window.addEventListener("resize", () => {
+    dockState.icons = [];
+  });
+
+  // Tooltips by delegation so they survive taskbar re-renders. Shown on hover
+  // (after a delay) and on keyboard focus (immediately); Escape dismisses.
+  taskbar.addEventListener("pointerover", (event) => {
+    const item = event.target.closest(".taskbar-item");
+    if (!item || (event.relatedTarget && item.contains(event.relatedTarget))) {
+      return;
+    }
+    scheduleDockTooltip(item, DOCK_TOOLTIP_SHOW_MS);
+  });
+  taskbar.addEventListener("pointerout", (event) => {
+    const item = event.target.closest(".taskbar-item");
+    if (!item || (event.relatedTarget && item.contains(event.relatedTarget))) {
+      return;
+    }
+    scheduleDockTooltipHide();
+  });
+  taskbar.addEventListener("focusin", (event) => {
+    const item = event.target.closest(".taskbar-item");
+    if (item) {
+      scheduleDockTooltip(item, 0);
+    }
+  });
+  taskbar.addEventListener("focusout", scheduleDockTooltipHide);
+  taskbar.addEventListener("click", hideDockTooltip);
+  window.addEventListener("keydown", (event) => {
+    if (event.key === "Escape") {
+      hideDockTooltip();
+    }
+  });
+}
+
+/* Called by the home-gui facade once ensureHomeGuiDom() has instantiated the
+   lazy GUI template — these nodes do not exist at module-evaluation time. */
+let shellSurfaceDomBound = false;
+
+export function bindShellSurfaceDom() {
+  if (shellSurfaceDomBound) {
+    return;
+  }
+  shellSurfaceDomBound = true;
+  // The launcher is a modal dialog: Tab cycles inside the popover until it is
+  // dismissed.
+  launcher?.addEventListener("keydown", (event) => {
+    if (!launcher.hidden) {
+      trapTabWithin(launcher.querySelector(".launcher-popover"), event);
+    }
+  });
+  desktopContextMenu?.addEventListener("keydown", handleContextMenuKeydown);
+  setupDock();
+  syncDockAutoHide();
+  bindDockAutoHideReveal();
+}
+
+/* ---- Dock auto-hide (local preference, same store as theme/sounds) ---- */
+const DOCK_AUTOHIDE_KEY = "elastos.ui.dockAutoHide";
+
+export function dockAutoHideEnabled() {
+  try {
+    return localStorage.getItem(DOCK_AUTOHIDE_KEY) === "on";
+  } catch (_error) {
+    return false;
+  }
+}
+
+export function setDockAutoHide(on) {
+  try {
+    localStorage.setItem(DOCK_AUTOHIDE_KEY, on ? "on" : "off");
+  } catch (_error) {}
+  syncDockAutoHide();
+}
+
+export function syncDockAutoHide() {
+  const on = dockAutoHideEnabled();
+  document.body.classList.toggle("dock-autohide", on);
+  if (!on) {
+    document.body.classList.remove("dock-revealed");
+  }
+}
+
+function bindDockAutoHideReveal() {
+  const revealBand = 28;
+  window.addEventListener("pointermove", (event) => {
+    if (!document.body.classList.contains("dock-autohide")) {
+      return;
+    }
+    const nearBottom = event.clientY >= window.innerHeight - revealBand;
+    const overDock = Boolean(event.target.closest?.(".taskbar"));
+    document.body.classList.toggle("dock-revealed", nearBottom || overDock);
+  });
+  window.addEventListener("storage", (event) => {
+    if (event.key === DOCK_AUTOHIDE_KEY || event.key === null) {
+      syncDockAutoHide();
+    }
+  });
+}
diff --git a/capsules/home-gui/browser/shell-wallet-rail.js b/capsules/home-gui/browser/shell-wallet-rail.js
new file mode 100644
index 000000000..caab72e51
--- /dev/null
+++ b/capsules/home-gui/browser/shell-wallet-rail.js
@@ -0,0 +1,711 @@
+import {
+  escapeHtml,
+  fetchJson,
+  shellState,
+  targetById,
+} from "./shell-core.js?v=home-20260718m";
+import {
+  iframeAllowForLaunch,
+  iframeSandboxForLaunch,
+  openTarget,
+} from "./shell-windows.js?v=home-20260718m";
+
+/* Wallet rail: a right-hand slide-over that hosts the wallet capsule.
+   Chrome only — it launches the wallet through the exact same canonical
+   path as a window (POST /api/apps/home/launch) and mounts the returned
+   route in an iframe with the same sandbox/allow policy windows compute.
+   The shell holds no wallet state and no wallet logic; approvals and
+   accounts stay inside the capsule where the authority lives.
+
+   The frame keeps its session across open/close (hide, don't unload) and
+   is torn down only when the host retires the GUI surface. */
+
+const EYE_OPEN_SVG =
+  '<svg class="wallet-rail-icon-svg" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M1.75 8s2.5-3.75 6.25-3.75S14.25 8 14.25 8s-2.5 3.75-6.25 3.75S1.75 8 1.75 8Z" /><circle cx="8" cy="8" r="1.75" /></svg>';
+
+const EYE_HIDDEN_SVG =
+  '<svg class="wallet-rail-icon-svg" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M2.25 2.25l11.5 11.5" /><path d="M6.6 6.7A1.75 1.75 0 0 0 9.3 9.4" /><path d="M4.2 4.55C2.85 5.55 1.75 8 1.75 8s2.5 3.75 6.25 3.75c1.05 0 2-.3 2.8-.75" /><path d="M7.1 4.35c.3-.05.6-.1.9-.1 3.75 0 6.25 3.75 6.25 3.75a12.4 12.4 0 0 1-1.55 1.7" /></svg>';
+
+let rail = null;
+let frame = null;
+let barButton = null;
+let closeButton = null;
+let windowButton = null;
+let approvalsButton = null;
+let settingsButton = null;
+let privacyButton = null;
+let approvalsBadge = null;
+let errorBlock = null;
+let errorDetail = null;
+let retryButton = null;
+let invoker = null;
+let launching = false;
+let outsideDismissBound = false;
+let hideAnimating = false;
+let hideFinishTimer = 0;
+let hideEndHandler = null;
+let pendingRestoreFocus = true;
+let privacyHidden = false;
+let frameReady = false;
+let queuedChromeCommand = "";
+let openedByEdgeHover = false;
+let edgeHoverBound = false;
+let edgeOpenTimer = 0;
+let edgeCloseTimer = 0;
+let edgeOpenedAt = 0;
+let lastPointerClientX = 0;
+/* Set from summary sync — do not rely only on this module's shellState copy. */
+let walletTargetAvailable = false;
+let preloadTimer = 0;
+
+const EDGE_REVEAL_PX = 16;
+const EDGE_OPEN_MS = 100;
+const EDGE_CLOSE_MS = 220;
+/* Cover the enter slide so a gutter pointer / transform rect can't auto-close. */
+const EDGE_OPEN_GRACE_MS = 320;
+const PRELOAD_IDLE_MS = 2000;
+
+export function bindWalletRail() {
+  if (rail) {
+    return;
+  }
+  rail = document.querySelector("#wallet-rail");
+  frame = document.querySelector("#wallet-rail-frame");
+  barButton = document.querySelector("#toolbar-wallet");
+  closeButton = document.querySelector("#wallet-rail-close");
+  windowButton = document.querySelector("#wallet-rail-open-window");
+  approvalsButton = document.querySelector("#wallet-rail-approvals");
+  settingsButton = document.querySelector("#wallet-rail-settings");
+  privacyButton = document.querySelector("#wallet-rail-privacy");
+  approvalsBadge = document.querySelector("#wallet-rail-approvals-badge");
+  errorBlock = document.querySelector("#wallet-rail-error");
+  errorDetail = document.querySelector("#wallet-rail-error-detail");
+  retryButton = document.querySelector("#wallet-rail-retry");
+  if (!rail || !frame) {
+    return;
+  }
+  barButton?.addEventListener("click", () => {
+    // Toolbar is an intentional pin — not an edge peek session.
+    openedByEdgeHover = false;
+    clearEdgeTimers();
+    toggleWalletRail();
+  });
+  closeButton?.addEventListener("click", () => {
+    openedByEdgeHover = false;
+    hideWalletRail();
+  });
+  windowButton?.addEventListener("click", () => {
+    // Single session: tear down the rail frame before the window launch so
+    // two home_tokens never race.
+    openedByEdgeHover = false;
+    retireWalletRail();
+    openTarget("wallet");
+  });
+  approvalsButton?.addEventListener("click", () => {
+    postWalletChromeCommand("open-activity");
+  });
+  settingsButton?.addEventListener("click", () => {
+    postWalletChromeCommand("open-settings");
+  });
+  privacyButton?.addEventListener("click", () => {
+    postWalletChromeCommand("toggle-privacy");
+  });
+  retryButton?.addEventListener("click", () => {
+    void mountWalletFrame();
+  });
+  window.addEventListener("message", onWalletChromeMessage);
+  rail.addEventListener("keydown", (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      // Close in-capsule drawers/modals before hiding — focus often sits on
+      // the rail head after Activity/Settings, so iframe Escape never runs.
+      openedByEdgeHover = false;
+      postWalletChromeCommand("close-overlays");
+      hideWalletRail();
+    }
+  });
+  rail.addEventListener("pointerenter", () => {
+    clearEdgeCloseTimer();
+  });
+  rail.addEventListener("pointerleave", (event) => {
+    if (!openedByEdgeHover) {
+      return;
+    }
+    // Leaving into the iframe/chrome still counts as inside when relatedTarget
+    // is contained; only schedule close when the pointer truly left the rail.
+    if (event.relatedTarget && rail.contains(event.relatedTarget)) {
+      return;
+    }
+    // Far-right gutter sits outside the plate (rail is inset 8px). Stay open
+    // while the pointer is still in that strip or over the rail column.
+    if (pointerInEdgeKeepZone(event.clientX)) {
+      clearEdgeCloseTimer();
+      return;
+    }
+    scheduleEdgeClose();
+  });
+  bindEdgeReveal();
+  syncPrivacyButton();
+}
+
+function finePointerHoverAvailable() {
+  return !window.matchMedia?.("(hover: none), (pointer: coarse)")?.matches;
+}
+
+function connectorSheetOpen() {
+  const connectorSheet = document.querySelector("#connector-sheet");
+  return Boolean(connectorSheet && !connectorSheet.hidden);
+}
+
+function clearEdgeOpenTimer() {
+  if (edgeOpenTimer) {
+    window.clearTimeout(edgeOpenTimer);
+    edgeOpenTimer = 0;
+  }
+}
+
+function clearEdgeCloseTimer() {
+  if (edgeCloseTimer) {
+    window.clearTimeout(edgeCloseTimer);
+    edgeCloseTimer = 0;
+  }
+}
+
+function clearEdgeTimers() {
+  clearEdgeOpenTimer();
+  clearEdgeCloseTimer();
+}
+
+function scheduleEdgeClose() {
+  if (!openedByEdgeHover || edgeCloseTimer) {
+    return;
+  }
+  // Leave during open-grace: still schedule close after grace ends + settle delay
+  // so a parked pointer outside the strip cannot leave the rail stuck open.
+  const graceLeft = Math.max(0, EDGE_OPEN_GRACE_MS - (Date.now() - edgeOpenedAt));
+  const delay = graceLeft + EDGE_CLOSE_MS;
+  edgeCloseTimer = window.setTimeout(() => {
+    edgeCloseTimer = 0;
+    if (!openedByEdgeHover || !walletRailOpen()) {
+      return;
+    }
+    // Last-chance: pointer may still sit in the far-right gutter / rail column.
+    if (pointerInEdgeKeepZone(lastPointerClientX)) {
+      return;
+    }
+    openedByEdgeHover = false;
+    hideWalletRail({ restoreFocus: false });
+  }, delay);
+}
+
+function inEdgeOpenGrace() {
+  return openedByEdgeHover && Date.now() - edgeOpenedAt < EDGE_OPEN_GRACE_MS;
+}
+
+/* Keep open while over the rail, the inset gutter to the viewport edge, or
+   the reveal hot-zone — including mid enter-animation when the plate's
+   transformed rect is still mostly off-screen to the right. */
+function pointerInEdgeKeepZone(clientX) {
+  if (!Number.isFinite(clientX)) {
+    return false;
+  }
+  const fromRight = window.innerWidth - clientX;
+  if (fromRight <= EDGE_REVEAL_PX) {
+    return true;
+  }
+  if (!rail || !walletRailOpen()) {
+    return false;
+  }
+  if (inEdgeOpenGrace()) {
+    return true;
+  }
+  const rect = rail.getBoundingClientRect();
+  // Layout left (ignore transform) so the keep zone is the resting column.
+  const layoutLeft = window.innerWidth - 8 - rect.width;
+  return clientX >= layoutLeft - 2;
+}
+
+function bindEdgeReveal() {
+  if (edgeHoverBound) {
+    return;
+  }
+  edgeHoverBound = true;
+  document.addEventListener(
+    "pointermove",
+    (event) => {
+      if (!finePointerHoverAvailable()) {
+        return;
+      }
+      if (event.pointerType && event.pointerType !== "mouse") {
+        return;
+      }
+      lastPointerClientX = event.clientX;
+      if (!walletRailAvailable() || connectorSheetOpen()) {
+        clearEdgeOpenTimer();
+        return;
+      }
+      const fromRight = window.innerWidth - event.clientX;
+      const inEdge = fromRight <= EDGE_REVEAL_PX;
+      if (inEdge) {
+        clearEdgeCloseTimer();
+        if (!walletRailOpen() && !edgeOpenTimer) {
+          edgeOpenTimer = window.setTimeout(() => {
+            edgeOpenTimer = 0;
+            if (!walletRailAvailable() || connectorSheetOpen() || walletRailOpen()) {
+              return;
+            }
+            openedByEdgeHover = true;
+            edgeOpenedAt = Date.now();
+            showWalletRail({ fromEdgeHover: true });
+          }, EDGE_OPEN_MS);
+        }
+        return;
+      }
+      clearEdgeOpenTimer();
+      if (!openedByEdgeHover || !walletRailOpen()) {
+        return;
+      }
+      // Stay out while pointer is on the rail column or right gutter; close
+      // only after leaving that whole strip to the left.
+      if (pointerInEdgeKeepZone(event.clientX)) {
+        clearEdgeCloseTimer();
+      } else {
+        scheduleEdgeClose();
+      }
+    },
+    { passive: true },
+  );
+}
+
+function postWalletChromeCommand(cmd) {
+  if (!cmd) {
+    return;
+  }
+  const target = frame?.contentWindow;
+  if (!target || !frame.dataset.route || !frameReady) {
+    queuedChromeCommand = cmd;
+    return;
+  }
+  target.postMessage(
+    {
+      type: "elastos:wallet-chrome-command",
+      cmd,
+    },
+    window.location.origin,
+  );
+}
+
+function flushQueuedChromeCommand() {
+  if (!queuedChromeCommand || !frameReady) {
+    return;
+  }
+  const cmd = queuedChromeCommand;
+  queuedChromeCommand = "";
+  postWalletChromeCommand(cmd);
+}
+
+function markFrameReady() {
+  if (frameReady) {
+    flushQueuedChromeCommand();
+    return;
+  }
+  frameReady = true;
+  frame?.classList.add("is-ready");
+  flushQueuedChromeCommand();
+}
+
+function onWalletChromeMessage(event) {
+  if (event.origin !== window.location.origin) {
+    return;
+  }
+  // Fail closed: only the mounted Wallet rail frame may drive chrome badges.
+  if (!frame?.contentWindow || event.source !== frame.contentWindow) {
+    return;
+  }
+  const message = event.data || {};
+  if (message.type === "wallet:privacy-state") {
+    markFrameReady();
+    privacyHidden = message.privacyMode === true;
+    syncPrivacyButton();
+    return;
+  }
+  if (message.type === "wallet:pending-count") {
+    markFrameReady();
+    syncRailApprovalsBadge(Number(message.count) || 0);
+  }
+}
+
+function syncPrivacyButton() {
+  if (!privacyButton) {
+    return;
+  }
+  const label = privacyHidden ? "Show balances" : "Hide balances";
+  privacyButton.setAttribute("aria-label", label);
+  privacyButton.title = label;
+  privacyButton.setAttribute("aria-pressed", privacyHidden ? "true" : "false");
+  privacyButton.classList.toggle("is-active", privacyHidden);
+  privacyButton.innerHTML = privacyHidden ? EYE_HIDDEN_SVG : EYE_OPEN_SVG;
+}
+
+function syncRailApprovalsBadge(count) {
+  if (!approvalsBadge || !approvalsButton) {
+    return;
+  }
+  const n = Math.max(0, Number(count) || 0);
+  if (n <= 0) {
+    approvalsBadge.hidden = true;
+    approvalsBadge.textContent = "";
+    approvalsButton.setAttribute("aria-label", "Activity");
+    return;
+  }
+  approvalsBadge.hidden = false;
+  approvalsBadge.textContent = n > 9 ? "9+" : String(n);
+  approvalsButton.setAttribute(
+    "aria-label",
+    n === 1 ? "Activity, 1 pending" : `Activity, ${n} pending`,
+  );
+}
+
+export function walletRailOpen() {
+  return Boolean(rail) && !rail.hidden;
+}
+
+export function walletRailSessionMounted() {
+  return Boolean(frame?.dataset?.route);
+}
+
+export function walletRailAvailable() {
+  return walletTargetAvailable
+    || Boolean(targetById(shellState.currentSummary, "wallet"))
+    || Boolean(barButton && !barButton.hidden);
+}
+
+export function walletRailFrame() {
+  return frame;
+}
+
+/* Warm the Wallet iframe while the rail stays hidden — one launch, no remount on peek. */
+export function preloadWalletRail() {
+  if (!walletRailAvailable() || !frame || frame.dataset.route || launching) {
+    return;
+  }
+  void mountWalletFrame();
+}
+
+function clearPreloadTimer() {
+  if (preloadTimer) {
+    window.clearTimeout(preloadTimer);
+    preloadTimer = 0;
+  }
+}
+
+function scheduleIdlePreload() {
+  clearPreloadTimer();
+  if (!walletRailAvailable() || frame?.dataset?.route || launching) {
+    return;
+  }
+  preloadTimer = window.setTimeout(() => {
+    preloadTimer = 0;
+    preloadWalletRail();
+  }, PRELOAD_IDLE_MS);
+}
+
+function postWalletSoftRefresh() {
+  const target = frame?.contentWindow;
+  if (!target || !frame.dataset.route || !frameReady) {
+    return;
+  }
+  try {
+    target.postMessage(
+      {
+        type: "elastos:wallet-refresh",
+        schema: "elastos.home.wallet-refresh/v1",
+      },
+      window.location.origin,
+    );
+  } catch (_error) {
+    // Frame may be unloaded or mid-nav.
+  }
+}
+
+/* Pending wallet approvals from summary facts — badge only, no authority. */
+export function syncWalletRailAvailability(summary = shellState.currentSummary) {
+  if (!barButton) {
+    return;
+  }
+  const available = Boolean(targetById(summary, "wallet"));
+  walletTargetAvailable = available;
+  barButton.hidden = !available;
+  if (!available) {
+    clearPreloadTimer();
+    retireWalletRail();
+    syncWalletBarBadge(0);
+    syncRailApprovalsBadge(0);
+    return;
+  }
+  const pending = walletApprovalPendingCount(summary);
+  syncWalletBarBadge(pending);
+  // Seed Activity badge from summary until the capsule posts wallet:pending-count.
+  syncRailApprovalsBadge(pending);
+  scheduleIdlePreload();
+}
+
+function walletApprovalPendingCount(summary) {
+  const entries = Array.isArray(summary?.notifications?.entries)
+    ? summary.notifications.entries
+    : [];
+  return entries.filter((entry) => {
+    const actionId = entry?.action_ref?.action_id;
+    return (
+      entry?.kind === "wallet_approval_request" &&
+      typeof actionId === "string" &&
+      actionId.startsWith("wallet-approve-request:")
+    );
+  }).length;
+}
+
+function syncWalletBarBadge(count) {
+  if (!barButton) {
+    return;
+  }
+  let badge = barButton.querySelector(".toolbar-wallet-count");
+  if (count <= 0) {
+    if (badge) {
+      badge.hidden = true;
+      badge.textContent = "";
+    }
+    barButton.setAttribute(
+      "aria-label",
+      walletRailOpen() ? "Wallet. Close" : "Wallet",
+    );
+    return;
+  }
+  if (!badge) {
+    badge = document.createElement("span");
+    badge.className = "toolbar-wallet-count";
+    badge.setAttribute("aria-hidden", "true");
+    barButton.appendChild(badge);
+  }
+  badge.hidden = false;
+  badge.textContent = count > 99 ? "99+" : String(count);
+  barButton.setAttribute(
+    "aria-label",
+    `Wallet. ${count} pending approval${count === 1 ? "" : "s"}`,
+  );
+}
+
+export function showWalletRail(options = {}) {
+  if (!rail || !walletRailAvailable()) {
+    return;
+  }
+  const fromEdgeHover = options.fromEdgeHover === true;
+  if (!fromEdgeHover) {
+    openedByEdgeHover = false;
+    clearEdgeTimers();
+  }
+  cancelHideAnimation();
+  invoker =
+    document.activeElement && document.activeElement !== document.body
+      ? document.activeElement
+      : null;
+  rail.hidden = false;
+  rail.inert = false;
+  rail.setAttribute("aria-hidden", "false");
+  barButton?.setAttribute("aria-expanded", "true");
+  // Retrigger the enter motion when reopening after a leave (or mid-leave cancel).
+  rail.classList.remove("wallet-rail-leaving");
+  rail.style.animation = "none";
+  void rail.offsetWidth;
+  rail.style.animation = "";
+  bindOutsideDismiss();
+  // Edge peek should not yank keyboard focus off the desktop / an open window.
+  if (!fromEdgeHover) {
+    rail.focus({ preventScroll: true });
+  }
+  syncRailApprovalsBadge(walletApprovalPendingCount(shellState.currentSummary));
+  clearPreloadTimer();
+  if (!frame.dataset.route) {
+    void mountWalletFrame();
+  } else if (frameReady) {
+    flushQueuedChromeCommand();
+    // Warm reopen: refresh balances/pending without remounting.
+    postWalletSoftRefresh();
+  }
+}
+
+export function hideWalletRail({ restoreFocus = true, animate = true } = {}) {
+  if (!rail || rail.hidden) {
+    return;
+  }
+  clearEdgeTimers();
+  if (hideAnimating) {
+    pendingRestoreFocus = pendingRestoreFocus && restoreFocus;
+    return;
+  }
+  pendingRestoreFocus = restoreFocus;
+  const reduceMotion = Boolean(
+    window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches,
+  );
+  if (!animate || reduceMotion) {
+    finishHideWalletRail();
+    return;
+  }
+  hideAnimating = true;
+  rail.classList.add("wallet-rail-leaving");
+  hideEndHandler = (event) => {
+    if (event.target !== rail) {
+      return;
+    }
+    finishHideWalletRail();
+  };
+  rail.addEventListener("animationend", hideEndHandler);
+  hideFinishTimer = window.setTimeout(() => {
+    finishHideWalletRail();
+  }, 280);
+}
+
+function finishHideWalletRail() {
+  if (!rail || rail.hidden) {
+    cancelHideAnimation();
+    return;
+  }
+  cancelHideAnimation();
+  openedByEdgeHover = false;
+  rail.hidden = true;
+  rail.inert = true;
+  rail.setAttribute("aria-hidden", "true");
+  barButton?.setAttribute("aria-expanded", "false");
+  if (pendingRestoreFocus) {
+    invoker?.focus?.();
+  }
+  invoker = null;
+  pendingRestoreFocus = true;
+}
+
+function cancelHideAnimation() {
+  if (hideFinishTimer) {
+    window.clearTimeout(hideFinishTimer);
+    hideFinishTimer = 0;
+  }
+  if (hideEndHandler && rail) {
+    rail.removeEventListener("animationend", hideEndHandler);
+  }
+  hideEndHandler = null;
+  hideAnimating = false;
+  rail?.classList.remove("wallet-rail-leaving");
+}
+
+export function toggleWalletRail() {
+  if (hideAnimating) {
+    // Mid-leave: treat as reopen (cancel the exit motion).
+    showWalletRail();
+    return;
+  }
+  if (walletRailOpen()) {
+    hideWalletRail();
+  } else {
+    showWalletRail();
+  }
+}
+
+/* Full teardown for shell switches: the capsule session must not survive the
+   GUI going dormant. */
+export function retireWalletRail() {
+  clearPreloadTimer();
+  hideWalletRail({ restoreFocus: false, animate: false });
+  queuedChromeCommand = "";
+  frameReady = false;
+  privacyHidden = false;
+  syncPrivacyButton();
+  syncRailApprovalsBadge(0);
+  if (frame) {
+    frame.removeAttribute("src");
+    delete frame.dataset.route;
+    frame.hidden = true;
+    frame.classList.remove("is-ready");
+  }
+  if (errorBlock) {
+    errorBlock.hidden = true;
+  }
+}
+
+async function mountWalletFrame() {
+  if (launching) {
+    return;
+  }
+  launching = true;
+  frameReady = false;
+  queuedChromeCommand = queuedChromeCommand || "";
+  if (errorBlock) {
+    errorBlock.hidden = true;
+  }
+  frame.hidden = false;
+  frame.classList.remove("is-ready");
+  try {
+    const launched = await fetchJson("/api/apps/home/launch", {
+      method: "POST",
+      body: JSON.stringify({ target: "wallet", query: {} }),
+    });
+    if (launched.attach_kind !== "iframe") {
+      throw new Error(`unsupported attach kind: ${launched.attach_kind || "unknown"}`);
+    }
+    if (
+      typeof launched.launch_status === "string" &&
+      launched.launch_status.trim() !== "" &&
+      launched.launch_status !== "launched"
+    ) {
+      throw new Error(
+        typeof launched.launch_detail === "string" && launched.launch_detail.trim() !== ""
+          ? launched.launch_detail.trim()
+          : `launch status: ${launched.launch_status}`,
+      );
+    }
+    frame.setAttribute("sandbox", iframeSandboxForLaunch(launched));
+    frame.setAttribute("allow", iframeAllowForLaunch(launched));
+    frame.title = escapeHtml(launched.title || "Wallet");
+    frame.addEventListener(
+      "load",
+      () => {
+        markFrameReady();
+      },
+      { once: true },
+    );
+    // Mark rail presentation so the capsule hides duplicate Activity/Settings/Hide
+    // chrome (those live in this head). Window launches omit the flag.
+    const route = new URL(String(launched.route || ""), window.location.origin);
+    route.searchParams.set("presentation", "rail");
+    frame.src = route.href;
+    frame.dataset.route = route.href;
+  } catch (error) {
+    frame.hidden = true;
+    frameReady = false;
+    if (errorBlock) {
+      errorBlock.hidden = false;
+      if (errorDetail) {
+        errorDetail.textContent = String(error?.message || error);
+      }
+    }
+  } finally {
+    launching = false;
+  }
+}
+
+function bindOutsideDismiss() {
+  if (outsideDismissBound) {
+    return;
+  }
+  outsideDismissBound = true;
+  document.addEventListener("pointerdown", (event) => {
+    if (!walletRailOpen() || rail.contains(event.target)) {
+      return;
+    }
+    // The connector ceremony sheet sits above the rail — ignore outside
+    // dismiss while it is open (and never treat sheet clicks as outside).
+    if (connectorSheetOpen()) {
+      return;
+    }
+    openedByEdgeHover = false;
+    hideWalletRail({ restoreFocus: false });
+  });
+}
diff --git a/capsules/home-gui/browser/shell-window-geometry.js b/capsules/home-gui/browser/shell-window-geometry.js
index 446d3a740..0d81f09b2 100644
--- a/capsules/home-gui/browser/shell-window-geometry.js
+++ b/capsules/home-gui/browser/shell-window-geometry.js
@@ -10,7 +10,7 @@ import {
   beginShellInteraction,
   clamp,
   endShellInteraction,
-} from "./shell-core.js?v=home-20260705a";
+} from "./shell-core.js?v=home-20260718m";
 
 const WINDOW_MIN_VISIBLE_DRAG_WIDTH = 96;
 const WINDOW_MIN_VISIBLE_DRAG_HEIGHT = 32;
diff --git a/capsules/home-gui/browser/shell-windows.js b/capsules/home-gui/browser/shell-windows.js
index a3efe33d9..e9d7b0373 100644
--- a/capsules/home-gui/browser/shell-windows.js
+++ b/capsules/home-gui/browser/shell-windows.js
@@ -21,7 +21,9 @@ import {
   clearShellSessionState,
   ignoreRepeatedAction,
   targetById,
-} from "./shell-core.js?v=home-20260705a";
+  toolbarActiveTitleNode,
+  taskbarTargets,
+} from "./shell-core.js?v=home-20260718m";
 import {
   fitWindowBounds,
   fitWindowToBrowserAspect,
@@ -32,7 +34,8 @@ import {
   hideWindowSnapPreview,
   attachWindowDrag,
   attachWindowResize,
-} from "./shell-window-geometry.js?v=home-20260705a";
+} from "./shell-window-geometry.js?v=home-20260718m";
+import { playUiSound } from "./shell-sounds.js?v=home-20260718m";
 
 let windowHooks = null;
 const PEOPLE_DISCOVERY_AUTO_REFRESH_INITIAL_MS = 1_500;
@@ -46,6 +49,7 @@ const REQUIRED_WINDOW_HOOKS = [
   "refreshLauncherIfVisible",
   "renderDesktop",
   "renderTaskbar",
+  "syncMenubar",
   "updateTaskbarState",
 ];
 const WINDOW_CONTROL_GUARD_MS = 400;
@@ -56,6 +60,12 @@ const BROWSER_DESKTOP_OPEN_GUARD_MS = 700;
 const MAX_SESSION_WINDOWS = 24;
 const SINGLE_SESSION_TARGETS = new Set([PEOPLE_TARGET_ID, "inbox", "wallet"]);
 const TEMPORARY_BROWSER_CHILD_FRAME_RELEASE_HOOK = "__elastosBrowserReleaseRuntimePage";
+
+/* Menu-bar honesty: "New Window" appears only where openTarget really opens
+   one. Single-session targets just refocus — the item would be a lie. */
+export function supportsMenuNewWindow(targetId) {
+  return !SINGLE_SESSION_TARGETS.has(targetId);
+}
 const COMMON_IFRAME_SANDBOX = [
   "allow-downloads",
   "allow-forms",
@@ -102,7 +112,7 @@ const WEBAUTHN_IFRAME_ALLOW_TARGETS = new Set(["inbox", "wallet"]);
 const pendingWindowLaunches = new Set();
 const peopleDiscoveryRefreshTimers = new WeakMap();
 
-function iframeSandboxForLaunch(launched) {
+export function iframeSandboxForLaunch(launched) {
   const tokens = [...COMMON_IFRAME_SANDBOX];
   if (SAME_ORIGIN_PRESENTATION_IFRAME_TARGETS.has(launched?.target)) {
     tokens.push("allow-same-origin");
@@ -119,7 +129,7 @@ function iframeSandboxForLaunch(launched) {
   return tokens.join(" ");
 }
 
-function iframeAllowForLaunch(launched) {
+export function iframeAllowForLaunch(launched) {
   const tokens = [...COMMON_IFRAME_ALLOW];
   if (launched?.target === "browser") {
     tokens.push(...BROWSER_IFRAME_ALLOW_EXTRAS);
@@ -149,10 +159,126 @@ function requireWindowHooks() {
   return windowHooks;
 }
 
+// The system bar owns the focused-window title: the frontmost app's name is what
+// makes the desktop read as "owned" by an app. Falls back to "Home" when nothing
+// is focused. Always textContent — titles are app-derived strings, never HTML.
+function syncToolbarActiveTitle() {
+  if (!toolbarActiveTitleNode) {
+    return;
+  }
+  const active = shellState.activeWindowId
+    ? shellState.windows.get(shellState.activeWindowId)
+    : null;
+  const visible = active && !active.node.classList.contains("hidden");
+  toolbarActiveTitleNode.textContent =
+    visible && typeof active.title === "string" && active.title
+      ? active.title
+      : "Home";
+}
+
 function refreshWindowUi() {
   const hooks = requireWindowHooks();
   hooks.updateTaskbarState();
   hooks.refreshLauncherIfVisible();
+  syncToolbarActiveTitle();
+  hooks.syncMenubar();
+}
+
+/* ---- Window lifecycle motion (compositor-only: transform + opacity) ----
+   Logical state (hidden class, windows map, session persistence) always
+   changes synchronously; animation is presentation layered on top, with
+   fallback timers so a missed event can never wedge a window. */
+const WINDOW_EXIT_FALLBACK_MS = 220;
+const WINDOW_MINIMIZE_FALLBACK_MS = 280;
+
+// Queried lazily: matchMedia is unavailable in the host's DOM-stubbed smoke
+// harnesses, and the GUI module graph must stay import-safe there.
+function windowsReducedMotion() {
+  return window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
+}
+
+function playWindowEnter(node) {
+  if (windowsReducedMotion()) {
+    return;
+  }
+  node.classList.add("window-enter");
+  node.addEventListener(
+    "animationend",
+    () => {
+      node.classList.remove("window-enter");
+    },
+    { once: true },
+  );
+}
+
+function retireWindowNode(node) {
+  // Exit motion is cosmetic and only valid while the GUI owns the surface;
+  // a shell switch must retire stale windows synchronously (host contract).
+  const guiMounted = document.body.dataset.homeGui === "mounted";
+  if (!guiMounted || windowsReducedMotion() || node.classList.contains("hidden")) {
+    node.remove();
+    return;
+  }
+  node.classList.add("window-exit");
+  const finish = () => {
+    node.remove();
+  };
+  node.addEventListener("animationend", finish, { once: true });
+  window.setTimeout(finish, WINDOW_EXIT_FALLBACK_MS);
+}
+
+function dockSlotCenter(targetId) {
+  if (!taskbarTargets || !targetId) {
+    return null;
+  }
+  const button = taskbarTargets.querySelector(
+    `.taskbar-item[data-target="${CSS.escape(targetId)}"]`,
+  );
+  if (!button) {
+    return null;
+  }
+  const rect = button.getBoundingClientRect();
+  return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+}
+
+// The window is already logically hidden (class set by the caller); this keeps
+// it painted through `.window-minimizing` while it recedes into its dock slot.
+function playWindowMinimize(entry) {
+  const node = entry.node;
+  const slot = entry.kind === "browser" ? dockSlotCenter(entry.targetId) : null;
+  if (windowsReducedMotion() || !slot) {
+    return;
+  }
+  node.classList.add("window-minimizing");
+  const rect = node.getBoundingClientRect();
+  if (rect.width === 0 && rect.height === 0) {
+    node.classList.remove("window-minimizing");
+    return;
+  }
+  const dx = slot.x - (rect.left + rect.width / 2);
+  const dy = slot.y - (rect.top + rect.height / 2);
+  let done = false;
+  const finish = () => {
+    if (done) {
+      return;
+    }
+    done = true;
+    node.classList.remove("window-minimizing");
+    node.style.transform = "";
+    node.style.opacity = "";
+  };
+  window.requestAnimationFrame(() => {
+    node.style.transform = `translate(${dx.toFixed(1)}px, ${dy.toFixed(1)}px) scale(0.05)`;
+    node.style.opacity = "0";
+  });
+  node.addEventListener("transitionend", finish, { once: true });
+  window.setTimeout(finish, WINDOW_MINIMIZE_FALLBACK_MS);
+}
+
+function clearWindowMinimizeMotion(node) {
+  node.classList.remove("window-minimizing");
+  node.style.transform = "";
+  node.style.opacity = "";
 }
 
 function currentWindowBounds(node) {
@@ -431,8 +557,10 @@ function restoreWindow(id) {
   }
   entry.node.classList.remove("hidden");
   entry.node.setAttribute("aria-hidden", "false");
+  clearWindowMinimizeMotion(entry.node);
+  playWindowEnter(entry.node);
   armWindowControlGuard(entry.node);
-  focusWindow(id);
+  focusWindow(id, { moveFocus: true });
   persistBrowserSession();
   return true;
 }
@@ -445,11 +573,12 @@ export function showAllTargetWindows(targetId) {
   for (const entry of entries) {
     entry.node.classList.remove("hidden");
     entry.node.setAttribute("aria-hidden", "false");
+    clearWindowMinimizeMotion(entry.node);
     armWindowControlGuard(entry.node);
   }
   const top = topBrowserWindowEntryForTarget(targetId);
   if (top) {
-    focusWindow(top.id);
+    focusWindow(top.id, { moveFocus: true });
   } else {
     refreshWindowUi();
     persistBrowserSession();
@@ -466,6 +595,7 @@ function hideWindowEntries(entries) {
     entry.node.classList.add("hidden");
     entry.node.classList.remove("window-active");
     entry.node.setAttribute("aria-hidden", "true");
+    playWindowMinimize(entry);
   }
   if (hidActiveWindow) {
     shellState.activeWindowId = null;
@@ -489,7 +619,7 @@ function removeWindowEntries(entries) {
     cleanupFrameAutoFit(entry.node);
     cleanupPeopleDiscoveryAutoRefresh(entry.node);
     shellState.windows.delete(entry.id);
-    entry.node.remove();
+    retireWindowNode(entry.node);
   }
   renderWindowTaskbar();
   if (removedActiveWindow) {
@@ -505,7 +635,7 @@ function removeWindowEntries(entries) {
 function activateTargetGroup(targetId) {
   const visibleTop = topBrowserWindowEntryForTarget(targetId, { includeHidden: false });
   if (visibleTop) {
-    focusWindow(visibleTop.id);
+    focusWindow(visibleTop.id, { moveFocus: true });
     return true;
   }
   const restoreTarget = topBrowserWindowEntryForTarget(targetId);
@@ -531,6 +661,7 @@ function renderSystemErrorWindow({
   subjectLabel,
   subjectValue,
   detail,
+  onRetry,
 }) {
   let entry = shellState.windows.get(id);
   if (!entry) {
@@ -564,8 +695,22 @@ function renderSystemErrorWindow({
   errorNode.querySelector(".window-error-subject-label").textContent = subjectLabel;
   errorNode.querySelector(".window-error-subject-value").textContent = subjectValue;
   errorNode.querySelector(".window-error-detail").textContent = detail;
+  // Error grammar: what happened (headline), why (copy), what you can do
+  // (actions), technical facts last. Retry appears only when the caller can
+  // honestly offer one.
+  const actions = errorNode.querySelector(".window-error-actions");
+  const retryButton = errorNode.querySelector(".window-error-retry");
+  if (actions && retryButton && typeof onRetry === "function") {
+    actions.hidden = false;
+    retryButton.addEventListener("click", () => {
+      closeWindow(id);
+      onRetry();
+    });
+  }
   body.appendChild(errorNode);
   focusWindow(id);
+  // The refusal moment — the one place the optional error sound belongs.
+  playUiSound("error");
 }
 
 function renderTargetLaunchError(targetId, error) {
@@ -574,10 +719,11 @@ function renderTargetLaunchError(targetId, error) {
     id: "shell-launch-error",
     title,
     headline: `Could not open ${title}`,
-    copy: "Home asked the runtime to open this item, but the launch did not complete.",
+    copy: "Home asked the runtime to open this item, but the launch did not complete. It may be momentary — trying again is safe.",
     subjectLabel: "Item ID",
     subjectValue: targetId,
     detail: String(error.message || error),
+    onRetry: () => openTarget(targetId),
   });
 }
 
@@ -590,6 +736,7 @@ function createWindow({ id, title, x, y, width, height, tone, glyphTarget }) {
   node.dataset.snap = "";
   node.setAttribute("aria-label", title);
   node.setAttribute("aria-hidden", "false");
+  playWindowEnter(node);
   armWindowControlGuard(node);
   node.style.left = `${bounds.x}px`;
   node.style.top = `${bounds.y}px`;
@@ -623,7 +770,11 @@ function createWindow({ id, title, x, y, width, height, tone, glyphTarget }) {
   });
 
   const handle = node.querySelector(".window-head");
-  handle.addEventListener("dblclick", () => {
+  handle.addEventListener("dblclick", (event) => {
+    // Double-clicking the traffic lights is two button presses, not a zoom.
+    if (event.target.closest("button")) {
+      return;
+    }
     toggleWindowMaximize(id);
   });
   attachWindowDrag(node, handle, focusWindow, persistBrowserSession);
@@ -663,6 +814,9 @@ function launchActionKey(targetId, query) {
 }
 
 export function openTarget(targetId, options = {}) {
+  if (targetId === "wallet") {
+    windowHooks?.retireWalletRailBeforeWindow?.();
+  }
   if (SINGLE_SESSION_TARGETS.has(targetId) && browserWindowCount(targetId) > 0) {
     activateTargetGroup(targetId);
     return;
@@ -782,6 +936,14 @@ function renderPeopleWindowBody(entry, summary) {
   body.classList.remove("window-body-frame");
   body.classList.add("home-people-body");
   const profileMarkup = peopleProfileMarkup(identity);
+  // List/detail anatomy: the selection survives summary refreshes on the
+  // window node; a vanished contact falls back to the first one.
+  const requestedId = normalizePeopleText(entry.node.dataset.peopleSelectedContact, "");
+  const selectedContact = contacts.find(
+    (contact) => normalizePeopleText(contact?.contact_id, "") === requestedId,
+  ) || contacts[0] || null;
+  const selectedId = normalizePeopleText(selectedContact?.contact_id, "");
+  entry.node.dataset.peopleSelectedContact = selectedId;
   const peopleMarkup = contacts.length === 0
     ? `
       <div class="home-people-empty">
@@ -789,7 +951,16 @@ function renderPeopleWindowBody(entry, summary) {
         <p>Turn on Discovery to find another ElastOS home and send a request.</p>
       </div>
     `
-    : contacts.map(peopleListCardMarkup).join("");
+    : `
+      <div class="home-people-split">
+        <div class="home-people-roster" role="listbox" aria-label="People">
+          ${contacts.map((contact) => peopleRosterRowMarkup(contact, selectedId)).join("")}
+        </div>
+        <div class="home-people-detail">
+          ${peopleContactDetailMarkup(selectedContact)}
+        </div>
+      </div>
+    `;
   body.innerHTML = `
     <section class="home-people-shell" aria-label="People">
       <aside class="home-people-sidebar" aria-label="People sections">
@@ -807,7 +978,7 @@ function renderPeopleWindowBody(entry, summary) {
         <div class="home-people-content">
           <section class="home-people-section" data-people-section="people" aria-label="People">
             ${profileMarkup}
-            <div class="home-people-list">${peopleMarkup}</div>
+            ${peopleMarkup}
           </section>
           <section class="home-people-section" data-people-section="discovery" aria-label="Discovery">
             ${peopleDiscoveryMarkup(discovery, discoveredPeers, discoveryRequests)}
@@ -816,7 +987,7 @@ function renderPeopleWindowBody(entry, summary) {
       </main>
     </section>
   `;
-  bindPeopleWindowActions(body);
+  bindPeopleWindowActions(body, entry, summary);
   schedulePeopleDiscoveryAutoRefresh(body, discovery);
 }
 
@@ -929,41 +1100,123 @@ function peopleDiscoveryRequestMarkup(request) {
   `;
 }
 
-function peopleListCardMarkup(contact) {
+function peopleRosterRowMarkup(contact, selectedId) {
+  const rawDisplayName = peopleDisplayName(contact, "Person");
+  const displayName = escapeHtml(rawDisplayName);
+  const relationship = escapeHtml(normalizePeopleText(contact?.relationship, "connected"));
+  const contactId = normalizePeopleText(contact?.contact_id, "");
+  const selected = contactId && contactId === selectedId;
+  return `
+    <button class="home-people-row${selected ? " active" : ""}" type="button" role="option"
+      aria-selected="${selected ? "true" : "false"}" data-people-select="${escapeHtml(contactId)}">
+      <span class="home-people-avatar" aria-hidden="true">${escapeHtml(rawDisplayName.slice(0, 1).toUpperCase() || "E")}</span>
+      <span class="home-people-row-copy">
+        <span class="home-people-row-name">${displayName}</span>
+        <span class="home-people-row-sub">${relationship}</span>
+      </span>
+    </button>
+  `;
+}
+
+function peopleContactDetailMarkup(contact) {
+  if (!contact) {
+    return `
+      <div class="home-people-empty">
+        <h3>Select a person</h3>
+        <p>Choose someone from the list to see their details.</p>
+      </div>
+    `;
+  }
   const rawDisplayName = peopleDisplayName(contact, "Person");
   const displayName = escapeHtml(rawDisplayName);
   const relationship = escapeHtml(normalizePeopleText(contact?.relationship, "connected"));
   const handle = normalizePeopleText(contact?.handle, "");
   const device = normalizePeopleText(contact?.device_label, "");
-  const handleLine = handle && handle !== rawDisplayName ? `<span>${escapeHtml(handle)}</span>` : "";
-  const deviceLine = device && device !== rawDisplayName ? `<span>${escapeHtml(device)}</span>` : "";
   const contactId = escapeHtml(normalizePeopleText(contact?.contact_id, ""));
   const route = normalizePeopleText(contact?.route, "");
   const chatAction = contact?.can_message === true && route
     ? `<button class="home-people-action" type="button" data-people-action="chat" data-contact-route="${escapeHtml(route)}">Chat</button>`
     : "";
+  const detailRows = [
+    handle && handle !== rawDisplayName
+      ? `<div class="home-people-detail-row"><span class="home-people-detail-label">Handle</span><span class="home-people-detail-value">${escapeHtml(handle)}</span></div>`
+      : "",
+    device && device !== rawDisplayName
+      ? `<div class="home-people-detail-row"><span class="home-people-detail-label">Device</span><span class="home-people-detail-value">${escapeHtml(device)}</span></div>`
+      : "",
+    route
+      ? `<div class="home-people-detail-row"><span class="home-people-detail-label">Route</span><span class="home-people-detail-value home-people-detail-mono">${escapeHtml(route)}</span></div>`
+      : "",
+  ].filter(Boolean).join("");
   return `
-    <article class="home-people-card">
-      <div class="home-people-avatar" aria-hidden="true">${escapeHtml(rawDisplayName.slice(0, 1).toUpperCase() || "E")}</div>
-      <div class="home-people-card-copy">
-        <h3>${displayName}</h3>
-        <p><span>${relationship}</span>${handleLine}${deviceLine}</p>
+    <div class="home-people-detail-card">
+      <div class="home-people-detail-head">
+        <div class="home-people-avatar home-people-detail-avatar" aria-hidden="true">${escapeHtml(rawDisplayName.slice(0, 1).toUpperCase() || "E")}</div>
+        <div class="home-people-detail-copy">
+          <h3>${displayName}</h3>
+          <p>${relationship}</p>
+        </div>
       </div>
-      <div class="home-people-card-actions">
+      ${detailRows ? `<div class="home-people-detail-rows">${detailRows}</div>` : ""}
+      <div class="home-people-detail-actions">
         ${chatAction}
         <button class="home-people-action home-people-action-danger" type="button" data-people-action="remove" data-contact-id="${contactId}">Remove</button>
       </div>
-    </article>
+    </div>
   `;
 }
 
-function bindPeopleWindowActions(body) {
+function bindPeopleWindowActions(body, entry, summary) {
   body.querySelector("[data-people-profile-form]")?.addEventListener("submit", (event) => {
     event.preventDefault();
     savePeopleProfile(body, event.currentTarget).catch((error) => {
       setPeopleStatus(body, error.message || "Could not save profile.", "error");
     });
   });
+  // Roster selection: click or arrow keys move the selection; the detail pane
+  // follows via a re-render of the same summary.
+  const selectContact = (contactId, focusRow) => {
+    if (!entry || !contactId) {
+      return;
+    }
+    entry.node.dataset.peopleSelectedContact = contactId;
+    renderPeopleWindowBody(entry, summary);
+    if (focusRow) {
+      entry.node
+        .querySelector(`[data-people-select="${CSS.escape(contactId)}"]`)
+        ?.focus();
+    }
+  };
+  for (const row of body.querySelectorAll("[data-people-select]")) {
+    row.addEventListener("click", (event) => {
+      selectContact(event.currentTarget?.dataset?.peopleSelect || "", false);
+    });
+  }
+  body.querySelector(".home-people-roster")?.addEventListener("keydown", (event) => {
+    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+      return;
+    }
+    const rows = [...body.querySelectorAll("[data-people-select]")];
+    if (!rows.length) {
+      return;
+    }
+    const index = rows.findIndex((row) => row.classList.contains("active"));
+    let next = index;
+    if (event.key === "ArrowDown") {
+      next = Math.min(rows.length - 1, index + 1);
+    } else if (event.key === "ArrowUp") {
+      next = Math.max(0, index - 1);
+    } else if (event.key === "Home") {
+      next = 0;
+    } else {
+      next = rows.length - 1;
+    }
+    if (next === index) {
+      return;
+    }
+    event.preventDefault();
+    selectContact(rows[next].dataset.peopleSelect || "", true);
+  });
   for (const button of body.querySelectorAll("[data-people-jump]")) {
     button.addEventListener("click", (event) => {
       const sectionId = event.currentTarget?.dataset?.peopleJump || "";
@@ -1293,22 +1546,52 @@ async function removePersonFromPeople(body, button) {
   if (!contactId) {
     throw new Error("Person id is missing.");
   }
-  const card = button.closest(".home-people-card");
-  const label = card?.querySelector(".home-people-card-copy h3")?.textContent?.trim() || "this person";
-  if (!window.confirm(`Remove ${label} from People?`)) {
+  const card = button.closest(".home-people-detail-card, .home-people-card");
+  const label = card?.querySelector("h3")?.textContent?.trim() || "this person";
+  if (!card || card.querySelector(".home-people-confirm")) {
     return;
   }
-  setPeopleBusy(button, true);
-  try {
-    await fetchJson("/api/apps/people/contacts/remove", {
-      method: "POST",
-      body: JSON.stringify({ contact_id: contactId }),
-    });
-    setPeopleStatus(body, "Removed from People.", "ok");
-    await shellState.requestSummaryRefresh?.();
-  } finally {
-    setPeopleBusy(button, false);
-  }
+  // In-card confirm strip instead of a browser-native confirm dialog.
+  const strip = document.createElement("div");
+  strip.className = "home-people-confirm";
+  strip.setAttribute("role", "alertdialog");
+  strip.setAttribute("aria-label", `Remove ${label} from People?`);
+  const copy = document.createElement("p");
+  copy.textContent = `Remove ${label} from People?`;
+  const actions = document.createElement("div");
+  actions.className = "home-people-confirm-actions";
+  const commit = document.createElement("button");
+  commit.type = "button";
+  commit.className = "home-people-action home-people-action-danger";
+  commit.textContent = "Remove";
+  const cancel = document.createElement("button");
+  cancel.type = "button";
+  cancel.className = "home-people-action";
+  cancel.textContent = "Cancel";
+  actions.append(commit, cancel);
+  strip.append(copy, actions);
+  card.appendChild(strip);
+  cancel.addEventListener("click", () => {
+    strip.remove();
+    button.focus();
+  });
+  commit.addEventListener("click", async () => {
+    strip.remove();
+    setPeopleBusy(button, true);
+    try {
+      await fetchJson("/api/apps/people/contacts/remove", {
+        method: "POST",
+        body: JSON.stringify({ contact_id: contactId }),
+      });
+      setPeopleStatus(body, "Removed from People.", "ok");
+      await shellState.requestSummaryRefresh?.();
+    } catch (error) {
+      setPeopleStatus(body, String(error?.message || error), "error");
+    } finally {
+      setPeopleBusy(button, false);
+    }
+  });
+  cancel.focus();
 }
 
 function openPersonChat(body, button) {
@@ -1499,6 +1782,11 @@ function launchDidFail(launched) {
   );
 }
 
+// Reveal budget for a navigating iframe: fade in on load, but never stay
+// invisible longer than this — a slow capsule paints over the dark frame
+// default instead of a white flash.
+const FRAME_REVEAL_FAILSAFE_MS = 300;
+
 function syncBrowserWindow(entry, launched) {
   const node = entry.node;
   const frame = node.querySelector(".window-frame");
@@ -1507,6 +1795,7 @@ function syncBrowserWindow(entry, launched) {
   cleanupFrameAutoFit(node);
 
   const syncLoadedFrame = () => {
+    frame.classList.add("is-ready");
     if (entry.targetId !== "browser") {
       installFrameAutoFit(node, frame);
     }
@@ -1517,6 +1806,9 @@ function syncBrowserWindow(entry, launched) {
   if (frame.dataset.route !== launched.route) {
     frame.src = launched.route;
     frame.dataset.route = launched.route;
+    window.setTimeout(() => {
+      frame.classList.add("is-ready");
+    }, FRAME_REVEAL_FAILSAFE_MS);
     return;
   }
   syncLoadedFrame();
@@ -1758,7 +2050,7 @@ function fitWindowToFrame(node, frame) {
   }
 }
 
-export function focusWindow(id) {
+export function focusWindow(id, { moveFocus = false } = {}) {
   const entry = shellState.windows.get(id);
   if (!entry) {
     return;
@@ -1771,6 +2063,7 @@ export function focusWindow(id) {
   entry.node.classList.remove("hidden");
   entry.node.classList.add("window-active");
   entry.node.setAttribute("aria-hidden", "false");
+  clearWindowMinimizeMotion(entry.node);
   shellState.zIndexCounter += 1;
   entry.node.style.zIndex = String(shellState.zIndexCounter);
   shellState.activeWindowId = id;
@@ -1780,6 +2073,21 @@ export function focusWindow(id) {
   }
   refreshWindowUi();
   persistBrowserSession();
+  // Keyboard activation (taskbar, window menus) must move real DOM focus to
+  // the window; pointer clicks keep the browser's natural focus placement.
+  if (moveFocus) {
+    entry.node.focus({ preventScroll: true });
+  }
+}
+
+function syncMaximizeButtonLabel(node) {
+  const button = node.querySelector('[data-action="maximize"]');
+  if (!button) {
+    return;
+  }
+  const maximized =
+    node.dataset.maximized === "true" || node.dataset.browserMaximized === "true";
+  button.setAttribute("aria-label", maximized ? "Restore" : "Maximize");
 }
 
 function toggleWindowMaximize(id) {
@@ -1795,6 +2103,7 @@ function toggleWindowMaximize(id) {
   ) {
     restoreWindowFromSpecialState(node);
     fitLaunchedWindow(entry);
+    syncMaximizeButtonLabel(node);
     focusWindow(id);
     persistBrowserSession();
     return;
@@ -1805,12 +2114,14 @@ function toggleWindowMaximize(id) {
     node.dataset.maximized = "false";
     node.dataset.browserMaximized = "true";
     fitWindowToLargestBrowserAspect(node);
+    syncMaximizeButtonLabel(node);
     focusWindow(id);
     persistBrowserSession();
     return;
   }
   node.dataset.browserMaximized = "false";
   node.dataset.maximized = "true";
+  syncMaximizeButtonLabel(node);
   focusWindow(id);
   persistBrowserSession();
 }
diff --git a/capsules/home-gui/browser/style.css b/capsules/home-gui/browser/style.css
index 59e115fb3..53dfab947 100644
--- a/capsules/home-gui/browser/style.css
+++ b/capsules/home-gui/browser/style.css
@@ -1,15 +1,88 @@
+/* Inter's @font-face lives in the vendored token sheet (elastos-ui.css),
+   loaded before this file. */
+
 :root {
+  color-scheme: dark;
+  --bg: #050608;
+  --panel: rgba(22, 24, 29, 0.78);
+  --panel-strong: rgba(22, 24, 29, 0.92);
+  --panel-soft: rgba(255, 255, 255, 0.06);
+  --line: rgba(255, 255, 255, 0.12);
+  --line-strong: rgba(255, 255, 255, 0.2);
+  --text: #f5f7fa;
+  --muted: rgba(245, 247, 250, 0.7);
+  --soft: rgba(245, 247, 250, 0.48);
+  --brand: #f6921a;
+  --brand-strong: #ffb457;
+  --brand-focus: rgba(246, 146, 26, 0.55);
+  --brand-border: rgba(246, 146, 26, 0.72);
+  --brand-ring: rgba(246, 146, 26, 0.24);
+  --brand-glow: rgba(246, 146, 26, 0.26);
+  --brand-line: rgba(246, 146, 26, 0.45);
+  --shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
+  --shadow-soft: 0 12px 28px rgba(0, 0, 0, 0.22);
   --window-head-hue: 214;
   --window-head-saturation: 7%;
   --window-head-lightness: 40%;
   --window-head-alpha: 0.58;
-  --toolbar-h: 30px;
+  --toolbar-h: 36px;
   --toolbar-offset: 14px;
-  --taskbar-h: 50px;
+  --chrome-fill: hsla(220, 10%, 12%, 0.72);
+  --dock-fill: hsla(216, 8%, 18%, 0.78);
+  --hairline: rgba(255, 255, 255, 0.14);
+  /* Stage contract: windows (incl. maximize/snap) live between the system bar
+     and the dock clearance — system chrome is never covered. */
+  --stage-top: calc(var(--toolbar-h) + env(safe-area-inset-top, 0px));
+  --stage-bottom: calc(var(--taskbar-h) + var(--taskbar-offset) + 10px + env(safe-area-inset-bottom, 0px));
+  --taskbar-h: 60px;
   --taskbar-offset: 12px;
   --desktop-wallpaper: url("./wallpaper.webp");
 }
 
+/* Light theme (data-el-theme="light" on <html>, set by the vendored
+   elastos-theme.js from localStorage). Chrome follows PC2's light look:
+   frosted pale bars, navy ink, same brand orange. Desktop icon labels stay
+   white over the wallpaper (as macOS does) — see the explicit rule below. */
+:root[data-el-theme="light"] {
+  color-scheme: light;
+  --bg: #e8ecf3;
+  --panel: rgba(255, 255, 255, 0.82);
+  --panel-strong: rgba(255, 255, 255, 0.96);
+  --panel-soft: rgba(29, 36, 56, 0.06);
+  --line: rgba(29, 36, 56, 0.14);
+  --line-strong: rgba(29, 36, 56, 0.26);
+  --text: #1d2438;
+  --muted: rgba(29, 36, 56, 0.72);
+  --soft: rgba(29, 36, 56, 0.5);
+  --brand-strong: #e07f0a;
+  --shadow: 0 24px 80px rgba(34, 49, 88, 0.2);
+  --shadow-soft: 0 12px 28px rgba(34, 49, 88, 0.14);
+  --window-head-saturation: 16%;
+  --window-head-lightness: 88%;
+  --chrome-fill: rgba(231, 238, 245, 0.78);
+  --dock-fill: rgba(231, 238, 245, 0.8);
+  --hairline: rgba(29, 36, 56, 0.16);
+  --frame-fill: #eef1f6;
+  --menu-fill: rgba(248, 250, 253, 0.97);
+  --overlay-dim: rgba(233, 238, 246, 0.5);
+}
+
+:root {
+  --frame-fill: #0b0d10;
+  --menu-fill: rgba(22, 24, 29, 0.96);
+  --overlay-dim: rgba(6, 7, 10, 0.55);
+  --lift: rgba(255, 255, 255, 0.08);
+  --lift-strong: rgba(255, 255, 255, 0.15);
+}
+
+:root[data-el-theme="light"] {
+  --lift: rgba(29, 36, 56, 0.08);
+  --lift-strong: rgba(29, 36, 56, 0.14);
+}
+
+/* Base resets (*, html/body, button, img, .visually-hidden, .hide-scrollbar)
+   live in the host document's stylesheet — this sheet is injected into the
+   host document by shell-core.ensureHomeGuiDom() and only owns GUI surfaces. */
 
 .desktop-backdrop {
   position: fixed;
@@ -35,31 +108,41 @@
   opacity: var(--desktop-overlay-opacity, 0.55);
 }
 
+/* Full-width system bar: a hard horizontal datum (top:0, edge to edge, no radius).
+   Left: brand + focused-window title. Right: status cluster + clock at the trailing
+   edge. Chrome, not a widget — content never reflows the bar's geometry. */
 .toolbar {
   position: fixed;
-  top: env(safe-area-inset-top, 0);
-  left: 50%;
-  right: auto;
-  transform: translateX(-50%);
-  z-index: 100000;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100100;
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: flex-start;
   gap: 0;
-  width: max-content;
-  min-height: var(--toolbar-h);
-  padding: 0 10px 0 0;
-  max-width: calc(100vw - 24px);
-  background-color: rgba(0, 0, 0, 0.25);
-  border-bottom-left-radius: 10px;
-  border-bottom-right-radius: 10px;
+  height: calc(var(--toolbar-h) + env(safe-area-inset-top, 0px));
+  padding: env(safe-area-inset-top, 0px) 12px 0;
+  background-color: var(--chrome-fill);
   box-shadow:
-    inset 0 0 0 0.5px rgba(255, 255, 255, 0.14),
-    0 0 0 0.5px rgba(0, 0, 0, 0.2),
-    0 2px 14px rgba(0, 0, 0, 0.2);
-  overflow: clip;
+    inset 0 -0.5px 0 var(--hairline),
+    0 1px 12px rgba(0, 0, 0, 0.18);
   backdrop-filter: blur(10px);
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.toolbar-active-title {
+  min-width: 0;
+  max-width: 40vw;
+  margin-left: 12px;
+  overflow: hidden;
+  color: var(--muted);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: var(--toolbar-h);
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .toolbar-spacer {
@@ -74,96 +157,984 @@
   padding: 3px;
   display: flex;
   align-items: center;
-  justify-content: center;
-  border-radius: 3px;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: contain;
-  background-origin: content-box;
-  opacity: 0.8;
-  cursor: pointer;
-  transition: opacity 0.18s ease, background-color 0.18s ease;
+  justify-content: center;
+  border-radius: 3px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  background-origin: content-box;
+  opacity: 0.8;
+  cursor: pointer;
+  transition: opacity 0.18s ease, background-color 0.18s ease;
+}
+
+.toolbar-btn:hover:not(.toolbar-brand),
+.toolbar-btn:focus-visible:not(.toolbar-brand) {
+  opacity: 1;
+  background-color: var(--lift-strong);
+}
+
+.toolbar-btn:focus-visible {
+  outline: 2px solid var(--brand-focus);
+  outline-offset: 1px;
+}
+
+.toolbar-btn:disabled {
+  cursor: default;
+  opacity: 0.32;
+}
+
+.toolbar-brand {
+  width: 107px;
+  margin-left: 0;
+  opacity: 1;
+}
+
+.toolbar-brand img {
+  width: 107px;
+  height: 17px;
+}
+
+/* The wordmark's lettering is white; on the light bar swap to the ink
+   variant (same glyph colors, navy lettering) — PC2 keeps brand color as-is
+   and never blanket-inverts the logo. */
+:root[data-el-theme="light"] .toolbar-brand img {
+  content: url("./elastos-logo-ink.svg");
+}
+
+/* System menu: the ElastOS brand at the far left is the menu trigger (the
+   macOS Apple-menu position). Account/system actions (show desktop,
+   fullscreen, System, sign out) live inside — never as naked bar buttons at
+   the same visual weight as the clock. */
+.toolbar-system {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.toolbar-system .toolbar-brand {
+  border-radius: 7px;
+  transition: background-color 0.18s ease;
+}
+
+.toolbar-system .toolbar-brand:hover,
+.toolbar-system .toolbar-brand[aria-expanded="true"] {
+  background-color: var(--lift-strong);
+}
+
+.toolbar-identity-menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  z-index: 100120;
+  min-width: 210px;
+  padding: 5px;
+  display: grid;
+  gap: 2px;
+  border-radius: 12px;
+  background: var(--menu-fill);
+  border: 1px solid var(--line);
+  box-shadow: var(--shadow-soft);
+  backdrop-filter: blur(16px);
+  transform-origin: top left;
+  animation: bar-menu-enter 140ms cubic-bezier(0.2, 0, 0, 1) both;
+}
+
+.toolbar-identity-menu[hidden] {
+  display: none;
+}
+
+@keyframes bar-menu-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .toolbar-identity-menu {
+    animation: none;
+  }
+}
+
+.toolbar-identity-header {
+  padding: 7px 10px 6px;
+  color: var(--soft);
+  font-size: 12px;
+  line-height: 1.35;
+}
+
+.toolbar-identity-header strong {
+  color: var(--muted);
+  font-weight: 600;
+}
+
+.toolbar-identity-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 32px;
+  padding: 0 10px;
+  border-radius: 8px;
+  color: var(--text);
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+}
+
+/* Right-aligned shortcut glyph inside a menu item (macOS menu grammar). */
+.toolbar-identity-shortcut {
+  margin-left: auto;
+  padding-left: 18px;
+  color: var(--muted);
+  font-size: 12px;
+  letter-spacing: 0.06em;
+}
+
+.toolbar-identity-item:hover,
+.toolbar-identity-item:focus-visible {
+  background: var(--lift);
+  outline: none;
+}
+
+.toolbar-identity-item:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--brand-focus);
+}
+
+.toolbar-identity-item[hidden] {
+  display: none;
+}
+
+.toolbar-identity-divider {
+  height: 1px;
+  margin: 3px 6px;
+  background: var(--panel-soft);
+}
+
+/* App menu bar (macOS anatomy): the focused app's File/Edit/View titles sit
+   right after its name. Titles are quiet bar text; the open one gets the same
+   lift as any bar control, and popovers share the frosted menu material. */
+.toolbar-menubar {
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+  margin-left: 4px;
+  height: 100%;
+}
+
+.toolbar-menu {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.toolbar-menu-title {
+  padding: 0 9px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--text);
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 22px;
+  white-space: nowrap;
+  opacity: 0.85;
+  cursor: default;
+}
+
+.toolbar-menu-title:hover,
+.toolbar-menu-title[aria-expanded="true"] {
+  background: var(--lift);
+  opacity: 1;
+}
+
+.toolbar-menu-title:focus-visible {
+  outline: 2px solid var(--brand-focus);
+  outline-offset: -2px;
+  opacity: 1;
+}
+
+.toolbar-menu-popover {
+  position: absolute;
+  top: calc(100% - 3px);
+  left: 0;
+  z-index: 100120;
+  min-width: 190px;
+  padding: 5px;
+  display: grid;
+  gap: 2px;
+  border-radius: 12px;
+  background: var(--menu-fill);
+  border: 1px solid var(--line);
+  box-shadow: var(--shadow-soft);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+.toolbar-menu-popover[hidden] {
+  display: none;
+}
+
+.toolbar-menu-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 30px;
+  padding: 0 10px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text);
+  font-family: inherit;
+  font-size: 13px;
+  text-align: left;
+  white-space: nowrap;
+  cursor: default;
+}
+
+.toolbar-menu-item:hover:not(:disabled),
+.toolbar-menu-item:focus-visible {
+  background: var(--lift);
+  outline: none;
+}
+
+.toolbar-menu-item:disabled {
+  color: var(--soft);
+}
+
+.toolbar-menu-divider {
+  height: 1px;
+  margin: 3px 6px;
+  background: var(--panel-soft);
+}
+
+/* White stroke glyph; light theme inverts the button (PC2's approach) and
+   counter-inverts the numeric badge so it keeps its own colors. */
+:root[data-el-theme="light"] .inbox-btn {
+  filter: invert(1) hue-rotate(180deg);
+}
+
+/* Spotlight magnifier: the discoverable mouse path to Cmd+Space. */
+.spotlight-btn {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.2'/%3E%3Cpath d='m15.4 15.4 4.6 4.6'/%3E%3C/svg%3E");
+}
+
+:root[data-el-theme="light"] .spotlight-btn {
+  filter: invert(1) hue-rotate(180deg);
+}
+
+:root[data-el-theme="light"] .toolbar-inbox-count {
+  filter: invert(1) hue-rotate(180deg);
+}
+
+.inbox-btn {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 8.5a5.5 5.5 0 1 1 11 0c0 5.5 2.5 6.5 2.5 6.5H4s2.5-1 2.5-6.5'/%3E%3Cpath d='M10 18a2 2 0 0 0 4 0'/%3E%3C/svg%3E");
+}
+
+.toolbar-inbox-count {
+  position: absolute;
+  top: -3px;
+  right: -4px;
+  min-width: 14px;
+  height: 14px;
+  padding: 0 3px;
+  display: grid;
+  place-items: center;
+  border-radius: 999px;
+  background: var(--brand);
+  color: #111;
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.34);
+}
+
+.toolbar-inbox-count[hidden] {
+  display: none;
+}
+
+/* The clock is a button (macOS: the clock opens Notification Center), but it
+   must still read as plain bar text — no chrome until hover. */
+.toolbar-clock {
+  margin-left: 10px;
+  margin-right: 0;
+  padding: 0 6px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--text);
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 22px;
+  white-space: nowrap;
+  opacity: 0.9;
+  font-variant-numeric: tabular-nums;
+  cursor: default;
+}
+
+.toolbar-clock:hover,
+.toolbar-clock[aria-expanded="true"] {
+  background: var(--lift);
+  opacity: 1;
+}
+
+/* Notification Center: the memory behind the toast. Slides in under the bar
+   at the right edge, same frosted material as the other bar menus. */
+.notification-center {
+  position: fixed;
+  top: calc(var(--stage-top) + 8px);
+  right: 8px;
+  z-index: 100120;
+  display: flex;
+  flex-direction: column;
+  width: min(340px, calc(100vw - 16px));
+  max-height: calc(100dvh - var(--stage-top) - var(--stage-bottom) - 24px);
+  padding: 10px;
+  border-radius: 14px;
+  background: var(--menu-fill);
+  border: 1px solid var(--line);
+  box-shadow: var(--shadow-soft);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  outline: none;
+  animation: notification-center-enter 140ms cubic-bezier(0.2, 0, 0, 1) both;
+}
+
+.notification-center[hidden] {
+  display: none;
+}
+
+@keyframes notification-center-enter {
+  from {
+    opacity: 0;
+    transform: translateX(12px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .notification-center {
+    animation: none;
+  }
+}
+
+/* Control Centre: quick projections of state that lives elsewhere (theme,
+   sounds, fullscreen, wallet). Same frosted popover material as the
+   notification center; the deep versions stay in the System app. */
+.control-centre-btn {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='6' rx='3'/%3E%3Ccircle cx='6.5' cy='8' r='1.4' fill='white' stroke='none'/%3E%3Crect x='3' y='13' width='18' height='6' rx='3'/%3E%3Ccircle cx='17.5' cy='16' r='1.4' fill='white' stroke='none'/%3E%3C/svg%3E");
+}
+
+:root[data-el-theme="light"] .control-centre-btn {
+  filter: invert(1) hue-rotate(180deg);
+}
+
+/* Wallet: first-class bar entry; the glyph appears only when the home
+   carries a wallet target. */
+.wallet-btn {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.5A2.5 2.5 0 0 1 6.5 5h10A2.5 2.5 0 0 1 19 7.5V9'/%3E%3Cpath d='M4 7.5V16a3 3 0 0 0 3 3h11a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2H4'/%3E%3Ccircle cx='16.4' cy='14' r='1.15' fill='white' stroke='none'/%3E%3C/svg%3E");
+}
+
+:root[data-el-theme="light"] .wallet-btn {
+  filter: invert(1) hue-rotate(180deg);
+}
+
+.toolbar-wallet-count {
+  position: absolute;
+  top: -3px;
+  right: -4px;
+  min-width: 14px;
+  height: 14px;
+  padding: 0 3px;
+  display: grid;
+  place-items: center;
+  border-radius: 999px;
+  background: var(--brand);
+  color: #111;
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.34);
+}
+
+.toolbar-wallet-count[hidden] {
+  display: none;
+}
+
+.control-centre {
+  position: fixed;
+  top: calc(var(--stage-top) + 8px);
+  right: 8px;
+  z-index: 100120;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: min(300px, calc(100vw - 16px));
+  padding: 12px;
+  border-radius: 14px;
+  background: var(--menu-fill);
+  border: 1px solid var(--line);
+  box-shadow: var(--shadow-soft);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  outline: none;
+  animation: notification-center-enter 140ms cubic-bezier(0.2, 0, 0, 1) both;
+}
+
+.control-centre[hidden] {
+  display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .control-centre {
+    animation: none;
+  }
+}
+
+.control-centre-label {
+  padding: 0 4px 6px;
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.control-centre-segment {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 2px;
+  padding: 2px;
+  border-radius: 9px;
+  background: var(--lift);
+}
+
+/* The selection is one physical thumb that slides between options (iOS
+   segmented-control grammar) — state moves through space, it does not
+   teleport. Driven by --segment-index from the controller. */
+.control-centre-segment-thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: calc((100% - 8px) / 3);
+  height: calc(100% - 4px);
+  border-radius: 7px;
+  background: var(--panel);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
+  transform: translateX(calc(var(--segment-index, 0) * (100% + 2px)));
+  transition: transform 240ms cubic-bezier(0.3, 0.85, 0.25, 1);
+  pointer-events: none;
+}
+
+.control-centre-segment-option {
+  position: relative;
+  z-index: 1;
+  padding: 6px 0;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--muted);
+  font-family: inherit;
+  font-size: 12.5px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: color 160ms ease;
+}
+
+.control-centre-segment-option:hover {
+  color: var(--text);
+}
+
+.control-centre-segment-option.active {
+  color: var(--text);
+  font-weight: 600;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .control-centre-segment-thumb,
+  .control-centre-segment-option {
+    transition: none;
+  }
+}
+
+.control-centre-divider {
+  height: 1px;
+  margin: 6px 2px;
+  background: var(--line);
+}
+
+.control-centre-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 9px 10px;
+  border: 0;
+  border-radius: 9px;
+  background: transparent;
+  color: var(--text);
+  font-family: inherit;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.control-centre-row:hover {
+  background: var(--lift);
+}
+
+.control-centre-row[hidden] {
+  display: none;
+}
+
+.control-centre-row-detail {
+  color: var(--muted);
+  font-size: 12.5px;
+}
+
+/* iOS-grammar switch, pure CSS, driven by aria-checked. */
+.control-centre-switch {
+  flex: 0 0 auto;
+  position: relative;
+  width: 36px;
+  height: 22px;
+  border-radius: 999px;
+  background: var(--lift);
+  transition: background 160ms ease;
+}
+
+.control-centre-switch::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  transition: transform 160ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+.control-centre-row[aria-checked="true"] .control-centre-switch {
+  background: var(--brand);
+}
+
+.control-centre-row[aria-checked="true"] .control-centre-switch::after {
+  transform: translateX(14px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .control-centre-switch,
+  .control-centre-switch::after {
+    transition: none;
+  }
+}
+
+/* Wallet rail: floating card at the right edge (Big Sur notification-panel
+   grammar) that runs the full usable height — small even margins on all
+   sides, no dead band above the dock. Chrome only — the capsule owns every
+   wallet fact shown inside the frame. */
+.wallet-rail {
+  position: fixed;
+  top: calc(var(--stage-top) + 8px);
+  right: 8px;
+  bottom: 8px;
+  z-index: 100120;
+  display: flex;
+  flex-direction: column;
+  width: min(392px, calc(100vw - 16px));
+  border-radius: 14px;
+  /* Opaque fill — frosted glass was picking up the wallpaper's violet band
+     along the bottom edge. Same card shape, no color bleed. */
+  background: var(--frame-fill);
+  border: 1px solid var(--line);
+  box-shadow: var(--shadow-soft);
+  outline: none;
+  overflow: hidden;
+  animation: wallet-rail-enter 240ms cubic-bezier(0.2, 0, 0, 1) both;
+}
+
+.wallet-rail.wallet-rail-leaving {
+  animation: wallet-rail-leave 240ms cubic-bezier(0.2, 0, 0, 1) both;
+  pointer-events: none;
+}
+
+.wallet-rail[hidden] {
+  display: none;
+}
+
+@keyframes wallet-rail-enter {
+  from {
+    opacity: 0;
+    transform: translateX(calc(100% + 8px));
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes wallet-rail-leave {
+  from {
+    opacity: 1;
+    transform: none;
+  }
+  to {
+    opacity: 0;
+    transform: translateX(calc(100% + 8px));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wallet-rail,
+  .wallet-rail.wallet-rail-leaving {
+    animation: none;
+  }
+}
+
+.wallet-rail-head {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 12px 10px 16px;
+  border-bottom: 1px solid var(--line);
+}
+
+.wallet-rail-title {
+  margin: 0;
+  color: var(--text);
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.wallet-rail-head-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.wallet-rail-head-btn {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  height: 30px;
+  min-height: 30px;
+  padding: 0 10px;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  background: transparent;
+  color: var(--muted);
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.wallet-rail-head-btn:hover {
+  background: var(--lift);
+  color: var(--text);
+}
+
+.wallet-rail-icon-btn {
+  position: relative;
+  width: 30px;
+  min-width: 30px;
+  padding: 0;
+}
+
+.wallet-rail-text-btn {
+  position: relative;
+  padding: 0 9px;
+}
+
+.wallet-rail-icon-svg {
+  display: block;
+  flex: 0 0 auto;
+}
+
+.wallet-rail-badge {
+  position: absolute;
+  top: -3px;
+  right: -3px;
+  display: inline-grid;
+  place-items: center;
+  min-width: 14px;
+  height: 14px;
+  padding: 0 3px;
+  border-radius: 999px;
+  background: var(--accent, #007aff);
+  color: #fff;
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.wallet-rail-badge[hidden] {
+  display: none !important;
+}
+
+#wallet-rail-privacy.is-active {
+  color: var(--text);
+  background: var(--lift);
+}
+
+.wallet-rail-close {
+  /* Square hit target — without width, padding:0 collapses to a tall pill. */
+  width: 30px;
+  min-width: 30px;
+  padding: 0;
+}
+
+.wallet-rail-close img {
+  width: 10px;
+  height: 10px;
+  display: block;
+  opacity: 0.75;
+  /* close.svg strokes are black; invert for dark chrome (same as quick-look). */
+  filter: invert(1);
+}
+
+:root[data-el-theme="light"] .wallet-rail-close img {
+  filter: none;
+  opacity: 0.7;
+}
+
+.wallet-rail-frame {
+  flex: 1 1 auto;
+  width: 100%;
+  border: 0;
+  background: transparent;
+  opacity: 0;
+  transition: opacity 180ms ease;
+}
+
+.wallet-rail-frame.is-ready {
+  opacity: 1;
+}
+
+.wallet-rail-frame[hidden] {
+  display: none;
+}
+
+.wallet-rail-error {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 22px 18px;
+}
+
+.wallet-rail-error[hidden] {
+  display: none;
+}
+
+.wallet-rail-error-title {
+  margin: 0;
+  color: var(--text);
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.wallet-rail-error-copy {
+  margin: 0;
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+.wallet-rail-error-detail {
+  margin: 0;
+  color: var(--soft);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+/* Connector ceremony sheet: same floating card as the wallet rail, stacked
+   above it — a step inside Wallet, not a second desktop app. */
+.connector-sheet {
+  position: fixed;
+  top: calc(var(--stage-top) + 8px);
+  right: 8px;
+  bottom: 8px;
+  z-index: 100130;
+  display: flex;
+  flex-direction: column;
+  width: min(392px, calc(100vw - 16px));
+  border-radius: 14px;
+  background: var(--frame-fill);
+  border: 1px solid var(--line);
+  box-shadow: var(--shadow-soft);
+  outline: none;
+  overflow: hidden;
+  animation: wallet-rail-enter 240ms cubic-bezier(0.2, 0, 0, 1) both;
+}
+
+.connector-sheet[hidden] {
+  display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .connector-sheet {
+    animation: none;
+  }
+}
+
+.connector-sheet-head {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 12px 10px 16px;
+  border-bottom: 1px solid var(--line);
+}
+
+.connector-sheet-title {
+  margin: 0;
+  color: var(--text);
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.connector-sheet-frame {
+  flex: 1 1 auto;
+  width: 100%;
+  border: 0;
+  background: transparent;
+  opacity: 0;
+  transition: opacity 180ms ease;
+}
+
+.connector-sheet-frame.is-ready {
+  opacity: 1;
+}
+
+.connector-sheet-frame[hidden] {
+  display: none;
+}
+
+.notification-center-head {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 2px 6px 8px;
 }
 
-.toolbar-btn:hover:not(.toolbar-brand),
-.toolbar-btn:focus-visible:not(.toolbar-brand) {
-  opacity: 1;
-  background-color: rgba(255, 255, 255, 0.15);
-  outline: none;
+.notification-center-title {
+  margin: 0;
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 600;
 }
 
-.toolbar-btn:disabled {
-  cursor: default;
-  opacity: 0.32;
+.notification-center-clear {
+  padding: 3px 8px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--muted);
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
 }
 
-.toolbar-brand {
-  width: 107px;
-  margin-left: 10px;
-  opacity: 1;
+.notification-center-clear:hover {
+  background: var(--lift);
+  color: var(--text);
 }
 
-.toolbar-brand img {
-  width: 107px;
-  height: 17px;
+.notification-center-list {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  display: grid;
+  gap: 6px;
 }
 
-.fullscreen-btn img {
-  width: 15px;
-  height: 15px;
-  opacity: 0.92;
+.notification-center-section {
+  margin: 6px 6px 0;
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
 }
 
-.fullscreen-btn[aria-pressed="true"] {
-  opacity: 1;
-  background-color: rgba(246, 146, 26, 0.18);
+.notification-center-item {
+  display: block;
+  width: 100%;
+  padding: 9px 10px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--panel-soft);
+  color: var(--text);
+  font-family: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 120ms ease;
 }
 
-.sign-out-btn {
-  display: none;
-  flex: 0 0 22px;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5H6.8A2.8 2.8 0 0 0 4 7.8v8.4A2.8 2.8 0 0 0 6.8 19H9'/%3E%3Cpath d='M13 8l4 4-4 4'/%3E%3Cpath d='M17 12H8'/%3E%3C/svg%3E");
+.notification-center-item:hover {
+  background: var(--lift);
 }
 
-body[data-home-authority="signed"] .sign-out-btn {
+.notification-center-item-head {
   display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
 }
 
-.inbox-btn {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 8.5a5.5 5.5 0 1 1 11 0c0 5.5 2.5 6.5 2.5 6.5H4s2.5-1 2.5-6.5'/%3E%3Cpath d='M10 18a2 2 0 0 0 4 0'/%3E%3C/svg%3E");
+.notification-center-item-title {
+  overflow: hidden;
+  font-size: 12.5px;
+  font-weight: 600;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
-.toolbar-inbox-count {
-  position: absolute;
-  top: -3px;
-  right: -4px;
-  min-width: 14px;
-  height: 14px;
-  padding: 0 3px;
-  display: grid;
-  place-items: center;
-  border-radius: 999px;
-  background: var(--brand);
-  color: #111;
-  font-size: 9px;
-  font-weight: 700;
-  line-height: 1;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.34);
+.notification-center-item-time {
+  flex: 0 0 auto;
+  color: var(--muted);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
 }
 
-.toolbar-inbox-count[hidden] {
-  display: none;
+.notification-center-item-body {
+  margin: 3px 0 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.35;
 }
 
-.toolbar-clock {
-  margin-left: 10px;
-  margin-right: 0;
-  color: #fff;
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 22px;
-  white-space: nowrap;
-  opacity: 0.9;
+.notification-center-empty {
+  margin: 0;
+  padding: 22px 0 18px;
+  color: var(--muted);
+  font-size: 12.5px;
+  text-align: center;
 }
 
 .desktop-workspace {
@@ -182,41 +1153,6 @@ body[data-home-authority="signed"] .sign-out-btn {
   -webkit-user-select: none;
 }
 
-body[data-home-shell="resolving"] .desktop-backdrop,
-body[data-home-shell="resolving"] .toolbar,
-body[data-home-shell="resolving"] .desktop-workspace,
-body[data-home-shell="resolving"] .taskbar,
-body[data-home-shell="resolving"] .launcher,
-body[data-home-shell="resolving"] #desktop-context-menu,
-body[data-home-shell="resolving"] #home-notification-toast {
-  display: none;
-}
-
-html[data-home-shell-hint="alternate"] .desktop-backdrop,
-html[data-home-shell-hint="alternate"] .toolbar,
-html[data-home-shell-hint="alternate"] .desktop-workspace,
-html[data-home-shell-hint="alternate"] .taskbar,
-html[data-home-shell-hint="alternate"] .launcher,
-html[data-home-shell-hint="alternate"] #desktop-context-menu,
-html[data-home-shell-hint="alternate"] #home-notification-toast,
-body[data-home-shell="alternate"] .desktop-backdrop,
-body[data-home-shell="alternate"] .toolbar,
-body[data-home-shell="alternate"] .desktop-workspace,
-body[data-home-shell="alternate"] .taskbar,
-body[data-home-shell="alternate"] .launcher,
-body[data-home-shell="alternate"] #desktop-context-menu,
-body[data-home-shell="alternate"] #home-notification-toast,
-body[data-home-gui="dormant"] .desktop-backdrop,
-body[data-home-gui="dormant"] .toolbar,
-body[data-home-gui="dormant"] .desktop-workspace,
-body[data-home-gui="dormant"] .taskbar,
-body[data-home-gui="dormant"] .launcher,
-body[data-home-gui="dormant"] #desktop-context-menu,
-body[data-home-gui="dormant"] #home-notification-toast {
-  display: none !important;
-}
-
-
 .home-notification-toast {
   position: fixed;
   top: calc(var(--toolbar-h) + var(--toolbar-offset) + 12px);
@@ -227,15 +1163,30 @@ body[data-home-gui="dormant"] #home-notification-toast {
   align-items: center;
   gap: 14px;
   padding: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.16);
+  border: 1px solid var(--line);
   border-radius: 8px;
-  background: rgba(23, 27, 35, 0.94);
+  background: var(--menu-fill);
   box-shadow: var(--shadow-soft);
   backdrop-filter: blur(14px);
   transform: translateY(0);
   opacity: 1;
 }
 
+.home-notification-toast:not([hidden]) {
+  animation: toast-enter 180ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+@keyframes toast-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .home-notification-toast[hidden] {
   display: none;
 }
@@ -313,6 +1264,15 @@ body[data-home-gui="dormant"] #home-notification-toast {
   display: none;
 }
 
+.desktop-marquee {
+  position: absolute;
+  z-index: 40;
+  border: 1px solid rgba(255, 255, 255, 0.35);
+  border-radius: 2px;
+  background: rgba(255, 255, 255, 0.1);
+  pointer-events: none;
+}
+
 .desktop-shortcut {
   position: absolute;
   width: 92px;
@@ -332,30 +1292,202 @@ body[data-home-gui="dormant"] #home-notification-toast {
   transition: background-color 0.16s ease, opacity 0.16s ease;
 }
 
-.desktop-shortcut:hover,
-.desktop-shortcut:focus-visible {
-  background: rgba(14, 17, 22, 0.24);
-  outline: none;
+.desktop-shortcut:hover,
+.desktop-shortcut:focus-visible {
+  background: rgba(14, 17, 22, 0.24);
+  outline: none;
+}
+
+.desktop-shortcut.selected {
+  background: rgba(112, 168, 255, 0.18);
+  box-shadow: inset 0 0 0 1px rgba(176, 214, 255, 0.42);
+}
+
+.desktop-shortcut.drag-source {
+  opacity: 0.28;
+}
+
+.desktop-shortcut-ghost {
+  position: fixed;
+  z-index: 1002;
+  margin: 0;
+  pointer-events: none;
+  background: rgba(14, 17, 22, 0.18);
+  backdrop-filter: blur(12px);
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* Quick Look: frameless centered preview over the desktop. No dim overlay —
+   same restraint as Spotlight; the panel's shadow does the separation. */
+.quick-look {
+  position: fixed;
+  inset: var(--stage-top) 0 var(--stage-bottom) 0;
+  z-index: 100118;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+
+.quick-look[hidden] {
+  display: none;
+}
+
+.quick-look-panel {
+  display: flex;
+  flex-direction: column;
+  width: min(640px, 100%);
+  max-height: min(72dvh, 640px);
+  overflow: hidden;
+  border-radius: 16px;
+  background: var(--menu-fill);
+  border: 1px solid var(--line);
+  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45), 0 2px 10px rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+  color: var(--text);
+  animation: quick-look-enter 160ms cubic-bezier(0.2, 0, 0, 1) both;
+}
+
+@keyframes quick-look-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .quick-look-panel {
+    animation: none;
+  }
+}
+
+.quick-look-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px;
+  border-bottom: 0.5px solid var(--panel-soft);
+}
+
+.quick-look-head-copy {
+  min-width: 0;
+}
+
+.quick-look-title {
+  margin: 0;
+  overflow: hidden;
+  font-size: 14px;
+  font-weight: 600;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.quick-look-meta {
+  margin: 2px 0 0;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.quick-look-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 0 0 auto;
+}
+
+.quick-look-open {
+  min-height: 28px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: 8px;
+  background: var(--el-accent);
+  color: var(--el-accent-ink);
+  font: inherit;
+  font-size: 12.5px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.quick-look-close {
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  cursor: pointer;
+}
+
+.quick-look-close:hover {
+  background: var(--lift);
+}
+
+.quick-look-close img {
+  width: 10px;
+  height: 10px;
+  opacity: 0.7;
+  filter: invert(1);
+}
+
+:root[data-el-theme="light"] .quick-look-close img {
+  filter: none;
+}
+
+.quick-look-stage {
+  flex: 1 1 auto;
+  min-height: 220px;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  overflow: auto;
+}
+
+.quick-look-glyph {
+  width: 96px;
+  height: 96px;
+  border-radius: 22px;
 }
 
-.desktop-shortcut.selected {
-  background: rgba(112, 168, 255, 0.18);
-  box-shadow: inset 0 0 0 1px rgba(176, 214, 255, 0.42);
+/* Exposé-lite: windows become selectable cards; pointer events on the stage
+   catch dismiss-outside. Transforms are applied inline (transform-only). */
+body.expose-active .desktop-shortcuts {
+  pointer-events: none;
+  opacity: 0.35;
 }
 
-.desktop-shortcut.drag-source {
-  opacity: 0.28;
+body.expose-active .window.expose-card {
+  pointer-events: auto;
+  cursor: pointer;
 }
 
-.desktop-shortcut-ghost {
-  position: fixed;
-  z-index: 1002;
-  margin: 0;
+body.expose-active .window.expose-card .window-frame {
   pointer-events: none;
-  background: rgba(14, 17, 22, 0.18);
-  backdrop-filter: blur(12px);
-  user-select: none;
-  -webkit-user-select: none;
+}
+
+/* Red count badge on the drag ghost when moving a multi-selection (macOS). */
+.desktop-shortcut-ghost-count {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 5px;
+  border-radius: 10px;
+  background: #ec4d3d;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 20px;
+  text-align: center;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
 }
 
 .desktop-shortcut-icon {
@@ -367,6 +1499,9 @@ body[data-home-gui="dormant"] #home-notification-toast {
 .desktop-shortcut-title {
   display: block;
   width: 100%;
+  /* Labels sit on the wallpaper, not on a themed surface: white + shadow in
+     both themes (macOS does the same on the desktop). */
+  color: #f5f7fa;
   font-size: 12px;
   line-height: 1.28;
   text-align: center;
@@ -422,6 +1557,70 @@ body[data-home-gui="dormant"] #home-notification-toast {
   display: none;
 }
 
+/* First-run teaching hint: one quiet sentence above the dock, gone forever
+   after first contact with the launcher (or a click on the hint itself). */
+.desktop-first-run-hint {
+  position: absolute;
+  left: 50%;
+  bottom: 92px;
+  transform: translateX(-50%);
+  z-index: 5;
+  padding: 9px 16px;
+  border-radius: 999px;
+  border: 1px solid var(--line);
+  background: var(--menu-fill);
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.4;
+  box-shadow: var(--shadow-soft);
+  backdrop-filter: blur(14px);
+  cursor: pointer;
+  animation: desktop-hint-in 0.6s cubic-bezier(0.2, 0.9, 0.3, 1) both;
+}
+
+.desktop-first-run-hint[hidden] {
+  display: none;
+}
+
+@keyframes desktop-hint-in {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
+/* The launcher button softly pulses while the hint is up, answering "where
+   did my apps go" without a word. */
+.taskbar-item.launcher-first-run .taskbar-icon-launcher {
+  animation: launcher-first-run-pulse 2.4s ease-in-out infinite;
+}
+
+@keyframes launcher-first-run-pulse {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.12);
+    opacity: 0.75;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .desktop-first-run-hint {
+    animation: none;
+  }
+
+  .taskbar-item.launcher-first-run .taskbar-icon-launcher {
+    animation: none;
+  }
+}
+
 .app-glyph,
 .taskbar-item-icon,
 .window-head-icon {
@@ -490,7 +1689,7 @@ body[data-home-gui="dormant"] #home-notification-toast {
   left: 0;
   right: 0;
   bottom: calc(var(--taskbar-offset) + env(safe-area-inset-bottom, 0px));
-  z-index: 100000;
+  z-index: 100100;
   display: flex;
   justify-content: center;
   margin-inline: auto;
@@ -499,13 +1698,42 @@ body[data-home-gui="dormant"] #home-notification-toast {
   height: var(--taskbar-h);
   padding-left: 12px;
   padding-right: 12px;
-  border-radius: 24px;
-  background-color: hsla(216, 8%, 22%, 0.82);
+  border-radius: 20px;
+  background-color: var(--dock-fill);
   box-shadow:
-    inset 0 0 0 0.5px rgba(255, 255, 255, 0.2),
+    inset 0 0 0 0.5px var(--hairline),
     0 0 0 0.5px rgba(0, 0, 0, 0.2),
     0 4px 16px rgba(0, 0, 0, 0.2);
-  backdrop-filter: blur(12px);
+  backdrop-filter: blur(10px);
+  transition: transform 220ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+/* Dock auto-hide: slides under the bottom edge; a thin reveal strip stays
+   hot so the pointer can summon it (macOS). Stage geometry is unchanged —
+   windows keep their room even while the dock is tucked away. */
+body.dock-autohide .taskbar {
+  transform: translateY(calc(100% + var(--taskbar-offset) + 8px));
+}
+
+body.dock-autohide.dock-revealed .taskbar,
+body.dock-autohide .taskbar:focus-within {
+  transform: translateY(0);
+}
+
+body.dock-autohide::after {
+  content: "";
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 6px;
+  z-index: 100099;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .taskbar {
+    transition: none;
+  }
 }
 
 .taskbar-inner {
@@ -529,12 +1757,12 @@ body[data-home-gui="dormant"] #home-notification-toast {
   justify-content: flex-start;
   min-width: 12px;
   max-width: 100%;
-  min-height: 40px;
+  min-height: 50px;
   padding: 0 2px;
   gap: 2px;
-  overflow-x: auto;
+  /* Magnified icons and tooltips must escape the pill: no clipping here. */
+  overflow: visible;
   border-radius: 14px;
-  scrollbar-width: none;
   transition: background-color 0.16s ease, box-shadow 0.16s ease;
 }
 
@@ -543,15 +1771,17 @@ body[data-home-gui="dormant"] #home-notification-toast {
 }
 
 .taskbar-sortable.drop-active {
-  background: rgba(255, 255, 255, 0.06);
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
+  background: var(--lift);
+  box-shadow: inset 0 0 0 1px var(--hairline);
 }
 
 .taskbar-item {
   position: relative;
-  width: 40px;
-  height: 40px;
-  padding: 5px;
+  width: 50px;
+  height: 50px;
+  /* Asymmetric: the tile sits 2px above slot center so the running dot gets
+     a real shelf below it — macOS seats dock icons the same way. */
+  padding: 3px 5px 7px;
   display: grid;
   place-items: center;
   border-radius: 10px;
@@ -564,20 +1794,16 @@ body[data-home-gui="dormant"] #home-notification-toast {
   opacity: 0.32;
 }
 
-.taskbar-item:hover .taskbar-icon,
-.taskbar-item:focus-visible .taskbar-icon {
-  background-color: rgba(255, 255, 255, 0.4);
-  outline: none;
-}
-
-.taskbar-item.active .taskbar-icon,
-.taskbar-item:active .taskbar-icon,
-.taskbar-item.open .taskbar-icon {
-  background-color: rgba(90, 93, 97, 0.66);
+/* The Dock speaks through magnification and running dots — no hover plates.
+   Keyboard focus keeps an explicit ring. */
+.taskbar-item:focus-visible {
+  outline: 2px solid var(--brand-focus);
+  outline-offset: 2px;
+  border-radius: 12px;
 }
 
 .taskbar-item:active {
-  transform: scale(0.97);
+  transform: scale(0.96);
 }
 
 .taskbar-icon {
@@ -586,7 +1812,21 @@ body[data-home-gui="dormant"] #home-notification-toast {
   display: grid;
   place-items: center;
   border-radius: 10px;
-  transition: background-color 0.18s ease;
+  /* Magnification is transform-only on this inner node: the 40px layout slot
+     (and hit target) never moves. Grows upward from the dock floor. */
+  transform-origin: 50% 100%;
+  transition: transform 90ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+.taskbar-item.launching .taskbar-icon {
+  animation: dock-launch-bounce 420ms cubic-bezier(0.34, 1.4, 0.64, 1);
+}
+
+@keyframes dock-launch-bounce {
+  0% { transform: scale(1); }
+  25% { transform: scale(0.92); }
+  55% { transform: translateY(-10px) scale(1.08); }
+  100% { transform: none; }
 }
 
 .taskbar-item-icon {
@@ -597,11 +1837,14 @@ body[data-home-gui="dormant"] #home-notification-toast {
 
 .taskbar-entry {
   position: relative;
-  flex: 0 0 40px;
-  width: 40px;
-  height: 40px;
+  flex: 0 0 50px;
+  width: 50px;
+  height: 50px;
 }
 
+/* Window-count chip stays functional (opens the group menu) but is demoted to
+   monochrome — the Dock signals presence with dots; brand orange is for
+   notifications in the system bar, not Dock chrome. */
 .taskbar-window-count {
   position: absolute;
   top: 0;
@@ -612,20 +1855,42 @@ body[data-home-gui="dormant"] #home-notification-toast {
   display: grid;
   place-items: center;
   border-radius: 999px;
-  background: var(--brand);
-  color: #111;
+  background: rgba(32, 34, 40, 0.94);
+  color: rgba(245, 247, 250, 0.85);
   font-size: 10px;
   font-weight: 700;
   line-height: 1;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
+  font-variant-numeric: tabular-nums;
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.18),
+    0 2px 8px rgba(0, 0, 0, 0.28);
   cursor: pointer;
   z-index: 2;
 }
 
 .taskbar-window-count:hover,
 .taskbar-window-count:focus-visible {
-  background: var(--brand-strong);
-  outline: none;
+  background: rgba(62, 65, 72, 0.96);
+  color: #fff;
+}
+
+.taskbar-window-count:focus-visible {
+  outline: 2px solid var(--brand-focus);
+  outline-offset: 1px;
+}
+
+:root[data-el-theme="light"] .taskbar-window-count {
+  background: rgba(255, 255, 255, 0.94);
+  color: rgba(29, 36, 56, 0.9);
+  box-shadow:
+    0 0 0 1px rgba(29, 36, 56, 0.2),
+    0 2px 8px rgba(34, 49, 88, 0.18);
+}
+
+:root[data-el-theme="light"] .taskbar-window-count:hover,
+:root[data-el-theme="light"] .taskbar-window-count:focus-visible {
+  background: #ffffff;
+  color: #1d2438;
 }
 
 .taskbar-window-count[hidden] {
@@ -634,56 +1899,338 @@ body[data-home-gui="dormant"] #home-notification-toast {
 
 .taskbar-icon-launcher::before {
   content: "";
-  width: 18px;
-  height: 18px;
+  width: 22px;
+  height: 22px;
   display: block;
   background:
-    linear-gradient(#ffffff 0 0) left top / 7px 7px no-repeat,
-    linear-gradient(#ffffff 0 0) right top / 7px 7px no-repeat,
-    linear-gradient(#ffffff 0 0) left bottom / 7px 7px no-repeat,
-    linear-gradient(#ffffff 0 0) right bottom / 7px 7px no-repeat;
+    linear-gradient(#ffffff 0 0) left top / 9px 9px no-repeat,
+    linear-gradient(#ffffff 0 0) right top / 9px 9px no-repeat,
+    linear-gradient(#ffffff 0 0) left bottom / 9px 9px no-repeat,
+    linear-gradient(#ffffff 0 0) right bottom / 9px 9px no-repeat;
   opacity: 0.92;
 }
 
+:root[data-el-theme="light"] .taskbar-icon-launcher::before {
+  background:
+    linear-gradient(#3a4358 0 0) left top / 9px 9px no-repeat,
+    linear-gradient(#3a4358 0 0) right top / 9px 9px no-repeat,
+    linear-gradient(#3a4358 0 0) left bottom / 9px 9px no-repeat,
+    linear-gradient(#3a4358 0 0) right bottom / 9px 9px no-repeat;
+}
+
+/* macOS-style running dot: only apps with open windows get one; pinned
+   favorites stay clean until launched. It rides the magnification spread
+   horizontally (JS sets --dock-shift) but never lifts or scales.
+   Geometry: pill 60px / item slot 50px (centered, 5px margins) / tile 40px
+   with 7px bottom padding. Dot spans 0-4px of the item, so: tile, 3px air,
+   dot, 5px air, pill edge — and it never leaves the item's box (no clipping
+   under the mobile scroll container). */
 .active-taskbar-indicator {
   position: absolute;
   left: 50%;
-  bottom: 8px;
-  width: 9px;
-  height: 3px;
-  border-radius: 3px;
-  background-color: rgba(242, 243, 246, 0.82);
-  transform: translateX(-50%);
+  bottom: 0;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background-color: rgba(242, 243, 246, 0.9);
+  transform: translateX(calc(-50% + var(--dock-shift, 0px)));
   opacity: 0;
   transition: opacity 0.16s ease;
 }
 
-.taskbar-item.open .active-taskbar-indicator {
-  opacity: 0.5;
+:root[data-el-theme="light"] .active-taskbar-indicator {
+  background-color: rgba(55, 62, 68, 0.9);
+}
+
+.taskbar-item.open .active-taskbar-indicator {
+  opacity: 0.7;
+}
+
+.taskbar-item.active .active-taskbar-indicator {
+  opacity: 1;
+}
+
+/* Pinned ⋮ running divider */
+.taskbar-separator {
+  flex: 0 0 1px;
+  width: 1px;
+  height: 32px;
+  margin: 0 5px;
+  border-radius: 1px;
+  background: var(--hairline);
+}
+
+/* Dock tooltip: shared, non-interactive, positioned above the (possibly
+   magnified) icon. Shown on hover after a delay and on keyboard focus. */
+.dock-tooltip {
+  position: fixed;
+  z-index: 100130;
+  padding: 5px 12px;
+  transform: translateX(-50%) translateY(-100%);
+  border-radius: 9px;
+  background: var(--menu-fill);
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.3;
+  white-space: nowrap;
+  pointer-events: none;
+  box-shadow:
+    inset 0 0 0 0.5px var(--hairline),
+    0 8px 28px rgba(0, 0, 0, 0.32);
+  backdrop-filter: blur(10px);
+  opacity: 0;
+  transition: opacity 140ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+/* macOS-style tail: a rotated square in the bubble's own fill, centered on
+   the bottom edge, pointing at the icon. */
+.dock-tooltip::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  bottom: -4px;
+  width: 9px;
+  height: 9px;
+  background: var(--menu-fill);
+  box-shadow: inset -0.5px -0.5px 0 var(--hairline);
+  transform: translateX(-50%) rotate(45deg);
+  border-radius: 1.5px;
+}
+
+.dock-tooltip[data-visible="true"] {
+  opacity: 1;
+}
+
+.dock-tooltip[hidden] {
+  display: none;
+}
+
+.launcher {
+  position: fixed;
+  inset: 0;
+  z-index: 100110;
+  display: grid;
+  place-items: center;
+  padding: calc(56px + env(safe-area-inset-top, 0px)) 18px calc(88px + env(safe-area-inset-bottom, 0px));
+  /* Apps-panel surface (macOS style): the overlay only catches clicks; the
+     modal card below carries the one blurred material — no nested blurs. */
+  background: transparent;
+}
+
+.launcher[hidden] {
+  display: none;
+}
+
+.window-switcher[hidden],
+.shortcuts-overlay[hidden] {
+  display: none;
+}
+
+.window-switcher {
+  position: fixed;
+  inset: 0;
+  z-index: 100140;
+  display: grid;
+  place-items: center;
+  pointer-events: none;
+}
+
+.window-switcher-list {
+  pointer-events: auto;
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+  max-width: min(84vw, 980px);
+  overflow-x: auto;
+  padding: 22px 26px;
+  border-radius: 22px;
+  background: var(--menu-fill);
+  border: 0.5px solid var(--line);
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+}
+
+.window-switcher-item {
+  display: grid;
+  justify-items: center;
+  gap: 8px;
+  width: 108px;
+  padding: 10px 6px 8px;
+  border-radius: 14px;
+  cursor: pointer;
+}
+
+.window-switcher-item[aria-selected="true"] {
+  background: var(--lift-strong);
+}
+
+.window-switcher-item[data-minimized="true"] .window-switcher-glyph {
+  opacity: 0.55;
+}
+
+.window-switcher-glyph {
+  width: 52px;
+  height: 52px;
+  display: grid;
+  place-items: center;
+}
+
+.window-switcher-glyph img,
+.window-switcher-glyph svg {
+  width: 100%;
+  height: 100%;
+}
+
+.window-switcher-title {
+  font-size: 0.74rem;
+  line-height: 1.25;
+  color: var(--text);
+  text-align: center;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.shortcuts-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 100150;
+  display: grid;
+  place-items: center;
+  background: var(--overlay-dim);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+
+/* About ElastOS: same modal material as the shortcuts overlay, one card,
+   only verifiable facts. */
+.about-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 100150;
+  display: grid;
+  place-items: center;
+  background: var(--overlay-dim);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+
+.about-overlay[hidden] {
+  display: none;
+}
+
+.about-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  width: min(88vw, 320px);
+  padding: 34px 28px 28px;
+  border-radius: 18px;
+  background: var(--menu-fill);
+  border: 0.5px solid var(--line);
+  box-shadow: var(--shadow);
+  text-align: center;
+}
+
+.about-logo {
+  width: 56px;
+  height: 56px;
+  margin-bottom: 6px;
+}
+
+.about-title {
+  margin: 0;
+  color: var(--text);
+  font-size: 19px;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+}
+
+.about-line {
+  margin: 0;
+  color: var(--muted);
+  font-size: 12.5px;
+}
+
+.about-identity {
+  margin-top: 8px;
+}
+
+.shortcuts-card {
+  position: relative;
+  width: min(92vw, 480px);
+  max-height: min(80dvh, 560px);
+  overflow: auto;
+  padding: 22px 26px 24px;
+  border-radius: 18px;
+  background: var(--menu-fill);
+  border: 0.5px solid var(--line);
+  box-shadow: var(--shadow);
+}
+
+.shortcuts-title {
+  margin: 0 0 14px;
+  font-size: 1.02rem;
+  font-weight: 650;
+  letter-spacing: 0.01em;
+}
+
+.shortcuts-list {
+  margin: 0;
+  display: grid;
+  gap: 4px;
+}
+
+.shortcuts-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 7px 2px;
+  border-bottom: 0.5px solid var(--panel-soft);
 }
 
-.taskbar-item.active .active-taskbar-indicator {
-  opacity: 1;
+.shortcuts-row:last-child {
+  border-bottom: none;
 }
 
-.launcher {
-  position: fixed;
-  inset: 0;
-  z-index: 100010;
-  display: grid;
-  place-items: end center;
-  padding: calc(56px + env(safe-area-inset-top, 0px)) 18px calc(78px + env(safe-area-inset-bottom, 0px));
-  background: rgba(6, 7, 10, 0.12);
-  backdrop-filter: blur(4px);
+.shortcuts-row dt {
+  font-size: 0.85rem;
+  color: var(--text);
 }
 
-.launcher[hidden] {
-  display: none;
+.shortcuts-row dd {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 0.76rem;
+  color: var(--soft);
+  white-space: nowrap;
+}
+
+.shortcuts-row kbd {
+  display: inline-grid;
+  place-items: center;
+  min-width: 22px;
+  padding: 2px 6px;
+  border-radius: 5px;
+  background: var(--lift);
+  border: 0.5px solid var(--line);
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.28);
+  font-family: inherit;
+  font-size: 0.72rem;
+  color: var(--text);
 }
 
 .context-menu {
   position: fixed;
-  z-index: 100020;
+  z-index: 100120;
   min-width: 220px;
   max-width: calc(100vw - 24px);
   max-height: calc(100dvh - 54px);
@@ -692,9 +2239,9 @@ body[data-home-gui="dormant"] #home-notification-toast {
   display: grid;
   gap: 0.12rem;
   border-radius: 14px;
-  background: rgba(22, 24, 29, 0.96);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
+  background: var(--menu-fill);
+  border: 1px solid var(--line);
+  box-shadow: var(--shadow-soft);
   backdrop-filter: blur(16px);
   user-select: none;
   -webkit-user-select: none;
@@ -730,36 +2277,75 @@ body.dragging-target {
 
 .context-menu-item:hover,
 .context-menu-item:focus-visible {
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--lift);
   outline: none;
 }
 
 .context-menu-divider {
   height: 1px;
   margin: 0.2rem 0.35rem;
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--panel-soft);
 }
 
 .launcher-popover {
   position: relative;
-  width: 530px;
-  max-width: calc(100vw - 36px);
-  max-height: min(500px, 72vh);
-  padding: 20px;
-  overflow-y: auto;
-  border: 1px solid var(--line);
-  border-radius: 16px;
-  background-color: rgba(24, 26, 31, 0.9);
+  display: flex;
+  flex-direction: column;
+  width: min(680px, 100%);
+  /* Fixed panel size (macOS Apps panel): switching grid/list or filtering
+     changes what's inside, never the box itself. Sized so the icon grid
+     fills it (~4 ranks); longer content scrolls. */
+  height: min(64dvh, 512px);
+  padding: 0;
+  overflow: hidden;
   color: var(--text);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-  backdrop-filter: blur(12px);
+  border-radius: 20px;
+  background: var(--menu-fill);
+  border: 0.5px solid var(--line);
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  animation: launcher-enter 160ms cubic-bezier(0.2, 0, 0, 1) both;
+}
+
+@keyframes launcher-enter {
+  0% {
+    opacity: 0;
+    transform: scale(0.97) translateY(6px);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
 }
 
-.launcher-close {
-  position: absolute;
-  top: 12px;
-  right: 12px;
-  z-index: 2;
+@media (prefers-reduced-motion: reduce) {
+  .launcher-popover {
+    animation: none;
+  }
+}
+
+/* Header: borderless inline search (macOS Apps panel) with the view toggle
+   and close on the far right, separated from the grid by a hairline. A fixed
+   bar above the scroll area — rows scroll under it, never through it. */
+.launcher-header {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 10px 12px 8px 16px;
+  border-bottom: 0.5px solid var(--panel-soft);
+}
+
+.launcher-scroll {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 12px 16px 18px;
+}
+
+.launcher-header-btn {
+  flex: 0 0 auto;
   width: 28px;
   height: 28px;
   display: grid;
@@ -769,29 +2355,66 @@ body.dragging-target {
   opacity: 0.78;
 }
 
+.launcher-header-btn:hover,
+.launcher-header-btn:focus-visible {
+  background: var(--lift);
+  opacity: 1;
+}
+
+/* Grid/list glyph, drawn in CSS so it themes with --text. Shows the view
+   you'd switch TO: list lines while in grid, grid squares while in list. */
+#launcher-view-toggle::before {
+  content: "";
+  width: 14px;
+  height: 12px;
+  display: block;
+  background:
+    linear-gradient(var(--text) 0 0) left 0 top 1px / 100% 2px no-repeat,
+    linear-gradient(var(--text) 0 0) left 0 center / 100% 2px no-repeat,
+    linear-gradient(var(--text) 0 0) left 0 bottom 1px / 100% 2px no-repeat;
+  opacity: 0.85;
+}
+
+.launcher[data-view="list"] #launcher-view-toggle::before {
+  height: 14px;
+  background:
+    linear-gradient(var(--text) 0 0) left top / 6px 6px no-repeat,
+    linear-gradient(var(--text) 0 0) right top / 6px 6px no-repeat,
+    linear-gradient(var(--text) 0 0) left bottom / 6px 6px no-repeat,
+    linear-gradient(var(--text) 0 0) right bottom / 6px 6px no-repeat;
+}
+
+.launcher-close {
+  z-index: 2;
+}
+
 .launcher-close img {
   width: 14px;
   height: 14px;
   filter: invert(1);
 }
 
+:root[data-el-theme="light"] .launcher-close img {
+  filter: none;
+}
+
 .launcher-close:hover {
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--lift);
   opacity: 1;
 }
 
 .launcher-search-wrap {
   position: relative;
-  margin-top: 16px;
-  margin-bottom: 18px;
-  padding-right: 30px;
+  flex: 1 1 auto;
+  min-width: 0;
+  margin: 0;
 }
 
 .launcher-search-wrap::before {
   content: "";
   position: absolute;
   top: 50%;
-  left: 12px;
+  left: 8px;
   width: 16px;
   height: 16px;
   transform: translateY(-50%);
@@ -802,54 +2425,37 @@ body.dragging-target {
 
 .launcher-search-field {
   width: 100%;
-  height: 42px;
-  padding: 0 14px 0 38px;
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  background: rgba(255, 255, 255, 0.05);
+  height: 32px;
+  padding: 0 12px 0 30px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
   color: var(--text);
+  font-size: 15px;
   outline: none;
 }
 
 .launcher-search-field::placeholder {
-  color: rgba(245, 247, 250, 0.45);
+  color: var(--soft);
 }
 
-.launcher-search-field:focus {
-  border-color: var(--brand-focus);
-  box-shadow: 0 0 0 1px var(--brand-ring);
-}
+/* No focus ring: the field is auto-focused whenever the panel opens (and
+   Chromium keeps :focus-visible on text inputs), so a ring would be a
+   permanent box — macOS shows only the caret here. */
 
 .launcher-heading {
-  margin: 0 5px 14px;
-  padding: 0 0 10px;
-  font-size: 13px;
-  color: var(--brand);
-  border-bottom: 1px solid var(--brand-line);
-}
-
-.launcher-sections {
-  display: grid;
-  gap: 18px;
-}
-
-.launcher-group[hidden] {
-  display: none;
-}
-
-.launcher-group-heading {
-  margin: 0 4px 12px;
-  color: rgba(245, 247, 250, 0.62);
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
 }
 
 .launcher-group-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
-  gap: 14px 12px;
+  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
+  gap: 12px 8px;
 }
 
 .launcher-card {
@@ -867,6 +2473,10 @@ body.dragging-target {
   margin: 0;
   padding: 0.55rem 0.35rem 0.4rem;
   display: grid;
+  /* Fixed icon row + top alignment: two-line titles grow downward, the
+     icon rank stays level across the row. */
+  grid-template-rows: 56px auto;
+  align-content: start;
   justify-items: center;
   gap: 0.5rem;
   border-radius: 12px;
@@ -875,7 +2485,7 @@ body.dragging-target {
 
 .launcher-card:hover .launcher-card-body,
 .launcher-card:focus-visible .launcher-card-body {
-  background-color: rgba(255, 255, 255, 0.08);
+  background-color: var(--lift);
   outline: none;
 }
 
@@ -885,24 +2495,201 @@ body.dragging-target {
 }
 
 .launcher-item-icon {
-  width: 54px;
-  height: 54px;
+  width: 56px;
+  height: 56px;
 }
 
+/* Single line with ellipsis (macOS Apps panel) — every card is exactly one
+   rank tall, no wrapped names. */
 .launcher-card-title {
   width: 100%;
   margin-top: 0;
   display: block;
-  overflow: visible;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
   line-height: 1.25;
   font-size: 12px;
   text-align: center;
   font-weight: 500;
 }
 
+/* List view: one column of icon + name rows, macOS style. */
+.launcher[data-view="list"] .launcher-group-grid {
+  grid-template-columns: 1fr;
+  gap: 1px;
+}
+
+.launcher[data-view="list"] .launcher-card-body {
+  grid-template-rows: none;
+  grid-template-columns: 30px 1fr;
+  align-content: center;
+  align-items: center;
+  justify-items: start;
+  padding: 5px 10px;
+  gap: 12px;
+  border-radius: 8px;
+}
+
+.launcher[data-view="list"] .launcher-item-icon {
+  width: 30px;
+  height: 30px;
+}
+
+.launcher[data-view="list"] .launcher-card-title {
+  font-size: 13px;
+  text-align: left;
+}
+
+/* Spotlight: centered floating bar in the upper third, results growing
+   beneath inside the same frosted panel (macOS anatomy). No backdrop dim —
+   macOS leaves the desktop untouched; the invisible full-stage container
+   only centers the bar and catches click-outside dismissal.
+   Unlike the fixed Apps panel, this panel auto-sizes with its matches. */
+.spotlight {
+  position: fixed;
+  inset: var(--stage-top) 0 var(--stage-bottom) 0;
+  z-index: 100115;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 12dvh 16px 0;
+}
+
+.spotlight[hidden] {
+  display: none;
+}
+
+.spotlight-panel {
+  width: min(640px, 100%);
+  max-height: min(60dvh, 560px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  color: var(--text);
+  border-radius: 16px;
+  background: var(--menu-fill);
+  border: 0.5px solid var(--line);
+  /* With no backdrop dim, the panel's own shadow carries the separation
+     from bright wallpapers (macOS does the same). */
+  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 2px 10px rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  animation: launcher-enter 140ms cubic-bezier(0.2, 0, 0, 1) both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spotlight-panel {
+    animation: none;
+  }
+}
+
+.spotlight-bar {
+  position: relative;
+  flex: 0 0 auto;
+}
+
+/* Magnifier inside the field, macOS-size. */
+.spotlight-bar::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 16px;
+  width: 18px;
+  height: 18px;
+  transform: translateY(-50%);
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23979eb0' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.2'/%3E%3Cpath d='m15.4 15.4 4.6 4.6'/%3E%3C/svg%3E") center / contain no-repeat;
+  opacity: 0.9;
+  pointer-events: none;
+}
+
+.spotlight-field {
+  width: 100%;
+  height: 52px;
+  padding: 0 18px 0 46px;
+  border: 0;
+  background: transparent;
+  color: var(--text);
+  font-size: 20px;
+  font-weight: 400;
+  outline: none;
+}
+
+.spotlight-field::placeholder {
+  color: var(--soft);
+}
+
+.spotlight-results {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 6px 8px 10px;
+  border-top: 0.5px solid var(--panel-soft);
+}
+
+.spotlight-results[hidden] {
+  display: none;
+}
+
+.spotlight-section {
+  padding: 8px 10px 4px;
+  color: var(--soft);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.spotlight-empty {
+  padding: 14px 10px;
+  color: var(--muted);
+  font-size: 13px;
+  text-align: center;
+}
+
+.spotlight-item {
+  display: grid;
+  grid-template-columns: 26px 1fr auto;
+  align-items: center;
+  gap: 10px;
+  min-height: 34px;
+  padding: 3px 10px;
+  border-radius: 8px;
+  cursor: default;
+}
+
+.spotlight-item[aria-selected="true"] {
+  background: var(--brand);
+  color: #16171b;
+}
+
+.spotlight-glyph {
+  width: 24px;
+  height: 24px;
+  border-radius: 7px;
+}
+
+.spotlight-title {
+  overflow: hidden;
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.spotlight-detail {
+  color: var(--muted);
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.spotlight-item[aria-selected="true"] .spotlight-detail {
+  color: rgba(22, 23, 27, 0.72);
+}
+
 .launcher-empty {
   margin: 18px 4px 0;
-  color: rgba(245, 247, 250, 0.58);
+  color: var(--soft);
   font-size: 13px;
 }
 
@@ -920,22 +2707,66 @@ body.dragging-target {
   transition: opacity 0.18s ease, transform 0.18s ease;
 }
 
-.window[data-snap="left"],
-.window[data-snap="right"],
-.window[data-snap="nw"],
-.window[data-snap="ne"],
-.window[data-snap="sw"],
-.window[data-snap="se"] {
-  transition: opacity 0.18s ease, transform 0.18s ease, left 0.14s ease, top 0.14s ease, width 0.14s ease, height 0.14s ease;
-}
+/* Snap placement is applied instantly: animating left/top/width/height
+   reflows a node hosting a live iframe on every frame (perf budget rule 4).
+   Motion belongs to transform/opacity only. */
 
 .window.hidden {
   display: none;
 }
 
+/* Windows take programmatic focus (tabindex=-1) on keyboard activation; the
+   active header treatment is the focus indicator, not a page outline. */
+.window:focus {
+  outline: none;
+}
+
+/* Window lifecycle choreography — compositor-only (transform + opacity).
+   Enter: settle up into place. Exit: recede. Minimize: JS drives a transform
+   toward the matching dock slot through the transition below. */
+@keyframes window-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.94) translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.window.window-enter {
+  animation: window-enter 200ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+@keyframes window-exit {
+  to {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
+.window.window-exit {
+  animation: window-exit 150ms cubic-bezier(0.2, 0, 0, 1) forwards;
+  pointer-events: none;
+}
+
+.window.window-minimizing {
+  transition: transform 220ms cubic-bezier(0.2, 0, 0, 1), opacity 220ms cubic-bezier(0.2, 0, 0, 1);
+  pointer-events: none;
+}
+
+/* Logical hide is synchronous (session state, focus logic); this keeps the
+   node painted while the minimize transform plays toward its dock slot. */
+.window.hidden.window-minimizing {
+  display: block;
+}
+
+/* Maximize fills the stage — never the system bar or dock. A window that buries
+   the clock reads as a browser tab, not a computer. */
 .window[data-maximized="true"] {
   position: fixed !important;
-  inset: 0 !important;
+  inset: var(--stage-top) 0 var(--stage-bottom) 0 !important;
   z-index: 100005 !important;
   width: auto !important;
   height: auto !important;
@@ -980,11 +2811,28 @@ body.dragging-target {
   filter: none;
 }
 
+/* Traffic lights (macOS): close · minimize · zoom on the LEFT, color-coded
+   12px dots. Symbols stay hidden until the group is hovered or focused —
+   exactly the macOS reveal. The balance spacer mirrors the group's width so
+   the title centers optically in the bar. */
+.window-traffic-lights {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 8px;
+}
+
+.window-head-balance {
+  flex: 0 0 68px;
+}
+
 .window-head-draggable {
   flex-grow: 1;
   min-width: 0;
   display: flex;
   align-items: center;
+  justify-content: center;
   overflow: hidden;
   cursor: default;
 }
@@ -1008,28 +2856,59 @@ body.dragging-target {
   text-overflow: ellipsis;
 }
 
+:root[data-el-theme="light"] .window-head-title {
+  color: rgba(29, 36, 56, 0.92);
+}
+
 .window-action-btn {
-  width: 26px;
-  height: 26px;
-  flex: 0 0 26px;
-  margin-left: 0;
+  width: 12px;
+  height: 12px;
+  flex: 0 0 12px;
+  margin: 0;
+  padding: 0;
   display: grid;
   place-items: center;
-  border-radius: 6px;
+  border: 0.5px solid rgba(0, 0, 0, 0.18);
+  border-radius: 50%;
   cursor: pointer;
-  opacity: 0.86;
-  transition: background-color 0.18s ease, opacity 0.18s ease;
+}
+
+.window-action-btn[data-action="close"] {
+  background-color: #ff5f57;
+}
+
+.window-action-btn[data-action="minimize"] {
+  background-color: #febc2e;
+}
+
+.window-action-btn[data-action="maximize"] {
+  background-color: #28c840;
 }
 
 .window-action-btn img {
-  width: 11px;
-  height: 11px;
-  filter: invert(1) brightness(1.05);
+  width: 7px;
+  height: 7px;
+  opacity: 0;
+  transition: opacity 0.12s ease;
 }
 
-.window-action-btn:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-  opacity: 1;
+.window-traffic-lights:hover .window-action-btn img,
+.window-traffic-lights:focus-within .window-action-btn img {
+  opacity: 0.6;
+}
+
+/* Inactive window: the dots go neutral (macOS); hovering the group restores
+   color even before the window is focused. */
+.window:not(.window-active) .window-traffic-lights:not(:hover):not(:focus-within) .window-action-btn {
+  background-color: rgba(255, 255, 255, 0.24);
+  border-color: rgba(0, 0, 0, 0.1);
+}
+
+:root[data-el-theme="light"]
+  .window:not(.window-active)
+  .window-traffic-lights:not(:hover):not(:focus-within)
+  .window-action-btn {
+  background-color: rgba(29, 36, 56, 0.18);
 }
 
 .window-body {
@@ -1042,16 +2921,50 @@ body.dragging-target {
 }
 
 .window-body.window-body-frame {
+  position: relative;
   padding: 0;
   overflow: hidden;
+  background-color: var(--frame-fill);
+}
+
+/* Launch skeleton: one calm pulsing shape on the dark frame while the capsule
+   boots — no spinner soup. Hidden the moment the iframe reveals. */
+.window-body-frame::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 44px;
+  height: 44px;
+  margin: -22px 0 0 -22px;
+  border-radius: 12px;
+  background: var(--lift);
+  animation: launch-skeleton-pulse 1.1s ease-in-out infinite;
+}
+
+.window-body-frame:has(.window-frame.is-ready)::before {
+  display: none;
+}
+
+@keyframes launch-skeleton-pulse {
+  0%,
+  100% {
+    opacity: 0.55;
+    transform: scale(0.94);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
 }
 
+/* People renders inside the shell itself — it uses the shared dark tokens
+   directly (the last light-on-dark clash in home). */
 .window-body.home-people-body {
   padding: 0;
   overflow: hidden;
-  background: #fff;
-  color: #1f2937;
-  font-family: "Avenir Next", "Segoe UI", sans-serif;
+  background: var(--el-bg);
+  color: var(--el-text);
 }
 
 .home-people-shell {
@@ -1060,7 +2973,7 @@ body.dragging-target {
   width: 100%;
   height: 100%;
   min-height: 0;
-  background: #fff;
+  background: var(--el-bg);
 }
 
 .home-people-sidebar {
@@ -1069,8 +2982,8 @@ body.dragging-target {
   flex-direction: column;
   gap: 4px;
   padding: 20px;
-  border-right: 1px solid #e5e7eb;
-  background: #f9f9f9;
+  border-right: 1px solid var(--el-hairline);
+  background: rgba(255, 255, 255, 0.03);
 }
 
 .home-people-sidebar-item {
@@ -1081,7 +2994,7 @@ body.dragging-target {
   border-radius: 4px;
   padding: 8px 10px;
   background: transparent;
-  color: #1f2937;
+  color: var(--el-text);
   cursor: pointer;
   font: inherit;
   font-size: 14px;
@@ -1091,7 +3004,7 @@ body.dragging-target {
 
 .home-people-sidebar-item.active,
 .home-people-sidebar-item:hover {
-  background: #e5e7eb;
+  background: var(--lift);
 }
 
 .home-people-sidebar-icon {
@@ -1149,16 +3062,16 @@ body.dragging-target {
   min-height: 0;
   flex-direction: column;
   overflow: hidden;
-  background: #fff;
+  background: var(--el-bg);
 }
 
 .home-people-status {
   min-height: 32px;
   padding: 9px 30px;
-  border-bottom: 1px solid #e5e7eb;
-  color: #6b7280;
+  border-bottom: 1px solid var(--el-hairline);
+  color: var(--el-muted);
   font-size: 12px;
-  background: #fff;
+  background: transparent;
 }
 
 .home-people-status[hidden] {
@@ -1166,11 +3079,11 @@ body.dragging-target {
 }
 
 .home-people-status[data-tone="error"] {
-  color: #b91c1c;
+  color: var(--el-danger);
 }
 
 .home-people-status[data-tone="ok"] {
-  color: #047857;
+  color: var(--el-ok);
 }
 
 .home-people-content {
@@ -1192,22 +3105,22 @@ body.dragging-target {
   grid-template-columns: minmax(0, 1fr);
   gap: 12px;
   align-items: start;
-  border: 1px solid #e5e7eb;
+  border: 1px solid var(--el-hairline);
   border-radius: 8px;
   padding: 16px;
-  background: #fff;
+  background: var(--el-surface-raised);
 }
 
 .home-people-profile-copy h3 {
   margin: 0;
-  color: #111827;
+  color: var(--el-text);
   font-size: 15px;
   font-weight: 700;
 }
 
 .home-people-profile-copy p {
   margin: 0.28rem 0 0;
-  color: #6b7280;
+  color: var(--el-muted);
   font-size: 13px;
   line-height: 1.45;
 }
@@ -1222,7 +3135,7 @@ body.dragging-target {
 
 .home-people-profile-label {
   grid-column: 1 / -1;
-  color: #4b5563;
+  color: var(--el-muted);
   font-size: 12px;
   font-weight: 600;
 }
@@ -1230,18 +3143,18 @@ body.dragging-target {
 .home-people-profile-input {
   width: 100%;
   min-height: 36px;
-  border: 1px solid #d1d5db;
+  border: 1px solid var(--el-hairline);
   border-radius: 6px;
   padding: 7px 10px;
-  background: #fff;
-  color: #111827;
+  background: var(--el-inset);
+  color: var(--el-text);
   font: inherit;
   font-size: 13px;
 }
 
 .home-people-profile-input:focus {
-  border-color: #9ca3af;
-  outline: 2px solid rgba(17, 24, 39, 0.1);
+  border-color: var(--el-hairline-strong);
+  outline: 2px solid var(--el-focus);
   outline-offset: 1px;
 }
 
@@ -1249,9 +3162,167 @@ body.dragging-target {
   display: grid;
   gap: 0;
   overflow: hidden;
-  border: 1px solid #e5e7eb;
+  border: 1px solid var(--el-hairline);
   border-radius: 8px;
-  background: #fff;
+  background: var(--el-surface-raised);
+}
+
+/* People list/detail split — anatomy B: roster on the left, contact pane on
+   the right. Selection is a full row, not buttons scattered in cards. */
+.home-people-split {
+  display: grid;
+  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
+  min-height: 260px;
+  overflow: hidden;
+  border: 1px solid var(--el-hairline);
+  border-radius: 8px;
+  background: var(--el-surface-raised);
+}
+
+.home-people-roster {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow-y: auto;
+  border-right: 1px solid var(--el-hairline);
+}
+
+.home-people-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  border: 0;
+  border-bottom: 1px solid var(--el-hairline);
+  padding: 10px 12px;
+  background: transparent;
+  color: var(--el-text);
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+}
+
+.home-people-row:hover {
+  background: var(--lift);
+}
+
+.home-people-row.active {
+  background: var(--el-accent-faint);
+}
+
+.home-people-row:focus-visible {
+  outline: 2px solid var(--el-focus);
+  outline-offset: -2px;
+}
+
+.home-people-row-copy {
+  display: grid;
+  min-width: 0;
+  gap: 1px;
+}
+
+.home-people-row-name {
+  overflow: hidden;
+  color: var(--el-text);
+  font-size: 13.5px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.home-people-row-sub {
+  color: var(--el-muted);
+  font-size: 12px;
+}
+
+.home-people-detail {
+  display: grid;
+  min-width: 0;
+  overflow-y: auto;
+  padding: 20px;
+}
+
+.home-people-detail > .home-people-empty {
+  border: 0;
+  background: transparent;
+  align-self: center;
+  text-align: center;
+}
+
+.home-people-detail-card {
+  display: grid;
+  gap: 16px;
+  align-content: start;
+}
+
+.home-people-detail-head {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.home-people-detail-avatar {
+  width: 56px;
+  height: 56px;
+  font-size: 22px;
+}
+
+.home-people-detail-copy h3 {
+  margin: 0;
+  color: var(--el-text);
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.home-people-detail-copy p {
+  margin: 0.2rem 0 0;
+  color: var(--el-muted);
+  font-size: 13px;
+}
+
+.home-people-detail-rows {
+  display: grid;
+  gap: 0;
+  overflow: hidden;
+  border: 1px solid var(--el-hairline);
+  border-radius: 8px;
+  background: var(--el-inset);
+}
+
+.home-people-detail-row {
+  display: grid;
+  grid-template-columns: 84px minmax(0, 1fr);
+  gap: 10px;
+  align-items: baseline;
+  border-bottom: 1px solid var(--el-hairline);
+  padding: 9px 12px;
+}
+
+.home-people-detail-row:last-child {
+  border-bottom: 0;
+}
+
+.home-people-detail-label {
+  color: var(--el-muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.home-people-detail-value {
+  overflow-wrap: anywhere;
+  color: var(--el-text);
+  font-size: 13px;
+}
+
+.home-people-detail-mono {
+  font-family: var(--el-font-mono);
+  font-size: 12px;
+}
+
+.home-people-detail-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
 }
 
 .home-people-discovery-grid {
@@ -1282,7 +3353,7 @@ body.dragging-target {
 
 .home-people-discovery-column h4 {
   margin: 0;
-  color: #111827;
+  color: var(--el-muted);
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.5px;
@@ -1291,7 +3362,7 @@ body.dragging-target {
 
 .home-people-card,
 .home-people-empty {
-  background: #fff;
+  background: var(--el-surface-raised);
 }
 
 .home-people-card {
@@ -1300,7 +3371,7 @@ body.dragging-target {
   align-items: center;
   gap: 12px;
   padding: 14px 16px;
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid var(--el-hairline);
 }
 
 .home-people-card:last-child {
@@ -1313,8 +3384,8 @@ body.dragging-target {
   height: 38px;
   place-items: center;
   border-radius: 50%;
-  background: #f3f4f6;
-  color: #374151;
+  background: var(--lift);
+  color: var(--el-text);
   font-size: 15px;
   font-weight: 700;
 }
@@ -1326,7 +3397,7 @@ body.dragging-target {
 .home-people-card-copy h3,
 .home-people-empty h3 {
   margin: 0;
-  color: #1f2937;
+  color: var(--el-text);
   font-size: 15px;
   font-weight: 700;
 }
@@ -1334,7 +3405,7 @@ body.dragging-target {
 .home-people-card-copy p,
 .home-people-empty p {
   margin: 0.22rem 0 0;
-  color: #6b7280;
+  color: var(--el-muted);
   font-size: 13px;
   line-height: 1.45;
 }
@@ -1354,11 +3425,11 @@ body.dragging-target {
 
 .home-people-action {
   min-height: 34px;
-  border: 1px solid #d1d5db;
+  border: 1px solid var(--el-hairline);
   border-radius: 6px;
   padding: 6px 11px;
-  background: #fff;
-  color: #1f2937;
+  background: var(--el-inset);
+  color: var(--el-text);
   cursor: pointer;
   font: inherit;
   font-size: 13px;
@@ -1367,9 +3438,13 @@ body.dragging-target {
 
 .home-people-action:hover:not(:disabled),
 .home-people-action:focus-visible:not(:disabled) {
-  border-color: #9ca3af;
-  background: #f9fafb;
-  outline: none;
+  border-color: var(--el-hairline-strong);
+  background: var(--lift);
+}
+
+.home-people-action:focus-visible:not(:disabled) {
+  outline: 2px solid var(--el-focus);
+  outline-offset: 1px;
 }
 
 .home-people-action:disabled {
@@ -1378,16 +3453,41 @@ body.dragging-target {
 }
 
 .home-people-action-danger {
-  color: #b91c1c;
+  color: var(--el-danger);
+}
+
+/* In-card remove confirmation (replaces the browser-native confirm). */
+.home-people-confirm {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-top: 10px;
+  border: 1px solid color-mix(in srgb, var(--el-danger) 34%, transparent);
+  border-radius: 10px;
+  padding: 8px 12px;
+  background: color-mix(in srgb, var(--el-danger) 9%, transparent);
+}
+
+.home-people-confirm p {
+  margin: 0;
+  color: var(--el-text);
+  font-size: 12.5px;
+}
+
+.home-people-confirm-actions {
+  display: flex;
+  gap: 8px;
 }
 
 .home-people-badge {
   min-height: 34px;
-  border: 1px solid #bbf7d0;
+  border: 1px solid rgba(52, 211, 153, 0.32);
   border-radius: 999px;
   padding: 7px 11px;
-  background: #f0fdf4;
-  color: #166534;
+  background: rgba(52, 211, 153, 0.12);
+  color: var(--el-ok);
   font-size: 12px;
   font-weight: 700;
 }
@@ -1396,7 +3496,7 @@ body.dragging-target {
   display: grid;
   min-height: 140px;
   place-items: center;
-  border: 1px solid #e5e7eb;
+  border: 1px solid var(--el-hairline);
   border-radius: 8px;
   padding: 20px;
   text-align: center;
@@ -1441,17 +3541,73 @@ body.dragging-target {
     grid-column: 1 / -1;
     justify-self: start;
   }
+
+  .home-people-split {
+    grid-template-columns: 1fr;
+  }
+
+  .home-people-roster {
+    max-height: 240px;
+    border-right: 0;
+    border-bottom: 1px solid var(--el-hairline);
+  }
+}
+
+
+@media (prefers-reduced-motion: reduce) {
+  .taskbar-icon {
+    transition: none;
+  }
+
+  .taskbar-item.launching .taskbar-icon {
+    animation: none;
+  }
+
+  .dock-tooltip {
+    transition: none;
+  }
+
+  .window-frame {
+    transition: none;
+  }
+
+  .window.window-enter,
+  .window.window-exit,
+  .home-notification-toast:not([hidden]) {
+    animation: none;
+  }
+
+  .window.window-exit {
+    opacity: 0;
+  }
+
+  .window.window-minimizing {
+    transition: none;
+  }
+
+  .window-body-frame::before {
+    animation: none;
+  }
 }
 
+/* App iframes are dark until the capsule paints — the white flash is dead.
+   Content fades in on load, with a short fail-open so a slow capsule is never
+   invisible. */
 .window-frame {
   display: block;
   width: 100%;
   height: 100%;
   border: 0;
-  background: #fff;
+  background: var(--frame-fill);
+  opacity: 0;
+  transition: opacity 220ms cubic-bezier(0.2, 0, 0, 1);
   pointer-events: none;
 }
 
+.window-frame.is-ready {
+  opacity: 1;
+}
+
 .window-active .window-frame {
   pointer-events: auto;
 }
@@ -1569,11 +3725,31 @@ body.dragging-target {
   overflow-wrap: anywhere;
 }
 
-@media (max-width: 820px) {
-  .toolbar {
-    max-width: calc(100vw - 24px);
-  }
+.window-error-actions {
+  margin-top: 14px;
+}
+
+.window-error-actions[hidden] {
+  display: none;
+}
+
+.window-error-retry {
+  padding: 7px 16px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--lift);
+  color: var(--text);
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.window-error-retry:hover {
+  background: var(--panel);
+}
 
+@media (max-width: 820px) {
   .toolbar-brand {
     width: 90px;
   }
@@ -1600,6 +3776,8 @@ body.dragging-target {
 }
 
 @media (max-width: 640px) {
+  /* Phone shell: bar keeps brand · identity · clock; the focused-window title
+     and identity name yield the space. The clock never hides. */
   .toolbar {
     padding-right: 8px;
   }
@@ -1608,15 +3786,33 @@ body.dragging-target {
     margin-left: 7px;
   }
 
-  .toolbar-clock {
+  .toolbar-active-title,
+  .toolbar-menubar {
     display: none;
   }
 
   .launcher-popover {
     width: calc(100vw - 24px);
-    max-height: calc(100dvh - 92px);
+    height: calc(100dvh - 92px);
+  }
+
+  /* Windows fill the stage between bar and dock — apps read as full-screen. */
+  .window {
+    position: fixed !important;
+    inset: var(--stage-top) 0 var(--stage-bottom) 0 !important;
+    width: auto !important;
+    height: auto !important;
+    max-width: none !important;
+    max-height: none !important;
+    border-radius: 0 !important;
   }
 
+  .window .window-resize-handle {
+    display: none;
+  }
+
+  /* Dock: fixed bottom row, horizontally scrollable, no magnification (the
+     magnification code also gates itself off below 641px / non-hover). */
   .taskbar {
     max-width: calc(100vw - 20px);
     padding-left: 8px;
@@ -1627,7 +3823,119 @@ body.dragging-target {
     gap: 8px;
   }
 
-  .window[data-maximized="true"] {
-    inset: 0 !important;
+  .taskbar-sortable {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;
+  }
+
+  .taskbar-sortable::-webkit-scrollbar {
+    display: none;
+  }
+
+  .dock-tooltip {
+    display: none;
+  }
+}
+
+/* ---- Host/GUI split guards ----
+   The host keeps home-gui markup out of sight whenever the GUI is not the
+   active shell: while the root shell is being resolved, while an alternate
+   shell (e.g. home-cli) is active, and whenever the facade marks the GUI
+   dormant. The html-level hint hides pre-hydration flashes on reload. */
+body[data-home-shell="resolving"] .desktop-backdrop,
+body[data-home-shell="resolving"] .toolbar,
+body[data-home-shell="resolving"] .desktop-workspace,
+body[data-home-shell="resolving"] .taskbar,
+body[data-home-shell="resolving"] .launcher,
+body[data-home-shell="resolving"] #desktop-context-menu,
+body[data-home-shell="resolving"] #home-notification-toast,
+body[data-home-shell="resolving"] #notification-center,
+body[data-home-shell="resolving"] #spotlight,
+body[data-home-shell="resolving"] #window-switcher,
+body[data-home-shell="resolving"] #quick-look,
+body[data-home-shell="resolving"] #shortcuts-overlay {
+  display: none;
+}
+
+html[data-home-shell-hint="alternate"] .desktop-backdrop,
+html[data-home-shell-hint="alternate"] .toolbar,
+html[data-home-shell-hint="alternate"] .desktop-workspace,
+html[data-home-shell-hint="alternate"] .taskbar,
+html[data-home-shell-hint="alternate"] .launcher,
+html[data-home-shell-hint="alternate"] #desktop-context-menu,
+html[data-home-shell-hint="alternate"] #home-notification-toast,
+html[data-home-shell-hint="alternate"] #notification-center,
+html[data-home-shell-hint="alternate"] #spotlight,
+html[data-home-shell-hint="alternate"] #window-switcher,
+html[data-home-shell-hint="alternate"] #quick-look,
+html[data-home-shell-hint="alternate"] #shortcuts-overlay,
+body[data-home-shell="alternate"] .desktop-backdrop,
+body[data-home-shell="alternate"] .toolbar,
+body[data-home-shell="alternate"] .desktop-workspace,
+body[data-home-shell="alternate"] .taskbar,
+body[data-home-shell="alternate"] .launcher,
+body[data-home-shell="alternate"] #desktop-context-menu,
+body[data-home-shell="alternate"] #home-notification-toast,
+body[data-home-shell="alternate"] #notification-center,
+body[data-home-shell="alternate"] #spotlight,
+body[data-home-shell="alternate"] #window-switcher,
+body[data-home-shell="alternate"] #quick-look,
+body[data-home-shell="alternate"] #shortcuts-overlay,
+body[data-home-gui="dormant"] .desktop-backdrop,
+body[data-home-gui="dormant"] .toolbar,
+body[data-home-gui="dormant"] .desktop-workspace,
+body[data-home-gui="dormant"] .taskbar,
+body[data-home-gui="dormant"] .launcher,
+body[data-home-gui="dormant"] #desktop-context-menu,
+body[data-home-gui="dormant"] #home-notification-toast,
+body[data-home-gui="dormant"] #notification-center,
+body[data-home-gui="dormant"] #spotlight,
+body[data-home-gui="dormant"] #window-switcher,
+body[data-home-gui="dormant"] #quick-look,
+body[data-home-gui="dormant"] #shortcuts-overlay {
+  display: none !important;
+}
+
+/* Arrival: the desktop settles in as the GUI mounts — the unlock overlay's
+   departure lives in the host stylesheet; this beat is the GUI's own.
+   Opacity/transform only (compositor work, no layout). The workspace and
+   backdrop get the gentle scale settle; the bars just fade in. */
+.desktop-backdrop.home-gui-arriving,
+.desktop-workspace.home-gui-arriving {
+  animation: home-gui-arrive 560ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
+}
+
+.toolbar.home-gui-arriving,
+.taskbar.home-gui-arriving {
+  animation: home-gui-arrive-fade 560ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
+}
+
+@keyframes home-gui-arrive {
+  from {
+    opacity: 0.55;
+    transform: scale(1.012);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes home-gui-arrive-fade {
+  from {
+    opacity: 0.55;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .desktop-backdrop.home-gui-arriving,
+  .desktop-workspace.home-gui-arriving,
+  .toolbar.home-gui-arriving,
+  .taskbar.home-gui-arriving {
+    animation: none;
   }
 }
diff --git a/capsules/home/browser/assets/fonts/Inter-latin-var.woff2 b/capsules/home/browser/assets/fonts/Inter-latin-var.woff2
new file mode 100644
index 000000000..91dc3e852
Binary files /dev/null and b/capsules/home/browser/assets/fonts/Inter-latin-var.woff2 differ
diff --git a/capsules/home/browser/elastos-theme.js b/capsules/home/browser/elastos-theme.js
new file mode 100644
index 000000000..bad19b950
--- /dev/null
+++ b/capsules/home/browser/elastos-theme.js
@@ -0,0 +1,122 @@
+/* GENERATED from capsules/_shared/elastos-theme.js — do not edit. Run `just vendor-ui`. */
+/* ElastOS UI — shared theme runtime (single source of truth).
+ *
+ * Vendored into each participating capsule's browser/ dir by `just vendor-ui`,
+ * next to elastos-ui.css. Everything is served same-origin from the gateway,
+ * so localStorage is the one canonical store (mirrors PC2's approach):
+ *
+ *   localStorage["elastos.ui.theme"]  = "dark" | "light" | "auto"
+ *   localStorage["elastos.ui.accent"] = "blue" | "purple" | "pink" | "red" |
+ *                                       "orange" | "yellow" | "green" | "graphite"
+ *
+ * Dark is the default theme when unset; blue is the default accent. "auto"
+ * follows prefers-color-scheme. The resolved theme is applied as
+ * data-el-theme="light" on <html> (absence means dark); the accent as
+ * data-el-accent (absence means blue) — both activate token blocks in
+ * elastos-ui.css. Cross-document sync is the browser's own `storage` event —
+ * no shell messaging required, and sandboxed app frames (allow-same-origin)
+ * see it.
+ */
+(function () {
+  const KEY = "elastos.ui.theme";
+  const ACCENT_KEY = "elastos.ui.accent";
+  const ACCENTS = [
+    "blue",
+    "purple",
+    "pink",
+    "red",
+    "orange",
+    "yellow",
+    "green",
+    "graphite",
+  ];
+  const media = window.matchMedia
+    ? window.matchMedia("(prefers-color-scheme: light)")
+    : null;
+
+  function preference() {
+    try {
+      const value = localStorage.getItem(KEY);
+      if (value === "light" || value === "dark" || value === "auto") {
+        return value;
+      }
+    } catch (_error) {
+      // Storage may be unavailable; fall through to the default.
+    }
+    return "dark";
+  }
+
+  function resolve(pref) {
+    if (pref === "auto") {
+      return media && media.matches ? "light" : "dark";
+    }
+    return pref;
+  }
+
+  function accentPreference() {
+    try {
+      const value = localStorage.getItem(ACCENT_KEY);
+      if (ACCENTS.includes(value)) {
+        return value;
+      }
+    } catch (_error) {
+      // Storage may be unavailable; fall through to the default.
+    }
+    return "blue";
+  }
+
+  function apply() {
+    if (resolve(preference()) === "light") {
+      document.documentElement.setAttribute("data-el-theme", "light");
+    } else {
+      document.documentElement.removeAttribute("data-el-theme");
+    }
+    const accent = accentPreference();
+    if (accent === "blue") {
+      document.documentElement.removeAttribute("data-el-accent");
+    } else {
+      document.documentElement.setAttribute("data-el-accent", accent);
+    }
+  }
+
+  apply();
+
+  window.addEventListener("storage", (event) => {
+    if (event.key === KEY || event.key === ACCENT_KEY || event.key === null) {
+      apply();
+    }
+  });
+
+  if (media && typeof media.addEventListener === "function") {
+    media.addEventListener("change", () => {
+      if (preference() === "auto") {
+        apply();
+      }
+    });
+  }
+
+  window.elastosTheme = {
+    preference,
+    resolved: () => resolve(preference()),
+    set(value) {
+      const pref = value === "light" || value === "auto" ? value : "dark";
+      try {
+        localStorage.setItem(KEY, pref);
+      } catch (_error) {
+        // Applying still works for this document.
+      }
+      apply();
+    },
+    accents: ACCENTS.slice(),
+    accent: accentPreference,
+    setAccent(value) {
+      const accent = ACCENTS.includes(value) ? value : "blue";
+      try {
+        localStorage.setItem(ACCENT_KEY, accent);
+      } catch (_error) {
+        // Applying still works for this document.
+      }
+      apply();
+    },
+  };
+})();
diff --git a/capsules/home/browser/elastos-ui.css b/capsules/home/browser/elastos-ui.css
new file mode 100644
index 000000000..7529596ef
--- /dev/null
+++ b/capsules/home/browser/elastos-ui.css
@@ -0,0 +1,248 @@
+/* GENERATED from capsules/_shared/elastos-ui.css — do not edit. Run `just vendor-ui`. */
+/* ElastOS UI — shared design tokens (single source of truth).
+ *
+ * This file lives at capsules/_shared/elastos-ui.css and is VENDORED into each
+ * participating capsule's browser/ dir by `just vendor-ui` (no gateway route,
+ * no shared runtime surface — capsules stay self-contained). Edit THIS file,
+ * then run `just vendor-ui`; `just alignment-check` fails on drift.
+ *
+ * Contents: Inter (OFL, latin variable subset), palette, type scale, radii,
+ * hairlines, blur/elevation steps, motion tokens, and minimal control
+ * primitives. Layout is each app's business — tokens only.
+ */
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: optional;
+  src: url("./assets/fonts/Inter-latin-var.woff2") format("woff2");
+}
+
+:root {
+  color-scheme: dark;
+
+  /* Palette */
+  --el-bg: #0b0d10;
+  --el-surface: rgba(22, 24, 29, 0.92);
+  --el-surface-raised: #16181d;
+  --el-inset: rgba(255, 255, 255, 0.06);
+  --el-text: #f5f7fa;
+  --el-muted: rgba(245, 247, 250, 0.7);
+  --el-soft: rgba(245, 247, 250, 0.48);
+  --el-brand: #f6921a;
+  --el-brand-strong: #ffb457;
+  --el-focus: rgba(246, 146, 26, 0.55);
+  --el-danger: #ff8f8f;
+  --el-ok: #34d399;
+
+  /* Hairlines (one pair, everywhere) */
+  --el-hairline: rgba(255, 255, 255, 0.12);
+  --el-hairline-strong: rgba(255, 255, 255, 0.18);
+
+  /* Type: 10/11/12/13/14/16/28; weights 400/500/600/700 */
+  --el-font: "Inter", -apple-system, "Segoe UI", "SF Pro Text", sans-serif;
+  --el-font-mono: ui-monospace, "SF Mono", Menlo, monospace;
+  --el-text-2xs: 10px;
+  --el-text-xs: 11px;
+  --el-text-sm: 12px;
+  --el-text-md: 13px;
+  --el-text-lg: 14px;
+  --el-text-xl: 16px;
+  --el-text-display: 28px;
+
+  /* Radii: 4/6/10/12/16/20 + pill */
+  --el-radius-xs: 4px;
+  --el-radius-sm: 6px;
+  --el-radius-md: 10px;
+  --el-radius-lg: 12px;
+  --el-radius-xl: 16px;
+  --el-radius-2xl: 20px;
+  --el-radius-pill: 999px;
+
+  /* Blur: three steps only */
+  --el-blur-1: 8px;
+  --el-blur-2: 16px;
+  --el-blur-3: 24px;
+
+  /* Elevation: three levels */
+  --el-shadow-1: 0 2px 10px rgba(0, 0, 0, 0.22);
+  --el-shadow-2: 0 12px 28px rgba(0, 0, 0, 0.28);
+  --el-shadow-3: 0 24px 80px rgba(0, 0, 0, 0.35);
+
+  /* Motion: 80/140/180/220, exits 150; one ease */
+  --el-dur-1: 80ms;
+  --el-dur-2: 140ms;
+  --el-dur-3: 180ms;
+  --el-dur-4: 220ms;
+  --el-dur-exit: 150ms;
+  --el-ease: cubic-bezier(0.2, 0, 0, 1);
+
+  /* System accent — ONE accent, chosen by the user in System > Personalization
+     (macOS model), obeyed by every app. Selected via data-el-accent on <html>
+     (absence = blue). Apps consume the derived tones and never define their own
+     accent colors. */
+  --el-accent: #0a84ff;
+  --el-accent-ink: #ffffff;
+  --el-accent-strong: color-mix(in srgb, var(--el-accent) 78%, #ffffff);
+  --el-accent-soft: color-mix(in srgb, var(--el-accent) 22%, transparent);
+  --el-accent-faint: color-mix(in srgb, var(--el-accent) 11%, transparent);
+}
+
+/* The eight macOS accents. Yellow and orange carry dark ink on filled controls. */
+:root[data-el-accent="purple"] {
+  --el-accent: #bf5af2;
+}
+
+:root[data-el-accent="pink"] {
+  --el-accent: #ff375f;
+}
+
+:root[data-el-accent="red"] {
+  --el-accent: #ff453a;
+}
+
+:root[data-el-accent="orange"] {
+  --el-accent: #f6921a;
+  --el-accent-ink: #161616;
+}
+
+:root[data-el-accent="yellow"] {
+  --el-accent: #ffd60a;
+  --el-accent-ink: #161616;
+}
+
+:root[data-el-accent="green"] {
+  --el-accent: #30b84f;
+}
+
+:root[data-el-accent="graphite"] {
+  --el-accent: #8e8e93;
+}
+
+/* Light theme: dark is the default (no attribute); the shell sets
+   data-el-theme="light" on <html> and broadcasts changes to app frames.
+   Values restore the pre-token light look: white raised panels over a cool
+   pale stage, navy ink, the same brand orange. */
+:root[data-el-theme="light"] {
+  color-scheme: light;
+
+  --el-bg: #eef1f6;
+  --el-surface: rgba(255, 255, 255, 0.88);
+  --el-surface-raised: #ffffff;
+  --el-inset: rgba(29, 36, 56, 0.055);
+  --el-text: #1d2438;
+  --el-muted: rgba(29, 36, 56, 0.72);
+  --el-soft: rgba(29, 36, 56, 0.5);
+  --el-brand: #f6921a;
+  --el-brand-strong: #e07f0a;
+  --el-focus: rgba(246, 146, 26, 0.55);
+  --el-danger: #b14c5a;
+  --el-ok: #0a7a52;
+
+  --el-hairline: rgba(29, 36, 56, 0.14);
+  --el-hairline-strong: rgba(29, 36, 56, 0.24);
+
+  --el-shadow-1: 0 2px 10px rgba(34, 49, 88, 0.1);
+  --el-shadow-2: 0 12px 28px rgba(34, 49, 88, 0.12);
+  --el-shadow-3: 0 24px 80px rgba(34, 49, 88, 0.16);
+
+  /* "Strong" means higher contrast against the CURRENT background: lighter on
+     dark, deeper on light. */
+  --el-accent-strong: color-mix(in srgb, var(--el-accent) 72%, #1d2438);
+}
+
+/* App base: opt in by putting .el-app on <body>. Dark shell surface, shared
+   type. Layout untouched. */
+.el-app {
+  margin: 0;
+  background: var(--el-bg);
+  color: var(--el-text);
+  font-family: var(--el-font);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+.el-app :focus-visible {
+  outline: 2px solid var(--el-focus);
+  outline-offset: 2px;
+}
+
+/* Minimal control primitives — enough that a capsule needs no bespoke button
+   or input styling to look native. */
+.el-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 32px;
+  padding: 0 14px;
+  border: 1px solid var(--el-hairline);
+  border-radius: var(--el-radius-md);
+  background: var(--el-inset);
+  color: var(--el-text);
+  font: 500 var(--el-text-md) / 1.2 var(--el-font);
+  cursor: pointer;
+  transition: background-color var(--el-dur-2) var(--el-ease);
+}
+
+/* Hover lift over inset surfaces — flips with the theme so apps don't need
+   their own literal rgba(255,255,255,x) hovers. */
+:root {
+  --el-lift: rgba(255, 255, 255, 0.1);
+  --el-lift-strong: rgba(255, 255, 255, 0.16);
+}
+
+:root[data-el-theme="light"] {
+  --el-lift: rgba(29, 36, 56, 0.08);
+  --el-lift-strong: rgba(29, 36, 56, 0.14);
+}
+
+.el-button:hover {
+  background: var(--el-lift);
+}
+
+.el-button:active {
+  transform: scale(0.96);
+}
+
+.el-button:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
+.el-button-primary {
+  border-color: transparent;
+  background: var(--el-brand);
+  color: #161616;
+  font-weight: 600;
+}
+
+.el-button-primary:hover {
+  background: var(--el-brand-strong);
+}
+
+.el-input {
+  min-height: 32px;
+  padding: 0 10px;
+  border: 1px solid var(--el-hairline);
+  border-radius: var(--el-radius-md);
+  background: var(--el-inset);
+  color: var(--el-text);
+  font: 400 var(--el-text-md) / 1.2 var(--el-font);
+}
+
+.el-input::placeholder {
+  color: var(--el-soft);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .el-app *,
+  .el-app *::before,
+  .el-app *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
diff --git a/capsules/home/browser/home-shell-host.js b/capsules/home/browser/home-shell-host.js
index 358065967..a2d605c55 100644
--- a/capsules/home/browser/home-shell-host.js
+++ b/capsules/home/browser/home-shell-host.js
@@ -16,7 +16,7 @@ import {
   shellState,
   fetchJson,
   targetById,
-} from "./shell-core.js?v=home-20260705a";
+} from "./shell-core.js?v=home-20260717b";
 import {
   bindHomeUnlock,
   hideHomeUnlock,
@@ -24,7 +24,7 @@ import {
   refreshHomeSession,
   showHomeUnlock,
   signOutHome,
-} from "./shell-auth.js?v=home-20260705a";
+} from "./shell-auth.js?v=home-20260717b";
 
 const SUMMARY_REFRESH_DEBOUNCE_MS = 150;
 const SUMMARY_REFRESH_AFTER_INTERACTION_MS = 700;
@@ -36,8 +36,8 @@ const SESSION_REFRESH_MS = 10 * 60 * 1000;
 const ACTIVE_SHELL_HINT_KEY = "elastos.home.active-shell-hint";
 const HOME_CLI_SHELL_ID = "home-cli";
 const HOME_GUI_MODULE_URL = import.meta.url.startsWith("file:")
-  ? new URL("../../home-gui/browser/home-gui.js?v=home-20260705a", import.meta.url).href
-  : new URL("../home-gui/home-gui.js?v=home-20260705a", import.meta.url).href;
+  ? new URL("../../home-gui/browser/home-gui.js?v=home-20260718m", import.meta.url).href
+  : new URL("../home-gui/home-gui.js?v=home-20260718m", import.meta.url).href;
 const SHELL_MESSAGE_OPEN_TARGET_SOURCES = Object.freeze({
   "archive-manager": new Set(["library"]),
   browser: new Set(["library"]),
@@ -48,7 +48,7 @@ const SHELL_MESSAGE_OPEN_TARGET_SOURCES = Object.freeze({
   marketplace: "runtime-target",
   services: new Set(["browser", "chat-room"]),
   system: "visible-target",
-  "wallet": new Set(["wallet-metamask", "wallet-unisat"]),
+  "wallet": new Set(["wallet-metamask", "wallet-unisat", "wallet-walletconnect"]),
 });
 const SHELL_MESSAGE_OPEN_URI_SOURCES = new Set(["documents", "chat-room"]);
 const SHELL_MESSAGE_DELIVER_TARGET_SOURCES = Object.freeze({
@@ -215,6 +215,12 @@ async function deliverMessageToHomeGuiTargetFrame(target, payload) {
   return module.deliverMessageToHomeGuiTargetFrame(target, payload);
 }
 
+async function setHomeGuiMenuManifest(windowId, menus) {
+  requireHomeGuiActive("set menu manifest");
+  const module = await ensureHomeGuiModule();
+  module.setHomeGuiMenuManifest(windowId, menus);
+}
+
 async function openHomeGuiTargetWithPayload(target, payload) {
   requireHomeGuiActive("open target with payload");
   const module = await ensureHomeGuiModule();
@@ -688,6 +694,21 @@ window.addEventListener("message", (event) => {
   }
   if (data.type === "home:refresh-summary") {
     requestShellSummaryRefresh({ reason: "child-message" });
+    // Successful connector link — close the in-rail ceremony sheet so the
+    // user lands back on Wallet (projection only; refresh already ran).
+    homeGuiModule?.noteHomeGuiConnectorSheetSummaryRefresh?.(event.source);
+    return;
+  }
+  if (data.type === "home:menu-manifest") {
+    // Menus are self-declared UI, not authority: a window may only shape its
+    // OWN menu bar entry, so the manifest binds to the sender's window id.
+    if (context.kind !== "app-frame" || !context.windowId) {
+      console.warn("home ignored unauthorized menu-manifest message", context.targetId);
+      return;
+    }
+    setHomeGuiMenuManifest(context.windowId, data.menus).catch((error) => {
+      console.error("home menu-manifest failed", error);
+    });
     return;
   }
   if (data.type === "home:active-shell-applied") {
diff --git a/capsules/home/browser/index.html b/capsules/home/browser/index.html
index 005a67d32..4699588ed 100644
--- a/capsules/home/browser/index.html
+++ b/capsules/home/browser/index.html
@@ -24,10 +24,23 @@
         } catch (_error) {}
       })();
     </script>
-    <link rel="manifest" href="./manifest.webmanifest?v=home-20260705a" />
+    <link rel="manifest" href="./manifest.webmanifest?v=home-20260717b" />
     <link rel="icon" href="./elastos-home-icon.svg" type="image/svg+xml" />
     <link rel="apple-touch-icon" href="./elastos-home-icon-192.png" />
-    <link rel="stylesheet" href="./style.css?v=home-20260705a" />
+    <link
+      rel="preload"
+      href="./assets/fonts/Inter-latin-var.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+    <!-- Vendored design tokens + theme runtime (capsules/_shared, stamped by
+         scripts/vendor-ui-tokens.sh). The theme script runs before stylesheets
+         so a stored light/dark choice applies without a flash; home-gui's
+         injected stylesheet resolves its --el-* tokens from this sheet. -->
+    <script src="./elastos-theme.js?v=home-20260717b"></script>
+    <link rel="stylesheet" href="./elastos-ui.css?v=home-20260717b" />
+    <link rel="stylesheet" href="./style.css?v=home-20260717b" />
   </head>
   <body data-home-status="booting" data-home-shell="resolving" data-home-gui="resolving">
     <script>
@@ -115,6 +128,6 @@ <h1 id="home-unlock-title">Sign in</h1>
       </section>
     </div>
 
-    <script type="module" src="./home-shell-host.js?v=home-20260705a"></script>
+    <script type="module" src="./home-shell-host.js?v=home-20260718m"></script>
   </body>
 </html>
diff --git a/capsules/home/browser/service-worker.js b/capsules/home/browser/service-worker.js
index 269132fbe..f2acf1cbb 100644
--- a/capsules/home/browser/service-worker.js
+++ b/capsules/home/browser/service-worker.js
@@ -1,4 +1,4 @@
-const CACHE_NAME = "elastos-home-20260705a";
+const CACHE_NAME = "elastos-home-20260717b";
 const CACHE_PREFIX = "elastos-home-";
 
 self.addEventListener("install", (event) => {
diff --git a/capsules/home/browser/shell-auth.js b/capsules/home/browser/shell-auth.js
index a12e08972..1f887441f 100644
--- a/capsules/home/browser/shell-auth.js
+++ b/capsules/home/browser/shell-auth.js
@@ -1,4 +1,4 @@
-import { fetchJson } from "./shell-core.js?v=home-20260705a";
+import { fetchJson, trapTabWithin } from "./shell-core.js?v=home-20260717b";
 
 const unlockPanel = document.querySelector("#home-unlock");
 const unlockCard = document.querySelector(".home-unlock-card");
@@ -38,6 +38,10 @@ export async function showHomeUnlock(onUnlocked, options = {}) {
   unlockPanel.setAttribute("aria-hidden", "false");
   unlockCard?.setAttribute("aria-modal", "true");
 
+  // The unlock card is a modal dialog: keyboard focus starts on the primary
+  // action and stays inside until the surface is dismissed.
+  unlockPrimary?.focus();
+
   if (!window.PublicKeyCredential) {
     unlockMode = "unsupported";
     renderUnlockMode({ registered: true, guestRegistrationEnabled: false });
@@ -49,9 +53,11 @@ export async function showHomeUnlock(onUnlocked, options = {}) {
     const status = await fetchJson("/api/auth/passkey/status");
     const registered = status.registered === true;
     const guestRegistrationEnabled = status.guest_registration_enabled === true;
+    // First boot arrives in beats: welcome -> create passkey -> desktop
+    // reveal. Returning users go straight to sign-in.
     unlockMode = registered
       ? (guestRegistrationEnabled ? "signin_guest_enabled" : "signin")
-      : "create";
+      : "welcome";
     renderUnlockMode({ registered, guestRegistrationEnabled });
     setUnlockStatus(unlockStatusCopy(registered, guestRegistrationEnabled), "muted");
     if (registered) {
@@ -68,6 +74,25 @@ export function hideHomeUnlock() {
   if (!unlockPanel) {
     return;
   }
+  // Departure: when the unlock surface is actually on screen, cross-fade it
+  // out (opacity/transform only — compositor work, no layout). The desktop's
+  // own arrival settle is the GUI shell's mount transition, so the neutral
+  // mask never has to carry the desktop. Reduced motion and the
+  // already-hidden boot path skip the fade.
+  const reducedMotion = typeof window.matchMedia === "function"
+    && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  if (!unlockPanel.hidden && !reducedMotion) {
+    unlockPanel.classList.add("home-unlock-leaving");
+    window.setTimeout(() => {
+      unlockPanel.classList.remove("home-unlock-leaving");
+      finishHideHomeUnlock();
+    }, 300);
+    return;
+  }
+  finishHideHomeUnlock();
+}
+
+function finishHideHomeUnlock() {
   unlockPanel.hidden = true;
   unlockPanel.setAttribute("aria-hidden", "true");
   delete unlockPanel.dataset.mode;
@@ -77,7 +102,18 @@ export function hideHomeUnlock() {
 }
 
 export function bindHomeUnlock() {
+  unlockPanel?.addEventListener("keydown", (event) => {
+    if (!unlockPanel.hidden) {
+      trapTabWithin(unlockCard, event);
+    }
+  });
   unlockPrimary?.addEventListener("click", () => {
+    if (unlockMode === "welcome") {
+      unlockMode = "create";
+      renderUnlockMode({ registered: false, guestRegistrationEnabled: false });
+      unlockName?.focus();
+      return;
+    }
     if (unlockMode === "create" || unlockMode === "create_guest") {
       runPasskeyCreate().catch(reportUnlockError);
       return;
@@ -146,11 +182,16 @@ function renderUnlockMode({ registered, guestRegistrationEnabled }) {
   const creatingGuest = unlockMode === "create_guest";
   const creatingAdmin = unlockMode === "create";
   const canCreate = creatingAdmin || creatingGuest;
+  const welcoming = unlockMode === "welcome";
   if (unlockTitle) {
-    unlockTitle.textContent = creatingGuest ? "Create guest account" : (registered ? "Sign in" : "Set up Home");
+    unlockTitle.textContent = welcoming
+      ? "Welcome to ElastOS"
+      : creatingGuest ? "Create guest account" : (registered ? "Sign in" : "Set up Home");
   }
   if (unlockCopy) {
-    if (creatingGuest) {
+    if (welcoming) {
+      unlockCopy.textContent = "This Home is yours: your data, apps and desktop, unlocked by a passkey only you hold.";
+    } else if (creatingGuest) {
       unlockCopy.textContent = "Use a passkey to create your own guest account.";
     } else {
       unlockCopy.textContent = registered
@@ -159,9 +200,11 @@ function renderUnlockMode({ registered, guestRegistrationEnabled }) {
     }
   }
   if (unlockPrimary) {
-    unlockPrimary.textContent = creatingGuest
-      ? "Create guest passkey"
-      : (registered ? "Use passkey" : "Create admin passkey");
+    unlockPrimary.textContent = welcoming
+      ? "Get started"
+      : creatingGuest
+        ? "Create guest passkey"
+        : (registered ? "Use passkey" : "Create admin passkey");
     unlockPrimary.disabled = unlockMode === "unsupported";
   }
   if (unlockSecondary) {
diff --git a/capsules/home/browser/shell-core.js b/capsules/home/browser/shell-core.js
index ef916b873..74166df57 100644
--- a/capsules/home/browser/shell-core.js
+++ b/capsules/home/browser/shell-core.js
@@ -81,3 +81,36 @@ export function allVisibleTargets(summary) {
 export function targetById(summary, targetId) {
   return allVisibleTargets(summary).find((target) => target.target === targetId) || null;
 }
+
+// Keyboard focus trap for modal surfaces (the unlock card): Tab cycles within
+// `container` instead of escaping into the inert page behind it.
+export function trapTabWithin(container, event) {
+  if (event.key !== "Tab" || !container) {
+    return false;
+  }
+  const focusables = Array.from(
+    container.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+    ),
+  ).filter(
+    (element) => !element.hidden && !element.disabled && element.offsetParent !== null,
+  );
+  if (focusables.length === 0) {
+    event.preventDefault();
+    return true;
+  }
+  const first = focusables[0];
+  const last = focusables[focusables.length - 1];
+  const active = document.activeElement;
+  if (event.shiftKey && (active === first || !container.contains(active))) {
+    event.preventDefault();
+    last.focus();
+    return true;
+  }
+  if (!event.shiftKey && (active === last || !container.contains(active))) {
+    event.preventDefault();
+    first.focus();
+    return true;
+  }
+  return false;
+}
diff --git a/capsules/home/browser/style.css b/capsules/home/browser/style.css
index d5b5faef6..4fc333caa 100644
--- a/capsules/home/browser/style.css
+++ b/capsules/home/browser/style.css
@@ -276,6 +276,40 @@ img {
   100% { opacity: 1; transform: scale(1); }
 }
 
+/* Departure: unlock success cross-fades the overlay away. Opacity/transform
+   only — compositor work, no layout. The desktop's own settle-in is the GUI
+   shell's mount transition (home-gui style.css). */
+.home-unlock.home-unlock-leaving {
+  pointer-events: none;
+  animation: home-unlock-dismiss 280ms ease-in both;
+}
+
+.home-unlock.home-unlock-leaving .home-unlock-card {
+  animation: home-unlock-card-dismiss 280ms ease-in both;
+}
+
+@keyframes home-unlock-dismiss {
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes home-unlock-card-dismiss {
+  to {
+    opacity: 0;
+    transform: scale(1.045);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .home-unlock,
+  .home-unlock-card,
+  .home-unlock.home-unlock-leaving,
+  .home-unlock.home-unlock-leaving .home-unlock-card {
+    animation: none;
+  }
+}
+
 .active-shell-root {
   position: fixed;
   inset: 0;
diff --git a/capsules/inbox/browser/assets/fonts/Inter-latin-var.woff2 b/capsules/inbox/browser/assets/fonts/Inter-latin-var.woff2
new file mode 100644
index 000000000..91dc3e852
Binary files /dev/null and b/capsules/inbox/browser/assets/fonts/Inter-latin-var.woff2 differ
diff --git a/capsules/inbox/browser/elastos-theme.js b/capsules/inbox/browser/elastos-theme.js
new file mode 100644
index 000000000..bad19b950
--- /dev/null
+++ b/capsules/inbox/browser/elastos-theme.js
@@ -0,0 +1,122 @@
+/* GENERATED from capsules/_shared/elastos-theme.js — do not edit. Run `just vendor-ui`. */
+/* ElastOS UI — shared theme runtime (single source of truth).
+ *
+ * Vendored into each participating capsule's browser/ dir by `just vendor-ui`,
+ * next to elastos-ui.css. Everything is served same-origin from the gateway,
+ * so localStorage is the one canonical store (mirrors PC2's approach):
+ *
+ *   localStorage["elastos.ui.theme"]  = "dark" | "light" | "auto"
+ *   localStorage["elastos.ui.accent"] = "blue" | "purple" | "pink" | "red" |
+ *                                       "orange" | "yellow" | "green" | "graphite"
+ *
+ * Dark is the default theme when unset; blue is the default accent. "auto"
+ * follows prefers-color-scheme. The resolved theme is applied as
+ * data-el-theme="light" on <html> (absence means dark); the accent as
+ * data-el-accent (absence means blue) — both activate token blocks in
+ * elastos-ui.css. Cross-document sync is the browser's own `storage` event —
+ * no shell messaging required, and sandboxed app frames (allow-same-origin)
+ * see it.
+ */
+(function () {
+  const KEY = "elastos.ui.theme";
+  const ACCENT_KEY = "elastos.ui.accent";
+  const ACCENTS = [
+    "blue",
+    "purple",
+    "pink",
+    "red",
+    "orange",
+    "yellow",
+    "green",
+    "graphite",
+  ];
+  const media = window.matchMedia
+    ? window.matchMedia("(prefers-color-scheme: light)")
+    : null;
+
+  function preference() {
+    try {
+      const value = localStorage.getItem(KEY);
+      if (value === "light" || value === "dark" || value === "auto") {
+        return value;
+      }
+    } catch (_error) {
+      // Storage may be unavailable; fall through to the default.
+    }
+    return "dark";
+  }
+
+  function resolve(pref) {
+    if (pref === "auto") {
+      return media && media.matches ? "light" : "dark";
+    }
+    return pref;
+  }
+
+  function accentPreference() {
+    try {
+      const value = localStorage.getItem(ACCENT_KEY);
+      if (ACCENTS.includes(value)) {
+        return value;
+      }
+    } catch (_error) {
+      // Storage may be unavailable; fall through to the default.
+    }
+    return "blue";
+  }
+
+  function apply() {
+    if (resolve(preference()) === "light") {
+      document.documentElement.setAttribute("data-el-theme", "light");
+    } else {
+      document.documentElement.removeAttribute("data-el-theme");
+    }
+    const accent = accentPreference();
+    if (accent === "blue") {
+      document.documentElement.removeAttribute("data-el-accent");
+    } else {
+      document.documentElement.setAttribute("data-el-accent", accent);
+    }
+  }
+
+  apply();
+
+  window.addEventListener("storage", (event) => {
+    if (event.key === KEY || event.key === ACCENT_KEY || event.key === null) {
+      apply();
+    }
+  });
+
+  if (media && typeof media.addEventListener === "function") {
+    media.addEventListener("change", () => {
+      if (preference() === "auto") {
+        apply();
+      }
+    });
+  }
+
+  window.elastosTheme = {
+    preference,
+    resolved: () => resolve(preference()),
+    set(value) {
+      const pref = value === "light" || value === "auto" ? value : "dark";
+      try {
+        localStorage.setItem(KEY, pref);
+      } catch (_error) {
+        // Applying still works for this document.
+      }
+      apply();
+    },
+    accents: ACCENTS.slice(),
+    accent: accentPreference,
+    setAccent(value) {
+      const accent = ACCENTS.includes(value) ? value : "blue";
+      try {
+        localStorage.setItem(ACCENT_KEY, accent);
+      } catch (_error) {
+        // Applying still works for this document.
+      }
+      apply();
+    },
+  };
+})();
diff --git a/capsules/inbox/browser/elastos-ui.css b/capsules/inbox/browser/elastos-ui.css
new file mode 100644
index 000000000..7529596ef
--- /dev/null
+++ b/capsules/inbox/browser/elastos-ui.css
@@ -0,0 +1,248 @@
+/* GENERATED from capsules/_shared/elastos-ui.css — do not edit. Run `just vendor-ui`. */
+/* ElastOS UI — shared design tokens (single source of truth).
+ *
+ * This file lives at capsules/_shared/elastos-ui.css and is VENDORED into each
+ * participating capsule's browser/ dir by `just vendor-ui` (no gateway route,
+ * no shared runtime surface — capsules stay self-contained). Edit THIS file,
+ * then run `just vendor-ui`; `just alignment-check` fails on drift.
+ *
+ * Contents: Inter (OFL, latin variable subset), palette, type scale, radii,
+ * hairlines, blur/elevation steps, motion tokens, and minimal control
+ * primitives. Layout is each app's business — tokens only.
+ */
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: optional;
+  src: url("./assets/fonts/Inter-latin-var.woff2") format("woff2");
+}
+
+:root {
+  color-scheme: dark;
+
+  /* Palette */
+  --el-bg: #0b0d10;
+  --el-surface: rgba(22, 24, 29, 0.92);
+  --el-surface-raised: #16181d;
+  --el-inset: rgba(255, 255, 255, 0.06);
+  --el-text: #f5f7fa;
+  --el-muted: rgba(245, 247, 250, 0.7);
+  --el-soft: rgba(245, 247, 250, 0.48);
+  --el-brand: #f6921a;
+  --el-brand-strong: #ffb457;
+  --el-focus: rgba(246, 146, 26, 0.55);
+  --el-danger: #ff8f8f;
+  --el-ok: #34d399;
+
+  /* Hairlines (one pair, everywhere) */
+  --el-hairline: rgba(255, 255, 255, 0.12);
+  --el-hairline-strong: rgba(255, 255, 255, 0.18);
+
+  /* Type: 10/11/12/13/14/16/28; weights 400/500/600/700 */
+  --el-font: "Inter", -apple-system, "Segoe UI", "SF Pro Text", sans-serif;
+  --el-font-mono: ui-monospace, "SF Mono", Menlo, monospace;
+  --el-text-2xs: 10px;
+  --el-text-xs: 11px;
+  --el-text-sm: 12px;
+  --el-text-md: 13px;
+  --el-text-lg: 14px;
+  --el-text-xl: 16px;
+  --el-text-display: 28px;
+
+  /* Radii: 4/6/10/12/16/20 + pill */
+  --el-radius-xs: 4px;
+  --el-radius-sm: 6px;
+  --el-radius-md: 10px;
+  --el-radius-lg: 12px;
+  --el-radius-xl: 16px;
+  --el-radius-2xl: 20px;
+  --el-radius-pill: 999px;
+
+  /* Blur: three steps only */
+  --el-blur-1: 8px;
+  --el-blur-2: 16px;
+  --el-blur-3: 24px;
+
+  /* Elevation: three levels */
+  --el-shadow-1: 0 2px 10px rgba(0, 0, 0, 0.22);
+  --el-shadow-2: 0 12px 28px rgba(0, 0, 0, 0.28);
+  --el-shadow-3: 0 24px 80px rgba(0, 0, 0, 0.35);
+
+  /* Motion: 80/140/180/220, exits 150; one ease */
+  --el-dur-1: 80ms;
+  --el-dur-2: 140ms;
+  --el-dur-3: 180ms;
+  --el-dur-4: 220ms;
+  --el-dur-exit: 150ms;
+  --el-ease: cubic-bezier(0.2, 0, 0, 1);
+
+  /* System accent — ONE accent, chosen by the user in System > Personalization
+     (macOS model), obeyed by every app. Selected via data-el-accent on <html>
+     (absence = blue). Apps consume the derived tones and never define their own
+     accent colors. */
+  --el-accent: #0a84ff;
+  --el-accent-ink: #ffffff;
+  --el-accent-strong: color-mix(in srgb, var(--el-accent) 78%, #ffffff);
+  --el-accent-soft: color-mix(in srgb, var(--el-accent) 22%, transparent);
+  --el-accent-faint: color-mix(in srgb, var(--el-accent) 11%, transparent);
+}
+
+/* The eight macOS accents. Yellow and orange carry dark ink on filled controls. */
+:root[data-el-accent="purple"] {
+  --el-accent: #bf5af2;
+}
+
+:root[data-el-accent="pink"] {
+  --el-accent: #ff375f;
+}
+
+:root[data-el-accent="red"] {
+  --el-accent: #ff453a;
+}
+
+:root[data-el-accent="orange"] {
+  --el-accent: #f6921a;
+  --el-accent-ink: #161616;
+}
+
+:root[data-el-accent="yellow"] {
+  --el-accent: #ffd60a;
+  --el-accent-ink: #161616;
+}
+
+:root[data-el-accent="green"] {
+  --el-accent: #30b84f;
+}
+
+:root[data-el-accent="graphite"] {
+  --el-accent: #8e8e93;
+}
+
+/* Light theme: dark is the default (no attribute); the shell sets
+   data-el-theme="light" on <html> and broadcasts changes to app frames.
+   Values restore the pre-token light look: white raised panels over a cool
+   pale stage, navy ink, the same brand orange. */
+:root[data-el-theme="light"] {
+  color-scheme: light;
+
+  --el-bg: #eef1f6;
+  --el-surface: rgba(255, 255, 255, 0.88);
+  --el-surface-raised: #ffffff;
+  --el-inset: rgba(29, 36, 56, 0.055);
+  --el-text: #1d2438;
+  --el-muted: rgba(29, 36, 56, 0.72);
+  --el-soft: rgba(29, 36, 56, 0.5);
+  --el-brand: #f6921a;
+  --el-brand-strong: #e07f0a;
+  --el-focus: rgba(246, 146, 26, 0.55);
+  --el-danger: #b14c5a;
+  --el-ok: #0a7a52;
+
+  --el-hairline: rgba(29, 36, 56, 0.14);
+  --el-hairline-strong: rgba(29, 36, 56, 0.24);
+
+  --el-shadow-1: 0 2px 10px rgba(34, 49, 88, 0.1);
+  --el-shadow-2: 0 12px 28px rgba(34, 49, 88, 0.12);
+  --el-shadow-3: 0 24px 80px rgba(34, 49, 88, 0.16);
+
+  /* "Strong" means higher contrast against the CURRENT background: lighter on
+     dark, deeper on light. */
+  --el-accent-strong: color-mix(in srgb, var(--el-accent) 72%, #1d2438);
+}
+
+/* App base: opt in by putting .el-app on <body>. Dark shell surface, shared
+   type. Layout untouched. */
+.el-app {
+  margin: 0;
+  background: var(--el-bg);
+  color: var(--el-text);
+  font-family: var(--el-font);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+.el-app :focus-visible {
+  outline: 2px solid var(--el-focus);
+  outline-offset: 2px;
+}
+
+/* Minimal control primitives — enough that a capsule needs no bespoke button
+   or input styling to look native. */
+.el-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 32px;
+  padding: 0 14px;
+  border: 1px solid var(--el-hairline);
+  border-radius: var(--el-radius-md);
+  background: var(--el-inset);
+  color: var(--el-text);
+  font: 500 var(--el-text-md) / 1.2 var(--el-font);
+  cursor: pointer;
+  transition: background-color var(--el-dur-2) var(--el-ease);
+}
+
+/* Hover lift over inset surfaces — flips with the theme so apps don't need
+   their own literal rgba(255,255,255,x) hovers. */
+:root {
+  --el-lift: rgba(255, 255, 255, 0.1);
+  --el-lift-strong: rgba(255, 255, 255, 0.16);
+}
+
+:root[data-el-theme="light"] {
+  --el-lift: rgba(29, 36, 56, 0.08);
+  --el-lift-strong: rgba(29, 36, 56, 0.14);
+}
+
+.el-button:hover {
+  background: var(--el-lift);
+}
+
+.el-button:active {
+  transform: scale(0.96);
+}
+
+.el-button:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
+.el-button-primary {
+  border-color: transparent;
+  background: var(--el-brand);
+  color: #161616;
+  font-weight: 600;
+}
+
+.el-button-primary:hover {
+  background: var(--el-brand-strong);
+}
+
+.el-input {
+  min-height: 32px;
+  padding: 0 10px;
+  border: 1px solid var(--el-hairline);
+  border-radius: var(--el-radius-md);
+  background: var(--el-inset);
+  color: var(--el-text);
+  font: 400 var(--el-text-md) / 1.2 var(--el-font);
+}
+
+.el-input::placeholder {
+  color: var(--el-soft);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .el-app *,
+  .el-app *::before,
+  .el-app *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
diff --git a/capsules/inbox/browser/index.html b/capsules/inbox/browser/index.html
index 2b96d11a8..bbfaa99b4 100644
--- a/capsules/inbox/browser/index.html
+++ b/capsules/inbox/browser/index.html
@@ -4,30 +4,58 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Inbox · ElastOS</title>
+  <script src="./elastos-theme.js"></script>
+  <link rel="stylesheet" href="./elastos-ui.css">
   <style>
     :root {
-      color-scheme: light;
-      --bg: #ffffff;
-      --sidebar-bg: #f9f9f9;
-      --toolbar-bg: #fafafa;
-      --panel: #ffffff;
-      --panel-strong: #ffffff;
-      --panel-soft: #f9f9f9;
-      --line: #e5e7eb;
-      --line-strong: #d1d5db;
-      --ink: #1f2937;
-      --muted: #6b7280;
-      --brand: #f6921a;
-      --accent: #007aff;
-      --accent-soft: #e5f0ff;
-      --danger: #b14c5a;
+      color-scheme: dark;
+      --bg: var(--el-bg);
+      --sidebar-bg: rgba(22, 24, 29, 0.78);
+      --toolbar-bg: rgba(22, 24, 29, 0.78);
+      --panel: var(--el-surface-raised);
+      --panel-strong: var(--el-surface-raised);
+      --panel-soft: var(--el-inset);
+      --line: var(--el-hairline);
+      --line-strong: var(--el-hairline-strong);
+      --ink: var(--el-text);
+      --muted: var(--el-muted);
+      --brand: var(--el-brand);
+      --accent: var(--el-accent);
+      --accent-soft: var(--el-accent-soft);
+      --danger: var(--el-danger);
       --shadow: none;
       --border: var(--line);
       --border-strong: var(--line-strong);
       --text: var(--ink);
       --radius-lg: 8px;
       --radius-md: 6px;
-      font-family: "Avenir Next", "Segoe UI", sans-serif;
+      font-family: var(--el-font);
+    }
+
+    :root[data-el-theme="light"] {
+      color-scheme: light;
+      --sidebar-bg: #f9f9f9;
+      --toolbar-bg: #fafafa;
+    }
+
+    :root[data-el-theme="light"] body {
+      background: var(--bg);
+    }
+
+    :root[data-el-theme="light"] .entry-action:hover,
+    :root[data-el-theme="light"] .entry-action:focus-visible {
+      background: #f9fafb;
+    }
+
+
+    :root[data-el-theme="light"] .entry-action.primary {
+      background: var(--text);
+      color: #f8fbff;
+    }
+
+    :root[data-el-theme="light"] .entry-action.danger {
+      border-color: rgba(177, 76, 90, 0.24);
+      background: rgba(177, 76, 90, 0.08);
     }
 
     * {
@@ -38,7 +66,7 @@
       margin: 0;
       min-height: 100vh;
       min-height: 100dvh;
-      background: var(--bg);
+      background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0) 320px) var(--bg);
       color: var(--text);
     }
 
@@ -164,16 +192,28 @@
       min-height: 34px;
       padding: 7px 10px;
       border: 0;
-      border-radius: 4px;
+      border-radius: 6px;
       background: transparent;
       color: var(--ink);
+      font: inherit;
+      text-align: left;
+      cursor: pointer;
     }
 
-    .summary-card.active,
     .summary-card:hover {
       background: var(--line);
     }
 
+    /* The active mailbox row carries the accent, like Mail's sidebar. */
+    .summary-card.active {
+      background: var(--accent-soft);
+      color: var(--accent);
+    }
+
+    .summary-card.active strong {
+      color: var(--accent);
+    }
+
     .summary-card strong {
       order: 2;
       min-width: 28px;
@@ -227,7 +267,7 @@
       border-radius: 6px;
       border: 1px solid var(--border);
       padding: 5px 10px;
-      background: #fff;
+      background: var(--el-inset);
       color: var(--text);
       cursor: pointer;
       font-weight: 600;
@@ -239,38 +279,103 @@
     .entry-action:hover,
     .entry-action:focus-visible {
       border-color: var(--border-strong);
-      background: #f9fafb;
+      background: rgba(255, 255, 255, 0.1);
       outline: none;
     }
 
-    .entry-list {
+    /* Mail anatomy: a compact selectable list on the left, the full request
+       with its actions in a reading pane on the right. */
+    .entry-split {
+      flex: 1 1 auto;
       display: grid;
-      gap: 8px;
+      grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
+      min-height: 0;
+    }
+
+    .entry-rows {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
       min-height: 0;
       overflow: auto;
-      padding: 12px;
+      padding: 8px;
+      border-right: 1px solid var(--line);
     }
 
-    .entry {
+    .entry-row {
       display: grid;
-      grid-template-columns: minmax(0, 1fr) auto;
-      gap: 12px;
-      padding: 12px;
-      border: 1px solid #d0d0d0;
-      border-radius: 8px;
+      gap: 2px;
+      padding: 9px 10px;
+      border: 0;
+      border-radius: 6px;
+      background: transparent;
+      color: var(--ink);
+      font: inherit;
+      text-align: left;
+      cursor: pointer;
+    }
+
+    .entry-row:hover {
       background: var(--panel-soft);
-      box-shadow: none;
     }
 
-    .entry[data-severity="attention"] {
-      border-color: rgba(0, 122, 255, 0.35);
-      background: #f5f9ff;
+    .entry-row.active {
+      background: var(--accent-soft);
     }
 
-    .entry-copy {
-      display: grid;
+    .entry-row-top {
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
       gap: 8px;
-      min-width: 0;
+    }
+
+    .entry-row-title {
+      overflow: hidden;
+      font-size: 13px;
+      font-weight: 600;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .entry-row-time {
+      flex: 0 0 auto;
+      color: var(--muted);
+      font-size: 11px;
+    }
+
+    .entry-row-snippet {
+      overflow: hidden;
+      color: var(--muted);
+      font-size: 12px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .entry-row-unread .entry-row-title::before {
+      content: "";
+      display: inline-block;
+      width: 7px;
+      height: 7px;
+      margin-right: 6px;
+      border-radius: 50%;
+      background: var(--accent);
+      vertical-align: 1px;
+    }
+
+    .entry-detail {
+      display: block;
+      min-height: 0;
+      overflow: auto;
+      padding: 18px 20px;
+    }
+
+    .entry-detail-placeholder {
+      display: grid;
+      place-items: center;
+      height: 100%;
+      color: var(--muted);
+      font-size: 13px;
     }
 
     .entry-title-row {
@@ -281,7 +386,7 @@
     }
 
     .entry-title {
-      font-size: 1.05rem;
+      font-size: 1.15rem;
       font-weight: 600;
       letter-spacing: 0;
     }
@@ -306,30 +411,31 @@
     }
 
     .entry-body {
-      color: var(--muted);
-      font-size: 13px;
-      line-height: 1.45;
+      margin-top: 10px;
+      color: var(--ink);
+      font-size: 13.5px;
+      line-height: 1.55;
     }
 
     .entry-actions {
       display: flex;
       flex-wrap: wrap;
-      justify-content: flex-end;
-      align-content: flex-start;
-      gap: 6px;
-      min-width: 160px;
+      gap: 8px;
+      margin-top: 18px;
+      padding-top: 14px;
+      border-top: 1px solid var(--line);
     }
 
     .entry-action.primary {
       background: var(--text);
       border-color: var(--text);
-      color: #f8fbff;
+      color: #0b0d10;
     }
 
     .entry-action.danger {
       color: var(--danger);
-      border-color: rgba(177, 76, 90, 0.24);
-      background: rgba(177, 76, 90, 0.08);
+      border-color: rgba(255, 143, 143, 0.32);
+      background: rgba(255, 143, 143, 0.1);
     }
 
     .entry-action:disabled {
@@ -344,7 +450,7 @@
       place-items: center;
       margin: 12px;
       padding: 20px;
-      border: 1px solid #d0d0d0;
+      border: 1px solid var(--line);
       border-radius: 8px;
       background: var(--panel-soft);
       text-align: center;
@@ -381,24 +487,20 @@
         box-shadow: none;
       }
 
-      .toolbar,
-      .entry {
-        grid-template-columns: 1fr;
-      }
-
       .toolbar {
         display: flex;
         gap: 8px;
       }
 
-      .entry {
-        gap: 8px;
-        padding: 8px;
+      /* Phone: list over detail, stacked. */
+      .entry-split {
+        grid-template-columns: 1fr;
+        grid-template-rows: minmax(120px, 40%) minmax(0, 1fr);
       }
 
-      .entry-actions {
-        justify-content: flex-start;
-        min-width: 0;
+      .entry-rows {
+        border-right: 0;
+        border-bottom: 1px solid var(--line);
       }
 
       .summary-stack {
@@ -419,28 +521,31 @@ <h1>Open from Home</h1>
   <section id="inbox-shell" class="shell hidden">
     <aside class="sidebar">
       <div class="sidebar-title">Inbox</div>
-      <div class="summary-stack" aria-label="Inbox summary">
-        <article class="summary-card active">
+      <div class="summary-stack" role="group" aria-label="Inbox filters">
+        <button class="summary-card active" type="button" data-filter="all" aria-pressed="true">
           <strong id="pending-count">0</strong>
           <span>Pending</span>
-        </article>
-        <article class="summary-card">
+        </button>
+        <button class="summary-card" type="button" data-filter="review" aria-pressed="false">
           <strong id="review-count">0</strong>
           <span>Review</span>
-        </article>
+        </button>
       </div>
     </aside>
 
     <main class="main">
       <div class="toolbar">
         <div class="toolbar-title">
-          <h1>Requests</h1>
+          <h1 id="list-title">Requests</h1>
           <p id="status-text" class="status">Loading...</p>
         </div>
         <button id="refresh" class="action-secondary" type="button">Refresh</button>
       </div>
 
-      <section id="entry-list" class="entry-list" aria-live="polite"></section>
+      <div class="entry-split">
+        <section id="entry-rows" class="entry-rows" role="listbox" aria-label="Requests"></section>
+        <section id="entry-detail" class="entry-detail" aria-live="polite"></section>
+      </div>
       <section id="empty-state" class="empty-state hidden">
         <div>
           <h2>No requests</h2>
@@ -456,6 +561,9 @@ <h2>No requests</h2>
       homeToken: new URLSearchParams(window.location.search).get("home_token") || "",
       entries: [],
       refreshInFlight: null,
+      filter: "all",
+      selectedId: "",
+      lastNotifications: {},
     };
 
     const elements = {
@@ -465,8 +573,12 @@ <h2>No requests</h2>
       pendingCount: document.getElementById("pending-count"),
       reviewCount: document.getElementById("review-count"),
       refresh: document.getElementById("refresh"),
-      entryList: document.getElementById("entry-list"),
+      entryRows: document.getElementById("entry-rows"),
+      entryDetail: document.getElementById("entry-detail"),
       emptyState: document.getElementById("empty-state"),
+      entrySplit: document.querySelector(".entry-split"),
+      listTitle: document.getElementById("list-title"),
+      filterButtons: [...document.querySelectorAll(".summary-card[data-filter]")],
     };
 
     function showLocked() {
@@ -636,27 +748,89 @@ <h2>No requests</h2>
       return state.refreshInFlight;
     }
 
+    function filteredEntries() {
+      if (state.filter === "review") {
+        return state.entries.filter((entry) => entry && entry.severity === "attention");
+      }
+      return state.entries;
+    }
+
+    function setFilter(filter) {
+      state.filter = filter === "review" ? "review" : "all";
+      for (const button of elements.filterButtons) {
+        const active = button.dataset.filter === state.filter;
+        button.classList.toggle("active", active);
+        button.setAttribute("aria-pressed", active ? "true" : "false");
+      }
+      elements.listTitle.textContent = state.filter === "review" ? "Review" : "Requests";
+      renderInbox(state.lastNotifications);
+    }
+
     function renderInbox(notifications) {
-      const entries = state.entries;
-      const attentionCount = Number(notifications.attention_count || 0);
-      elements.pendingCount.textContent = String(entries.length);
+      state.lastNotifications = notifications || {};
+      const entries = filteredEntries();
+      const attentionCount = Number((notifications || {}).attention_count || 0);
+      elements.pendingCount.textContent = String(state.entries.length);
       elements.reviewCount.textContent = String(attentionCount);
-      elements.entryList.replaceChildren();
+
+      // Keep the selection when it survives the refresh; otherwise pick the
+      // first entry so the reading pane is never pointlessly empty.
+      if (!entries.some((entry) => entry.id === state.selectedId)) {
+        state.selectedId = entries.length ? entries[0].id || "" : "";
+      }
+
+      elements.entryRows.replaceChildren();
       for (const entry of entries) {
-        elements.entryList.appendChild(createEntry(entry));
+        elements.entryRows.appendChild(createRow(entry));
       }
-      elements.emptyState.classList.toggle("hidden", entries.length !== 0);
-      setStatus(entries.length === 0 ? "" : `${entries.length} pending.`);
+      renderDetail(entries.find((entry) => entry.id === state.selectedId) || null);
+
+      const empty = entries.length === 0;
+      elements.emptyState.classList.toggle("hidden", !empty);
+      elements.entrySplit.classList.toggle("hidden", empty);
+      setStatus(state.entries.length === 0 ? "" : `${state.entries.length} pending.`);
+    }
+
+    function createRow(entry) {
+      const row = document.createElement("button");
+      row.type = "button";
+      row.className = "entry-row";
+      row.setAttribute("role", "option");
+      row.setAttribute("aria-selected", entry.id === state.selectedId ? "true" : "false");
+      row.classList.toggle("active", entry.id === state.selectedId);
+      row.classList.toggle("entry-row-unread", !entry.read);
+
+      const top = document.createElement("div");
+      top.className = "entry-row-top";
+      const title = document.createElement("span");
+      title.className = "entry-row-title";
+      title.textContent = entry.title || "Request";
+      const time = document.createElement("span");
+      time.className = "entry-row-time";
+      time.textContent = entry.created_at ? formatInboxTime(entry.created_at) : "";
+      top.append(title, time);
+
+      const snippet = document.createElement("span");
+      snippet.className = "entry-row-snippet";
+      snippet.textContent = entry.body || "";
+
+      row.append(top, snippet);
+      row.addEventListener("click", () => {
+        state.selectedId = entry.id || "";
+        renderInbox(state.lastNotifications);
+      });
+      return row;
     }
 
-    function createEntry(entry) {
-      const article = document.createElement("article");
-      article.className = "entry";
-      article.dataset.notificationId = entry.id || "";
-      article.dataset.severity = entry.severity || "info";
-
-      const copy = document.createElement("div");
-      copy.className = "entry-copy";
+    function renderDetail(entry) {
+      elements.entryDetail.replaceChildren();
+      if (!entry) {
+        const placeholder = document.createElement("div");
+        placeholder.className = "entry-detail-placeholder";
+        placeholder.textContent = "Select a request";
+        elements.entryDetail.appendChild(placeholder);
+        return;
+      }
 
       const titleRow = document.createElement("div");
       titleRow.className = "entry-title-row";
@@ -688,8 +862,6 @@ <h2>No requests</h2>
       body.className = "entry-body";
       body.textContent = entry.body || "";
 
-      copy.append(titleRow, time, body);
-
       const actions = document.createElement("div");
       actions.className = "entry-actions";
       if (typeof entry.source_app === "string" && entry.source_app.trim()) {
@@ -722,8 +894,7 @@ <h2>No requests</h2>
       if (entry.kind !== "wallet_approval_request" && entry.kind !== "capability_request" && entry.kind !== "inspect_action_request" && entry.kind !== "external_http_request") {
         actions.appendChild(createActionButton("Dismiss", "notification-dismiss:" + entry.id));
       }
-      article.append(copy, actions);
-      return article;
+      elements.entryDetail.append(titleRow, time, body, actions);
     }
 
     function createButton(label, onClick, className) {
@@ -796,7 +967,7 @@ <h2>No requests</h2>
     }
 
     function setButtonsDisabled(disabled) {
-      for (const button of elements.entryList.querySelectorAll("button")) {
+      for (const button of elements.entryDetail.querySelectorAll("button")) {
         button.disabled = disabled;
       }
       elements.refresh.disabled = disabled;
@@ -863,10 +1034,100 @@ <h2>No requests</h2>
         .finally(() => setButtonsDisabled(false));
     });
 
+    for (const button of elements.filterButtons) {
+      button.addEventListener("click", () => setFilter(button.dataset.filter));
+    }
+
+    // Shell menu bar: declare File/View menus to Home; commands come back as
+    // elastos:menu-command and route to the same functions the buttons use.
+    function announceShellMenuManifest() {
+      if (!state.homeToken || window.parent === window) {
+        return;
+      }
+      window.parent.postMessage({
+        type: "home:menu-manifest",
+        homeToken: state.homeToken,
+        menus: [
+          {
+            title: "File",
+            items: [
+              { label: "Refresh", cmd: "refresh" },
+              "-",
+              { label: "Close Window", cmd: "__close-window" },
+            ],
+          },
+          {
+            title: "View",
+            items: [
+              { label: "All Pending", cmd: "filter-all" },
+              { label: "Needs Review", cmd: "filter-review" },
+            ],
+          },
+        ],
+      }, window.location.origin);
+    }
+
+    function handleShellMenuCommand(cmd) {
+      switch (cmd) {
+        case "refresh":
+          requestInboxRefresh().catch((error) => setStatus(error.message || "Could not refresh."));
+          return;
+        case "filter-all":
+          setFilter("all");
+          return;
+        case "filter-review":
+          setFilter("review");
+          return;
+        default:
+      }
+    }
+
+    window.addEventListener("message", (event) => {
+      if (event.origin !== window.location.origin) {
+        return;
+      }
+      const message = event.data;
+      if (message?.type === "elastos:menu-command" && typeof message.cmd === "string") {
+        handleShellMenuCommand(message.cmd);
+      }
+    });
+
+    // List keyboard: the requests list is a listbox — arrows move the
+    // selection, Home/End jump, and the reading pane follows.
+    elements.entryRows.addEventListener("keydown", (event) => {
+      if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+        return;
+      }
+      const entries = filteredEntries();
+      if (!entries.length) {
+        return;
+      }
+      const index = entries.findIndex((entry) => entry.id === state.selectedId);
+      let next = index;
+      if (event.key === "ArrowDown") {
+        next = Math.min(entries.length - 1, index + 1);
+      } else if (event.key === "ArrowUp") {
+        next = Math.max(0, index - 1);
+      } else if (event.key === "Home") {
+        next = 0;
+      } else {
+        next = entries.length - 1;
+      }
+      if (next === index) {
+        return;
+      }
+      event.preventDefault();
+      state.selectedId = entries[next].id || "";
+      renderInbox(state.lastNotifications);
+      const rows = elements.entryRows.querySelectorAll(".entry-row");
+      rows[next]?.focus();
+    });
+
     if (!state.homeToken) {
       showLocked();
     } else {
       showInbox();
+      announceShellMenuManifest();
       requestInboxRefresh().catch(() => {});
       window.addEventListener("message", onRuntimeEvents);
       window.setInterval(() => {
diff --git a/capsules/library/browser/assets/fonts/Inter-latin-var.woff2 b/capsules/library/browser/assets/fonts/Inter-latin-var.woff2
new file mode 100644
index 000000000..91dc3e852
Binary files /dev/null and b/capsules/library/browser/assets/fonts/Inter-latin-var.woff2 differ
diff --git a/capsules/library/browser/elastos-theme.js b/capsules/library/browser/elastos-theme.js
new file mode 100644
index 000000000..bad19b950
--- /dev/null
+++ b/capsules/library/browser/elastos-theme.js
@@ -0,0 +1,122 @@
+/* GENERATED from capsules/_shared/elastos-theme.js — do not edit. Run `just vendor-ui`. */
+/* ElastOS UI — shared theme runtime (single source of truth).
+ *
+ * Vendored into each participating capsule's browser/ dir by `just vendor-ui`,
+ * next to elastos-ui.css. Everything is served same-origin from the gateway,
+ * so localStorage is the one canonical store (mirrors PC2's approach):
+ *
+ *   localStorage["elastos.ui.theme"]  = "dark" | "light" | "auto"
+ *   localStorage["elastos.ui.accent"] = "blue" | "purple" | "pink" | "red" |
+ *                                       "orange" | "yellow" | "green" | "graphite"
+ *
+ * Dark is the default theme when unset; blue is the default accent. "auto"
+ * follows prefers-color-scheme. The resolved theme is applied as
+ * data-el-theme="light" on <html> (absence means dark); the accent as
+ * data-el-accent (absence means blue) — both activate token blocks in
+ * elastos-ui.css. Cross-document sync is the browser's own `storage` event —
+ * no shell messaging required, and sandboxed app frames (allow-same-origin)
+ * see it.
+ */
+(function () {
+  const KEY = "elastos.ui.theme";
+  const ACCENT_KEY = "elastos.ui.accent";
+  const ACCENTS = [
+    "blue",
+    "purple",
+    "pink",
+    "red",
+    "orange",
+    "yellow",
+    "green",
+    "graphite",
+  ];
+  const media = window.matchMedia
+    ? window.matchMedia("(prefers-color-scheme: light)")
+    : null;
+
+  function preference() {
+    try {
+      const value = localStorage.getItem(KEY);
+      if (value === "light" || value === "dark" || value === "auto") {
+        return value;
+      }
+    } catch (_error) {
+      // Storage may be unavailable; fall through to the default.
+    }
+    return "dark";
+  }
+
+  function resolve(pref) {
+    if (pref === "auto") {
+      return media && media.matches ? "light" : "dark";
+    }
+    return pref;
+  }
+
+  function accentPreference() {
+    try {
+      const value = localStorage.getItem(ACCENT_KEY);
+      if (ACCENTS.includes(value)) {
+        return value;
+      }
+    } catch (_error) {
+      // Storage may be unavailable; fall through to the default.
+    }
+    return "blue";
+  }
+
+  function apply() {
+    if (resolve(preference()) === "light") {
+      document.documentElement.setAttribute("data-el-theme", "light");
+    } else {
+      document.documentElement.removeAttribute("data-el-theme");
+    }
+    const accent = accentPreference();
+    if (accent === "blue") {
+      document.documentElement.removeAttribute("data-el-accent");
+    } else {
+      document.documentElement.setAttribute("data-el-accent", accent);
+    }
+  }
+
+  apply();
+
+  window.addEventListener("storage", (event) => {
+    if (event.key === KEY || event.key === ACCENT_KEY || event.key === null) {
+      apply();
+    }
+  });
+
+  if (media && typeof media.addEventListener === "function") {
+    media.addEventListener("change", () => {
+      if (preference() === "auto") {
+        apply();
+      }
+    });
+  }
+
+  window.elastosTheme = {
+    preference,
+    resolved: () => resolve(preference()),
+    set(value) {
+      const pref = value === "light" || value === "auto" ? value : "dark";
+      try {
+        localStorage.setItem(KEY, pref);
+      } catch (_error) {
+        // Applying still works for this document.
+      }
+      apply();
+    },
+    accents: ACCENTS.slice(),
+    accent: accentPreference,
+    setAccent(value) {
+      const accent = ACCENTS.includes(value) ? value : "blue";
+      try {
+        localStorage.setItem(ACCENT_KEY, accent);
+      } catch (_error) {
+        // Applying still works for this document.
+      }
+      apply();
+    },
+  };
+})();
diff --git a/capsules/library/browser/elastos-ui.css b/capsules/library/browser/elastos-ui.css
new file mode 100644
index 000000000..7529596ef
--- /dev/null
+++ b/capsules/library/browser/elastos-ui.css
@@ -0,0 +1,248 @@
+/* GENERATED from capsules/_shared/elastos-ui.css — do not edit. Run `just vendor-ui`. */
+/* ElastOS UI — shared design tokens (single source of truth).
+ *
+ * This file lives at capsules/_shared/elastos-ui.css and is VENDORED into each
+ * participating capsule's browser/ dir by `just vendor-ui` (no gateway route,
+ * no shared runtime surface — capsules stay self-contained). Edit THIS file,
+ * then run `just vendor-ui`; `just alignment-check` fails on drift.
+ *
+ * Contents: Inter (OFL, latin variable subset), palette, type scale, radii,
+ * hairlines, blur/elevation steps, motion tokens, and minimal control
+ * primitives. Layout is each app's business — tokens only.
+ */
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: optional;
+  src: url("./assets/fonts/Inter-latin-var.woff2") format("woff2");
+}
+
+:root {
+  color-scheme: dark;
+
+  /* Palette */
+  --el-bg: #0b0d10;
+  --el-surface: rgba(22, 24, 29, 0.92);
+  --el-surface-raised: #16181d;
+  --el-inset: rgba(255, 255, 255, 0.06);
+  --el-text: #f5f7fa;
+  --el-muted: rgba(245, 247, 250, 0.7);
+  --el-soft: rgba(245, 247, 250, 0.48);
+  --el-brand: #f6921a;
+  --el-brand-strong: #ffb457;
+  --el-focus: rgba(246, 146, 26, 0.55);
+  --el-danger: #ff8f8f;
+  --el-ok: #34d399;
+
+  /* Hairlines (one pair, everywhere) */
+  --el-hairline: rgba(255, 255, 255, 0.12);
+  --el-hairline-strong: rgba(255, 255, 255, 0.18);
+
+  /* Type: 10/11/12/13/14/16/28; weights 400/500/600/700 */
+  --el-font: "Inter", -apple-system, "Segoe UI", "SF Pro Text", sans-serif;
+  --el-font-mono: ui-monospace, "SF Mono", Menlo, monospace;
+  --el-text-2xs: 10px;
+  --el-text-xs: 11px;
+  --el-text-sm: 12px;
+  --el-text-md: 13px;
+  --el-text-lg: 14px;
+  --el-text-xl: 16px;
+  --el-text-display: 28px;
+
+  /* Radii: 4/6/10/12/16/20 + pill */
+  --el-radius-xs: 4px;
+  --el-radius-sm: 6px;
+  --el-radius-md: 10px;
+  --el-radius-lg: 12px;
+  --el-radius-xl: 16px;
+  --el-radius-2xl: 20px;
+  --el-radius-pill: 999px;
+
+  /* Blur: three steps only */
+  --el-blur-1: 8px;
+  --el-blur-2: 16px;
+  --el-blur-3: 24px;
+
+  /* Elevation: three levels */
+  --el-shadow-1: 0 2px 10px rgba(0, 0, 0, 0.22);
+  --el-shadow-2: 0 12px 28px rgba(0, 0, 0, 0.28);
+  --el-shadow-3: 0 24px 80px rgba(0, 0, 0, 0.35);
+
+  /* Motion: 80/140/180/220, exits 150; one ease */
+  --el-dur-1: 80ms;
+  --el-dur-2: 140ms;
+  --el-dur-3: 180ms;
+  --el-dur-4: 220ms;
+  --el-dur-exit: 150ms;
+  --el-ease: cubic-bezier(0.2, 0, 0, 1);
+
+  /* System accent — ONE accent, chosen by the user in System > Personalization
+     (macOS model), obeyed by every app. Selected via data-el-accent on <html>
+     (absence = blue). Apps consume the derived tones and never define their own
+     accent colors. */
+  --el-accent: #0a84ff;
+  --el-accent-ink: #ffffff;
+  --el-accent-strong: color-mix(in srgb, var(--el-accent) 78%, #ffffff);
+  --el-accent-soft: color-mix(in srgb, var(--el-accent) 22%, transparent);
+  --el-accent-faint: color-mix(in srgb, var(--el-accent) 11%, transparent);
+}
+
+/* The eight macOS accents. Yellow and orange carry dark ink on filled controls. */
+:root[data-el-accent="purple"] {
+  --el-accent: #bf5af2;
+}
+
+:root[data-el-accent="pink"] {
+  --el-accent: #ff375f;
+}
+
+:root[data-el-accent="red"] {
+  --el-accent: #ff453a;
+}
+
+:root[data-el-accent="orange"] {
+  --el-accent: #f6921a;
+  --el-accent-ink: #161616;
+}
+
+:root[data-el-accent="yellow"] {
+  --el-accent: #ffd60a;
+  --el-accent-ink: #161616;
+}
+
+:root[data-el-accent="green"] {
+  --el-accent: #30b84f;
+}
+
+:root[data-el-accent="graphite"] {
+  --el-accent: #8e8e93;
+}
+
+/* Light theme: dark is the default (no attribute); the shell sets
+   data-el-theme="light" on <html> and broadcasts changes to app frames.
+   Values restore the pre-token light look: white raised panels over a cool
+   pale stage, navy ink, the same brand orange. */
+:root[data-el-theme="light"] {
+  color-scheme: light;
+
+  --el-bg: #eef1f6;
+  --el-surface: rgba(255, 255, 255, 0.88);
+  --el-surface-raised: #ffffff;
+  --el-inset: rgba(29, 36, 56, 0.055);
+  --el-text: #1d2438;
+  --el-muted: rgba(29, 36, 56, 0.72);
+  --el-soft: rgba(29, 36, 56, 0.5);
+  --el-brand: #f6921a;
+  --el-brand-strong: #e07f0a;
+  --el-focus: rgba(246, 146, 26, 0.55);
+  --el-danger: #b14c5a;
+  --el-ok: #0a7a52;
+
+  --el-hairline: rgba(29, 36, 56, 0.14);
+  --el-hairline-strong: rgba(29, 36, 56, 0.24);
+
+  --el-shadow-1: 0 2px 10px rgba(34, 49, 88, 0.1);
+  --el-shadow-2: 0 12px 28px rgba(34, 49, 88, 0.12);
+  --el-shadow-3: 0 24px 80px rgba(34, 49, 88, 0.16);
+
+  /* "Strong" means higher contrast against the CURRENT background: lighter on
+     dark, deeper on light. */
+  --el-accent-strong: color-mix(in srgb, var(--el-accent) 72%, #1d2438);
+}
+
+/* App base: opt in by putting .el-app on <body>. Dark shell surface, shared
+   type. Layout untouched. */
+.el-app {
+  margin: 0;
+  background: var(--el-bg);
+  color: var(--el-text);
+  font-family: var(--el-font);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+.el-app :focus-visible {
+  outline: 2px solid var(--el-focus);
+  outline-offset: 2px;
+}
+
+/* Minimal control primitives — enough that a capsule needs no bespoke button
+   or input styling to look native. */
+.el-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 32px;
+  padding: 0 14px;
+  border: 1px solid var(--el-hairline);
+  border-radius: var(--el-radius-md);
+  background: var(--el-inset);
+  color: var(--el-text);
+  font: 500 var(--el-text-md) / 1.2 var(--el-font);
+  cursor: pointer;
+  transition: background-color var(--el-dur-2) var(--el-ease);
+}
+
+/* Hover lift over inset surfaces — flips with the theme so apps don't need
+   their own literal rgba(255,255,255,x) hovers. */
+:root {
+  --el-lift: rgba(255, 255, 255, 0.1);
+  --el-lift-strong: rgba(255, 255, 255, 0.16);
+}
+
+:root[data-el-theme="light"] {
+  --el-lift: rgba(29, 36, 56, 0.08);
+  --el-lift-strong: rgba(29, 36, 56, 0.14);
+}
+
+.el-button:hover {
+  background: var(--el-lift);
+}
+
+.el-button:active {
+  transform: scale(0.96);
+}
+
+.el-button:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
+.el-button-primary {
+  border-color: transparent;
+  background: var(--el-brand);
+  color: #161616;
+  font-weight: 600;
+}
+
+.el-button-primary:hover {
+  background: var(--el-brand-strong);
+}
+
+.el-input {
+  min-height: 32px;
+  padding: 0 10px;
+  border: 1px solid var(--el-hairline);
+  border-radius: var(--el-radius-md);
+  background: var(--el-inset);
+  color: var(--el-text);
+  font: 400 var(--el-text-md) / 1.2 var(--el-font);
+}
+
+.el-input::placeholder {
+  color: var(--el-soft);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .el-app *,
+  .el-app *::before,
+  .el-app *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
diff --git a/capsules/library/browser/icons/more.svg b/capsules/library/browser/icons/more.svg
new file mode 100644
index 000000000..5deaf352d
--- /dev/null
+++ b/capsules/library/browser/icons/more.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+    <title>more</title>
+    <g fill="#444f58" class="nc-icon-wrapper">
+        <circle cx="6.2" cy="12" r="1.8" fill="#444f58"></circle>
+        <circle cx="12" cy="12" r="1.8" fill="#444f58"></circle>
+        <circle cx="17.8" cy="12" r="1.8" fill="#444f58"></circle>
+    </g>
+</svg>
diff --git a/capsules/library/browser/icons/search.svg b/capsules/library/browser/icons/search.svg
new file mode 100644
index 000000000..64f4865a7
--- /dev/null
+++ b/capsules/library/browser/icons/search.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+    <title>search</title>
+    <g fill="none" stroke="#444f58" stroke-width="2" stroke-linecap="round" class="nc-icon-wrapper">
+        <circle cx="10.5" cy="10.5" r="6.25"></circle>
+        <path d="m15.3 15.3 5.2 5.2"></path>
+    </g>
+</svg>
diff --git a/capsules/library/browser/index.html b/capsules/library/browser/index.html
index 650c192ef..ee80b61b5 100644
--- a/capsules/library/browser/index.html
+++ b/capsules/library/browser/index.html
@@ -4,6 +4,8 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Library · ElastOS</title>
+  <script src="./elastos-theme.js"></script>
+  <link rel="stylesheet" href="./elastos-ui.css">
   <link rel="stylesheet" href="library.css">
 </head>
 <body>
@@ -34,10 +36,7 @@ <h2 class="window-sidebar-title">Favorites</h2>
         <div class="toolbar-right">
           <h2 id="current-title" class="hidden">Loading</h2>
           <span id="status-text" class="subtitle hidden">Loading Library...</span>
-          <input id="search" class="search hidden" type="search" placeholder="Search" spellcheck="false">
           <button id="picker-action-button" class="btn btn-primary hidden" type="button">Select</button>
-          <button id="upload-button" class="btn hidden" type="button">Upload</button>
-          <button id="new-folder-button" class="btn hidden" type="button">New folder</button>
           <div class="window-navbar-layout-toggle" role="group" aria-label="View mode">
             <button id="grid-button" class="layout-toggle-segment" type="button" title="Icons view" aria-label="Icons view">
               <span class="inline-icon"><img src="icons/layout-icons.svg" alt=""></span>
@@ -52,6 +51,17 @@ <h2 id="current-title" class="hidden">Loading</h2>
             <option value="size">Size</option>
             <option value="type">Type</option>
           </select>
+          <button id="new-folder-button" class="btn hidden" type="button">New folder</button>
+          <button id="upload-button" class="btn hidden" type="button">Upload</button>
+          <button id="more-button" class="navbar-btn" type="button" title="More actions" aria-label="More actions" aria-haspopup="true">
+            <span class="inline-icon"><img src="icons/more.svg" alt=""></span>
+          </button>
+          <div id="toolbar-search" class="toolbar-search">
+            <button id="search-toggle" class="navbar-btn" type="button" title="Search" aria-label="Search" aria-expanded="false">
+              <span class="inline-icon"><img src="icons/search.svg" alt=""></span>
+            </button>
+            <input id="search" class="search" type="search" placeholder="Search" spellcheck="false" tabindex="-1">
+          </div>
           <button id="refresh-button" class="btn hidden" type="button">Refresh</button>
         </div>
       </header>
@@ -60,7 +70,7 @@ <h2 id="current-title" class="hidden">Loading</h2>
       <section id="content" class="content" data-view="grid" aria-label="Objects"></section>
       <footer class="statusbar explorer-footer">
         <span id="footer-left">0 objects</span>
-        <span id="footer-right">Runtime provider: object</span>
+        <span id="footer-right">Library</span>
       </footer>
     </main>
   </section>
diff --git a/capsules/library/browser/library.css b/capsules/library/browser/library.css
index fd2616c32..65735835a 100644
--- a/capsules/library/browser/library.css
+++ b/capsules/library/browser/library.css
@@ -1,29 +1,141 @@
     :root {
-      color-scheme: light;
-      --bg: #f6f7f9;
-      --sidebar-bg: #f0f1f4;
-      --panel: #ffffff;
-      --panel-strong: #ffffff;
-      --panel-soft: #f3f4f6;
-      --line: rgba(60, 60, 67, 0.14);
-      --line-strong: rgba(60, 60, 67, 0.26);
-      --ink: #1d1d1f;
-      --muted: #6b6b6b;
-      --brand: #f6921a;
+      color-scheme: dark;
+      --bg: var(--el-bg);
+      --sidebar-bg: rgba(22, 24, 29, 0.78);
+      --panel: var(--el-surface-raised);
+      --panel-strong: var(--el-surface-raised);
+      --panel-soft: var(--el-inset);
+      --line: var(--el-hairline);
+      --line-strong: var(--el-hairline-strong);
+      --ink: var(--el-text);
+      --muted: var(--el-muted);
+      --brand: var(--el-brand);
       --brand-soft: rgba(246, 146, 26, 0.16);
-      --accent: #007aff;
-      --accent-soft: rgba(0, 122, 255, 0.11);
-      --accent-deep: #0064d2;
-      --good: #2f8f68;
-      --warn: #b57918;
-      --danger: #b14c5a;
+      --accent: var(--el-accent);
+      --accent-soft: var(--el-accent-soft);
+      --accent-deep: var(--el-accent-strong);
+      --good: var(--el-ok);
+      --warn: var(--el-brand-strong);
+      --danger: var(--el-danger);
       --shadow: none;
       --radius-xl: 0;
       --radius-lg: 6px;
       --radius-md: 6px;
-      --mono: "SFMono-Regular", "SF Mono", "Cascadia Code", "JetBrains Mono", monospace;
+      --mono: var(--el-font-mono);
       --explorer-list-columns: 30px minmax(260px, 1fr) 170px 86px 180px;
-      font-family: "Segoe UI", "Inter", "Helvetica Neue", sans-serif;
+      font-family: var(--el-font);
+    }
+
+    :root[data-el-theme="light"] {
+      color-scheme: light;
+      --sidebar-bg: #f0f1f4;
+    }
+
+    :root[data-el-theme="light"] .sidebar {
+      box-shadow: inset -2px 0 5px -2px rgba(0, 0, 0, 0.24);
+    }
+
+    :root[data-el-theme="light"] .btn:hover:not(.btn-primary) {
+      background: var(--el-inset);
+    }
+
+    :root[data-el-theme="light"] .place:hover {
+      background: rgba(0, 0, 0, 0.05);
+    }
+
+    :root[data-el-theme="light"] .place[data-active="true"] {
+      background: #e5e7eb;
+    }
+
+    :root[data-el-theme="light"] .toolbar,
+    :root[data-el-theme="light"] .statusbar {
+      background: #fafafa;
+    }
+
+    :root[data-el-theme="light"] .navbar-btn:hover:not(:disabled) {
+      background: #e5e7eb;
+    }
+
+    :root[data-el-theme="light"] .navbar-btn .inline-icon img,
+    :root[data-el-theme="light"] .layout-toggle-segment .inline-icon img {
+      filter: none;
+    }
+
+    :root[data-el-theme="light"] .layout-toggle-segment-active {
+      background: #fff;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
+    }
+
+    :root[data-el-theme="light"] .content[data-view="list"] .item:nth-child(2n+3):not([data-selected="true"]) {
+      background: #f7f8fa;
+    }
+
+    :root[data-el-theme="light"] .content[data-view="grid"] .item[data-selected="true"] .file-icon {
+      background: rgba(212, 212, 212, 0.19);
+      filter: drop-shadow(0 0 1px rgba(102, 102, 102, 1));
+    }
+
+    :root[data-el-theme="light"] .badge {
+      background: rgba(60, 60, 67, 0.08);
+    }
+
+    :root[data-el-theme="light"] .badge-published {
+      background: rgba(47, 143, 104, 0.12);
+    }
+
+    :root[data-el-theme="light"] .badge-public-folder {
+      background: rgba(38, 112, 153, 0.12);
+      color: #0b5e8e;
+    }
+
+    :root[data-el-theme="light"] .badge-trash {
+      background: rgba(177, 76, 90, 0.12);
+    }
+
+    :root[data-el-theme="light"] .badge-blocked {
+      background: rgba(181, 121, 24, 0.14);
+    }
+
+    :root[data-el-theme="light"] .context-menu,
+    :root[data-el-theme="light"] .menu-submenu {
+      background: rgba(248, 248, 248, 0.98);
+    }
+
+    :root[data-el-theme="light"] .menu-tag-clear {
+      background: #e6e6e6;
+    }
+
+    :root[data-el-theme="light"] .menu-tag-clear:hover {
+      background: #d6d6d6;
+    }
+
+    :root[data-el-theme="light"] .dialog-backdrop {
+      background: rgba(29, 36, 56, 0.18);
+    }
+
+    :root[data-el-theme="light"] .properties-window-title {
+      background: linear-gradient(180deg, #f8f8f9, #eceef3);
+    }
+
+    :root[data-el-theme="light"] .item-props-tab-content,
+    :root[data-el-theme="light"] .item-props-tab-content-selected,
+    :root[data-el-theme="light"] .item-props-tab-selected {
+      background: #fff;
+    }
+
+    :root[data-el-theme="light"] .props-copy-btn:hover:not(.copied) {
+      background: #f3f4f6;
+    }
+
+    :root[data-el-theme="light"] .item-prop-badge-staged,
+    :root[data-el-theme="light"] .item-prop-badge-writable {
+      background: #e0f2fe;
+      color: #075985;
+    }
+
+    :root[data-el-theme="light"] .item-prop-badge-private,
+    :root[data-el-theme="light"] .item-prop-badge-neutral {
+      background: #eceff4;
     }
 
     * {
@@ -94,10 +206,10 @@
       padding: 15px 10px;
       overflow-y: auto;
       border: 0;
-      border-right: 0.5px solid #ccc;
+      border-right: 0.5px solid var(--el-hairline);
       background: var(--sidebar-bg);
       border-radius: 0;
-      box-shadow: inset -2px 0 5px -2px rgba(0, 0, 0, 0.24);
+      box-shadow: inset -2px 0 5px -2px rgba(0, 0, 0, 0.4);
     }
 
     .main {
@@ -154,7 +266,7 @@
     .btn {
       border: 1px solid var(--line);
       border-radius: 7px;
-      background: rgba(255, 255, 255, 0.84);
+      background: var(--el-inset);
       padding: 6px 10px;
       cursor: pointer;
       font-size: 0.84rem;
@@ -165,12 +277,17 @@
 
     .btn:hover {
       border-color: var(--line-strong);
+      background: rgba(255, 255, 255, 0.1);
     }
 
     .btn-primary {
       border-color: transparent;
-      background: var(--ink);
-      color: #f8fbff;
+      background: var(--el-brand);
+      color: #161616;
+    }
+
+    .btn-primary:hover {
+      background: var(--el-brand-strong);
     }
 
     .btn-danger {
@@ -181,15 +298,15 @@
       width: 100%;
       border: 1px solid var(--line);
       border-radius: 7px;
-      background: rgba(255, 255, 255, 0.82);
+      background: var(--el-inset);
       padding: 7px 9px;
       color: var(--ink);
       outline: none;
     }
 
     .search:focus {
-      border-color: rgba(95, 118, 216, 0.45);
-      box-shadow: 0 0 0 3px rgba(95, 118, 216, 0.12);
+      border-color: var(--el-focus);
+      box-shadow: 0 0 0 3px rgba(246, 146, 26, 0.15);
     }
 
     .places {
@@ -244,12 +361,12 @@
     .place:hover,
     .place[data-active="true"] {
       border-color: transparent;
-      background: rgba(0, 0, 0, 0.05);
+      background: rgba(255, 255, 255, 0.08);
     }
 
     .place[data-active="true"] {
       color: var(--accent);
-      background: #e5e7eb;
+      background: rgba(255, 255, 255, 0.12);
     }
 
     .place[data-active="true"] .place-icon img,
@@ -314,7 +431,7 @@
       min-height: 48px;
       padding: 5px 5px 5px 1px;
       margin-bottom: 0;
-      background: #fafafa;
+      background: rgba(255, 255, 255, 0.04);
     }
 
     .toolbar-left,
@@ -334,14 +451,44 @@
       flex: 0 1 auto;
     }
 
+    /* Toolbar search: a magnifier at rest; clicking it slides the field open.
+       The field collapses again on Escape or when it loses focus while empty,
+       so an active filter is never hidden behind a closed icon. */
+    .toolbar-search {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
     .toolbar .search {
+      width: 0;
+      padding: 5px 0;
+      border-width: 0;
+      opacity: 0;
+      pointer-events: none;
+      transition: width 160ms cubic-bezier(0.2, 0, 0, 1), opacity 120ms ease, padding 160ms ease;
+    }
+
+    .toolbar-search.open .search {
       width: 150px;
       padding: 5px 8px;
+      border-width: 1px;
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .toolbar .search {
+        transition: none;
+      }
     }
 
     .navbar-btn {
       width: 25px;
       height: 25px;
+      /* Kill the UA button padding (1px 6px) — with border-box sizing it
+         shrinks the content box and shoves the icon off the circle's center. */
+      padding: 0;
       border: 1px solid transparent;
       border-radius: 999px;
       background: transparent;
@@ -356,7 +503,7 @@
     }
 
     .navbar-btn:hover:not(:disabled) {
-      background: #e5e7eb;
+      background: rgba(255, 255, 255, 0.1);
     }
 
     .navbar-btn:disabled {
@@ -372,13 +519,18 @@
       pointer-events: none;
     }
 
+    .navbar-btn .inline-icon img,
+    .layout-toggle-segment .inline-icon img {
+      filter: invert(1) brightness(1.05);
+    }
+
     .pathbar {
       min-width: 180px;
       flex: 1 1 auto;
       overflow: hidden;
       border: 1px solid var(--line);
       border-radius: 3px;
-      background: #fbfbfc;
+      background: var(--el-inset);
       min-height: 35px;
       padding: 0 10px;
     }
@@ -433,7 +585,7 @@
     .select {
       border: 1px solid var(--line);
       border-radius: 7px;
-      background: #fff;
+      background: var(--el-inset);
       padding: 5px 8px;
       color: var(--ink);
       font-weight: 600;
@@ -444,7 +596,7 @@
       align-items: center;
       gap: 2px;
       border-radius: 6px;
-      background: #e5e7eb;
+      background: var(--el-inset);
       padding: 2px;
     }
 
@@ -469,8 +621,8 @@
     }
 
     .layout-toggle-segment-active {
-      background: #fff;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
+      background: rgba(255, 255, 255, 0.16);
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
     }
 
     .content {
@@ -478,7 +630,7 @@
       min-height: 0;
       overflow: auto;
       padding: 7px 0 12px;
-      background: #fff;
+      background: var(--panel);
     }
 
     .content[data-view="grid"] {
@@ -539,23 +691,23 @@
     }
 
     .content[data-view="list"] .item:nth-child(2n+3):not([data-selected="true"]) {
-      background: #f7f8fa;
+      background: rgba(255, 255, 255, 0.03);
     }
 
     .content[data-view="list"] .item[data-selected="true"] {
-      background: var(--accent);
+      background: var(--accent-soft);
       color: var(--ink);
     }
 
     .content[data-view="grid"] .item[data-selected="true"] .item-name {
       background: var(--brand);
-      color: #fff;
+      color: #161616;
     }
 
     .content[data-view="grid"] .item[data-selected="true"] .file-icon {
-      background: rgba(212, 212, 212, 0.19);
+      background: rgba(255, 255, 255, 0.12);
       border-radius: 3px;
-      filter: drop-shadow(0 0 1px rgba(102, 102, 102, 1));
+      filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6));
     }
 
     .content[data-view="grid"] .file-icon {
@@ -602,6 +754,17 @@
     .content[data-view="grid"] .item-name {
       max-width: 110px;
       text-align: center;
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: baseline;
+      justify-content: center;
+      column-gap: 5px;
+    }
+
+    .content[data-view="grid"] .item-name-text {
+      min-width: 0;
+      overflow: hidden;
+      word-break: break-word;
     }
 
     .content[data-view="list"] .item-name {
@@ -627,11 +790,11 @@
 
     .rename-input {
       width: 100%;
-      border: 1px solid rgba(0, 122, 255, 0.45);
+      border: 1px solid var(--el-focus);
       border-radius: 4px;
       padding: 2px 4px;
       color: var(--ink);
-      background: #fff;
+      background: var(--el-surface-raised);
       outline: none;
       text-align: inherit;
       font-size: 13px;
@@ -706,7 +869,7 @@
       align-items: center;
       border-radius: 999px;
       padding: 2px 5px;
-      background: rgba(60, 60, 67, 0.08);
+      background: rgba(255, 255, 255, 0.08);
       color: var(--muted);
       font-size: 9px;
       font-weight: 700;
@@ -717,22 +880,22 @@
     }
 
     .badge-published {
-      background: rgba(47, 143, 104, 0.12);
+      background: rgba(52, 211, 153, 0.16);
       color: var(--good);
     }
 
     .badge-public-folder {
-      background: rgba(38, 112, 153, 0.12);
-      color: #0b5e8e;
+      background: rgba(106, 176, 255, 0.16);
+      color: var(--accent-deep);
     }
 
     .badge-trash {
-      background: rgba(177, 76, 90, 0.12);
+      background: rgba(255, 143, 143, 0.16);
       color: var(--danger);
     }
 
     .badge-blocked {
-      background: rgba(181, 121, 24, 0.14);
+      background: rgba(255, 180, 87, 0.16);
       color: var(--warn);
     }
 
@@ -743,8 +906,8 @@
       height: 25px;
       align-items: center;
       border-bottom: 1px solid var(--line);
-      background: #f9fafb;
-      color: #555c61;
+      background: var(--el-surface-raised);
+      color: var(--muted);
       font-size: 12px;
       line-height: 25px;
       position: sticky;
@@ -804,7 +967,7 @@
       margin: 8px 10px 0;
       border: 1px solid var(--line);
       border-radius: var(--radius-md);
-      background: rgba(255, 255, 255, 0.62);
+      background: var(--el-inset);
       padding: 10px;
     }
 
@@ -848,12 +1011,12 @@
       justify-content: space-between;
       gap: 12px;
       min-height: 38px;
-      border-top: 1px solid rgba(83, 103, 164, 0.1);
+      border-top: 1px solid var(--el-hairline);
       padding: 6px 12px 14px;
       color: var(--muted);
       font-size: 13px;
       min-width: 0;
-      background: #fafafa;
+      background: rgba(255, 255, 255, 0.04);
       user-select: none;
     }
 
@@ -871,12 +1034,12 @@
       max-width: calc(100vw - 16px);
       max-height: calc(100vh - 16px);
       overflow: visible;
-      border: 1px solid rgba(0, 0, 0, 0.18);
+      border: 1px solid var(--el-hairline-strong);
       border-radius: 7px;
-      background: rgba(248, 248, 248, 0.98);
-      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
+      background: rgba(30, 32, 38, 0.98);
+      box-shadow: var(--el-shadow-2);
       padding: 5px 0;
-      color: #1f2328;
+      color: var(--el-text);
       white-space: normal;
       user-select: none;
       scrollbar-width: thin;
@@ -919,7 +1082,7 @@
 
     .menu-item-mark {
       flex: 0 0 auto;
-      color: rgba(31, 35, 40, 0.56);
+      color: var(--el-soft);
       font-size: 12px;
     }
 
@@ -932,6 +1095,98 @@
       color: rgba(255, 255, 255, 0.74);
     }
 
+    /* file-manager-style colour-tag row in the context menu: seven dots + a clear button. */
+    .menu-tags-row {
+      display: flex;
+      align-items: center;
+      gap: 9px;
+      padding: 7px 14px 8px;
+    }
+
+    .menu-tag-dot {
+      width: 17px;
+      height: 17px;
+      flex: 0 0 auto;
+      padding: 0;
+      border: 0;
+      border-radius: 50%;
+      cursor: pointer;
+      background: var(--tag-color, #9aa0a6);
+      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
+      transition: transform 0.08s ease;
+    }
+
+    .menu-tag-dot:hover {
+      transform: scale(1.15);
+    }
+
+    .menu-tag-dot[data-active="true"] {
+      box-shadow: 0 0 0 2px var(--el-surface-raised), 0 0 0 3.5px var(--tag-color, #9aa0a6);
+    }
+
+    .menu-tag-clear {
+      margin-left: auto;
+      width: 17px;
+      height: 17px;
+      flex: 0 0 auto;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      border: 0;
+      border-radius: 50%;
+      cursor: pointer;
+      background: rgba(255, 255, 255, 0.14);
+      color: var(--el-muted);
+      font-size: 10px;
+      line-height: 1;
+    }
+
+    .menu-tag-clear:hover {
+      background: rgba(255, 255, 255, 0.22);
+    }
+
+    /* The colour-tag dot rendered on a tagged item. Absolutely placed via grid so it never shifts
+       the list columns. */
+    .item-tag {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background: var(--tag-color, #9aa0a6);
+      box-shadow: 0 0 0 1.5px var(--el-surface-raised), 0 0 1px rgba(0, 0, 0, 0.35);
+      pointer-events: none;
+    }
+
+    .content[data-view="list"] .item-tag {
+      grid-column: 2;
+      grid-row: 1;
+      justify-self: end;
+      align-self: center;
+      margin-right: 96px;
+    }
+
+    /* Grid view: the right-aligned badge dot is an explicit grid cell, which displaced the
+       auto-placed icon. Hide it in grid and use the inline dot inside the name instead (file-manager
+       style — sits just left of the centered filename, never moving the icon). */
+    .content[data-view="grid"] .item-tag {
+      display: none;
+    }
+
+    .item-tag-inline {
+      display: none;
+      width: 9px;
+      height: 9px;
+      border-radius: 50%;
+      background: var(--tag-color, #9aa0a6);
+      box-shadow: 0 0 0 1.5px var(--el-surface-raised), 0 0 1px rgba(0, 0, 0, 0.35);
+    }
+
+    .content[data-view="grid"] .item-tag-inline {
+      display: block;
+      flex: 0 0 auto;
+      align-self: center;
+    }
+
     .menu-item[disabled],
     .menu-item[disabled]:hover {
       cursor: default;
@@ -943,7 +1198,7 @@
     .menu-divider {
       height: 1px;
       margin: 4px 8px;
-      background: rgba(0, 0, 0, 0.12);
+      background: var(--el-hairline);
     }
 
     .menu-divider hr {
@@ -957,12 +1212,12 @@
       display: none;
       width: 218px;
       max-width: calc(100vw - 16px);
-      border: 1px solid rgba(0, 0, 0, 0.18);
+      border: 1px solid var(--el-hairline-strong);
       border-radius: 7px;
-      background: rgba(248, 248, 248, 0.98);
-      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
+      background: rgba(30, 32, 38, 0.98);
+      box-shadow: var(--el-shadow-2);
       padding: 5px 0;
-      color: #1f2328;
+      color: var(--el-text);
       z-index: 81;
     }
 
@@ -983,7 +1238,7 @@
       z-index: 50;
       display: grid;
       place-items: center;
-      background: rgba(29, 36, 56, 0.18);
+      background: rgba(0, 0, 0, 0.45);
       backdrop-filter: blur(4px);
       padding: 18px;
     }
@@ -1017,7 +1272,7 @@
       padding: 0;
       display: block;
       overflow: hidden;
-      background: rgb(241 242 246);
+      background: var(--el-surface-raised);
       border-radius: 6px;
     }
 
@@ -1028,11 +1283,11 @@
       justify-content: space-between;
       gap: 12px;
       padding: 8px 10px;
-      color: #1d1d1f;
+      color: var(--el-text);
       font-size: 0.83rem;
       font-weight: 600;
-      border-bottom: 1px solid rgba(60, 60, 67, 0.16);
-      background: linear-gradient(180deg, #f8f8f9, #eceef3);
+      border-bottom: 1px solid var(--el-hairline);
+      background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
     }
 
     .properties-window-title button {
@@ -1040,10 +1295,10 @@
       height: 22px;
       display: grid;
       place-items: center;
-      border: 1px solid rgba(60, 60, 67, 0.2);
+      border: 1px solid var(--el-hairline-strong);
       border-radius: 999px;
-      background: #fff;
-      color: #3f4650;
+      background: var(--el-inset);
+      color: var(--el-text);
       cursor: pointer;
       line-height: 1;
     }
@@ -1067,15 +1322,15 @@
       margin-top: -1px;
       padding: 5px 10px;
       overflow: auto;
-      border: 1px solid #ccc;
+      border: 1px solid var(--el-hairline-strong);
       border-radius: 3px;
-      background: #fff;
-      color: #333;
+      background: #1f232b;
+      color: var(--el-text);
     }
 
     .item-props-tab-content-selected {
       display: block;
-      background: #fff;
+      background: #1f232b;
     }
 
     .item-props-tab-btn {
@@ -1087,21 +1342,21 @@
       border: 1px solid transparent;
       border-top-left-radius: 3px;
       border-top-right-radius: 3px;
-      color: #374653;
+      color: var(--el-muted);
       font-size: 0.84rem;
     }
 
     .item-props-tab-btn:hover {
-      color: #1a1a1a;
+      color: var(--el-text);
     }
 
     .item-props-tab-selected {
       position: relative;
       margin-bottom: -1px;
-      border: 1px solid #ccc;
+      border: 1px solid var(--el-hairline-strong);
       border-bottom: none;
-      background: #fff;
-      color: #000;
+      background: #1f232b;
+      color: var(--el-text);
     }
 
     .item-props-tbl {
@@ -1142,7 +1397,7 @@
     .props-copy-text {
       flex: 1;
       min-width: 0;
-      color: #1f2933;
+      color: var(--el-text);
       font-family: var(--mono);
       font-size: 11px;
       line-height: 1.45;
@@ -1156,21 +1411,21 @@
       display: inline-grid;
       flex: 0 0 auto;
       place-items: center;
-      border: 1px solid #d1d5db;
+      border: 1px solid var(--el-hairline);
       border-radius: 3px;
-      background: #fff;
-      color: #374151;
+      background: var(--el-inset);
+      color: var(--el-muted);
       cursor: pointer;
     }
 
     .props-copy-btn:hover {
-      background: #f3f4f6;
+      background: rgba(255, 255, 255, 0.12);
     }
 
     .props-copy-btn.copied {
-      border-color: #8fd19e;
-      background: #d4edda;
-      color: #155724;
+      border-color: rgba(52, 211, 153, 0.5);
+      background: rgba(52, 211, 153, 0.18);
+      color: var(--el-ok);
     }
 
     .item-prop-badge {
@@ -1185,38 +1440,38 @@
     }
 
     .item-prop-badge-public {
-      background: #d4edda;
-      color: #155724;
+      background: rgba(52, 211, 153, 0.16);
+      color: var(--el-ok);
     }
 
     .item-prop-badge-shared {
-      background: #dbeafe;
-      color: #1e3a8a;
+      background: rgba(106, 176, 255, 0.16);
+      color: var(--accent-deep);
     }
 
     .item-prop-badge-staged {
-      background: #e0f2fe;
-      color: #075985;
+      background: rgba(125, 211, 252, 0.14);
+      color: #7dd3fc;
     }
 
     .item-prop-badge-private {
-      background: #eceff4;
-      color: #374151;
+      background: rgba(255, 255, 255, 0.08);
+      color: var(--el-muted);
     }
 
     .item-prop-badge-readonly {
-      background: #fff3cd;
-      color: #856404;
+      background: rgba(255, 180, 87, 0.16);
+      color: var(--el-brand-strong);
     }
 
     .item-prop-badge-writable {
-      background: #e0f2fe;
-      color: #075985;
+      background: rgba(125, 211, 252, 0.14);
+      color: #7dd3fc;
     }
 
     .item-prop-badge-neutral {
-      background: #eceff4;
-      color: #374151;
+      background: rgba(255, 255, 255, 0.08);
+      color: var(--el-muted);
     }
 
     .properties-window-actions {
@@ -1247,7 +1502,7 @@
       overflow: auto;
       border: 1px solid var(--line);
       border-radius: var(--radius-md);
-      background: rgba(255, 255, 255, 0.68);
+      background: var(--el-inset);
       padding: 10px;
       color: var(--ink);
       white-space: pre-wrap;
@@ -1266,7 +1521,7 @@
       align-items: start;
       border: 1px solid var(--line);
       border-radius: var(--radius-md);
-      background: rgba(255, 255, 255, 0.72);
+      background: var(--el-inset);
       padding: 10px;
       cursor: pointer;
     }
@@ -1303,7 +1558,7 @@
       resize: vertical;
       border: 1px solid var(--line);
       border-radius: var(--radius-md);
-      background: rgba(255, 255, 255, 0.84);
+      background: var(--el-inset);
       padding: 9px;
       color: var(--ink);
       font: inherit;
@@ -1311,8 +1566,8 @@
     }
 
     .dialog-field textarea:focus {
-      border-color: rgba(0, 122, 255, 0.45);
-      box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
+      border-color: var(--el-focus);
+      box-shadow: 0 0 0 3px rgba(246, 146, 26, 0.15);
     }
 
     .dialog-error {
@@ -1366,6 +1621,11 @@
         overflow: auto;
       }
 
+      /* Narrow window: the expanded search field takes less room. */
+      .toolbar-search.open .search {
+        width: 110px;
+      }
+
       .sidebar {
         overflow: visible;
       }
@@ -1386,7 +1646,7 @@
       .main,
       .locked-card {
         border-radius: 14px;
-        box-shadow: 0 10px 26px rgba(34, 49, 88, 0.08);
+        box-shadow: var(--el-shadow-1);
       }
 
       .sidebar,
diff --git a/capsules/library/browser/src/app.js b/capsules/library/browser/src/app.js
index 70b56734a..dc57893c7 100644
--- a/capsules/library/browser/src/app.js
+++ b/capsules/library/browser/src/app.js
@@ -25,6 +25,7 @@ import { createLibraryPreview } from "./preview.js";
 import { createLibraryRealtime } from "./realtime.js";
 import { createLibraryRenderer, iconPlaceholder } from "./render.js";
 import { createLibrarySelection } from "./selection.js";
+import { TAG_COLORS, getTag, setTag } from "./tags.js";
 import {
   MUTATING_PROVIDER_OPS,
   cacheFolderListing,
@@ -61,6 +62,9 @@ import { createLibraryUploads } from "./uploads.js";
       newFolderButton: document.getElementById("new-folder-button"),
       pickerActionButton: document.getElementById("picker-action-button"),
       search: document.getElementById("search"),
+      searchToggle: document.getElementById("search-toggle"),
+      toolbarSearch: document.getElementById("toolbar-search"),
+      moreButton: document.getElementById("more-button"),
       currentTitle: document.getElementById("current-title"),
       statusText: document.getElementById("status-text"),
       refreshButton: document.getElementById("refresh-button"),
@@ -366,7 +370,7 @@ import { createLibraryUploads } from "./uploads.js";
       return folderObject?.metadata?.readonly !== false;
     }
 
-    function setFolderStatus(text) {
+    function setFolderStatus(_text) {
       if (isArchivePickerMode()) {
         setStatus("");
         return;
@@ -375,7 +379,9 @@ import { createLibraryUploads } from "./uploads.js";
         setStatus(attachStatusText());
         return;
       }
-      setStatus(text);
+      // The object count lives in the footer statusbar (with selection state);
+      // the toolbar strip only carries transient messages and picker prompts.
+      setStatus("");
     }
 
     function syncModeChrome() {
@@ -397,7 +403,7 @@ import { createLibraryUploads } from "./uploads.js";
         setStatus("");
         return;
       }
-      setStatus("Ready.");
+      setStatus("");
     }
 
     async function completeAttachPicker() {
@@ -708,6 +714,7 @@ import { createLibraryUploads } from "./uploads.js";
         documents: "icons/sidebar-folder-documents.svg",
         pictures: "icons/sidebar-folder-pictures.svg",
         videos: "icons/sidebar-folder-videos.svg",
+        music: "icons/sidebar-folder.svg",
         downloads: "icons/sidebar-folder.svg",
         public: "icons/sidebar-folder-public.svg",
         webspaces: "icons/sidebar-folder.svg",
@@ -753,6 +760,61 @@ import { createLibraryUploads } from "./uploads.js";
       return visibleObjectsForState(state);
     }
 
+    // Apply (or, when colorId is falsy, clear) a colour tag on every given object, then refresh
+    // just those rows. Tags live in localStorage (see tags.js), so this is instant and local.
+    function applyTag(objects, colorId) {
+      for (const object of objects) {
+        if (!object || !object.uri) continue;
+        setTag(object.uri, colorId);
+        state.objectNodeCache.delete(object.uri); // bust the render cache so the dot updates
+      }
+      scheduleContentRender();
+    }
+
+    // A file-manager-style colour-tag row: seven dots + Clear. A dot already on every selected item is
+    // shown active; clicking it toggles it off. Returns a custom menu entry that builds its own DOM.
+    function tagsMenuRow(objects) {
+      const uris = objects.map((object) => object.uri).filter(Boolean);
+      const current = uris.length
+        ? uris.map((uri) => getTag(uri)).reduce((a, b) => (a === b ? a : ""))
+        : "";
+      return {
+        custom: ({ hideMenu }) => {
+          const row = document.createElement("div");
+          row.className = "menu-tags-row";
+          for (const color of TAG_COLORS) {
+            const dot = document.createElement("button");
+            dot.type = "button";
+            dot.className = "menu-tag-dot";
+            dot.style.setProperty("--tag-color", color.hex);
+            dot.title = color.label;
+            dot.setAttribute("aria-label", `Tag ${color.label}`);
+            if (current && current === color.id) dot.dataset.active = "true";
+            dot.addEventListener("click", (event) => {
+              event.stopPropagation();
+              // Toggle: clicking the colour already on all selected items clears it.
+              applyTag(objects, current === color.id ? "" : color.id);
+              hideMenu();
+            });
+            row.appendChild(dot);
+          }
+          const clear = document.createElement("button");
+          clear.type = "button";
+          clear.className = "menu-tag-clear";
+          clear.title = "Clear tag";
+          clear.setAttribute("aria-label", "Clear tag");
+          clear.textContent = "\u2715";
+          clear.addEventListener("click", (event) => {
+            event.stopPropagation();
+            applyTag(objects, "");
+            hideMenu();
+          });
+          row.appendChild(clear);
+          return row;
+        },
+      };
+    }
+
     function showMenuForObject(object, x, y) {
       if (!isSelected(object.uri)) {
         selectOnly(object.uri);
@@ -837,6 +899,10 @@ import { createLibraryUploads } from "./uploads.js";
       if (object.published && publicCid) {
         actions.push(menuAction("Copy Published Link", () => copyText("elastos://" + publicCid, "published link")));
       }
+      if (!inTrash(object)) {
+        actions.push("-");
+        actions.push(tagsMenuRow([object]));
+      }
       actions.push(menuAction("Properties", () => showProperties(object)));
       renderMenu(actions, x, y);
     }
@@ -904,6 +970,10 @@ import { createLibraryUploads } from "./uploads.js";
       if (active.some((object) => hasCapability(object, "trash"))) actions.push(menuAction("Delete", trashSelectedObjects));
       if (trash.length) actions.push(menuAction("Restore", restoreSelectedObjects));
       if (permanentlyDeletable) actions.push(menuAction("Delete Permanently", deleteSelectedObjects));
+      if (active.length) {
+        actions.push("-");
+        actions.push(tagsMenuRow(active));
+      }
       renderMenu(actions, x, y);
     }
 
@@ -947,6 +1017,40 @@ import { createLibraryUploads } from "./uploads.js";
       renderMenu(actions, x, y);
     }
 
+    // The toolbar "…" menu: folder actions only. View is omitted (the segmented
+    // toggle sits right beside the button) and Show Hidden stays in the
+    // background context menu — the toolbar carries the everyday actions.
+    function showToolbarMenu(x, y) {
+      const readOnly = currentFolderReadOnly();
+      const actions = [];
+      actions.push(menuAction("Sort By", null, {
+        children: [
+          menuAction("Name", () => setSort("name"), { checked: state.sort === "name" }),
+          menuAction("Date Modified", () => setSort("modified"), { checked: state.sort === "modified" }),
+          menuAction("Type", () => setSort("type"), { checked: state.sort === "type" }),
+          menuAction("Size", () => setSort("size"), { checked: state.sort === "size" }),
+          "-",
+          menuAction("Ascending", () => setSortOrder("asc"), { checked: state.sortOrder !== "desc" }),
+          menuAction("Descending", () => setSortOrder("desc"), { checked: state.sortOrder === "desc" }),
+        ],
+      }));
+      actions.push("-");
+      if (!readOnly) {
+        actions.push(menuAction("New", null, {
+          children: [
+            menuAction("Folder", createFolder),
+            menuAction("Text Document", createTextDocument),
+          ],
+        }));
+      }
+      if (canPasteInto(state.currentUri)) actions.push(menuAction("Paste", () => pasteClipboardTo(state.currentUri)));
+      if (!readOnly) actions.push(menuAction("Upload Here", () => elements.fileInput.click()));
+      actions.push("-");
+      actions.push(menuAction("Refresh", loadCurrentFolder));
+      actions.push(menuAction("Properties", () => showFolderProperties()));
+      renderMenu(actions, x, y);
+    }
+
     function showFolderProperties() {
       const root = rootForUri(state.currentUri);
       showProperties({
@@ -1030,6 +1134,7 @@ import { createLibraryUploads } from "./uploads.js";
         showError,
         showMenuForObject,
         showPlaceMenu,
+        showToolbarMenu,
         startRename,
         state,
         stopLibraryEventStream,
@@ -1039,6 +1144,79 @@ import { createLibraryUploads } from "./uploads.js";
       });
     }
 
+    // Shell menu bar: declare File/View menus to Home; commands come back as
+    // elastos:menu-command and route to the same functions the toolbar uses.
+    function announceMenuManifest() {
+      if (!state.homeToken || window.parent === window) {
+        return;
+      }
+      window.parent.postMessage({
+        type: "home:menu-manifest",
+        homeToken: state.homeToken,
+        menus: [
+          {
+            title: "File",
+            items: [
+              { label: "New Folder", cmd: "new-folder" },
+              { label: "New Text Document", cmd: "new-text-document" },
+              "-",
+              { label: "Upload Files...", cmd: "upload" },
+              "-",
+              { label: "New Window", cmd: "__new-window" },
+              { label: "Close Window", cmd: "__close-window" },
+            ],
+          },
+          {
+            title: "View",
+            items: [
+              { label: "As Icons", cmd: "view-icons" },
+              { label: "As Details", cmd: "view-details" },
+              "-",
+              { label: "Show Hidden", cmd: "toggle-hidden" },
+              { label: "Refresh", cmd: "refresh" },
+            ],
+          },
+        ],
+      }, window.location.origin);
+    }
+
+    function handleMenuCommand(cmd) {
+      switch (cmd) {
+        case "new-folder":
+          createFolder().catch(showError);
+          return;
+        case "new-text-document":
+          createTextDocument();
+          return;
+        case "upload":
+          elements.fileInput.click();
+          return;
+        case "view-icons":
+          setView("grid");
+          return;
+        case "view-details":
+          setView("list");
+          return;
+        case "toggle-hidden":
+          toggleShowHidden();
+          return;
+        case "refresh":
+          loadCurrentFolder().catch(showError);
+          return;
+        default:
+      }
+    }
+
+    window.addEventListener("message", (event) => {
+      if (event.origin !== window.location.origin) {
+        return;
+      }
+      const message = event.data;
+      if (message?.type === "elastos:menu-command" && typeof message.cmd === "string") {
+        handleMenuCommand(message.cmd);
+      }
+    });
+
     async function boot() {
       if (!state.homeToken) {
         elements.lockedShell.classList.remove("hidden");
@@ -1048,6 +1226,7 @@ import { createLibraryUploads } from "./uploads.js";
       elements.content.dataset.view = state.view;
       syncModeChrome();
       bindEvents();
+      announceMenuManifest();
       try {
         await loadRoots();
         installBrowserHistory();
diff --git a/capsules/library/browser/src/events.js b/capsules/library/browser/src/events.js
index fc280dbfc..abe439038 100644
--- a/capsules/library/browser/src/events.js
+++ b/capsules/library/browser/src/events.js
@@ -34,6 +34,7 @@ export function bindLibraryEvents({
   showError,
   showMenuForObject,
   showPlaceMenu,
+  showToolbarMenu,
   startRename,
   state,
   stopLibraryEventStream,
@@ -132,6 +133,47 @@ export function bindLibraryEvents({
     state.query = elements.search.value || "";
     scheduleContentRender();
   });
+  // Toolbar search: the magnifier expands into the field; Escape or an empty
+  // blur collapses it, so a live filter can never hide behind a closed icon.
+  const setSearchOpen = (open) => {
+    elements.toolbarSearch.classList.toggle("open", open);
+    elements.searchToggle.setAttribute("aria-expanded", open ? "true" : "false");
+    elements.search.tabIndex = open ? 0 : -1;
+    if (open) {
+      elements.search.focus();
+    }
+  };
+  elements.searchToggle.addEventListener("click", () => {
+    const isOpen = elements.toolbarSearch.classList.contains("open");
+    if (isOpen && !elements.search.value) {
+      setSearchOpen(false);
+      return;
+    }
+    setSearchOpen(true);
+  });
+  elements.search.addEventListener("blur", () => {
+    if (!elements.search.value) {
+      setSearchOpen(false);
+    }
+  });
+  elements.search.addEventListener("keydown", (event) => {
+    if (event.key !== "Escape") {
+      return;
+    }
+    event.stopPropagation();
+    elements.search.value = "";
+    state.query = "";
+    scheduleContentRender();
+    setSearchOpen(false);
+  });
+  // The toolbar "…" opens the folder-action menu — sort, New, Paste, Upload,
+  // Refresh, Properties — anchored under the button. View is not repeated
+  // here; its segmented toggle sits directly beside it.
+  elements.moreButton.addEventListener("click", (event) => {
+    event.stopPropagation();
+    const rect = elements.moreButton.getBoundingClientRect();
+    showToolbarMenu(rect.right, rect.bottom + 6);
+  });
   elements.sortSelect.addEventListener("change", () => {
     setSort(elements.sortSelect.value || "name");
   });
diff --git a/capsules/library/browser/src/menu.js b/capsules/library/browser/src/menu.js
index f06145783..db1d0e4fd 100644
--- a/capsules/library/browser/src/menu.js
+++ b/capsules/library/browser/src/menu.js
@@ -67,6 +67,13 @@ export function createLibraryMenu({ contextMenu, perf, showError }) {
         container.appendChild(divider);
         continue;
       }
+      // A custom row builds its own DOM (e.g. the file-manager-style colour-tag dots). It owns its own
+      // click handling; `hideMenu` is provided so it can dismiss the menu after acting.
+      if (typeof entry.custom === "function") {
+        const node = entry.custom({ hideMenu });
+        if (node) container.appendChild(node);
+        continue;
+      }
       const { label, action, disabled, checked } = entry;
       const children = Array.isArray(entry.children) ? entry.children : [];
       const wrapper = document.createElement("div");
diff --git a/capsules/library/browser/src/render.js b/capsules/library/browser/src/render.js
index 1f6da4cc8..6a61ef2f4 100644
--- a/capsules/library/browser/src/render.js
+++ b/capsules/library/browser/src/render.js
@@ -10,6 +10,7 @@ import {
   shortUri,
   visibilityContract,
 } from "./model.js";
+import { getTag, tagColor } from "./tags.js";
 
 const LARGE_RENDER_THRESHOLD = 240;
 const INITIAL_RENDER_LIMIT = 120;
@@ -153,9 +154,20 @@ export function createLibraryRenderer({
       inTrash(object) ? '<span class="badge badge-trash">Trash</span>' : "",
     ].join("");
     const badgesMarkup = badges ? `<span class="badges">${badges}</span>` : "";
+    const tag = getTag(object.uri);
+    const tagHex = tag ? tagColor(tag)?.hex || "#9aa0a6" : "";
+    // List view keeps the right-aligned badge dot (a separate cell). Grid view uses an inline dot
+    // placed just left of the centered filename — desktop file-manager style — so it never displaces the icon.
+    const tagMarkup = tag
+      ? `<span class="item-tag" style="--tag-color:${escapeHtml(tagHex)}" title="Tag: ${escapeHtml(tag)}" aria-label="Tag: ${escapeHtml(tag)}"></span>`
+      : "";
+    const tagDotInline = tag
+      ? `<span class="item-tag-inline" style="--tag-color:${escapeHtml(tagHex)}" aria-hidden="true"></span>`
+      : "";
     item.innerHTML = `
       ${iconPlaceholder(iconFor(object), "file-icon")}
-      <span class="item-name" data-name-uri="${escapeHtml(object.uri)}" title="${escapeHtml(object.name)}">${escapeHtml(object.name)}</span>
+      <span class="item-name" data-name-uri="${escapeHtml(object.uri)}" title="${escapeHtml(object.name)}">${tagDotInline}<span class="item-name-text">${escapeHtml(object.name)}</span></span>
+      ${tagMarkup}
       <span class="item-date">${escapeHtml(formatTime(object.modified_at))}</span>
       <span class="item-size">${escapeHtml(isDirectory(object) ? "-" : formatBytes(object.size))}</span>
       <span class="item-type">${escapeHtml(isDirectory(object) ? "Folder" : object.mime || "File")}</span>
@@ -168,6 +180,7 @@ export function createLibraryRenderer({
   function objectRenderSignature(object) {
     return [
       object.uri,
+      getTag(object.uri),
       object.kind,
       object.name,
       object.mime || "",
diff --git a/capsules/library/browser/src/tags.js b/capsules/library/browser/src/tags.js
new file mode 100644
index 000000000..6619b38f5
--- /dev/null
+++ b/capsules/library/browser/src/tags.js
@@ -0,0 +1,59 @@
+// File-manager-style colour tags for library items. Stored LOCALLY (this browser, via localStorage)
+// keyed by object URI — instant and backend-free, an organisation/testing aid that never touches
+// the trusted runtime. A single colour per item (clicking a colour toggles it; "Clear" removes).
+// The seven colours use a familiar desktop tag palette.
+
+const STORAGE_KEY = "elastos.library.tags.v1";
+
+export const TAG_COLORS = [
+  { id: "red", label: "Red", hex: "#fc5b57" },
+  { id: "orange", label: "Orange", hex: "#fba23a" },
+  { id: "yellow", label: "Yellow", hex: "#f7cf45" },
+  { id: "green", label: "Green", hex: "#5bc454" },
+  { id: "blue", label: "Blue", hex: "#4a9bf6" },
+  { id: "purple", label: "Purple", hex: "#c46be0" },
+  { id: "grey", label: "Grey", hex: "#9aa0a6" },
+];
+
+function readAll() {
+  try {
+    return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || "{}") || {};
+  } catch (_err) {
+    return {};
+  }
+}
+
+function writeAll(map) {
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(map));
+  } catch (_err) {
+    /* storage full / disabled — tagging is a best-effort local convenience */
+  }
+}
+
+// The colour id currently applied to `uri` ("" when untagged).
+export function getTag(uri) {
+  if (!uri) return "";
+  return readAll()[uri] || "";
+}
+
+// Set (or with a falsy colour, clear) the tag for `uri`.
+export function setTag(uri, colorId) {
+  if (!uri) return;
+  const map = readAll();
+  if (colorId) {
+    map[uri] = colorId;
+  } else {
+    delete map[uri];
+  }
+  writeAll(map);
+}
+
+export function clearTag(uri) {
+  setTag(uri, "");
+}
+
+// Look up the colour descriptor for a tag id (or null).
+export function tagColor(colorId) {
+  return TAG_COLORS.find((color) => color.id === colorId) || null;
+}
diff --git a/capsules/marketplace/browser/assets/fonts/Inter-latin-var.woff2 b/capsules/marketplace/browser/assets/fonts/Inter-latin-var.woff2
new file mode 100644
index 000000000..91dc3e852
Binary files /dev/null and b/capsules/marketplace/browser/assets/fonts/Inter-latin-var.woff2 differ
diff --git a/capsules/marketplace/browser/elastos-theme.js b/capsules/marketplace/browser/elastos-theme.js
new file mode 100644
index 000000000..bad19b950
--- /dev/null
+++ b/capsules/marketplace/browser/elastos-theme.js
@@ -0,0 +1,122 @@
+/* GENERATED from capsules/_shared/elastos-theme.js — do not edit. Run `just vendor-ui`. */
+/* ElastOS UI — shared theme runtime (single source of truth).
+ *
+ * Vendored into each participating capsule's browser/ dir by `just vendor-ui`,
+ * next to elastos-ui.css. Everything is served same-origin from the gateway,
+ * so localStorage is the one canonical store (mirrors PC2's approach):
+ *
+ *   localStorage["elastos.ui.theme"]  = "dark" | "light" | "auto"
+ *   localStorage["elastos.ui.accent"] = "blue" | "purple" | "pink" | "red" |
+ *                                       "orange" | "yellow" | "green" | "graphite"
+ *
+ * Dark is the default theme when unset; blue is the default accent. "auto"
+ * follows prefers-color-scheme. The resolved theme is applied as
+ * data-el-theme="light" on <html> (absence means dark); the accent as
+ * data-el-accent (absence means blue) — both activate token blocks in
+ * elastos-ui.css. Cross-document sync is the browser's own `storage` event —
+ * no shell messaging required, and sandboxed app frames (allow-same-origin)
+ * see it.
+ */
+(function () {
+  const KEY = "elastos.ui.theme";
+  const ACCENT_KEY = "elastos.ui.accent";
+  const ACCENTS = [
+    "blue",
+    "purple",
+    "pink",
+    "red",
+    "orange",
+    "yellow",
+    "green",
+    "graphite",
+  ];
+  const media = window.matchMedia
+    ? window.matchMedia("(prefers-color-scheme: light)")
+    : null;
+
+  function preference() {
+    try {
+      const value = localStorage.getItem(KEY);
+      if (value === "light" || value === "dark" || value === "auto") {
+        return value;
+      }
+    } catch (_error) {
+      // Storage may be unavailable; fall through to the default.
+    }
+    return "dark";
+  }
+
+  function resolve(pref) {
+    if (pref === "auto") {
+      return media && media.matches ? "light" : "dark";
+    }
+    return pref;
+  }
+
+  function accentPreference() {
+    try {
+      const value = localStorage.getItem(ACCENT_KEY);
+      if (ACCENTS.includes(value)) {
+        return value;
+      }
+    } catch (_error) {
+      // Storage may be unavailable; fall through to the default.
+    }
+    return "blue";
+  }
+
+  function apply() {
+    if (resolve(preference()) === "light") {
+      document.documentElement.setAttribute("data-el-theme", "light");
+    } else {
+      document.documentElement.removeAttribute("data-el-theme");
+    }
+    const accent = accentPreference();
+    if (accent === "blue") {
+      document.documentElement.removeAttribute("data-el-accent");
+    } else {
+      document.documentElement.setAttribute("data-el-accent", accent);
+    }
+  }
+
+  apply();
+
+  window.addEventListener("storage", (event) => {
+    if (event.key === KEY || event.key === ACCENT_KEY || event.key === null) {
+      apply();
+    }
+  });
+
+  if (media && typeof media.addEventListener === "function") {
+    media.addEventListener("change", () => {
+      if (preference() === "auto") {
+        apply();
+      }
+    });
+  }
+
+  window.elastosTheme = {
+    preference,
+    resolved: () => resolve(preference()),
+    set(value) {
+      const pref = value === "light" || value === "auto" ? value : "dark";
+      try {
+        localStorage.setItem(KEY, pref);
+      } catch (_error) {
+        // Applying still works for this document.
+      }
+      apply();
+    },
+    accents: ACCENTS.slice(),
+    accent: accentPreference,
+    setAccent(value) {
+      const accent = ACCENTS.includes(value) ? value : "blue";
+      try {
+        localStorage.setItem(ACCENT_KEY, accent);
+      } catch (_error) {
+        // Applying still works for this document.
+      }
+      apply();
+    },
+  };
+})();
diff --git a/capsules/marketplace/browser/elastos-ui.css b/capsules/marketplace/browser/elastos-ui.css
new file mode 100644
index 000000000..7529596ef
--- /dev/null
+++ b/capsules/marketplace/browser/elastos-ui.css
@@ -0,0 +1,248 @@
+/* GENERATED from capsules/_shared/elastos-ui.css — do not edit. Run `just vendor-ui`. */
+/* ElastOS UI — shared design tokens (single source of truth).
+ *
+ * This file lives at capsules/_shared/elastos-ui.css and is VENDORED into each
+ * participating capsule's browser/ dir by `just vendor-ui` (no gateway route,
+ * no shared runtime surface — capsules stay self-contained). Edit THIS file,
+ * then run `just vendor-ui`; `just alignment-check` fails on drift.
+ *
+ * Contents: Inter (OFL, latin variable subset), palette, type scale, radii,
+ * hairlines, blur/elevation steps, motion tokens, and minimal control
+ * primitives. Layout is each app's business — tokens only.
+ */
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: optional;
+  src: url("./assets/fonts/Inter-latin-var.woff2") format("woff2");
+}
+
+:root {
+  color-scheme: dark;
+
+  /* Palette */
+  --el-bg: #0b0d10;
+  --el-surface: rgba(22, 24, 29, 0.92);
+  --el-surface-raised: #16181d;
+  --el-inset: rgba(255, 255, 255, 0.06);
+  --el-text: #f5f7fa;
+  --el-muted: rgba(245, 247, 250, 0.7);
+  --el-soft: rgba(245, 247, 250, 0.48);
+  --el-brand: #f6921a;
+  --el-brand-strong: #ffb457;
+  --el-focus: rgba(246, 146, 26, 0.55);
+  --el-danger: #ff8f8f;
+  --el-ok: #34d399;
+
+  /* Hairlines (one pair, everywhere) */
+  --el-hairline: rgba(255, 255, 255, 0.12);
+  --el-hairline-strong: rgba(255, 255, 255, 0.18);
+
+  /* Type: 10/11/12/13/14/16/28; weights 400/500/600/700 */
+  --el-font: "Inter", -apple-system, "Segoe UI", "SF Pro Text", sans-serif;
+  --el-font-mono: ui-monospace, "SF Mono", Menlo, monospace;
+  --el-text-2xs: 10px;
+  --el-text-xs: 11px;
+  --el-text-sm: 12px;
+  --el-text-md: 13px;
+  --el-text-lg: 14px;
+  --el-text-xl: 16px;
+  --el-text-display: 28px;
+
+  /* Radii: 4/6/10/12/16/20 + pill */
+  --el-radius-xs: 4px;
+  --el-radius-sm: 6px;
+  --el-radius-md: 10px;
+  --el-radius-lg: 12px;
+  --el-radius-xl: 16px;
+  --el-radius-2xl: 20px;
+  --el-radius-pill: 999px;
+
+  /* Blur: three steps only */
+  --el-blur-1: 8px;
+  --el-blur-2: 16px;
+  --el-blur-3: 24px;
+
+  /* Elevation: three levels */
+  --el-shadow-1: 0 2px 10px rgba(0, 0, 0, 0.22);
+  --el-shadow-2: 0 12px 28px rgba(0, 0, 0, 0.28);
+  --el-shadow-3: 0 24px 80px rgba(0, 0, 0, 0.35);
+
+  /* Motion: 80/140/180/220, exits 150; one ease */
+  --el-dur-1: 80ms;
+  --el-dur-2: 140ms;
+  --el-dur-3: 180ms;
+  --el-dur-4: 220ms;
+  --el-dur-exit: 150ms;
+  --el-ease: cubic-bezier(0.2, 0, 0, 1);
+
+  /* System accent — ONE accent, chosen by the user in System > Personalization
+     (macOS model), obeyed by every app. Selected via data-el-accent on <html>
+     (absence = blue). Apps consume the derived tones and never define their own
+     accent colors. */
+  --el-accent: #0a84ff;
+  --el-accent-ink: #ffffff;
+  --el-accent-strong: color-mix(in srgb, var(--el-accent) 78%, #ffffff);
+  --el-accent-soft: color-mix(in srgb, var(--el-accent) 22%, transparent);
+  --el-accent-faint: color-mix(in srgb, var(--el-accent) 11%, transparent);
+}
+
+/* The eight macOS accents. Yellow and orange carry dark ink on filled controls. */
+:root[data-el-accent="purple"] {
+  --el-accent: #bf5af2;
+}
+
+:root[data-el-accent="pink"] {
+  --el-accent: #ff375f;
+}
+
+:root[data-el-accent="red"] {
+  --el-accent: #ff453a;
+}
+
+:root[data-el-accent="orange"] {
+  --el-accent: #f6921a;
+  --el-accent-ink: #161616;
+}
+
+:root[data-el-accent="yellow"] {
+  --el-accent: #ffd60a;
+  --el-accent-ink: #161616;
+}
+
+:root[data-el-accent="green"] {
+  --el-accent: #30b84f;
+}
+
+:root[data-el-accent="graphite"] {
+  --el-accent: #8e8e93;
+}
+
+/* Light theme: dark is the default (no attribute); the shell sets
+   data-el-theme="light" on <html> and broadcasts changes to app frames.
+   Values restore the pre-token light look: white raised panels over a cool
+   pale stage, navy ink, the same brand orange. */
+:root[data-el-theme="light"] {
+  color-scheme: light;
+
+  --el-bg: #eef1f6;
+  --el-surface: rgba(255, 255, 255, 0.88);
+  --el-surface-raised: #ffffff;
+  --el-inset: rgba(29, 36, 56, 0.055);
+  --el-text: #1d2438;
+  --el-muted: rgba(29, 36, 56, 0.72);
+  --el-soft: rgba(29, 36, 56, 0.5);
+  --el-brand: #f6921a;
+  --el-brand-strong: #e07f0a;
+  --el-focus: rgba(246, 146, 26, 0.55);
+  --el-danger: #b14c5a;
+  --el-ok: #0a7a52;
+
+  --el-hairline: rgba(29, 36, 56, 0.14);
+  --el-hairline-strong: rgba(29, 36, 56, 0.24);
+
+  --el-shadow-1: 0 2px 10px rgba(34, 49, 88, 0.1);
+  --el-shadow-2: 0 12px 28px rgba(34, 49, 88, 0.12);
+  --el-shadow-3: 0 24px 80px rgba(34, 49, 88, 0.16);
+
+  /* "Strong" means higher contrast against the CURRENT background: lighter on
+     dark, deeper on light. */
+  --el-accent-strong: color-mix(in srgb, var(--el-accent) 72%, #1d2438);
+}
+
+/* App base: opt in by putting .el-app on <body>. Dark shell surface, shared
+   type. Layout untouched. */
+.el-app {
+  margin: 0;
+  background: var(--el-bg);
+  color: var(--el-text);
+  font-family: var(--el-font);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+.el-app :focus-visible {
+  outline: 2px solid var(--el-focus);
+  outline-offset: 2px;
+}
+
+/* Minimal control primitives — enough that a capsule needs no bespoke button
+   or input styling to look native. */
+.el-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 32px;
+  padding: 0 14px;
+  border: 1px solid var(--el-hairline);
+  border-radius: var(--el-radius-md);
+  background: var(--el-inset);
+  color: var(--el-text);
+  font: 500 var(--el-text-md) / 1.2 var(--el-font);
+  cursor: pointer;
+  transition: background-color var(--el-dur-2) var(--el-ease);
+}
+
+/* Hover lift over inset surfaces — flips with the theme so apps don't need
+   their own literal rgba(255,255,255,x) hovers. */
+:root {
+  --el-lift: rgba(255, 255, 255, 0.1);
+  --el-lift-strong: rgba(255, 255, 255, 0.16);
+}
+
+:root[data-el-theme="light"] {
+  --el-lift: rgba(29, 36, 56, 0.08);
+  --el-lift-strong: rgba(29, 36, 56, 0.14);
+}
+
+.el-button:hover {
+  background: var(--el-lift);
+}
+
+.el-button:active {
+  transform: scale(0.96);
+}
+
+.el-button:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
+.el-button-primary {
+  border-color: transparent;
+  background: var(--el-brand);
+  color: #161616;
+  font-weight: 600;
+}
+
+.el-button-primary:hover {
+  background: var(--el-brand-strong);
+}
+
+.el-input {
+  min-height: 32px;
+  padding: 0 10px;
+  border: 1px solid var(--el-hairline);
+  border-radius: var(--el-radius-md);
+  background: var(--el-inset);
+  color: var(--el-text);
+  font: 400 var(--el-text-md) / 1.2 var(--el-font);
+}
+
+.el-input::placeholder {
+  color: var(--el-soft);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .el-app *,
+  .el-app *::before,
+  .el-app *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
diff --git a/capsules/marketplace/browser/index.html b/capsules/marketplace/browser/index.html
index 2507b077c..cef1db16a 100644
--- a/capsules/marketplace/browser/index.html
+++ b/capsules/marketplace/browser/index.html
@@ -4,6 +4,8 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Marketplace - ElastOS</title>
+  <script src="elastos-theme.js"></script>
+  <link rel="stylesheet" href="elastos-ui.css">
   <link rel="stylesheet" href="marketplace.css">
 </head>
 <body>
@@ -12,15 +14,6 @@
       <div class="header-top">
         <h1 class="header-title">Marketplace</h1>
         <div class="header-actions">
-          <button id="theme-toggle" class="theme-toggle" type="button" aria-label="Toggle theme" title="Toggle theme">
-            <svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
-            </svg>
-            <svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <circle cx="12" cy="12" r="4"></circle>
-              <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"></path>
-            </svg>
-          </button>
           <label class="search-container">
             <span class="search-icon-wrapper">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
diff --git a/capsules/marketplace/browser/marketplace.css b/capsules/marketplace/browser/marketplace.css
index 3b2e60567..fc84aa966 100644
--- a/capsules/marketplace/browser/marketplace.css
+++ b/capsules/marketplace/browser/marketplace.css
@@ -1,46 +1,25 @@
+/* Rides the shared tokens: dark by default, light via data-el-theme (set by
+   the system, not a private toggle). Accent is the user's system accent. */
 :root {
-  color-scheme: light;
-  --bg-page: #f8fafc;
-  --bg-surface: #ffffff;
-  --bg-elev: #f1f5f9;
-  --bg-input: #f8fafc;
-  --bg-hover: #f1f5f9;
-  --border: #e6ebf2;
-  --border-strong: #cbd5e1;
-  --text-primary: #1e293b;
-  --text-secondary: #64748b;
-  --text-muted: #94a3b8;
-  --accent: #3b82f6;
-  --accent-hover: #2563eb;
-  --accent-soft: rgba(59, 130, 246, 0.08);
-  --success: #22c55e;
-  --warning: #d97706;
-  --danger: #ef4444;
-  --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.04);
-  --shadow-hover: 0 6px 18px rgba(15, 23, 42, 0.10);
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-}
-
-[data-theme="dark"] {
-  color-scheme: dark;
-  --bg-page: #121212;
-  --bg-surface: #1a1a1a;
-  --bg-elev: #1e1e1e;
-  --bg-input: #262626;
-  --bg-hover: #262626;
-  --border: #2e2e2e;
-  --border-strong: #3a3a3a;
-  --text-primary: #e5e5e5;
-  --text-secondary: #a3a3a3;
-  --text-muted: #737373;
-  --accent: #3b82f6;
-  --accent-hover: #60a5fa;
-  --accent-soft: rgba(59, 130, 246, 0.16);
-  --success: #34d399;
-  --warning: #fbbf24;
-  --danger: #f87171;
-  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3);
-  --shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.5);
+  --bg-page: var(--el-bg);
+  --bg-surface: var(--el-surface-raised);
+  --bg-elev: var(--el-inset);
+  --bg-input: var(--el-inset);
+  --bg-hover: var(--el-lift);
+  --border: var(--el-hairline);
+  --border-strong: var(--el-hairline-strong);
+  --text-primary: var(--el-text);
+  --text-secondary: var(--el-muted);
+  --text-muted: var(--el-soft);
+  --accent: var(--el-accent);
+  --accent-hover: var(--el-accent-strong);
+  --accent-soft: var(--el-accent-faint);
+  --success: var(--el-ok);
+  --warning: var(--el-brand);
+  --danger: var(--el-danger);
+  --shadow-card: var(--el-shadow-1);
+  --shadow-hover: var(--el-shadow-2);
+  font-family: var(--el-font);
 }
 
 * {
@@ -103,47 +82,6 @@ button {
   gap: 12px;
 }
 
-.theme-toggle {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  color: var(--text-secondary);
-  background: var(--bg-surface);
-  cursor: pointer;
-  transition: background 0.15s, color 0.15s, border-color 0.15s;
-}
-
-.theme-toggle:hover {
-  color: var(--text-primary);
-  border-color: var(--border-strong);
-  background: var(--bg-hover);
-}
-
-.theme-toggle svg {
-  width: 18px;
-  height: 18px;
-}
-
-.theme-toggle .icon-moon {
-  display: block;
-}
-
-.theme-toggle .icon-sun {
-  display: none;
-}
-
-[data-theme="dark"] .theme-toggle .icon-moon {
-  display: none;
-}
-
-[data-theme="dark"] .theme-toggle .icon-sun {
-  display: block;
-}
-
 .search-container {
   position: relative;
   width: 300px;
@@ -170,8 +108,9 @@ button {
   font-size: 14px;
 }
 
-.search-input:focus {
-  outline: none;
+.search-input:focus-visible {
+  outline: 2px solid var(--el-focus);
+  outline-offset: 1px;
   border-color: var(--accent);
   background: var(--bg-surface);
 }
@@ -558,25 +497,30 @@ button {
   text-transform: uppercase;
 }
 
-.badge.app { background: #dbeafe; color: #1d4ed8; }
-.badge.viewer { background: #e0f2fe; color: #0369a1; }
-.badge.provider { background: #fef3c7; color: #b45309; }
-.badge.content { background: #dcfce7; color: #15803d; }
-.badge.shell { background: #f1f5f9; color: #475569; }
-.badge.ddrm { background: #fae8ff; color: #a21caf; }
-.badge.wallet { background: #fff7ed; color: #c2410c; }
-.badge.installed { background: #dcfce7; color: #16a34a; }
-.badge.pending { background: #fef3c7; color: #d97706; }
-
-[data-theme="dark"] .badge.app { background: rgba(59, 130, 246, 0.18); color: #93c5fd; }
-[data-theme="dark"] .badge.viewer { background: rgba(14, 165, 233, 0.18); color: #7dd3fc; }
-[data-theme="dark"] .badge.provider { background: rgba(245, 158, 11, 0.18); color: #fcd34d; }
-[data-theme="dark"] .badge.content { background: rgba(34, 197, 94, 0.18); color: #86efac; }
-[data-theme="dark"] .badge.shell { background: rgba(148, 163, 184, 0.18); color: #cbd5e1; }
-[data-theme="dark"] .badge.ddrm { background: rgba(217, 70, 239, 0.18); color: #f0abfc; }
-[data-theme="dark"] .badge.wallet { background: rgba(249, 115, 22, 0.18); color: #fdba74; }
-[data-theme="dark"] .badge.installed { background: rgba(34, 197, 94, 0.18); color: #86efac; }
-[data-theme="dark"] .badge.pending { background: rgba(245, 158, 11, 0.18); color: #fcd34d; }
+/* Type badges keep fixed semantic hues (like desktop tag colors) — one hue
+   variable per type, tinted for the current theme with color-mix. */
+.badge.app { --badge-hue: #3b82f6; }
+.badge.viewer { --badge-hue: #0ea5e9; }
+.badge.provider { --badge-hue: #f59e0b; }
+.badge.content { --badge-hue: #22c55e; }
+.badge.shell { --badge-hue: #94a3b8; }
+.badge.ddrm { --badge-hue: #d946ef; }
+.badge.wallet { --badge-hue: #f97316; }
+.badge.installed { --badge-hue: #22c55e; }
+.badge.pending { --badge-hue: #f59e0b; }
+
+.badge.app,
+.badge.viewer,
+.badge.provider,
+.badge.content,
+.badge.shell,
+.badge.ddrm,
+.badge.wallet,
+.badge.installed,
+.badge.pending {
+  background: color-mix(in srgb, var(--badge-hue) 18%, transparent);
+  color: color-mix(in srgb, var(--badge-hue) 62%, var(--el-text));
+}
 
 .app-description {
   display: -webkit-box;
@@ -1008,6 +952,7 @@ button {
   font-size: 14px;
 }
 
+/* Inverted chip, both themes (dark text-plate on light, light on dark). */
 .toast {
   position: fixed;
   bottom: 24px;
@@ -1015,8 +960,8 @@ button {
   z-index: 2000;
   border-radius: 8px;
   padding: 12px 24px;
-  color: #fff;
-  background: #1e293b;
+  color: var(--el-bg);
+  background: var(--el-text);
   font-size: 14px;
   transform: translateX(-50%) translateY(100px);
   transition: transform 0.3s ease;
@@ -1027,34 +972,26 @@ button {
 }
 
 .toast.error {
-  background: #dc2626;
-}
-
-[data-theme="dark"] .modal-overlay {
-  background: rgba(0, 0, 0, 0.65);
-}
-
-[data-theme="dark"] .app-detail-modal,
-[data-theme="dark"] .install-modal {
-  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
+  color: #fff;
+  background: color-mix(in srgb, var(--el-danger) 82%, #000);
 }
 
-[data-theme="dark"] ::-webkit-scrollbar {
+::-webkit-scrollbar {
   width: 10px;
   height: 10px;
 }
 
-[data-theme="dark"] ::-webkit-scrollbar-track {
-  background: var(--bg-page);
+::-webkit-scrollbar-track {
+  background: transparent;
 }
 
-[data-theme="dark"] ::-webkit-scrollbar-thumb {
+::-webkit-scrollbar-thumb {
   border-radius: 5px;
-  background: #404040;
+  background: var(--el-hairline-strong);
 }
 
-[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
-  background: #525252;
+::-webkit-scrollbar-thumb:hover {
+  background: var(--el-soft);
 }
 
 @media (max-width: 860px) {
diff --git a/capsules/marketplace/browser/marketplace.js b/capsules/marketplace/browser/marketplace.js
index 739fcea5b..69b8762c9 100644
--- a/capsules/marketplace/browser/marketplace.js
+++ b/capsules/marketplace/browser/marketplace.js
@@ -1,7 +1,6 @@
 (function () {
   const params = new URLSearchParams(window.location.search);
   const homeToken = params.get("home_token") || "";
-  const themeKey = "elastos-marketplace-theme";
 
   const state = {
     apps: [],
@@ -29,7 +28,6 @@
     installModal: document.querySelector("#install-modal"),
     installContent: document.querySelector("#install-content"),
     searchInput: document.querySelector("#search-input"),
-    themeToggle: document.querySelector("#theme-toggle"),
     viewAll: document.querySelector("#view-all"),
     toast: document.querySelector("#toast"),
   };
@@ -74,7 +72,6 @@
     "gradient-slate": "linear-gradient(135deg, #64748b 0%, #475569 100%)",
   };
 
-  initTheme();
   boot();
 
   async function boot() {
@@ -84,26 +81,7 @@
     render();
   }
 
-  function initTheme() {
-    const saved = localStorage.getItem(themeKey);
-    if (saved === "dark" || (!saved && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
-      document.documentElement.setAttribute("data-theme", "dark");
-    }
-  }
-
-  function toggleTheme() {
-    const isDark = document.documentElement.getAttribute("data-theme") === "dark";
-    if (isDark) {
-      document.documentElement.removeAttribute("data-theme");
-      localStorage.setItem(themeKey, "light");
-      return;
-    }
-    document.documentElement.setAttribute("data-theme", "dark");
-    localStorage.setItem(themeKey, "dark");
-  }
-
   function bindEvents() {
-    els.themeToggle.addEventListener("click", toggleTheme);
     els.viewAll.addEventListener("click", () => selectCategory("all"));
     els.searchInput.addEventListener("input", (event) => {
       state.search = event.target.value.trim().toLowerCase();
@@ -122,7 +100,73 @@
         els.detailModal.classList.remove("active");
         els.installModal.classList.remove("active");
       }
+      // ⌘K / Ctrl+K focuses search — parity with the content market.
+      if ((event.metaKey || event.ctrlKey) && String(event.key).toLowerCase() === "k") {
+        event.preventDefault();
+        els.searchInput.focus();
+        els.searchInput.select();
+      }
     });
+    announceShellMenuManifest();
+    window.addEventListener("message", onShellMenuCommand);
+  }
+
+  // Shell menu bar: declare File/View menus to Home; commands come back as
+  // elastos:menu-command and route to the same functions the chrome uses.
+  function announceShellMenuManifest() {
+    if (!homeToken || window.parent === window) {
+      return;
+    }
+    window.parent.postMessage({
+      type: "home:menu-manifest",
+      homeToken,
+      menus: [
+        {
+          title: "File",
+          items: [
+            { label: "Refresh", cmd: "refresh" },
+            "-",
+            { label: "Close Window", cmd: "__close-window" },
+          ],
+        },
+        {
+          title: "View",
+          items: [
+            { label: "Discover", cmd: "tab-discover" },
+            { label: "Installed", cmd: "tab-installed" },
+            "-",
+            { label: "Find", cmd: "find" },
+          ],
+        },
+      ],
+    }, window.location.origin);
+  }
+
+  function onShellMenuCommand(event) {
+    if (event.origin !== window.location.origin) {
+      return;
+    }
+    const message = event.data;
+    if (message?.type !== "elastos:menu-command" || typeof message.cmd !== "string") {
+      return;
+    }
+    switch (message.cmd) {
+      case "refresh":
+        // loadData surfaces its own failures via toast; render always runs.
+        loadData().then(render);
+        return;
+      case "tab-discover":
+        selectTab("discover");
+        return;
+      case "tab-installed":
+        selectTab("installed");
+        return;
+      case "find":
+        els.searchInput.focus();
+        els.searchInput.select();
+        return;
+      default:
+    }
   }
 
   function renderCategories() {
diff --git a/capsules/services/browser/assets/fonts/Inter-latin-var.woff2 b/capsules/services/browser/assets/fonts/Inter-latin-var.woff2
new file mode 100644
index 000000000..91dc3e852
Binary files /dev/null and b/capsules/services/browser/assets/fonts/Inter-latin-var.woff2 differ
diff --git a/capsules/services/browser/elastos-theme.js b/capsules/services/browser/elastos-theme.js
new file mode 100644
index 000000000..bad19b950
--- /dev/null
+++ b/capsules/services/browser/elastos-theme.js
@@ -0,0 +1,122 @@
+/* GENERATED from capsules/_shared/elastos-theme.js — do not edit. Run `just vendor-ui`. */
+/* ElastOS UI — shared theme runtime (single source of truth).
+ *
+ * Vendored into each participating capsule's browser/ dir by `just vendor-ui`,
+ * next to elastos-ui.css. Everything is served same-origin from the gateway,
+ * so localStorage is the one canonical store (mirrors PC2's approach):
+ *
+ *   localStorage["elastos.ui.theme"]  = "dark" | "light" | "auto"
+ *   localStorage["elastos.ui.accent"] = "blue" | "purple" | "pink" | "red" |
+ *                                       "orange" | "yellow" | "green" | "graphite"
+ *
+ * Dark is the default theme when unset; blue is the default accent. "auto"
+ * follows prefers-color-scheme. The resolved theme is applied as
+ * data-el-theme="light" on <html> (absence means dark); the accent as
+ * data-el-accent (absence means blue) — both activate token blocks in
+ * elastos-ui.css. Cross-document sync is the browser's own `storage` event —
+ * no shell messaging required, and sandboxed app frames (allow-same-origin)
+ * see it.
+ */
+(function () {
+  const KEY = "elastos.ui.theme";
+  const ACCENT_KEY = "elastos.ui.accent";
+  const ACCENTS = [
+    "blue",
+    "purple",
+    "pink",
+    "red",
+    "orange",
+    "yellow",
+    "green",
+    "graphite",
+  ];
+  const media = window.matchMedia
+    ? window.matchMedia("(prefers-color-scheme: light)")
+    : null;
+
+  function preference() {
+    try {
+      const value = localStorage.getItem(KEY);
+      if (value === "light" || value === "dark" || value === "auto") {
+        return value;
+      }
+    } catch (_error) {
+      // Storage may be unavailable; fall through to the default.
+    }
+    return "dark";
+  }
+
+  function resolve(pref) {
+    if (pref === "auto") {
+      return media && media.matches ? "light" : "dark";
+    }
+    return pref;
+  }
+
+  function accentPreference() {
+    try {
+      const value = localStorage.getItem(ACCENT_KEY);
+      if (ACCENTS.includes(value)) {
+        return value;
+      }
+    } catch (_error) {
+      // Storage may be unavailable; fall through to the default.
+    }
+    return "blue";
+  }
+
+  function apply() {
+    if (resolve(preference()) === "light") {
+      document.documentElement.setAttribute("data-el-theme", "light");
+    } else {
+      document.documentElement.removeAttribute("data-el-theme");
+    }
+    const accent = accentPreference();
+    if (accent === "blue") {
+      document.documentElement.removeAttribute("data-el-accent");
+    } else {
+      document.documentElement.setAttribute("data-el-accent", accent);
+    }
+  }
+
+  apply();
+
+  window.addEventListener("storage", (event) => {
+    if (event.key === KEY || event.key === ACCENT_KEY || event.key === null) {
+      apply();
+    }
+  });
+
+  if (media && typeof media.addEventListener === "function") {
+    media.addEventListener("change", () => {
+      if (preference() === "auto") {
+        apply();
+      }
+    });
+  }
+
+  window.elastosTheme = {
+    preference,
+    resolved: () => resolve(preference()),
+    set(value) {
+      const pref = value === "light" || value === "auto" ? value : "dark";
+      try {
+        localStorage.setItem(KEY, pref);
+      } catch (_error) {
+        // Applying still works for this document.
+      }
+      apply();
+    },
+    accents: ACCENTS.slice(),
+    accent: accentPreference,
+    setAccent(value) {
+      const accent = ACCENTS.includes(value) ? value : "blue";
+      try {
+        localStorage.setItem(ACCENT_KEY, accent);
+      } catch (_error) {
+        // Applying still works for this document.
+      }
+      apply();
+    },
+  };
+})();
diff --git a/capsules/services/browser/elastos-ui.css b/capsules/services/browser/elastos-ui.css
new file mode 100644
index 000000000..7529596ef
--- /dev/null
+++ b/capsules/services/browser/elastos-ui.css
@@ -0,0 +1,248 @@
+/* GENERATED from capsules/_shared/elastos-ui.css — do not edit. Run `just vendor-ui`. */
+/* ElastOS UI — shared design tokens (single source of truth).
+ *
+ * This file lives at capsules/_shared/elastos-ui.css and is VENDORED into each
+ * participating capsule's browser/ dir by `just vendor-ui` (no gateway route,
+ * no shared runtime surface — capsules stay self-contained). Edit THIS file,
+ * then run `just vendor-ui`; `just alignment-check` fails on drift.
+ *
+ * Contents: Inter (OFL, latin variable subset), palette, type scale, radii,
+ * hairlines, blur/elevation steps, motion tokens, and minimal control
+ * primitives. Layout is each app's business — tokens only.
+ */
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: optional;
+  src: url("./assets/fonts/Inter-latin-var.woff2") format("woff2");
+}
+
+:root {
+  color-scheme: dark;
+
+  /* Palette */
+  --el-bg: #0b0d10;
+  --el-surface: rgba(22, 24, 29, 0.92);
+  --el-surface-raised: #16181d;
+  --el-inset: rgba(255, 255, 255, 0.06);
+  --el-text: #f5f7fa;
+  --el-muted: rgba(245, 247, 250, 0.7);
+  --el-soft: rgba(245, 247, 250, 0.48);
+  --el-brand: #f6921a;
+  --el-brand-strong: #ffb457;
+  --el-focus: rgba(246, 146, 26, 0.55);
+  --el-danger: #ff8f8f;
+  --el-ok: #34d399;
+
+  /* Hairlines (one pair, everywhere) */
+  --el-hairline: rgba(255, 255, 255, 0.12);
+  --el-hairline-strong: rgba(255, 255, 255, 0.18);
+
+  /* Type: 10/11/12/13/14/16/28; weights 400/500/600/700 */
+  --el-font: "Inter", -apple-system, "Segoe UI", "SF Pro Text", sans-serif;
+  --el-font-mono: ui-monospace, "SF Mono", Menlo, monospace;
+  --el-text-2xs: 10px;
+  --el-text-xs: 11px;
+  --el-text-sm: 12px;
+  --el-text-md: 13px;
+  --el-text-lg: 14px;
+  --el-text-xl: 16px;
+  --el-text-display: 28px;
+
+  /* Radii: 4/6/10/12/16/20 + pill */
+  --el-radius-xs: 4px;
+  --el-radius-sm: 6px;
+  --el-radius-md: 10px;
+  --el-radius-lg: 12px;
+  --el-radius-xl: 16px;
+  --el-radius-2xl: 20px;
+  --el-radius-pill: 999px;
+
+  /* Blur: three steps only */
+  --el-blur-1: 8px;
+  --el-blur-2: 16px;
+  --el-blur-3: 24px;
+
+  /* Elevation: three levels */
+  --el-shadow-1: 0 2px 10px rgba(0, 0, 0, 0.22);
+  --el-shadow-2: 0 12px 28px rgba(0, 0, 0, 0.28);
+  --el-shadow-3: 0 24px 80px rgba(0, 0, 0, 0.35);
+
+  /* Motion: 80/140/180/220, exits 150; one ease */
+  --el-dur-1: 80ms;
+  --el-dur-2: 140ms;
+  --el-dur-3: 180ms;
+  --el-dur-4: 220ms;
+  --el-dur-exit: 150ms;
+  --el-ease: cubic-bezier(0.2, 0, 0, 1);
+
+  /* System accent — ONE accent, chosen by the user in System > Personalization
+     (macOS model), obeyed by every app. Selected via data-el-accent on <html>
+     (absence = blue). Apps consume the derived tones and never define their own
+     accent colors. */
+  --el-accent: #0a84ff;
+  --el-accent-ink: #ffffff;
+  --el-accent-strong: color-mix(in srgb, var(--el-accent) 78%, #ffffff);
+  --el-accent-soft: color-mix(in srgb, var(--el-accent) 22%, transparent);
+  --el-accent-faint: color-mix(in srgb, var(--el-accent) 11%, transparent);
+}
+
+/* The eight macOS accents. Yellow and orange carry dark ink on filled controls. */
+:root[data-el-accent="purple"] {
+  --el-accent: #bf5af2;
+}
+
+:root[data-el-accent="pink"] {
+  --el-accent: #ff375f;
+}
+
+:root[data-el-accent="red"] {
+  --el-accent: #ff453a;
+}
+
+:root[data-el-accent="orange"] {
+  --el-accent: #f6921a;
+  --el-accent-ink: #161616;
+}
+
+:root[data-el-accent="yellow"] {
+  --el-accent: #ffd60a;
+  --el-accent-ink: #161616;
+}
+
+:root[data-el-accent="green"] {
+  --el-accent: #30b84f;
+}
+
+:root[data-el-accent="graphite"] {
+  --el-accent: #8e8e93;
+}
+
+/* Light theme: dark is the default (no attribute); the shell sets
+   data-el-theme="light" on <html> and broadcasts changes to app frames.
+   Values restore the pre-token light look: white raised panels over a cool
+   pale stage, navy ink, the same brand orange. */
+:root[data-el-theme="light"] {
+  color-scheme: light;
+
+  --el-bg: #eef1f6;
+  --el-surface: rgba(255, 255, 255, 0.88);
+  --el-surface-raised: #ffffff;
+  --el-inset: rgba(29, 36, 56, 0.055);
+  --el-text: #1d2438;
+  --el-muted: rgba(29, 36, 56, 0.72);
+  --el-soft: rgba(29, 36, 56, 0.5);
+  --el-brand: #f6921a;
+  --el-brand-strong: #e07f0a;
+  --el-focus: rgba(246, 146, 26, 0.55);
+  --el-danger: #b14c5a;
+  --el-ok: #0a7a52;
+
+  --el-hairline: rgba(29, 36, 56, 0.14);
+  --el-hairline-strong: rgba(29, 36, 56, 0.24);
+
+  --el-shadow-1: 0 2px 10px rgba(34, 49, 88, 0.1);
+  --el-shadow-2: 0 12px 28px rgba(34, 49, 88, 0.12);
+  --el-shadow-3: 0 24px 80px rgba(34, 49, 88, 0.16);
+
+  /* "Strong" means higher contrast against the CURRENT background: lighter on
+     dark, deeper on light. */
+  --el-accent-strong: color-mix(in srgb, var(--el-accent) 72%, #1d2438);
+}
+
+/* App base: opt in by putting .el-app on <body>. Dark shell surface, shared
+   type. Layout untouched. */
+.el-app {
+  margin: 0;
+  background: var(--el-bg);
+  color: var(--el-text);
+  font-family: var(--el-font);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+.el-app :focus-visible {
+  outline: 2px solid var(--el-focus);
+  outline-offset: 2px;
+}
+
+/* Minimal control primitives — enough that a capsule needs no bespoke button
+   or input styling to look native. */
+.el-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 32px;
+  padding: 0 14px;
+  border: 1px solid var(--el-hairline);
+  border-radius: var(--el-radius-md);
+  background: var(--el-inset);
+  color: var(--el-text);
+  font: 500 var(--el-text-md) / 1.2 var(--el-font);
+  cursor: pointer;
+  transition: background-color var(--el-dur-2) var(--el-ease);
+}
+
+/* Hover lift over inset surfaces — flips with the theme so apps don't need
+   their own literal rgba(255,255,255,x) hovers. */
+:root {
+  --el-lift: rgba(255, 255, 255, 0.1);
+  --el-lift-strong: rgba(255, 255, 255, 0.16);
+}
+
+:root[data-el-theme="light"] {
+  --el-lift: rgba(29, 36, 56, 0.08);
+  --el-lift-strong: rgba(29, 36, 56, 0.14);
+}
+
+.el-button:hover {
+  background: var(--el-lift);
+}
+
+.el-button:active {
+  transform: scale(0.96);
+}
+
+.el-button:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
+.el-button-primary {
+  border-color: transparent;
+  background: var(--el-brand);
+  color: #161616;
+  font-weight: 600;
+}
+
+.el-button-primary:hover {
+  background: var(--el-brand-strong);
+}
+
+.el-input {
+  min-height: 32px;
+  padding: 0 10px;
+  border: 1px solid var(--el-hairline);
+  border-radius: var(--el-radius-md);
+  background: var(--el-inset);
+  color: var(--el-text);
+  font: 400 var(--el-text-md) / 1.2 var(--el-font);
+}
+
+.el-input::placeholder {
+  color: var(--el-soft);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .el-app *,
+  .el-app *::before,
+  .el-app *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
diff --git a/capsules/services/browser/index.html b/capsules/services/browser/index.html
index a4276d0ec..fc061c720 100644
--- a/capsules/services/browser/index.html
+++ b/capsules/services/browser/index.html
@@ -1,10 +1,12 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="light">
+<html lang="en">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Services · ElastOS</title>
-  <link rel="stylesheet" href="./style.css?v=services-20260626a">
+  <script src="./elastos-theme.js"></script>
+  <link rel="stylesheet" href="./elastos-ui.css">
+  <link rel="stylesheet" href="./style.css?v=services-20260717a">
 </head>
 <body>
   <section id="locked-shell" class="locked-shell hidden">
diff --git a/capsules/services/browser/style.css b/capsules/services/browser/style.css
index 0ae91a23b..0f6f87482 100644
--- a/capsules/services/browser/style.css
+++ b/capsules/services/browser/style.css
@@ -1,18 +1,24 @@
+/* Same token mapping as the System capsule — Services is a Settings-family
+   surface (dark default; shared tokens flip with data-el-theme). */
 :root {
-  color-scheme: light;
   --primary-color-icon: invert(0);
-  --color-settings-bg: #ffffff;
+  --color-settings-bg: var(--el-bg);
+  --color-settings-sidebar: rgba(22, 24, 29, 0.78);
+  --color-settings-card: var(--el-surface-raised);
+  --color-bg-tertiary: var(--el-inset);
+  --color-text-primary: var(--el-text);
+  --color-text-secondary: var(--el-muted);
+  --color-text-muted: var(--el-soft);
+  --color-border: var(--el-hairline);
+  --color-border-light: var(--el-hairline-strong);
+  --color-success: var(--el-ok);
+  --color-warning: var(--el-brand);
+  --color-danger: var(--el-danger);
+  font-family: var(--el-font);
+}
+
+:root[data-el-theme="light"] {
   --color-settings-sidebar: #f9f9f9;
-  --color-bg-tertiary: #f3f4f6;
-  --color-text-primary: #1f2937;
-  --color-text-secondary: #4b5563;
-  --color-text-muted: #6b7280;
-  --color-border: #e5e7eb;
-  --color-border-light: #d1d5db;
-  --color-success: #047857;
-  --color-warning: #a16207;
-  --color-danger: #b91c1c;
-  font-family: "Avenir Next", "Segoe UI", sans-serif;
 }
 
 * {
@@ -54,7 +60,7 @@ dd {
 }
 
 code {
-  font-family: "SFMono-Regular", "Monaco", "Menlo", monospace;
+  font-family: var(--el-font-mono);
 }
 
 .locked-shell {
@@ -63,7 +69,7 @@ code {
   min-height: 100dvh;
   place-items: center;
   padding: 24px;
-  background: #f6f7f9;
+  background: var(--color-settings-bg);
 }
 
 .locked-card {
@@ -71,7 +77,7 @@ code {
   border: 1px solid var(--color-border);
   border-radius: 8px;
   padding: 30px;
-  background: #fff;
+  background: var(--color-settings-card);
 }
 
 .eyebrow {
@@ -158,7 +164,7 @@ code {
   inset: 4px;
   border: 1.7px solid currentColor;
   border-radius: 5px;
-  box-shadow: inset 0 -5px 0 rgba(31, 41, 55, 0.16);
+  box-shadow: inset 0 -5px 0 var(--el-inset);
 }
 
 .settings-sidebar-icon-others::before {
@@ -212,12 +218,12 @@ code {
 }
 
 .services-status[data-tone="error"] {
-  border-color: rgba(185, 28, 28, 0.22);
+  border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
   color: var(--color-danger);
 }
 
 .services-status[data-tone="ok"] {
-  border-color: rgba(4, 120, 87, 0.22);
+  border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
   color: var(--color-success);
 }
 
@@ -228,7 +234,7 @@ code {
 .pc2-section-title {
   margin-bottom: 8px;
   padding-left: 2px;
-  color: #000;
+  color: var(--color-text-primary);
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.5px;
@@ -240,7 +246,7 @@ code {
   overflow: hidden;
   border: 1px solid var(--color-border);
   border-radius: 8px;
-  background: #fff;
+  background: var(--color-settings-card);
 }
 
 .services-list {
@@ -257,7 +263,7 @@ code {
 
 .service-subsection-title {
   padding: 10px 16px;
-  background: #f9fafb;
+  background: var(--color-bg-tertiary);
   color: var(--color-text-muted);
   font-size: 11px;
   font-weight: 700;
@@ -325,10 +331,10 @@ code {
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  border: 1px solid rgba(185, 28, 28, 0.18);
+  border: 1px solid color-mix(in srgb, var(--color-danger) 26%, transparent);
   border-radius: 7px;
   padding: 10px 12px;
-  background: #fef2f2;
+  background: color-mix(in srgb, var(--color-danger) 9%, transparent);
   color: var(--color-danger);
   font-size: 13px;
 }
@@ -347,7 +353,7 @@ code {
   border: 1px solid var(--color-border);
   border-radius: 999px;
   padding: 3px 8px;
-  background: #f9fafb;
+  background: var(--color-bg-tertiary);
   color: var(--color-text-muted);
   font-size: 11px;
   font-weight: 700;
@@ -355,19 +361,19 @@ code {
 }
 
 .status-badge[data-tone="ok"] {
-  border-color: rgba(4, 120, 87, 0.22);
-  background: #ecfdf5;
+  border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
+  background: color-mix(in srgb, var(--color-success) 12%, transparent);
   color: var(--color-success);
 }
 
 .status-badge[data-tone="warn"] {
-  border-color: rgba(161, 98, 7, 0.22);
-  background: #fffbeb;
+  border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
+  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
   color: var(--color-warning);
 }
 
 .status-badge[data-tone="muted"] {
-  background: #f3f4f6;
+  background: var(--color-bg-tertiary);
   color: var(--color-text-muted);
 }
 
@@ -376,18 +382,21 @@ code {
   border: 1px solid var(--color-border-light);
   border-radius: 6px;
   padding: 6px 11px;
-  background: #fff;
+  background: var(--color-settings-card);
   color: var(--color-text-primary);
   cursor: pointer;
   font-size: 13px;
   font-weight: 600;
 }
 
-.pc2-btn:hover:not(:disabled),
-.pc2-btn:focus-visible:not(:disabled) {
-  border-color: #9ca3af;
-  background: #f9fafb;
-  outline: none;
+.pc2-btn:hover:not(:disabled) {
+  border-color: var(--el-hairline-strong);
+  background: var(--el-lift);
+}
+
+.pc2-btn:focus-visible {
+  outline: 2px solid var(--el-focus);
+  outline-offset: 1px;
 }
 
 .pc2-btn:disabled {
@@ -396,26 +405,23 @@ code {
 }
 
 .pc2-btn-primary {
-  border-color: #1f2937;
-  background: #1f2937;
-  color: #fff;
+  border-color: transparent;
+  background: var(--el-accent);
+  color: var(--el-accent-ink);
 }
 
-.pc2-btn-primary:hover:not(:disabled),
-.pc2-btn-primary:focus-visible:not(:disabled) {
-  background: #111827;
-  color: #fff;
+.pc2-btn-primary:hover:not(:disabled) {
+  background: var(--el-accent-strong);
 }
 
 .pc2-btn-danger {
-  border-color: rgba(185, 28, 28, 0.36);
+  border-color: color-mix(in srgb, var(--color-danger) 42%, transparent);
   color: var(--color-danger);
 }
 
-.pc2-btn-danger:hover:not(:disabled),
-.pc2-btn-danger:focus-visible:not(:disabled) {
-  border-color: rgba(185, 28, 28, 0.5);
-  background: #fef2f2;
+.pc2-btn-danger:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--color-danger) 56%, transparent);
+  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
 }
 
 @media (max-width: 720px) {
diff --git a/capsules/system/browser/assets/fonts/Inter-latin-var.woff2 b/capsules/system/browser/assets/fonts/Inter-latin-var.woff2
new file mode 100644
index 000000000..91dc3e852
Binary files /dev/null and b/capsules/system/browser/assets/fonts/Inter-latin-var.woff2 differ
diff --git a/capsules/system/browser/elastos-theme.js b/capsules/system/browser/elastos-theme.js
new file mode 100644
index 000000000..bad19b950
--- /dev/null
+++ b/capsules/system/browser/elastos-theme.js
@@ -0,0 +1,122 @@
+/* GENERATED from capsules/_shared/elastos-theme.js — do not edit. Run `just vendor-ui`. */
+/* ElastOS UI — shared theme runtime (single source of truth).
+ *
+ * Vendored into each participating capsule's browser/ dir by `just vendor-ui`,
+ * next to elastos-ui.css. Everything is served same-origin from the gateway,
+ * so localStorage is the one canonical store (mirrors PC2's approach):
+ *
+ *   localStorage["elastos.ui.theme"]  = "dark" | "light" | "auto"
+ *   localStorage["elastos.ui.accent"] = "blue" | "purple" | "pink" | "red" |
+ *                                       "orange" | "yellow" | "green" | "graphite"
+ *
+ * Dark is the default theme when unset; blue is the default accent. "auto"
+ * follows prefers-color-scheme. The resolved theme is applied as
+ * data-el-theme="light" on <html> (absence means dark); the accent as
+ * data-el-accent (absence means blue) — both activate token blocks in
+ * elastos-ui.css. Cross-document sync is the browser's own `storage` event —
+ * no shell messaging required, and sandboxed app frames (allow-same-origin)
+ * see it.
+ */
+(function () {
+  const KEY = "elastos.ui.theme";
+  const ACCENT_KEY = "elastos.ui.accent";
+  const ACCENTS = [
+    "blue",
+    "purple",
+    "pink",
+    "red",
+    "orange",
+    "yellow",
+    "green",
+    "graphite",
+  ];
+  const media = window.matchMedia
+    ? window.matchMedia("(prefers-color-scheme: light)")
+    : null;
+
+  function preference() {
+    try {
+      const value = localStorage.getItem(KEY);
+      if (value === "light" || value === "dark" || value === "auto") {
+        return value;
+      }
+    } catch (_error) {
+      // Storage may be unavailable; fall through to the default.
+    }
+    return "dark";
+  }
+
+  function resolve(pref) {
+    if (pref === "auto") {
+      return media && media.matches ? "light" : "dark";
+    }
+    return pref;
+  }
+
+  function accentPreference() {
+    try {
+      const value = localStorage.getItem(ACCENT_KEY);
+      if (ACCENTS.includes(value)) {
+        return value;
+      }
+    } catch (_error) {
+      // Storage may be unavailable; fall through to the default.
+    }
+    return "blue";
+  }
+
+  function apply() {
+    if (resolve(preference()) === "light") {
+      document.documentElement.setAttribute("data-el-theme", "light");
+    } else {
+      document.documentElement.removeAttribute("data-el-theme");
+    }
+    const accent = accentPreference();
+    if (accent === "blue") {
+      document.documentElement.removeAttribute("data-el-accent");
+    } else {
+      document.documentElement.setAttribute("data-el-accent", accent);
+    }
+  }
+
+  apply();
+
+  window.addEventListener("storage", (event) => {
+    if (event.key === KEY || event.key === ACCENT_KEY || event.key === null) {
+      apply();
+    }
+  });
+
+  if (media && typeof media.addEventListener === "function") {
+    media.addEventListener("change", () => {
+      if (preference() === "auto") {
+        apply();
+      }
+    });
+  }
+
+  window.elastosTheme = {
+    preference,
+    resolved: () => resolve(preference()),
+    set(value) {
+      const pref = value === "light" || value === "auto" ? value : "dark";
+      try {
+        localStorage.setItem(KEY, pref);
+      } catch (_error) {
+        // Applying still works for this document.
+      }
+      apply();
+    },
+    accents: ACCENTS.slice(),
+    accent: accentPreference,
+    setAccent(value) {
+      const accent = ACCENTS.includes(value) ? value : "blue";
+      try {
+        localStorage.setItem(ACCENT_KEY, accent);
+      } catch (_error) {
+        // Applying still works for this document.
+      }
+      apply();
+    },
+  };
+})();
diff --git a/capsules/system/browser/elastos-ui.css b/capsules/system/browser/elastos-ui.css
new file mode 100644
index 000000000..7529596ef
--- /dev/null
+++ b/capsules/system/browser/elastos-ui.css
@@ -0,0 +1,248 @@
+/* GENERATED from capsules/_shared/elastos-ui.css — do not edit. Run `just vendor-ui`. */
+/* ElastOS UI — shared design tokens (single source of truth).
+ *
+ * This file lives at capsules/_shared/elastos-ui.css and is VENDORED into each
+ * participating capsule's browser/ dir by `just vendor-ui` (no gateway route,
+ * no shared runtime surface — capsules stay self-contained). Edit THIS file,
+ * then run `just vendor-ui`; `just alignment-check` fails on drift.
+ *
+ * Contents: Inter (OFL, latin variable subset), palette, type scale, radii,
+ * hairlines, blur/elevation steps, motion tokens, and minimal control
+ * primitives. Layout is each app's business — tokens only.
+ */
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: optional;
+  src: url("./assets/fonts/Inter-latin-var.woff2") format("woff2");
+}
+
+:root {
+  color-scheme: dark;
+
+  /* Palette */
+  --el-bg: #0b0d10;
+  --el-surface: rgba(22, 24, 29, 0.92);
+  --el-surface-raised: #16181d;
+  --el-inset: rgba(255, 255, 255, 0.06);
+  --el-text: #f5f7fa;
+  --el-muted: rgba(245, 247, 250, 0.7);
+  --el-soft: rgba(245, 247, 250, 0.48);
+  --el-brand: #f6921a;
+  --el-brand-strong: #ffb457;
+  --el-focus: rgba(246, 146, 26, 0.55);
+  --el-danger: #ff8f8f;
+  --el-ok: #34d399;
+
+  /* Hairlines (one pair, everywhere) */
+  --el-hairline: rgba(255, 255, 255, 0.12);
+  --el-hairline-strong: rgba(255, 255, 255, 0.18);
+
+  /* Type: 10/11/12/13/14/16/28; weights 400/500/600/700 */
+  --el-font: "Inter", -apple-system, "Segoe UI", "SF Pro Text", sans-serif;
+  --el-font-mono: ui-monospace, "SF Mono", Menlo, monospace;
+  --el-text-2xs: 10px;
+  --el-text-xs: 11px;
+  --el-text-sm: 12px;
+  --el-text-md: 13px;
+  --el-text-lg: 14px;
+  --el-text-xl: 16px;
+  --el-text-display: 28px;
+
+  /* Radii: 4/6/10/12/16/20 + pill */
+  --el-radius-xs: 4px;
+  --el-radius-sm: 6px;
+  --el-radius-md: 10px;
+  --el-radius-lg: 12px;
+  --el-radius-xl: 16px;
+  --el-radius-2xl: 20px;
+  --el-radius-pill: 999px;
+
+  /* Blur: three steps only */
+  --el-blur-1: 8px;
+  --el-blur-2: 16px;
+  --el-blur-3: 24px;
+
+  /* Elevation: three levels */
+  --el-shadow-1: 0 2px 10px rgba(0, 0, 0, 0.22);
+  --el-shadow-2: 0 12px 28px rgba(0, 0, 0, 0.28);
+  --el-shadow-3: 0 24px 80px rgba(0, 0, 0, 0.35);
+
+  /* Motion: 80/140/180/220, exits 150; one ease */
+  --el-dur-1: 80ms;
+  --el-dur-2: 140ms;
+  --el-dur-3: 180ms;
+  --el-dur-4: 220ms;
+  --el-dur-exit: 150ms;
+  --el-ease: cubic-bezier(0.2, 0, 0, 1);
+
+  /* System accent — ONE accent, chosen by the user in System > Personalization
+     (macOS model), obeyed by every app. Selected via data-el-accent on <html>
+     (absence = blue). Apps consume the derived tones and never define their own
+     accent colors. */
+  --el-accent: #0a84ff;
+  --el-accent-ink: #ffffff;
+  --el-accent-strong: color-mix(in srgb, var(--el-accent) 78%, #ffffff);
+  --el-accent-soft: color-mix(in srgb, var(--el-accent) 22%, transparent);
+  --el-accent-faint: color-mix(in srgb, var(--el-accent) 11%, transparent);
+}
+
+/* The eight macOS accents. Yellow and orange carry dark ink on filled controls. */
+:root[data-el-accent="purple"] {
+  --el-accent: #bf5af2;
+}
+
+:root[data-el-accent="pink"] {
+  --el-accent: #ff375f;
+}
+
+:root[data-el-accent="red"] {
+  --el-accent: #ff453a;
+}
+
+:root[data-el-accent="orange"] {
+  --el-accent: #f6921a;
+  --el-accent-ink: #161616;
+}
+
+:root[data-el-accent="yellow"] {
+  --el-accent: #ffd60a;
+  --el-accent-ink: #161616;
+}
+
+:root[data-el-accent="green"] {
+  --el-accent: #30b84f;
+}
+
+:root[data-el-accent="graphite"] {
+  --el-accent: #8e8e93;
+}
+
+/* Light theme: dark is the default (no attribute); the shell sets
+   data-el-theme="light" on <html> and broadcasts changes to app frames.
+   Values restore the pre-token light look: white raised panels over a cool
+   pale stage, navy ink, the same brand orange. */
+:root[data-el-theme="light"] {
+  color-scheme: light;
+
+  --el-bg: #eef1f6;
+  --el-surface: rgba(255, 255, 255, 0.88);
+  --el-surface-raised: #ffffff;
+  --el-inset: rgba(29, 36, 56, 0.055);
+  --el-text: #1d2438;
+  --el-muted: rgba(29, 36, 56, 0.72);
+  --el-soft: rgba(29, 36, 56, 0.5);
+  --el-brand: #f6921a;
+  --el-brand-strong: #e07f0a;
+  --el-focus: rgba(246, 146, 26, 0.55);
+  --el-danger: #b14c5a;
+  --el-ok: #0a7a52;
+
+  --el-hairline: rgba(29, 36, 56, 0.14);
+  --el-hairline-strong: rgba(29, 36, 56, 0.24);
+
+  --el-shadow-1: 0 2px 10px rgba(34, 49, 88, 0.1);
+  --el-shadow-2: 0 12px 28px rgba(34, 49, 88, 0.12);
+  --el-shadow-3: 0 24px 80px rgba(34, 49, 88, 0.16);
+
+  /* "Strong" means higher contrast against the CURRENT background: lighter on
+     dark, deeper on light. */
+  --el-accent-strong: color-mix(in srgb, var(--el-accent) 72%, #1d2438);
+}
+
+/* App base: opt in by putting .el-app on <body>. Dark shell surface, shared
+   type. Layout untouched. */
+.el-app {
+  margin: 0;
+  background: var(--el-bg);
+  color: var(--el-text);
+  font-family: var(--el-font);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+.el-app :focus-visible {
+  outline: 2px solid var(--el-focus);
+  outline-offset: 2px;
+}
+
+/* Minimal control primitives — enough that a capsule needs no bespoke button
+   or input styling to look native. */
+.el-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 32px;
+  padding: 0 14px;
+  border: 1px solid var(--el-hairline);
+  border-radius: var(--el-radius-md);
+  background: var(--el-inset);
+  color: var(--el-text);
+  font: 500 var(--el-text-md) / 1.2 var(--el-font);
+  cursor: pointer;
+  transition: background-color var(--el-dur-2) var(--el-ease);
+}
+
+/* Hover lift over inset surfaces — flips with the theme so apps don't need
+   their own literal rgba(255,255,255,x) hovers. */
+:root {
+  --el-lift: rgba(255, 255, 255, 0.1);
+  --el-lift-strong: rgba(255, 255, 255, 0.16);
+}
+
+:root[data-el-theme="light"] {
+  --el-lift: rgba(29, 36, 56, 0.08);
+  --el-lift-strong: rgba(29, 36, 56, 0.14);
+}
+
+.el-button:hover {
+  background: var(--el-lift);
+}
+
+.el-button:active {
+  transform: scale(0.96);
+}
+
+.el-button:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
+.el-button-primary {
+  border-color: transparent;
+  background: var(--el-brand);
+  color: #161616;
+  font-weight: 600;
+}
+
+.el-button-primary:hover {
+  background: var(--el-brand-strong);
+}
+
+.el-input {
+  min-height: 32px;
+  padding: 0 10px;
+  border: 1px solid var(--el-hairline);
+  border-radius: var(--el-radius-md);
+  background: var(--el-inset);
+  color: var(--el-text);
+  font: 400 var(--el-text-md) / 1.2 var(--el-font);
+}
+
+.el-input::placeholder {
+  color: var(--el-soft);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .el-app *,
+  .el-app *::before,
+  .el-app *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
diff --git a/capsules/system/browser/index.html b/capsules/system/browser/index.html
index a2d85da67..982d0ab2a 100644
--- a/capsules/system/browser/index.html
+++ b/capsules/system/browser/index.html
@@ -4,7 +4,9 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>System · ElastOS</title>
-<link rel="stylesheet" href="./style.css?v=system-20260704b">
+<script src="./elastos-theme.js"></script>
+<link rel="stylesheet" href="./elastos-ui.css">
+<link rel="stylesheet" href="./style.css?v=system-20260717b">
 </head>
 <body>
   <main class="settings-container" aria-label="System">
@@ -15,6 +17,14 @@
 
       <aside class="settings-sidebar disable-user-select disable-context-menu" aria-label="System sections">
         <div class="settings-sidebar-burger disable-context-menu disable-user-select" aria-hidden="true"></div>
+        <input
+          id="settings-search"
+          class="settings-search"
+          type="search"
+          placeholder="Search"
+          spellcheck="false"
+          aria-label="Search settings"
+        >
         <button class="settings-sidebar-item disable-context-menu disable-user-select active" type="button" data-settings="account">
           <span class="settings-sidebar-icon settings-sidebar-icon-account" aria-hidden="true"></span>
           <span class="settings-sidebar-text">Account</span>
@@ -101,6 +111,61 @@ <h1 id="personalization-title">Personalization</h1>
           <section class="pc2-section" aria-labelledby="appearance-title">
             <h2 id="appearance-title" class="pc2-section-title">Appearance</h2>
             <div class="pc2-group">
+              <div class="pc2-group-row">
+                <div class="pc2-card-row">
+                  <div>
+                    <div class="pc2-card-label">Theme</div>
+                    <div class="pc2-card-sublabel">Light or dark across the shell and apps.</div>
+                  </div>
+                  <div id="theme-segment" class="system-segment" role="radiogroup" aria-label="Theme">
+                    <button type="button" class="system-segment-option" data-theme-option="auto" role="radio" aria-checked="false">Auto</button>
+                    <button type="button" class="system-segment-option" data-theme-option="light" role="radio" aria-checked="false">Light</button>
+                    <button type="button" class="system-segment-option" data-theme-option="dark" role="radio" aria-checked="false">Dark</button>
+                  </div>
+                </div>
+              </div>
+              <div class="pc2-group-row">
+                <div class="pc2-card-row">
+                  <div>
+                    <div class="pc2-card-label">Accent color</div>
+                    <div class="pc2-card-sublabel">One accent across the shell and every app.</div>
+                  </div>
+                  <div id="accent-picker" class="system-accent-picker" role="radiogroup" aria-label="Accent color">
+                    <button type="button" class="system-accent-dot" data-accent-option="blue" role="radio" aria-checked="false" aria-label="Blue" title="Blue"></button>
+                    <button type="button" class="system-accent-dot" data-accent-option="purple" role="radio" aria-checked="false" aria-label="Purple" title="Purple"></button>
+                    <button type="button" class="system-accent-dot" data-accent-option="pink" role="radio" aria-checked="false" aria-label="Pink" title="Pink"></button>
+                    <button type="button" class="system-accent-dot" data-accent-option="red" role="radio" aria-checked="false" aria-label="Red" title="Red"></button>
+                    <button type="button" class="system-accent-dot" data-accent-option="orange" role="radio" aria-checked="false" aria-label="Orange" title="Orange"></button>
+                    <button type="button" class="system-accent-dot" data-accent-option="yellow" role="radio" aria-checked="false" aria-label="Yellow" title="Yellow"></button>
+                    <button type="button" class="system-accent-dot" data-accent-option="green" role="radio" aria-checked="false" aria-label="Green" title="Green"></button>
+                    <button type="button" class="system-accent-dot" data-accent-option="graphite" role="radio" aria-checked="false" aria-label="Graphite" title="Graphite"></button>
+                  </div>
+                </div>
+              </div>
+              <div class="pc2-group-row">
+                <div class="pc2-card-row">
+                  <div>
+                    <div class="pc2-card-label">Automatically hide and show the Dock</div>
+                    <div class="pc2-card-sublabel">Tuck the dock under the bottom edge until the pointer approaches.</div>
+                  </div>
+                  <label class="system-switch">
+                    <input id="dock-autohide" type="checkbox" aria-label="Automatically hide and show the Dock">
+                    <span class="system-switch-track" aria-hidden="true"></span>
+                  </label>
+                </div>
+              </div>
+              <div class="pc2-group-row">
+                <div class="pc2-card-row">
+                  <div>
+                    <div class="pc2-card-label">Play interface sounds</div>
+                    <div class="pc2-card-sublabel">Three optional cues — notification, empty Trash, and refusal. Off by default.</div>
+                  </div>
+                  <label class="system-switch">
+                    <input id="ui-sounds" type="checkbox" aria-label="Play interface sounds">
+                    <span class="system-switch-track" aria-hidden="true"></span>
+                  </label>
+                </div>
+              </div>
               <div class="pc2-group-row">
                 <div class="pc2-card-row">
                   <div>
diff --git a/capsules/system/browser/style.css b/capsules/system/browser/style.css
index dc2f1bc46..07e591c05 100644
--- a/capsules/system/browser/style.css
+++ b/capsules/system/browser/style.css
@@ -1,21 +1,41 @@
 :root {
-  color-scheme: light;
+  color-scheme: dark;
   --primary-color-icon: invert(0);
-  --color-settings-bg: #ffffff;
+  --color-settings-bg: var(--el-bg);
+  --color-settings-sidebar: rgba(22, 24, 29, 0.78);
+  --color-settings-card: var(--el-surface-raised);
+  --color-bg-tertiary: var(--el-inset);
+  --color-text-primary: var(--el-text);
+  --color-text-secondary: var(--el-muted);
+  --color-text-muted: var(--el-soft);
+  --color-border: var(--el-hairline);
+  --color-border-light: var(--el-hairline-strong);
+  --color-input-bg: var(--el-inset);
+  --color-input-border: var(--el-hairline);
+  --color-input-text: var(--el-text);
+  --color-success: var(--el-ok);
+  --color-error: var(--el-danger);
+  font-family: var(--el-font);
+}
+
+/* Light theme: shared var(--el-*) tokens flip in elastos-ui.css; restore the
+   pre-dark PC2 values for the app-local residue only. */
+:root[data-el-theme="light"] {
+  color-scheme: light;
   --color-settings-sidebar: #f9f9f9;
-  --color-settings-card: #ffffff;
-  --color-bg-tertiary: #f3f4f6;
-  --color-text-primary: #1f2937;
-  --color-text-secondary: #4b5563;
-  --color-text-muted: #6b7280;
-  --color-border: #e5e7eb;
-  --color-border-light: #d1d5db;
-  --color-input-bg: #ffffff;
-  --color-input-border: #d1d5db;
-  --color-input-text: #1f2937;
-  --color-success: #22c55e;
-  --color-error: #ef4444;
-  font-family: "Avenir Next", "Segoe UI", sans-serif;
+}
+
+:root[data-el-theme="light"] .pc2-btn:hover:not(:disabled),
+:root[data-el-theme="light"] .pc2-btn:focus-visible:not(:disabled),
+:root[data-el-theme="light"] .system-button:hover:not(:disabled),
+:root[data-el-theme="light"] .system-button:focus-visible:not(:disabled) {
+  background: #f3f4f6;
+}
+
+/* The plan output stayed a dark terminal in the original light PC2 look. */
+:root[data-el-theme="light"] .inspect-plan-output {
+  background: #111827;
+  color: #f9fafb;
 }
 
 * {
@@ -54,7 +74,7 @@ dd {
 }
 
 code {
-  font-family: "SFMono-Regular", "Monaco", "Menlo", monospace;
+  font-family: var(--el-font-mono);
 }
 
 .settings-container {
@@ -143,13 +163,13 @@ code {
 
 .settings-sidebar-icon-storage::before {
   border-radius: 3px;
-  box-shadow: inset 0 -5px 0 rgba(31, 41, 55, 0.16);
+  box-shadow: inset 0 -5px 0 var(--el-hairline-strong);
 }
 
 .settings-sidebar-icon-inspector::before {
   border-radius: 50%;
   box-shadow:
-    inset 0 0 0 3px #f9f9f9,
+    inset 0 0 0 3px var(--el-surface-raised),
     0 0 0 1px currentColor;
 }
 
@@ -163,6 +183,33 @@ code {
   flex-grow: 1;
 }
 
+/* Sidebar search (macOS System Settings position): filters sections by any
+   text they contain. */
+.settings-search {
+  width: 100%;
+  margin: 2px 0 8px;
+  padding: 6px 10px;
+  border: 1px solid var(--el-hairline);
+  border-radius: 8px;
+  background: var(--el-inset);
+  color: var(--el-text);
+  font-family: inherit;
+  font-size: 12.5px;
+}
+
+.settings-search::placeholder {
+  color: var(--el-soft);
+}
+
+.settings-search:focus {
+  outline: 2px solid var(--el-focus);
+  outline-offset: 1px;
+}
+
+.settings-sidebar-item.search-hidden {
+  display: none;
+}
+
 .settings-sidebar-item:hover {
   background-color: var(--color-bg-tertiary);
 }
@@ -208,7 +255,7 @@ code {
 .pc2-section-title {
   font-size: 11px;
   font-weight: 700;
-  color: #000;
+  color: var(--el-text);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-bottom: 8px;
@@ -217,15 +264,15 @@ code {
 
 .pc2-card,
 .pc2-group {
-  background: #f9f9f9;
+  background: var(--el-surface-raised);
   border-radius: 8px;
-  border: 1px solid #d0d0d0;
+  border: 1px solid var(--el-hairline);
   overflow: hidden;
 }
 
 .pc2-group-row {
   padding: 10px 12px;
-  border-bottom: 1px solid #e5e5e5;
+  border-bottom: 1px solid var(--el-hairline);
 }
 
 .pc2-group-row:last-child {
@@ -246,17 +293,17 @@ code {
 .pc2-card-label {
   font-size: 13px;
   font-weight: 500;
-  color: #333;
+  color: var(--el-text);
 }
 
 .pc2-card-value {
   font-size: 12px;
-  color: #666;
+  color: var(--el-muted);
 }
 
 .pc2-card-sublabel {
   font-size: 11px;
-  color: #999;
+  color: var(--el-soft);
   margin-top: 2px;
   line-height: 1.35;
 }
@@ -290,9 +337,9 @@ code {
   line-height: 1.2;
   height: auto;
   margin: 0;
-  border: 1px solid #d0d0d0;
-  background: #fff;
-  color: #333;
+  border: 1px solid var(--el-hairline);
+  background: var(--el-inset);
+  color: var(--el-text);
   text-decoration: none;
   white-space: nowrap;
 }
@@ -301,7 +348,7 @@ code {
 .pc2-btn:focus-visible:not(:disabled),
 .system-button:hover:not(:disabled),
 .system-button:focus-visible:not(:disabled) {
-  background: #f3f4f6;
+  background: rgba(255, 255, 255, 0.1);
   outline: none;
 }
 
@@ -328,19 +375,19 @@ code {
 .system-input {
   font-size: 11px;
   padding: 4px 8px;
-  border: 1px solid #ddd;
+  border: 1px solid var(--el-hairline);
   border-radius: 4px;
-  background: #fff;
+  background: var(--el-inset);
   width: auto;
   min-width: 180px;
   flex: 1 1 auto;
-  color: #333;
+  color: var(--el-text);
 }
 
 .pc2-input:focus-visible,
 .system-input:focus-visible {
-  border-color: #3b82f6;
-  outline: 2px solid rgba(59, 130, 246, 0.16);
+  border-color: var(--el-brand);
+  outline: 2px solid var(--el-focus);
   outline-offset: 0;
 }
 
@@ -368,11 +415,11 @@ code {
   min-height: 9rem;
   aspect-ratio: 16 / 9;
   margin: 10px 0;
-  border: 1px solid #d0d0d0;
+  border: 1px solid var(--el-hairline);
   border-radius: 8px;
   background:
-    linear-gradient(135deg, rgba(59, 130, 246, 0.12), transparent 42%),
-    linear-gradient(180deg, #fff, #f9f9f9);
+    linear-gradient(135deg, color-mix(in srgb, var(--el-brand) 12%, transparent), transparent 42%),
+    linear-gradient(180deg, var(--el-surface-raised), var(--el-bg));
   background-position: center;
   background-size: cover;
 }
@@ -387,7 +434,7 @@ code {
   gap: 8px;
   margin-top: 10px;
   padding-top: 10px;
-  border-top: 1px solid #e5e5e5;
+  border-top: 1px solid var(--el-hairline);
 }
 
 .system-switch {
@@ -396,8 +443,113 @@ code {
   align-items: center;
   gap: 8px;
   cursor: pointer;
-  color: #333;
+  color: var(--el-text);
+  font-size: 12px;
+}
+
+.system-segment {
+  display: inline-flex;
+  padding: 2px;
+  border: 1px solid var(--el-hairline);
+  border-radius: 8px;
+  background: var(--el-inset);
+}
+
+.system-segment-option {
+  padding: 4px 12px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--el-muted);
+  font: inherit;
   font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.system-segment-option.active {
+  background: var(--el-surface-raised);
+  color: var(--el-text);
+  box-shadow: var(--el-shadow-1);
+}
+
+.system-segment-option:focus-visible {
+  outline: 2px solid var(--el-focus);
+  outline-offset: 1px;
+}
+
+/* Accent picker: the macOS row of color dots. Selected dot gets a ring in its
+   own color; the swatch colors are fixed samples of the accent palette (the
+   live token would make every dot the same color). */
+.system-accent-picker {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.system-accent-dot {
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: transform 120ms var(--el-ease);
+}
+
+.system-accent-dot:hover {
+  transform: scale(1.15);
+}
+
+.system-accent-dot.active {
+  box-shadow:
+    0 0 0 2px var(--el-surface-raised),
+    0 0 0 4px currentColor;
+}
+
+.system-accent-dot:focus-visible {
+  outline: 2px solid var(--el-focus);
+  outline-offset: 2px;
+}
+
+.system-accent-dot[data-accent-option="blue"] {
+  background: #0a84ff;
+  color: #0a84ff;
+}
+
+.system-accent-dot[data-accent-option="purple"] {
+  background: #bf5af2;
+  color: #bf5af2;
+}
+
+.system-accent-dot[data-accent-option="pink"] {
+  background: #ff375f;
+  color: #ff375f;
+}
+
+.system-accent-dot[data-accent-option="red"] {
+  background: #ff453a;
+  color: #ff453a;
+}
+
+.system-accent-dot[data-accent-option="orange"] {
+  background: #f6921a;
+  color: #f6921a;
+}
+
+.system-accent-dot[data-accent-option="yellow"] {
+  background: #ffd60a;
+  color: #ffd60a;
+}
+
+.system-accent-dot[data-accent-option="green"] {
+  background: #30b84f;
+  color: #30b84f;
+}
+
+.system-accent-dot[data-accent-option="graphite"] {
+  background: #8e8e93;
+  color: #8e8e93;
 }
 
 .system-switch input {
@@ -432,7 +584,7 @@ code {
 }
 
 .system-switch input:checked + .system-switch-track {
-  background-color: #3b82f6;
+  background-color: var(--el-brand);
 }
 
 .system-switch input:checked + .system-switch-track::before {
@@ -440,7 +592,7 @@ code {
 }
 
 .system-switch input:focus-visible + .system-switch-track {
-  outline: 2px solid rgba(59, 130, 246, 0.28);
+  outline: 2px solid var(--el-focus);
   outline-offset: 2px;
 }
 
@@ -453,29 +605,29 @@ code {
   display: flex;
   justify-content: space-between;
   gap: 12px;
-  color: #666;
+  color: var(--el-muted);
   font-size: 11px;
 }
 
 .system-range-input {
   width: 100%;
-  accent-color: #3b82f6;
+  accent-color: var(--el-brand);
 }
 
 .system-status[data-tone="success"] {
-  color: #166534;
+  color: var(--el-ok);
 }
 
 .system-status[data-tone="error"] {
-  color: #dc2626;
+  color: var(--el-danger);
 }
 
 .system-status[data-tone="muted"] {
-  color: #666;
+  color: var(--el-muted);
 }
 
 .system-value-muted {
-  color: #666;
+  color: var(--el-muted);
 }
 
 .system-code {
@@ -497,10 +649,10 @@ code {
 .network-row-empty,
 .inspect-empty {
   padding: 10px 12px;
-  border: 1px solid #e5e5e5;
+  border: 1px solid var(--el-hairline);
   border-radius: 8px;
-  background: #fff;
-  color: #666;
+  background: var(--el-inset);
+  color: var(--el-muted);
   font-size: 12px;
 }
 
@@ -512,8 +664,8 @@ code {
   width: 100%;
   min-width: 34rem;
   border-collapse: collapse;
-  background: #fff;
-  border: 1px solid #e5e5e5;
+  background: var(--el-inset);
+  border: 1px solid var(--el-hairline);
   border-radius: 8px;
   overflow: hidden;
   font-size: 12px;
@@ -522,13 +674,13 @@ code {
 .account-table th,
 .account-table td {
   padding: 8px 10px;
-  border-bottom: 1px solid #e5e5e5;
+  border-bottom: 1px solid var(--el-hairline);
   text-align: left;
   vertical-align: middle;
 }
 
 .account-table th {
-  color: #666;
+  color: var(--el-muted);
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
@@ -554,13 +706,13 @@ code {
 }
 
 .account-name-wrap strong {
-  color: #333;
+  color: var(--el-text);
   font-size: 12px;
 }
 
 .account-name-wrap small,
 .account-used {
-  color: #666;
+  color: var(--el-muted);
   font-size: 11px;
 }
 
@@ -569,18 +721,18 @@ code {
   align-items: center;
   max-width: 100%;
   padding: 3px 7px;
-  border: 1px solid #d0d0d0;
+  border: 1px solid var(--el-hairline);
   border-radius: 999px;
-  background: #f9f9f9;
-  color: #666;
+  background: var(--el-inset);
+  color: var(--el-muted);
   font-size: 11px;
   white-space: nowrap;
 }
 
 .account-role[data-role="admin"] {
-  border-color: #bfdbfe;
-  background: #dbeafe;
-  color: #1d4ed8;
+  border-color: color-mix(in srgb, var(--el-brand) 45%, transparent);
+  background: color-mix(in srgb, var(--el-brand) 16%, transparent);
+  color: var(--el-brand-strong);
 }
 
 .account-actions-cell {
@@ -613,14 +765,14 @@ code {
   gap: 10px;
   margin-top: 10px;
   padding: 10px 12px;
-  border: 1px solid #bfdbfe;
+  border: 1px solid color-mix(in srgb, var(--el-brand) 45%, transparent);
   border-radius: 8px;
-  background: #dbeafe;
+  background: color-mix(in srgb, var(--el-brand) 14%, transparent);
 }
 
 .recovery-pending-text {
   min-width: 0;
-  color: #1d4ed8;
+  color: var(--el-brand-strong);
   font-size: 12px;
   line-height: 1.35;
   overflow-wrap: anywhere;
@@ -673,10 +825,10 @@ code {
   width: 100%;
   gap: 8px;
   padding: 9px 10px;
-  border: 1px solid #e5e5e5;
+  border: 1px solid var(--el-hairline);
   border-radius: 8px;
-  background: #fff;
-  color: #333;
+  background: var(--el-inset);
+  color: var(--el-text);
   font: inherit;
   text-align: left;
   cursor: pointer;
@@ -687,7 +839,7 @@ code {
 .inspect-row.active,
 .inspect-plan-button:hover,
 .inspect-plan-button:focus-visible {
-  border-color: #bfdbfe;
+  border-color: color-mix(in srgb, var(--el-brand) 50%, transparent);
   outline: none;
 }
 
@@ -698,8 +850,8 @@ code {
   width: 28px;
   height: 28px;
   border-radius: 8px;
-  background: #f3f4f6;
-  color: #333;
+  background: var(--el-inset);
+  color: var(--el-text);
   font-size: 11px;
   font-weight: 700;
 }
@@ -714,7 +866,7 @@ code {
 
 .inspect-main strong,
 .inspect-detail-header strong {
-  color: #333;
+  color: var(--el-text);
   font-size: 12px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -725,16 +877,16 @@ code {
 .inspect-detail-header small,
 .inspect-state,
 .inspect-fact span {
-  color: #666;
+  color: var(--el-muted);
   font-size: 11px;
   overflow-wrap: anywhere;
 }
 
 .inspect-detail {
   padding: 10px;
-  border: 1px solid #e5e5e5;
+  border: 1px solid var(--el-hairline);
   border-radius: 8px;
-  background: #fff;
+  background: var(--el-inset);
 }
 
 .inspect-facts {
@@ -745,14 +897,14 @@ code {
 
 .inspect-fact {
   padding: 7px 8px;
-  border: 1px solid #e5e5e5;
+  border: 1px solid var(--el-hairline);
   border-radius: 8px;
-  background: #f9f9f9;
+  background: var(--el-inset);
 }
 
 .inspect-fact b,
 .inspect-preview-title {
-  color: #333;
+  color: var(--el-text);
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
@@ -771,10 +923,10 @@ code {
 
 .inspect-plan-button {
   padding: 4px 8px;
-  border: 1px solid #d0d0d0;
+  border: 1px solid var(--el-hairline);
   border-radius: 4px;
-  background: #fff;
-  color: #333;
+  background: var(--el-inset);
+  color: var(--el-text);
   font: inherit;
   font-size: 11px;
   cursor: pointer;
@@ -786,10 +938,11 @@ code {
   margin: 0;
   overflow: auto;
   padding: 8px;
-  border: 1px solid #e5e5e5;
+  border: 1px solid var(--el-hairline);
   border-radius: 8px;
-  background: #111827;
-  color: #f9fafb;
+  background: var(--el-bg);
+  color: var(--el-text);
+  font-family: var(--el-font-mono);
   font-size: 11px;
   line-height: 1.45;
   white-space: pre-wrap;
@@ -802,10 +955,10 @@ code {
 
 .network-row,
 .webspace-row {
-  border: 1px solid #e5e5e5;
+  border: 1px solid var(--el-hairline);
   border-radius: 8px;
-  background: #fff;
-  color: #333;
+  background: var(--el-inset);
+  color: var(--el-text);
 }
 
 .network-row {
@@ -825,7 +978,7 @@ code {
 .network-row:focus-visible,
 .webspace-open:hover,
 .webspace-open:focus-visible {
-  border-color: #bfdbfe;
+  border-color: color-mix(in srgb, var(--el-brand) 50%, transparent);
   outline: none;
 }
 
@@ -837,8 +990,8 @@ code {
   min-width: 34px;
   min-height: 34px;
   border-radius: 8px;
-  background: #f3f4f6;
-  color: #333;
+  background: var(--el-inset);
+  color: var(--el-text);
   font-size: 11px;
   font-weight: 700;
 }
@@ -857,7 +1010,7 @@ code {
 .network-state strong,
 .webspace-main strong,
 .webspace-state strong {
-  color: #333;
+  color: var(--el-text);
   font-size: 12px;
 }
 
@@ -866,7 +1019,7 @@ code {
 .webspace-main small,
 .webspace-state small,
 .webspace-detail span {
-  color: #666;
+  color: var(--el-muted);
   font-size: 11px;
   overflow-wrap: anywhere;
 }
@@ -880,10 +1033,10 @@ code {
 .network-action,
 .webspace-open {
   padding: 4px 8px;
-  border: 1px solid #d0d0d0;
+  border: 1px solid var(--el-hairline);
   border-radius: 4px;
-  background: #fff;
-  color: #333;
+  background: var(--el-inset);
+  color: var(--el-text);
   font: inherit;
   font-size: 11px;
   cursor: pointer;
@@ -895,11 +1048,11 @@ code {
 }
 
 .network-row[data-tone="success"] .network-state strong {
-  color: #166534;
+  color: var(--el-ok);
 }
 
 .network-row[data-tone="error"] .network-state strong {
-  color: #dc2626;
+  color: var(--el-danger);
 }
 
 .webspace-summary {
@@ -917,7 +1070,7 @@ code {
 }
 
 .webspace-row[open] {
-  border-color: #bfdbfe;
+  border-color: color-mix(in srgb, var(--el-brand) 50%, transparent);
 }
 
 .webspace-details {
@@ -927,7 +1080,7 @@ code {
 }
 
 .webspace-detail b {
-  color: #333;
+  color: var(--el-text);
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
@@ -940,10 +1093,10 @@ code {
 .system-error {
   margin: 10px 30px;
   padding: 10px 12px;
-  border: 1px solid #fecaca;
+  border: 1px solid color-mix(in srgb, var(--el-danger) 45%, transparent);
   border-radius: 8px;
-  background: #fee2e2;
-  color: #dc2626;
+  background: color-mix(in srgb, var(--el-danger) 14%, transparent);
+  color: var(--el-danger);
   font-size: 12px;
   line-height: 1.45;
 }
@@ -976,7 +1129,7 @@ code {
 }
 
 .sidebar-toggle span span {
-  border-bottom: 2px solid #374151;
+  border-bottom: 2px solid var(--el-text);
   display: block;
   margin-bottom: 5px;
   width: 100%;
@@ -1002,7 +1155,7 @@ code {
     left: 0;
     height: 100%;
     z-index: 100;
-    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
+    box-shadow: var(--el-shadow-2);
   }
 
   .settings-content-container {
@@ -1050,9 +1203,9 @@ code {
   .account-table tr {
     margin-bottom: 6px;
     padding: 8px;
-    border: 1px solid #e5e5e5;
+    border: 1px solid var(--el-hairline);
     border-radius: 8px;
-    background: #fff;
+    background: var(--el-inset);
   }
 
   .account-table td {
@@ -1065,7 +1218,7 @@ code {
 
   .account-table td::before {
     content: attr(data-label);
-    color: #666;
+    color: var(--el-muted);
     font-size: 11px;
     font-weight: 700;
     text-transform: uppercase;
diff --git a/capsules/system/browser/system.js b/capsules/system/browser/system.js
index 11f3b32fa..f46341104 100644
--- a/capsules/system/browser/system.js
+++ b/capsules/system/browser/system.js
@@ -80,6 +80,7 @@ boot().catch((error) => {
 
 async function boot() {
   configureSettingsTabs();
+  configureSettingsSearch();
   configureAppearanceEditor();
   configureGuestAccess();
   configurePasskeyAccess();
@@ -128,8 +129,53 @@ function activateSettingsTab(settings) {
   if (container) {
     container.scrollTop = 0;
   }
+  onSettingsTabActivated(tab);
 }
 
+/* Sidebar search (macOS System Settings): a section matches when ANY text it
+   contains matches — the label you half-remember lives in the pane, not the
+   sidebar. Filtering only hides sidebar entries; it never changes the pane. */
+function configureSettingsSearch() {
+  const input = document.querySelector("#settings-search");
+  if (!input) {
+    return;
+  }
+  const sectionText = new Map();
+  const textFor = (name) => {
+    if (!sectionText.has(name)) {
+      const pane = document.querySelector(`.settings-content[data-settings="${name}"]`);
+      const item = document.querySelector(`.settings-sidebar-item[data-settings="${name}"]`);
+      const haystack = `${item?.textContent || ""} ${pane?.textContent || ""}`.toLowerCase();
+      sectionText.set(name, haystack);
+    }
+    return sectionText.get(name);
+  };
+  input.addEventListener("input", () => {
+    const query = input.value.trim().toLowerCase();
+    const items = [...document.querySelectorAll(".settings-sidebar-item")];
+    let firstVisible = null;
+    for (const item of items) {
+      const name = item.dataset.settings || "";
+      const matches = !query || textFor(name).includes(query);
+      item.classList.toggle("search-hidden", !matches);
+      if (matches && !firstVisible) {
+        firstVisible = item;
+      }
+    }
+    // If the active section got filtered out, follow the first match so the
+    // pane always corresponds to something visible in the sidebar.
+    const active = document.querySelector(".settings-sidebar-item.active");
+    if (query && firstVisible && active?.classList.contains("search-hidden")) {
+      activateSettingsTab(firstVisible.dataset.settings);
+    }
+  });
+}
+
+/* Network pane intentionally absent: its backend (/api/apps/home/network-status,
+   market index, carrier status) is Flint gateway code that does not exist on
+   this branch; it returns with the Flint bring-across. */
+function onSettingsTabActivated(_tab) {}
+
 function hasShellAccess() {
   return apiHomeToken.length > 0;
 }
@@ -225,6 +271,89 @@ function configureAppearanceEditor() {
       backgroundOverlayOpacityInput.addEventListener("change", onBackgroundOverlayChange);
     }
   }
+  configureThemeSegment();
+}
+
+/* Theme lives in the shared vendored runtime (elastos-theme.js): one
+   localStorage key, storage events fan it out to the shell and every open
+   app frame. No gateway round-trip — appearance stays a browser concern. */
+function configureThemeSegment() {
+  const segment = document.querySelector("#theme-segment");
+  if (!segment || !window.elastosTheme) {
+    return;
+  }
+  const options = segment.querySelectorAll("[data-theme-option]");
+  const sync = () => {
+    const preference = window.elastosTheme.preference();
+    for (const option of options) {
+      const selected = option.dataset.themeOption === preference;
+      option.classList.toggle("active", selected);
+      option.setAttribute("aria-checked", selected ? "true" : "false");
+    }
+  };
+  for (const option of options) {
+    option.addEventListener("click", () => {
+      window.elastosTheme.set(option.dataset.themeOption);
+      sync();
+    });
+  }
+  window.addEventListener("storage", sync);
+  sync();
+  configureAccentPicker();
+  configureChromeToggles();
+}
+
+/* Accent rides the same vendored runtime as theme: one localStorage key,
+   storage events fan the change out to the shell and every open app frame. */
+function configureAccentPicker() {
+  const picker = document.querySelector("#accent-picker");
+  if (!picker || !window.elastosTheme || !window.elastosTheme.setAccent) {
+    return;
+  }
+  const dots = picker.querySelectorAll("[data-accent-option]");
+  const sync = () => {
+    const accent = window.elastosTheme.accent();
+    for (const dot of dots) {
+      const selected = dot.dataset.accentOption === accent;
+      dot.classList.toggle("active", selected);
+      dot.setAttribute("aria-checked", selected ? "true" : "false");
+    }
+  };
+  for (const dot of dots) {
+    dot.addEventListener("click", () => {
+      window.elastosTheme.setAccent(dot.dataset.accentOption);
+      sync();
+    });
+  }
+  window.addEventListener("storage", sync);
+  sync();
+}
+
+/* Dock auto-hide and UI sounds are pure browser prefs (localStorage), same
+   pattern as theme — the shell listens via storage events / boot sync. */
+function configureChromeToggles() {
+  const dock = document.querySelector("#dock-autohide");
+  const sounds = document.querySelector("#ui-sounds");
+  const read = (key) => {
+    try {
+      return localStorage.getItem(key) === "on";
+    } catch (_error) {
+      return false;
+    }
+  };
+  const write = (key, on) => {
+    try {
+      localStorage.setItem(key, on ? "on" : "off");
+    } catch (_error) {}
+  };
+  if (dock) {
+    dock.checked = read("elastos.ui.dockAutoHide");
+    dock.addEventListener("change", () => write("elastos.ui.dockAutoHide", dock.checked));
+  }
+  if (sounds) {
+    sounds.checked = read("elastos.ui.sounds");
+    sounds.addEventListener("change", () => write("elastos.ui.sounds", sounds.checked));
+  }
 }
 
 function configureGuestAccess() {
@@ -533,7 +662,7 @@ function setWebspaceState(webspace) {
   if (entries.length === 0) {
     const empty = document.createElement("div");
     empty.className = "webspace-row webspace-row-empty";
-    empty.textContent = "No capsules or providers discovered.";
+    empty.textContent = "No Apps or services found yet.";
     webspaceListNode.append(empty);
     return;
   }
@@ -598,7 +727,7 @@ function renderWebspaceDetails(entry) {
     const action = document.createElement("button");
     action.type = "button";
     action.className = "webspace-open";
-    action.textContent = "Open capsule";
+    action.textContent = "Open";
     action.addEventListener("click", (event) => {
       event.preventDefault();
       event.stopPropagation();
@@ -1065,7 +1194,7 @@ function showInspectStatus(message, tone) {
 function webspaceName(entry) {
   const id = readText(entry && entry.id);
   if (!id) {
-    return "Unknown capsule";
+    return "Unknown App";
   }
   return id.split("-").map((part) => (
     part ? part.charAt(0).toUpperCase() + part.slice(1) : part
diff --git a/capsules/wallet-metamask/browser/assets/fonts/Inter-latin-var.woff2 b/capsules/wallet-metamask/browser/assets/fonts/Inter-latin-var.woff2
new file mode 100644
index 000000000..91dc3e852
Binary files /dev/null and b/capsules/wallet-metamask/browser/assets/fonts/Inter-latin-var.woff2 differ
diff --git a/capsules/wallet-metamask/browser/elastos-theme.js b/capsules/wallet-metamask/browser/elastos-theme.js
new file mode 100644
index 000000000..bad19b950
--- /dev/null
+++ b/capsules/wallet-metamask/browser/elastos-theme.js
@@ -0,0 +1,122 @@
+/* GENERATED from capsules/_shared/elastos-theme.js — do not edit. Run `just vendor-ui`. */
+/* ElastOS UI — shared theme runtime (single source of truth).
+ *
+ * Vendored into each participating capsule's browser/ dir by `just vendor-ui`,
+ * next to elastos-ui.css. Everything is served same-origin from the gateway,
+ * so localStorage is the one canonical store (mirrors PC2's approach):
+ *
+ *   localStorage["elastos.ui.theme"]  = "dark" | "light" | "auto"
+ *   localStorage["elastos.ui.accent"] = "blue" | "purple" | "pink" | "red" |
+ *                                       "orange" | "yellow" | "green" | "graphite"
+ *
+ * Dark is the default theme when unset; blue is the default accent. "auto"
+ * follows prefers-color-scheme. The resolved theme is applied as
+ * data-el-theme="light" on <html> (absence means dark); the accent as
+ * data-el-accent (absence means blue) — both activate token blocks in
+ * elastos-ui.css. Cross-document sync is the browser's own `storage` event —
+ * no shell messaging required, and sandboxed app frames (allow-same-origin)
+ * see it.
+ */
+(function () {
+  const KEY = "elastos.ui.theme";
+  const ACCENT_KEY = "elastos.ui.accent";
+  const ACCENTS = [
+    "blue",
+    "purple",
+    "pink",
+    "red",
+    "orange",
+    "yellow",
+    "green",
+    "graphite",
+  ];
+  const media = window.matchMedia
+    ? window.matchMedia("(prefers-color-scheme: light)")
+    : null;
+
+  function preference() {
+    try {
+      const value = localStorage.getItem(KEY);
+      if (value === "light" || value === "dark" || value === "auto") {
+        return value;
+      }
+    } catch (_error) {
+      // Storage may be unavailable; fall through to the default.
+    }
+    return "dark";
+  }
+
+  function resolve(pref) {
+    if (pref === "auto") {
+      return media && media.matches ? "light" : "dark";
+    }
+    return pref;
+  }
+
+  function accentPreference() {
+    try {
+      const value = localStorage.getItem(ACCENT_KEY);
+      if (ACCENTS.includes(value)) {
+        return value;
+      }
+    } catch (_error) {
+      // Storage may be unavailable; fall through to the default.
+    }
+    return "blue";
+  }
+
+  function apply() {
+    if (resolve(preference()) === "light") {
+      document.documentElement.setAttribute("data-el-theme", "light");
+    } else {
+      document.documentElement.removeAttribute("data-el-theme");
+    }
+    const accent = accentPreference();
+    if (accent === "blue") {
+      document.documentElement.removeAttribute("data-el-accent");
+    } else {
+      document.documentElement.setAttribute("data-el-accent", accent);
+    }
+  }
+
+  apply();
+
+  window.addEventListener("storage", (event) => {
+    if (event.key === KEY || event.key === ACCENT_KEY || event.key === null) {
+      apply();
+    }
+  });
+
+  if (media && typeof media.addEventListener === "function") {
+    media.addEventListener("change", () => {
+      if (preference() === "auto") {
+        apply();
+      }
+    });
+  }
+
+  window.elastosTheme = {
+    preference,
+    resolved: () => resolve(preference()),
+    set(value) {
+      const pref = value === "light" || value === "auto" ? value : "dark";
+      try {
+        localStorage.setItem(KEY, pref);
+      } catch (_error) {
+        // Applying still works for this document.
+      }
+      apply();
+    },
+    accents: ACCENTS.slice(),
+    accent: accentPreference,
+    setAccent(value) {
+      const accent = ACCENTS.includes(value) ? value : "blue";
+      try {
+        localStorage.setItem(ACCENT_KEY, accent);
+      } catch (_error) {
+        // Applying still works for this document.
+      }
+      apply();
+    },
+  };
+})();
diff --git a/capsules/wallet-metamask/browser/elastos-ui.css b/capsules/wallet-metamask/browser/elastos-ui.css
new file mode 100644
index 000000000..7529596ef
--- /dev/null
+++ b/capsules/wallet-metamask/browser/elastos-ui.css
@@ -0,0 +1,248 @@
+/* GENERATED from capsules/_shared/elastos-ui.css — do not edit. Run `just vendor-ui`. */
+/* ElastOS UI — shared design tokens (single source of truth).
+ *
+ * This file lives at capsules/_shared/elastos-ui.css and is VENDORED into each
+ * participating capsule's browser/ dir by `just vendor-ui` (no gateway route,
+ * no shared runtime surface — capsules stay self-contained). Edit THIS file,
+ * then run `just vendor-ui`; `just alignment-check` fails on drift.
+ *
+ * Contents: Inter (OFL, latin variable subset), palette, type scale, radii,
+ * hairlines, blur/elevation steps, motion tokens, and minimal control
+ * primitives. Layout is each app's business — tokens only.
+ */
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: optional;
+  src: url("./assets/fonts/Inter-latin-var.woff2") format("woff2");
+}
+
+:root {
+  color-scheme: dark;
+
+  /* Palette */
+  --el-bg: #0b0d10;
+  --el-surface: rgba(22, 24, 29, 0.92);
+  --el-surface-raised: #16181d;
+  --el-inset: rgba(255, 255, 255, 0.06);
+  --el-text: #f5f7fa;
+  --el-muted: rgba(245, 247, 250, 0.7);
+  --el-soft: rgba(245, 247, 250, 0.48);
+  --el-brand: #f6921a;
+  --el-brand-strong: #ffb457;
+  --el-focus: rgba(246, 146, 26, 0.55);
+  --el-danger: #ff8f8f;
+  --el-ok: #34d399;
+
+  /* Hairlines (one pair, everywhere) */
+  --el-hairline: rgba(255, 255, 255, 0.12);
+  --el-hairline-strong: rgba(255, 255, 255, 0.18);
+
+  /* Type: 10/11/12/13/14/16/28; weights 400/500/600/700 */
+  --el-font: "Inter", -apple-system, "Segoe UI", "SF Pro Text", sans-serif;
+  --el-font-mono: ui-monospace, "SF Mono", Menlo, monospace;
+  --el-text-2xs: 10px;
+  --el-text-xs: 11px;
+  --el-text-sm: 12px;
+  --el-text-md: 13px;
+  --el-text-lg: 14px;
+  --el-text-xl: 16px;
+  --el-text-display: 28px;
+
+  /* Radii: 4/6/10/12/16/20 + pill */
+  --el-radius-xs: 4px;
+  --el-radius-sm: 6px;
+  --el-radius-md: 10px;
+  --el-radius-lg: 12px;
+  --el-radius-xl: 16px;
+  --el-radius-2xl: 20px;
+  --el-radius-pill: 999px;
+
+  /* Blur: three steps only */
+  --el-blur-1: 8px;
+  --el-blur-2: 16px;
+  --el-blur-3: 24px;
+
+  /* Elevation: three levels */
+  --el-shadow-1: 0 2px 10px rgba(0, 0, 0, 0.22);
+  --el-shadow-2: 0 12px 28px rgba(0, 0, 0, 0.28);
+  --el-shadow-3: 0 24px 80px rgba(0, 0, 0, 0.35);
+
+  /* Motion: 80/140/180/220, exits 150; one ease */
+  --el-dur-1: 80ms;
+  --el-dur-2: 140ms;
+  --el-dur-3: 180ms;
+  --el-dur-4: 220ms;
+  --el-dur-exit: 150ms;
+  --el-ease: cubic-bezier(0.2, 0, 0, 1);
+
+  /* System accent — ONE accent, chosen by the user in System > Personalization
+     (macOS model), obeyed by every app. Selected via data-el-accent on <html>
+     (absence = blue). Apps consume the derived tones and never define their own
+     accent colors. */
+  --el-accent: #0a84ff;
+  --el-accent-ink: #ffffff;
+  --el-accent-strong: color-mix(in srgb, var(--el-accent) 78%, #ffffff);
+  --el-accent-soft: color-mix(in srgb, var(--el-accent) 22%, transparent);
+  --el-accent-faint: color-mix(in srgb, var(--el-accent) 11%, transparent);
+}
+
+/* The eight macOS accents. Yellow and orange carry dark ink on filled controls. */
+:root[data-el-accent="purple"] {
+  --el-accent: #bf5af2;
+}
+
+:root[data-el-accent="pink"] {
+  --el-accent: #ff375f;
+}
+
+:root[data-el-accent="red"] {
+  --el-accent: #ff453a;
+}
+
+:root[data-el-accent="orange"] {
+  --el-accent: #f6921a;
+  --el-accent-ink: #161616;
+}
+
+:root[data-el-accent="yellow"] {
+  --el-accent: #ffd60a;
+  --el-accent-ink: #161616;
+}
+
+:root[data-el-accent="green"] {
+  --el-accent: #30b84f;
+}
+
+:root[data-el-accent="graphite"] {
+  --el-accent: #8e8e93;
+}
+
+/* Light theme: dark is the default (no attribute); the shell sets
+   data-el-theme="light" on <html> and broadcasts changes to app frames.
+   Values restore the pre-token light look: white raised panels over a cool
+   pale stage, navy ink, the same brand orange. */
+:root[data-el-theme="light"] {
+  color-scheme: light;
+
+  --el-bg: #eef1f6;
+  --el-surface: rgba(255, 255, 255, 0.88);
+  --el-surface-raised: #ffffff;
+  --el-inset: rgba(29, 36, 56, 0.055);
+  --el-text: #1d2438;
+  --el-muted: rgba(29, 36, 56, 0.72);
+  --el-soft: rgba(29, 36, 56, 0.5);
+  --el-brand: #f6921a;
+  --el-brand-strong: #e07f0a;
+  --el-focus: rgba(246, 146, 26, 0.55);
+  --el-danger: #b14c5a;
+  --el-ok: #0a7a52;
+
+  --el-hairline: rgba(29, 36, 56, 0.14);
+  --el-hairline-strong: rgba(29, 36, 56, 0.24);
+
+  --el-shadow-1: 0 2px 10px rgba(34, 49, 88, 0.1);
+  --el-shadow-2: 0 12px 28px rgba(34, 49, 88, 0.12);
+  --el-shadow-3: 0 24px 80px rgba(34, 49, 88, 0.16);
+
+  /* "Strong" means higher contrast against the CURRENT background: lighter on
+     dark, deeper on light. */
+  --el-accent-strong: color-mix(in srgb, var(--el-accent) 72%, #1d2438);
+}
+
+/* App base: opt in by putting .el-app on <body>. Dark shell surface, shared
+   type. Layout untouched. */
+.el-app {
+  margin: 0;
+  background: var(--el-bg);
+  color: var(--el-text);
+  font-family: var(--el-font);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+.el-app :focus-visible {
+  outline: 2px solid var(--el-focus);
+  outline-offset: 2px;
+}
+
+/* Minimal control primitives — enough that a capsule needs no bespoke button
+   or input styling to look native. */
+.el-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 32px;
+  padding: 0 14px;
+  border: 1px solid var(--el-hairline);
+  border-radius: var(--el-radius-md);
+  background: var(--el-inset);
+  color: var(--el-text);
+  font: 500 var(--el-text-md) / 1.2 var(--el-font);
+  cursor: pointer;
+  transition: background-color var(--el-dur-2) var(--el-ease);
+}
+
+/* Hover lift over inset surfaces — flips with the theme so apps don't need
+   their own literal rgba(255,255,255,x) hovers. */
+:root {
+  --el-lift: rgba(255, 255, 255, 0.1);
+  --el-lift-strong: rgba(255, 255, 255, 0.16);
+}
+
+:root[data-el-theme="light"] {
+  --el-lift: rgba(29, 36, 56, 0.08);
+  --el-lift-strong: rgba(29, 36, 56, 0.14);
+}
+
+.el-button:hover {
+  background: var(--el-lift);
+}
+
+.el-button:active {
+  transform: scale(0.96);
+}
+
+.el-button:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
+.el-button-primary {
+  border-color: transparent;
+  background: var(--el-brand);
+  color: #161616;
+  font-weight: 600;
+}
+
+.el-button-primary:hover {
+  background: var(--el-brand-strong);
+}
+
+.el-input {
+  min-height: 32px;
+  padding: 0 10px;
+  border: 1px solid var(--el-hairline);
+  border-radius: var(--el-radius-md);
+  background: var(--el-inset);
+  color: var(--el-text);
+  font: 400 var(--el-text-md) / 1.2 var(--el-font);
+}
+
+.el-input::placeholder {
+  color: var(--el-soft);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .el-app *,
+  .el-app *::before,
+  .el-app *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
diff --git a/capsules/wallet-metamask/browser/index.html b/capsules/wallet-metamask/browser/index.html
index 8e1effb7e..fc8c500fe 100644
--- a/capsules/wallet-metamask/browser/index.html
+++ b/capsules/wallet-metamask/browser/index.html
@@ -4,7 +4,9 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Wallet · ElastOS</title>
-<link rel="stylesheet" href="./style.css?v=wallet-metamask-20260508a">
+<script src="./elastos-theme.js"></script>
+<link rel="stylesheet" href="./elastos-ui.css">
+<link rel="stylesheet" href="./style.css?v=wallet-metamask-20260718d">
 </head>
 <body>
   <main class="wallet-shell" aria-label="Wallet approval method">
@@ -38,6 +40,6 @@ <h2>Approval requests</h2>
       <div id="wallet-requests" class="wallet-requests" aria-live="polite"></div>
     </section>
   </main>
-  <script type="module" src="./wallet-metamask.js?v=wallet-metamask-20260508a"></script>
+  <script type="module" src="./wallet-metamask.js?v=wallet-metamask-20260718d"></script>
 </body>
 </html>
diff --git a/capsules/wallet-metamask/browser/style.css b/capsules/wallet-metamask/browser/style.css
index e0a0bc442..45b515cd0 100644
--- a/capsules/wallet-metamask/browser/style.css
+++ b/capsules/wallet-metamask/browser/style.css
@@ -1,19 +1,19 @@
+/* Rides the shared tokens (dark default, light via data-el-theme). */
 :root {
-  color-scheme: light;
-  --bg: #edf1fb;
-  --panel: rgba(255, 255, 255, 0.9);
-  --line: rgba(83, 103, 164, 0.14);
-  --line-strong: rgba(83, 103, 164, 0.22);
-  --ink: #1d2438;
-  --muted: #66708a;
-  --brand: #f6921a;
-  --brand-soft: #fff1dc;
-  --accent: #5f76d8;
-  --accent-soft: #e8edff;
-  --accent-deep: #3c53a7;
-  --danger: #b14c5a;
-  --shadow: 0 24px 60px rgba(34, 49, 88, 0.12);
-  font-family: "IBM Plex Sans", "Avenir Next", "Segoe UI", sans-serif;
+  --bg: var(--el-bg);
+  --panel: var(--el-surface);
+  --line: var(--el-hairline);
+  --line-strong: var(--el-hairline-strong);
+  --ink: var(--el-text);
+  --muted: var(--el-muted);
+  --brand: var(--el-brand);
+  --brand-soft: color-mix(in srgb, var(--el-brand) 16%, transparent);
+  --accent: var(--el-accent);
+  --accent-soft: var(--el-accent-soft);
+  --accent-deep: var(--el-accent-strong);
+  --danger: var(--el-danger);
+  --shadow: var(--el-shadow-2);
+  font-family: var(--el-font);
 }
 
 * {
@@ -33,12 +33,30 @@ body {
 body {
   padding: clamp(0.45rem, 1.35vw, 0.85rem);
   background:
-    radial-gradient(circle at top left, rgba(95, 118, 216, 0.14), transparent 28%),
-    radial-gradient(circle at bottom right, rgba(126, 149, 226, 0.12), transparent 24%),
-    linear-gradient(180deg, #f7f9ff 0%, var(--bg) 100%);
+    radial-gradient(circle at top left, var(--el-accent-faint), transparent 28%),
+    var(--bg);
   color: var(--ink);
 }
 
+/* In-rail ceremony: solid fill, single panel — no decorative bleed into the sheet. */
+body[data-presentation="sheet"] {
+  min-height: 100%;
+  padding: 18px 16px;
+  background: var(--bg);
+  display: grid;
+  align-content: start;
+  gap: 12px;
+}
+
+body[data-presentation="sheet"] .wallet-shell {
+  display: grid;
+  gap: 12px;
+}
+
+body[data-presentation="sheet"] .wallet-panel {
+  box-shadow: none;
+}
+
 button {
   border: 0;
   font: inherit;
@@ -116,7 +134,7 @@ h2 {
   padding: 0.34rem 0.55rem;
   border: 1px solid var(--line);
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.58);
+  background: var(--el-inset);
   font-size: 0.78rem;
   font-weight: 800;
 }
@@ -129,11 +147,11 @@ h2 {
   min-height: 2.35rem;
   padding: 0.58rem 0.9rem;
   border-radius: 999px;
-  background: linear-gradient(135deg, var(--brand), #ffb24c);
-  color: #1d2438;
+  background: linear-gradient(135deg, var(--brand), var(--el-brand-strong));
+  color: #161616;
   font-weight: 900;
   cursor: pointer;
-  box-shadow: 0 12px 26px rgba(246, 146, 26, 0.25);
+  box-shadow: var(--el-shadow-1);
 }
 
 .wallet-button-secondary {
@@ -152,17 +170,17 @@ h2 {
   padding: 0.6rem 0.72rem;
   border: 1px solid var(--line);
   border-radius: 0.85rem;
-  background: rgba(255, 255, 255, 0.6);
+  background: var(--el-inset);
   color: var(--muted);
 }
 
 .wallet-status[data-tone="success"] {
-  color: #2d6b48;
+  color: var(--el-ok);
 }
 
 .wallet-status[data-tone="error"] {
-  border-color: rgba(177, 76, 90, 0.24);
-  background: rgba(177, 76, 90, 0.1);
+  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
+  background: color-mix(in srgb, var(--danger) 10%, transparent);
   color: var(--danger);
 }
 
@@ -178,7 +196,7 @@ h2 {
   padding: 0.72rem;
   border: 1px solid var(--line);
   border-radius: 0.95rem;
-  background: rgba(255, 255, 255, 0.62);
+  background: var(--el-inset);
 }
 
 .wallet-empty {
@@ -217,7 +235,7 @@ h2 {
   display: block;
   max-width: 100%;
   color: var(--accent-deep);
-  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
+  font-family: var(--el-font-mono);
   font-size: 0.82rem;
   line-height: 1.35;
   overflow-wrap: anywhere;
diff --git a/capsules/wallet-metamask/browser/wallet-metamask.js b/capsules/wallet-metamask/browser/wallet-metamask.js
index 3038d1b4a..f9f985bb2 100644
--- a/capsules/wallet-metamask/browser/wallet-metamask.js
+++ b/capsules/wallet-metamask/browser/wallet-metamask.js
@@ -4,11 +4,20 @@ const stateNode = document.querySelector("#wallet-state");
 const accountsNode = document.querySelector("#wallet-accounts");
 const requestsNode = document.querySelector("#wallet-requests");
 const frameHomeToken = readQueryParam("home_token");
+const ceremonyMode = readQueryParam("presentation") === "sheet";
 const discoveredWalletProviders = [];
+// Skip the background poll while the user is mid-connect/mid-sign so we never tear down an
+// in-flight approval's button state, and a re-entrancy guard so polls can't overlap.
+let interactionBusy = false;
+let refreshInFlight = false;
+// How often to pick up newly-queued approvals (e.g. a mint tx just enqueued by the Create
+// portal) without the user having to reconnect/reopen the Wallet.
+const APPROVAL_POLL_MS = 5000;
 
 boot();
 
 function boot() {
+  applyCeremonyMode();
   configureMetaMaskDiscovery();
   if (connectButton) {
     connectButton.addEventListener("click", onConnect);
@@ -20,11 +29,75 @@ function boot() {
     requestsNode.addEventListener("click", onRequestClick);
   }
   setState("0 linked");
-  refreshWalletState().catch((error) => {
-    showStatus(String(error.message || error), "error");
+  if (!ceremonyMode) {
+    refreshWalletState().catch((error) => {
+      showStatus(String(error.message || error), "error");
+    });
+    startApprovalAutoRefresh();
+  } else {
+    // Wallet Connect / Add account already clicked — start MetaMask immediately.
+    // Button stays as "Try again" if discovery fails or the user cancels.
+    queueCeremonyAutostart();
+  }
+}
+
+/* Sheet presentation: this capsule is only the EIP-1193 ceremony. Connected
+   accounts and approval requests live on the main Wallet surface — hide the
+   duplicate chrome so the user is not managing a second product. */
+function applyCeremonyMode() {
+  if (!ceremonyMode) {
+    return;
+  }
+  document.documentElement.dataset.presentation = "sheet";
+  document.body.dataset.presentation = "sheet";
+  const eyebrow = document.querySelector(".eyebrow");
+  if (eyebrow) {
+    eyebrow.textContent = "Continue with MetaMask";
+  }
+  if (connectButton) {
+    connectButton.textContent = "Continue in MetaMask";
+  }
+  document.querySelectorAll(".wallet-panel").forEach((panel, index) => {
+    if (index > 0) {
+      panel.hidden = true;
+    }
   });
 }
 
+function queueCeremonyAutostart() {
+  if (!connectButton) {
+    return;
+  }
+  showStatus("Opening MetaMask…", "muted");
+  window.requestAnimationFrame(() => {
+    onConnect().catch(() => {});
+  });
+}
+
+function markCeremonyRetry() {
+  if (ceremonyMode && connectButton) {
+    connectButton.textContent = "Try again";
+  }
+}
+
+// Poll for newly-queued approvals so a mint/trade tx enqueued elsewhere appears here on its
+// own. Quiet by design: only when the tab is visible, we have a launch token, and the user
+// isn't mid-interaction; errors are swallowed (the next tick retries).
+function startApprovalAutoRefresh() {
+  if (typeof window?.setInterval !== "function") {
+    return;
+  }
+  window.setInterval(() => {
+    if (!frameHomeToken || interactionBusy || refreshInFlight) {
+      return;
+    }
+    if (typeof document !== "undefined" && document.visibilityState === "hidden") {
+      return;
+    }
+    refreshWalletState().catch(() => {});
+  }, APPROVAL_POLL_MS);
+}
+
 function configureMetaMaskDiscovery() {
   window.addEventListener("eip6963:announceProvider", (event) => {
     const detail = event && event.detail;
@@ -39,16 +112,48 @@ function configureMetaMaskDiscovery() {
   window.dispatchEvent(new Event("eip6963:requestProvider"));
 }
 
+// Re-request EIP-6963 announcements and wait briefly for them to arrive. Resolves as
+// soon as a MetaMask provider is seen, or after a short timeout. Makes connect robust
+// to a slow injection or a co-installed wallet that grabbed window.ethereum.
+function ensureWalletDiscovery(timeoutMs = 400) {
+  window.dispatchEvent(new Event("eip6963:requestProvider"));
+  return new Promise((resolve) => {
+    const start = Date.now();
+    const tick = () => {
+      const haveMetaMask = discoveredWalletProviders.some(({ info, provider }) => {
+        const rdns = readText(info && info.rdns).toLowerCase();
+        return rdns.includes("metamask") || Boolean(provider && provider.isMetaMask && !provider.isPhantom);
+      });
+      if (haveMetaMask || Date.now() - start >= timeoutMs) {
+        resolve();
+        return;
+      }
+      setTimeout(tick, 50);
+    };
+    tick();
+  });
+}
+
 async function onConnect() {
+  // Re-run EIP-6963 discovery and give announcements a tick to arrive, so a slow
+  // MetaMask injection doesn't fall through to a window.ethereum a co-installed wallet
+  // (e.g. Phantom) has overridden. Discovery is the authoritative, per-wallet source.
+  await ensureWalletDiscovery();
   const provider = metaMaskProvider();
   if (!provider) {
-    showStatus("No compatible wallet found.", "error");
+    showStatus(
+      "MetaMask not found. If another wallet (e.g. Phantom) is set as your default Ethereum wallet, MetaMask may not announce — disable that wallet's Ethereum default, or unlock MetaMask, and retry.",
+      "error",
+    );
+    markCeremonyRetry();
     return;
   }
   setButtonBusy(connectButton, true);
-  showStatus("Approve in your wallet.", "muted");
+  interactionBusy = true;
+  showStatus("In MetaMask, pick the account you want to link, then approve.", "muted");
   try {
     const { address, chainId } = await connectProvider(provider);
+    showStatus("Approve the signature in MetaMask.", "muted");
     const challenge = await fetchJson("/api/auth/evm/challenge", {
       method: "POST",
       headers: shellHeaders({ "content-type": "application/json" }),
@@ -65,22 +170,34 @@ async function onConnect() {
       headers: shellHeaders({ "content-type": "application/json" }),
       body: JSON.stringify({ message: challenge.message, signature }),
     });
-    showStatus("Approval method added.", "success");
+    showStatus("Connected. Returning to Wallet…", "success");
     notifyHomeSummaryChanged();
-    await refreshWalletState();
+    if (!ceremonyMode) {
+      await refreshWalletState();
+    }
   } catch (error) {
     showStatus(String(error.message || error), "error");
+    markCeremonyRetry();
   } finally {
     setButtonBusy(connectButton, false);
+    interactionBusy = false;
   }
 }
 
 async function connectProvider(provider) {
+  // MetaMask site permissions are sticky per origin. After Account A is
+  // connected, wallet_requestPermissions often only lists A (with an "Edit
+  // accounts" affordance) even when the MetaMask chrome is on Account B.
+  // Revoke eth_accounts for this origin first so the next permission prompt
+  // is a fresh picker — same as a first-time connect. This does NOT remove
+  // already-linked ElastOS wallet accounts; only the browser↔MetaMask grant.
+  await refreshAccountPermissionPrompt(provider);
   const accounts = await provider.request({ method: "eth_requestAccounts" });
-  const address = Array.isArray(accounts) && accounts[0] ? String(accounts[0]) : "";
+  const address = preferredConnectAddress(provider, accounts);
   if (!address) {
     throw new Error("Wallet returned no account.");
   }
+  assertGrantedMatchesChromeSelection(provider, address);
   const chainHex = await provider.request({ method: "eth_chainId" });
   const chainId = Number.parseInt(String(chainHex), 16);
   if (!Number.isFinite(chainId) || chainId <= 0) {
@@ -89,9 +206,113 @@ async function connectProvider(provider) {
   return { address, chainId };
 }
 
+async function refreshAccountPermissionPrompt(provider) {
+  await revokeAccountPermissions(provider);
+  await requestAccountPermissions(provider);
+}
+
+async function revokeAccountPermissions(provider) {
+  try {
+    await provider.request({
+      method: "wallet_revokePermissions",
+      params: [{ eth_accounts: {} }],
+    });
+  } catch (error) {
+    if (isUserRejectedProviderError(error)) {
+      throw error instanceof Error ? error : new Error(String(error.message || error));
+    }
+    // Unsupported revoke: still try requestPermissions below.
+  }
+}
+
+async function requestAccountPermissions(provider) {
+  try {
+    await provider.request({
+      method: "wallet_requestPermissions",
+      params: [{ eth_accounts: {} }],
+    });
+  } catch (error) {
+    if (isUserRejectedProviderError(error)) {
+      throw error instanceof Error ? error : new Error(String(error.message || error));
+    }
+    // Unsupported / unavailable method: fall through to eth_requestAccounts.
+    if (isUnsupportedProviderMethodError(error)) {
+      return;
+    }
+    // Other provider quirks — still attempt eth_requestAccounts rather than
+    // blocking the whole connect path.
+  }
+}
+
+function preferredConnectAddress(provider, accounts) {
+  const list = Array.isArray(accounts)
+    ? accounts.map((item) => String(item || "").trim()).filter(Boolean)
+    : [];
+  if (list.length === 0) {
+    return "";
+  }
+  // Prefer the chrome-selected account when MetaMask exposes it and it is in
+  // the granted set (covers providers that keep a stale accounts[0] order).
+  const selected = readText(provider?.selectedAddress);
+  if (selected) {
+    const match = list.find((item) => normalizeAddress(item) === normalizeAddress(selected));
+    if (match) {
+      return match;
+    }
+  }
+  return list[0];
+}
+
+function assertGrantedMatchesChromeSelection(provider, grantedAddress) {
+  const selected = readText(provider?.selectedAddress);
+  if (!selected || !grantedAddress) {
+    return;
+  }
+  if (normalizeAddress(selected) === normalizeAddress(grantedAddress)) {
+    return;
+  }
+  throw new Error(
+    "MetaMask is on a different account than the one granted to this site. "
+      + "In the MetaMask connect dialog, use Edit accounts, select the account "
+      + "you are on, then Connect again.",
+  );
+}
+
+function isUserRejectedProviderError(error) {
+  const code = providerErrorCode(error);
+  if (code === 4001) {
+    return true;
+  }
+  const message = String(error?.message || error || "").toLowerCase();
+  return message.includes("user rejected") || message.includes("user denied") || message.includes("rejected the request");
+}
+
+function isUnsupportedProviderMethodError(error) {
+  const code = providerErrorCode(error);
+  if (code === 4200 || code === -32601) {
+    return true;
+  }
+  const message = String(error?.message || error || "").toLowerCase();
+  return (
+    message.includes("method not found")
+    || message.includes("does not exist")
+    || message.includes("not supported")
+    || message.includes("unsupported method")
+  );
+}
+
+function providerErrorCode(error) {
+  const direct = error && error.code;
+  if (typeof direct === "number") {
+    return direct;
+  }
+  const nested = error && error.error && error.error.code;
+  return typeof nested === "number" ? nested : null;
+}
+
 async function currentProviderAddress(provider) {
   const accounts = await provider.request({ method: "eth_accounts" });
-  const address = Array.isArray(accounts) && accounts[0] ? String(accounts[0]) : "";
+  const address = preferredConnectAddress(provider, accounts);
   if (!address) {
     throw new Error("Wallet has no selected account.");
   }
@@ -115,26 +336,34 @@ async function refreshWalletState() {
     showStatus("Open from Wallet to review approval requests.", "error");
     return;
   }
-  const [accountSummary, requestSummary] = await Promise.all([
-    fetchJson("/api/apps/wallet-metamask/wallet/accounts", {
-      headers: shellHeaders(),
-    }),
-    fetchJson("/api/apps/wallet-metamask/wallet/approvals", {
-      headers: shellHeaders(),
-    }),
-  ]);
-  const accounts = Array.isArray(accountSummary && accountSummary.accounts)
-    ? accountSummary.accounts
-    : [];
-  const requests = Array.isArray(requestSummary && requestSummary.approval_requests)
-    ? requestSummary.approval_requests
-    : [];
-  renderAccounts(accounts);
-  renderRequests(requests);
-  if (accounts.length > 0) {
-    setState(`${accounts.length} linked`);
-  } else {
-    setState("0 linked");
+  if (refreshInFlight) {
+    return;
+  }
+  refreshInFlight = true;
+  try {
+    const [accountSummary, requestSummary] = await Promise.all([
+      fetchJson("/api/apps/wallet-metamask/wallet/accounts", {
+        headers: shellHeaders(),
+      }),
+      fetchJson("/api/apps/wallet-metamask/wallet/approvals", {
+        headers: shellHeaders(),
+      }),
+    ]);
+    const accounts = Array.isArray(accountSummary && accountSummary.accounts)
+      ? accountSummary.accounts
+      : [];
+    const requests = Array.isArray(requestSummary && requestSummary.approval_requests)
+      ? requestSummary.approval_requests
+      : [];
+    renderAccounts(accounts);
+    renderRequests(requests);
+    if (accounts.length > 0) {
+      setState(`${accounts.length} linked`);
+    } else {
+      setState("0 linked");
+    }
+  } finally {
+    refreshInFlight = false;
   }
 }
 
@@ -268,6 +497,7 @@ async function onRequestClick(event) {
     return;
   }
   setButtonBusy(button, true);
+  interactionBusy = true;
   showStatus("Preparing request.", "muted");
   try {
     const handoffSummary = await fetchJson(`/api/apps/wallet-metamask/wallet/approvals/${encodeURIComponent(requestId)}/approve`, {
@@ -327,6 +557,7 @@ async function onRequestClick(event) {
     showStatus(String(error.message || error), "error");
   } finally {
     setButtonBusy(button, false);
+    interactionBusy = false;
   }
 }
 
@@ -403,14 +634,21 @@ function metaMaskProvider() {
 
 function selectedMetaMaskProvider(entries) {
   const list = Array.isArray(entries) ? entries : [];
-  const metamask = list.find(({ info, provider }) => {
-    const rdns = readText(info && info.rdns).toLowerCase();
-    return Boolean(provider && provider.isMetaMask) || rdns.includes("metamask");
-  });
-  if (metamask && metamask.provider && typeof metamask.provider.request === "function") {
-    return metamask.provider;
-  }
-  return null;
+  const usable = ({ provider }) =>
+    provider && typeof provider.request === "function" && !provider.isPhantom;
+  // Prefer the authoritative EIP-6963 identity (rdns), which a wallet cannot spoof as
+  // another wallet's. Only then fall back to the isMetaMask flag — and never trust it
+  // on a provider that also identifies as Phantom (Phantom sets isMetaMask for compat).
+  const byRdns = list.find(
+    (entry) => usable(entry) && readText(entry.info && entry.info.rdns).toLowerCase().includes("metamask"),
+  );
+  if (byRdns) {
+    return byRdns.provider;
+  }
+  const byFlag = list.find(
+    (entry) => usable(entry) && Boolean(entry.provider.isMetaMask),
+  );
+  return byFlag ? byFlag.provider : null;
 }
 
 function walletIntentLabel(intent) {
diff --git a/capsules/wallet-unisat/browser/assets/fonts/Inter-latin-var.woff2 b/capsules/wallet-unisat/browser/assets/fonts/Inter-latin-var.woff2
new file mode 100644
index 000000000..91dc3e852
Binary files /dev/null and b/capsules/wallet-unisat/browser/assets/fonts/Inter-latin-var.woff2 differ
diff --git a/capsules/wallet-unisat/browser/elastos-theme.js b/capsules/wallet-unisat/browser/elastos-theme.js
new file mode 100644
index 000000000..bad19b950
--- /dev/null
+++ b/capsules/wallet-unisat/browser/elastos-theme.js
@@ -0,0 +1,122 @@
+/* GENERATED from capsules/_shared/elastos-theme.js — do not edit. Run `just vendor-ui`. */
+/* ElastOS UI — shared theme runtime (single source of truth).
+ *
+ * Vendored into each participating capsule's browser/ dir by `just vendor-ui`,
+ * next to elastos-ui.css. Everything is served same-origin from the gateway,
+ * so localStorage is the one canonical store (mirrors PC2's approach):
+ *
+ *   localStorage["elastos.ui.theme"]  = "dark" | "light" | "auto"
+ *   localStorage["elastos.ui.accent"] = "blue" | "purple" | "pink" | "red" |
+ *                                       "orange" | "yellow" | "green" | "graphite"
+ *
+ * Dark is the default theme when unset; blue is the default accent. "auto"
+ * follows prefers-color-scheme. The resolved theme is applied as
+ * data-el-theme="light" on <html> (absence means dark); the accent as
+ * data-el-accent (absence means blue) — both activate token blocks in
+ * elastos-ui.css. Cross-document sync is the browser's own `storage` event —
+ * no shell messaging required, and sandboxed app frames (allow-same-origin)
+ * see it.
+ */
+(function () {
+  const KEY = "elastos.ui.theme";
+  const ACCENT_KEY = "elastos.ui.accent";
+  const ACCENTS = [
+    "blue",
+    "purple",
+    "pink",
+    "red",
+    "orange",
+    "yellow",
+    "green",
+    "graphite",
+  ];
+  const media = window.matchMedia
+    ? window.matchMedia("(prefers-color-scheme: light)")
+    : null;
+
+  function preference() {
+    try {
+      const value = localStorage.getItem(KEY);
+      if (value === "light" || value === "dark" || value === "auto") {
+        return value;
+      }
+    } catch (_error) {
+      // Storage may be unavailable; fall through to the default.
+    }
+    return "dark";
+  }
+
+  function resolve(pref) {
+    if (pref === "auto") {
+      return media && media.matches ? "light" : "dark";
+    }
+    return pref;
+  }
+
+  function accentPreference() {
+    try {
+      const value = localStorage.getItem(ACCENT_KEY);
+      if (ACCENTS.includes(value)) {
+        return value;
+      }
+    } catch (_error) {
+      // Storage may be unavailable; fall through to the default.
+    }
+    return "blue";
+  }
+
+  function apply() {
+    if (resolve(preference()) === "light") {
+      document.documentElement.setAttribute("data-el-theme", "light");
+    } else {
+      document.documentElement.removeAttribute("data-el-theme");
+    }
+    const accent = accentPreference();
+    if (accent === "blue") {
+      document.documentElement.removeAttribute("data-el-accent");
+    } else {
+      document.documentElement.setAttribute("data-el-accent", accent);
+    }
+  }
+
+  apply();
+
+  window.addEventListener("storage", (event) => {
+    if (event.key === KEY || event.key === ACCENT_KEY || event.key === null) {
+      apply();
+    }
+  });
+
+  if (media && typeof media.addEventListener === "function") {
+    media.addEventListener("change", () => {
+      if (preference() === "auto") {
+        apply();
+      }
+    });
+  }
+
+  window.elastosTheme = {
+    preference,
+    resolved: () => resolve(preference()),
+    set(value) {
+      const pref = value === "light" || value === "auto" ? value : "dark";
+      try {
+        localStorage.setItem(KEY, pref);
+      } catch (_error) {
+        // Applying still works for this document.
+      }
+      apply();
+    },
+    accents: ACCENTS.slice(),
+    accent: accentPreference,
+    setAccent(value) {
+      const accent = ACCENTS.includes(value) ? value : "blue";
+      try {
+        localStorage.setItem(ACCENT_KEY, accent);
+      } catch (_error) {
+        // Applying still works for this document.
+      }
+      apply();
+    },
+  };
+})();
diff --git a/capsules/wallet-unisat/browser/elastos-ui.css b/capsules/wallet-unisat/browser/elastos-ui.css
new file mode 100644
index 000000000..7529596ef
--- /dev/null
+++ b/capsules/wallet-unisat/browser/elastos-ui.css
@@ -0,0 +1,248 @@
+/* GENERATED from capsules/_shared/elastos-ui.css — do not edit. Run `just vendor-ui`. */
+/* ElastOS UI — shared design tokens (single source of truth).
+ *
+ * This file lives at capsules/_shared/elastos-ui.css and is VENDORED into each
+ * participating capsule's browser/ dir by `just vendor-ui` (no gateway route,
+ * no shared runtime surface — capsules stay self-contained). Edit THIS file,
+ * then run `just vendor-ui`; `just alignment-check` fails on drift.
+ *
+ * Contents: Inter (OFL, latin variable subset), palette, type scale, radii,
+ * hairlines, blur/elevation steps, motion tokens, and minimal control
+ * primitives. Layout is each app's business — tokens only.
+ */
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: optional;
+  src: url("./assets/fonts/Inter-latin-var.woff2") format("woff2");
+}
+
+:root {
+  color-scheme: dark;
+
+  /* Palette */
+  --el-bg: #0b0d10;
+  --el-surface: rgba(22, 24, 29, 0.92);
+  --el-surface-raised: #16181d;
+  --el-inset: rgba(255, 255, 255, 0.06);
+  --el-text: #f5f7fa;
+  --el-muted: rgba(245, 247, 250, 0.7);
+  --el-soft: rgba(245, 247, 250, 0.48);
+  --el-brand: #f6921a;
+  --el-brand-strong: #ffb457;
+  --el-focus: rgba(246, 146, 26, 0.55);
+  --el-danger: #ff8f8f;
+  --el-ok: #34d399;
+
+  /* Hairlines (one pair, everywhere) */
+  --el-hairline: rgba(255, 255, 255, 0.12);
+  --el-hairline-strong: rgba(255, 255, 255, 0.18);
+
+  /* Type: 10/11/12/13/14/16/28; weights 400/500/600/700 */
+  --el-font: "Inter", -apple-system, "Segoe UI", "SF Pro Text", sans-serif;
+  --el-font-mono: ui-monospace, "SF Mono", Menlo, monospace;
+  --el-text-2xs: 10px;
+  --el-text-xs: 11px;
+  --el-text-sm: 12px;
+  --el-text-md: 13px;
+  --el-text-lg: 14px;
+  --el-text-xl: 16px;
+  --el-text-display: 28px;
+
+  /* Radii: 4/6/10/12/16/20 + pill */
+  --el-radius-xs: 4px;
+  --el-radius-sm: 6px;
+  --el-radius-md: 10px;
+  --el-radius-lg: 12px;
+  --el-radius-xl: 16px;
+  --el-radius-2xl: 20px;
+  --el-radius-pill: 999px;
+
+  /* Blur: three steps only */
+  --el-blur-1: 8px;
+  --el-blur-2: 16px;
+  --el-blur-3: 24px;
+
+  /* Elevation: three levels */
+  --el-shadow-1: 0 2px 10px rgba(0, 0, 0, 0.22);
+  --el-shadow-2: 0 12px 28px rgba(0, 0, 0, 0.28);
+  --el-shadow-3: 0 24px 80px rgba(0, 0, 0, 0.35);
+
+  /* Motion: 80/140/180/220, exits 150; one ease */
+  --el-dur-1: 80ms;
+  --el-dur-2: 140ms;
+  --el-dur-3: 180ms;
+  --el-dur-4: 220ms;
+  --el-dur-exit: 150ms;
+  --el-ease: cubic-bezier(0.2, 0, 0, 1);
+
+  /* System accent — ONE accent, chosen by the user in System > Personalization
+     (macOS model), obeyed by every app. Selected via data-el-accent on <html>
+     (absence = blue). Apps consume the derived tones and never define their own
+     accent colors. */
+  --el-accent: #0a84ff;
+  --el-accent-ink: #ffffff;
+  --el-accent-strong: color-mix(in srgb, var(--el-accent) 78%, #ffffff);
+  --el-accent-soft: color-mix(in srgb, var(--el-accent) 22%, transparent);
+  --el-accent-faint: color-mix(in srgb, var(--el-accent) 11%, transparent);
+}
+
+/* The eight macOS accents. Yellow and orange carry dark ink on filled controls. */
+:root[data-el-accent="purple"] {
+  --el-accent: #bf5af2;
+}
+
+:root[data-el-accent="pink"] {
+  --el-accent: #ff375f;
+}
+
+:root[data-el-accent="red"] {
+  --el-accent: #ff453a;
+}
+
+:root[data-el-accent="orange"] {
+  --el-accent: #f6921a;
+  --el-accent-ink: #161616;
+}
+
+:root[data-el-accent="yellow"] {
+  --el-accent: #ffd60a;
+  --el-accent-ink: #161616;
+}
+
+:root[data-el-accent="green"] {
+  --el-accent: #30b84f;
+}
+
+:root[data-el-accent="graphite"] {
+  --el-accent: #8e8e93;
+}
+
+/* Light theme: dark is the default (no attribute); the shell sets
+   data-el-theme="light" on <html> and broadcasts changes to app frames.
+   Values restore the pre-token light look: white raised panels over a cool
+   pale stage, navy ink, the same brand orange. */
+:root[data-el-theme="light"] {
+  color-scheme: light;
+
+  --el-bg: #eef1f6;
+  --el-surface: rgba(255, 255, 255, 0.88);
+  --el-surface-raised: #ffffff;
+  --el-inset: rgba(29, 36, 56, 0.055);
+  --el-text: #1d2438;
+  --el-muted: rgba(29, 36, 56, 0.72);
+  --el-soft: rgba(29, 36, 56, 0.5);
+  --el-brand: #f6921a;
+  --el-brand-strong: #e07f0a;
+  --el-focus: rgba(246, 146, 26, 0.55);
+  --el-danger: #b14c5a;
+  --el-ok: #0a7a52;
+
+  --el-hairline: rgba(29, 36, 56, 0.14);
+  --el-hairline-strong: rgba(29, 36, 56, 0.24);
+
+  --el-shadow-1: 0 2px 10px rgba(34, 49, 88, 0.1);
+  --el-shadow-2: 0 12px 28px rgba(34, 49, 88, 0.12);
+  --el-shadow-3: 0 24px 80px rgba(34, 49, 88, 0.16);
+
+  /* "Strong" means higher contrast against the CURRENT background: lighter on
+     dark, deeper on light. */
+  --el-accent-strong: color-mix(in srgb, var(--el-accent) 72%, #1d2438);
+}
+
+/* App base: opt in by putting .el-app on <body>. Dark shell surface, shared
+   type. Layout untouched. */
+.el-app {
+  margin: 0;
+  background: var(--el-bg);
+  color: var(--el-text);
+  font-family: var(--el-font);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+.el-app :focus-visible {
+  outline: 2px solid var(--el-focus);
+  outline-offset: 2px;
+}
+
+/* Minimal control primitives — enough that a capsule needs no bespoke button
+   or input styling to look native. */
+.el-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 32px;
+  padding: 0 14px;
+  border: 1px solid var(--el-hairline);
+  border-radius: var(--el-radius-md);
+  background: var(--el-inset);
+  color: var(--el-text);
+  font: 500 var(--el-text-md) / 1.2 var(--el-font);
+  cursor: pointer;
+  transition: background-color var(--el-dur-2) var(--el-ease);
+}
+
+/* Hover lift over inset surfaces — flips with the theme so apps don't need
+   their own literal rgba(255,255,255,x) hovers. */
+:root {
+  --el-lift: rgba(255, 255, 255, 0.1);
+  --el-lift-strong: rgba(255, 255, 255, 0.16);
+}
+
+:root[data-el-theme="light"] {
+  --el-lift: rgba(29, 36, 56, 0.08);
+  --el-lift-strong: rgba(29, 36, 56, 0.14);
+}
+
+.el-button:hover {
+  background: var(--el-lift);
+}
+
+.el-button:active {
+  transform: scale(0.96);
+}
+
+.el-button:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
+.el-button-primary {
+  border-color: transparent;
+  background: var(--el-brand);
+  color: #161616;
+  font-weight: 600;
+}
+
+.el-button-primary:hover {
+  background: var(--el-brand-strong);
+}
+
+.el-input {
+  min-height: 32px;
+  padding: 0 10px;
+  border: 1px solid var(--el-hairline);
+  border-radius: var(--el-radius-md);
+  background: var(--el-inset);
+  color: var(--el-text);
+  font: 400 var(--el-text-md) / 1.2 var(--el-font);
+}
+
+.el-input::placeholder {
+  color: var(--el-soft);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .el-app *,
+  .el-app *::before,
+  .el-app *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
diff --git a/capsules/wallet-unisat/browser/index.html b/capsules/wallet-unisat/browser/index.html
index 60fc0ccae..9eaba9895 100644
--- a/capsules/wallet-unisat/browser/index.html
+++ b/capsules/wallet-unisat/browser/index.html
@@ -4,7 +4,9 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>UniSat · ElastOS</title>
-<link rel="stylesheet" href="./style.css?v=wallet-unisat-20260520c">
+<script src="./elastos-theme.js"></script>
+<link rel="stylesheet" href="./elastos-ui.css">
+<link rel="stylesheet" href="./style.css?v=wallet-unisat-20260718a">
 </head>
 <body>
   <main class="wallet-shell" aria-label="UniSat approval method">
@@ -39,6 +41,6 @@ <h2>Approval requests</h2>
       <div id="wallet-requests" class="wallet-requests" aria-live="polite"></div>
     </section>
   </main>
-  <script type="module" src="./wallet-unisat.js?v=wallet-unisat-20260520c"></script>
+  <script type="module" src="./wallet-unisat.js?v=wallet-unisat-20260718a"></script>
 </body>
 </html>
diff --git a/capsules/wallet-unisat/browser/style.css b/capsules/wallet-unisat/browser/style.css
index de517d728..0fcd2c457 100644
--- a/capsules/wallet-unisat/browser/style.css
+++ b/capsules/wallet-unisat/browser/style.css
@@ -1,19 +1,19 @@
+/* Rides the shared tokens (dark default, light via data-el-theme). */
 :root {
-  color-scheme: light;
-  --bg: #edf1fb;
-  --panel: rgba(255, 255, 255, 0.9);
-  --line: rgba(83, 103, 164, 0.14);
-  --line-strong: rgba(83, 103, 164, 0.22);
-  --ink: #1d2438;
-  --muted: #66708a;
-  --brand: #f6921a;
-  --brand-soft: #fff1dc;
-  --accent: #5f76d8;
-  --accent-soft: #e8edff;
-  --accent-deep: #3c53a7;
-  --danger: #b14c5a;
-  --shadow: 0 24px 60px rgba(34, 49, 88, 0.12);
-  font-family: "IBM Plex Sans", "Avenir Next", "Segoe UI", sans-serif;
+  --bg: var(--el-bg);
+  --panel: var(--el-surface);
+  --line: var(--el-hairline);
+  --line-strong: var(--el-hairline-strong);
+  --ink: var(--el-text);
+  --muted: var(--el-muted);
+  --brand: var(--el-brand);
+  --brand-soft: color-mix(in srgb, var(--el-brand) 16%, transparent);
+  --accent: var(--el-accent);
+  --accent-soft: var(--el-accent-soft);
+  --accent-deep: var(--el-accent-strong);
+  --danger: var(--el-danger);
+  --shadow: var(--el-shadow-2);
+  font-family: var(--el-font);
 }
 
 * {
@@ -33,9 +33,8 @@ body {
 body {
   padding: clamp(0.45rem, 1.35vw, 0.85rem);
   background:
-    radial-gradient(circle at top left, rgba(95, 118, 216, 0.14), transparent 28%),
-    radial-gradient(circle at bottom right, rgba(126, 149, 226, 0.12), transparent 24%),
-    linear-gradient(180deg, #f7f9ff 0%, var(--bg) 100%);
+    radial-gradient(circle at top left, var(--el-accent-faint), transparent 28%),
+    var(--bg);
   color: var(--ink);
 }
 
@@ -116,7 +115,7 @@ h2 {
   padding: 0.34rem 0.55rem;
   border: 1px solid var(--line);
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.58);
+  background: var(--el-inset);
   font-size: 0.78rem;
   font-weight: 800;
 }
@@ -129,11 +128,11 @@ h2 {
   min-height: 2.35rem;
   padding: 0.58rem 0.9rem;
   border-radius: 999px;
-  background: linear-gradient(135deg, var(--brand), #ffb24c);
-  color: #1d2438;
+  background: linear-gradient(135deg, var(--brand), var(--el-brand-strong));
+  color: #161616;
   font-weight: 900;
   cursor: pointer;
-  box-shadow: 0 12px 26px rgba(246, 146, 26, 0.25);
+  box-shadow: var(--el-shadow-1);
 }
 
 .wallet-button-secondary {
@@ -152,17 +151,17 @@ h2 {
   padding: 0.6rem 0.72rem;
   border: 1px solid var(--line);
   border-radius: 0.85rem;
-  background: rgba(255, 255, 255, 0.6);
+  background: var(--el-inset);
   color: var(--muted);
 }
 
 .wallet-status[data-tone="success"] {
-  color: #2d6b48;
+  color: var(--el-ok);
 }
 
 .wallet-status[data-tone="error"] {
-  border-color: rgba(177, 76, 90, 0.24);
-  background: rgba(177, 76, 90, 0.1);
+  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
+  background: color-mix(in srgb, var(--danger) 10%, transparent);
   color: var(--danger);
 }
 
@@ -178,7 +177,7 @@ h2 {
   padding: 0.72rem;
   border: 1px solid var(--line);
   border-radius: 0.95rem;
-  background: rgba(255, 255, 255, 0.62);
+  background: var(--el-inset);
 }
 
 .wallet-empty {
@@ -217,7 +216,7 @@ h2 {
   display: block;
   max-width: 100%;
   color: var(--accent-deep);
-  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
+  font-family: var(--el-font-mono);
   font-size: 0.82rem;
   line-height: 1.35;
   overflow-wrap: anywhere;
diff --git a/capsules/wallet-unisat/browser/wallet-unisat.js b/capsules/wallet-unisat/browser/wallet-unisat.js
index bc5e0c3e0..9ec596403 100644
--- a/capsules/wallet-unisat/browser/wallet-unisat.js
+++ b/capsules/wallet-unisat/browser/wallet-unisat.js
@@ -7,10 +7,12 @@ const stateNode = document.querySelector("#wallet-state");
 const accountsNode = document.querySelector("#wallet-accounts");
 const requestsNode = document.querySelector("#wallet-requests");
 const frameHomeToken = readQueryParam("home_token");
+const ceremonyMode = readQueryParam("presentation") === "sheet";
 
 boot();
 
 function boot() {
+  applyCeremonyMode();
   if (connectButton) {
     connectButton.addEventListener("click", onConnect);
   }
@@ -24,15 +26,55 @@ function boot() {
     requestsNode.addEventListener("click", onRequestClick);
   }
   setState("0 linked");
-  refreshWalletState().catch((error) => {
-    showStatus(String(error.message || error), "error");
+  if (!ceremonyMode) {
+    refreshWalletState().catch((error) => {
+      showStatus(String(error.message || error), "error");
+    });
+  } else {
+    queueCeremonyAutostart();
+  }
+}
+
+function applyCeremonyMode() {
+  if (!ceremonyMode) {
+    return;
+  }
+  document.body.dataset.presentation = "sheet";
+  const eyebrow = document.querySelector(".eyebrow");
+  if (eyebrow) {
+    eyebrow.textContent = "Continue with UniSat";
+  }
+  if (connectButton) {
+    connectButton.textContent = "Continue in UniSat";
+  }
+  document.querySelectorAll(".wallet-panel").forEach((panel, index) => {
+    if (index > 0) {
+      panel.hidden = true;
+    }
   });
 }
 
+function queueCeremonyAutostart() {
+  if (!connectButton) {
+    return;
+  }
+  showStatus("Opening UniSat…", "muted");
+  window.requestAnimationFrame(() => {
+    onConnect().catch(() => {});
+  });
+}
+
+function markCeremonyRetry() {
+  if (ceremonyMode && connectButton) {
+    connectButton.textContent = "Try again";
+  }
+}
+
 async function onConnect() {
   const provider = unisatProvider();
   if (!provider) {
     handleMissingProvider();
+    markCeremonyRetry();
     return;
   }
   setButtonBusy(connectButton, true);
@@ -57,11 +99,12 @@ async function onConnect() {
         public_key: proof.publicKey,
       }),
     });
-    showStatus("Approval method added.", "success");
+    showStatus(ceremonyMode ? "Connected. Returning to Wallet…" : "Approval method added.", "success");
     notifyHomeSummaryChanged();
     await refreshWalletState();
   } catch (error) {
     showStatus(String(error.message || error), "error");
+    markCeremonyRetry();
   } finally {
     setButtonBusy(connectButton, false);
   }
diff --git a/capsules/wallet-walletconnect/browser/assets/fonts/Inter-latin-var.woff2 b/capsules/wallet-walletconnect/browser/assets/fonts/Inter-latin-var.woff2
new file mode 100644
index 000000000..91dc3e852
Binary files /dev/null and b/capsules/wallet-walletconnect/browser/assets/fonts/Inter-latin-var.woff2 differ
diff --git a/capsules/wallet-walletconnect/browser/elastos-theme.js b/capsules/wallet-walletconnect/browser/elastos-theme.js
new file mode 100644
index 000000000..bad19b950
--- /dev/null
+++ b/capsules/wallet-walletconnect/browser/elastos-theme.js
@@ -0,0 +1,122 @@
+/* GENERATED from capsules/_shared/elastos-theme.js — do not edit. Run `just vendor-ui`. */
+/* ElastOS UI — shared theme runtime (single source of truth).
+ *
+ * Vendored into each participating capsule's browser/ dir by `just vendor-ui`,
+ * next to elastos-ui.css. Everything is served same-origin from the gateway,
+ * so localStorage is the one canonical store (mirrors PC2's approach):
+ *
+ *   localStorage["elastos.ui.theme"]  = "dark" | "light" | "auto"
+ *   localStorage["elastos.ui.accent"] = "blue" | "purple" | "pink" | "red" |
+ *                                       "orange" | "yellow" | "green" | "graphite"
+ *
+ * Dark is the default theme when unset; blue is the default accent. "auto"
+ * follows prefers-color-scheme. The resolved theme is applied as
+ * data-el-theme="light" on <html> (absence means dark); the accent as
+ * data-el-accent (absence means blue) — both activate token blocks in
+ * elastos-ui.css. Cross-document sync is the browser's own `storage` event —
+ * no shell messaging required, and sandboxed app frames (allow-same-origin)
+ * see it.
+ */
+(function () {
+  const KEY = "elastos.ui.theme";
+  const ACCENT_KEY = "elastos.ui.accent";
+  const ACCENTS = [
+    "blue",
+    "purple",
+    "pink",
+    "red",
+    "orange",
+    "yellow",
+    "green",
+    "graphite",
+  ];
+  const media = window.matchMedia
+    ? window.matchMedia("(prefers-color-scheme: light)")
+    : null;
+
+  function preference() {
+    try {
+      const value = localStorage.getItem(KEY);
+      if (value === "light" || value === "dark" || value === "auto") {
+        return value;
+      }
+    } catch (_error) {
+      // Storage may be unavailable; fall through to the default.
+    }
+    return "dark";
+  }
+
+  function resolve(pref) {
+    if (pref === "auto") {
+      return media && media.matches ? "light" : "dark";
+    }
+    return pref;
+  }
+
+  function accentPreference() {
+    try {
+      const value = localStorage.getItem(ACCENT_KEY);
+      if (ACCENTS.includes(value)) {
+        return value;
+      }
+    } catch (_error) {
+      // Storage may be unavailable; fall through to the default.
+    }
+    return "blue";
+  }
+
+  function apply() {
+    if (resolve(preference()) === "light") {
+      document.documentElement.setAttribute("data-el-theme", "light");
+    } else {
+      document.documentElement.removeAttribute("data-el-theme");
+    }
+    const accent = accentPreference();
+    if (accent === "blue") {
+      document.documentElement.removeAttribute("data-el-accent");
+    } else {
+      document.documentElement.setAttribute("data-el-accent", accent);
+    }
+  }
+
+  apply();
+
+  window.addEventListener("storage", (event) => {
+    if (event.key === KEY || event.key === ACCENT_KEY || event.key === null) {
+      apply();
+    }
+  });
+
+  if (media && typeof media.addEventListener === "function") {
+    media.addEventListener("change", () => {
+      if (preference() === "auto") {
+        apply();
+      }
+    });
+  }
+
+  window.elastosTheme = {
+    preference,
+    resolved: () => resolve(preference()),
+    set(value) {
+      const pref = value === "light" || value === "auto" ? value : "dark";
+      try {
+        localStorage.setItem(KEY, pref);
+      } catch (_error) {
+        // Applying still works for this document.
+      }
+      apply();
+    },
+    accents: ACCENTS.slice(),
+    accent: accentPreference,
+    setAccent(value) {
+      const accent = ACCENTS.includes(value) ? value : "blue";
+      try {
+        localStorage.setItem(ACCENT_KEY, accent);
+      } catch (_error) {
+        // Applying still works for this document.
+      }
+      apply();
+    },
+  };
+})();
diff --git a/capsules/wallet-walletconnect/browser/elastos-ui.css b/capsules/wallet-walletconnect/browser/elastos-ui.css
new file mode 100644
index 000000000..7529596ef
--- /dev/null
+++ b/capsules/wallet-walletconnect/browser/elastos-ui.css
@@ -0,0 +1,248 @@
+/* GENERATED from capsules/_shared/elastos-ui.css — do not edit. Run `just vendor-ui`. */
+/* ElastOS UI — shared design tokens (single source of truth).
+ *
+ * This file lives at capsules/_shared/elastos-ui.css and is VENDORED into each
+ * participating capsule's browser/ dir by `just vendor-ui` (no gateway route,
+ * no shared runtime surface — capsules stay self-contained). Edit THIS file,
+ * then run `just vendor-ui`; `just alignment-check` fails on drift.
+ *
+ * Contents: Inter (OFL, latin variable subset), palette, type scale, radii,
+ * hairlines, blur/elevation steps, motion tokens, and minimal control
+ * primitives. Layout is each app's business — tokens only.
+ */
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: optional;
+  src: url("./assets/fonts/Inter-latin-var.woff2") format("woff2");
+}
+
+:root {
+  color-scheme: dark;
+
+  /* Palette */
+  --el-bg: #0b0d10;
+  --el-surface: rgba(22, 24, 29, 0.92);
+  --el-surface-raised: #16181d;
+  --el-inset: rgba(255, 255, 255, 0.06);
+  --el-text: #f5f7fa;
+  --el-muted: rgba(245, 247, 250, 0.7);
+  --el-soft: rgba(245, 247, 250, 0.48);
+  --el-brand: #f6921a;
+  --el-brand-strong: #ffb457;
+  --el-focus: rgba(246, 146, 26, 0.55);
+  --el-danger: #ff8f8f;
+  --el-ok: #34d399;
+
+  /* Hairlines (one pair, everywhere) */
+  --el-hairline: rgba(255, 255, 255, 0.12);
+  --el-hairline-strong: rgba(255, 255, 255, 0.18);
+
+  /* Type: 10/11/12/13/14/16/28; weights 400/500/600/700 */
+  --el-font: "Inter", -apple-system, "Segoe UI", "SF Pro Text", sans-serif;
+  --el-font-mono: ui-monospace, "SF Mono", Menlo, monospace;
+  --el-text-2xs: 10px;
+  --el-text-xs: 11px;
+  --el-text-sm: 12px;
+  --el-text-md: 13px;
+  --el-text-lg: 14px;
+  --el-text-xl: 16px;
+  --el-text-display: 28px;
+
+  /* Radii: 4/6/10/12/16/20 + pill */
+  --el-radius-xs: 4px;
+  --el-radius-sm: 6px;
+  --el-radius-md: 10px;
+  --el-radius-lg: 12px;
+  --el-radius-xl: 16px;
+  --el-radius-2xl: 20px;
+  --el-radius-pill: 999px;
+
+  /* Blur: three steps only */
+  --el-blur-1: 8px;
+  --el-blur-2: 16px;
+  --el-blur-3: 24px;
+
+  /* Elevation: three levels */
+  --el-shadow-1: 0 2px 10px rgba(0, 0, 0, 0.22);
+  --el-shadow-2: 0 12px 28px rgba(0, 0, 0, 0.28);
+  --el-shadow-3: 0 24px 80px rgba(0, 0, 0, 0.35);
+
+  /* Motion: 80/140/180/220, exits 150; one ease */
+  --el-dur-1: 80ms;
+  --el-dur-2: 140ms;
+  --el-dur-3: 180ms;
+  --el-dur-4: 220ms;
+  --el-dur-exit: 150ms;
+  --el-ease: cubic-bezier(0.2, 0, 0, 1);
+
+  /* System accent — ONE accent, chosen by the user in System > Personalization
+     (macOS model), obeyed by every app. Selected via data-el-accent on <html>
+     (absence = blue). Apps consume the derived tones and never define their own
+     accent colors. */
+  --el-accent: #0a84ff;
+  --el-accent-ink: #ffffff;
+  --el-accent-strong: color-mix(in srgb, var(--el-accent) 78%, #ffffff);
+  --el-accent-soft: color-mix(in srgb, var(--el-accent) 22%, transparent);
+  --el-accent-faint: color-mix(in srgb, var(--el-accent) 11%, transparent);
+}
+
+/* The eight macOS accents. Yellow and orange carry dark ink on filled controls. */
+:root[data-el-accent="purple"] {
+  --el-accent: #bf5af2;
+}
+
+:root[data-el-accent="pink"] {
+  --el-accent: #ff375f;
+}
+
+:root[data-el-accent="red"] {
+  --el-accent: #ff453a;
+}
+
+:root[data-el-accent="orange"] {
+  --el-accent: #f6921a;
+  --el-accent-ink: #161616;
+}
+
+:root[data-el-accent="yellow"] {
+  --el-accent: #ffd60a;
+  --el-accent-ink: #161616;
+}
+
+:root[data-el-accent="green"] {
+  --el-accent: #30b84f;
+}
+
+:root[data-el-accent="graphite"] {
+  --el-accent: #8e8e93;
+}
+
+/* Light theme: dark is the default (no attribute); the shell sets
+   data-el-theme="light" on <html> and broadcasts changes to app frames.
+   Values restore the pre-token light look: white raised panels over a cool
+   pale stage, navy ink, the same brand orange. */
+:root[data-el-theme="light"] {
+  color-scheme: light;
+
+  --el-bg: #eef1f6;
+  --el-surface: rgba(255, 255, 255, 0.88);
+  --el-surface-raised: #ffffff;
+  --el-inset: rgba(29, 36, 56, 0.055);
+  --el-text: #1d2438;
+  --el-muted: rgba(29, 36, 56, 0.72);
+  --el-soft: rgba(29, 36, 56, 0.5);
+  --el-brand: #f6921a;
+  --el-brand-strong: #e07f0a;
+  --el-focus: rgba(246, 146, 26, 0.55);
+  --el-danger: #b14c5a;
+  --el-ok: #0a7a52;
+
+  --el-hairline: rgba(29, 36, 56, 0.14);
+  --el-hairline-strong: rgba(29, 36, 56, 0.24);
+
+  --el-shadow-1: 0 2px 10px rgba(34, 49, 88, 0.1);
+  --el-shadow-2: 0 12px 28px rgba(34, 49, 88, 0.12);
+  --el-shadow-3: 0 24px 80px rgba(34, 49, 88, 0.16);
+
+  /* "Strong" means higher contrast against the CURRENT background: lighter on
+     dark, deeper on light. */
+  --el-accent-strong: color-mix(in srgb, var(--el-accent) 72%, #1d2438);
+}
+
+/* App base: opt in by putting .el-app on <body>. Dark shell surface, shared
+   type. Layout untouched. */
+.el-app {
+  margin: 0;
+  background: var(--el-bg);
+  color: var(--el-text);
+  font-family: var(--el-font);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+.el-app :focus-visible {
+  outline: 2px solid var(--el-focus);
+  outline-offset: 2px;
+}
+
+/* Minimal control primitives — enough that a capsule needs no bespoke button
+   or input styling to look native. */
+.el-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 32px;
+  padding: 0 14px;
+  border: 1px solid var(--el-hairline);
+  border-radius: var(--el-radius-md);
+  background: var(--el-inset);
+  color: var(--el-text);
+  font: 500 var(--el-text-md) / 1.2 var(--el-font);
+  cursor: pointer;
+  transition: background-color var(--el-dur-2) var(--el-ease);
+}
+
+/* Hover lift over inset surfaces — flips with the theme so apps don't need
+   their own literal rgba(255,255,255,x) hovers. */
+:root {
+  --el-lift: rgba(255, 255, 255, 0.1);
+  --el-lift-strong: rgba(255, 255, 255, 0.16);
+}
+
+:root[data-el-theme="light"] {
+  --el-lift: rgba(29, 36, 56, 0.08);
+  --el-lift-strong: rgba(29, 36, 56, 0.14);
+}
+
+.el-button:hover {
+  background: var(--el-lift);
+}
+
+.el-button:active {
+  transform: scale(0.96);
+}
+
+.el-button:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
+.el-button-primary {
+  border-color: transparent;
+  background: var(--el-brand);
+  color: #161616;
+  font-weight: 600;
+}
+
+.el-button-primary:hover {
+  background: var(--el-brand-strong);
+}
+
+.el-input {
+  min-height: 32px;
+  padding: 0 10px;
+  border: 1px solid var(--el-hairline);
+  border-radius: var(--el-radius-md);
+  background: var(--el-inset);
+  color: var(--el-text);
+  font: 400 var(--el-text-md) / 1.2 var(--el-font);
+}
+
+.el-input::placeholder {
+  color: var(--el-soft);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .el-app *,
+  .el-app *::before,
+  .el-app *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
diff --git a/capsules/wallet-walletconnect/browser/index.html b/capsules/wallet-walletconnect/browser/index.html
index b652513c0..66ef08c7f 100644
--- a/capsules/wallet-walletconnect/browser/index.html
+++ b/capsules/wallet-walletconnect/browser/index.html
@@ -4,7 +4,9 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Wallet · ElastOS</title>
-<link rel="stylesheet" href="./style.css?v=wallet-walletconnect-20260508b">
+<script src="./elastos-theme.js"></script>
+<link rel="stylesheet" href="./elastos-ui.css">
+<link rel="stylesheet" href="./style.css?v=wallet-walletconnect-20260718a">
 </head>
 <body>
   <main class="wallet-shell" aria-label="WalletConnect approval method">
@@ -35,6 +37,6 @@ <h2>Approval requests</h2>
       <div id="wallet-requests" class="wallet-requests" aria-live="polite"></div>
     </section>
   </main>
-  <script type="module" src="./wallet-walletconnect.js?v=wallet-walletconnect-20260508b"></script>
+  <script type="module" src="./wallet-walletconnect.js?v=wallet-walletconnect-20260718a"></script>
 </body>
 </html>
diff --git a/capsules/wallet-walletconnect/browser/style.css b/capsules/wallet-walletconnect/browser/style.css
index b250a9558..7e190fc9a 100644
--- a/capsules/wallet-walletconnect/browser/style.css
+++ b/capsules/wallet-walletconnect/browser/style.css
@@ -1,19 +1,19 @@
+/* Rides the shared tokens (dark default, light via data-el-theme). */
 :root {
-  color-scheme: light;
-  --bg: #edf1fb;
-  --panel: rgba(255, 255, 255, 0.9);
-  --line: rgba(83, 103, 164, 0.14);
-  --line-strong: rgba(83, 103, 164, 0.22);
-  --ink: #1d2438;
-  --muted: #66708a;
-  --brand: #f6921a;
-  --brand-soft: #fff1dc;
-  --accent: #5f76d8;
-  --accent-soft: #e8edff;
-  --accent-deep: #3c53a7;
-  --danger: #b14c5a;
-  --shadow: 0 24px 60px rgba(34, 49, 88, 0.12);
-  font-family: "IBM Plex Sans", "Avenir Next", "Segoe UI", sans-serif;
+  --bg: var(--el-bg);
+  --panel: var(--el-surface);
+  --line: var(--el-hairline);
+  --line-strong: var(--el-hairline-strong);
+  --ink: var(--el-text);
+  --muted: var(--el-muted);
+  --brand: var(--el-brand);
+  --brand-soft: color-mix(in srgb, var(--el-brand) 16%, transparent);
+  --accent: var(--el-accent);
+  --accent-soft: var(--el-accent-soft);
+  --accent-deep: var(--el-accent-strong);
+  --danger: var(--el-danger);
+  --shadow: var(--el-shadow-2);
+  font-family: var(--el-font);
 }
 
 * {
@@ -33,9 +33,8 @@ body {
 body {
   padding: clamp(0.45rem, 1.35vw, 0.85rem);
   background:
-    radial-gradient(circle at top left, rgba(95, 118, 216, 0.14), transparent 28%),
-    radial-gradient(circle at bottom right, rgba(126, 149, 226, 0.12), transparent 24%),
-    linear-gradient(180deg, #f7f9ff 0%, var(--bg) 100%);
+    radial-gradient(circle at top left, var(--el-accent-faint), transparent 28%),
+    var(--bg);
   color: var(--ink);
 }
 
@@ -116,7 +115,7 @@ h2 {
   padding: 0.34rem 0.55rem;
   border: 1px solid var(--line);
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.58);
+  background: var(--el-inset);
   font-size: 0.78rem;
   font-weight: 800;
 }
@@ -129,11 +128,11 @@ h2 {
   min-height: 2.35rem;
   padding: 0.58rem 0.9rem;
   border-radius: 999px;
-  background: linear-gradient(135deg, var(--brand), #ffb24c);
-  color: #1d2438;
+  background: linear-gradient(135deg, var(--brand), var(--el-brand-strong));
+  color: #161616;
   font-weight: 900;
   cursor: pointer;
-  box-shadow: 0 12px 26px rgba(246, 146, 26, 0.25);
+  box-shadow: var(--el-shadow-1);
 }
 
 .wallet-button-secondary {
@@ -152,17 +151,17 @@ h2 {
   padding: 0.6rem 0.72rem;
   border: 1px solid var(--line);
   border-radius: 0.85rem;
-  background: rgba(255, 255, 255, 0.6);
+  background: var(--el-inset);
   color: var(--muted);
 }
 
 .wallet-status[data-tone="success"] {
-  color: #2d6b48;
+  color: var(--el-ok);
 }
 
 .wallet-status[data-tone="error"] {
-  border-color: rgba(177, 76, 90, 0.24);
-  background: rgba(177, 76, 90, 0.1);
+  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
+  background: color-mix(in srgb, var(--danger) 10%, transparent);
   color: var(--danger);
 }
 
@@ -178,7 +177,7 @@ h2 {
   padding: 0.72rem;
   border: 1px solid var(--line);
   border-radius: 0.95rem;
-  background: rgba(255, 255, 255, 0.62);
+  background: var(--el-inset);
 }
 
 .wallet-empty {
@@ -217,7 +216,7 @@ h2 {
   display: block;
   max-width: 100%;
   color: var(--accent-deep);
-  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
+  font-family: var(--el-font-mono);
   font-size: 0.82rem;
   line-height: 1.35;
   overflow-wrap: anywhere;
diff --git a/capsules/wallet-walletconnect/browser/wallet-walletconnect.js b/capsules/wallet-walletconnect/browser/wallet-walletconnect.js
index 880abcf8b..67d9b96d0 100644
--- a/capsules/wallet-walletconnect/browser/wallet-walletconnect.js
+++ b/capsules/wallet-walletconnect/browser/wallet-walletconnect.js
@@ -5,12 +5,14 @@ const stateNode = document.querySelector("#wallet-state");
 const accountsNode = document.querySelector("#wallet-accounts");
 const requestsNode = document.querySelector("#wallet-requests");
 const frameHomeToken = readQueryParam("home_token");
+const ceremonyMode = readQueryParam("presentation") === "sheet";
 
 let walletProvider = null;
 
 boot();
 
 function boot() {
+  applyCeremonyMode();
   if (connectButton) {
     connectButton.addEventListener("click", onConnect);
   }
@@ -21,7 +23,46 @@ function boot() {
     requestsNode.addEventListener("click", onRequestClick);
   }
   setState("0 linked");
-  refreshWalletState().catch((error) => showStatus(String(error.message || error), "error"));
+  if (!ceremonyMode) {
+    refreshWalletState().catch((error) => showStatus(String(error.message || error), "error"));
+  } else {
+    queueCeremonyAutostart();
+  }
+}
+
+function applyCeremonyMode() {
+  if (!ceremonyMode) {
+    return;
+  }
+  document.body.dataset.presentation = "sheet";
+  const eyebrow = document.querySelector(".eyebrow");
+  if (eyebrow) {
+    eyebrow.textContent = "Continue with WalletConnect";
+  }
+  if (connectButton) {
+    connectButton.textContent = "Continue with WalletConnect";
+  }
+  document.querySelectorAll(".wallet-panel").forEach((panel, index) => {
+    if (index > 0) {
+      panel.hidden = true;
+    }
+  });
+}
+
+function queueCeremonyAutostart() {
+  if (!connectButton) {
+    return;
+  }
+  showStatus("Opening wallet…", "muted");
+  window.requestAnimationFrame(() => {
+    onConnect().catch(() => {});
+  });
+}
+
+function markCeremonyRetry() {
+  if (ceremonyMode && connectButton) {
+    connectButton.textContent = "Try again";
+  }
 }
 
 async function onConnect() {
@@ -45,11 +86,12 @@ async function onConnect() {
       headers: shellHeaders({ "content-type": "application/json" }),
       body: JSON.stringify({ message: challenge.message, signature }),
     });
-    showStatus("Approval method added.", "success");
+    showStatus(ceremonyMode ? "Connected. Returning to Wallet…" : "Approval method added.", "success");
     notifyHomeSummaryChanged();
     await refreshWalletState();
   } catch (error) {
     showStatus(String(error.message || error), "error");
+    markCeremonyRetry();
   } finally {
     setButtonBusy(connectButton, false);
   }
diff --git a/capsules/wallet/browser/assets/fonts/Inter-latin-var.woff2 b/capsules/wallet/browser/assets/fonts/Inter-latin-var.woff2
new file mode 100644
index 000000000..91dc3e852
Binary files /dev/null and b/capsules/wallet/browser/assets/fonts/Inter-latin-var.woff2 differ
diff --git a/capsules/wallet/browser/elastos-theme.js b/capsules/wallet/browser/elastos-theme.js
new file mode 100644
index 000000000..bad19b950
--- /dev/null
+++ b/capsules/wallet/browser/elastos-theme.js
@@ -0,0 +1,122 @@
+/* GENERATED from capsules/_shared/elastos-theme.js — do not edit. Run `just vendor-ui`. */
+/* ElastOS UI — shared theme runtime (single source of truth).
+ *
+ * Vendored into each participating capsule's browser/ dir by `just vendor-ui`,
+ * next to elastos-ui.css. Everything is served same-origin from the gateway,
+ * so localStorage is the one canonical store (mirrors PC2's approach):
+ *
+ *   localStorage["elastos.ui.theme"]  = "dark" | "light" | "auto"
+ *   localStorage["elastos.ui.accent"] = "blue" | "purple" | "pink" | "red" |
+ *                                       "orange" | "yellow" | "green" | "graphite"
+ *
+ * Dark is the default theme when unset; blue is the default accent. "auto"
+ * follows prefers-color-scheme. The resolved theme is applied as
+ * data-el-theme="light" on <html> (absence means dark); the accent as
+ * data-el-accent (absence means blue) — both activate token blocks in
+ * elastos-ui.css. Cross-document sync is the browser's own `storage` event —
+ * no shell messaging required, and sandboxed app frames (allow-same-origin)
+ * see it.
+ */
+(function () {
+  const KEY = "elastos.ui.theme";
+  const ACCENT_KEY = "elastos.ui.accent";
+  const ACCENTS = [
+    "blue",
+    "purple",
+    "pink",
+    "red",
+    "orange",
+    "yellow",
+    "green",
+    "graphite",
+  ];
+  const media = window.matchMedia
+    ? window.matchMedia("(prefers-color-scheme: light)")
+    : null;
+
+  function preference() {
+    try {
+      const value = localStorage.getItem(KEY);
+      if (value === "light" || value === "dark" || value === "auto") {
+        return value;
+      }
+    } catch (_error) {
+      // Storage may be unavailable; fall through to the default.
+    }
+    return "dark";
+  }
+
+  function resolve(pref) {
+    if (pref === "auto") {
+      return media && media.matches ? "light" : "dark";
+    }
+    return pref;
+  }
+
+  function accentPreference() {
+    try {
+      const value = localStorage.getItem(ACCENT_KEY);
+      if (ACCENTS.includes(value)) {
+        return value;
+      }
+    } catch (_error) {
+      // Storage may be unavailable; fall through to the default.
+    }
+    return "blue";
+  }
+
+  function apply() {
+    if (resolve(preference()) === "light") {
+      document.documentElement.setAttribute("data-el-theme", "light");
+    } else {
+      document.documentElement.removeAttribute("data-el-theme");
+    }
+    const accent = accentPreference();
+    if (accent === "blue") {
+      document.documentElement.removeAttribute("data-el-accent");
+    } else {
+      document.documentElement.setAttribute("data-el-accent", accent);
+    }
+  }
+
+  apply();
+
+  window.addEventListener("storage", (event) => {
+    if (event.key === KEY || event.key === ACCENT_KEY || event.key === null) {
+      apply();
+    }
+  });
+
+  if (media && typeof media.addEventListener === "function") {
+    media.addEventListener("change", () => {
+      if (preference() === "auto") {
+        apply();
+      }
+    });
+  }
+
+  window.elastosTheme = {
+    preference,
+    resolved: () => resolve(preference()),
+    set(value) {
+      const pref = value === "light" || value === "auto" ? value : "dark";
+      try {
+        localStorage.setItem(KEY, pref);
+      } catch (_error) {
+        // Applying still works for this document.
+      }
+      apply();
+    },
+    accents: ACCENTS.slice(),
+    accent: accentPreference,
+    setAccent(value) {
+      const accent = ACCENTS.includes(value) ? value : "blue";
+      try {
+        localStorage.setItem(ACCENT_KEY, accent);
+      } catch (_error) {
+        // Applying still works for this document.
+      }
+      apply();
+    },
+  };
+})();
diff --git a/capsules/wallet/browser/elastos-ui.css b/capsules/wallet/browser/elastos-ui.css
new file mode 100644
index 000000000..7529596ef
--- /dev/null
+++ b/capsules/wallet/browser/elastos-ui.css
@@ -0,0 +1,248 @@
+/* GENERATED from capsules/_shared/elastos-ui.css — do not edit. Run `just vendor-ui`. */
+/* ElastOS UI — shared design tokens (single source of truth).
+ *
+ * This file lives at capsules/_shared/elastos-ui.css and is VENDORED into each
+ * participating capsule's browser/ dir by `just vendor-ui` (no gateway route,
+ * no shared runtime surface — capsules stay self-contained). Edit THIS file,
+ * then run `just vendor-ui`; `just alignment-check` fails on drift.
+ *
+ * Contents: Inter (OFL, latin variable subset), palette, type scale, radii,
+ * hairlines, blur/elevation steps, motion tokens, and minimal control
+ * primitives. Layout is each app's business — tokens only.
+ */
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: optional;
+  src: url("./assets/fonts/Inter-latin-var.woff2") format("woff2");
+}
+
+:root {
+  color-scheme: dark;
+
+  /* Palette */
+  --el-bg: #0b0d10;
+  --el-surface: rgba(22, 24, 29, 0.92);
+  --el-surface-raised: #16181d;
+  --el-inset: rgba(255, 255, 255, 0.06);
+  --el-text: #f5f7fa;
+  --el-muted: rgba(245, 247, 250, 0.7);
+  --el-soft: rgba(245, 247, 250, 0.48);
+  --el-brand: #f6921a;
+  --el-brand-strong: #ffb457;
+  --el-focus: rgba(246, 146, 26, 0.55);
+  --el-danger: #ff8f8f;
+  --el-ok: #34d399;
+
+  /* Hairlines (one pair, everywhere) */
+  --el-hairline: rgba(255, 255, 255, 0.12);
+  --el-hairline-strong: rgba(255, 255, 255, 0.18);
+
+  /* Type: 10/11/12/13/14/16/28; weights 400/500/600/700 */
+  --el-font: "Inter", -apple-system, "Segoe UI", "SF Pro Text", sans-serif;
+  --el-font-mono: ui-monospace, "SF Mono", Menlo, monospace;
+  --el-text-2xs: 10px;
+  --el-text-xs: 11px;
+  --el-text-sm: 12px;
+  --el-text-md: 13px;
+  --el-text-lg: 14px;
+  --el-text-xl: 16px;
+  --el-text-display: 28px;
+
+  /* Radii: 4/6/10/12/16/20 + pill */
+  --el-radius-xs: 4px;
+  --el-radius-sm: 6px;
+  --el-radius-md: 10px;
+  --el-radius-lg: 12px;
+  --el-radius-xl: 16px;
+  --el-radius-2xl: 20px;
+  --el-radius-pill: 999px;
+
+  /* Blur: three steps only */
+  --el-blur-1: 8px;
+  --el-blur-2: 16px;
+  --el-blur-3: 24px;
+
+  /* Elevation: three levels */
+  --el-shadow-1: 0 2px 10px rgba(0, 0, 0, 0.22);
+  --el-shadow-2: 0 12px 28px rgba(0, 0, 0, 0.28);
+  --el-shadow-3: 0 24px 80px rgba(0, 0, 0, 0.35);
+
+  /* Motion: 80/140/180/220, exits 150; one ease */
+  --el-dur-1: 80ms;
+  --el-dur-2: 140ms;
+  --el-dur-3: 180ms;
+  --el-dur-4: 220ms;
+  --el-dur-exit: 150ms;
+  --el-ease: cubic-bezier(0.2, 0, 0, 1);
+
+  /* System accent — ONE accent, chosen by the user in System > Personalization
+     (macOS model), obeyed by every app. Selected via data-el-accent on <html>
+     (absence = blue). Apps consume the derived tones and never define their own
+     accent colors. */
+  --el-accent: #0a84ff;
+  --el-accent-ink: #ffffff;
+  --el-accent-strong: color-mix(in srgb, var(--el-accent) 78%, #ffffff);
+  --el-accent-soft: color-mix(in srgb, var(--el-accent) 22%, transparent);
+  --el-accent-faint: color-mix(in srgb, var(--el-accent) 11%, transparent);
+}
+
+/* The eight macOS accents. Yellow and orange carry dark ink on filled controls. */
+:root[data-el-accent="purple"] {
+  --el-accent: #bf5af2;
+}
+
+:root[data-el-accent="pink"] {
+  --el-accent: #ff375f;
+}
+
+:root[data-el-accent="red"] {
+  --el-accent: #ff453a;
+}
+
+:root[data-el-accent="orange"] {
+  --el-accent: #f6921a;
+  --el-accent-ink: #161616;
+}
+
+:root[data-el-accent="yellow"] {
+  --el-accent: #ffd60a;
+  --el-accent-ink: #161616;
+}
+
+:root[data-el-accent="green"] {
+  --el-accent: #30b84f;
+}
+
+:root[data-el-accent="graphite"] {
+  --el-accent: #8e8e93;
+}
+
+/* Light theme: dark is the default (no attribute); the shell sets
+   data-el-theme="light" on <html> and broadcasts changes to app frames.
+   Values restore the pre-token light look: white raised panels over a cool
+   pale stage, navy ink, the same brand orange. */
+:root[data-el-theme="light"] {
+  color-scheme: light;
+
+  --el-bg: #eef1f6;
+  --el-surface: rgba(255, 255, 255, 0.88);
+  --el-surface-raised: #ffffff;
+  --el-inset: rgba(29, 36, 56, 0.055);
+  --el-text: #1d2438;
+  --el-muted: rgba(29, 36, 56, 0.72);
+  --el-soft: rgba(29, 36, 56, 0.5);
+  --el-brand: #f6921a;
+  --el-brand-strong: #e07f0a;
+  --el-focus: rgba(246, 146, 26, 0.55);
+  --el-danger: #b14c5a;
+  --el-ok: #0a7a52;
+
+  --el-hairline: rgba(29, 36, 56, 0.14);
+  --el-hairline-strong: rgba(29, 36, 56, 0.24);
+
+  --el-shadow-1: 0 2px 10px rgba(34, 49, 88, 0.1);
+  --el-shadow-2: 0 12px 28px rgba(34, 49, 88, 0.12);
+  --el-shadow-3: 0 24px 80px rgba(34, 49, 88, 0.16);
+
+  /* "Strong" means higher contrast against the CURRENT background: lighter on
+     dark, deeper on light. */
+  --el-accent-strong: color-mix(in srgb, var(--el-accent) 72%, #1d2438);
+}
+
+/* App base: opt in by putting .el-app on <body>. Dark shell surface, shared
+   type. Layout untouched. */
+.el-app {
+  margin: 0;
+  background: var(--el-bg);
+  color: var(--el-text);
+  font-family: var(--el-font);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+.el-app :focus-visible {
+  outline: 2px solid var(--el-focus);
+  outline-offset: 2px;
+}
+
+/* Minimal control primitives — enough that a capsule needs no bespoke button
+   or input styling to look native. */
+.el-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 32px;
+  padding: 0 14px;
+  border: 1px solid var(--el-hairline);
+  border-radius: var(--el-radius-md);
+  background: var(--el-inset);
+  color: var(--el-text);
+  font: 500 var(--el-text-md) / 1.2 var(--el-font);
+  cursor: pointer;
+  transition: background-color var(--el-dur-2) var(--el-ease);
+}
+
+/* Hover lift over inset surfaces — flips with the theme so apps don't need
+   their own literal rgba(255,255,255,x) hovers. */
+:root {
+  --el-lift: rgba(255, 255, 255, 0.1);
+  --el-lift-strong: rgba(255, 255, 255, 0.16);
+}
+
+:root[data-el-theme="light"] {
+  --el-lift: rgba(29, 36, 56, 0.08);
+  --el-lift-strong: rgba(29, 36, 56, 0.14);
+}
+
+.el-button:hover {
+  background: var(--el-lift);
+}
+
+.el-button:active {
+  transform: scale(0.96);
+}
+
+.el-button:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
+.el-button-primary {
+  border-color: transparent;
+  background: var(--el-brand);
+  color: #161616;
+  font-weight: 600;
+}
+
+.el-button-primary:hover {
+  background: var(--el-brand-strong);
+}
+
+.el-input {
+  min-height: 32px;
+  padding: 0 10px;
+  border: 1px solid var(--el-hairline);
+  border-radius: var(--el-radius-md);
+  background: var(--el-inset);
+  color: var(--el-text);
+  font: 400 var(--el-text-md) / 1.2 var(--el-font);
+}
+
+.el-input::placeholder {
+  color: var(--el-soft);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .el-app *,
+  .el-app *::before,
+  .el-app *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
diff --git a/capsules/wallet/browser/icons/bitcoin.png b/capsules/wallet/browser/icons/bitcoin.png
new file mode 100644
index 000000000..e0c392edb
Binary files /dev/null and b/capsules/wallet/browser/icons/bitcoin.png differ
diff --git a/capsules/wallet/browser/icons/ethereum.png b/capsules/wallet/browser/icons/ethereum.png
new file mode 100644
index 000000000..e2c29260a
Binary files /dev/null and b/capsules/wallet/browser/icons/ethereum.png differ
diff --git a/capsules/wallet/browser/icons/metamask.png b/capsules/wallet/browser/icons/metamask.png
new file mode 100644
index 000000000..1fb7f5612
Binary files /dev/null and b/capsules/wallet/browser/icons/metamask.png differ
diff --git a/capsules/wallet/browser/icons/passkey.png b/capsules/wallet/browser/icons/passkey.png
new file mode 100644
index 000000000..88bf07c87
Binary files /dev/null and b/capsules/wallet/browser/icons/passkey.png differ
diff --git a/capsules/wallet/browser/icons/unisat.png b/capsules/wallet/browser/icons/unisat.png
new file mode 100644
index 000000000..888ac9851
Binary files /dev/null and b/capsules/wallet/browser/icons/unisat.png differ
diff --git a/capsules/wallet/browser/index.html b/capsules/wallet/browser/index.html
index 00022f2fb..3569caa2f 100644
--- a/capsules/wallet/browser/index.html
+++ b/capsules/wallet/browser/index.html
@@ -4,58 +4,121 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Wallet · ElastOS</title>
-<link rel="stylesheet" href="./style.css?v=wallet-20260523a">
+<script src="./elastos-theme.js"></script>
+<link rel="stylesheet" href="./elastos-ui.css">
+<link rel="stylesheet" href="./style.css?v=wallet-20260719w">
 </head>
 <body>
   <main class="wallet-shell" aria-label="Wallet">
     <section class="wallet-page">
-      <section class="wallet-hero" aria-label="Wallet balance">
-        <p id="wallet-status" class="wallet-status" hidden></p>
+      <!-- Nav is hero chrome (entropy), but outside the bordered flip card so
+           Send/Receive height morph never moves Activity/Settings/Hide. -->
+      <section class="wallet-hero" aria-label="Wallet balance" data-face="front">
         <nav class="wallet-hero-actions" aria-label="Wallet actions">
-          <button id="wallet-activity-open" class="wallet-nav-button" type="button" aria-label="Open activity">↻ Activity</button>
-          <button id="wallet-privacy" class="wallet-icon-button" type="button" aria-label="Hide balances" aria-pressed="false">◌</button>
-          <button id="wallet-settings-open" class="wallet-nav-button" type="button" aria-label="Open settings">✦ Settings</button>
+          <p id="wallet-status" class="wallet-status" hidden role="status" aria-live="polite"></p>
+          <div class="wallet-hero-nav">
+            <!-- Same marks as Home rail head so window ↔ rail chrome stays one language. -->
+            <button id="wallet-activity-open" class="wallet-nav-button wallet-nav-button-text" type="button" aria-label="Activity">
+              <svg class="wallet-nav-icon-svg" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
+                <rect x="3.25" y="2.5" width="9.5" height="11" rx="1.5" />
+                <path d="M5.5 5.5h5M5.5 8h5M5.5 10.5h3" />
+              </svg>
+              <span>Activity</span>
+              <span id="wallet-approvals-badge" class="wallet-nav-badge" hidden></span>
+            </button>
+            <button id="wallet-settings-open" class="wallet-nav-button wallet-nav-button-text" type="button" aria-label="Open settings" title="Settings">
+              <svg class="wallet-nav-icon-svg" viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="12" cy="12" r="3" />
+                <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z" />
+              </svg>
+              <span>Settings</span>
+            </button>
+            <button id="wallet-privacy" class="wallet-nav-button wallet-nav-button-text" type="button" aria-label="Hide balances" aria-pressed="false" title="Hide balances">
+              <svg class="wallet-nav-icon-svg" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M1.75 8s2.5-3.75 6.25-3.75S14.25 8 14.25 8s-2.5 3.75-6.25 3.75S1.75 8 1.75 8Z" />
+                <circle cx="8" cy="8" r="1.75" />
+              </svg>
+              <span>Hide</span>
+            </button>
+          </div>
         </nav>
-        <div class="wallet-hero-row">
-          <div class="wallet-hero-balance">
-            <p class="eyebrow">Total balance</p>
-            <div id="wallet-total-balance" class="wallet-total-value" aria-live="polite">$—,———</div>
-            <div class="wallet-action-row">
-              <button id="wallet-send" class="wallet-button" type="button">↗ Send</button>
-              <button id="wallet-receive" class="wallet-button wallet-button-secondary" type="button">↙ Receive</button>
+        <div class="wallet-hero-scene">
+          <div class="wallet-hero-flip">
+            <div class="wallet-hero-face wallet-hero-face-front">
+              <div class="wallet-hero-row">
+                <div class="wallet-hero-balance">
+                  <div class="wallet-hero-balance-label-row">
+                    <p class="eyebrow">Total balance</p>
+                    <!-- Same row as the label, far right. -->
+                    <section id="wallet-account-detail" class="wallet-detail" aria-label="Selected account"></section>
+                  </div>
+                  <!-- Original value row: amount left, 24h delta right. -->
+                  <div class="wallet-hero-balance-top">
+                    <div id="wallet-total-balance" class="wallet-total-value" aria-live="polite">$—,———</div>
+                    <div id="wallet-delta" class="wallet-delta" hidden>
+                      <span id="wallet-delta-value">+0.00% · 24h</span>
+                    </div>
+                  </div>
+                  <div class="wallet-action-row">
+                    <button id="wallet-send" class="wallet-button" type="button">↗ Send</button>
+                    <button id="wallet-receive" class="wallet-button wallet-button-secondary" type="button">↙ Receive</button>
+                  </div>
+                  <!-- Pending approvals live under Send/Receive (history stays in Activity drawer). -->
+                  <div id="wallet-hero-pending" class="wallet-hero-pending" hidden aria-live="polite"></div>
+                  <div id="wallet-get-started" class="wallet-action-row wallet-get-started" hidden>
+                    <button class="wallet-button" type="button" data-wallet-create-account>Create account</button>
+                    <button id="wallet-connect-cta" class="wallet-button wallet-button-secondary" type="button">
+                      Connect a wallet
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <p id="wallet-balance-state" class="wallet-state">Loading balances</p>
             </div>
+            <div
+              id="wallet-hero-back"
+              class="wallet-hero-face wallet-hero-face-back"
+              hidden
+              aria-live="polite"
+            ></div>
           </div>
-          <div id="wallet-delta" class="wallet-delta" hidden>
-            <svg id="wallet-sparkline" class="wallet-sparkline" viewBox="0 0 56 20" aria-hidden="true">
-              <polyline points="0,15 8,13 16,14 24,9 32,10 40,6 48,8 56,4" />
-            </svg>
-            <span id="wallet-delta-value">+0.00% · 24h</span>
-          </div>
-          <section id="wallet-account-detail" class="wallet-detail" aria-label="Default account"></section>
         </div>
-        <p id="wallet-balance-state" class="wallet-state">Loading balances</p>
       </section>
 
-      <section class="wallet-section" aria-label="Accounts">
+      <section class="wallet-section wallet-accounts-section" aria-label="Accounts" data-face="front">
         <div class="wallet-section-heading">
           <div>
             <h1>Accounts</h1>
             <span id="wallet-account-state" class="wallet-state">0 accounts</span>
           </div>
           <div class="wallet-section-actions" aria-label="Account actions">
-            <button class="wallet-button wallet-button-secondary" type="button" data-wallet-create-account>+ Create account</button>
-            <button class="wallet-button wallet-button-secondary" type="button" data-wallet-import-recovery-key>Import Wallet key</button>
+            <button class="wallet-button wallet-button-secondary" type="button" data-wallet-create-account aria-label="Create account">+ Create</button>
+            <button class="wallet-button wallet-button-secondary" type="button" data-wallet-import-recovery-key aria-label="Import Wallet key">↓ Import</button>
+          </div>
+        </div>
+        <div class="wallet-accounts-scene">
+          <div class="wallet-accounts-flip">
+            <div class="wallet-accounts-face wallet-accounts-face-front">
+              <div id="wallet-accounts" class="wallet-account-grid" aria-live="polite"></div>
+            </div>
+            <div
+              id="wallet-accounts-back"
+              class="wallet-accounts-face wallet-accounts-face-back"
+              hidden
+              aria-live="polite"
+            ></div>
           </div>
         </div>
-        <div id="wallet-accounts" class="wallet-account-grid" aria-live="polite"></div>
       </section>
 
-      <section id="wallet-requests-panel" class="wallet-section wallet-requests-panel" hidden>
+      <section id="wallet-signers" class="wallet-section" aria-label="Wallets and signers">
         <div class="wallet-section-heading">
-          <h2>Requests</h2>
-          <span class="wallet-state">Approve only what you recognize.</span>
+          <div>
+            <h2>Wallets &amp; signers</h2>
+            <span class="wallet-state">Built-in accounts for Wallet Send, or link MetaMask / UniSat / WalletConnect to approve.</span>
+          </div>
         </div>
-        <div id="wallet-requests" class="wallet-request-list" aria-live="polite"></div>
+        <div id="wallet-methods" class="wallet-methods"></div>
       </section>
     </section>
 
@@ -63,42 +126,31 @@ <h2>Requests</h2>
 
     <aside id="wallet-settings-drawer" class="wallet-drawer wallet-settings-drawer" hidden aria-label="Settings">
       <header class="wallet-drawer-header">
+        <div>
+          <p class="eyebrow">Wallet</p>
+          <h2>Settings</h2>
+        </div>
         <button class="wallet-icon-button" type="button" data-wallet-close-drawer aria-label="Close settings">×</button>
       </header>
       <div class="wallet-settings">
         <div class="wallet-settings-main">
-          <section class="wallet-settings-card">
-            <h3>Accounts</h3>
-            <button id="wallet-create" class="wallet-button" type="button" data-wallet-create-account>Create account</button>
-            <button id="wallet-import-recovery-key" class="wallet-button wallet-button-secondary" type="button" data-wallet-import-recovery-key>Import Wallet recovery key</button>
-          </section>
           <section class="wallet-settings-card">
             <h3>Display currency</h3>
             <div id="wallet-currency-settings" class="wallet-segmented wallet-segmented-full" role="group" aria-label="Settings currency">
-              <button type="button" data-wallet-currency="btc">BTC</button>
               <button type="button" data-wallet-currency="usd">USD</button>
+              <button type="button" data-wallet-currency="btc">BTC</button>
               <button type="button" data-wallet-currency="ela">ELA</button>
             </div>
           </section>
-          <section class="wallet-settings-card">
-            <h3>Privacy mode</h3>
-            <button id="wallet-privacy-settings" class="wallet-button wallet-button-secondary" type="button">Hide balances</button>
-          </section>
         </div>
-        <aside class="wallet-settings-side" aria-label="Approval methods">
-          <section class="wallet-settings-card">
-            <h3>Approval methods</h3>
-            <div id="wallet-methods" class="wallet-methods"></div>
-          </section>
-        </aside>
       </div>
     </aside>
 
     <aside id="wallet-activity-drawer" class="wallet-drawer" hidden aria-label="Activity">
       <header class="wallet-drawer-header">
         <div>
-          <p class="eyebrow">Activity</p>
-          <h2>Recent requests</h2>
+          <p class="eyebrow">Wallet</p>
+          <h2>Recent activity</h2>
         </div>
         <button class="wallet-icon-button" type="button" data-wallet-close-drawer aria-label="Close activity">×</button>
       </header>
@@ -108,6 +160,6 @@ <h2>Recent requests</h2>
     <div id="wallet-modal-backdrop" class="wallet-modal-backdrop" hidden></div>
     <section id="wallet-modal" class="wallet-modal" hidden aria-live="polite"></section>
   </main>
-  <script type="module" src="./wallet.js?v=wallet-20260523a"></script>
+  <script type="module" src="./wallet.js?v=wallet-20260719w"></script>
 </body>
 </html>
diff --git a/capsules/wallet/browser/style.css b/capsules/wallet/browser/style.css
index 3888c2aa9..20148507d 100644
--- a/capsules/wallet/browser/style.css
+++ b/capsules/wallet/browser/style.css
@@ -1,4 +1,30 @@
 :root {
+  color-scheme: dark;
+  --bg: var(--el-bg, #0b0d10);
+  --surface: rgba(255, 255, 255, 0.04);
+  --surface-alt: rgba(255, 255, 255, 0.025);
+  --line: rgba(255, 255, 255, 0.08);
+  --line-strong: rgba(255, 255, 255, 0.16);
+  --ink: var(--el-text, #f5f7fa);
+  --ink-soft: var(--el-muted, rgba(245, 247, 250, 0.7));
+  --ink-mute: var(--el-soft, rgba(245, 247, 250, 0.48));
+  --chip: rgba(255, 255, 255, 0.05);
+  --chip-hover: rgba(255, 255, 255, 0.09);
+  --pos: oklch(0.74 0.13 150);
+  --neg: oklch(0.7 0.16 28);
+  --warn: oklch(0.78 0.13 78);
+  --accent: var(--el-accent);
+  --btc: oklch(0.72 0.14 70);
+  --eth: oklch(0.6 0.05 270);
+  --ela: oklch(0.62 0.13 200);
+  --usdc: oklch(0.62 0.13 230);
+  --metamask: oklch(0.65 0.13 50);
+  --wc: oklch(0.6 0.13 220);
+  --font: var(--el-font, ui-sans-serif, system-ui, sans-serif);
+  --mono: var(--el-font-mono, ui-monospace, "SF Mono", monospace);
+}
+
+:root[data-el-theme="light"] {
   color-scheme: light;
   --bg: #fafaf7;
   --surface: #ffffff;
@@ -13,58 +39,36 @@
   --pos: oklch(0.55 0.13 150);
   --neg: oklch(0.55 0.18 28);
   --warn: oklch(0.65 0.13 78);
-  --accent: oklch(0.55 0.13 250);
-  --btc: oklch(0.72 0.14 70);
-  --eth: oklch(0.6 0.05 270);
-  --ela: oklch(0.62 0.13 200);
-  --usdc: oklch(0.62 0.13 230);
-  --metamask: oklch(0.65 0.13 50);
-  --wc: oklch(0.6 0.13 220);
-  --font: "Geist", "Inter Tight", ui-sans-serif, system-ui, sans-serif;
-  --mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", monospace;
-}
-
-[data-theme="dark"] {
-  color-scheme: dark;
-  --bg: #0f1115;
-  --surface: rgba(255, 255, 255, 0.04);
-  --surface-alt: rgba(255, 255, 255, 0.025);
-  --line: rgba(255, 255, 255, 0.08);
-  --line-strong: rgba(255, 255, 255, 0.16);
-  --ink: #e9e7e1;
-  --ink-soft: rgba(233, 231, 225, 0.66);
-  --ink-mute: rgba(233, 231, 225, 0.4);
-  --chip: rgba(255, 255, 255, 0.05);
-  --chip-hover: rgba(255, 255, 255, 0.09);
-  --pos: oklch(0.74 0.13 150);
-  --neg: oklch(0.7 0.16 28);
-  --warn: oklch(0.78 0.13 78);
-  --accent: oklch(0.72 0.13 250);
 }
 
 * {
   box-sizing: border-box;
 }
 
+/* Rail/window viewport scroll stays wheel/trackpad-driven. A classic
+   scrollbar appearing on Send/Receive flip steals ~15px and shoves
+   Activity/Settings left — hide the gutter, keep overflow. */
+html {
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+
+html::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
 body {
   margin: 0;
   min-height: 100vh;
-  background:
-    radial-gradient(circle at 20% 0%, oklch(0.55 0.13 250 / 0.1), transparent 55%),
-    radial-gradient(circle at 90% 100%, oklch(0.7 0.13 290 / 0.08), transparent 55%),
-    var(--bg);
+  /* Solid surface only — the old bottom-right purple radial was bleeding
+     into the rail and reading as a violet band at the foot of the panel. */
+  background: var(--bg);
   color: var(--ink);
   font-family: var(--font);
   font-size: 13px;
 }
 
-[data-theme="dark"] body {
-  background:
-    radial-gradient(circle at 20% 0%, oklch(0.72 0.13 250 / 0.12), transparent 60%),
-    radial-gradient(circle at 90% 100%, oklch(0.5 0.13 290 / 0.18), transparent 55%),
-    var(--bg);
-}
-
 button,
 input,
 textarea {
@@ -79,7 +83,6 @@ button {
   min-height: 100vh;
 }
 
-.wallet-hero-actions,
 .wallet-hero-row,
 .wallet-action-row,
 .wallet-section-heading,
@@ -107,14 +110,13 @@ button {
 }
 
 .wallet-status {
-  position: absolute;
-  top: 16px;
-  left: 22px;
-  right: 280px;
+  min-width: 0;
   overflow: hidden;
   margin: 0;
   text-overflow: ellipsis;
   white-space: nowrap;
+  font-size: 12px;
+  font-weight: 500;
 }
 
 .wallet-status[data-tone="error"] {
@@ -125,14 +127,25 @@ button {
   color: var(--pos);
 }
 
+/* Static chrome above the flip card: status can come/go without shoving
+   Activity · Settings · privacy. */
 .wallet-hero-actions {
-  position: absolute;
-  top: 14px;
-  right: 14px;
+  position: relative;
   z-index: 2;
-  justify-content: flex-end;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
   gap: 8px;
-  margin-left: auto;
+  margin: 0;
+  min-height: 32px;
+}
+
+.wallet-hero-nav {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: nowrap;
+  gap: 4px;
 }
 
 .wallet-nav-button,
@@ -153,9 +166,59 @@ button {
 }
 
 .wallet-nav-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
   padding: 6px 10px;
 }
 
+.wallet-nav-button-icon {
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+}
+
+.wallet-nav-icon-svg {
+  display: block;
+  flex: 0 0 auto;
+}
+
+.wallet-nav-badge {
+  display: inline-grid;
+  place-items: center;
+  min-width: 16px;
+  height: 16px;
+  margin-left: 0;
+  padding: 0 4px;
+  border-radius: 999px;
+  background: var(--accent);
+  color: #fff;
+  font-size: 10px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  vertical-align: middle;
+}
+
+.wallet-nav-badge[hidden] {
+  display: none !important;
+}
+
+/* Rail presentation: Home owns Activity/Settings/privacy in the panel head. */
+html[data-wallet-presentation="rail"] .wallet-hero-nav {
+  display: none !important;
+}
+
+html[data-wallet-presentation="rail"] .wallet-hero-actions {
+  min-height: 0;
+  margin: 0;
+}
+
+html[data-wallet-presentation="rail"] .wallet-hero-actions:not(:has(#wallet-status:not([hidden])) ) {
+  display: none;
+}
+
 .wallet-icon-button {
   display: grid;
   place-items: center;
@@ -170,6 +233,12 @@ button {
   color: var(--ink);
 }
 
+/* Privacy toggle — icon peer of Settings; pressed = balances hidden. */
+#wallet-privacy.is-active {
+  color: var(--ink);
+  background: var(--chip-hover);
+}
+
 .wallet-page {
   display: grid;
   gap: 14px;
@@ -190,18 +259,24 @@ button {
   }
 }
 
-.wallet-hero,
 .wallet-section,
 .wallet-drawer,
-.wallet-modal {
+.wallet-modal,
+.wallet-hero-scene {
   border: 1px solid var(--line);
   background: var(--surface);
 }
 
+/* Outer hero owns Activity/Settings/privacy; only .wallet-hero-scene is the
+   bordered card that flips and eases height for Send/Receive. */
 .wallet-hero {
   position: relative;
-  border-radius: 18px;
-  padding: 52px 22px 22px;
+  display: grid;
+  gap: 8px;
+  border: 0;
+  background: transparent;
+  padding: 0;
+  border-radius: 0;
 }
 
 .eyebrow {
@@ -213,28 +288,345 @@ button {
   text-transform: uppercase;
 }
 
-.wallet-hero-row {
+.wallet-hero-scene {
+  border-radius: 18px;
+  padding: 12px 16px 16px;
+}
+
+.wallet-hero-flip {
+  position: relative;
+  /* Height eases for Send/Receive; window morphs in-plane, rail may also flip. */
+  transition: min-height 420ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+.wallet-hero-face-front {
+  position: relative;
+}
+
+/* Same card chrome; absolute so front height is the floor until JS eases. */
+.wallet-hero-face-back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: auto;
+  display: grid;
+  grid-template-rows: auto max-content auto;
+  align-content: start;
+  gap: 8px;
+  min-height: 100%;
+  height: max-content;
+  overflow: visible;
+  padding: 2px 0 4px;
+  box-sizing: border-box;
+}
+
+/*
+  Window morph: JS adds is-flipped (front out) then is-morph-back (back in).
+  Hard sequence — no CSS delay race when leaving [hidden].
+*/
+html:not([data-wallet-presentation="rail"]) .wallet-hero-face-front {
+  opacity: 1;
+  transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+html:not([data-wallet-presentation="rail"]) .wallet-hero.is-flipped .wallet-hero-face-front {
+  opacity: 0;
+  pointer-events: none;
+}
+
+html:not([data-wallet-presentation="rail"]) .wallet-hero-face-back {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+html:not([data-wallet-presentation="rail"]) .wallet-hero.is-flipped.is-morph-back .wallet-hero-face-back {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Rail: keep the 3D card flip — reads well in the narrow sidebar. */
+html[data-wallet-presentation="rail"] .wallet-hero-scene {
+  perspective: 1400px;
+}
+
+html[data-wallet-presentation="rail"] .wallet-hero-flip {
+  transform-style: preserve-3d;
+  transition:
+    transform 420ms cubic-bezier(0.2, 0, 0, 1),
+    min-height 420ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+html[data-wallet-presentation="rail"] .wallet-hero.is-flipped .wallet-hero-flip {
+  transform: rotateY(180deg);
+}
+
+html[data-wallet-presentation="rail"] .wallet-hero-face {
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+
+html[data-wallet-presentation="rail"] .wallet-hero-face-back {
+  transform: rotateY(180deg);
+}
+
+.wallet-hero-face-back .wallet-modal-header {
+  margin: 0;
+  gap: 2px;
+  min-width: 0;
+  flex-shrink: 0;
+}
+
+.wallet-hero-face-back .wallet-modal-header h2 {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 650;
+  line-height: 1.25;
+}
+
+.wallet-hero-face-back .wallet-modal-header .wallet-state {
+  overflow: visible;
+  text-overflow: unset;
+  white-space: normal;
+  line-height: 1.35;
+}
+
+/* Receive: "Family" sits beside "Receive" instead of stacking under it. */
+.wallet-hero-face-back .wallet-modal-header-inline {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.wallet-hero-face-back .wallet-modal-header-inline .wallet-state {
+  margin: 0;
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: right;
+  color: var(--ink-mute);
+  font-size: 12.5px;
+  font-weight: 500;
+}
+
+.wallet-hero-face-back .wallet-modal-body {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  gap: 8px;
+  min-width: 0;
+  overflow: visible;
+}
+
+.wallet-hero-face-back .wallet-modal-body:empty {
+  display: none;
+}
+
+.wallet-hero-face-back .wallet-modal-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+  margin: 0;
+  min-width: 0;
+  flex-shrink: 0;
+  padding-top: 2px;
+}
+
+.wallet-hero-face-back .wallet-modal-actions .wallet-button {
+  flex: 1 1 auto;
+}
+
+.wallet-hero-face-back .wallet-qr {
+  width: 88px;
+  height: 88px;
+  padding: 5px;
+  flex: 0 0 auto;
+}
+
+.wallet-hero-face-back .wallet-qr svg {
+  width: 78px;
+  height: 78px;
+}
+
+.wallet-hero-face-back .wallet-qr-address {
+  display: none;
+}
+
+.wallet-receive-compact {
   display: grid;
-  grid-template-columns: minmax(240px, 1fr) minmax(160px, 0.6fr) minmax(190px, 220px);
+  grid-template-columns: auto minmax(0, 1fr);
   align-items: center;
-  gap: 22px;
-  min-height: 172px;
+  gap: 12px;
+  width: 100%;
+  min-width: 0;
+}
+
+.wallet-qr-unavailable {
+  display: grid;
+  place-items: center;
+  width: 88px;
+  height: 88px;
+  margin: 0;
+  border: 1px dashed var(--line);
+  border-radius: 10px;
+  color: var(--ink-mute);
+  font-size: 10.5px;
+  font-weight: 550;
+  line-height: 1.25;
+  text-align: center;
+  padding: 8px;
+  box-sizing: border-box;
+}
+
+.wallet-receive-meta {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+}
+
+.wallet-receive-address-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  min-width: 0;
+}
+
+.wallet-receive-address {
+  flex: 1 1 auto;
+  min-width: 0;
+  color: var(--ink-soft);
+  font-family: var(--mono);
+  font-size: 10.5px;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+  word-break: break-all;
+}
+
+.wallet-copy-icon {
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+  margin-top: 0;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  background: var(--surface-alt);
+  color: var(--ink-soft);
+  cursor: pointer;
+}
+
+.wallet-copy-icon:hover {
+  background: var(--chip-hover);
+  color: var(--ink);
+}
+
+.wallet-copy-icon.is-copied {
+  color: var(--pos);
+  border-color: color-mix(in srgb, var(--pos) 35%, var(--line));
+}
+
+.wallet-hero-face-back .wallet-flow-hint {
+  margin: 0;
+  max-width: 100%;
+  color: var(--ink-mute);
+  font-size: 10.5px;
+  font-weight: 450;
+  line-height: 1.3;
+  text-align: left;
+}
+
+.wallet-hero-face-back .wallet-flow-form,
+.wallet-hero-face-back .wallet-flow-row {
+  width: 100%;
+  min-width: 0;
+  flex: 0 0 auto;
+}
+
+.wallet-hero-face-back .wallet-flow-row {
+  padding: 9px 10px;
+}
+
+.wallet-hero-face-back .wallet-flow-form input,
+.wallet-hero-face-back .wallet-flow-form select {
+  min-width: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wallet-hero-flip,
+  .wallet-hero-face-front,
+  .wallet-hero-face-back {
+    transition: none;
+  }
+}
+
+.wallet-hero-row {
+  display: grid;
+  grid-template-columns: 1fr;
+  align-items: stretch;
+  gap: 14px;
+  min-height: 0;
 }
 
 .wallet-hero-balance {
   display: grid;
-  align-content: center;
+  align-content: start;
+  gap: 8px;
+  min-width: 0;
+}
+
+.wallet-hero-balance-label-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   gap: 10px;
   min-width: 0;
 }
 
+.wallet-hero-balance-label-row .eyebrow {
+  margin: 0;
+  flex: 0 0 auto;
+}
+
+.wallet-hero-balance-label-row .wallet-detail {
+  width: auto;
+  max-width: min(52%, 240px);
+  margin-left: auto;
+}
+
+/* Amount left, 24h delta right — original bottom-aligned pair. */
+.wallet-hero-balance-top {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 12px;
+  min-width: 0;
+}
+
+.wallet-hero-balance-top .wallet-total-value {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.wallet-hero-balance-top .wallet-delta {
+  flex: 0 0 auto;
+  margin: 0 0 6px;
+}
+
 .wallet-total-value {
-  min-height: 68px;
+  min-height: 48px;
   color: var(--ink);
-  font-size: 64px;
+  font-size: 48px;
   font-variant-numeric: tabular-nums;
   font-weight: 500;
-  letter-spacing: -2.4px;
+  letter-spacing: -1.8px;
   line-height: 1;
 }
 
@@ -242,16 +634,16 @@ button {
   color: var(--ink-mute);
 }
 
+/* Honest 24h delta — number only (no decorative fake sparkline). */
 .wallet-delta {
   display: grid;
-  gap: 8px;
-  justify-self: center;
-  justify-items: center;
-  margin: 0;
+  gap: 0;
+  justify-items: end;
+  margin: 0 0 6px;
   color: var(--pos);
   font-size: 12.5px;
-  font-weight: 500;
-  text-align: center;
+  font-weight: 600;
+  text-align: right;
   white-space: nowrap;
 }
 
@@ -259,19 +651,6 @@ button {
   color: var(--neg);
 }
 
-.wallet-sparkline {
-  width: 148px;
-  height: 52px;
-}
-
-.wallet-sparkline polyline {
-  fill: none;
-  stroke: currentColor;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-width: 1.4;
-}
-
 .wallet-action-row {
   gap: 8px;
   margin-top: 0;
@@ -309,6 +688,29 @@ button {
   color: var(--neg);
 }
 
+/* Modal footers: solid blocks like Done — not outline chips. */
+.wallet-modal-actions .wallet-button-secondary {
+  background: var(--chip, var(--surface-alt, #ececec));
+  border-color: var(--line-strong);
+  color: var(--ink);
+}
+
+.wallet-modal-actions .wallet-button-secondary:hover:not(:disabled) {
+  background: var(--chip-hover, #e2e2e2);
+  color: var(--ink);
+}
+
+.wallet-modal-actions .wallet-button-danger {
+  background: var(--neg, #c23b22);
+  border-color: transparent;
+  color: #fff;
+}
+
+.wallet-modal-actions .wallet-button-danger:hover:not(:disabled) {
+  background: color-mix(in oklab, var(--neg, #c23b22) 88%, black);
+  color: #fff;
+}
+
 .wallet-button:disabled {
   cursor: not-allowed;
   opacity: 0.42;
@@ -324,52 +726,239 @@ button {
   padding: 3px;
 }
 
-.wallet-segmented button {
-  border: 0;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--ink-soft);
-  cursor: pointer;
-  font-size: 11.5px;
-  font-weight: 500;
-  letter-spacing: 0.04em;
-  padding: 5px 10px;
-  text-transform: uppercase;
+.wallet-segmented button {
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--ink-soft);
+  cursor: pointer;
+  font-size: 11.5px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  padding: 5px 10px;
+  text-transform: uppercase;
+}
+
+.wallet-segmented button.is-active {
+  background: var(--ink);
+  color: var(--bg);
+}
+
+.wallet-segmented-full {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
+  margin-left: 0;
+}
+
+.wallet-hero > .wallet-state {
+  display: block;
+  margin-top: 10px;
+}
+
+.wallet-section {
+  border-radius: 16px;
+  padding: 16px;
+}
+
+.wallet-section-heading {
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 14px;
+}
+
+.wallet-section-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+/* Accounts heading: title left, Create/Import right — one compact row. */
+.wallet-accounts-section .wallet-section-heading {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.wallet-accounts-section .wallet-section-heading > div:first-child {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.wallet-accounts-section .wallet-section-actions {
+  flex: 0 0 auto;
+  flex-wrap: nowrap;
+  justify-content: flex-end;
+  gap: 6px;
+}
+
+.wallet-accounts-section .wallet-section-actions .wallet-button {
+  padding: 6px 10px;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+/* Accounts Create/Import ceremony — same surface grammar as the hero. */
+.wallet-accounts-scene {
+  perspective: none;
+}
+
+.wallet-accounts-flip {
+  position: relative;
+  transition: min-height 420ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+/* Must leave the layout — opacity:0 still reserved the button row height. */
+.wallet-accounts-section.is-flipped .wallet-section-actions {
+  display: none;
+}
+
+/* Flow owns "Accounts | Family" — hide the static section title stack. */
+.wallet-accounts-section.is-flipped .wallet-section-heading {
+  display: none;
+}
+
+.wallet-accounts-face-back .wallet-modal-header-inline {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.wallet-accounts-face-back .wallet-modal-header-inline .wallet-state {
+  margin: 0;
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: right;
+  color: var(--ink-mute);
+  font-size: 12.5px;
+  font-weight: 500;
+}
+
+.wallet-accounts-face-front {
+  position: relative;
+}
+
+.wallet-accounts-face-back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: auto;
+  display: grid;
+  grid-template-rows: auto max-content auto;
+  align-content: start;
+  gap: 10px;
+  min-height: 100%;
+  height: max-content;
+  overflow: visible;
+  padding: 2px 0 4px;
+  box-sizing: border-box;
+}
+
+/* Window accounts: same hard sequence as hero (Create/Import must not overlap cards). */
+html:not([data-wallet-presentation="rail"]) .wallet-accounts-face-front {
+  opacity: 1;
+  transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+html:not([data-wallet-presentation="rail"]) .wallet-accounts-section.is-flipped .wallet-accounts-face-front {
+  opacity: 0;
+  pointer-events: none;
+}
+
+html:not([data-wallet-presentation="rail"]) .wallet-accounts-face-back {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+html:not([data-wallet-presentation="rail"]) .wallet-accounts-section.is-flipped.is-morph-back .wallet-accounts-face-back {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Rail: 3D flip for accounts Create/Import / ⋮ menu. */
+html[data-wallet-presentation="rail"] .wallet-accounts-scene {
+  perspective: 1400px;
+}
+
+html[data-wallet-presentation="rail"] .wallet-accounts-flip {
+  transform-style: preserve-3d;
+  transition:
+    transform 420ms cubic-bezier(0.2, 0, 0, 1),
+    min-height 420ms cubic-bezier(0.2, 0, 0, 1);
 }
 
-.wallet-segmented button.is-active {
-  background: var(--ink);
-  color: var(--bg);
+html[data-wallet-presentation="rail"] .wallet-accounts-section.is-flipped .wallet-accounts-flip {
+  transform: rotateY(180deg);
 }
 
-.wallet-segmented-full {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
-  margin-left: 0;
+html[data-wallet-presentation="rail"] .wallet-accounts-face {
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
 }
 
-.wallet-hero > .wallet-state {
-  display: block;
-  margin-top: 10px;
+html[data-wallet-presentation="rail"] .wallet-accounts-face-back {
+  transform: rotateY(180deg);
 }
 
-.wallet-section {
-  border-radius: 16px;
-  padding: 16px;
+.wallet-accounts-face-back .wallet-modal-header {
+  margin: 0;
+  gap: 2px;
 }
 
-.wallet-section-heading {
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 10px;
-  margin-bottom: 14px;
+.wallet-accounts-face-back .wallet-modal-header h2 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 650;
 }
 
-.wallet-section-actions {
+.wallet-accounts-face-back .wallet-modal-body {
   display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
+  flex-direction: column;
   gap: 8px;
+  min-width: 0;
+}
+
+.wallet-accounts-face-back .wallet-modal-body:empty {
+  display: none;
+}
+
+.wallet-accounts-face-back .wallet-modal-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+  margin: 0;
+  padding-top: 2px;
+}
+
+.wallet-accounts-face-back .wallet-modal-actions .wallet-button {
+  flex: 1 1 auto;
+}
+
+.wallet-accounts-face-back .wallet-flow-form,
+.wallet-accounts-face-back .wallet-flow-row {
+  width: 100%;
+  min-width: 0;
+}
+
+.wallet-accounts-face-back .wallet-flow-form textarea {
+  min-height: 110px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wallet-accounts-flip,
+  .wallet-accounts-face-front,
+  .wallet-accounts-face-back {
+    transition: none;
+  }
 }
 
 h1,
@@ -414,31 +1003,42 @@ h3 {
 .wallet-account {
   display: flex;
   flex-direction: column;
-  gap: 7px;
-  min-height: 118px;
-  padding: 12px;
+  gap: 8px;
+  min-height: 72px;
+  padding: 10px 12px;
 }
 
 .wallet-account:hover {
   border-color: var(--line-strong);
-  box-shadow: 0 8px 24px rgba(20, 20, 18, 0.06);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
 }
 
 .wallet-account.is-selected {
   border-color: var(--line-strong);
-  box-shadow: 0 0 0 1px var(--accent), 0 8px 24px rgba(20, 20, 18, 0.06);
+  box-shadow: 0 0 0 1px var(--accent), 0 8px 24px rgba(0, 0, 0, 0.4);
 }
 
-[data-theme="dark"] .wallet-account:hover {
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+:root[data-el-theme="light"] .wallet-account:hover {
+  box-shadow: 0 8px 24px rgba(20, 20, 18, 0.06);
 }
 
-[data-theme="dark"] .wallet-account.is-selected {
-  box-shadow: 0 0 0 1px var(--accent), 0 8px 24px rgba(0, 0, 0, 0.4);
+:root[data-el-theme="light"] .wallet-account.is-selected {
+  box-shadow: 0 0 0 1px var(--accent), 0 8px 24px rgba(20, 20, 18, 0.06);
 }
 
 .wallet-account-top {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.wallet-account-identity {
+  display: flex;
+  align-items: center;
   gap: 7px;
+  min-width: 0;
+  flex: 1 1 auto;
 }
 
 .wallet-card-title {
@@ -466,7 +1066,7 @@ h3 {
 }
 
 .wallet-more-button {
-  margin-left: auto;
+  flex: 0 0 auto;
   border: 0;
   background: transparent;
   color: var(--ink-mute);
@@ -477,16 +1077,26 @@ h3 {
 }
 
 .wallet-card-balance {
-  margin-top: 2px;
-  font-size: 22px;
+  flex: 0 0 auto;
+  margin: 0;
+  font-size: 15px;
   font-variant-numeric: tabular-nums;
-  font-weight: 500;
-  letter-spacing: -0.8px;
-  line-height: 1;
+  font-weight: 600;
+  letter-spacing: -0.4px;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+.wallet-account-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 5px;
+  min-width: 0;
 }
 
 .wallet-account-network {
-  margin-top: -2px;
+  margin: 0;
   font-size: 11px;
 }
 
@@ -527,6 +1137,7 @@ h3 {
   background: var(--accent);
   color: white;
   font-weight: 600;
+  overflow: hidden;
 }
 
 .wallet-method-mark-large {
@@ -535,12 +1146,38 @@ h3 {
   border-radius: 9px;
 }
 
+.wallet-method-mark-icon {
+  padding: 2px;
+}
+
+.wallet-method-mark-icon img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.wallet-method-passkey {
+  /* Blue key on white artwork — white mark plate matches MetaMask. */
+  background: #fff;
+}
+
 .wallet-method-metamask {
-  background: var(--metamask);
+  background: #fff;
+  color: #e2761b;
+}
+
+.wallet-method-btc,
+.wallet-method-unisat {
+  background: #0b0d10;
+}
+
+.wallet-method-ethereum {
+  background: #627eea;
 }
 
-.wallet-method-btc {
-  background: var(--btc);
+.wallet-method-bitcoin {
+  background: #f7931a;
 }
 
 .wallet-method-wc {
@@ -552,6 +1189,26 @@ h3 {
   color: var(--ink-mute);
 }
 
+.wallet-hero-pending {
+  display: grid;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.wallet-hero-pending[hidden] {
+  display: none !important;
+}
+
+.wallet-hero-request {
+  padding: 10px;
+  border-radius: 12px;
+  background: var(--surface-alt);
+}
+
+.wallet-hero-request .wallet-request-actions {
+  margin-top: 8px;
+}
+
 .wallet-empty {
   display: grid;
   place-items: center;
@@ -601,13 +1258,24 @@ h3 {
   position: fixed;
   inset: 0;
   z-index: 40;
-  background: rgba(20, 20, 18, 0.18);
-  backdrop-filter: blur(4px);
+  /* Dim hard enough that page content cannot compete with the sheet. */
+  background: rgba(6, 7, 10, 0.72);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+}
+
+.wallet-drawer-backdrop {
+  opacity: 0;
+  transition: opacity 280ms cubic-bezier(0.2, 0, 0, 1);
 }
 
-[data-theme="dark"] .wallet-drawer-backdrop,
-[data-theme="dark"] .wallet-modal-backdrop {
-  background: rgba(8, 9, 12, 0.5);
+.wallet-drawer-backdrop.is-open {
+  opacity: 1;
+}
+
+:root[data-el-theme="light"] .wallet-drawer-backdrop,
+:root[data-el-theme="light"] .wallet-modal-backdrop {
+  background: rgba(20, 20, 18, 0.42);
 }
 
 .wallet-drawer {
@@ -620,26 +1288,98 @@ h3 {
   overflow: auto;
   border-width: 0 0 0 1px;
   border-radius: 20px 0 0 20px;
-  box-shadow: -30px 0 80px rgba(20, 20, 18, 0.1);
+  /* Opaque raised surface — shared --surface is ~4% glass and bleeds the page. */
+  background: var(--el-surface-raised, #16181d);
+  box-shadow: -30px 0 80px rgba(0, 0, 0, 0.4);
   padding: 18px;
+  transform: translateX(104%);
+  transition: transform 320ms cubic-bezier(0.2, 0, 0, 1);
+  will-change: transform;
+}
+
+.wallet-drawer.is-open {
+  transform: translateX(0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wallet-drawer-backdrop,
+  .wallet-drawer {
+    transition: none;
+  }
 }
 
 .wallet-settings-drawer {
-  width: min(760px, 94vw);
+  width: min(420px, 94vw);
 }
 
 .wallet-detail {
-  width: min(100%, 220px);
-  justify-self: end;
+  width: 100%;
+  justify-self: stretch;
 }
 
-[data-theme="dark"] .wallet-drawer {
-  box-shadow: -30px 0 80px rgba(0, 0, 0, 0.4);
+/* Selected-account meme on the far right — address + copy, no card chrome. */
+.wallet-hero-address-pill {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+  width: fit-content;
+  max-width: 100%;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.wallet-hero-address-name {
+  flex: 0 1 auto;
+  min-width: 0;
+  color: var(--ink-soft);
+  font-size: 12px;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wallet-hero-address-value {
+  flex: 0 0 auto;
+  color: var(--ink-mute);
+  font-family: var(--mono);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+}
+
+.wallet-hero-address-pill .wallet-copy-icon {
+  width: 24px;
+  height: 24px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+}
+
+:root[data-el-theme="light"] .wallet-drawer {
+  background: var(--el-surface-raised, #ffffff);
+  box-shadow: -30px 0 80px rgba(20, 20, 18, 0.1);
 }
 
 .wallet-drawer-header {
-  justify-content: flex-end;
-  margin-bottom: 10px;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.wallet-drawer-header h2 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: -0.3px;
+}
+
+.wallet-drawer-header .eyebrow {
+  margin-bottom: 2px;
 }
 
 .wallet-settings-card {
@@ -653,21 +1393,63 @@ h3 {
 }
 
 .wallet-settings {
-  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.8fr);
+  grid-template-columns: minmax(0, 1fr);
   align-items: start;
 }
 
-.wallet-settings-main,
-.wallet-settings-side {
+.wallet-settings-main {
   display: grid;
   gap: 10px;
 }
 
+#wallet-signers.is-highlighted {
+  outline: 1px solid color-mix(in oklab, var(--accent) 55%, transparent);
+  outline-offset: 4px;
+  border-radius: 14px;
+}
+
+.wallet-get-started[hidden] {
+  display: none;
+}
+
+/* Narrow rail / window: signer rows stack cleanly. */
+.wallet-methods .wallet-method {
+  flex-wrap: wrap;
+}
+
+.wallet-methods .wallet-method > button {
+  margin-left: auto;
+}
+
+/* One plate per signer family — header + nested accounts share a border. */
+.wallet-method-group {
+  display: grid;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  background: var(--surface);
+  overflow: hidden;
+}
+
+.wallet-method-group .wallet-method {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.wallet-method-group .wallet-method + .wallet-method {
+  border-top: 1px solid var(--line);
+}
+
 .wallet-method {
   gap: 10px;
   padding: 11px;
 }
 
+.wallet-method-account {
+  padding-left: 14px;
+  background: color-mix(in oklab, var(--surface) 92%, var(--ink) 3%);
+}
+
 .wallet-method > div {
   display: grid;
   flex: 1;
@@ -687,53 +1469,27 @@ h3 {
 .wallet-detail-inline {
   display: grid;
   align-items: center;
-  justify-items: center;
-  gap: 9px;
+  justify-items: stretch;
+  gap: 10px;
   width: 100%;
 }
 
 .wallet-detail-summary {
   display: grid;
   gap: 2px;
-  justify-items: center;
-  text-align: center;
-}
-
-.wallet-detail-summary strong {
-  font-size: 13px;
-  font-weight: 500;
-}
-
-.wallet-detail-summary span {
-  color: var(--ink-mute);
-  font-size: 11px;
+  justify-items: start;
+  text-align: left;
 }
 
 .wallet-detail-address {
-  justify-content: center;
+  justify-content: flex-start;
   width: 100%;
   border: 1px solid var(--line);
-  border-radius: 12px;
-  background: var(--surface-alt);
+  border-radius: 10px;
+  background: var(--surface);
   padding: 6px 8px;
 }
 
-.wallet-detail-qr {
-  flex: 0 0 auto;
-  display: grid;
-  place-items: center;
-  width: 156px;
-  height: 156px;
-  border: 1px solid var(--line);
-  border-radius: 12px;
-  background: white;
-}
-
-.wallet-detail-qr svg {
-  width: 136px;
-  height: 136px;
-}
-
 .wallet-pending-expiry,
 .wallet-qr-address {
   font-family: var(--mono);
@@ -792,6 +1548,15 @@ h3 {
   border-radius: 18px;
   padding: 24px;
   transform: translate(-50%, -50%);
+  /* Confirm sheets must read as solid cards. The page-level --surface token
+     is intentional glass for hero/sections; here it made account cards behind
+     the modal look like blurred modal content. */
+  background: var(--el-surface-raised, #16181d);
+  box-shadow: var(--el-shadow-3, 0 24px 80px rgba(0, 0, 0, 0.45));
+}
+
+:root[data-el-theme="light"] .wallet-modal {
+  background: var(--el-surface-raised, #ffffff);
 }
 
 .wallet-modal-header {
@@ -855,20 +1620,22 @@ h3 {
   font: inherit;
 }
 
+/* Receive modal only — white plate for reliable scanning. */
 .wallet-qr {
   display: grid;
   place-items: center;
-  width: 148px;
-  height: 148px;
+  width: min(200px, 100%);
   margin: 0 auto;
   border: 1px solid var(--line);
   border-radius: 12px;
-  background: var(--surface-alt);
+  background: #fff;
+  padding: 12px;
 }
 
 .wallet-qr svg {
-  width: 132px;
-  height: 132px;
+  width: 160px;
+  height: 160px;
+  display: block;
 }
 
 .wallet-qr-address {
@@ -927,16 +1694,14 @@ textarea {
 }
 
 @media (max-width: 780px) {
-  .wallet-status {
-    left: 14px;
-    right: 14px;
-    top: 50px;
-  }
-
   .wallet-hero-actions {
     gap: 4px;
   }
 
+  .wallet-status {
+    font-size: 11px;
+  }
+
   .wallet-nav-button {
     padding: 6px 8px;
   }
@@ -950,14 +1715,15 @@ textarea {
     padding: 16px;
   }
 
-  .wallet-hero,
+  .wallet-hero-scene,
   .wallet-section {
     border-radius: 14px;
-    padding: 14px;
+    padding: 12px 14px 14px;
   }
 
-  .wallet-hero {
-    padding-top: 92px;
+  .wallet-hero-actions {
+    min-height: 28px;
+    gap: 6px;
   }
 
   .wallet-hero-row {
@@ -999,10 +1765,18 @@ textarea {
     display: grid;
   }
 
+  .wallet-accounts-section .wallet-section-heading {
+    display: flex;
+  }
+
   .wallet-section-actions {
     justify-content: flex-start;
   }
 
+  .wallet-accounts-section .wallet-section-actions {
+    justify-content: flex-end;
+  }
+
   .wallet-drawer {
     width: 100vw;
     border-radius: 0;
@@ -1013,39 +1787,13 @@ textarea {
   }
 
   .wallet-detail {
-    justify-self: center;
-  }
-
-  .wallet-detail-inline {
-    align-items: center;
-    justify-items: center;
-  }
-
-  .wallet-detail-qr {
-    width: 132px;
-    height: 132px;
-  }
-
-  .wallet-detail-qr svg {
-    width: 114px;
-    height: 114px;
+    width: 100%;
   }
 
   .wallet-detail-address {
     max-width: none;
   }
 
-  .wallet-delta {
-    justify-self: center;
-    justify-items: center;
-    text-align: center;
-  }
-
-  .wallet-sparkline {
-    width: 124px;
-    height: 44px;
-  }
-
   .wallet-modal {
     top: auto;
     bottom: 0;
diff --git a/capsules/wallet/browser/wallet-account-actions.js b/capsules/wallet/browser/wallet-account-actions.js
index 8fe11c4bc..412dc71c2 100644
--- a/capsules/wallet/browser/wallet-account-actions.js
+++ b/capsules/wallet/browser/wallet-account-actions.js
@@ -4,8 +4,10 @@ import {
   isPasskeyManagedAccount,
   readText,
   shortAddress,
-} from "./wallet-format.js?v=wallet-20260523a";
-import { pulseCopied, setBusy, textNode } from "./wallet-render.js?v=wallet-20260523a";
+} from "./wallet-format.js?v=wallet-20260719w";
+import { pulseCopied, setBusy, textNode } from "./wallet-render.js?v=wallet-20260719w";
+
+const accountsSurface = { surface: "accounts" };
 
 export function createWalletAccountActions({
   buildViewAccounts,
@@ -13,11 +15,11 @@ export function createWalletAccountActions({
   closeModal,
   copyText,
   fetchJson,
+  flowHost,
   flowRow,
   flowStaticRow,
   getSelectedAccountId,
   modalButton,
-  modalNode,
   notifyHomeSummaryChanged,
   openAccountDetail,
   openApprovalMethod,
@@ -67,11 +69,15 @@ export function createWalletAccountActions({
         },
       ),
       flowRow("Rename", "Change display name", () => openRenameAccount(account)),
-      flowRow("Receive", "Show QR code", () => renderReceiveAddress(account)),
+      flowRow("Receive", "Show QR code", () => {
+        closeModal();
+        renderReceiveAddress(account);
+      }),
       flowRow("Copy address", shortAddress(account.address), async () => {
         await copyText(account.address);
         closeModal();
-        showStatus("Address copied.", "success");
+        // Tick the hero copy control — no status banner (avoids layout shift).
+        pulseHeroCopy(account.address);
       }),
       flowRow("Use by default", defaultIntentLabel(account), () => setDefaultAccount(account)),
     ];
@@ -79,9 +85,21 @@ export function createWalletAccountActions({
       rows.push(flowRow("Show recovery key", "Requires passkey", () => showRecoveryKey(account)));
     }
     rows.push(
-      flowRow("Delete account", "Remove from this Wallet", () => confirmDeleteAccount(account)),
+      flowRow("Remove account", "Remove from this Wallet", () => confirmDeleteAccount(account)),
     );
-    openFlowModal("Account", account.name, rows);
+    // Outer "Accounts / N accounts" hides while flipped; this row is Accounts | name.
+    openFlowModal("Accounts", account.name, rows, undefined, {
+      ...accountsSurface,
+      headerInline: true,
+    });
+  }
+
+  function pulseHeroCopy(address) {
+    const match = [...document.querySelectorAll(".wallet-copy-icon[data-wallet-copy-address]")]
+      .find((node) => readText(node.dataset.walletCopyAddress) === address);
+    if (match) {
+      pulseCopied(match);
+    }
   }
 
   function openRenameAccount(account) {
@@ -105,7 +123,7 @@ export function createWalletAccountActions({
     openFlowModal("Rename account", account.network, [form], [
       modalButton("Cancel", closeModal, true),
       modalButton("Save", () => form.requestSubmit()),
-    ]);
+    ], accountsSurface);
     input.focus();
     input.select();
   }
@@ -117,7 +135,8 @@ export function createWalletAccountActions({
       showStatus("Enter an account name.", "error");
       return;
     }
-    const button = modalNode.querySelector(
+    const host = typeof flowHost === "function" ? flowHost() : null;
+    const button = host?.querySelector(
       ".wallet-modal-actions .wallet-button:not(.wallet-button-secondary)",
     );
     setBusy(button, true);
@@ -142,17 +161,18 @@ export function createWalletAccountActions({
   function confirmDeleteAccount(account) {
     const warning = textNode(
       "p",
-      `Delete ${account.name} from this Wallet. Export the recovery key first if this is a built-in account you may need later. Passkey confirmation is required.`,
+      `Remove ${account.name} from this Wallet. Export the recovery key first if this is a built-in account you may need later. Passkey confirmation is required.`,
       "wallet-flow-hint",
     );
-    openFlowModal("Delete account", account.network, [warning], [
+    openFlowModal("Remove account", account.network, [warning], [
       modalButton("Cancel", closeModal, true),
-      modalButton("Delete", () => deleteAccount(account), true, true),
-    ]);
+      modalButton("Remove", () => deleteAccount(account), false, true),
+    ], accountsSurface);
   }
 
   async function deleteAccount(account) {
-    const button = modalNode.querySelector(".wallet-modal-actions .wallet-button-danger");
+    const host = typeof flowHost === "function" ? flowHost() : null;
+    const button = host?.querySelector(".wallet-modal-actions .wallet-button-danger");
     setBusy(button, true);
     try {
       const homeToken = await requestFreshPasskeyHomeToken();
@@ -179,7 +199,7 @@ export function createWalletAccountActions({
     if (!isPasskeyManagedAccount(account)) {
       openInfoModal(
         "Recovery",
-        "This account is controlled by an external approval method. Recover it from that wallet.",
+        "This account is controlled by an external wallet. Recover it from MetaMask, UniSat, or WalletConnect.",
       );
       return;
     }
@@ -189,7 +209,7 @@ export function createWalletAccountActions({
         "The key is shown only after fresh passkey verification. Store it offline.",
         "wallet-flow-hint",
       ),
-    ]);
+    ], undefined, accountsSurface);
     try {
       const homeToken = await requestFreshPasskeyHomeToken();
       const payload = await fetchJson(
@@ -202,7 +222,13 @@ export function createWalletAccountActions({
       );
       renderRecoveryKey(account, payload);
     } catch (error) {
-      openInfoModal("Recovery", String(error.message || error));
+      openFlowModal(
+        "Recovery",
+        String(error.message || error),
+        [],
+        [modalButton("Done", closeModal)],
+        accountsSurface,
+      );
     }
   }
 
@@ -235,7 +261,7 @@ export function createWalletAccountActions({
     openFlowModal("Recovery key", "Keep this private.", [note, key, ...details], [
       modalButton("Done", closeModal, true),
       copy,
-    ]);
+    ], accountsSurface);
   }
 
   async function setDefaultAccount(account) {
@@ -283,8 +309,8 @@ export function createWalletAccountActions({
     setBusy(button, true);
     try {
       await copyText(address);
+      // Icon → tick only; status text above the hero shifts the whole card.
       pulseCopied(button);
-      showStatus("Address copied.", "success");
     } catch (error) {
       showStatus(String(error.message || error), "error");
     } finally {
diff --git a/capsules/wallet/browser/wallet-activity.js b/capsules/wallet/browser/wallet-activity.js
index 753ff555b..e5d51d9c0 100644
--- a/capsules/wallet/browser/wallet-activity.js
+++ b/capsules/wallet/browser/wallet-activity.js
@@ -1,14 +1,21 @@
-import { readText, relativeTime, requestTitle, shortAddress } from "./wallet-format.js?v=wallet-20260523a";
+import { readText, relativeTime, requestTitle, shortAddress } from "./wallet-format.js?v=wallet-20260719w";
 
-export function createWalletActivity({ activityNode, textNode }) {
+export function createWalletActivity({
+  activityNode,
+  textNode,
+}) {
   function renderActivity(requests) {
     activityNode.replaceChildren();
-    if (requests.length === 0) {
-      activityNode.append(textNode("p", "No wallet activity yet.", "wallet-state"));
+    // History only — pending actions live under Send/Receive in the hero.
+    const history = [...requests]
+      .filter((request) => readText(request.status) !== "pending")
+      .sort((a, b) => activityTime(b) - activityTime(a))
+      .slice(0, 12);
+    if (history.length === 0) {
+      activityNode.append(textNode("p", "No activity yet.", "wallet-state"));
       return;
     }
-    const recent = [...requests].sort((a, b) => activityTime(b) - activityTime(a)).slice(0, 12);
-    for (const request of recent) {
+    for (const request of history) {
       const row = document.createElement("article");
       row.className = "wallet-activity-row";
       row.innerHTML = `<span class="wallet-activity-icon">${activityIcon(request)}</span>`;
diff --git a/capsules/wallet/browser/wallet-api.js b/capsules/wallet/browser/wallet-api.js
index b88ed0260..36713ec8f 100644
--- a/capsules/wallet/browser/wallet-api.js
+++ b/capsules/wallet/browser/wallet-api.js
@@ -1,4 +1,4 @@
-import { readText } from "./wallet-format.js?v=wallet-20260523a";
+import { readText } from "./wallet-format.js?v=wallet-20260719w";
 
 export function readQueryParam(name) {
   const value = new URLSearchParams(window.location.search).get(name);
diff --git a/capsules/wallet/browser/wallet-create-account-flow.js b/capsules/wallet/browser/wallet-create-account-flow.js
index 51449fca4..6e5cd0878 100644
--- a/capsules/wallet/browser/wallet-create-account-flow.js
+++ b/capsules/wallet/browser/wallet-create-account-flow.js
@@ -3,9 +3,9 @@ export function createWalletCreateAccountFlow({
   buildViewAccounts,
   closeModal,
   fetchJson,
+  flowHost,
   flowRow,
   modalButton,
-  modalNode,
   nextAccountName,
   notifyHomeSummaryChanged,
   openFlowModal,
@@ -16,6 +16,7 @@ export function createWalletCreateAccountFlow({
   shellHeaders,
   showStatus,
 }) {
+  const accountsSurface = { surface: "accounts" };
   const evmChainNamespaces = MANAGED_CHAIN_NAMESPACES.filter((namespace) =>
     namespace.startsWith("eip155:"),
   );
@@ -28,6 +29,13 @@ export function createWalletCreateAccountFlow({
     openCreateAccountFlow();
   }
 
+  function primaryActionButton() {
+    const host = typeof flowHost === "function" ? flowHost() : null;
+    return host?.querySelector(
+      ".wallet-modal-actions .wallet-button:not(.wallet-button-secondary)",
+    ) || null;
+  }
+
   function openCreateAccountFlow() {
     const rows = [];
     if (evmChainNamespaces.length > 0) {
@@ -53,6 +61,7 @@ export function createWalletCreateAccountFlow({
       "Choose the account type. Chains are provider routes, not separate wallet types.",
       rows,
       [modalButton("Cancel", closeModal, true)],
+      accountsSurface,
     );
   }
 
@@ -79,6 +88,7 @@ export function createWalletCreateAccountFlow({
         modalButton("Back", openCreateAccountFlow, true),
         modalButton("Create", () => form.requestSubmit()),
       ],
+      accountsSurface,
     );
   }
 
@@ -101,9 +111,7 @@ export function createWalletCreateAccountFlow({
       showStatus("No supported provider is available for this account type.", "error");
       return;
     }
-    const submit = modalNode.querySelector(
-      ".wallet-modal-actions .wallet-button:not(.wallet-button-secondary)",
-    );
+    const submit = primaryActionButton();
     setBusy(submit, true);
     try {
       for (const [index, chainNamespace] of targetNamespaces.entries()) {
@@ -138,7 +146,7 @@ export function createWalletCreateAccountFlow({
     form.className = "wallet-flow-form";
     form.innerHTML = `
       <label>Wallet recovery key
-        <textarea name="recovery_key" rows="8" spellcheck="false" placeholder='{"schema":"elastos.wallet.recovery-key/v1",...}'></textarea>
+        <textarea name="recovery_key" rows="6" spellcheck="false" placeholder='{"schema":"elastos.wallet.recovery-key/v1",...}'></textarea>
       </label>
       <label>Name <input name="label" autocomplete="off" maxlength="40" placeholder="Recovered account"></label>
       <p class="wallet-flow-hint">Paste an individual Wallet recovery key. A full System Recovery Kit can restore Home data and included built-in Wallet accounts from System.</p>
@@ -157,6 +165,7 @@ export function createWalletCreateAccountFlow({
         modalButton("Cancel", closeModal, true),
         modalButton("Import", () => form.requestSubmit()),
       ],
+      accountsSurface,
     );
   }
 
@@ -179,9 +188,7 @@ export function createWalletCreateAccountFlow({
       showStatus("Paste an elastos.wallet.recovery-key/v1 account key.", "error");
       return;
     }
-    const submit = modalNode.querySelector(
-      ".wallet-modal-actions .wallet-button:not(.wallet-button-secondary)",
-    );
+    const submit = primaryActionButton();
     setBusy(submit, true);
     try {
       const homeToken = await requestFreshPasskeyHomeToken();
diff --git a/capsules/wallet/browser/wallet-flows.js b/capsules/wallet/browser/wallet-flows.js
index b266c6d11..17187f159 100644
--- a/capsules/wallet/browser/wallet-flows.js
+++ b/capsules/wallet/browser/wallet-flows.js
@@ -1,15 +1,80 @@
-import { textNode } from "./wallet-render.js?v=wallet-20260523a";
+import { textNode } from "./wallet-render.js?v=wallet-20260719w";
+
+export function createWalletFlows({
+  modalNode,
+  modalBackdropNode,
+  heroNode = null,
+  heroBackNode = null,
+  accountsSectionNode = null,
+  accountsBackNode = null,
+  showStatus,
+}) {
+  // Rail 3D flip ~420ms; window morph is hard-sequenced (out, then in).
+  const FLIP_MS = 420;
+  const MORPH_FACE_MS = 200;
+  let heroFlowActive = false;
+  let accountsFlowActive = false;
+  let heroResizeObserver = null;
+  let accountsResizeObserver = null;
+  let restoreFocusNode = null;
+  let heroHeightReleaseTimer = 0;
+  let accountsHeightReleaseTimer = 0;
+  let heroMorphTimer = 0;
+  let accountsMorphTimer = 0;
+
+  function useWindowMorph() {
+    return document.documentElement.dataset.walletPresentation !== "rail"
+      && !prefersReducedMotion();
+  }
 
-export function createWalletFlows({ modalNode, modalBackdropNode, showStatus }) {
   function openInfoModal(title, message) {
-    openFlowModal(title, message, [], [modalButton("Done", closeModal)]);
+    openFlowModal(title, message, [], [modalButton("Done", closeModal)], { surface: "modal" });
+  }
+
+  function shouldUseAccountsFlip(title, options = {}) {
+    if (options.surface === "modal" || options.surface === "hero") {
+      return false;
+    }
+    if (options.surface === "accounts" || accountsFlowActive) {
+      return Boolean(accountsSectionNode && accountsBackNode);
+    }
+    return Boolean(
+      accountsSectionNode
+        && accountsBackNode
+        && /^(Create account|Import recovery key|Account|Rename account|Remove account|Delete account|Passkey required|Recovery key)\b/i.test(
+          String(title || ""),
+        ),
+    );
+  }
+
+  function shouldUseHeroFlip(title, options = {}) {
+    if (options.surface === "modal" || options.surface === "accounts") {
+      return false;
+    }
+    if (options.surface === "hero" || heroFlowActive) {
+      return Boolean(heroNode && heroBackNode);
+    }
+    // Send / Receive own the hero flip; other confirmations stay centered modals.
+    return Boolean(heroNode && heroBackNode && /^(Send|Receive)\b/i.test(String(title || "")));
   }
 
-  function openFlowModal(title, subtitle, nodes, actions = [modalButton("Cancel", closeModal, true)]) {
-    modalNode.replaceChildren();
+  function openFlowModal(title, subtitle, nodes, actions = [modalButton("Cancel", closeModal, true)], options = {}) {
+    const useAccounts = shouldUseAccountsFlip(title, options);
+    const useHero = !useAccounts && shouldUseHeroFlip(title, options);
+    const host = useAccounts ? accountsBackNode : useHero ? heroBackNode : modalNode;
+    if (!host) {
+      return;
+    }
+    host.replaceChildren();
     const header = document.createElement("header");
-    header.className = "wallet-modal-header";
-    header.append(textNode("h2", title), textNode("p", subtitle, "wallet-state"));
+    // Receive (and short account labels) put the name beside the title to
+    // reclaim the vertical stack under "Receive".
+    header.className = options.headerInline
+      ? "wallet-modal-header wallet-modal-header-inline"
+      : "wallet-modal-header";
+    const heading = textNode("h2", title);
+    heading.tabIndex = -1;
+    header.append(heading, textNode("p", subtitle, "wallet-state"));
     const body = document.createElement("div");
     body.className = "wallet-modal-body";
     for (const node of nodes) {
@@ -20,16 +85,374 @@ export function createWalletFlows({ modalNode, modalBackdropNode, showStatus })
     for (const action of actions) {
       footer.append(action);
     }
-    modalNode.append(header, body, footer);
+    host.append(header, body, footer);
+    if (useAccounts) {
+      accountsFlowActive = true;
+      accountsBackNode.classList.add("is-flow");
+      accountsBackNode.setAttribute("role", "dialog");
+      accountsBackNode.setAttribute("aria-modal", "true");
+      accountsBackNode.setAttribute("aria-label", title);
+      showAccountsBack(() => heading.focus({ preventScroll: true }));
+      return;
+    }
+    if (useHero) {
+      heroFlowActive = true;
+      heroBackNode.classList.add("is-flow");
+      heroBackNode.setAttribute("role", "dialog");
+      heroBackNode.setAttribute("aria-modal", "true");
+      heroBackNode.setAttribute("aria-label", title);
+      showHeroBack(() => heading.focus({ preventScroll: true }));
+      return;
+    }
     modalNode.hidden = false;
     modalBackdropNode.hidden = false;
   }
 
+  function showHeroBack(onReady = null) {
+    if (!heroNode || !heroBackNode) {
+      return;
+    }
+    captureRestoreFocus();
+    window.clearTimeout(heroHeightReleaseTimer);
+    window.clearTimeout(heroMorphTimer);
+    // Lock to front height first, then ease to back after the flip starts.
+    lockFlipShellHeight(
+      heroNode.querySelector(".wallet-hero-flip"),
+      heroNode.querySelector(".wallet-hero-face-front"),
+    );
+    setHeroFrontInert(true);
+    const alreadyBack = heroNode.classList.contains("is-flipped");
+    heroBackNode.hidden = false;
+    // Reflow at opacity 0 before revealing — avoids a flash when leaving [hidden].
+    void heroBackNode.offsetWidth;
+    heroNode.dataset.face = "back";
+    if (alreadyBack) {
+      heroNode.classList.add("is-flipped", "is-morph-back");
+      startHeroResizeObserver();
+      queueHeroFlipMeasure();
+      onReady?.();
+      return;
+    }
+    if (useWindowMorph()) {
+      heroNode.classList.remove("is-morph-back");
+      heroNode.classList.add("is-flipped");
+      heroMorphTimer = window.setTimeout(() => {
+        heroMorphTimer = 0;
+        heroNode.classList.add("is-morph-back");
+        startHeroResizeObserver();
+        queueHeroFlipMeasure();
+        onReady?.();
+      }, MORPH_FACE_MS);
+      return;
+    }
+    heroNode.classList.add("is-flipped", "is-morph-back");
+    startHeroResizeObserver();
+    queueHeroFlipMeasure();
+    onReady?.();
+  }
+
+  function hideHeroBack() {
+    if (!heroNode || !heroBackNode) {
+      return;
+    }
+    window.clearTimeout(heroMorphTimer);
+    stopHeroResizeObserver();
+    if (useWindowMorph() && heroNode.classList.contains("is-morph-back")) {
+      heroNode.classList.remove("is-morph-back");
+      heroNode.dataset.face = "front";
+      heroMorphTimer = window.setTimeout(() => {
+        heroMorphTimer = 0;
+        heroNode.classList.remove("is-flipped");
+        easeFlipShellToFront(
+          heroNode.querySelector(".wallet-hero-flip"),
+          heroNode.querySelector(".wallet-hero-face-front"),
+          (timer) => {
+            heroHeightReleaseTimer = timer;
+          },
+        );
+        setHeroFrontInert(false);
+        finishFlipUnmount(heroNode, heroBackNode, MORPH_FACE_MS);
+      }, MORPH_FACE_MS);
+      return;
+    }
+    heroNode.dataset.face = "front";
+    heroNode.classList.remove("is-flipped", "is-morph-back");
+    easeFlipShellToFront(
+      heroNode.querySelector(".wallet-hero-flip"),
+      heroNode.querySelector(".wallet-hero-face-front"),
+      (timer) => {
+        heroHeightReleaseTimer = timer;
+      },
+    );
+    setHeroFrontInert(false);
+    finishFlipUnmount(heroNode, heroBackNode);
+  }
+
+  function showAccountsBack(onReady = null) {
+    if (!accountsSectionNode || !accountsBackNode) {
+      return;
+    }
+    captureRestoreFocus();
+    window.clearTimeout(accountsHeightReleaseTimer);
+    window.clearTimeout(accountsMorphTimer);
+    lockFlipShellHeight(
+      accountsSectionNode.querySelector(".wallet-accounts-flip"),
+      accountsSectionNode.querySelector(".wallet-accounts-face-front"),
+    );
+    setAccountsFrontInert(true);
+    const alreadyBack = accountsSectionNode.classList.contains("is-flipped");
+    accountsBackNode.hidden = false;
+    void accountsBackNode.offsetWidth;
+    accountsSectionNode.dataset.face = "back";
+    accountsSectionNode.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    if (alreadyBack) {
+      // Create → chain step: stay on the back face, no re-overlap with cards.
+      accountsSectionNode.classList.add("is-flipped", "is-morph-back");
+      startAccountsResizeObserver();
+      queueAccountsFlipMeasure();
+      onReady?.();
+      return;
+    }
+    if (useWindowMorph()) {
+      // Phase 1: account cards fade out; back stays at opacity 0.
+      accountsSectionNode.classList.remove("is-morph-back");
+      accountsSectionNode.classList.add("is-flipped");
+      accountsMorphTimer = window.setTimeout(() => {
+        accountsMorphTimer = 0;
+        // Phase 2: only now fade Create/Import (or menu) in.
+        accountsSectionNode.classList.add("is-morph-back");
+        startAccountsResizeObserver();
+        queueAccountsFlipMeasure();
+        onReady?.();
+      }, MORPH_FACE_MS);
+      return;
+    }
+    accountsSectionNode.classList.add("is-flipped", "is-morph-back");
+    startAccountsResizeObserver();
+    queueAccountsFlipMeasure();
+    onReady?.();
+  }
+
+  function hideAccountsBack() {
+    if (!accountsSectionNode || !accountsBackNode) {
+      return;
+    }
+    window.clearTimeout(accountsMorphTimer);
+    stopAccountsResizeObserver();
+    if (useWindowMorph() && accountsSectionNode.classList.contains("is-morph-back")) {
+      accountsSectionNode.classList.remove("is-morph-back");
+      accountsSectionNode.dataset.face = "front";
+      accountsMorphTimer = window.setTimeout(() => {
+        accountsMorphTimer = 0;
+        accountsSectionNode.classList.remove("is-flipped");
+        easeFlipShellToFront(
+          accountsSectionNode.querySelector(".wallet-accounts-flip"),
+          accountsSectionNode.querySelector(".wallet-accounts-face-front"),
+          (timer) => {
+            accountsHeightReleaseTimer = timer;
+          },
+        );
+        setAccountsFrontInert(false);
+        finishFlipUnmount(accountsSectionNode, accountsBackNode, MORPH_FACE_MS);
+      }, MORPH_FACE_MS);
+      return;
+    }
+    accountsSectionNode.dataset.face = "front";
+    accountsSectionNode.classList.remove("is-flipped", "is-morph-back");
+    easeFlipShellToFront(
+      accountsSectionNode.querySelector(".wallet-accounts-flip"),
+      accountsSectionNode.querySelector(".wallet-accounts-face-front"),
+      (timer) => {
+        accountsHeightReleaseTimer = timer;
+      },
+    );
+    setAccountsFrontInert(false);
+    finishFlipUnmount(accountsSectionNode, accountsBackNode);
+  }
+
+  function lockFlipShellHeight(flip, front) {
+    if (!flip || !front) {
+      return;
+    }
+    const height = Math.ceil(front.getBoundingClientRect().height);
+    flip.style.minHeight = `${Math.max(height, 1)}px`;
+  }
+
+  function easeFlipShellToFront(flip, front, setTimer) {
+    if (!flip) {
+      return;
+    }
+    if (prefersReducedMotion()) {
+      flip.style.minHeight = "";
+      return;
+    }
+    const frontHeight = front
+      ? Math.ceil(front.getBoundingClientRect().height)
+      : Math.ceil(flip.getBoundingClientRect().height);
+    flip.style.minHeight = `${Math.max(frontHeight, 1)}px`;
+    const timer = window.setTimeout(() => {
+      if (flip.style.minHeight === `${Math.max(frontHeight, 1)}px`) {
+        flip.style.minHeight = "";
+      }
+    }, FLIP_MS);
+    setTimer?.(timer);
+  }
+
+  function captureRestoreFocus() {
+    if (!restoreFocusNode) {
+      restoreFocusNode = document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : null;
+    }
+  }
+
+  function finishFlipUnmount(sectionNode, backNode, delayMs = FLIP_MS) {
+    const focusTarget = restoreFocusNode;
+    restoreFocusNode = null;
+    const finish = () => {
+      if (sectionNode.dataset.face === "front") {
+        backNode.hidden = true;
+        backNode.classList.remove("is-flow");
+        backNode.removeAttribute("role");
+        backNode.removeAttribute("aria-modal");
+        backNode.removeAttribute("aria-label");
+        backNode.replaceChildren();
+        sectionNode.classList.remove("is-morph-back");
+      }
+      if (focusTarget?.isConnected) {
+        focusTarget.focus({ preventScroll: true });
+      }
+    };
+    window.setTimeout(finish, prefersReducedMotion() ? 0 : delayMs);
+  }
+
+  function setHeroFrontInert(inert) {
+    const front = heroNode?.querySelector(".wallet-hero-face-front");
+    if (!front) {
+      return;
+    }
+    front.inert = inert;
+    front.setAttribute("aria-hidden", inert ? "true" : "false");
+  }
+
+  function setAccountsFrontInert(inert) {
+    const front = accountsSectionNode?.querySelector(".wallet-accounts-face-front");
+    const actions = accountsSectionNode?.querySelector(".wallet-section-actions");
+    if (front) {
+      front.inert = inert;
+      front.setAttribute("aria-hidden", inert ? "true" : "false");
+    }
+    if (actions) {
+      actions.inert = inert;
+      actions.setAttribute("aria-hidden", inert ? "true" : "false");
+    }
+  }
+
+  function startHeroResizeObserver() {
+    stopHeroResizeObserver();
+    if (!heroBackNode || typeof ResizeObserver !== "function") {
+      return;
+    }
+    heroResizeObserver = new ResizeObserver(() => {
+      syncHeroFlipHeight();
+    });
+    heroResizeObserver.observe(heroBackNode);
+  }
+
+  function stopHeroResizeObserver() {
+    heroResizeObserver?.disconnect();
+    heroResizeObserver = null;
+  }
+
+  function startAccountsResizeObserver() {
+    stopAccountsResizeObserver();
+    if (!accountsBackNode || typeof ResizeObserver !== "function") {
+      return;
+    }
+    accountsResizeObserver = new ResizeObserver(() => {
+      syncAccountsFlipHeight();
+    });
+    accountsResizeObserver.observe(accountsBackNode);
+  }
+
+  function stopAccountsResizeObserver() {
+    accountsResizeObserver?.disconnect();
+    accountsResizeObserver = null;
+  }
+
+  function queueHeroFlipMeasure() {
+    requestAnimationFrame(() => {
+      syncHeroFlipHeight();
+      requestAnimationFrame(syncHeroFlipHeight);
+    });
+  }
+
+  function queueAccountsFlipMeasure() {
+    requestAnimationFrame(() => {
+      syncAccountsFlipHeight();
+      requestAnimationFrame(syncAccountsFlipHeight);
+    });
+  }
+
+  function syncHeroFlipHeight() {
+    if (!heroNode || !heroBackNode || !heroNode.classList.contains("is-flipped")) {
+      return;
+    }
+    const flip = heroNode.querySelector(".wallet-hero-flip");
+    const front = heroNode.querySelector(".wallet-hero-face-front");
+    if (!flip || !front) {
+      return;
+    }
+    const frontHeight = Math.ceil(front.getBoundingClientRect().height);
+    const backHeight = Math.ceil(heroBackNode.scrollHeight);
+    const target = Math.max(frontHeight, backHeight);
+    // CSS transitions min-height — mid-flow step changes ease too.
+    flip.style.minHeight = `${target}px`;
+  }
+
+  function syncAccountsFlipHeight() {
+    if (!accountsSectionNode || !accountsBackNode || !accountsSectionNode.classList.contains("is-flipped")) {
+      return;
+    }
+    const flip = accountsSectionNode.querySelector(".wallet-accounts-flip");
+    const front = accountsSectionNode.querySelector(".wallet-accounts-face-front");
+    if (!flip || !front) {
+      return;
+    }
+    const frontHeight = Math.ceil(front.getBoundingClientRect().height);
+    const backHeight = Math.ceil(accountsBackNode.scrollHeight);
+    flip.style.minHeight = `${Math.max(frontHeight, backHeight, 120)}px`;
+  }
+
+  function prefersReducedMotion() {
+    return Boolean(window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches);
+  }
+
   function closeModal() {
+    if (accountsFlowActive) {
+      accountsFlowActive = false;
+      hideAccountsBack();
+      return;
+    }
+    if (heroFlowActive) {
+      heroFlowActive = false;
+      hideHeroBack();
+      return;
+    }
     modalNode.hidden = true;
     modalBackdropNode.hidden = true;
   }
 
+  function flowHost() {
+    if (accountsFlowActive && accountsBackNode) {
+      return accountsBackNode;
+    }
+    if (heroFlowActive && heroBackNode) {
+      return heroBackNode;
+    }
+    return modalNode;
+  }
+
   function flowRow(title, subtitle, onClick) {
     const row = document.createElement("button");
     row.className = "wallet-flow-row";
@@ -67,6 +490,7 @@ export function createWalletFlows({ modalNode, modalBackdropNode, showStatus })
 
   return {
     closeModal,
+    flowHost,
     flowRow,
     flowStaticRow,
     modalButton,
diff --git a/capsules/wallet/browser/wallet-preferences.js b/capsules/wallet/browser/wallet-preferences.js
index ec266d0dc..1c2fba5a5 100644
--- a/capsules/wallet/browser/wallet-preferences.js
+++ b/capsules/wallet/browser/wallet-preferences.js
@@ -6,17 +6,20 @@ import {
   readStoredBoolean,
   readStoredValue,
   storeValue,
-} from "./wallet-format.js?v=wallet-20260523a";
+} from "./wallet-format.js?v=wallet-20260719w";
 import {
   actionButton,
   methodMark,
   textNode,
-} from "./wallet-render.js?v=wallet-20260523a";
+} from "./wallet-render.js?v=wallet-20260719w";
 
 export function createWalletPreferences({
+  closeModal,
   fetchJson,
   getHomeToken,
+  modalButton,
   notifyHomeSummaryChanged,
+  openFlowModal,
   renderAll,
   requestFreshPasskeyHomeToken,
   refreshWalletState,
@@ -24,22 +27,21 @@ export function createWalletPreferences({
   showStatus,
 }) {
   const privacyButton = document.querySelector("#wallet-privacy");
-  const privacySettingsButton = document.querySelector("#wallet-privacy-settings");
   const settingsDrawerNode = document.querySelector("#wallet-settings-drawer");
   const activityDrawerNode = document.querySelector("#wallet-activity-drawer");
   const drawerBackdropNode = document.querySelector("#wallet-drawer-backdrop");
-  const activityOpenButton = document.querySelector("#wallet-activity-open");
   const settingsOpenButton = document.querySelector("#wallet-settings-open");
   const methodsNode = document.querySelector("#wallet-methods");
 
   let privacyMode = readStoredBoolean("wallet.privacy");
-  let displayCurrency = readStoredValue(DISPLAY_CURRENCY_STORAGE_KEY, "btc", ["btc", "usd", "ela"]);
+  let displayCurrency = readStoredValue(DISPLAY_CURRENCY_STORAGE_KEY, "usd", ["btc", "usd", "ela"]);
   let activeDrawer = "";
+  let drawerCloseTimer = 0;
+  const DRAWER_MS = 320;
 
   function bindPreferenceEvents() {
     privacyButton?.addEventListener("click", onTogglePrivacy);
-    privacySettingsButton?.addEventListener("click", onTogglePrivacy);
-    activityOpenButton?.addEventListener("click", () => openDrawer("activity"));
+    // Activity click is bound in wallet.js — pending focuses hero; else history.
     settingsOpenButton?.addEventListener("click", () => openDrawer("settings"));
     drawerBackdropNode?.addEventListener("click", closeDrawers);
     document.querySelectorAll("[data-wallet-currency]").forEach((button) => {
@@ -51,67 +53,130 @@ export function createWalletPreferences({
     methodsNode?.addEventListener("click", onMethodClick);
   }
 
+  function prefersReducedMotion() {
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  }
+
+  function drawerFor(name) {
+    if (name === "settings") {
+      return settingsDrawerNode;
+    }
+    if (name === "activity") {
+      return activityDrawerNode;
+    }
+    return null;
+  }
+
   function renderMethods(accounts, approvalMethods = {}) {
     methodsNode.replaceChildren();
     const walletConnectConnected = namesForMethod(accounts, "wc");
     const walletConnectAvailable = approvalMethods.walletconnect?.available === true;
     const methods = [
-      { id: "passkey", label: "Built-in accounts", hint: "Passkey-controlled by this Wallet", connected: namesForMethod(accounts, "passkey") },
-      { id: "metamask", label: "MetaMask", hint: "External EVM signer", connected: namesForMethod(accounts, "metamask"), target: "wallet-metamask", addLabel: "Add account", openLabel: "Open" },
-      { id: "btc", label: "UniSat", hint: "External Bitcoin signer", connected: namesForMethod(accounts, "btc"), target: "wallet-unisat", addLabel: "Connect", openLabel: "Open" },
+      { id: "passkey", label: "Built-in accounts", hint: "Passkey-controlled · Wallet Send", connected: namesForMethod(accounts, "passkey") },
+      // Empty → Connect; already linked → Add account (sheet is link ceremony, not a manage UI).
+      { id: "metamask", label: "MetaMask", hint: "Link & approve in MetaMask", connected: namesForMethod(accounts, "metamask"), target: "wallet-metamask", addLabel: "Connect", openLabel: "Add account" },
+      { id: "btc", label: "UniSat", hint: "Link & approve in UniSat", connected: namesForMethod(accounts, "btc"), target: "wallet-unisat", addLabel: "Connect", openLabel: "Add account" },
       {
         id: "wc",
         label: "WalletConnect",
-        hint: walletConnectAvailable ? "External WalletConnect signer" : "Pinned WalletConnect config required",
+        hint: walletConnectAvailable ? "Link & approve via WalletConnect" : "Pinned WalletConnect config required",
         connected: walletConnectConnected,
         target: walletConnectAvailable ? "wallet-walletconnect" : "",
         addLabel: "Connect",
-        openLabel: "Open",
+        openLabel: "Add account",
       },
     ].filter((method) => method.id !== "wc" || walletConnectAvailable || method.connected.length > 0);
-    for (const method of methods) {
-      const row = document.createElement("article");
-      row.className = "wallet-method";
-      row.append(methodMark(method.id, METHOD_MONOGRAMS[method.id], true));
-      const body = document.createElement("div");
-      body.append(
-        textNode("strong", method.label),
-        textNode("span", method.connected.length > 0 ? method.connected.join(" · ") : method.hint),
-      );
-      row.append(body);
-      if (method.target) {
-        const label = method.connected.length > 0
-          ? method.openLabel || "Open"
-          : method.addLabel || "Add";
-        row.append(actionButton(label, "walletOpenMethod", method.target, true));
-      } else if (method.connected.length > 0 || method.id === "passkey") {
-        row.append(textNode("span", "linked", "wallet-method-chip"));
-      }
-      methodsNode.append(row);
-      for (const account of accounts.filter((item) => item.method === method.id)) {
-        methodsNode.append(methodAccountRow(account));
-      }
+
+    // One shared container per signer family: header + its accounts, then
+    // the next connector block (MetaMask / UniSat / WC) below.
+    const passkey = methods.find((method) => method.id === "passkey");
+    const connectors = methods.filter((method) => method.id !== "passkey");
+    if (passkey) {
+      methodsNode.append(methodGroup(
+        passkey,
+        accounts.filter((account) => account.method === "passkey"),
+      ));
+    }
+    for (const method of connectors) {
+      methodsNode.append(methodGroup(
+        method,
+        accounts.filter((account) => account.method === method.id),
+      ));
     }
   }
 
+  function methodGroup(method, methodAccounts) {
+    const group = document.createElement("section");
+    group.className = "wallet-method-group";
+    group.setAttribute("aria-label", method.label);
+    group.append(methodRow(method));
+    for (const account of methodAccounts) {
+      group.append(methodAccountRow(account));
+    }
+    return group;
+  }
+
+  function methodRow(method) {
+    const row = document.createElement("article");
+    row.className = "wallet-method wallet-method-head";
+    row.append(methodMark(method.id, METHOD_MONOGRAMS[method.id], true, ""));
+    const body = document.createElement("div");
+    // Built-in shows "Passkey (N)" so the signer kind is visible; connector
+    // rows stay "(N)" because the title already names MetaMask / UniSat / WC.
+    const subtitle = method.connected.length > 0
+      ? method.id === "passkey"
+        ? `Passkey (${method.connected.length})`
+        : `(${method.connected.length})`
+      : method.hint;
+    body.append(
+      textNode("strong", method.label),
+      textNode("span", subtitle),
+    );
+    row.append(body);
+    if (method.target) {
+      const label = method.connected.length > 0
+        ? method.openLabel || "Open"
+        : method.addLabel || "Add";
+      row.append(actionButton(label, "walletOpenMethod", method.target, true));
+    } else if (method.connected.length > 0 || method.id === "passkey") {
+      row.append(textNode("span", "linked", "wallet-method-chip"));
+    }
+    return row;
+  }
+
   function methodAccountRow(account) {
     const row = document.createElement("article");
     row.className = "wallet-method wallet-method-account";
-    const spacer = document.createElement("span");
-    spacer.className = "wallet-method-spacer";
+    // Same mark grammar as method rows — monogram from the account name so
+    // linked wallets align with MetaMask/UniSat instead of sitting blank.
+    const monogram = accountMonogram(account);
     const body = document.createElement("div");
     body.append(
       textNode("strong", account.name),
       textNode("span", `${account.network} · ${shortAddress(account.address)}`),
     );
-    row.append(spacer, body);
+    row.append(
+      methodMark(account.method || "unknown", monogram, true, account.chain_namespace),
+      body,
+    );
     const remove = actionButton("Remove", "walletRemoveAccount", account.account_id, true);
     remove.dataset.walletAccountName = account.name;
     row.append(remove);
     return row;
   }
 
-  async function onMethodClick(event) {
+  function accountMonogram(account) {
+    const fromName = String(account?.name || "")
+      .trim()
+      .charAt(0)
+      .toUpperCase();
+    if (fromName) {
+      return fromName;
+    }
+    return METHOD_MONOGRAMS[account?.method] || "?";
+  }
+
+  function onMethodClick(event) {
     const remove = event.target && event.target.closest("[data-wallet-remove-account]");
     if (!remove) {
       return;
@@ -121,9 +186,21 @@ export function createWalletPreferences({
       return;
     }
     const name = readStoredValueFromDataset(remove.dataset.walletAccountName) || "account";
-    if (!window.confirm(`Remove ${name} from this Wallet? Built-in accounts require their Wallet recovery key to restore later. Passkey confirmation is required.`)) {
-      return;
-    }
+    // In-window confirm sheet (same modal the flows use); the passkey prompt
+    // that follows remains the real authority gate.
+    openFlowModal(
+      `Remove ${name}?`,
+      "Built-in accounts require their Wallet recovery key to restore later. Passkey confirmation is required.",
+      [],
+      [
+        modalButton("Cancel", closeModal, true),
+        modalButton("Remove", () => removeAccount(remove, accountId, name), false, true),
+      ],
+    );
+  }
+
+  async function removeAccount(remove, accountId, name) {
+    closeModal();
     remove.disabled = true;
     try {
       const homeToken = await requestFreshPasskeyHomeToken();
@@ -147,17 +224,53 @@ export function createWalletPreferences({
   }
 
   function openDrawer(name) {
+    window.clearTimeout(drawerCloseTimer);
+    const next = drawerFor(name);
+    if (!next) {
+      return;
+    }
+    // Swap drawers without animating the previous closed mid-flight.
+    for (const node of [settingsDrawerNode, activityDrawerNode]) {
+      if (node && node !== next) {
+        node.classList.remove("is-open");
+        node.hidden = true;
+      }
+    }
     activeDrawer = name;
-    settingsDrawerNode.hidden = name !== "settings";
-    activityDrawerNode.hidden = name !== "activity";
-    drawerBackdropNode.hidden = false;
+    next.hidden = false;
+    if (drawerBackdropNode) {
+      drawerBackdropNode.hidden = false;
+    }
+    // Force layout so the closed transform is painted before we open —
+    // otherwise some engines skip the enter transition.
+    void next.offsetWidth;
+    void drawerBackdropNode?.offsetWidth;
+    next.classList.add("is-open");
+    drawerBackdropNode?.classList.add("is-open");
   }
 
   function closeDrawers() {
+    window.clearTimeout(drawerCloseTimer);
     activeDrawer = "";
-    settingsDrawerNode.hidden = true;
-    activityDrawerNode.hidden = true;
-    drawerBackdropNode.hidden = true;
+    settingsDrawerNode?.classList.remove("is-open");
+    activityDrawerNode?.classList.remove("is-open");
+    drawerBackdropNode?.classList.remove("is-open");
+    const finish = () => {
+      if (settingsDrawerNode) {
+        settingsDrawerNode.hidden = true;
+      }
+      if (activityDrawerNode) {
+        activityDrawerNode.hidden = true;
+      }
+      if (drawerBackdropNode) {
+        drawerBackdropNode.hidden = true;
+      }
+    };
+    if (prefersReducedMotion()) {
+      finish();
+      return;
+    }
+    drawerCloseTimer = window.setTimeout(finish, DRAWER_MS);
   }
 
   function onTogglePrivacy() {
@@ -185,26 +298,45 @@ export function createWalletPreferences({
 
   function applyPrivacyState() {
     const label = privacyMode ? "Show balances" : "Hide balances";
+    const short = privacyMode ? "Show" : "Hide";
+    // Window nav: eye + Show/Hide. Rail stays icon-only in Home chrome.
+    const eyeSvg = privacyMode
+      ? '<svg class="wallet-nav-icon-svg" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M2.25 2.25l11.5 11.5" /><path d="M6.6 6.7A1.75 1.75 0 0 0 9.3 9.4" /><path d="M4.2 4.55C2.85 5.55 1.75 8 1.75 8s2.5 3.75 6.25 3.75c1.05 0 2-.3 2.8-.75" /><path d="M7.1 4.35c.3-.05.6-.1.9-.1 3.75 0 6.25 3.75 6.25 3.75a12.4 12.4 0 0 1-1.55 1.7" /></svg>'
+      : '<svg class="wallet-nav-icon-svg" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M1.75 8s2.5-3.75 6.25-3.75S14.25 8 14.25 8s-2.5 3.75-6.25 3.75S1.75 8 1.75 8Z" /><circle cx="8" cy="8" r="1.75" /></svg>';
     if (privacyButton) {
-      privacyButton.textContent = privacyMode ? "◉" : "◌";
+      privacyButton.innerHTML = `${eyeSvg}<span>${short}</span>`;
       privacyButton.setAttribute("aria-label", label);
       privacyButton.setAttribute("aria-pressed", privacyMode ? "true" : "false");
+      privacyButton.title = label;
+      privacyButton.classList.toggle("is-active", privacyMode);
     }
-    if (privacySettingsButton) {
-      privacySettingsButton.textContent = label;
+    if (window.parent !== window) {
+      window.parent.postMessage(
+        {
+          type: "wallet:privacy-state",
+          privacyMode,
+        },
+        window.location.origin,
+      );
     }
   }
 
+  function togglePrivacy() {
+    onTogglePrivacy();
+  }
+
   function openApprovalMethod(target) {
     const activeHomeToken = getHomeToken();
     if (!target || !activeHomeToken || window.parent === window) {
       return;
     }
     closeDrawers();
+    // Ask Home for the in-rail ceremony sheet — not a second desktop window.
     window.parent.postMessage({
       type: "home:open-target",
       target,
       homeToken: activeHomeToken,
+      query: { presentation: "sheet" },
     }, window.location.origin);
   }
 
@@ -218,5 +350,6 @@ export function createWalletPreferences({
     openApprovalMethod,
     openDrawer,
     renderMethods,
+    togglePrivacy,
   };
 }
diff --git a/capsules/wallet/browser/wallet-receive-flow.js b/capsules/wallet/browser/wallet-receive-flow.js
index 63648ec62..cb4004f61 100644
--- a/capsules/wallet/browser/wallet-receive-flow.js
+++ b/capsules/wallet/browser/wallet-receive-flow.js
@@ -1,19 +1,21 @@
+import { copyIconButton, textNode as defaultTextNode } from "./wallet-render.js?v=wallet-20260719w";
+
 export function createWalletReceiveFlow({
   buildViewAccounts,
   closeModal,
-  copyButton,
   fetchJson,
   flowRow,
   modalButton,
   onQrReady = () => {},
   openFlowModal,
-  openInfoModal,
   selectedOrDefaultAccount,
   shellHeaders,
-  textNode,
+  textNode = defaultTextNode,
 }) {
   const accountQrCache = new Map();
   const accountQrPending = new Set();
+  const heroSurface = { surface: "hero" };
+  const receiveAddressSurface = { surface: "hero", headerInline: true };
 
   function qrForAccount(account) {
     return accountQrCache.get(account.address) || "";
@@ -50,7 +52,19 @@ export function createWalletReceiveFlow({
   function openReceiveFlow() {
     const accounts = selectedOrAllAccounts();
     if (accounts.length === 0) {
-      openInfoModal("Receive", "Create an account before receiving funds.");
+      openFlowModal(
+        "Receive",
+        "Create an account before receiving funds.",
+        [
+          textNode(
+            "p",
+            "Create or import a Wallet account from Accounts, then come back here for a QR.",
+            "wallet-flow-hint",
+          ),
+        ],
+        [modalButton("Done", closeModal)],
+        heroSurface,
+      );
       return;
     }
     if (accounts.length === 1) {
@@ -63,33 +77,63 @@ export function createWalletReceiveFlow({
       accounts.map((account) =>
         flowRow(account.name, account.network, () => renderReceiveAddress(account)),
       ),
+      undefined,
+      heroSurface,
     );
   }
 
   async function renderReceiveAddress(account) {
-    openFlowModal("Receive", account.name, [
-      textNode("p", "Preparing QR.", "wallet-state"),
-    ]);
+    openFlowModal(
+      "Receive",
+      account.name,
+      [textNode("p", "Preparing QR.", "wallet-state")],
+      [modalButton("Done", closeModal)],
+      receiveAddressSurface,
+    );
     try {
       await loadAccountQr(account);
-      const qrBox = document.createElement("div");
-      qrBox.className = "wallet-qr";
-      qrBox.innerHTML = qrForAccount(account);
-      const address = textNode("div", account.address, "wallet-qr-address");
+      const svg = qrForAccount(account);
+      const row = document.createElement("div");
+      row.className = "wallet-receive-compact";
+      const meta = document.createElement("div");
+      meta.className = "wallet-receive-meta";
+      const addressRow = document.createElement("div");
+      addressRow.className = "wallet-receive-address-row";
+      const address = textNode("code", account.address, "wallet-receive-address");
+      address.title = account.address;
+      addressRow.append(address, copyIconButton(account.address));
       const warningText = account.chain_namespace?.startsWith("eip155:")
-        ? "This EVM address can receive assets on supported EVM networks. Always choose the correct chain in the sending wallet."
-        : `Send only ${account.network} assets to this address. Other assets may be lost.`;
-      const warning = textNode(
-        "p",
-        warningText,
-        "wallet-flow-hint",
+        ? "EVM address — send only on a supported network."
+        : `Only ${account.network} assets.`;
+      meta.append(addressRow, textNode("p", warningText, "wallet-flow-hint"));
+
+      if (svg) {
+        const qrBox = document.createElement("div");
+        qrBox.className = "wallet-qr";
+        qrBox.innerHTML = svg;
+        qrBox.setAttribute("aria-label", `QR code for ${account.name}`);
+        row.append(qrBox, meta);
+      } else {
+        const unavailable = textNode("p", "QR unavailable", "wallet-qr-unavailable");
+        unavailable.setAttribute("role", "status");
+        row.append(unavailable, meta);
+      }
+
+      openFlowModal(
+        "Receive",
+        account.name,
+        [row],
+        [modalButton("Done", closeModal)],
+        receiveAddressSurface,
       );
-      const copy = copyButton(account.address);
-      openFlowModal("Receive", account.name, [qrBox, address, copy, warning], [
-        modalButton("Done", closeModal),
-      ]);
     } catch (error) {
-      openInfoModal("Receive", String(error.message || error));
+      openFlowModal(
+        "Receive",
+        String(error.message || error),
+        [],
+        [modalButton("Done", closeModal)],
+        heroSurface,
+      );
     }
   }
 
diff --git a/capsules/wallet/browser/wallet-render.js b/capsules/wallet/browser/wallet-render.js
index 634c2eadc..29143d9ec 100644
--- a/capsules/wallet/browser/wallet-render.js
+++ b/capsules/wallet/browser/wallet-render.js
@@ -3,17 +3,44 @@ import {
   assetColor,
   formatAmount,
   shortAddress,
-} from "./wallet-format.js?v=wallet-20260523a";
+} from "./wallet-format.js?v=wallet-20260719w";
+
+const METHOD_ICON_SRC = Object.freeze({
+  metamask: "./icons/metamask.png",
+  btc: "./icons/unisat.png",
+  ethereum: "./icons/ethereum.png",
+  bitcoin: "./icons/bitcoin.png",
+  passkey: "./icons/passkey.png",
+});
 
 export function createWalletRender({ statusNode }) {
-  function showStatus(message, tone) {
+  let statusClearTimer = 0;
+
+  function showStatus(message, tone = "muted") {
     if (!statusNode) {
       return;
     }
+    if (statusClearTimer) {
+      window.clearTimeout(statusClearTimer);
+      statusClearTimer = 0;
+    }
     const text = typeof message === "string" ? message.trim() : "";
     statusNode.hidden = text.length === 0;
     statusNode.textContent = text;
     statusNode.dataset.tone = tone || "muted";
+    if (!text) {
+      return;
+    }
+    // Brief confirmations shouldn't pin the hero open; errors linger longer.
+    const dismissMs = tone === "error" ? 8000 : tone === "success" ? 3200 : 4000;
+    statusClearTimer = window.setTimeout(() => {
+      if (statusNode.textContent === text) {
+        statusNode.hidden = true;
+        statusNode.textContent = "";
+        delete statusNode.dataset.tone;
+      }
+      statusClearTimer = 0;
+    }, dismissMs);
   }
 
   return {
@@ -40,13 +67,22 @@ export function accountCard(account, displayedAccountId = "", { privacyMode, pri
 
   const top = document.createElement("div");
   top.className = "wallet-account-top";
+  const identity = document.createElement("div");
+  identity.className = "wallet-account-identity";
   const title = document.createElement("div");
   title.className = "wallet-card-title";
   title.append(
     textNode("strong", account.name, "wallet-card-name"),
     textNode("span", shortAddress(account.address), "wallet-card-address"),
   );
-  top.append(methodMark(account.method, account.monogram), title);
+  identity.append(
+    methodMark(account.method, account.monogram, false, account.chain_namespace),
+    title,
+  );
+
+  const balance = document.createElement("div");
+  balance.className = "wallet-card-balance";
+  balance.textContent = privacyMode ? "••••••" : accountDisplayBalance(account, prices, displayCurrency);
 
   const more = document.createElement("button");
   more.className = "wallet-more-button";
@@ -54,23 +90,17 @@ export function accountCard(account, displayedAccountId = "", { privacyMode, pri
   more.textContent = "⋯";
   more.dataset.walletAccountMenu = account.account_id;
   more.setAttribute("aria-label", `Account actions for ${account.name}`);
-  top.append(more);
 
-  const balance = document.createElement("div");
-  balance.className = "wallet-card-balance";
-  balance.textContent = privacyMode ? "••••••" : accountDisplayBalance(account, prices, displayCurrency);
-
-  const network = document.createElement("div");
-  network.className = "wallet-account-network";
-  network.textContent = account.network;
+  top.append(identity, balance, more);
 
-  const footer = document.createElement("div");
-  footer.className = "wallet-card-footer";
+  const meta = document.createElement("div");
+  meta.className = "wallet-account-meta";
+  meta.append(textNode("span", account.network, "wallet-account-network"));
   for (const asset of account.assets.slice(0, 3)) {
-    footer.append(assetChip(asset));
+    meta.append(assetChip(asset));
   }
 
-  card.append(top, balance, network, footer);
+  card.append(top, meta);
   return card;
 }
 
@@ -78,7 +108,7 @@ export function emptyHero() {
   const empty = document.createElement("div");
   empty.className = "wallet-empty";
   empty.innerHTML = `
-    <p class="wallet-state">No accounts yet. Create an EVM or Bitcoin account from Accounts, or import a Wallet key.</p>
+    <p class="wallet-state">No accounts yet. Create a built-in account, or connect MetaMask / UniSat below.</p>
   `;
   return empty;
 }
@@ -98,14 +128,62 @@ export function assetGlyph(symbol) {
   return glyph;
 }
 
-export function methodMark(method, monogram, large = false) {
+export function methodMarkIconSrc(method, chainNamespace = "") {
+  if (method === "metamask") {
+    return METHOD_ICON_SRC.metamask;
+  }
+  if (method === "btc") {
+    return METHOD_ICON_SRC.btc;
+  }
+  if (method === "passkey") {
+    const namespace = String(chainNamespace || "");
+    if (namespace.startsWith("eip155:")) {
+      return METHOD_ICON_SRC.ethereum;
+    }
+    if (namespace.startsWith("bip122:")) {
+      return METHOD_ICON_SRC.bitcoin;
+    }
+    // Built-in accounts header / passkey without a chain → passkey mark.
+    return METHOD_ICON_SRC.passkey;
+  }
+  return "";
+}
+
+export function methodMark(method, monogram, large = false, chainNamespace = "") {
   const mark = document.createElement("span");
-  mark.className = `wallet-method-mark wallet-method-${method}${large ? " wallet-method-mark-large" : ""}`;
-  mark.textContent = monogram || "?";
+  const iconSrc = methodMarkIconSrc(method, chainNamespace);
+  const markKind = iconSrc
+    ? method === "passkey" && String(chainNamespace).startsWith("bip122:")
+      ? "bitcoin"
+      : method === "passkey" && String(chainNamespace).startsWith("eip155:")
+        ? "ethereum"
+        : method
+    : method;
+  mark.className = [
+    "wallet-method-mark",
+    `wallet-method-${markKind}`,
+    large ? "wallet-method-mark-large" : "",
+    iconSrc ? "wallet-method-mark-icon" : "",
+  ].filter(Boolean).join(" ");
   mark.setAttribute("aria-hidden", "true");
+  if (iconSrc) {
+    const img = document.createElement("img");
+    img.src = iconSrc;
+    img.alt = "";
+    img.draggable = false;
+    mark.append(img);
+  } else {
+    mark.textContent = monogram || "?";
+  }
   return mark;
 }
 
+export const COPY_ICON_SVG =
+  '<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><rect x="5.5" y="5.5" width="8" height="8" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M3.5 10.5V3.5A1 1 0 0 1 4.5 2.5h7" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>';
+
+export const CHECK_ICON_SVG =
+  '<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M3.25 8.25l3 3 6.5-6.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+
 export function copyButton(value) {
   const button = document.createElement("button");
   button.className = "wallet-copy-button";
@@ -115,10 +193,36 @@ export function copyButton(value) {
   return button;
 }
 
+export function copyIconButton(address, ariaLabel = "Copy address") {
+  const copy = document.createElement("button");
+  copy.className = "wallet-copy-icon";
+  copy.type = "button";
+  copy.setAttribute("aria-label", ariaLabel);
+  copy.title = "Copy address";
+  copy.dataset.walletCopyAddress = address;
+  copy.innerHTML = COPY_ICON_SVG;
+  return copy;
+}
+
 export function pulseCopied(button) {
+  button.classList.add("is-copied");
+  if (button.classList.contains("wallet-copy-icon")) {
+    const previousLabel = button.getAttribute("aria-label") || "Copy address";
+    const previousTitle = button.title || "Copy address";
+    const previousHtml = button.innerHTML;
+    button.innerHTML = CHECK_ICON_SVG;
+    button.setAttribute("aria-label", "Copied");
+    button.title = "Copied";
+    window.setTimeout(() => {
+      button.classList.remove("is-copied");
+      button.innerHTML = previousHtml || COPY_ICON_SVG;
+      button.setAttribute("aria-label", previousLabel);
+      button.title = previousTitle;
+    }, 1200);
+    return;
+  }
   const previous = button.textContent;
   button.textContent = "Copied";
-  button.classList.add("is-copied");
   window.setTimeout(() => {
     button.textContent = previous;
     button.classList.remove("is-copied");
diff --git a/capsules/wallet/browser/wallet-requests.js b/capsules/wallet/browser/wallet-requests.js
index 892f56eee..ef2e9eaa5 100644
--- a/capsules/wallet/browser/wallet-requests.js
+++ b/capsules/wallet/browser/wallet-requests.js
@@ -1,4 +1,4 @@
-import { pendingRequests } from "./wallet-activity.js?v=wallet-20260523a";
+import { pendingRequests } from "./wallet-activity.js?v=wallet-20260719w";
 import {
   isBitcoinProofRequest,
   isManagedRequest,
@@ -6,8 +6,8 @@ import {
   requestTiming,
   requestTitle,
   shortAddress,
-} from "./wallet-format.js?v=wallet-20260523a";
-import { actionButton, setBusy, textNode } from "./wallet-render.js?v=wallet-20260523a";
+} from "./wallet-format.js?v=wallet-20260719w";
+import { actionButton, setBusy, textNode } from "./wallet-render.js?v=wallet-20260719w";
 
 export function createWalletRequests({
   fetchJson,
@@ -16,15 +16,21 @@ export function createWalletRequests({
   requestFreshPasskeyHomeToken,
   refreshWalletState,
   requestsNode,
-  requestsPanelNode,
   shellHeaders,
   showStatus,
 }) {
   function renderRequests(requests, focusRequestId = "") {
+    if (!requestsNode) {
+      return false;
+    }
     requestsNode.replaceChildren();
-    requestsPanelNode.hidden = requests.length === 0;
+    const pending = pendingRequests(requests);
+    requestsNode.hidden = pending.length === 0;
+    if (pending.length === 0) {
+      return false;
+    }
     let focused = null;
-    for (const request of requests) {
+    for (const request of pending) {
       const card = requestCard(request, readText(request.request_id) === focusRequestId);
       if (readText(request.request_id) === focusRequestId) {
         focused = card;
@@ -32,7 +38,7 @@ export function createWalletRequests({
       requestsNode.append(card);
     }
     if (focused) {
-      window.setTimeout(() => focused.scrollIntoView({ behavior: "smooth", block: "center" }), 0);
+      window.setTimeout(() => focused.scrollIntoView({ behavior: "smooth", block: "nearest" }), 0);
     }
     return Boolean(focused);
   }
@@ -40,7 +46,7 @@ export function createWalletRequests({
   function requestCard(request, focused = false) {
     const requestId = readText(request.request_id);
     const card = document.createElement("article");
-    card.className = "wallet-request";
+    card.className = "wallet-request wallet-hero-request";
     card.classList.toggle("wallet-request-focused", focused);
     card.dataset.walletRequestId = requestId;
     const main = document.createElement("div");
@@ -48,7 +54,7 @@ export function createWalletRequests({
     main.append(
       textNode("strong", requestTitle(request)),
       textNode("span", `${readText(request.capsule_id) || "Capsule"} · ${shortAddress(request.address)}`),
-      textNode("small", readText(request.reason) || "Approval requested."),
+      textNode("small", readText(request.reason) || "Approve only what you recognize."),
       textNode("small", requestTiming(request), "wallet-request-time"),
     );
     card.append(main);
@@ -58,10 +64,14 @@ export function createWalletRequests({
     const connectorId = readText(request.connector_id);
     if (isManagedRequest(request)) {
       actions.append(actionButton("Approve", "walletRequestManagedApprove", requestId));
-    } else if (isBitcoinProofRequest(request)) {
+    } else if (isBitcoinProofRequest(request) || connectorId === "wallet-unisat") {
       actions.append(actionButton("Open UniSat", "walletOpenMethod", "wallet-unisat"));
     } else if (connectorId === "wallet-metamask") {
       actions.append(actionButton("Open MetaMask", "walletOpenMethod", connectorId));
+    } else if (connectorId === "wallet-walletconnect") {
+      actions.append(actionButton("Open WalletConnect", "walletOpenMethod", connectorId));
+    } else if (connectorId) {
+      actions.append(actionButton("Open signer", "walletOpenMethod", connectorId));
     }
     actions.append(actionButton("Reject", "walletRequestReject", requestId, true));
     card.append(actions);
@@ -69,7 +79,16 @@ export function createWalletRequests({
   }
 
   function openPendingReview() {
-    requestsPanelNode?.scrollIntoView({ behavior: "smooth", block: "start" });
+    if (!requestsNode || requestsNode.hidden) {
+      return;
+    }
+    requestsNode.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    const focusTarget =
+      requestsNode.querySelector(".wallet-request-focused button, .wallet-request-focused")
+      || requestsNode.querySelector(".wallet-request button, .wallet-request");
+    if (focusTarget && typeof focusTarget.focus === "function") {
+      window.requestAnimationFrame(() => focusTarget.focus({ preventScroll: true }));
+    }
   }
 
   async function onRequestClick(event) {
diff --git a/capsules/wallet/browser/wallet-send-flow.js b/capsules/wallet/browser/wallet-send-flow.js
index 8a74398e0..4d16b4fe0 100644
--- a/capsules/wallet/browser/wallet-send-flow.js
+++ b/capsules/wallet/browser/wallet-send-flow.js
@@ -43,24 +43,18 @@ export function createWalletSendFlow({
           ),
         ],
         [modalButton("Done", closeModal)],
+        { surface: "hero" },
       );
       return;
     }
     if (sendableAccounts.length === 0) {
-      const rows = accounts.length
-        ? accounts.map((account) =>
-            flowStaticRow(account.name, sendAccountStatusMessage(account)),
-          )
-        : [
-            textNode(
-              "p",
-              "Create a passkey-managed EVM account before sending on an EVM chain.",
-              "wallet-flow-hint",
-            ),
-          ];
-      openFlowModal("Send", "No signing account available", rows, [
-        modalButton("Done", closeModal),
-      ]);
+      openFlowModal(
+        "Send",
+        "Wallet Send needs a built-in passkey account. MetaMask-linked accounts can Receive and approve here — send from MetaMask, or create a built-in account.",
+        [],
+        [modalButton("Done", closeModal)],
+        { surface: "hero" },
+      );
       return;
     }
     const fundedSendableAccounts = sendableAccounts.filter((account) => account.assets.length > 0);
@@ -94,7 +88,7 @@ export function createWalletSendFlow({
         ),
       ),
     );
-    openFlowModal("Send", "Choose a signing account", rows);
+    openFlowModal("Send", "Choose a signing account", rows, undefined, { surface: "hero" });
   }
 
   function renderSendAssetStep(account) {
@@ -110,6 +104,7 @@ export function createWalletSendFlow({
           ),
         ],
         [modalButton("Back", openSendFlow, true), modalButton("Done", closeModal)],
+        { surface: "hero" },
       );
       return;
     }
@@ -123,6 +118,8 @@ export function createWalletSendFlow({
           () => renderSendForm(account, asset),
         ),
       ),
+      undefined,
+      { surface: "hero" },
     );
   }
 
@@ -151,6 +148,7 @@ export function createWalletSendFlow({
       `${account.name} · ${asset.symbol}`,
       [form],
       [modalButton("Cancel", closeModal, true), next],
+      { surface: "hero" },
     );
   }
 
@@ -179,24 +177,30 @@ export function createWalletSendFlow({
       sendTransactionFromReview(account, amount, to, button),
     );
     sign.disabled = Boolean(unavailableReason);
-    openFlowModal("Review send", "Confirm details", rows, [
-      modalButton("Back", () => renderSendForm(account, asset), true),
-      sign,
-    ]);
+    openFlowModal(
+      "Review send",
+      "Confirm details",
+      rows,
+      [
+        modalButton("Back", () => renderSendForm(account, asset), true),
+        sign,
+      ],
+      { surface: "hero" },
+    );
   }
 
   function sendUnavailableReason(account) {
     if (canSendFromAccount(account)) {
       return "";
     }
+    if (!isPasskeyManagedAccount(account)) {
+      return "External signer — send from MetaMask/UniSat, or create a built-in account for Wallet Send.";
+    }
     if (!account.chain_namespace || !account.chain_namespace.startsWith("eip155:")) {
-      return "Wallet send currently supports passkey-managed EVM accounts through supported chain providers.";
+      return "Wallet Send currently supports passkey-managed EVM accounts.";
     }
     if (!["eip155:20", "eip155:8453"].includes(account.chain_namespace)) {
-      return "This EVM network is not enabled by the chain-provider yet.";
-    }
-    if (!isPasskeyManagedAccount(account)) {
-      return "Open the approval method for this account to send.";
+      return "This EVM network is not enabled for Wallet Send yet.";
     }
     if (account.signing_status === "managed_key_missing") {
       return "This built-in account is missing its local signing key. Import this account's Wallet recovery key or create a new account.";
diff --git a/capsules/wallet/browser/wallet-state.js b/capsules/wallet/browser/wallet-state.js
index e7b37cea1..07ed04f78 100644
--- a/capsules/wallet/browser/wallet-state.js
+++ b/capsules/wallet/browser/wallet-state.js
@@ -3,7 +3,7 @@ import {
   parseBalanceValue,
   readText,
   unitsToNumber,
-} from "./wallet-format.js?v=wallet-20260523a";
+} from "./wallet-format.js?v=wallet-20260719w";
 
 export function createWalletStateLoader({ fetchJson, shellHeaders }) {
   async function loadPrices() {
diff --git a/capsules/wallet/browser/wallet.js b/capsules/wallet/browser/wallet.js
index 9071c2898..0d7527e82 100644
--- a/capsules/wallet/browser/wallet.js
+++ b/capsules/wallet/browser/wallet.js
@@ -1,6 +1,6 @@
-import { createWalletActivity } from "./wallet-activity.js?v=wallet-20260523a";
-import { createWalletApi, readQueryParam } from "./wallet-api.js?v=wallet-20260523a";
-import { createWalletAccountActions } from "./wallet-account-actions.js?v=wallet-20260523a";
+import { createWalletActivity } from "./wallet-activity.js?v=wallet-20260719w";
+import { createWalletApi, readQueryParam } from "./wallet-api.js?v=wallet-20260719w";
+import { createWalletAccountActions } from "./wallet-account-actions.js?v=wallet-20260719w";
 import {
   BALANCE_NETWORKS,
   MANAGED_CHAIN_NAMESPACES,
@@ -9,7 +9,6 @@ import {
   accountDisplayBalance,
   accountName,
   chainLabel,
-  cssEscape,
   delta24h,
   formatAmount,
   formatMoney,
@@ -19,27 +18,28 @@ import {
   readText,
   shortAddress,
   validateAddress,
-} from "./wallet-format.js?v=wallet-20260523a";
-import { createWalletFlows } from "./wallet-flows.js?v=wallet-20260523a";
-import { createWalletCreateAccountFlow } from "./wallet-create-account-flow.js?v=wallet-20260523a";
-import { createWalletReceiveFlow } from "./wallet-receive-flow.js?v=wallet-20260523a";
-import { createWalletRequests } from "./wallet-requests.js?v=wallet-20260523a";
-import { createWalletSendFlow } from "./wallet-send-flow.js?v=wallet-20260523a";
-import { createWalletStateLoader } from "./wallet-state.js?v=wallet-20260523a";
-import { createWalletPreferences } from "./wallet-preferences.js?v=wallet-20260522a";
+} from "./wallet-format.js?v=wallet-20260719w";
+import { createWalletFlows } from "./wallet-flows.js?v=wallet-20260719w";
+import { createWalletCreateAccountFlow } from "./wallet-create-account-flow.js?v=wallet-20260719w";
+import { createWalletReceiveFlow } from "./wallet-receive-flow.js?v=wallet-20260719w";
+import { createWalletRequests } from "./wallet-requests.js?v=wallet-20260719w";
+import { createWalletSendFlow } from "./wallet-send-flow.js?v=wallet-20260719w";
+import { createWalletStateLoader } from "./wallet-state.js?v=wallet-20260719w";
+import { createWalletPreferences } from "./wallet-preferences.js?v=wallet-20260719w";
 import {
   accountCard,
   copyButton,
+  copyIconButton,
   createWalletRender,
   emptyHero,
+  methodMark,
   setBusy,
   textNode,
-} from "./wallet-render.js?v=wallet-20260523a";
+} from "./wallet-render.js?v=wallet-20260719w";
 
 const statusNode = document.querySelector("#wallet-status");
 const accountsNode = document.querySelector("#wallet-accounts");
-const requestsNode = document.querySelector("#wallet-requests");
-const requestsPanelNode = document.querySelector("#wallet-requests-panel");
+const requestsNode = document.querySelector("#wallet-hero-pending");
 const stateNode = document.querySelector("#wallet-account-state");
 const accountActionsNode = document.querySelector(".wallet-section-actions");
 const balanceStateNode = document.querySelector("#wallet-balance-state");
@@ -48,7 +48,14 @@ const deltaNode = document.querySelector("#wallet-delta");
 const deltaValueNode = document.querySelector("#wallet-delta-value");
 const sendButton = document.querySelector("#wallet-send");
 const receiveButton = document.querySelector("#wallet-receive");
+const getStartedNode = document.querySelector("#wallet-get-started");
+const connectCtaButton = document.querySelector("#wallet-connect-cta");
+const signersSection = document.querySelector("#wallet-signers");
 const accountDetailNode = document.querySelector("#wallet-account-detail");
+const heroNode = document.querySelector(".wallet-hero");
+const heroBackNode = document.querySelector("#wallet-hero-back");
+const accountsSectionNode = document.querySelector(".wallet-accounts-section");
+const accountsBackNode = document.querySelector("#wallet-accounts-back");
 const modalBackdropNode = document.querySelector("#wallet-modal-backdrop");
 const modalNode = document.querySelector("#wallet-modal");
 const activityNode = document.querySelector("#wallet-activity");
@@ -71,13 +78,21 @@ const { fetchJson, notifyHomeSummaryChanged, requestFreshPasskeyHomeToken, shell
 const { showStatus } = createWalletRender({ statusNode });
 const {
   closeModal,
+  flowHost,
   flowRow,
   flowStaticRow,
   modalButton,
   openFlowModal,
   openInfoModal,
-} = createWalletFlows({ modalNode, modalBackdropNode, showStatus });
-const { renderActivity } = createWalletActivity({ activityNode, textNode });
+} = createWalletFlows({
+  modalNode,
+  modalBackdropNode,
+  heroNode,
+  heroBackNode,
+  accountsSectionNode,
+  accountsBackNode,
+  showStatus,
+});
 const { loadBalanceRows, loadPrices } = createWalletStateLoader({ fetchJson, shellHeaders });
 const {
   applyCurrencySelection,
@@ -87,11 +102,16 @@ const {
   getDisplayCurrency,
   getPrivacyMode,
   openApprovalMethod,
+  openDrawer,
   renderMethods,
+  togglePrivacy,
 } = createWalletPreferences({
+  closeModal,
   fetchJson,
   getHomeToken: () => activeHomeToken,
+  modalButton,
   notifyHomeSummaryChanged,
+  openFlowModal,
   renderAll,
   requestFreshPasskeyHomeToken,
   refreshWalletState,
@@ -100,6 +120,7 @@ const {
 });
 const {
   onRequestClick,
+  openPendingReview,
   pendingWalletRequests,
   renderRequests,
 } = createWalletRequests({
@@ -109,25 +130,23 @@ const {
   requestFreshPasskeyHomeToken,
   refreshWalletState,
   requestsNode,
-  requestsPanelNode,
   shellHeaders,
   showStatus,
 });
+const { renderActivity } = createWalletActivity({
+  activityNode,
+  textNode,
+});
 const {
-  loadAccountQr,
   openReceiveFlow,
-  qrForAccount,
   renderReceiveAddress,
 } = createWalletReceiveFlow({
   buildViewAccounts,
   closeModal,
-  copyButton,
   fetchJson,
   flowRow,
   modalButton,
-  onQrReady: updateAccountQr,
   openFlowModal,
-  openInfoModal,
   selectedOrDefaultAccount,
   shellHeaders,
   textNode,
@@ -137,9 +156,9 @@ const { onCreateManagedWallet, openCreateAccountFlow, openImportRecoveryKeyFlow
   buildViewAccounts,
   closeModal,
   fetchJson,
+  flowHost,
   flowRow,
   modalButton,
-  modalNode,
   nextAccountName,
   notifyHomeSummaryChanged,
   openFlowModal,
@@ -187,11 +206,11 @@ const { onAccountClick, onDocumentClick } = createWalletAccountActions({
   closeModal,
   copyText,
   fetchJson,
+  flowHost,
   flowRow,
   flowStaticRow,
   getSelectedAccountId: () => selectedAccountId,
   modalButton,
-  modalNode,
   notifyHomeSummaryChanged,
   openAccountDetail,
   openApprovalMethod,
@@ -214,20 +233,150 @@ function boot() {
   document.addEventListener("click", onWalletActionClick);
   sendButton?.addEventListener("click", openSendFlow);
   receiveButton?.addEventListener("click", openReceiveFlow);
+  connectCtaButton?.addEventListener("click", focusSignersSection);
   modalBackdropNode?.addEventListener("click", closeModal);
   document.addEventListener("click", onDocumentClick);
   document.addEventListener("keydown", (event) => {
-    if (event.key === "Escape") {
-      closeModal();
-      closeDrawers();
+    if (event.key !== "Escape") {
+      return;
+    }
+    const settingsDrawer = document.querySelector("#wallet-settings-drawer");
+    const activityDrawer = document.querySelector("#wallet-activity-drawer");
+    const hadOverlay = Boolean(
+      (modalNode && !modalNode.hidden)
+        || (settingsDrawer && !settingsDrawer.hidden)
+        || (activityDrawer && !activityDrawer.hidden)
+        || heroNode?.classList.contains("is-flipped")
+        || accountsSectionNode?.classList.contains("is-flipped"),
+    );
+    closeModal();
+    closeDrawers();
+    // Escape clears selection only when nothing was open — don't yank the
+    // hero account while dismissing Send/Receive or a drawer.
+    if (!hadOverlay) {
       clearAccountSelection();
     }
   });
   bindPreferenceEvents();
+  document.querySelector("#wallet-activity-open")?.addEventListener("click", openActivityChrome);
+  applyRailPresentationChrome();
   window.addEventListener("message", onRuntimeEvents);
+  window.addEventListener("message", onWalletRefreshMessage);
+  window.addEventListener("message", onShellMenuCommand);
+  window.addEventListener("message", onWalletChromeCommand);
+  announceShellMenuManifest();
   refreshWalletState().catch((error) => showStatus(String(error.message || error), "error"));
 }
 
+function applyRailPresentationChrome() {
+  // Rail: 3D card flip + Home owns nav chrome. Window: in-place morph (no flip).
+  const presentation = readQueryParam("presentation") === "rail" ? "rail" : "window";
+  document.documentElement.dataset.walletPresentation = presentation;
+  if (presentation === "rail") {
+    document.querySelector(".wallet-hero-nav")?.setAttribute("hidden", "");
+  }
+}
+
+function openActivityChrome() {
+  // Badge counts pending under Send/Receive — open that when any exist;
+  // otherwise show history in the Activity drawer.
+  const pending = pendingWalletRequests(currentRequests);
+  if (pending.length > 0) {
+    closeDrawers();
+    openPendingReview();
+    return;
+  }
+  openDrawer("activity");
+}
+
+function onWalletChromeCommand(event) {
+  if (event.origin !== window.location.origin) {
+    return;
+  }
+  const message = event.data;
+  if (message?.type !== "elastos:wallet-chrome-command" || typeof message.cmd !== "string") {
+    return;
+  }
+  switch (message.cmd) {
+    case "open-activity":
+    case "open-approvals":
+      openActivityChrome();
+      return;
+    case "open-settings":
+      openDrawer("settings");
+      return;
+    case "toggle-privacy":
+      togglePrivacy();
+      return;
+    case "close-overlays":
+      closeModal();
+      closeDrawers();
+      return;
+    default:
+  }
+}
+
+// Shell menu bar: declare File/Account menus to Home; commands come back as
+// elastos:menu-command and route to the same flows the buttons open. Every
+// entry still ends at the same passkey/approval gates — menus add no authority.
+function announceShellMenuManifest() {
+  if (!activeHomeToken || window.parent === window) {
+    return;
+  }
+  window.parent.postMessage({
+    type: "home:menu-manifest",
+    homeToken: activeHomeToken,
+    menus: [
+      {
+        title: "File",
+        items: [
+          { label: "Send...", cmd: "send" },
+          { label: "Receive...", cmd: "receive" },
+          "-",
+          { label: "Refresh", cmd: "refresh" },
+          "-",
+          { label: "Close Window", cmd: "__close-window" },
+        ],
+      },
+      {
+        title: "Account",
+        items: [
+          { label: "Create Account...", cmd: "create-account" },
+          { label: "Import Recovery Key...", cmd: "import-recovery-key" },
+        ],
+      },
+    ],
+  }, window.location.origin);
+}
+
+function onShellMenuCommand(event) {
+  if (event.origin !== window.location.origin) {
+    return;
+  }
+  const message = event.data;
+  if (message?.type !== "elastos:menu-command" || typeof message.cmd !== "string") {
+    return;
+  }
+  switch (message.cmd) {
+    case "send":
+      openSendFlow();
+      return;
+    case "receive":
+      openReceiveFlow();
+      return;
+    case "refresh":
+      refreshWalletState().catch((error) => showStatus(String(error.message || error), "error"));
+      return;
+    case "create-account":
+      openCreateAccountFlow();
+      return;
+    case "import-recovery-key":
+      openImportRecoveryKeyFlow();
+      return;
+    default:
+  }
+}
+
 function onRuntimeEvents(event) {
   if (event.origin !== window.location.origin) {
     return;
@@ -243,6 +392,21 @@ function onRuntimeEvents(event) {
   }
 }
 
+/* Shell pokes this after a connector ceremony succeeds. home:refresh-summary
+   only updates Home chrome — it does not reload Wallet accounts by itself. */
+function onWalletRefreshMessage(event) {
+  if (event.origin !== window.location.origin) {
+    return;
+  }
+  const message = event.data || {};
+  if (message.type !== "elastos:wallet-refresh") {
+    return;
+  }
+  refreshWalletState().catch((error) =>
+    showStatus(String(error.message || error), "error"),
+  );
+}
+
 function walletRuntimeEventIsRelevant(event) {
   const kind = String(event && event.kind || "");
   const scope = String(event && event.scope || "");
@@ -315,13 +479,10 @@ async function loadWalletState() {
 function renderAll() {
   const allAccounts = buildViewAccounts();
   const pending = pendingWalletRequests(currentRequests);
-  const reviewRequests = reviewWalletRequestId
-    ? pending.filter((request) => readText(request.request_id) === reviewWalletRequestId)
-    : pending;
   renderHero(allAccounts);
   renderHeroAccount(allAccounts);
   renderAccounts(allAccounts);
-  const focusedRequestVisible = renderRequests(reviewRequests, reviewWalletRequestId);
+  const focusedRequestVisible = renderRequests(pending, reviewWalletRequestId);
   if (reviewWalletRequestId && focusedRequestVisible) {
     showStatus("Review and approve this request in Wallet.", "muted");
   } else if (reviewWalletRequestId) {
@@ -329,9 +490,39 @@ function renderAll() {
   }
   renderMethods(allAccounts, currentApprovalMethods);
   renderActivity(currentRequests);
+  renderApprovalsBadge(pending.length);
   updateFlowButtons(allAccounts);
 }
 
+function renderApprovalsBadge(pendingCount) {
+  const badge = document.querySelector("#wallet-approvals-badge");
+  const button = document.querySelector("#wallet-activity-open");
+  const count = Math.max(0, Number(pendingCount) || 0);
+  if (badge && button) {
+    if (count <= 0) {
+      badge.hidden = true;
+      badge.textContent = "";
+      button.setAttribute("aria-label", "Activity");
+    } else {
+      badge.hidden = false;
+      badge.textContent = count > 9 ? "9+" : String(count);
+      button.setAttribute(
+        "aria-label",
+        count === 1 ? "Activity, 1 pending" : `Activity, ${count} pending`,
+      );
+    }
+  }
+  if (window.parent !== window) {
+    window.parent.postMessage(
+      {
+        type: "wallet:pending-count",
+        count,
+      },
+      window.location.origin,
+    );
+  }
+}
+
 function buildViewAccounts() {
   const groups = new Map();
   currentAccounts.forEach((account, index) => {
@@ -493,51 +684,25 @@ function renderHeroAccount(accounts) {
     accountDetailNode.hidden = true;
     return;
   }
+  // Active account meme on the far right (with 24h delta): name + address + copy.
+  // Accounts list owns method, balances, and the full roster.
   accountDetailNode.hidden = false;
-  accountDetailNode.setAttribute("aria-label", selectedAccountId ? "Selected account" : "Default account");
-
-  const inline = document.createElement("div");
-  inline.className = "wallet-detail-inline";
-
-  const summary = document.createElement("div");
-  summary.className = "wallet-detail-summary";
-  summary.append(
-    textNode("strong", selectedAccountId ? account.name : `Default: ${account.name}`),
-    textNode("span", `${account.network} · ${account.method === "metamask" ? "MetaMask" : account.method === "btc" ? "Bitcoin" : "Passkey"}`),
+  accountDetailNode.setAttribute(
+    "aria-label",
+    selectedAccountId ? `Selected · ${account.name}` : `Default · ${account.name}`,
   );
 
-  const receive = document.createElement("div");
-  receive.className = "wallet-detail-qr";
-  receive.dataset.walletDetailQr = account.account_id;
-  const cachedQr = qrForAccount(account);
-  if (cachedQr) {
-    receive.innerHTML = cachedQr;
-  } else {
-    receive.append(textNode("span", "QR", "wallet-state"));
-    loadAccountQr(account);
-  }
+  const pill = document.createElement("div");
+  pill.className = "wallet-hero-address-pill";
+  pill.title = `${account.name} · ${account.address}`;
 
-  const address = document.createElement("div");
-  address.className = "wallet-detail-address";
-  address.append(copyButton(account.address));
+  const label = textNode("span", account.name, "wallet-hero-address-name");
+  const address = textNode("code", shortAddress(account.address), "wallet-hero-address-value");
+  address.dataset.walletCopyAddress = account.address;
+  const copy = copyIconButton(account.address, `Copy ${account.name} address`);
 
-  inline.append(summary, receive, address);
-  accountDetailNode.append(inline);
-}
-
-function updateAccountQr(account, svg) {
-  const qrBox = accountDetailNode.querySelector(
-    `[data-wallet-detail-qr="${cssEscape(account.account_id)}"]`,
-  );
-  if (!qrBox) {
-    return;
-  }
-  if (svg) {
-    qrBox.replaceChildren();
-    qrBox.innerHTML = svg;
-  } else {
-    qrBox.replaceChildren(textNode("span", "QR unavailable", "wallet-state"));
-  }
+  pill.append(label, address, copy);
+  accountDetailNode.append(pill);
 }
 
 function selectedOrDefaultAccount(accounts = buildViewAccounts()) {
@@ -579,8 +744,9 @@ function accountMatchesDefault(account, defaultAccount) {
 function renderAccounts(accounts) {
   accountsNode.replaceChildren();
   stateNode.textContent = `${accounts.length} account${accounts.length === 1 ? "" : "s"}`;
+  // Create / Import stay visible even with accounts — never bury the path.
   if (accountActionsNode) {
-    accountActionsNode.hidden = accounts.length > 0;
+    accountActionsNode.hidden = false;
   }
   if (accounts.length === 0) {
     accountsNode.append(emptyHero());
@@ -597,8 +763,36 @@ function renderAccounts(accounts) {
 }
 
 function updateFlowButtons(accounts) {
-  sendButton.disabled = accounts.length === 0;
-  receiveButton.disabled = accounts.length === 0;
+  const empty = accounts.length === 0;
+  const canSend = accounts.some((account) => canSendFromAccount(account));
+  // Keep Send clickable when accounts exist but none are built-in sendable —
+  // the hero flip explains MetaMask vs Wallet Send instead of a dead control.
+  sendButton.disabled = empty;
+  receiveButton.disabled = empty;
+  if (sendButton) {
+    sendButton.hidden = empty;
+    sendButton.title = empty || canSend
+      ? "Send"
+      : "Wallet Send needs a built-in passkey account";
+    sendButton.setAttribute("aria-description", sendButton.title);
+  }
+  if (receiveButton) {
+    receiveButton.hidden = empty;
+  }
+  if (getStartedNode) {
+    getStartedNode.hidden = !empty;
+  }
+}
+
+function focusSignersSection() {
+  if (!signersSection) {
+    return;
+  }
+  signersSection.classList.add("is-highlighted");
+  signersSection.scrollIntoView({ behavior: "smooth", block: "nearest" });
+  window.setTimeout(() => {
+    signersSection.classList.remove("is-highlighted");
+  }, 1600);
 }
 
 function openAccountDetail(accountId) {
diff --git a/docs/DESIGN_SYSTEM.md b/docs/DESIGN_SYSTEM.md
index 3b5c9f0ed..609323417 100644
--- a/docs/DESIGN_SYSTEM.md
+++ b/docs/DESIGN_SYSTEM.md
@@ -1,46 +1,51 @@
 # ElastOS Design System
 
 This is the active visual contract for Home and the first-party browser capsules.
-It is intentionally small: one brand layer, one capsule layer, and no per-app
-color personality unless the app has a functional reason.
+It is intentionally small: one shared token layer, one theme switch, one accent,
+and no per-app color personality unless the app has a functional reason.
+
+## Token Source and Vendoring
+
+The single source of truth is `capsules/_shared/elastos-ui.css` (tokens) and
+`capsules/_shared/elastos-theme.js` (theme runtime). Capsules never share these
+files at runtime — `scripts/vendor-ui-tokens.sh` (run via `just vendor-ui`)
+copies them into each participating capsule's browser-serving directory, and
+`--check` mode fails the gate when a vendored copy drifts from the source.
+Vendor targets are listed in the script; most apps serve from `browser/`,
+viewer-style capsules serve from their root.
 
 ## Color Contract
 
-Home sits on the user wallpaper and ElastOS mark. It uses a dark glass layer with
-the ElastOS orange as brand emphasis:
-
-| Token | Value | Use |
-|------|-------|-----|
-| `--brand` | `#f6921a` | ElastOS logo-adjacent emphasis, badges, selected chrome |
-| `--brand-strong` | `#ffb457` | hover/focus brand emphasis |
-| `--bg` | `#050608` | Home base behind wallpaper |
-| `--text` | `#f5f7fa` | Home foreground text |
-
-First-party capsules use a light, document-like layer over the same product
-world. The palette is shared by Chat Room, Documents, Inbox, Library, System,
-and GBA:
-
-| Token | Value | Use |
-|------|-------|-----|
-| `--bg` | `#edf1fb` | capsule background |
-| `--bg-strong` | `#e3e9fb` | stronger capsule wash |
-| `--panel` | `rgba(255, 255, 255, 0.9)` | primary glass cards |
-| `--panel-strong` | `#ffffff` | solid cards and inputs |
-| `--panel-soft` | `#eef2ff` | secondary controls |
-| `--line` | `rgba(83, 103, 164, 0.14)` | normal borders |
-| `--line-strong` | `rgba(83, 103, 164, 0.22)` | focusable borders |
-| `--ink` | `#1d2438` | foreground text |
-| `--muted` | `#66708a` | secondary text |
-| `--accent` | `#5f76d8` | primary action and selected state |
-| `--accent-soft` | `#e8edff` | selected/soft action background |
-| `--accent-deep` | `#3c53a7` | strong accent text |
-| `--danger` | `#b14c5a` | destructive actions |
-| `--brand` | `#f6921a` | ElastOS brand accent, used sparingly |
-| `--brand-soft` | `#fff1dc` | soft brand background |
-
-The capsule accent is blue-lavender because it holds contrast against the pale
-wallpaper and lets the orange logo remain the brand anchor instead of competing
-with every button.
+Dark is the base theme. Every first-party surface consumes the `--el-*` tokens
+(surfaces, text, hairlines, radii, shadows, motion) and maps any legacy local
+variable names onto them in a small `:root` alias block.
+
+- **Theme:** `elastos-theme.js` applies `data-el-theme="light"` on `<html>`
+  from the `elastos.ui.theme` localStorage key (system/light/dark). The light
+  palette lives in the same `elastos-ui.css`; apps must not hardcode dark
+  assumptions in chrome.
+- **One system accent:** `--el-accent` (plus `-ink`, `-strong`, `-soft`,
+  `-faint` derivatives). The user picks one of eight macOS-style accents in
+  System → Personalization (`elastos.ui.accent`, `data-el-accent` on `<html>`);
+  every app obeys it and none defines its own accent color.
+- **Brand:** the ElastOS orange (`--el-brand`, `#f6921a`) is reserved for
+  logo-adjacent emphasis and badges — it is not the interaction accent.
+- **Content is not chrome:** viewer paper (PDF/EPUB white), video letterbox
+  black, and 3D stage gradients stay fixed across themes on purpose.
+
+## Shell Chrome Anatomy
+
+The Home shell follows the macOS anatomy deliberately:
+
+- A full-width system bar owns the focused app's name, its **menu bar**
+  (see message contract below), Spotlight, inbox, identity,
+  and the clock (which opens Notification Center).
+- Windows carry traffic-light controls on the left; inactive windows go
+  neutral. Maximized windows own the stage between bar and dock, never the bar.
+- The dock is a centered pill with cosine-falloff magnification; running apps
+  get an indicator dot; **Trash anchors the right end** past a divider.
+- All window/dock motion is transform/opacity-only and honors
+  `prefers-reduced-motion`.
 
 ## Interaction Contract
 
@@ -54,9 +59,35 @@ Every visible action must have the same contract for humans and agents:
 - First-party surfaces expose state in simple product nouns before raw paths,
   CIDs, or provider details.
 
+## Home Message Contract (shell ↔ app iframes)
+
+All messages are same-origin `postMessage`, authenticated by the app frame's
+launch token (`homeToken`), validated against the frame that sent them.
+Host-routed intents (`home:open-target`, `home:close-self`, …) are handled by
+`capsules/home/browser/home-shell-host.js`; the presentation-only menu-bar pair
+is handled by the GUI shell in `capsules/home-gui/browser/shell-menubar.js`.
+The inventory:
+
+| Type | Direction | Purpose |
+|------|-----------|---------|
+| `home:refresh-summary` | app → shell | ask Home to re-poll the summary |
+| `home:open-target` / `home:open-uri` | app → shell | open another app / viewer (allow-listed per source app) |
+| `home:deliver-to-target` / `home:open-target-with-payload` | app → shell | routed app-to-app payloads (allow-listed) |
+| `home:close-self` / `home:relaunch-self` | app → shell | window lifecycle for the sender only |
+| `home:menu-manifest` | app → shell | declare the app's menu bar (File/View…); UI data only, sanitized and size-capped, bound to the sender's window |
+| `elastos:menu-command` | shell → app | a chosen menu item's `cmd`, posted only to the window that declared it |
+
+Menu manifests carry zero authority: the shell renders labels via
+`textContent`, commands route to the same in-app functions as the app's own
+buttons, and `__`-prefixed commands (`__new-window`, `__close-window`) are
+handled by the shell itself. "New Window" is offered only for targets where
+`openTarget` genuinely opens a new window (never for single-session apps or
+protected viewer capsules).
+
 ## Drift Checks
 
 `scripts/home-entropy-check.mjs` enforces the active token set, stale-copy
 removal, and the basic human/agent interaction contract for first-party browser
-surfaces. Update this document and the check together when the design language
-intentionally changes.
+surfaces; `scripts/vendor-ui-tokens.sh --check` enforces vendored-token
+freshness. Update this document and the checks together when the design
+language intentionally changes.
diff --git a/elastos/crates/elastos-server/src/api/gateway_home_runtime.rs b/elastos/crates/elastos-server/src/api/gateway_home_runtime.rs
index 16324d54a..a791ad22e 100644
--- a/elastos/crates/elastos-server/src/api/gateway_home_runtime.rs
+++ b/elastos/crates/elastos-server/src/api/gateway_home_runtime.rs
@@ -241,6 +241,14 @@ pub(super) async fn launch_runtime_backed_home_target(
         return None;
     }
 
+    // Web projections are gateway-served surfaces: the launch route below is
+    // their canonical open path and there is no runtime process to start.
+    // The runtime itself refuses plain Wasm capsules (fail-closed), so
+    // forwarding them would only ever produce a launch error.
+    if manifest.execution.as_ref() == Some(&elastos_common::CapsuleExecution::WebProjection) {
+        return None;
+    }
+
     let runtime_capsule_dir =
         match materialize_source_wasm_capsule_for_runtime(data_dir, &capsule_dir, &manifest) {
             Ok(path) => path,
diff --git a/justfile b/justfile
index e4f7d64b6..3964c43af 100644
--- a/justfile
+++ b/justfile
@@ -53,6 +53,7 @@ verify:
     node scripts/check-elastos-bus-wit.mjs
     node scripts/home-entropy-check.mjs
     node scripts/browser-entropy-check.mjs
+    ./scripts/vendor-ui-tokens.sh --check
     just local-carrier-setup-smoke
     ./scripts/command-smoke.sh
     just candidate-command-audit
@@ -60,6 +61,10 @@ verify:
     cd elastos && cargo clippy --workspace --all-targets -- -D warnings
     cd elastos && cargo test --workspace
 
+# Re-stamp the shared UI token sheet + theme runtime into each capsule
+vendor-ui:
+    ./scripts/vendor-ui-tokens.sh
+
 # Release-trust gate: requires canonical publisher signer, not the dev signer
 verify-release:
     just verify
diff --git a/scripts/home-entropy-check.mjs b/scripts/home-entropy-check.mjs
index 6ae1b57d9..3216dfc7b 100755
--- a/scripts/home-entropy-check.mjs
+++ b/scripts/home-entropy-check.mjs
@@ -7,8 +7,22 @@ import { fileURLToPath } from "node:url";
 const repoRoot = new URL("../", import.meta.url);
 const repoRootPath = fileURLToPath(repoRoot);
 
+// Home GUI split: shell modules that used to live under capsules/home/browser
+// now live under home-gui. Alias so the gate fails on contract drift, not ENOENT.
+const HOME_SHELL_PATH_ALIASES = Object.freeze({
+  "capsules/home/browser/shell.js": "capsules/home-gui/browser/home-gui.js",
+  "capsules/home/browser/shell-surface.js": "capsules/home-gui/browser/shell-surface.js",
+  "capsules/home/browser/shell-windows.js": "capsules/home-gui/browser/shell-windows.js",
+  "capsules/home/browser/shell-window-geometry.js":
+    "capsules/home-gui/browser/shell-window-geometry.js",
+});
+
+function resolveRepoPath(path) {
+  return HOME_SHELL_PATH_ALIASES[path] || path;
+}
+
 function read(path) {
-  return readFileSync(new URL(path, repoRoot), "utf8");
+  return readFileSync(new URL(resolveRepoPath(path), repoRoot), "utf8");
 }
 
 function readAll(paths) {
@@ -574,9 +588,9 @@ function assertStaticControlsAreNamed(file) {
 const activeUiFiles = [
   "capsules/home/browser/index.html",
   "capsules/home/browser/style.css",
-  "capsules/home/browser/shell.js",
-  "capsules/home/browser/shell-surface.js",
-  "capsules/home/browser/shell-windows.js",
+  "capsules/home-gui/browser/home-gui.js",
+  "capsules/home-gui/browser/shell-surface.js",
+  "capsules/home-gui/browser/shell-windows.js",
   "capsules/home/browser/service-worker.js",
   "capsules/system/browser/index.html",
   "capsules/system/browser/system.js",
@@ -5163,13 +5177,13 @@ assert(
     walletProviderDoc.includes("Approval method") &&
     walletMetamask.includes("Add approval method") &&
     walletUnisat.includes("Add approval method") &&
-    wallet.includes("Approval methods") &&
+    (wallet.includes("Wallets &amp; signers") || wallet.includes("Wallets & signers")) &&
     wallet.includes("Total balance") &&
     walletWalletconnect.includes("Add approval method") &&
     !walletMetamask.includes("Wallet Connector") &&
     !walletUnisat.includes("Wallet Connector") &&
     !walletWalletconnect.includes("Wallet Connector"),
-  "Wallet UI and docs must present connector capsules as approval methods under one Wallet model",
+  "Wallet UI and docs must present connector capsules as approval methods under one Wallet model (UI: Wallets & signers)",
 );
 assert(
   walletProvider.includes("external wallet links require a connector_id") &&
@@ -7857,13 +7871,13 @@ assert(
   "Wallet must provide balances and built-in Bitcoin accounts without manual Bitcoin proof linking",
 );
 assert(
-  wallet.includes("wallet-20260523a") &&
+  wallet.includes("wallet-20260719w") &&
     wallet.includes('id="wallet-send"') &&
     wallet.includes('id="wallet-receive"') &&
     wallet.includes("data-wallet-create-account") &&
     wallet.includes("data-wallet-import-recovery-key") &&
     (wallet.match(/data-wallet-create-account/g) || []).length === 2 &&
-    (wallet.match(/data-wallet-import-recovery-key/g) || []).length === 2 &&
+    (wallet.match(/data-wallet-import-recovery-key/g) || []).length === 1 &&
     !walletJs.includes("wallet-empty-stack") &&
     !walletJs.includes("Create your first account") &&
     walletJs.includes('"EVM"') &&
@@ -7873,9 +7887,9 @@ assert(
     walletJs.includes("openReceiveFlow") &&
     walletJs.includes("openSendFlow") &&
     walletJs.includes("balance_key") &&
-    walletJs.includes("wallet-detail-summary") &&
+    walletJs.includes("wallet-hero-address-pill") &&
     walletJs.includes("fundedSendableAccounts"),
-  "Wallet must expose Send/Receive plus canonical Accounts/Settings create-import surfaces with cache-busted assets",
+  "Wallet must expose Send/Receive plus canonical Accounts create-import surfaces with cache-busted assets",
 );
 assert(
   wallet.includes('id="wallet-currency-settings"') &&
@@ -7885,7 +7899,7 @@ assert(
     !wallet.includes('data-wallet-currency="ela" hidden') &&
     !wallet.includes('id="wallet-enable-ela-currency"') &&
     !wallet.includes('id="wallet-currency"') &&
-    walletJs.includes('readStoredValue(DISPLAY_CURRENCY_STORAGE_KEY, "btc"') &&
+    walletJs.includes('readStoredValue(DISPLAY_CURRENCY_STORAGE_KEY, "usd"') &&
     !walletJs.includes("ELA_DISPLAY_ENABLED_STORAGE_KEY") &&
     !walletJs.includes("enableElaDisplayCurrency") &&
     !walletJs.includes("elaCurrencyEnabled") &&
@@ -7899,33 +7913,113 @@ assert(
       "test_wallet_price_http_source_requires_explicit_approval",
     ) &&
     gatewayTests.includes("test_wallet_price_source_policy_round_trips"),
-  "Wallet pricing currency must be selected in Settings, default to BTC, expose USD and ELA without an enablement gate, and require explicit provider approval for HTTP prices",
+  "Wallet pricing currency must be selected in Settings, default to USD, expose BTC and ELA without an enablement gate, and require explicit provider approval for HTTP prices",
 );
 assert(
   wallet.includes('id="wallet-activity-open"') &&
     wallet.includes('id="wallet-settings-open"') &&
     wallet.includes("wallet-hero-actions") &&
+    wallet.includes("wallet-hero-nav") &&
+    wallet.includes("wallet-hero-scene") &&
+    wallet.includes('id="wallet-hero-pending"') &&
+    wallet.indexOf("wallet-hero-actions") < wallet.indexOf("wallet-hero-scene") &&
+    wallet.indexOf("wallet-send") < wallet.indexOf("wallet-hero-pending") &&
+    walletStyle.includes(".wallet-hero-scene") &&
+    walletStyle.includes(".wallet-hero-nav") &&
+    walletStyle.includes(".wallet-hero-pending") &&
+    wallet.includes("Recent activity") &&
+    wallet.includes("M19.4 15a1.65") &&
+    !wallet.includes("✦ Settings") &&
+    !wallet.includes("↻ Activity") &&
     !wallet.includes("wallet-topbar") &&
     !wallet.includes("wallet-sidebar") &&
     !wallet.includes('id="wallet-pending-ribbon"') &&
-    walletJs.includes("renderRequests(reviewRequests, reviewWalletRequestId)") &&
-    !walletJs.includes("renderPendingRibbon"),
-  "Wallet must keep Activity/Privacy/Settings inside the hero card, route approval requests only through the Requests panel, and avoid separate header/sidebar chrome",
+    !wallet.includes('id="wallet-requests-panel"') &&
+    walletJs.includes("renderRequests(pending, reviewWalletRequestId)") &&
+    walletJs.includes('querySelector("#wallet-hero-pending")') &&
+    walletJs.includes("openActivityChrome") &&
+    walletJs.includes("openPendingReview") &&
+    !walletJs.includes("renderPendingRibbon") &&
+    !walletJs.includes("Review 1 pending request") &&
+    read("capsules/wallet/browser/wallet-activity.js").includes("No activity yet.") &&
+    wallet.includes('aria-label="Activity"') &&
+    walletJs.includes('aria-label", "Activity"'),
+  "Wallet must keep Activity/Privacy/Settings as static hero chrome with the same outline marks as the rail, put pending under Send/Receive, keep Activity drawer as history, and avoid separate header/sidebar chrome",
+);
+assert(
+  walletStyle.includes("scrollbar-width: none") &&
+    walletStyle.includes("html::-webkit-scrollbar"),
+  "Wallet viewport must hide the classic scrollbar gutter so Send/Receive overflow does not shift Activity/Settings",
+);
+assert(
+  walletStyle.includes(".wallet-drawer.is-open") &&
+    walletJs.includes("DRAWER_MS") &&
+    walletJs.includes('classList.add("is-open")') &&
+    walletJs.includes("void next.offsetWidth") &&
+    wallet.includes('id="wallet-approvals-badge"') &&
+    walletJs.includes("renderApprovalsBadge"),
+  "Wallet Activity/Settings drawers must slide open with backdrop fade, and Activity nav must badge pending count",
+);
+assert(
+  read("capsules/home-gui/browser/home-gui-template.html").includes('id="wallet-rail-approvals"') &&
+    read("capsules/home-gui/browser/home-gui-template.html").includes('id="wallet-rail-settings"') &&
+    read("capsules/home-gui/browser/home-gui-template.html").includes('id="wallet-rail-privacy"') &&
+    read("capsules/home-gui/browser/home-gui-template.html").includes('aria-label="Open as a window"') &&
+    read("capsules/home-gui/browser/home-gui-template.html").includes(
+      'id="connector-sheet-close"',
+    ) &&
+    read("capsules/home-gui/browser/home-gui-template.html").includes(
+      'class="wallet-rail-head-btn wallet-rail-icon-btn wallet-rail-close"',
+    ) &&
+    read("capsules/home-gui/browser/shell-wallet-rail.js").includes(
+      'searchParams.set("presentation", "rail")',
+    ) &&
+    read("capsules/home-gui/browser/shell-wallet-rail.js").includes(
+      "elastos:wallet-chrome-command",
+    ) &&
+    read("capsules/home-gui/browser/shell-wallet-rail.js").includes("close-overlays") &&
+    read("capsules/home-gui/browser/shell-wallet-rail.js").includes("queuedChromeCommand") &&
+    read("capsules/home-gui/browser/shell-wallet-rail.js").includes("EYE_HIDDEN_SVG") &&
+    read("capsules/home-gui/browser/shell-wallet-rail.js").includes("bindEdgeReveal") &&
+    read("capsules/home-gui/browser/shell-wallet-rail.js").includes("fromEdgeHover") &&
+    read("capsules/home-gui/browser/shell-wallet-rail.js").includes("EDGE_REVEAL_PX") &&
+    walletJs.includes("onWalletChromeCommand") &&
+    walletJs.includes('case "close-overlays"') &&
+    walletJs.includes('dataset.walletPresentation = presentation') &&
+    read("capsules/home-gui/browser/shell-wallet-rail.js").includes(
+      "walletRailSessionMounted",
+    ) &&
+    read("capsules/home-gui/browser/shell-wallet-rail.js").includes("preloadWalletRail") &&
+    read("capsules/home-gui/browser/shell-wallet-rail.js").includes("postWalletSoftRefresh") &&
+    read("capsules/home-gui/browser/shell-wallet-rail.js").includes(
+      "event.source !== frame.contentWindow",
+    ) &&
+    read("capsules/home-gui/browser/shell-wallet-rail.js").includes("graceLeft") &&
+    read("capsules/home-gui/browser/home-gui.js").includes(
+      "walletRailSessionMounted()",
+    ),
+  "Wallet rail head must own Activity/Settings/privacy icon chrome and command the capsule without adding authority",
 );
 assert(
   wallet.includes("wallet-settings-drawer") &&
     wallet.includes("wallet-settings-main") &&
-    wallet.includes("wallet-settings-side") &&
-    wallet.indexOf('class="wallet-settings-side"') <
-      wallet.indexOf('id="wallet-methods"') &&
-    !wallet.includes("<h2>Wallet settings</h2>") &&
+    !wallet.includes("wallet-settings-side") &&
+    wallet.includes("<h2>Settings</h2>") &&
+    wallet.includes("Display currency") &&
+    !wallet.includes('id="wallet-privacy-settings"') &&
+    !wallet.includes("<h3>Privacy</h3>") &&
+    wallet.includes('id="wallet-privacy"') &&
+    wallet.includes('id="wallet-signers"') &&
+    wallet.includes('id="wallet-methods"') &&
+    wallet.indexOf('id="wallet-signers"') < wallet.indexOf('id="wallet-methods"') &&
+    !wallet.includes("<h3>Accounts</h3>") &&
     !wallet.includes("<h3>Identity</h3>") &&
     !wallet.includes('id="wallet-theme"') &&
     !wallet.includes("data-wallet-theme") &&
     !walletJs.includes("applyStoredTheme") &&
     !walletJs.includes("setTheme") &&
     !walletJs.includes("wallet.theme"),
-  "Wallet Settings must only contain wallet-local controls, keep approval methods on the side, and leave global appearance to System",
+  "Wallet Settings must only contain display currency, keep Hide/privacy on hero nav, keep Wallets & signers on the main slide, and leave global appearance to System",
 );
 assert(
   !walletJs.includes("native balances ready") &&
@@ -7935,8 +8029,9 @@ assert(
 assert(
   !wallet.includes("wallet-brand") &&
     walletJs.includes("selectedAccountId") &&
-    walletJs.includes("wallet-detail-address") &&
-    walletJs.includes("wallet-detail-qr") &&
+    walletJs.includes("wallet-hero-address-pill") &&
+    wallet.includes("wallet-hero-back") &&
+    wallet.includes('data-face="front"') &&
     walletJs.includes('account.proof_type === "siwe"') &&
     walletJs.includes("unavailable: Boolean(payload.unavailable)") &&
     !walletJs.includes("Balances update through approved Runtime providers.") &&
@@ -7946,8 +8041,7 @@ assert(
 assert(
   wallet.indexOf('aria-label="Accounts"') <
     wallet.indexOf("data-wallet-create-account") &&
-    wallet.indexOf('id="wallet-settings-drawer"') <
-    wallet.indexOf('id="wallet-create"') &&
+    wallet.includes('aria-label="Accounts"') &&
     walletJs.includes("Choose the account type.") &&
     walletJs.includes("One passkey-controlled account for ESC, Base, and supported EVM networks.") &&
     walletJs.includes("evmChainNamespaces.slice(0, 1)") &&
@@ -7956,7 +8050,7 @@ assert(
     walletJs.includes("balanceTargetsForAccounts") &&
     walletJs.includes("accountForAsset") &&
     walletJs.includes("account_ids") &&
-    walletJs.includes("accountActionsNode.hidden = accounts.length > 0") &&
+    walletJs.includes("accountActionsNode.hidden = false") &&
     walletJs.includes("onWalletActionClick") &&
     !walletJs.includes("createAccountTile") &&
     !walletStyle.includes(".wallet-create-card") &&
@@ -8008,12 +8102,12 @@ assert(
 );
 assert(
   wallet.includes(
-    '<section id="wallet-account-detail" class="wallet-detail" aria-label="Default account"></section>',
+    '<section id="wallet-account-detail" class="wallet-detail" aria-label="Selected account"></section>',
   ) &&
     wallet.indexOf('class="wallet-hero-balance"') <
-      wallet.indexOf('id="wallet-delta"') &&
-    wallet.indexOf('id="wallet-delta"') <
       wallet.indexOf('id="wallet-account-detail"') &&
+    wallet.indexOf('id="wallet-account-detail"') <
+      wallet.indexOf('id="wallet-delta"') &&
     wallet.indexOf('id="wallet-total-balance"') <
       wallet.indexOf('class="wallet-action-row"') &&
     walletJs.includes("renderHeroAccount(allAccounts)") &&
@@ -8029,8 +8123,19 @@ assert(
     ) &&
     walletJs.includes("clearAccountSelection") &&
     walletJs.includes("is-selected") &&
-    walletJs.includes("wallet-detail-qr") &&
+    walletJs.includes("wallet-hero-address-pill") &&
+    walletJs.includes("heroFlowActive") &&
+    walletJs.includes("accountsFlowActive") &&
+    walletJs.includes("showHeroBack") &&
+    walletJs.includes("showAccountsBack") &&
+    walletJs.includes('surface: "accounts"') &&
     walletJs.includes("/api/wallet/qr") &&
+    walletJs.includes("openReceiveFlow") &&
+    walletJs.includes("Create an account before receiving funds.") &&
+    walletJs.includes('surface: "hero"') &&
+    !walletJs.includes('openInfoModal("Receive"') &&
+    walletJs.includes("renderReceiveAddress(account)") &&
+    walletJs.includes("closeModal()") &&
     !walletJs.includes("visibleAccounts") &&
     !walletJs.includes("Selected account ·") &&
     !walletJs.includes("Hide details") &&
@@ -8038,62 +8143,45 @@ assert(
     !walletJs.includes("accountDetailNode.scrollIntoView") &&
     !walletJs.includes("wallet-detail-balance") &&
     !walletJs.includes("wallet-detail-section") &&
+    !walletJs.includes("wallet-detail-chip") &&
     !walletJs.includes("No transactions yet") &&
     !walletJs.includes("closeOverlaySurfaces") &&
     !walletJs.includes("walletPageNode") &&
-    sourceBlock(
-      walletStyle,
-      ".wallet-hero-row {",
-      "Wallet hero row style",
-    ).includes(
-      "grid-template-columns: minmax(240px, 1fr) minmax(160px, 0.6fr) minmax(190px, 220px)",
-    ) &&
-    sourceBlock(walletStyle, ".wallet-delta {", "Wallet graph style").includes(
-      "justify-self: center",
-    ) &&
-    sourceBlock(
-      walletStyle,
-      ".wallet-detail {",
-      "Wallet detail style",
-    ).includes("justify-self: end") &&
-    sourceBlock(
-      walletStyle,
-      "@media (max-width: 780px)",
-      "Wallet mobile media",
-    ).includes(".wallet-detail {\n    justify-self: center;") &&
-    !sourceBlock(
-      walletStyle,
-      ".wallet-detail {",
-      "Wallet detail style",
-    ).includes("min-height:") &&
-    !sourceBlock(
-      walletStyle,
-      ".wallet-detail {",
-      "Wallet detail style",
-    ).includes("border:") &&
-    !sourceBlock(
-      walletStyle,
-      ".wallet-detail {",
-      "Wallet detail style",
-    ).includes("background:") &&
-    !sourceBlock(
-      walletStyle,
-      ".wallet-detail {",
-      "Wallet detail style",
-    ).includes("position: fixed") &&
-    walletStyle.includes(".wallet-detail-inline") &&
-    walletStyle.includes("width: 156px;") &&
-    walletStyle.includes("width: 132px;") &&
+    wallet.includes("wallet-hero-back") &&
+    wallet.includes("wallet-accounts-back") &&
+    wallet.includes("wallet-accounts-section") &&
+    walletStyle.includes(".wallet-hero-flip") &&
+    walletStyle.includes('.wallet-hero.is-flipped') &&
+    walletStyle.includes(".wallet-accounts-flip") &&
+    walletStyle.includes(".wallet-accounts-section.is-flipped") &&
+    walletStyle.includes('data-wallet-presentation="rail"') &&
+    walletStyle.includes("rotateY(180deg)") &&
+    walletJs.includes('dataset.walletPresentation = presentation') &&
+    walletJs.includes('readQueryParam("presentation")') &&
+    walletJs.includes("useWindowMorph") &&
+    walletJs.includes("is-morph-back") &&
+    walletStyle.includes("is-morph-back") &&
+    walletStyle.includes(".wallet-hero-address-pill") &&
+    !walletStyle.includes(".wallet-detail-chip") &&
     walletStyle.includes(
       "grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))",
     ) &&
-    walletStyle.includes("min-height: 118px") &&
+    walletStyle.includes("min-height: 72px") &&
+    walletStyle.includes(".wallet-account-meta") &&
+    walletStyle.includes(".wallet-method-mark-icon") &&
+    walletJs.includes("methodMarkIconSrc") &&
+    walletJs.includes("./icons/metamask.png") &&
+    walletJs.includes("./icons/unisat.png") &&
+    walletJs.includes("./icons/ethereum.png") &&
+    walletJs.includes("./icons/bitcoin.png") &&
+    walletJs.includes("./icons/passkey.png") &&
+    walletJs.includes('surface: "accounts"') &&
     !walletStyle.includes(".wallet-address") &&
     !walletStyle.includes(".wallet-detail-close") &&
     !walletStyle.includes(".wallet-detail-balance") &&
     !walletStyle.includes(".wallet-detail-section") &&
     walletStyle.includes(".wallet-account.is-selected"),
-  "Wallet hero must keep balance/actions on the left, graph centered, QR/address on the right, center QR on mobile, and denser account cards without separate containers, side sheets, scroll jumps, transactions placeholders, or duplicate balances",
+  "Wallet hero flips for Send/Receive; Accounts section flips for Create/Import/Account menu; dense account cards with brand marks; no second account card or side sheets",
 );
 assert(
   gatewayApi.includes('WALLET_CAPSULE_ID => "Wallet"') &&
diff --git a/scripts/home-passkey-virtual-auth-smoke.mjs b/scripts/home-passkey-virtual-auth-smoke.mjs
index bd351a2c6..19d1065a3 100644
--- a/scripts/home-passkey-virtual-auth-smoke.mjs
+++ b/scripts/home-passkey-virtual-auth-smoke.mjs
@@ -2203,6 +2203,13 @@ async function statusFromServer(page) {
 }
 
 async function createPasskeyFromCurrentUnlock(page, mode) {
+  // First boot opens on the welcome beat; "Get started" advances to the
+  // create-passkey form. Returning flows (guest create) land on the form
+  // directly, so the click is conditional.
+  const primary = page.locator("#home-unlock-primary");
+  if ((await primary.textContent())?.trim() === "Get started") {
+    await primary.click();
+  }
   const name = page.locator("#home-unlock-name");
   await name.waitFor({ state: "visible", timeout: 10_000 });
   await name.fill(TEST_NAME);
diff --git a/scripts/home-shell-auth-gate-smoke.mjs b/scripts/home-shell-auth-gate-smoke.mjs
index a8067b3c2..899d68dbf 100644
--- a/scripts/home-shell-auth-gate-smoke.mjs
+++ b/scripts/home-shell-auth-gate-smoke.mjs
@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-const moduleVersion = "home-20260705a";
+const moduleVersion = "home-20260718d";
 const requests = [];
 const windowListeners = new Map();
 
@@ -76,6 +76,10 @@ class FakeElement {
     this.listeners.get(type).push(callback);
   }
 
+  append(...children) {
+    for (const child of children) this.appendChild(child);
+  }
+
   appendChild(child) {
     child.parentElement = this;
     this.children.push(child);
diff --git a/scripts/home-shell-bridge-smoke.mjs b/scripts/home-shell-bridge-smoke.mjs
index 9d3401c81..979a5b171 100644
--- a/scripts/home-shell-bridge-smoke.mjs
+++ b/scripts/home-shell-bridge-smoke.mjs
@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-const moduleVersion = "home-20260705a";
+const moduleVersion = "home-20260718d";
 const requests = [];
 const windowListeners = new Map();
 const localStorageValues = new Map([
@@ -87,6 +87,10 @@ class FakeElement {
     this.listeners.get(type).push(callback);
   }
 
+  append(...children) {
+    for (const child of children) this.appendChild(child);
+  }
+
   appendChild(child) {
     child.parentElement = this;
     this.children.push(child);
@@ -189,7 +193,7 @@ const summary = {
   appearance: {},
   browser_state: {
     principal_id: "principal:home-shell-bridge",
-    layout: { desktop: {}, taskbar: [], desktopHidden: [], desktopIconsVisible: true },
+    layout: { desktop: {}, taskbar: [], desktopApps: [], desktopIconsVisible: true },
     recent_targets: [],
     session: { windows: [] },
   },
diff --git a/scripts/home-shell-no-hint-boot-smoke.mjs b/scripts/home-shell-no-hint-boot-smoke.mjs
index a58176e4a..39a03572f 100644
--- a/scripts/home-shell-no-hint-boot-smoke.mjs
+++ b/scripts/home-shell-no-hint-boot-smoke.mjs
@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-const moduleVersion = "home-20260705a";
+const moduleVersion = "home-20260718d";
 const requests = [];
 const localStorageValues = new Map([
   ["elastos.home.active-shell-hint", "home-gui"],
@@ -132,6 +132,10 @@ class FakeElement {
     this.listeners.get(type).push(callback);
   }
 
+  append(...children) {
+    for (const child of children) this.appendChild(child);
+  }
+
   appendChild(child) {
     child.parentElement = this;
     this.children.push(child);
@@ -248,7 +252,7 @@ function summaryFor(activeShell) {
     appearance: {},
     browser_state: {
       principal_id: "principal:home-shell-no-hint-boot",
-      layout: { desktop: {}, taskbar: [], desktopHidden: [], desktopIconsVisible: true },
+      layout: { desktop: {}, taskbar: [], desktopApps: [], desktopIconsVisible: true },
       recent_targets: [],
       session: { windows: [] },
     },
diff --git a/scripts/home-shell-recovery-smoke.mjs b/scripts/home-shell-recovery-smoke.mjs
index 4a694287d..ddeae9de6 100644
--- a/scripts/home-shell-recovery-smoke.mjs
+++ b/scripts/home-shell-recovery-smoke.mjs
@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-const moduleVersion = "home-20260705a";
+const moduleVersion = "home-20260718d";
 const requests = [];
 const originalConsoleError = console.error;
 console.error = (...args) => {
@@ -82,6 +82,10 @@ class FakeElement {
     this.listeners.get(type).push(callback);
   }
 
+  append(...children) {
+    for (const child of children) this.appendChild(child);
+  }
+
   appendChild(child) {
     this.children.push(child);
     return child;
@@ -181,7 +185,7 @@ const summary = {
   appearance: {},
   browser_state: {
     principal_id: "principal:home-shell-recovery",
-    layout: { desktop: {}, taskbar: [], desktopHidden: [], desktopIconsVisible: true },
+    layout: { desktop: {}, taskbar: [], desktopApps: [], desktopIconsVisible: true },
     recent_targets: [],
     session: { windows: [] },
   },
diff --git a/scripts/home-shell-regression-smoke.mjs b/scripts/home-shell-regression-smoke.mjs
index 22ed5799b..a7d8da6c0 100644
--- a/scripts/home-shell-regression-smoke.mjs
+++ b/scripts/home-shell-regression-smoke.mjs
@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-const moduleVersion = "home-20260705a";
+const moduleVersion = "home-20260718d";
 const savedStatePatches = [];
 const requests = [];
 
@@ -45,6 +45,10 @@ class FakeElement {
       : { firstElementChild: null };
   }
 
+  append(...children) {
+    for (const child of children) this.appendChild(child);
+  }
+
   appendChild(child) {
     this.children.push(child);
     return child;
@@ -157,7 +161,7 @@ const summary = {
         browser: { x: 12, y: 12 },
       },
       taskbar: [],
-      desktopHidden: [],
+      desktopApps: ["wallet", "people", "inbox", "browser"],
       desktopIconsVisible: true,
     },
   },
diff --git a/scripts/home-shell-stale-hint-boot-smoke.mjs b/scripts/home-shell-stale-hint-boot-smoke.mjs
index 926314518..196a7e10b 100644
--- a/scripts/home-shell-stale-hint-boot-smoke.mjs
+++ b/scripts/home-shell-stale-hint-boot-smoke.mjs
@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-const moduleVersion = "home-20260705a";
+const moduleVersion = "home-20260718d";
 const requests = [];
 const localStorageValues = new Map([
   ["elastos.home.active-shell-hint", "home-cli"],
@@ -119,6 +119,10 @@ class FakeElement {
     this.listeners.get(type).push(callback);
   }
 
+  append(...children) {
+    for (const child of children) this.appendChild(child);
+  }
+
   appendChild(child) {
     child.parentElement = this;
     this.children.push(child);
@@ -232,7 +236,7 @@ function summaryFor(activeShell) {
     appearance: {},
     browser_state: {
       principal_id: "principal:home-shell-stale-hint",
-      layout: { desktop: {}, taskbar: [], desktopHidden: [], desktopIconsVisible: true },
+      layout: { desktop: {}, taskbar: [], desktopApps: [], desktopIconsVisible: true },
       recent_targets: [],
       session: { windows: [] },
     },
diff --git a/scripts/home-shell-switchback-recovery-smoke.mjs b/scripts/home-shell-switchback-recovery-smoke.mjs
index 2eb54f0a5..d4c4c339c 100644
--- a/scripts/home-shell-switchback-recovery-smoke.mjs
+++ b/scripts/home-shell-switchback-recovery-smoke.mjs
@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-const moduleVersion = "home-20260705a";
+const moduleVersion = "home-20260718d";
 const requests = [];
 const localStorageValues = new Map([
   ["elastos.home.active-shell-hint", "home-cli"],
@@ -85,6 +85,10 @@ class FakeElement {
     this.listeners.get(type).push(callback);
   }
 
+  append(...children) {
+    for (const child of children) this.appendChild(child);
+  }
+
   appendChild(child) {
     child.parentElement = this;
     this.children.push(child);
@@ -197,7 +201,7 @@ const summary = {
   appearance: {},
   browser_state: {
     principal_id: "principal:home-shell-switchback-recovery",
-    layout: { desktop: {}, taskbar: [], desktopHidden: [], desktopIconsVisible: true },
+    layout: { desktop: {}, taskbar: [], desktopApps: [], desktopIconsVisible: true },
     recent_targets: [],
     session: { windows: [] },
   },
diff --git a/scripts/home-shell-system-switch-smoke.mjs b/scripts/home-shell-system-switch-smoke.mjs
index 24f9921c5..4725d7525 100644
--- a/scripts/home-shell-system-switch-smoke.mjs
+++ b/scripts/home-shell-system-switch-smoke.mjs
@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-const moduleVersion = "home-20260705a";
+const moduleVersion = "home-20260718d";
 const requests = [];
 const windowListeners = new Map();
 const localStorageValues = new Map();
@@ -87,6 +87,10 @@ class FakeElement {
     this.listeners.get(type).push(callback);
   }
 
+  append(...children) {
+    for (const child of children) this.appendChild(child);
+  }
+
   appendChild(child) {
     child.parentElement = this;
     this.children.push(child);
@@ -201,7 +205,7 @@ const summary = {
   appearance: {},
   browser_state: {
     principal_id: "principal:home-shell-system-switch",
-    layout: { desktop: {}, taskbar: [], desktopHidden: [], desktopIconsVisible: true },
+    layout: { desktop: {}, taskbar: [], desktopApps: [], desktopIconsVisible: true },
     recent_targets: [],
     session: { windows: [] },
   },
diff --git a/scripts/vendor-ui-tokens.sh b/scripts/vendor-ui-tokens.sh
new file mode 100755
index 000000000..90cac77ff
--- /dev/null
+++ b/scripts/vendor-ui-tokens.sh
@@ -0,0 +1,99 @@
+#!/usr/bin/env bash
+# Vendors the shared UI token sheet (capsules/_shared/elastos-ui.css) and the
+# Inter font into each participating capsule's browser dir. Capsules stay
+# self-contained: no gateway route, no runtime sharing — just identical files
+# stamped from one source (Principle 10: one canonical path; Principle 12:
+# drift is contract drift).
+#
+#   ./scripts/vendor-ui-tokens.sh          # sync copies from the source
+#   ./scripts/vendor-ui-tokens.sh --check  # fail (exit 1) if any copy drifted
+set -euo pipefail
+
+cd "$(dirname "$0")/.."
+
+SOURCE_CSS="capsules/_shared/elastos-ui.css"
+SOURCE_JS="capsules/_shared/elastos-theme.js"
+SOURCE_FONT="capsules/_shared/fonts/Inter-latin-var.woff2"
+HEADER="/* GENERATED from ${SOURCE_CSS} — do not edit. Run \`just vendor-ui\`. */"
+JS_HEADER="/* GENERATED from ${SOURCE_JS} — do not edit. Run \`just vendor-ui\`. */"
+
+# Capsules that consume the shared tokens today. Extend as apps migrate.
+# Entries are the browser-serving dir relative to capsules/ — most apps serve
+# from a browser/ subdir; viewer-style capsules serve straight from their root.
+# home/browser is the shell host (unlock surface); home-gui/browser is the GUI
+# shell package. home-cli stays out: its terminal surface is capsule-local
+# xterm rendering by contract.
+TARGETS=(
+  home/browser
+  home-gui/browser
+  documents/browser
+  inbox/browser
+  system/browser
+  wallet/browser
+  chat-room/browser
+  library/browser
+  browser/browser
+  marketplace/browser
+  services/browser
+  archive-manager/browser
+  gba-emulator/browser
+  wallet-metamask/browser
+  wallet-unisat/browser
+  wallet-walletconnect/browser
+)
+
+MODE="${1:-sync}"
+FAILED=0
+
+stamped_source() {
+  printf '%s\n' "$HEADER"
+  cat "$SOURCE_CSS"
+}
+
+stamped_js_source() {
+  printf '%s\n' "$JS_HEADER"
+  cat "$SOURCE_JS"
+}
+
+for target_dir in "${TARGETS[@]}"; do
+  browser_dir="capsules/${target_dir}"
+  css_target="${browser_dir}/elastos-ui.css"
+  font_dir="${browser_dir}/assets/fonts"
+  font_target="${font_dir}/Inter-latin-var.woff2"
+
+  if [[ ! -d "$browser_dir" ]]; then
+    echo "[vendor-ui] MISSING capsule browser dir: ${browser_dir}" >&2
+    exit 1
+  fi
+
+  js_target="${browser_dir}/elastos-theme.js"
+
+  if [[ "$MODE" == "--check" ]]; then
+    if [[ ! -f "$css_target" ]] || ! diff -q <(stamped_source) "$css_target" >/dev/null 2>&1; then
+      echo "[vendor-ui] DRIFT: ${css_target} does not match ${SOURCE_CSS}" >&2
+      FAILED=1
+    fi
+    if [[ ! -f "$js_target" ]] || ! diff -q <(stamped_js_source) "$js_target" >/dev/null 2>&1; then
+      echo "[vendor-ui] DRIFT: ${js_target} does not match ${SOURCE_JS}" >&2
+      FAILED=1
+    fi
+    if [[ ! -f "$font_target" ]] || ! cmp -s "$SOURCE_FONT" "$font_target"; then
+      echo "[vendor-ui] DRIFT: ${font_target} does not match ${SOURCE_FONT}" >&2
+      FAILED=1
+    fi
+  else
+    mkdir -p "$font_dir"
+    stamped_source > "$css_target"
+    stamped_js_source > "$js_target"
+    cp "$SOURCE_FONT" "$font_target"
+    echo "[vendor-ui] stamped ${css_target}"
+  fi
+done
+
+if [[ "$MODE" == "--check" ]]; then
+  if [[ "$FAILED" -ne 0 ]]; then
+    echo "[vendor-ui] FAIL — run \`just vendor-ui\` and commit the result" >&2
+    exit 1
+  fi
+  echo "[vendor-ui] OK"
+fi
diff --git a/scripts/wallet-connector-transaction-smoke.mjs b/scripts/wallet-connector-transaction-smoke.mjs
index 594c8e889..cb3a74a4b 100755
--- a/scripts/wallet-connector-transaction-smoke.mjs
+++ b/scripts/wallet-connector-transaction-smoke.mjs
@@ -128,6 +128,14 @@ function createFakeProvider() {
         case "eth_accounts":
         case "eth_requestAccounts":
           return [ADDRESS];
+        case "wallet_requestPermissions":
+          // Connect path re-prompts eth_accounts permissions so a second
+          // MetaMask account can be granted; approval smokes don't call it,
+          // but the mock must not fail-closed on the method.
+          return [{ parentCapability: "eth_accounts" }];
+        case "wallet_revokePermissions":
+          // Connect clears the sticky origin grant before re-prompting.
+          return null;
         case "personal_sign":
           return "0xsigned";
         case "eth_sendTransaction":
@@ -226,6 +234,10 @@ async function runConnectorSmoke({ connectorId, scriptPath, installProvider }) {
     },
     addEventListener() {},
     dispatchEvent() {},
+    setInterval() {
+      return 0;
+    },
+    clearInterval() {},
   };
   globalThis.window.window = globalThis.window;
   installProvider(globalThis.window, provider);
diff --git a/scripts/wallet-product-safety-smoke.sh b/scripts/wallet-product-safety-smoke.sh
index e49fd16f9..d11541de2 100755
--- a/scripts/wallet-product-safety-smoke.sh
+++ b/scripts/wallet-product-safety-smoke.sh
@@ -64,6 +64,13 @@ assert(
     walletPreferences.includes("[data-wallet-remove-account]"),
   "Wallet approval methods must expose connector-owned add/open actions and Wallet-owned remove actions",
 );
+const metamaskConnector = read("capsules/wallet-metamask/browser/wallet-metamask.js");
+assert(
+  metamaskConnector.includes('method: "wallet_revokePermissions"') &&
+    metamaskConnector.includes('method: "wallet_requestPermissions"') &&
+    metamaskConnector.includes("eth_accounts"),
+  "MetaMask connect must revoke then re-prompt eth_accounts permissions so a second account can be linked",
+);
 
 console.log("[wallet-product-safety-smoke] static UI/connector invariants OK");
 NODE