style(tangle-cloud): slim styles.css — drop ~80% of overrides + !important

[tangletools]

Summary

The cloud dapp's apps/tangle-cloud/src/styles.css was 698 LOC with 109 !important declarations — every single !important in apps/tangle-cloud/src/ lived in this one file. By comparison, apps/tangle-dapp/src/styles.css (the staking dapp) is 27 LOC with 2 !important. The gap was structural: the cloud dapp was fighting its own design system at every level instead of working with it.

This PR slims the file to 362 LOC (-48%) with 3 !important (-97%).

	Before	After	Change
styles.css LOC	698	362	-48%
!important declarations	109	3	-97%
CSS bundle	179.9K	175.9K	-4K

What changed

1. Drop redundant token re-declarations. Sandbox-ui's brand tokens already define the full token system (--md3-*, --hsl-*, --bg-*, --text-*, --border-*, --btn-*, --shadow-*, plus light theme via [data-sandbox-theme='vault']). Cloud now only declares the deliberate cloud deltas: richer card/elevated steps, indigo primary, brand-tinted root gradient, sharper shadows.

2. Re-bind Tailwind/shadcn HSL aliases on the dark theme block. --card, --popover, --muted, --border, --input, --primary are pointed at cloud-tuned HSL values, so .bg-card / .bg-primary / .border resolve to cloud tokens without per-utility !important overrides.

3. Replace the [data-sandbox-ui] :where(...) { color !important } storm with a single .tangle-cloud-shell :where(h1..h6, p, label, ...) { color: inherit }. Selector specificity already wins over libs/ui-components/src/css/layer-base.css rules (h1..h6 { @apply text-mono-* }, p,div,span,label { @apply text-mono-* }).

4. Drop the * { color-scheme } and #root * { font-family } over-applications. Cloud's styles.css cascades AFTER the legacy ui-components Tailwind CSS in the bundled output (verified by inspecting the built index-*.css), so font-family + color win on selector specificity alone — no !important needed.

5. Remove dead rules — .tangle-wallet-modal (class never applied; actual wallet modal renders via Radix Dialog), .operator-row, .tangle-cloud-wallet-action-secondary, .tangle-cloud-status-pill (no consumers anywhere in apps/ or libs/).

6. Keep the [role='dialog'] margin-left rule — the recently-fixed wallet modal centering bug (PR fix(tangle-cloud): center wallet modal in visible content area, not viewport #3227) stays intact.

7. Trim 7 of the 11 .tangle-blueprint-host [class*='text-white/*'] rules. The two retained (border-white, bg-white) are kept because BlueprintHostCard.tsx uses Tailwind !-prefix utilities which compile to !important, so cloud overrides need matching !important by definition.

The 3 surviving !important

Each one is defensible:

• .tangle-cloud-wallet-action button p — Typography compiles to inline color: ... on the element class; parent gradient inheritance loses without !important.
• .tangle-blueprint-host [class*='border-white'] — fights Tailwind !-prefix utilities in BlueprintHostCard.tsx.
• .tangle-blueprint-host [class*='bg-white'] — same.

Test plan

• pnpm nx typecheck tangle-cloud clean
• pnpm nx lint tangle-cloud clean
• pnpm nx test tangle-cloud clean
• pnpm nx build tangle-cloud clean
• Playwright screenshots in dark (tangle) and light (vault) themes on 5 routes (/blueprints, /blueprints/sandbox, /blueprints/trading, /instances, /operators) confirm visual parity vs origin/develop
• Wallet modal centering rule ([role='dialog'] margin-left) preserved — sidebar collapsed AND expanded
• Active sidebar item retains indigo highlight (.bg-primary rebinding verified)
• Heading + body color rendering preserved across both themes
• Hero card brand glow + dot grid preserved
• Connect Wallet button gradient + brand-icon tile preserved

Before/after Playwright screenshots saved to /tmp/dapp-browser-test/{before,after}/{tangle,vault}-{route}.png — will attach in a follow-up comment.