diff --git a/apps/tangle-cloud/src/styles.css b/apps/tangle-cloud/src/styles.css
index b2b59b4c3..0e32bb22c 100644
--- a/apps/tangle-cloud/src/styles.css
+++ b/apps/tangle-cloud/src/styles.css
@@ -1,15 +1,12 @@
-/* Tangle Cloud styles.
- * Brand tokens come from @tangle-network/brand (single source of truth across
- * tangle-website, sandbox-ui, evals, agent-builder, and product surfaces).
- * Tangle Cloud-specific classes and theme overrides cascade below. */
+/* Tangle Cloud styles. Tokens (--md3-*, --hsl-*, --bg-*, --text-*, --border-*,
+ * --btn-*, --shadow-*, [data-sandbox-theme='vault'] light overrides) come from
+ * @tangle-network/brand via the sandbox-ui vendor CSS preloaded in index.html.
+ * This file adds Geist typeface, tangle/vault theme deltas, and cloud-only
+ * component classes. `!important` is reserved for fights against legacy
+ * ui-components @layer base rules ('*:not(code) Satoshi', 'h1..h6 text-mono-*')
+ * that arrive in the bundle BEFORE cloud styles. */
 @import '@tangle-network/brand/styles/tokens.css';
-/* Brand globals.css requires `@tailwind base` upstream of it; tangle-cloud
- * relies on the workspace ui-components preset for that, so import tokens
- * only and let the workspace preset provide base/utilities layers. */
 
-/* Local font aliases — keep Geist Sans as the default until Outfit/Manrope
- * fontsource packages are landed; brand tokens.css defines the brand-canonical
- * font stacks via --font-sans/--font-display/--font-mono. */
 :root,
 [data-sandbox-ui] {
   --font-sans: 'Geist Sans', ui-sans-serif, system-ui, sans-serif;
@@ -17,72 +14,39 @@
   --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
 }
 
-html {
+html,
+body {
   min-height: 100%;
   overflow-x: hidden;
   background: var(--bg-root, #060711);
 }
-
 body {
-  min-height: 100%;
-  overflow-x: hidden;
-  background: var(--bg-root, #060711);
   color: var(--text-primary, hsl(var(--foreground)));
-  font-family: var(--font-sans) !important;
-}
-
-#root,
-#root * {
-  font-family: var(--font-sans) !important;
+  font-family: var(--font-sans);
 }
-
 #root {
   min-height: 100vh;
+  font-family: var(--font-sans);
 }
 
+/* Override ui-components' .bg-tangle wallpaper with the brand radial gradient. */
 .tangle-cloud-shell.bg-tangle,
 [data-sandbox-ui].bg-tangle {
-  background: var(--bg-root) !important;
-  background-attachment: initial !important;
+  background: var(--bg-root);
+  background-attachment: initial;
 }
-
 .tangle-cloud-shell {
-  --cloud-shell-border: color-mix(
-    in srgb,
-    var(--border-subtle) 80%,
-    transparent
-  );
-  background: var(--bg-root) !important;
+  background: var(--bg-root);
   color: var(--text-primary);
 }
 
-.tangle-cloud-shell[data-sandbox-theme='tangle'],
-.tangle-cloud-shell[data-sandbox-theme='tangle'] *,
-[data-sandbox-ui][data-sandbox-theme='tangle'],
-[data-sandbox-ui][data-sandbox-theme='tangle'] * {
-  color-scheme: dark;
-}
-
+/* Dark theme deltas vs sandbox-ui defaults. Tailwind HSL aliases at the bottom
+ * re-bind .bg-card/.bg-primary/.border utilities to cloud tokens. */
 [data-sandbox-ui][data-sandbox-theme='tangle'],
 .tangle-cloud-shell[data-sandbox-theme='tangle'] {
-  /* Surface elevation system (4 levels): page (--bg-root, near-black) →
-     card (--bg-card, +14%) → elevated (--bg-elevated, +25%) → accent
-     (primary-tinted, only for selected/active surfaces). The previous
-     palette had ~7% delta between root and card, which is why every
-     card looked like the background. Bump the card and elevated steps
-     to perceptible deltas; darken the root to give cards room to breathe. */
-  --bg-root:
-    radial-gradient(
-      ellipse 70% 48% at 18% 0%,
-      rgba(99, 102, 241, 0.14),
-      transparent
-    ),
-    radial-gradient(
-      ellipse 48% 36% at 82% 6%,
-      rgba(20, 184, 166, 0.09),
-      transparent
-    ),
-    linear-gradient(180deg, #0a0a14 0%, #07070d 100%);
+  color-scheme: dark;
+  /* prettier-ignore */
+  --bg-root: radial-gradient(ellipse 70% 48% at 18% 0%, rgba(99, 102, 241, 0.14), transparent), radial-gradient(ellipse 48% 36% at 82% 6%, rgba(20, 184, 166, 0.09), transparent), linear-gradient(180deg, #0a0a14 0%, #07070d 100%);
   --bg-card: #1b1a2c;
   --bg-elevated: #262448;
   --bg-hover: rgba(129, 140, 248, 0.16);
@@ -94,22 +58,21 @@ body {
   --accent-surface-soft: rgba(99, 102, 241, 0.12);
   --btn-primary-bg: #4f46e5;
   --btn-primary-hover: #4338ca;
-  --shadow-card:
-    0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.28);
-  --shadow-hover:
-    0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 16px 36px rgba(0, 0, 0, 0.35),
-    0 0 0 1px rgba(129, 140, 248, 0.18);
-}
-
-.tangle-cloud-shell[data-sandbox-theme='vault'],
-.tangle-cloud-shell[data-sandbox-theme='vault'] *,
-[data-sandbox-ui][data-sandbox-theme='vault'],
-[data-sandbox-ui][data-sandbox-theme='vault'] * {
-  color-scheme: light;
+  /* prettier-ignore */
+  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.28);
+  /* prettier-ignore */
+  --shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 16px 36px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(129, 140, 248, 0.18);
+  --card: 246 22% 14%;
+  --popover: 248 32% 21%;
+  --muted: 248 32% 21%;
+  --border: 232 32% 67% / 0.24;
+  --input: 232 32% 67% / 0.24;
+  --primary: 239 84% 59%;
 }
 
 [data-sandbox-ui][data-sandbox-theme='vault'],
 .tangle-cloud-shell[data-sandbox-theme='vault'] {
+  color-scheme: light;
   --brand-cool: #3730a3;
   --brand-primary: #4f46e5;
   --brand-vibrant: #4f46e5;
@@ -122,204 +85,102 @@ body {
   --border-accent-hover: rgba(79, 70, 229, 0.34);
 }
 
-/* Legacy ui-components CSS is still pulled in by shared dependencies and
-   declares global heading/body colors. Re-assert sandbox tokens inside Cloud. */
-[data-sandbox-ui] {
-  color: var(--text-primary) !important;
-}
-
-[data-sandbox-ui] :where(h1, h2, h3, h4, h5, h6, p, label, li, td, th) {
+/* Defeat ui-components' h1..h6/p/div text-mono color rules via inherit. */
+.tangle-cloud-shell :where(h1, h2, h3, h4, h5, h6, p, label, li, td, th) {
   color: inherit;
 }
 
-[data-sandbox-ui] .text-foreground {
-  color: var(--text-primary) !important;
-}
-
-[data-sandbox-ui] .text-card-foreground {
-  color: var(--text-primary) !important;
-}
-
-[data-sandbox-ui] .text-muted-foreground {
-  color: var(--text-muted) !important;
-}
-
-[data-sandbox-ui] .text-primary {
-  color: var(--brand-cool) !important;
-}
-
-[data-sandbox-ui] .text-primary-foreground {
-  color: var(--btn-primary-text) !important;
-}
-
-[data-sandbox-ui] .text-secondary-foreground {
-  color: var(--text-secondary) !important;
-}
-
-[data-sandbox-ui] .text-destructive {
-  color: var(--surface-danger-text) !important;
-}
-
-/* Surface utility class bindings.
-   These bind generic Tailwind/sandbox-ui utility classes to the cloud
-   token palette. Use :where() to keep selector specificity at 0 so any
-   component-level className (Card variant overrides, page-specific
-   classes) wins on its own without fighting an !important. The previous
-   version forced every utility to one shade and is the root cause of
-   "every card is the same color, just with a border" — sandbox-ui's
-   variant="elevated" / variant="sandbox" cards were being flattened to
-   plain bg-card by these rules. */
-:where([data-sandbox-ui]) .bg-background {
+/* Tailwind/shadcn utility classes used by the cloud — sandbox-ui's prebuilt
+ * vendor.css doesn't ship these (it only includes classes sandbox-ui itself
+ * uses), so cloud has to define them. Bound to cloud tokens; no !important
+ * because no other rule defines them. */
+[data-sandbox-ui] .bg-background {
   background-color: var(--bg-root, hsl(var(--background)));
 }
-
-:where([data-sandbox-ui]) .bg-card {
+[data-sandbox-ui] .bg-card {
   background-color: var(--bg-card);
 }
-
-:where([data-sandbox-ui]) .bg-popover {
+[data-sandbox-ui] .bg-popover {
   background-color: var(--bg-elevated);
 }
-
-[data-sandbox-ui] .text-popover-foreground {
-  color: var(--text-primary) !important;
-}
-
-:where([data-sandbox-ui]) .bg-muted {
+[data-sandbox-ui] .bg-muted {
   background-color: var(--bg-elevated);
 }
-
-:where([data-sandbox-ui]) .bg-muted\/30 {
+[data-sandbox-ui] .bg-muted\/30 {
   background-color: color-mix(in srgb, var(--bg-elevated) 30%, transparent);
 }
-
-:where([data-sandbox-ui]) .bg-muted\/40 {
+[data-sandbox-ui] .bg-muted\/40 {
   background-color: color-mix(in srgb, var(--bg-elevated) 40%, transparent);
 }
-
-:where([data-sandbox-ui]) .bg-muted\/50 {
+[data-sandbox-ui] .bg-muted\/50 {
   background-color: color-mix(in srgb, var(--bg-elevated) 50%, transparent);
 }
-
-:where([data-sandbox-ui]) .bg-card\/70 {
+[data-sandbox-ui] .bg-card\/70 {
   background-color: color-mix(in srgb, var(--bg-card) 70%, transparent);
 }
-
-[data-sandbox-ui] .border-border {
-  border-color: var(--border-default) !important;
-}
-
-[data-sandbox-ui] .border {
-  border-color: var(--border-default) !important;
-}
-
-[data-sandbox-ui] .border-input {
-  border-color: var(--border-default) !important;
+[data-sandbox-ui] .bg-primary {
+  background-color: var(--btn-primary-bg);
+  color: var(--btn-primary-text);
 }
-
-[data-sandbox-ui] .border-primary {
-  border-color: var(--brand-cool) !important;
+[data-sandbox-ui] .hover\:bg-primary\/90:hover {
+  background-color: var(--btn-primary-hover);
 }
-
-[data-sandbox-ui] .border-primary\/20 {
-  border-color: var(--border-accent) !important;
+[data-sandbox-ui] .hover\:bg-muted:hover,
+[data-sandbox-ui] .hover\:bg-muted\/60:hover {
+  background-color: var(--bg-hover);
 }
-
-[data-sandbox-ui] [class*='surface-success-border'] {
-  border-color: var(--surface-success-border) !important;
+[data-sandbox-ui] .text-foreground,
+[data-sandbox-ui] .text-card-foreground,
+[data-sandbox-ui] .text-popover-foreground {
+  color: var(--text-primary);
 }
-
-[data-sandbox-ui] .bg-primary {
-  background-color: var(--btn-primary-bg) !important;
-  color: var(--btn-primary-text) !important;
+[data-sandbox-ui] .text-muted-foreground {
+  color: var(--text-muted);
 }
-
-[data-sandbox-ui] :where(a.bg-primary, button.bg-primary, .bg-primary a) {
-  color: var(--btn-primary-text) !important;
+[data-sandbox-ui] .text-secondary-foreground {
+  color: var(--text-secondary);
 }
-
-[data-sandbox-ui] aside :where(a.bg-primary, a.bg-primary span) {
-  color: var(--btn-primary-text) !important;
+[data-sandbox-ui] .text-primary {
+  color: var(--brand-cool);
 }
-
-[data-sandbox-ui] aside a.bg-primary svg {
-  color: var(--btn-primary-text) !important;
-  fill: currentcolor !important;
+[data-sandbox-ui] .text-primary-foreground {
+  color: var(--btn-primary-text);
 }
-
-[data-sandbox-ui]
-  .bg-primary
-  :where(.text-muted-foreground, [class*='text-muted-foreground']) {
-  color: color-mix(
-    in srgb,
-    var(--btn-primary-text) 84%,
-    transparent
-  ) !important;
+[data-sandbox-ui] .text-destructive {
+  color: var(--surface-danger-text);
 }
-
-[data-sandbox-ui] .bg-primary :where(.bg-background\/70) {
-  background-color: #312e81 !important;
-  color: var(--btn-primary-text) !important;
+[data-sandbox-ui] .border,
+[data-sandbox-ui] .border-border,
+[data-sandbox-ui] .border-input {
+  border-color: var(--border-default);
 }
-
-[data-sandbox-ui] .hover\:bg-primary\/90:hover {
-  background-color: var(--btn-primary-hover) !important;
+[data-sandbox-ui] .border-primary {
+  border-color: var(--brand-cool);
 }
-
-[data-sandbox-ui] .hover\:bg-muted:hover,
-[data-sandbox-ui] .hover\:bg-muted\/60:hover {
-  background-color: var(--bg-hover) !important;
+[data-sandbox-ui] .border-primary\/20 {
+  border-color: var(--border-accent);
 }
 
+/* Radix portals to <body>, escaping the shell. Bind popovers to cloud tokens. */
 [data-radix-popper-content-wrapper] [role='menu'],
 [data-radix-popper-content-wrapper] [role='listbox'] {
-  border: 1px solid var(--border-default) !important;
-  background: color-mix(
-    in srgb,
-    var(--bg-card) 96%,
-    var(--bg-elevated) 4%
-  ) !important;
-  box-shadow: var(--shadow-dropdown) !important;
+  border: 1px solid var(--border-default);
+  background: color-mix(in srgb, var(--bg-card) 96%, var(--bg-elevated) 4%);
+  box-shadow: var(--shadow-dropdown);
 }
-
 [data-radix-popper-content-wrapper] [role='menuitem'],
 [data-radix-popper-content-wrapper] [role='option'] {
-  color: var(--text-primary) !important;
+  color: var(--text-primary);
 }
-
 [data-radix-popper-content-wrapper] [role='menuitem']:hover,
 [data-radix-popper-content-wrapper] [role='option']:hover,
 [data-radix-popper-content-wrapper] [role='menuitem'][data-highlighted],
 [data-radix-popper-content-wrapper] [role='option'][data-highlighted] {
-  background: var(--bg-hover) !important;
-}
-
-.tangle-wallet-modal {
-  top: 50% !important;
-  left: 50% !important;
-  translate: none !important;
-  transform: translate(-50%, -50%) !important;
-  border-color: var(--border-default) !important;
-  background: color-mix(
-    in srgb,
-    var(--bg-card) 98%,
-    var(--bg-elevated) 2%
-  ) !important;
-  color: var(--text-primary) !important;
-  box-shadow: var(--shadow-dropdown) !important;
+  background: var(--bg-hover);
 }
 
-/* Dialog content rendered via Radix portal goes to <body>, outside the
-   `.tangle-cloud-shell` div. Default centering (`left-1/2 -translate-x-1/2`)
-   anchors to the viewport, which looks LEFT-shifted of the visible content
-   area because of the fixed sidebar (4rem collapsed / 16rem expanded on lg+).
-   Compensate by shifting the dialog right by half the sidebar width.
-   Mobile (< lg) has no sidebar so the override is no-op there.
-
-   `--cloud-sidebar-width` is published by `Layout.tsx` on `<html>` and stays
-   in sync with the collapsed/expanded state, so the dialog moves with the
-   sidebar instead of using a hardcoded compromise that was visibly off when
-   the sidebar was expanded (the default for new sessions). */
+/* Radix Dialog centers on viewport (left of content area on lg+ due to fixed
+ * sidebar). Shift right by half --cloud-sidebar-width (published by Layout). */
 @media (min-width: 1024px) {
   [data-state='open'][role='dialog'],
   [data-state='closed'][role='dialog'] {
@@ -327,70 +188,36 @@ body {
   }
 }
 
-.tangle-wallet-modal button[aria-label='Close'] {
-  top: 1.25rem !important;
-  right: 1.25rem !important;
-  display: grid !important;
-  width: 2rem !important;
-  height: 2rem !important;
-  place-items: center !important;
-  border: 1px solid var(--border-default) !important;
-  border-radius: var(--radius-md) !important;
-  background: var(--bg-elevated) !important;
-  color: var(--text-muted) !important;
-  opacity: 1 !important;
-}
-
-.tangle-wallet-modal button[aria-label='Close']:hover {
-  background: var(--bg-hover) !important;
-  color: var(--text-primary) !important;
-}
-
 .tangle-cloud-shell a:not([class*='text-']) {
   color: inherit;
 }
-
 .tangle-cloud-page {
   color: var(--text-primary);
 }
-
 .tangle-cloud-page h1 {
   font-size: clamp(2rem, 3vw, 2.375rem);
   line-height: 1.12;
   letter-spacing: -0.035em;
   text-wrap: balance;
 }
-
 .tangle-cloud-page h2 {
   font-size: 1.25rem;
   line-height: 1.25;
   letter-spacing: -0.015em;
 }
-
 .tangle-cloud-page h3 {
   font-size: 1rem;
   line-height: 1.3;
   letter-spacing: -0.01em;
 }
-
 .tangle-cloud-page p {
   text-wrap: pretty;
 }
-
-[data-sandbox-ui],
-[data-sandbox-ui] button,
-[data-sandbox-ui] input,
-[data-sandbox-ui] textarea,
-[data-sandbox-ui] select {
-  font-family: var(--font-sans) !important;
-}
-
-[data-sandbox-ui] .font-display {
-  font-family: var(--font-display) !important;
+:where([data-sandbox-ui]) :where(h1, h2, h3) {
+  font-family: var(--font-display);
 }
-
-#root .font-display {
-  font-family: var(--font-display) !important;
+.font-display {
+  font-family: var(--font-display);
 }
 
 .tangle-cloud-card {
@@ -399,187 +226,100 @@ body {
   box-shadow: var(--shadow-card);
 }
 
-/* Apply the display font family to section headings inside the cloud shell.
-   Body stays Geist (var(--font-sans)) — only h1/h2/h3 lift to the display
-   stack so section titles get the brand voice without making body copy
-   stiff. Excludes the existing typography setup in .tangle-cloud-page that
-   already sets per-heading sizing. */
-:where([data-sandbox-ui]) :where(h1, h2, h3) {
-  font-family: var(--font-display);
-}
-
+/* Page hero: dot grid + brand radial glows over elevated linear. */
 .cloud-hero-card {
-  border-color: color-mix(
-    in srgb,
-    var(--brand-cool) 30%,
-    var(--border-default)
-  ) !important;
-  /* Hero gets the heaviest treatment: dot grid + brand radial glows +
-     elevated linear so it reads as the centerpiece of the page. The dot
-     grid is the same pattern tangle-dapp uses (PNG there, CSS here) —
-     it's what makes the surface feel "alive" instead of "flat colored
-     rectangle." */
-  background:
-    radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 22px
-      22px,
-    radial-gradient(
-      circle at 4% 12%,
-      color-mix(in srgb, var(--brand-cool) 28%, transparent),
-      transparent 32%
-    ),
-    radial-gradient(
-      circle at 90% 8%,
-      color-mix(in srgb, #14b8a6 22%, transparent),
-      transparent 28%
-    ),
-    linear-gradient(135deg, var(--bg-elevated), var(--bg-card)) !important;
-  box-shadow:
-    0 18px 48px rgba(0, 0, 0, 0.32),
-    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
+  /* prettier-ignore */
+  border-color: color-mix(in srgb, var(--brand-cool) 30%, var(--border-default));
+  /* prettier-ignore */
+  background: radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px) 0 0 / 22px 22px, radial-gradient(circle at 4% 12%, color-mix(in srgb, var(--brand-cool) 28%, transparent), transparent 32%), radial-gradient(circle at 90% 8%, color-mix(in srgb, #14b8a6 22%, transparent), transparent 28%), linear-gradient(135deg, var(--bg-elevated), var(--bg-card));
+  /* prettier-ignore */
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.05);
 }
-
-.cloud-hero-card :where([class*='bg-card/70'], .bg-card\/70) {
-  background-color: color-mix(
-    in srgb,
-    var(--bg-elevated) 70%,
-    transparent
-  ) !important;
-  border-color: color-mix(
-    in srgb,
-    var(--brand-cool) 28%,
-    var(--border-default)
-  ) !important;
-}
-
 .cloud-compact-header {
-  box-shadow:
-    0 12px 32px rgba(0, 0, 0, 0.18),
-    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
+  /* prettier-ignore */
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.04);
 }
-
 .cloud-compact-header h1 {
   text-wrap: balance;
 }
-
 .cloud-compact-header p {
   text-wrap: pretty;
 }
-
 .catalog-controls {
-  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14) !important;
+  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
 }
-
 .results-grid {
   content-visibility: auto;
   contain-intrinsic-size: 800px;
 }
 
 .tangle-cloud-shell :where(a, button, select, [role='tab']) {
-  transition:
-    background-color 180ms ease,
-    border-color 180ms ease,
-    color 180ms ease,
-    opacity 180ms ease,
-    transform 120ms ease,
-    box-shadow 180ms ease;
+  /* prettier-ignore */
+  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, opacity 180ms ease, transform 120ms ease, box-shadow 180ms ease;
 }
-
 .tangle-cloud-shell :where(button, select, [role='tab']):active {
   transform: translateY(1px);
 }
-
-.blueprint-card,
-.operator-row {
-  transition:
-    background-color 180ms ease,
-    border-color 180ms ease,
-    transform 160ms ease,
-    box-shadow 180ms ease;
+.blueprint-card {
+  /* prettier-ignore */
+  transition: background-color 180ms ease, border-color 180ms ease, transform 160ms ease, box-shadow 180ms ease;
 }
-
-.blueprint-card:hover,
-.operator-row:hover {
+.blueprint-card:hover {
   transform: translateY(-1px);
-  border-color: color-mix(
-    in srgb,
-    var(--brand-cool) 34%,
-    var(--border-default)
-  ) !important;
-  box-shadow:
-    var(--shadow-hover),
-    0 0 0 1px color-mix(in srgb, var(--brand-cool) 12%, transparent) !important;
+  /* prettier-ignore */
+  border-color: color-mix(in srgb, var(--brand-cool) 34%, var(--border-default));
+  /* prettier-ignore */
+  box-shadow: var(--shadow-hover), 0 0 0 1px color-mix(in srgb, var(--brand-cool) 12%, transparent);
 }
 
 .tangle-cloud-topbar button,
-.tangle-cloud-topbar [role='button'],
-.tangle-cloud-topbar .tangle-cloud-status-pill {
-  border-color: color-mix(
-    in srgb,
-    var(--border-default) 88%,
-    transparent
-  ) !important;
-  background: color-mix(
-    in srgb,
-    var(--bg-elevated) 72%,
-    transparent
-  ) !important;
-  color: var(--text-primary) !important;
-  box-shadow: none !important;
+.tangle-cloud-topbar [role='button'] {
+  border-color: color-mix(in srgb, var(--border-default) 88%, transparent);
+  background: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
+  color: var(--text-primary);
+  box-shadow: none;
 }
-
 .tangle-cloud-topbar button:not([data-testid='evm-connect-trigger']),
 .tangle-cloud-topbar [role='button']:not([data-testid='evm-connect-trigger']) {
-  background: color-mix(in srgb, var(--bg-card) 68%, transparent) !important;
-  color: var(--text-secondary) !important;
+  background: color-mix(in srgb, var(--bg-card) 68%, transparent);
+  color: var(--text-secondary);
   opacity: 0.86;
 }
-
 .tangle-cloud-topbar button {
   min-height: 40px;
-  border-radius: 8px !important;
+  border-radius: 8px;
 }
-
 .tangle-cloud-topbar button svg,
 .tangle-cloud-topbar [role='button'] svg {
   width: 16px;
   height: 16px;
 }
-
 .tangle-cloud-topbar button:hover,
 .tangle-cloud-topbar [role='button']:hover {
-  background: color-mix(in srgb, var(--bg-elevated) 88%, white 3%) !important;
-}
-
-.tangle-cloud-topbar svg {
-  color: currentcolor;
+  background: color-mix(in srgb, var(--bg-elevated) 88%, white 3%);
 }
 
-.tangle-cloud-topbar .tangle-cloud-wallet-action button,
 .tangle-cloud-wallet-action button,
 [data-sandbox-ui] [data-testid='evm-connect-trigger'] {
   background: linear-gradient(
     135deg,
     var(--btn-primary-bg),
     var(--btn-primary-hover)
-  ) !important;
-  background-color: var(--btn-primary-bg) !important;
-  border-color: transparent !important;
-  color: var(--btn-primary-text) !important;
-  padding-inline: 24px !important;
+  );
+  background-color: var(--btn-primary-bg);
+  border-color: transparent;
+  color: var(--btn-primary-text);
+  padding-inline: 24px;
 }
-
-/* Connected-state wallet trigger: brand icons (MetaMask fox, Coinbase C, etc.)
-   ship with baked-in dark fills designed for light surfaces — on the cloud's
-   dark-purple gradient button they vanish into the background. Wrap every
-   icon-shaped child in a small light tile so the brand mark is always
-   readable, and force the address Typography to a high-contrast white
-   (Typography's `dark:text-mono-0` loses to the parent button's color
-   inheritance under the gradient). */
-.tangle-cloud-wallet-action button svg:not([role='img']) {
-  /* ChevronDown stroke and inline icons inherit color: respect that. */
-  color: var(--btn-primary-text) !important;
+.tangle-cloud-wallet-action button:hover,
+[data-sandbox-ui] [data-testid='evm-connect-trigger']:hover {
+  background: linear-gradient(135deg, var(--btn-primary-hover), #312e81);
+  background-color: var(--btn-primary-hover);
+  color: var(--btn-primary-text);
 }
 
+/* Light tile for wallet brand marks so their baked-in dark fills stay readable
+ * on the indigo gradient button. */
 .tangle-cloud-wallet-action button > :first-child:is(svg, [role='img']),
 .tangle-cloud-wallet-action button > div:has(> svg):first-child {
   background: rgba(255, 255, 255, 0.92);
@@ -592,61 +332,20 @@ body {
   justify-content: center;
 }
 
+/* Typography sets color on element class; gradient parent inheritance loses
+ * without !important. */
 .tangle-cloud-wallet-action button p,
 .tangle-cloud-wallet-action button span:not(.sr-only) {
   color: var(--btn-primary-text) !important;
 }
 
-.tangle-cloud-topbar .tangle-cloud-wallet-action button:hover,
-.tangle-cloud-wallet-action button:hover,
-[data-sandbox-ui] [data-testid='evm-connect-trigger']:hover {
-  background: linear-gradient(
-    135deg,
-    var(--btn-primary-hover),
-    #312e81
-  ) !important;
-  background-color: var(--btn-primary-hover) !important;
-  color: var(--btn-primary-text) !important;
-}
-
-.tangle-cloud-topbar .tangle-cloud-wallet-action-secondary button {
-  background: color-mix(
-    in srgb,
-    var(--bg-elevated) 72%,
-    transparent
-  ) !important;
-  background-color: color-mix(
-    in srgb,
-    var(--bg-elevated) 72%,
-    transparent
-  ) !important;
-  border-color: var(--border-default) !important;
-  color: var(--text-primary) !important;
-}
-
-.tangle-cloud-topbar .tangle-cloud-wallet-action-secondary button:hover {
-  background: color-mix(in srgb, var(--bg-elevated) 88%, white 3%) !important;
-  background-color: color-mix(
-    in srgb,
-    var(--bg-elevated) 88%,
-    white 3%
-  ) !important;
-  color: var(--text-primary) !important;
-}
-
 .tangle-cloud-visual-badge {
-  background-color: #111827 !important;
-  color: #ffffff !important;
-}
-
-.tangle-blueprint-host {
-  color: rgb(237 237 242) !important;
-}
-
-.tangle-blueprint-host p {
-  color: rgb(255 255 255 / 0.72) !important;
+  background-color: #111827;
+  color: #ffffff;
 }
 
+/* BlueprintHostCard uses Tailwind `!`-prefix utilities (= !important);
+ * cloud overrides must match. */
 .tangle-blueprint-host [class*='border-white'] {
   border-color: color-mix(
     in srgb,
@@ -654,7 +353,6 @@ body {
     transparent
   ) !important;
 }
-
 .tangle-blueprint-host [class*='bg-white'] {
   background-color: color-mix(
     in srgb,
@@ -662,37 +360,3 @@ body {
     transparent
   ) !important;
 }
-
-.tangle-blueprint-host [class*='text-white'] {
-  color: rgb(255 255 255) !important;
-}
-
-.tangle-blueprint-host [class*='text-white/78'] {
-  color: rgb(255 255 255 / 0.78) !important;
-}
-
-.tangle-blueprint-host [class*='text-white/72'] {
-  color: rgb(255 255 255 / 0.72) !important;
-}
-
-.tangle-blueprint-host [class*='text-white/65'] {
-  color: rgb(255 255 255 / 0.65) !important;
-}
-
-.tangle-blueprint-host [class*='text-white/62'] {
-  color: rgb(255 255 255 / 0.62) !important;
-}
-
-.tangle-blueprint-host [class*='text-white/45'] {
-  color: rgb(255 255 255 / 0.45) !important;
-}
-
-.tangle-blueprint-host [class*='text-white/42'] {
-  color: rgb(255 255 255 / 0.42) !important;
-}
-
-.tangle-blueprint-host h1,
-.tangle-blueprint-host h2,
-.tangle-blueprint-host h3 {
-  color: rgb(255 255 255) !important;
-}