diff --git a/services/web-ui/src/css/components/topbar.css b/services/web-ui/src/css/components/topbar.css
new file mode 100644
index 0000000..20ecbf7
--- /dev/null
+++ b/services/web-ui/src/css/components/topbar.css
@@ -0,0 +1,79 @@
+/* topbar.css ─ sticky 48px topbar with breadcrumb + scoped search */
+
+.wd-topbar {
+  position: sticky;
+  top: 0;
+  z-index: 30;
+  height: var(--topbar-h);
+  display: flex;
+  align-items: center;
+  padding: 0 12px 0 16px;
+  gap: 16px;
+  background: var(--bg-panel);
+  border-bottom: 1px solid var(--border-faint);
+  flex-shrink: 0;
+}
+
+.wd-topbar-left   { flex: 0 1 auto; min-width: 0; }
+.wd-topbar-center { flex: 1 1 360px; display: flex; justify-content: center; }
+.wd-topbar-right  { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; margin-left: auto; }
+
+/* Breadcrumb */
+.wd-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  font: 500 13px/1 var(--font);
+}
+.wd-breadcrumb-crumb { color: var(--text-secondary); }
+.wd-breadcrumb-crumb:last-child { color: var(--text-primary); font-weight: 600; }
+.wd-breadcrumb-sep {
+  width: 10px; height: 10px;
+  margin: 0 8px;
+  color: var(--text-tertiary);
+  flex-shrink: 0;
+}
+
+/* Page-scoped search */
+.wd-topbar-search {
+  width: 100%;
+  max-width: 360px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 10px;
+  background: var(--bg-deep);
+  border: 1px solid var(--border-faint);
+  border-radius: 4px;
+}
+.wd-topbar-search:focus-within {
+  border-color: var(--accent-border);
+  outline: 2px solid var(--accent-subtle);
+  outline-offset: 1px;
+}
+.wd-topbar-search svg {
+  width: 12px; height: 12px;
+  color: var(--text-tertiary);
+  flex-shrink: 0;
+}
+.wd-topbar-search input {
+  flex: 1;
+  background: transparent;
+  border: 0;
+  outline: 0;
+  font: 400 13px/1 var(--font-mono);
+  color: var(--text-primary);
+}
+.wd-topbar-search input::placeholder {
+  color: var(--text-tertiary);
+  font: 400 13px/1 var(--font-mono);
+}
+
+/* Vertical divider between secondary actions and primary CTA */
+.wd-topbar-divider {
+  width: 1px;
+  height: 20px;
+  background: var(--border-faint);
+  margin: 0 4px;
+}