diff --git a/docs/release-control/v6/internal/subsystems/deployment-installability.md b/docs/release-control/v6/internal/subsystems/deployment-installability.md
index efa5d4e8c8..606c88a4ab 100644
--- a/docs/release-control/v6/internal/subsystems/deployment-installability.md
+++ b/docs/release-control/v6/internal/subsystems/deployment-installability.md
@@ -2814,6 +2814,33 @@ promotion and rollback boundary unchanged.
 `brace-expansion` floors to 1.1.21 and 5.0.12 and the reviewed `dompurify`
 floor to 3.4.16, so a later downgrade is rejected.
 
+### braces removed from the frontend dependency graph (3 Oct 2026)
+
+`GHSA-vfj7-8cjw-p6xm` affects every `braces` release (up to 3.0.3) and has no
+patched version, so the required frontend dependency audit failed with seven
+high findings on every pull request that changes the dependency graph. All of
+them were dev-only: Tailwind CSS 3 reached `braces` through `chokidar`,
+`fast-glob` and `micromatch`, and `jscpd` 4 through `@jscpd/finder` and
+`fast-glob`. Every `fast-glob` and `micromatch` release depends on `braces`, so
+an override cannot close it. `frontend-modern` therefore moves to Tailwind CSS
+4.3.3 through `@tailwindcss/vite` (dropping `postcss.config.js`,
+`tailwind.config.js`, `autoprefixer` and the direct `postcss` dependency) and to
+`jscpd` 5.4.0, which has no runtime dependencies; `npm audit` over the full graph
+then reports no findings. `npm audit --omit=dev` was already clean, so no shipped
+bundle code changes for security reasons, and the installer, artifact, signing,
+promotion and rollback boundary is unchanged. The stylesheet keeps the v3
+rendering: it pins the v3 palette, font stacks and line heights, keeps the v3
+cascade order, and restores the v3 `space-*`, `divide-*`, hover, border, ring,
+placeholder and button-cursor behaviour. Tailwind CSS 4 is tested on Safari
+16.4, Chrome 111 and Firefox 128 and later. The production stylesheet itself
+needs cascade layers (Safari 15.4, Chrome 99, Firefox 97), because the build
+lowers media range syntax and nesting and folds palette opacity modifiers to
+static colors; that is below the container-query floor (Safari 16, Chrome 105,
+Firefox 110) the platform tables already required.
+`frontend-modern/src/security/__tests__/dependencySecurity.test.ts` now rejects
+any locked `braces` copy, so the advisory cannot return through a later
+dependency, and drops the `autoprefixer` floor because the package is gone.
+
 ### Reviewed @types/node 26.6.2 refresh
 
 The 2026-09-23 `npm-minor-patch` group (Dependabot #2189) advances the
diff --git a/frontend-modern/DESIGN_SYSTEM.md b/frontend-modern/DESIGN_SYSTEM.md
index 194f098d15..a15ecd9d7c 100644
--- a/frontend-modern/DESIGN_SYSTEM.md
+++ b/frontend-modern/DESIGN_SYSTEM.md
@@ -6,7 +6,7 @@ This document outlines the standard UI primitives, tokens, and components that c
 
 ## Core Principles
 1. **Never hardcode hex values** or use static `gray` / `white` / `slate` labels for structural layout colors. 
-2. Use the **Semantic Tokens**. These resolve dynamically inside `tailwind.config.js` via `index.css` CSS-variables to flawlessly support light/dark transitions without needing a literal `dark:` prefix in the layout classes.
+2. Use the **Semantic Tokens**. These are declared as Tailwind `@theme` colors in `index.css` and resolve through its CSS variables to flawlessly support light/dark transitions without needing a literal `dark:` prefix in the layout classes.
 
 ## Enforcement
 - `npm run lint` is a hard gate for design-system regressions in `src/components` and `src/pages`.
diff --git a/frontend-modern/package-lock.json b/frontend-modern/package-lock.json
index b7fa03015b..6810a21570 100644
--- a/frontend-modern/package-lock.json
+++ b/frontend-modern/package-lock.json
@@ -21,22 +21,21 @@
         "@eslint/js": "^9.39.2",
         "@solidjs/testing-library": "^0.8.5",
         "@tailwindcss/typography": "^0.5.19",
+        "@tailwindcss/vite": "^4.3.3",
         "@testing-library/jest-dom": "^6.5.0",
         "@types/node": "^26.6.2",
         "@types/qrcode": "^1.5.6",
         "@typescript-eslint/eslint-plugin": "^8.70.0",
         "@typescript-eslint/parser": "^8.70.0",
         "@vitest/coverage-v8": "^4.1.11",
-        "autoprefixer": "^10.6.1",
         "eslint": "^9.20.0",
         "eslint-config-prettier": "^10.0.0",
         "eslint-plugin-solid": "^0.18.0",
         "globals": "^17.12.0",
-        "jscpd": "^4.0.8",
+        "jscpd": "^5.4.0",
         "jsdom": "^24.1.0",
-        "postcss": "^8.5.28",
         "prettier": "3.9.8",
-        "tailwindcss": "^3.4.18",
+        "tailwindcss": "^4.3.3",
         "typescript": "^5.3.0",
         "typescript-eslint": "^8.70.0",
         "vite": "^6.4.3",
@@ -52,19 +51,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@alloc/quick-lru": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
-      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/@asamuzakjp/css-color": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-3.2.0.tgz",
@@ -395,17 +381,6 @@
         "node": ">=18"
       }
     },
-    "node_modules/@colors/colors": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
-      "integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=0.1.90"
-      }
-    },
     "node_modules/@csstools/color-helpers": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-5.1.0.tgz",
@@ -1295,108 +1270,6 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
-    "node_modules/@jscpd/badge-reporter": {
-      "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/@jscpd/badge-reporter/-/badge-reporter-4.2.5.tgz",
-      "integrity": "sha512-ktXrjPeRaRyUDktxTroSA2/w5sshXpQplWkUuq/e6XqEpKBSbGEnwZLIaegSijOrMwIcCXPQ9k4feXIz5eVJNA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "badgen": "^3.2.3",
-        "colors": "^1.4.0",
-        "fs-extra": "^11.2.0"
-      }
-    },
-    "node_modules/@jscpd/core": {
-      "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/@jscpd/core/-/core-4.2.5.tgz",
-      "integrity": "sha512-Esf2deHxaoNEjePwf2jqP6Urzj+BAOsJVPFLbnnSsV+q7rLNMcn0UEEoKBXIOOt4qMkrkhl9DfwpMyPPOr6GkQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "eventemitter3": "^5.0.1"
-      }
-    },
-    "node_modules/@jscpd/finder": {
-      "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/@jscpd/finder/-/finder-4.2.5.tgz",
-      "integrity": "sha512-Rw0dtwp/EeLANbujOubuQeJIuXXXkAlT+f5geZhwkB9TxEYP0hqNrdOJUK/TDBKQjRGrOizEtdNy+S4UlbdzOQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jscpd/core": "4.2.5",
-        "@jscpd/tokenizer": "4.2.5",
-        "blamer": "^1.0.6",
-        "bytes": "^3.1.2",
-        "cli-table3": "^0.6.5",
-        "colors": "^1.4.0",
-        "fast-glob": "^3.3.2",
-        "fs-extra": "^11.2.0",
-        "markdown-table": "^2.0.0",
-        "pug": "^3.0.4"
-      }
-    },
-    "node_modules/@jscpd/html-reporter": {
-      "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/@jscpd/html-reporter/-/html-reporter-4.2.5.tgz",
-      "integrity": "sha512-zMMIKbvi43dMgeNeHXlHQy1ovf+KJrzNlUubaBvCAVatqP23ksW8d3fmsevIQG9mMMTH0D1xOz+SxUn1FREOPg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "colors": "1.4.0",
-        "fs-extra": "^11.2.0",
-        "pug": "^3.0.4"
-      }
-    },
-    "node_modules/@jscpd/tokenizer": {
-      "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/@jscpd/tokenizer/-/tokenizer-4.2.5.tgz",
-      "integrity": "sha512-UM8Wx/jwahmflqQExlcKMQTYOAy58N/fn7Pv6NYrkD3EZm/FTk7gW97wkXy5aDE1Ts9oBUpT9tLY2rz7ogCHAQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jscpd/core": "4.2.5",
-        "spark-md5": "^3.0.2"
-      }
-    },
-    "node_modules/@nodelib/fs.scandir": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.stat": "2.0.5",
-        "run-parallel": "^1.1.9"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.stat": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.walk": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
-      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.62.2",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.62.2.tgz",
@@ -1824,6 +1697,275 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.3.tgz",
+      "integrity": "sha512-/T8IKEsf9VTU6tLjgC7+sv2mOPtQxzE2jMw7u4Tt40Tx+QSZxpzh95/H6cMKoja9XuW7iMdLJYBB0o9G1CaAgg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "enhanced-resolve": "^5.24.1",
+        "jiti": "^2.7.0",
+        "lightningcss": "1.32.0",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.3.3"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.3.3.tgz",
+      "integrity": "sha512-krXjAikiaFSPaK/FkAQT5UTx3VormQaiZ5hBFlJZ9UFQGB/rwg1MZIhHAG9smMQRTdyJxP6Qt5MwMtdyU5FWrA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.3.3",
+        "@tailwindcss/oxide-darwin-arm64": "4.3.3",
+        "@tailwindcss/oxide-darwin-x64": "4.3.3",
+        "@tailwindcss/oxide-freebsd-x64": "4.3.3",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.3",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.3.3",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.3.3",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.3.3",
+        "@tailwindcss/oxide-linux-x64-musl": "4.3.3",
+        "@tailwindcss/oxide-wasm32-wasi": "4.3.3",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.3.3",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.3.3"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.3.3.tgz",
+      "integrity": "sha512-Y85A2gmPSkl5Ve5qR86GL4HT509cFqQh1aes9p3sSkyTPwt0Pppf3GkwGe4JPACcRYjgJIEhQgM6dBClnr0NYw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.3.3.tgz",
+      "integrity": "sha512-BiaWatpBcERQFDlOjRDpIVXuFK5PJez5SA4JMg6VYZdBYU+qKfV/vqjcIs+IYmtitf1xYQZTwXvU/8y4lfZUGw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.3.3.tgz",
+      "integrity": "sha512-fAeUqfV5ndhxRwai8cXGzdLvul9utWOmeTkv69unv4ZXixjn61Z+p9lCWdwOwA3TYboG3BwdVuN/RDjhBRl0mw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.3.3.tgz",
+      "integrity": "sha512-iyf5bV6+wnAlflVeEy7R25dupxTNECZN5QMI0qNT6eT+EgaGdZcKhGkr5SdoaWiLJ3spLqIY9VCeSGrwmtg4kw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.3.3.tgz",
+      "integrity": "sha512-aAYUprJAJQWWbRrPvtjdroZ56Md+JM8pMiopS6xGEwDfLhqj+2ver2p4nU4Mb3CRqcMmNBjo8KkUgcxhkzVQGQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.3.3.tgz",
+      "integrity": "sha512-nDxldcEENOxZRzC2uu9jrutZdAAQtb+8WWDCSnWL1zvBk1+FN+x6MtDViPB5AJMfttVCUhehGWus3XBPgatM/w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.3.3.tgz",
+      "integrity": "sha512-Md44bD6veX/PC5iyF8cDVnw4HBIANZepRZZ7a8DQOvkfo5WUBwcp6iAuCUz23u+4SUkhJlD3eL7hNdW8ezd/kA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.3.3.tgz",
+      "integrity": "sha512-tx7us1muwOKAKWao2v/GaafFeQboE6aj88vC6ziN2NCGcRm8gWUhwjzg+YdVB1e4boAtdtma4L43onunI6NS4w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.3.3.tgz",
+      "integrity": "sha512-SJxX60smvHgasZoBy11dX6YRjXJFovwWBoedhbQPOBzgFWBHGB+TVPWB9BxzR7TTxU8FQZAI2AyiNCMzFm8Img==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.3.3.tgz",
+      "integrity": "sha512-jx1+rPhY/5Ympkktd656HBWEBLxP7dH06losBLjjf5vgCODXvi9KhtftWcMIwTFIDqBr7cRnQkdLnAG+IOlGvQ==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.11.1",
+        "@emnapi/runtime": "^1.11.1",
+        "@emnapi/wasi-threads": "^1.2.2",
+        "@napi-rs/wasm-runtime": "^1.1.4",
+        "@tybys/wasm-util": "^0.10.2",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.3.3.tgz",
+      "integrity": "sha512-3rc292Ca2ceK6Ulcc/bAVnTs/3nDtoPhyEKlgPv+yQJQi/JS/AMJlqzxvlDacL1nekbrcf6bTqp/jV4qgnPxNQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.3.3.tgz",
+      "integrity": "sha512-yJ0pwIVc/nYeGoV02WtsN8KYyLQv7kyI2wDnkezyJlGGjkd4QLwDGAwl47YpPJeuI0M0ObaXGSPjvWDPeTPggw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
     "node_modules/@tailwindcss/typography": {
       "version": "0.5.20",
       "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.20.tgz",
@@ -1837,6 +1979,21 @@
         "tailwindcss": ">=3.0.0 || >=4.0.0 || insiders"
       }
     },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.3.3.tgz",
+      "integrity": "sha512-yYU8cogLeSh/ms2jh8Fj7jaba/EWa7Ja6GoUqYZaraEuCI5YS6ms6ObZgjjedm+jm6XZjdNRWBpPP6Z86oOxcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.3.3",
+        "@tailwindcss/oxide": "4.3.3",
+        "tailwindcss": "4.3.3"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6 || ^7 || ^8"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "10.4.1",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
@@ -1988,13 +2145,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/sarif": {
-      "version": "2.1.7",
-      "resolved": "https://registry.npmjs.org/@types/sarif/-/sarif-2.1.7.tgz",
-      "integrity": "sha512-kRz0VEkJqWLf1LLVN4pT1cg1Z9wAuvI6L97V3m2f5B76Tg8d413ddvLBPTEHAZJlnn4XSvu0FkZtViCQGVyrXQ==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@types/trusted-types": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
@@ -2453,34 +2603,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/any-promise": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/anymatch": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
-      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/arg": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -2498,20 +2620,6 @@
         "dequal": "^2.0.3"
       }
     },
-    "node_modules/asap": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/assert-never": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/assert-never/-/assert-never-1.4.0.tgz",
-      "integrity": "sha512-5oJg84os6NMQNl27T9LnZkvvqzvAnHu03ShCnoj6bsJwS7L8AO4lf+C/XjK/nvzEqQB744moC6V128RucQd1jA==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/assertion-error": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
@@ -2548,108 +2656,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/autoprefixer": {
-      "version": "10.6.1",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.6.1.tgz",
-      "integrity": "sha512-cL1Qz6ADZhcEbny/8HPfe99J6HhNoYtpX2LFLIbhgGE7Q1hlQVkYFdetDN7Id3KiQxhDrHwzlHr/YQCnZ8+xSA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "browserslist": "^4.28.9",
-        "caniuse-lite": "^1.0.30001810",
-        "fraction.js": "^5.3.4",
-        "picocolors": "^1.1.1",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "bin": {
-        "autoprefixer": "bin/autoprefixer"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
-    "node_modules/autoprefixer/node_modules/browserslist": {
-      "version": "4.29.0",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.29.0.tgz",
-      "integrity": "sha512-3GSvyjvDI4Dur1Meg2BekJquu5uF+9R9a1+5M1Mde192eZoXbeXjzgOsgqPS2V8D5wrrip0gR5Hf/GhWQ9ZzaA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/browserslist"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "baseline-browser-mapping": "^2.11.23",
-        "caniuse-lite": "^1.0.30001810",
-        "electron-to-chromium": "^1.5.427",
-        "node-releases": "^2.0.55",
-        "update-browserslist-db": "^1.3.3"
-      },
-      "bin": {
-        "browserslist": "cli.js"
-      },
-      "engines": {
-        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
-      }
-    },
-    "node_modules/autoprefixer/node_modules/update-browserslist-db": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.3.3.tgz",
-      "integrity": "sha512-pJ2sYawQS0R/WI928Gj5GlPhTGzbMelq0+4INtSYNDV9ErKJcX6xjGWkoG/VnB3dpUm00zALaqkrUD77pO5TDQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/browserslist"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "escalade": "^3.2.0",
-        "picocolors": "^1.1.1"
-      },
-      "bin": {
-        "update-browserslist-db": "cli.js"
-      },
-      "peerDependencies": {
-        "browserslist": ">= 4.21.0"
-      }
-    },
     "node_modules/babel-plugin-jsx-dom-expressions": {
       "version": "0.40.7",
       "resolved": "https://registry.npmjs.org/babel-plugin-jsx-dom-expressions/-/babel-plugin-jsx-dom-expressions-0.40.7.tgz",
@@ -2699,26 +2705,6 @@
         }
       }
     },
-    "node_modules/babel-walk": {
-      "version": "3.0.0-canary-5",
-      "resolved": "https://registry.npmjs.org/babel-walk/-/babel-walk-3.0.0-canary-5.tgz",
-      "integrity": "sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^7.9.6"
-      },
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
-    "node_modules/badgen": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/badgen/-/badgen-3.3.2.tgz",
-      "integrity": "sha512-fbQwK9norfdzbdsoPwbLIAmgBXDGEme3jeIyqPAH7o6vp9lmuLHS7uXULvOiQ6XnMLkYNG4gDjILf74hgtTAug==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/balanced-match": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
@@ -2742,33 +2728,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/binary-extensions": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
-      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/blamer": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/blamer/-/blamer-1.0.7.tgz",
-      "integrity": "sha512-GbBStl/EVlSWkiJQBZps3H1iARBrC7vt++Jb/TTmCNu/jZ04VW7tSN1nScbFXBUy1AN+jzeL7Zep9sbQxLhXKA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "execa": "^4.0.0",
-        "which": "^2.0.2"
-      },
-      "engines": {
-        "node": ">=8.9"
-      }
-    },
     "node_modules/brace-expansion": {
       "version": "5.0.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.12.tgz",
@@ -2782,19 +2741,6 @@
         "node": "20 || >=22"
       }
     },
-    "node_modules/braces": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
-      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "fill-range": "^7.1.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/browserslist": {
       "version": "4.28.8",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.8.tgz",
@@ -2829,16 +2775,6 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
-    "node_modules/bytes": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
-      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/call-bind-apply-helpers": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
@@ -2853,23 +2789,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/call-bound": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
-      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.2",
-        "get-intrinsic": "^1.3.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -2889,16 +2808,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/camelcase-css": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
-      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001810",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001810.tgz",
@@ -2947,70 +2856,6 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/character-parser": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/character-parser/-/character-parser-2.2.0.tgz",
-      "integrity": "sha512-+UqJQjFEFaTAs3bNsF2j2kEN1baG/zghZbdqoYEDxGZtJo9LBzl1A+m0D4n3qKx8N2FNv8/Xp6yV9mQmBuptaw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "is-regex": "^1.0.3"
-      }
-    },
-    "node_modules/chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      },
-      "engines": {
-        "node": ">= 8.10.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/chokidar/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/cli-table3": {
-      "version": "0.6.5",
-      "resolved": "https://registry.npmjs.org/cli-table3/-/cli-table3-0.6.5.tgz",
-      "integrity": "sha512-+W/5efTR7y5HRD7gACw9yQjqMVvEMLBHmboM/kPWam+H+Hmyrgjh6YncVKK122YZkXrLudzTuAukUw9FnMf7IQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "string-width": "^4.2.0"
-      },
-      "engines": {
-        "node": "10.* || >= 12.*"
-      },
-      "optionalDependencies": {
-        "@colors/colors": "1.5.0"
-      }
-    },
     "node_modules/cliui": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
@@ -3054,16 +2899,6 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "license": "MIT"
     },
-    "node_modules/colors": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
-      "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.1.90"
-      }
-    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -3077,16 +2912,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/commander": {
-      "version": "15.0.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-15.0.0.tgz",
-      "integrity": "sha512-z67u4ZhzCL/Tydu1lJARtEZYWbWaN7oYLHbsuzocr6y4N6WZAagG3RQ4FW61V1/0+jImpj293XfrcYnd1qxtPg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=22.12.0"
-      }
-    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -3094,17 +2919,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/constantinople": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-4.0.1.tgz",
-      "integrity": "sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/parser": "^7.6.0",
-        "@babel/types": "^7.6.1"
-      }
-    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -3249,12 +3063,15 @@
         "node": ">=6"
       }
     },
-    "node_modules/didyoumean": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
       "dev": true,
-      "license": "Apache-2.0"
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
     },
     "node_modules/dijkstrajs": {
       "version": "1.0.3",
@@ -3262,20 +3079,6 @@
       "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
       "license": "MIT"
     },
-    "node_modules/dlv": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/doctypes": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/doctypes/-/doctypes-1.1.0.tgz",
-      "integrity": "sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/dom-accessibility-api": {
       "version": "0.5.16",
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
@@ -3320,14 +3123,18 @@
       "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
       "license": "MIT"
     },
-    "node_modules/end-of-stream": {
-      "version": "1.4.5",
-      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
-      "integrity": "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==",
+    "node_modules/enhanced-resolve": {
+      "version": "5.26.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.26.0.tgz",
+      "integrity": "sha512-9vhedylFonb2YGogzUKX6+Ja72gOJbN1QHAqdrvqLwhdl/QWbKopzoUC9EbQNVsAns/bx/4uyqalrQAoy1IByw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "once": "^1.4.0"
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.3.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
       }
     },
     "node_modules/entities": {
@@ -3733,37 +3540,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/eventemitter3": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
-      "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/execa": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz",
-      "integrity": "sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "cross-spawn": "^7.0.0",
-        "get-stream": "^5.0.0",
-        "human-signals": "^1.1.1",
-        "is-stream": "^2.0.0",
-        "merge-stream": "^2.0.0",
-        "npm-run-path": "^4.0.0",
-        "onetime": "^5.1.0",
-        "signal-exit": "^3.0.2",
-        "strip-final-newline": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/execa?sponsor=1"
-      }
-    },
     "node_modules/expect-type": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.4.0.tgz",
@@ -3781,36 +3557,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/fast-glob": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
-      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.stat": "^2.0.2",
-        "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.2",
-        "merge2": "^1.3.0",
-        "micromatch": "^4.0.8"
-      },
-      "engines": {
-        "node": ">=8.6.0"
-      }
-    },
-    "node_modules/fast-glob/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -3825,16 +3571,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/fastq": {
-      "version": "1.20.1",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
-      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "reusify": "^1.0.4"
-      }
-    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -3848,19 +3584,6 @@
         "node": ">=16.0.0"
       }
     },
-    "node_modules/fill-range": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
-      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "to-regex-range": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -3916,35 +3639,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/fraction.js": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
-      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/rawify"
-      }
-    },
-    "node_modules/fs-extra": {
-      "version": "11.3.6",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.6.tgz",
-      "integrity": "sha512-w8ZNZr2mKIc7qeNaQ9AVPT1+iFaI+Avd4xudVOvdDJ8VytREi1Ft5Ih7hd9jjehod8vAM5GMsfQ/TpPf4EyoEA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^6.0.1",
-        "universalify": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=14.14"
-      }
-    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -4028,22 +3722,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/get-stream": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
-      "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "pump": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -4219,16 +3897,6 @@
         "node": ">= 14"
       }
     },
-    "node_modules/human-signals": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
-      "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=8.12.0"
-      }
-    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -4296,59 +3964,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/is-binary-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "binary-extensions": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/is-core-module": {
-      "version": "2.16.2",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.2.tgz",
-      "integrity": "sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "hasown": "^2.0.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-expression": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/is-expression/-/is-expression-4.0.0.tgz",
-      "integrity": "sha512-zMIXX63sxzG3XrkHkrAPvm/OVZVSCPNkwMHU8oTX7/U3AL78I0QXCEICXUM13BIa8TYGZ68PiTKfQz3yaTNr4A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "acorn": "^7.1.1",
-        "object-assign": "^4.1.1"
-      }
-    },
-    "node_modules/is-expression/node_modules/acorn": {
-      "version": "7.4.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -4394,16 +4009,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.12.0"
-      }
-    },
     "node_modules/is-potential-custom-element-name": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
@@ -4411,45 +4016,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/is-promise": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
-      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/is-regex": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
-      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "call-bound": "^1.0.2",
-        "gopd": "^1.2.0",
-        "has-tostringtag": "^1.0.2",
-        "hasown": "^2.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-stream": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
-      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/is-what": {
       "version": "4.1.16",
       "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.16.tgz",
@@ -4510,22 +4076,15 @@
       }
     },
     "node_modules/jiti": {
-      "version": "1.21.7",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
-      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
+      "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
       "dev": true,
       "license": "MIT",
       "bin": {
-        "jiti": "bin/jiti.js"
+        "jiti": "lib/jiti-cli.mjs"
       }
     },
-    "node_modules/js-stringify": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz",
-      "integrity": "sha512-rtS5ATOo2Q5k1G+DADISilDA6lv79zIiwFd6CcjuIxGKLFm5C+RLImRscVap9k55i+MOZwgliw+NejvkLuGD5g==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -4557,37 +4116,154 @@
       }
     },
     "node_modules/jscpd": {
-      "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/jscpd/-/jscpd-4.2.5.tgz",
-      "integrity": "sha512-KDpApYw1ChGelfHb7MwYTEx694OnW52pv3McAasidUV4ILcGDQMiVJzB+vI8ox+ZPVfOSvdXQCk8uRa9B0LXnw==",
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/jscpd/-/jscpd-5.4.0.tgz",
+      "integrity": "sha512-6mU8OHff4rPJ3D5lIsQns82/aQhDas22gMsGurHx1wcrfXWOZDNaobi6rKhLevo+77ntWKUXOwtM6lcrkJeL7w==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@jscpd/badge-reporter": "4.2.5",
-        "@jscpd/core": "4.2.5",
-        "@jscpd/finder": "4.2.5",
-        "@jscpd/html-reporter": "4.2.5",
-        "@jscpd/tokenizer": "4.2.5",
-        "colors": "^1.4.0",
-        "commander": "^15.0.0",
-        "fs-extra": "^11.2.0",
-        "jscpd-sarif-reporter": "4.2.5"
-      },
       "bin": {
-        "jscpd": "bin/jscpd"
+        "jscpd": "run-jscpd.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://opencollective.com/jscpd"
+      },
+      "optionalDependencies": {
+        "jscpd-darwin-arm64": "5.4.0",
+        "jscpd-darwin-x64": "5.4.0",
+        "jscpd-linux-arm64-gnu": "5.4.0",
+        "jscpd-linux-arm64-musl": "5.4.0",
+        "jscpd-linux-x64-gnu": "5.4.0",
+        "jscpd-linux-x64-musl": "5.4.0",
+        "jscpd-windows-arm64-msvc": "5.4.0",
+        "jscpd-windows-x64-msvc": "5.4.0"
       }
     },
-    "node_modules/jscpd-sarif-reporter": {
-      "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/jscpd-sarif-reporter/-/jscpd-sarif-reporter-4.2.5.tgz",
-      "integrity": "sha512-O8LcM9grAS5yO5x1Q0yegYaYcUX//IEBEyvzGFSYCeo1YzHbMnAI6EK7oTrwD+7Csjvfg9m8B8G7OOxzcSlr9w==",
+    "node_modules/jscpd-darwin-arm64": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/jscpd-darwin-arm64/-/jscpd-darwin-arm64-5.4.0.tgz",
+      "integrity": "sha512-fNIDtNn9WE4YXoFoqf+3tkHb1+GaKKOeKzh77Wx61Gfa9iDxlCv5rO0Fjy7oWmGehUUKqslDaeXXtn/RoDprCg==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "colors": "^1.4.0",
-        "fs-extra": "^11.2.0",
-        "node-sarif-builder": "^4.1.0"
-      }
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/jscpd-darwin-x64": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/jscpd-darwin-x64/-/jscpd-darwin-x64-5.4.0.tgz",
+      "integrity": "sha512-bxlnCVEb69SGIsas1+PaqZyFY8iYVTVjCBxfjVD74UafX115Ysw+oO9LAlsJaGsKUnK8Zsq5bhM33kBHux6bTA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/jscpd-linux-arm64-gnu": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/jscpd-linux-arm64-gnu/-/jscpd-linux-arm64-gnu-5.4.0.tgz",
+      "integrity": "sha512-c4hX5QjuRyzLFJ+A+jNGHRpGlDvxcx+zzs4RJmZHpl23istuTMIkelwTOWliF4gXOm0RWXDlX/ywWKr9+Lre7w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/jscpd-linux-arm64-musl": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/jscpd-linux-arm64-musl/-/jscpd-linux-arm64-musl-5.4.0.tgz",
+      "integrity": "sha512-p4FUCNyL8WPTlizdZqfjontFwJ/+jnERYM2+YX2miYvm0NxzsIi23MhfzPl/eUHxkiT5wethV0NRYEAkJr999Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/jscpd-linux-x64-gnu": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/jscpd-linux-x64-gnu/-/jscpd-linux-x64-gnu-5.4.0.tgz",
+      "integrity": "sha512-44NXS0gtYbjBCc53Gwilgj7PPwnWv9YTF/rGc0ZfnFcpzSoOKKU11yH+qHfCVie1hHte1wHyZ1f9Kjc8nGe2/g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/jscpd-linux-x64-musl": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/jscpd-linux-x64-musl/-/jscpd-linux-x64-musl-5.4.0.tgz",
+      "integrity": "sha512-m9XHj14Zwia9RjWDkHDrl6VJ3W/b7m8qjFqjhcJ668Vkxoj4Ri/qeo0bo6is+fSw+bYxYexV6xxqIKRDolc8Lg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/jscpd-windows-arm64-msvc": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/jscpd-windows-arm64-msvc/-/jscpd-windows-arm64-msvc-5.4.0.tgz",
+      "integrity": "sha512-AoP5RXyb9gIf8xmFwAc+Rgh4XJNyX1upcD+R1A6u4XjsDo2/oF+KKB4dtKnG2DbFQ+0fyFg/ClOcw+asQZJfPg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/jscpd-windows-x64-msvc": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/jscpd-windows-x64-msvc/-/jscpd-windows-x64-msvc-5.4.0.tgz",
+      "integrity": "sha512-dYkb5mAo5i7fjrtf2Ft6z9a/I38RJMd4JirEgJiW2BIv5pAGmfMVPDy1xEXL3hJqraXzeMIfnzqJFanefCyC6g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
     },
     "node_modules/jsdom": {
       "version": "24.1.3",
@@ -4677,30 +4353,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/jsonfile": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.1.tgz",
-      "integrity": "sha512-zwOTdL3rFQ/lRdBnntKVOX6k5cKJwEc1HdilT71BWEu7J41gXIB2MRp+vxduPSwZJPWBxEzv4yH1wYLJGUHX4Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "universalify": "^2.0.0"
-      },
-      "optionalDependencies": {
-        "graceful-fs": "^4.1.6"
-      }
-    },
-    "node_modules/jstransformer": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/jstransformer/-/jstransformer-1.0.0.tgz",
-      "integrity": "sha512-C9YK3Rf8q6VAPDCCU9fnqo3mAfOH6vUGnMcP4AQAYIEpWtfGLpwOTmZ+igtdK5y+VvI2n3CyYSzy4Qh34eq24A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "is-promise": "^2.0.0",
-        "promise": "^7.0.1"
-      }
-    },
     "node_modules/kebab-case": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/kebab-case/-/kebab-case-1.0.2.tgz",
@@ -4739,25 +4391,278 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/lilconfig": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
-      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+    "node_modules/lightningcss": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
+      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
       "dev": true,
-      "license": "MIT",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
       "engines": {
-        "node": ">=14"
+        "node": ">= 12.0.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/antonk52"
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.32.0",
+        "lightningcss-darwin-arm64": "1.32.0",
+        "lightningcss-darwin-x64": "1.32.0",
+        "lightningcss-freebsd-x64": "1.32.0",
+        "lightningcss-linux-arm-gnueabihf": "1.32.0",
+        "lightningcss-linux-arm64-gnu": "1.32.0",
+        "lightningcss-linux-arm64-musl": "1.32.0",
+        "lightningcss-linux-x64-gnu": "1.32.0",
+        "lightningcss-linux-x64-musl": "1.32.0",
+        "lightningcss-win32-arm64-msvc": "1.32.0",
+        "lightningcss-win32-x64-msvc": "1.32.0"
       }
     },
-    "node_modules/lines-and-columns": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "license": "MIT"
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
     },
     "node_modules/locate-path": {
       "version": "6.0.0",
@@ -4846,20 +4751,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/markdown-table": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-2.0.0.tgz",
-      "integrity": "sha512-Ezda85ToJUBhM6WGaG6veasyym+Tbs3cMAw/ZhOPqXiYsr0jgocBV3j3nx+4lk47plLlIqjwuTm/ywVI+zjJ/A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "repeat-string": "^1.0.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/marked": {
       "version": "17.0.6",
       "resolved": "https://registry.npmjs.org/marked/-/marked-17.0.6.tgz",
@@ -4898,37 +4789,6 @@
         "url": "https://github.com/sponsors/mesqueeb"
       }
     },
-    "node_modules/merge-stream": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/merge2": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/micromatch": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
-      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "braces": "^3.0.3",
-        "picomatch": "^2.3.1"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -4952,16 +4812,6 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/mimic-fn": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -4995,18 +4845,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/mz": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
-      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "any-promise": "^1.0.0",
-        "object-assign": "^4.0.1",
-        "thenify-all": "^1.0.0"
-      }
-    },
     "node_modules/nanoid": {
       "version": "3.3.18",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.18.tgz",
@@ -5043,43 +4881,6 @@
         "node": ">=18"
       }
     },
-    "node_modules/node-sarif-builder": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/node-sarif-builder/-/node-sarif-builder-4.1.0.tgz",
-      "integrity": "sha512-IWqZF6u0EI/07HTBm+zZ+MgXgWl09dnSJRGaDCPBSlOqilDcx6pj3Mpb3HvPN8V2Gr+ISw7ZrMsL7STWs1F++w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/sarif": "^2.1.7",
-        "fs-extra": "^11.1.1"
-      },
-      "engines": {
-        "node": ">=20"
-      }
-    },
-    "node_modules/normalize-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/npm-run-path": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "path-key": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/nwsapi": {
       "version": "2.2.24",
       "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.24.tgz",
@@ -5087,26 +4888,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/object-hash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
-      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/obug": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.4.tgz",
@@ -5121,32 +4902,6 @@
         "node": ">=12.20.0"
       }
     },
-    "node_modules/once": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "wrappy": "1"
-      }
-    },
-    "node_modules/onetime": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
-      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "mimic-fn": "^2.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -5251,13 +5006,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/path-parse": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/pathe": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
@@ -5272,39 +5020,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/picomatch": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
-      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/pirates": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
-      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/pngjs": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
@@ -5343,133 +5058,6 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/postcss-import": {
-      "version": "15.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
-      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "postcss-value-parser": "^4.0.0",
-        "read-cache": "^1.0.0",
-        "resolve": "^1.1.7"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.0.0"
-      }
-    },
-    "node_modules/postcss-js": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
-      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "camelcase-css": "^2.0.1"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >= 16"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.21"
-      }
-    },
-    "node_modules/postcss-load-config": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
-      "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "lilconfig": "^3.1.1"
-      },
-      "engines": {
-        "node": ">= 18"
-      },
-      "peerDependencies": {
-        "jiti": ">=1.21.0",
-        "postcss": ">=8.0.9",
-        "tsx": "^4.8.1",
-        "yaml": "^2.4.2"
-      },
-      "peerDependenciesMeta": {
-        "jiti": {
-          "optional": true
-        },
-        "postcss": {
-          "optional": true
-        },
-        "tsx": {
-          "optional": true
-        },
-        "yaml": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/postcss-nested": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
-      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "postcss-selector-parser": "^6.1.1"
-      },
-      "engines": {
-        "node": ">=12.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.14"
-      }
-    },
-    "node_modules/postcss-nested/node_modules/postcss-selector-parser": {
-      "version": "6.1.4",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.4.tgz",
-      "integrity": "sha512-bIoJLOmjCO1S9XdY/DcnR5hJxvrDir1PbGChrzXG3vw0/FOliy/fA3dmdhQ441kah4gKv+TwckGzex6wNS5cnQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/postcss-selector-parser": {
       "version": "6.0.10",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
@@ -5484,13 +5072,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/postcss-value-parser": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -5545,16 +5126,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/promise": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
-      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "asap": "~2.0.3"
-      }
-    },
     "node_modules/psl": {
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz",
@@ -5568,153 +5139,6 @@
         "url": "https://github.com/sponsors/lupomontero"
       }
     },
-    "node_modules/pug": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/pug/-/pug-3.0.4.tgz",
-      "integrity": "sha512-kFfq5mMzrS7+wrl5pLJzZEzemx34OQ0w4SARfhy/3yxTlhbstsudDwJzhf1hP02yHzbjoVMSXUj/Sz6RNfMyXg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "pug-code-gen": "^3.0.4",
-        "pug-filters": "^4.0.0",
-        "pug-lexer": "^5.0.1",
-        "pug-linker": "^4.0.0",
-        "pug-load": "^3.0.0",
-        "pug-parser": "^6.0.0",
-        "pug-runtime": "^3.0.1",
-        "pug-strip-comments": "^2.0.0"
-      }
-    },
-    "node_modules/pug-attrs": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pug-attrs/-/pug-attrs-3.0.0.tgz",
-      "integrity": "sha512-azINV9dUtzPMFQktvTXciNAfAuVh/L/JCl0vtPCwvOA21uZrC08K/UnmrL+SXGEVc1FwzjW62+xw5S/uaLj6cA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "constantinople": "^4.0.1",
-        "js-stringify": "^1.0.2",
-        "pug-runtime": "^3.0.0"
-      }
-    },
-    "node_modules/pug-code-gen": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-3.0.4.tgz",
-      "integrity": "sha512-6okWYIKdasTyXICyEtvobmTZAVX57JkzgzIi4iRJlin8kmhG+Xry2dsus+Mun/nGCn6F2U49haHI5mkELXB14g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "constantinople": "^4.0.1",
-        "doctypes": "^1.1.0",
-        "js-stringify": "^1.0.2",
-        "pug-attrs": "^3.0.0",
-        "pug-error": "^2.1.0",
-        "pug-runtime": "^3.0.1",
-        "void-elements": "^3.1.0",
-        "with": "^7.0.0"
-      }
-    },
-    "node_modules/pug-error": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/pug-error/-/pug-error-2.1.0.tgz",
-      "integrity": "sha512-lv7sU9e5Jk8IeUheHata6/UThZ7RK2jnaaNztxfPYUY+VxZyk/ePVaNZ/vwmH8WqGvDz3LrNYt/+gA55NDg6Pg==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/pug-filters": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/pug-filters/-/pug-filters-4.0.0.tgz",
-      "integrity": "sha512-yeNFtq5Yxmfz0f9z2rMXGw/8/4i1cCFecw/Q7+D0V2DdtII5UvqE12VaZ2AY7ri6o5RNXiweGH79OCq+2RQU4A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "constantinople": "^4.0.1",
-        "jstransformer": "1.0.0",
-        "pug-error": "^2.0.0",
-        "pug-walk": "^2.0.0",
-        "resolve": "^1.15.1"
-      }
-    },
-    "node_modules/pug-lexer": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/pug-lexer/-/pug-lexer-5.0.1.tgz",
-      "integrity": "sha512-0I6C62+keXlZPZkOJeVam9aBLVP2EnbeDw3An+k0/QlqdwH6rv8284nko14Na7c0TtqtogfWXcRoFE4O4Ff20w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "character-parser": "^2.2.0",
-        "is-expression": "^4.0.0",
-        "pug-error": "^2.0.0"
-      }
-    },
-    "node_modules/pug-linker": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/pug-linker/-/pug-linker-4.0.0.tgz",
-      "integrity": "sha512-gjD1yzp0yxbQqnzBAdlhbgoJL5qIFJw78juN1NpTLt/mfPJ5VgC4BvkoD3G23qKzJtIIXBbcCt6FioLSFLOHdw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "pug-error": "^2.0.0",
-        "pug-walk": "^2.0.0"
-      }
-    },
-    "node_modules/pug-load": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pug-load/-/pug-load-3.0.0.tgz",
-      "integrity": "sha512-OCjTEnhLWZBvS4zni/WUMjH2YSUosnsmjGBB1An7CsKQarYSWQ0GCVyd4eQPMFJqZ8w9xgs01QdiZXKVjk92EQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "object-assign": "^4.1.1",
-        "pug-walk": "^2.0.0"
-      }
-    },
-    "node_modules/pug-parser": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/pug-parser/-/pug-parser-6.0.0.tgz",
-      "integrity": "sha512-ukiYM/9cH6Cml+AOl5kETtM9NR3WulyVP2y4HOU45DyMim1IeP/OOiyEWRr6qk5I5klpsBnbuHpwKmTx6WURnw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "pug-error": "^2.0.0",
-        "token-stream": "1.0.0"
-      }
-    },
-    "node_modules/pug-runtime": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/pug-runtime/-/pug-runtime-3.0.1.tgz",
-      "integrity": "sha512-L50zbvrQ35TkpHwv0G6aLSuueDRwc/97XdY8kL3tOT0FmhgG7UypU3VztfV/LATAvmUfYi4wNxSajhSAeNN+Kg==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/pug-strip-comments": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/pug-strip-comments/-/pug-strip-comments-2.0.0.tgz",
-      "integrity": "sha512-zo8DsDpH7eTkPHCXFeAk1xZXJbyoTfdPlNR0bK7rpOMuhBYb0f5qUVCO1xlsitYd3w5FQTK7zpNVKb3rZoUrrQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "pug-error": "^2.0.0"
-      }
-    },
-    "node_modules/pug-walk": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/pug-walk/-/pug-walk-2.0.0.tgz",
-      "integrity": "sha512-yYELe9Q5q9IQhuvqsZNwA5hfPkMJ8u92bQLIMcsMxf/VADjNtEYptU+inlufAFYcWdHlwNfZOEnOOQrZrcyJCQ==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/pump": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.4.tgz",
-      "integrity": "sha512-VS7sjc6KR7e1ukRFhQSY5LM2uBWAUPiOPa/A3mkKmiMwSmRFUITt0xuj+/lesgnCv+dPIEYlkzrcyXgquIHMcA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "end-of-stream": "^1.1.0",
-        "once": "^1.3.1"
-      }
-    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -5749,27 +5173,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/queue-microtask": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT"
-    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -5777,29 +5180,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/read-cache": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
-      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "pify": "^2.3.0"
-      }
-    },
-    "node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8.10.0"
-      }
-    },
     "node_modules/redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -5814,16 +5194,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/repeat-string": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
-      "integrity": "sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -5846,28 +5216,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/resolve": {
-      "version": "1.22.12",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
-      "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "is-core-module": "^2.16.1",
-        "path-parse": "^1.0.7",
-        "supports-preserve-symlinks-flag": "^1.0.0"
-      },
-      "bin": {
-        "resolve": "bin/resolve"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -5878,17 +5226,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/reusify": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
-      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "iojs": ">=1.0.0",
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/rollup": {
       "version": "4.62.2",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.62.2.tgz",
@@ -5941,30 +5278,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/run-parallel": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
-      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "queue-microtask": "^1.2.2"
-      }
-    },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -6055,13 +5368,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/signal-exit": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
-      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
-      "dev": true,
-      "license": "ISC"
-    },
     "node_modules/solid-js": {
       "version": "1.9.15",
       "resolved": "https://registry.npmjs.org/solid-js/-/solid-js-1.9.15.tgz",
@@ -6098,13 +5404,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/spark-md5": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/spark-md5/-/spark-md5-3.0.2.tgz",
-      "integrity": "sha512-wcFzz9cDfbuqe0FZzfi2or1sgyIrsDwmPwfZC4hiNidPdPINjeUwNfv5kldczoEAcjl9Y1L3SM7Uz2PUEQzxQw==",
-      "dev": true,
-      "license": "(WTFPL OR MIT)"
-    },
     "node_modules/stackback": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
@@ -6145,16 +5444,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/strip-final-newline": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
-      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/strip-indent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
@@ -6191,39 +5480,6 @@
         "inline-style-parser": "0.2.7"
       }
     },
-    "node_modules/sucrase": {
-      "version": "3.35.1",
-      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
-      "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.2",
-        "commander": "^4.0.0",
-        "lines-and-columns": "^1.1.6",
-        "mz": "^2.7.0",
-        "pirates": "^4.0.1",
-        "tinyglobby": "^0.2.11",
-        "ts-interface-checker": "^0.1.9"
-      },
-      "bin": {
-        "sucrase": "bin/sucrase",
-        "sucrase-node": "bin/sucrase-node"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/sucrase/node_modules/commander": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
-      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -6237,19 +5493,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/supports-preserve-symlinks-flag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
-      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -6258,78 +5501,24 @@
       "license": "MIT"
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.19",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
-      "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.3.tgz",
+      "integrity": "sha512-gOhV3P7ufE62QDGg1zVaTgCR+EtPv92k2nIhVcVKcLmxT1sUBsQGhnZj175j+MqRt4zLF7ic+sCYjfhxMxj7YQ==",
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "arg": "^5.0.2",
-        "chokidar": "^3.6.0",
-        "didyoumean": "^1.2.2",
-        "dlv": "^1.1.3",
-        "fast-glob": "^3.3.2",
-        "glob-parent": "^6.0.2",
-        "is-glob": "^4.0.3",
-        "jiti": "^1.21.7",
-        "lilconfig": "^3.1.3",
-        "micromatch": "^4.0.8",
-        "normalize-path": "^3.0.0",
-        "object-hash": "^3.0.0",
-        "picocolors": "^1.1.1",
-        "postcss": "^8.4.47",
-        "postcss-import": "^15.1.0",
-        "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0",
-        "postcss-nested": "^6.2.0",
-        "postcss-selector-parser": "^6.1.2",
-        "resolve": "^1.22.8",
-        "sucrase": "^3.35.0"
-      },
-      "bin": {
-        "tailwind": "lib/cli.js",
-        "tailwindcss": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
+      "license": "MIT"
     },
-    "node_modules/tailwindcss/node_modules/postcss-selector-parser": {
-      "version": "6.1.4",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.4.tgz",
-      "integrity": "sha512-bIoJLOmjCO1S9XdY/DcnR5hJxvrDir1PbGChrzXG3vw0/FOliy/fA3dmdhQ441kah4gKv+TwckGzex6wNS5cnQ==",
+    "node_modules/tapable": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.3.tgz",
+      "integrity": "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
       "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/thenify": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
-      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "any-promise": "^1.0.0"
-      }
-    },
-    "node_modules/thenify-all": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
-      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "thenify": ">= 3.1.0 < 4"
+        "node": ">=6"
       },
-      "engines": {
-        "node": ">=0.8"
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
       }
     },
     "node_modules/tinybench": {
@@ -6407,26 +5596,6 @@
         "node": ">=14.0.0"
       }
     },
-    "node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "is-number": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=8.0"
-      }
-    },
-    "node_modules/token-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/token-stream/-/token-stream-1.0.0.tgz",
-      "integrity": "sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/tough-cookie": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
@@ -6479,13 +5648,6 @@
         "typescript": ">=4.8.4"
       }
     },
-    "node_modules/ts-interface-checker": {
-      "version": "0.1.13",
-      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-      "dev": true,
-      "license": "Apache-2.0"
-    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -6544,16 +5706,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/universalify": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
-      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
     "node_modules/update-browserslist-db": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.3.2.tgz",
@@ -6909,16 +6061,6 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/void-elements": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
-      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/w3c-xmlserializer": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
@@ -7019,22 +6161,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/with": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/with/-/with-7.0.2.tgz",
-      "integrity": "sha512-RNGKj82nUPg3g5ygxkQl0R937xLyho1J24ItRCBTr/m1YnZkzJy1hUiHUJrc/VlsDQzsCnInEGSg3bci0Lmd4w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/parser": "^7.9.6",
-        "@babel/types": "^7.9.6",
-        "assert-never": "^1.2.1",
-        "babel-walk": "3.0.0-canary-5"
-      },
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -7045,13 +6171,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/wrappy": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "dev": true,
-      "license": "ISC"
-    },
     "node_modules/ws": {
       "version": "8.21.3",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.21.3.tgz",
diff --git a/frontend-modern/package.json b/frontend-modern/package.json
index 2c1df0c446..f88f48c0d9 100644
--- a/frontend-modern/package.json
+++ b/frontend-modern/package.json
@@ -72,22 +72,21 @@
     "@eslint/js": "^9.39.2",
     "@solidjs/testing-library": "^0.8.5",
     "@tailwindcss/typography": "^0.5.19",
+    "@tailwindcss/vite": "^4.3.3",
     "@testing-library/jest-dom": "^6.5.0",
     "@types/node": "^26.6.2",
     "@types/qrcode": "^1.5.6",
     "@typescript-eslint/eslint-plugin": "^8.70.0",
     "@typescript-eslint/parser": "^8.70.0",
     "@vitest/coverage-v8": "^4.1.11",
-    "autoprefixer": "^10.6.1",
     "eslint": "^9.20.0",
     "eslint-config-prettier": "^10.0.0",
     "eslint-plugin-solid": "^0.18.0",
     "globals": "^17.12.0",
-    "jscpd": "^4.0.8",
+    "jscpd": "^5.4.0",
     "jsdom": "^24.1.0",
-    "postcss": "^8.5.28",
     "prettier": "3.9.8",
-    "tailwindcss": "^3.4.18",
+    "tailwindcss": "^4.3.3",
     "typescript": "^5.3.0",
     "typescript-eslint": "^8.70.0",
     "vite": "^6.4.3",
diff --git a/frontend-modern/postcss.config.js b/frontend-modern/postcss.config.js
deleted file mode 100644
index e99ebc2c0e..0000000000
--- a/frontend-modern/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
\ No newline at end of file
diff --git a/frontend-modern/scripts/shared-template-registry.json b/frontend-modern/scripts/shared-template-registry.json
index 13a0f34266..75e83008da 100644
--- a/frontend-modern/scripts/shared-template-registry.json
+++ b/frontend-modern/scripts/shared-template-registry.json
@@ -265,7 +265,7 @@
           "patterns": [
             "<svg",
             "const icons = {",
-            "flex-shrink-0 text-muted hover:text-base-content hover:bg-surface rounded-md p-1.5 transition-all duration-200"
+            "shrink-0 text-muted hover:text-base-content hover:bg-surface rounded-md p-1.5 transition-all duration-200"
           ]
         }
       ],
@@ -507,7 +507,7 @@
       "forbiddenPatterns": [
         {
           "path": "src/components/Settings/AIProviderConfigurationSection.tsx",
-          "patterns": ["rounded border border-red-200", "bg-red-50 dark:bg-red-900 px-2 py-1.5"]
+          "patterns": ["rounded-sm border border-red-200", "bg-red-50 dark:bg-red-900/25 px-2 py-1.5"]
         },
         {
           "path": "src/components/Settings/ConnectionEditor/AddressProbeStep.tsx",
@@ -549,7 +549,7 @@
           "path": "src/components/Settings/DiscoverySettingsForm.tsx",
           "patterns": [
             "rounded-md border border-amber-200 bg-amber-50/80",
-            "text-amber-900 dark:text-amber-100"
+            "text-amber-900/25 dark:text-amber-100"
           ]
         }
       ],
@@ -573,8 +573,8 @@
           "path": "src/components/ErrorBoundary.tsx",
           "patterns": [
             "<svg",
-            "bg-red-50 dark:bg-red-900 border border-red-200",
-            "p-4 bg-red-50 dark:bg-red-900 border border-red-200"
+            "bg-red-50 dark:bg-red-900/25 border border-red-200",
+            "p-4 bg-red-50 dark:bg-red-900/25 border border-red-200"
           ]
         }
       ],
@@ -602,8 +602,8 @@
           "path": "src/components/UpdateConfirmationModal.tsx",
           "patterns": [
             "<svg",
-            "bg-blue-50 dark:bg-blue-900 border border-blue-200",
-            "bg-yellow-50 dark:bg-yellow-900 border border-yellow-200",
+            "bg-blue-50 dark:bg-blue-900/25 border border-blue-200",
+            "bg-yellow-50 dark:bg-yellow-900/25 border border-yellow-200",
             "rounded-md p-4 border",
             "px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors"
           ]
@@ -612,10 +612,10 @@
           "path": "src/components/UpdateProgressModal.tsx",
           "patterns": [
             "<svg",
-            "bg-red-50 dark:bg-red-900 border border-red-200",
-            "bg-blue-50 dark:bg-blue-900 border border-blue-200",
-            "bg-yellow-50 dark:bg-yellow-900 border border-yellow-200",
-            "mt-2 px-3 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 rounded"
+            "bg-red-50 dark:bg-red-900/25 border border-red-200",
+            "bg-blue-50 dark:bg-blue-900/25 border border-blue-200",
+            "bg-yellow-50 dark:bg-yellow-900/25 border border-yellow-200",
+            "mt-2 px-3 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-sm"
           ]
         }
       ],
@@ -644,14 +644,14 @@
           "path": "src/features/platformPage/PlatformOutdatedAgentNotice.tsx",
           "patterns": [
             "rounded-lg border border-amber-300 bg-amber-50",
-            "text-amber-900 underline-offset-2"
+            "text-amber-900/25 underline-offset-2"
           ]
         },
         {
           "path": "src/features/platformPage/PlatformOutdatedSensorSetupNotice.tsx",
           "patterns": [
             "rounded-lg border border-amber-300 bg-amber-50",
-            "text-amber-900 underline-offset-2"
+            "text-amber-900/25 underline-offset-2"
           ]
         }
       ],
@@ -676,8 +676,8 @@
           "patterns": [
             "<svg",
             "<button",
-            "bg-blue-50 dark:bg-blue-900 border-b border-blue-200 dark:border-blue-800",
-            "p-1 hover:bg-blue-100 dark:hover:bg-blue-800 rounded text-blue-600"
+            "bg-blue-50 dark:bg-blue-900/25 border-b border-blue-200 dark:border-blue-800",
+            "p-1 hover:bg-blue-100 dark:hover:bg-blue-800 rounded-sm text-blue-600"
           ]
         }
       ],
@@ -705,9 +705,9 @@
             "<button",
             "toneClasses",
             "buttonClasses",
-            "bg-amber-50 dark:bg-amber-900 border-b border-amber-200",
-            "bg-red-50 dark:bg-red-900 border-b border-red-200",
-            "p-1 rounded transition-colors opacity-70 hover:opacity-100"
+            "bg-amber-50 dark:bg-amber-900/25 border-b border-amber-200",
+            "bg-red-50 dark:bg-red-900/25 border-b border-red-200",
+            "p-1 rounded-sm transition-colors opacity-70 hover:opacity-100"
           ]
         }
       ],
@@ -1195,20 +1195,20 @@
         {
           "path": "src/components/Settings/OrganizationAccessMembersSection.tsx",
           "patterns": [
-            "inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-red-600 hover:bg-red-50 dark:text-red-300 dark:hover:bg-red-900 disabled:cursor-not-allowed disabled:opacity-60"
+            "inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-red-600 hover:bg-red-50 dark:text-red-300 dark:hover:bg-red-900/25 disabled:cursor-not-allowed disabled:opacity-60"
           ]
         },
         {
           "path": "src/components/Settings/OrganizationIncomingSharesSection.tsx",
           "patterns": [
-            "inline-flex items-center rounded-md px-2 py-1 text-xs font-medium text-emerald-700 hover:bg-emerald-50 dark:text-emerald-300 dark:hover:bg-emerald-900 disabled:cursor-not-allowed disabled:opacity-60",
-            "inline-flex items-center rounded-md px-2 py-1 text-xs font-medium text-red-600 hover:bg-red-50 dark:text-red-300 dark:hover:bg-red-900 disabled:cursor-not-allowed disabled:opacity-60"
+            "inline-flex items-center rounded-md px-2 py-1 text-xs font-medium text-emerald-700 hover:bg-emerald-50 dark:text-emerald-300 dark:hover:bg-emerald-900/25 disabled:cursor-not-allowed disabled:opacity-60",
+            "inline-flex items-center rounded-md px-2 py-1 text-xs font-medium text-red-600 hover:bg-red-50 dark:text-red-300 dark:hover:bg-red-900/25 disabled:cursor-not-allowed disabled:opacity-60"
           ]
         },
         {
           "path": "src/components/Settings/OrganizationOutgoingSharesSection.tsx",
           "patterns": [
-            "inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-red-600 hover:bg-red-50 dark:text-red-300 dark:hover:bg-red-900 disabled:cursor-not-allowed disabled:opacity-60"
+            "inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-red-600 hover:bg-red-50 dark:text-red-300 dark:hover:bg-red-900/25 disabled:cursor-not-allowed disabled:opacity-60"
           ]
         },
         {
@@ -1255,7 +1255,7 @@
         {
           "path": "src/components/Settings/SecurityAuthPanel.tsx",
           "patterns": [
-            "w-full sm:w-auto px-3 py-2 text-xs font-medium rounded-md border border-amber-300 text-amber-800 bg-amber-100 hover:bg-amber-200 transition-colors dark:border-amber-700 dark:text-amber-200 dark:bg-amber-900 dark:hover:bg-amber-800",
+            "w-full sm:w-auto px-3 py-2 text-xs font-medium rounded-md border border-amber-300 text-amber-800 bg-amber-100 hover:bg-amber-200 transition-colors dark:border-amber-700 dark:text-amber-200 dark:bg-amber-900/25 dark:hover:bg-amber-800",
             "w-full sm:w-auto min-h-10 sm:min-h-10 px-4 py-2.5 text-sm font-medium bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors",
             "w-full sm:w-auto min-h-10 sm:min-h-10 px-4 py-2.5 text-sm font-medium border border-border text-base-content rounded-md hover:bg-surface-hover transition-colors"
           ]
@@ -1270,7 +1270,7 @@
             "px-4 py-2 text-sm font-medium text-base-content border border-border rounded-md hover:bg-surface-hover",
             "px-4 py-2 text-sm font-medium bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50",
             "px-4 py-2 text-sm font-medium bg-red-600 text-white rounded-md hover:bg-red-700",
-            "px-2 py-1 text-xs font-medium text-muted bg-surface-hover rounded hover:bg-surface-hover flex items-center gap-1"
+            "px-2 py-1 text-xs font-medium text-muted bg-surface-hover rounded-sm hover:bg-surface-hover flex items-center gap-1"
           ]
         },
         {
@@ -1283,17 +1283,17 @@
           "path": "src/components/Settings/InfrastructureInstallerSection.tsx",
           "patterns": [
             "inline-flex items-center justify-center rounded-md bg-emerald-600 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-emerald-700",
-            "inline-flex items-center justify-center rounded-md border border-emerald-300 bg-white px-3 py-2 text-sm font-medium text-emerald-900 transition-colors hover:bg-emerald-100",
-            "inline-flex items-center justify-center rounded-md border border-emerald-300 bg-white px-3 py-2 text-sm font-medium text-emerald-900 hover:bg-emerald-100",
-            "inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium text-emerald-900 hover:bg-emerald-100"
+            "inline-flex items-center justify-center rounded-md border border-emerald-300 bg-white px-3 py-2 text-sm font-medium text-emerald-900/25 transition-colors hover:bg-emerald-100",
+            "inline-flex items-center justify-center rounded-md border border-emerald-300 bg-white px-3 py-2 text-sm font-medium text-emerald-900/25 hover:bg-emerald-100",
+            "inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium text-emerald-900/25 hover:bg-emerald-100"
           ]
         },
         {
           "path": "src/components/ErrorBoundary.tsx",
           "patterns": [
-            "px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700",
-            "px-4 py-2 bg-slate-600 text-white rounded hover:bg-slate-700",
-            "text-xs px-2 py-1 bg-red-600 text-white rounded hover:bg-red-700"
+            "px-4 py-2 bg-blue-600 text-white rounded-sm hover:bg-blue-700",
+            "px-4 py-2 bg-slate-600 text-white rounded-sm hover:bg-slate-700",
+            "text-xs px-2 py-1 bg-red-600 text-white rounded-sm hover:bg-red-700"
           ]
         },
         {
@@ -1306,7 +1306,7 @@
         {
           "path": "src/components/UpdateProgressModal.tsx",
           "patterns": [
-            "mt-2 px-3 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 rounded",
+            "mt-2 px-3 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-sm",
             "px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors"
           ]
         }
@@ -1430,35 +1430,35 @@
         {
           "path": "src/components/AI/Chat/index.tsx",
           "patterns": [
-            "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md border border-border bg-surface text-muted transition-colors hover:border-border hover:bg-surface-hover hover:text-base-content disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-surface disabled:hover:text-muted",
-            "flex-shrink-0 p-2 hover:text-base-content rounded-md hover:bg-surface-hover transition-colors",
-            "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-blue-700 transition-colors hover:bg-blue-100 hover:text-blue-950 disabled:cursor-wait disabled:opacity-70 dark:text-blue-200 dark:hover:bg-blue-900/60",
-            "rounded p-1 text-muted opacity-0 transition-opacity hover:bg-blue-100 hover:text-blue-600 focus:opacity-100 group-hover:opacity-100 group-focus-within:opacity-100 dark:hover:bg-blue-900 dark:hover:text-blue-300",
-            "order-2 flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-md hover:text-base-content hover:bg-surface-hover transition-colors sm:order-none",
-            "flex h-7 w-7 items-center justify-center rounded-md border border-amber-200 bg-surface text-amber-700 transition-colors hover:bg-amber-100 hover:text-amber-900 dark:border-amber-800 dark:bg-amber-950/60 dark:text-amber-200 dark:hover:bg-amber-900",
-            "flex h-7 w-7 items-center justify-center rounded-md text-amber-700 transition-colors hover:bg-amber-100 hover:text-amber-900 dark:text-amber-200 dark:hover:bg-amber-900",
-            "inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-blue-700 transition-colors hover:bg-blue-100 hover:text-blue-950 dark:text-blue-200 dark:hover:bg-blue-900/60",
-            "flex h-9 w-9 items-center justify-center rounded-md bg-blue-600 text-white shadow-sm transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-45",
-            "flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-border bg-surface text-muted transition-colors hover:border-border hover:bg-surface-hover hover:text-base-content focus:outline-none focus:ring-2 focus:ring-blue-500/30"
+            "flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-border bg-surface text-muted transition-colors hover:border-border hover:bg-surface-hover hover:text-base-content disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-surface disabled:hover:text-muted",
+            "shrink-0 p-2 hover:text-base-content rounded-md hover:bg-surface-hover transition-colors",
+            "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-blue-700 transition-colors hover:bg-blue-100 hover:text-blue-950/25 disabled:cursor-wait disabled:opacity-70 dark:text-blue-200 dark:hover:bg-blue-900/60",
+            "rounded-sm p-1 text-muted opacity-0 transition-opacity hover:bg-blue-100 hover:text-blue-600 focus:opacity-100 group-hover:opacity-100 group-focus-within:opacity-100 dark:hover:bg-blue-900/25 dark:hover:text-blue-300",
+            "order-2 flex h-9 w-9 shrink-0 items-center justify-center rounded-md hover:text-base-content hover:bg-surface-hover transition-colors sm:order-0",
+            "flex h-7 w-7 items-center justify-center rounded-md border border-amber-200 bg-surface text-amber-700 transition-colors hover:bg-amber-100 hover:text-amber-900/25 dark:border-amber-800 dark:bg-amber-950/60 dark:text-amber-200 dark:hover:bg-amber-900/25",
+            "flex h-7 w-7 items-center justify-center rounded-md text-amber-700 transition-colors hover:bg-amber-100 hover:text-amber-900/25 dark:text-amber-200 dark:hover:bg-amber-900/25",
+            "inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-blue-700 transition-colors hover:bg-blue-100 hover:text-blue-950/25 dark:text-blue-200 dark:hover:bg-blue-900/60",
+            "flex h-9 w-9 items-center justify-center rounded-md bg-blue-600 text-white shadow-xs transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-45",
+            "flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-border bg-surface text-muted transition-colors hover:border-border hover:bg-surface-hover hover:text-base-content focus:outline-hidden focus:ring-2 focus:ring-blue-500/30"
           ]
         },
         {
           "path": "src/components/AI/Chat/MessageItem.tsx",
           "patterns": [
-            "inline-flex h-5 w-5 items-center justify-center rounded text-blue-700 transition-colors hover:bg-blue-100 hover:text-blue-950 focus:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500/30"
+            "inline-flex h-5 w-5 items-center justify-center rounded-sm text-blue-700 transition-colors hover:bg-blue-100 hover:text-blue-950/25 focus:bg-blue-100 focus:outline-hidden focus:ring-2 focus:ring-blue-500/30"
           ]
         },
         {
           "path": "src/features/standalone/AgentsMachinesTable.tsx",
           "patterns": [
-            "inline-flex h-7 w-7 items-center justify-center rounded-md text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60"
+            "inline-flex h-7 w-7 items-center justify-center rounded-md text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500/60"
           ]
         },
         {
           "path": "src/components/Settings/SSOProvidersPanel.tsx",
           "patterns": [
             "p-2 text-slate-500 hover:text-blue-600 hover:bg-surface-hover rounded-md transition-colors",
-            "p-2 text-slate-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900 rounded-md transition-colors",
+            "p-2 text-slate-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/25 rounded-md transition-colors",
             "class=\"text-slate-400 hover:text-base-content\""
           ]
         },
@@ -1466,7 +1466,7 @@
           "path": "src/components/Settings/RolesPanel.tsx",
           "patterns": [
             "p-1.5 rounded-md text-slate-500 hover:text-blue-600 hover:bg-surface-hover dark:hover:text-blue-300",
-            "p-1.5 rounded-md text-slate-500 hover:text-red-600 hover:bg-red-50 dark:hover:text-red-400 dark:hover:bg-red-900"
+            "p-1.5 rounded-md text-slate-500 hover:text-red-600 hover:bg-red-50 dark:hover:text-red-400 dark:hover:bg-red-900/25"
           ]
         }
       ],
@@ -1498,8 +1498,8 @@
           "patterns": [
             "lucide-solid/icons/copy",
             "lucide-solid/icons/check';",
-            "mt-1 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-border-subtle bg-surface text-muted opacity-0 shadow-sm transition-opacity hover:text-base-content",
-            "ml-auto inline-flex h-7 w-7 items-center justify-center rounded-md border border-border-subtle bg-surface text-muted opacity-0 shadow-sm transition-opacity hover:text-base-content"
+            "mt-1 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-border-subtle bg-surface text-muted opacity-0 shadow-xs transition-opacity hover:text-base-content",
+            "ml-auto inline-flex h-7 w-7 items-center justify-center rounded-md border border-border-subtle bg-surface text-muted opacity-0 shadow-xs transition-opacity hover:text-base-content"
           ]
         },
         {
@@ -1507,7 +1507,7 @@
           "patterns": [
             "lucide-solid/icons/copy",
             "lucide-solid/icons/check';",
-            "inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border border-border-subtle bg-surface text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus:outline-none focus:ring-2 focus:ring-blue-500/30"
+            "inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-sm border border-border-subtle bg-surface text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus:outline-hidden focus:ring-2 focus:ring-blue-500/30"
           ]
         },
         {
@@ -1574,7 +1574,7 @@
         {
           "path": "src/components/Settings/ProLicensePlanSection.tsx",
           "patterns": [
-            "inline-flex items-center gap-1 mt-3 min-h-10 sm:min-h-9 rounded-md border border-current/20 px-3 py-2 text-xs font-medium hover:bg-black/5 dark:hover:bg-white/5",
+            "inline-flex items-center gap-1 mt-3 min-h-10 sm:min-h-9 rounded-md border px-3 py-2 text-xs font-medium hover:bg-black/5 dark:hover:bg-white/5",
             "inline-flex items-center gap-1 mt-4 min-h-10 sm:min-h-9 rounded-md border border-border px-3 py-2 text-xs font-medium text-base-content hover:bg-surface-hover"
           ]
         }
@@ -1657,7 +1657,7 @@
           "path": "src/components/Discovery/DiscoveryTab.tsx",
           "patterns": [
             "const CopyableCodeRow",
-            "flex items-start gap-2 rounded bg-surface-alt px-2 py-1.5"
+            "flex items-start gap-2 rounded-sm bg-surface-alt px-2 py-1.5"
           ]
         }
       ],
@@ -2022,7 +2022,7 @@
         {
           "path": "src/components/AI/FindingsPanel.tsx",
           "patterns": [
-            "px-1.5 py-0.5 border text-[10px] font-medium rounded",
+            "px-1.5 py-0.5 border text-[10px] font-medium rounded-sm",
             "getFindingStatusBadgeClasses",
             "getFindingSourceBadgeClasses",
             "getFindingLoopStateBadgeClasses",
@@ -2034,51 +2034,51 @@
         {
           "path": "src/components/patrol/ApprovalBanner.tsx",
           "patterns": [
-            "px-1.5 py-0.5 text-[10px] font-medium rounded",
+            "px-1.5 py-0.5 text-[10px] font-medium rounded-sm",
             "firstApprovalRisk()!.badgeClass"
           ]
         },
         {
           "path": "src/components/patrol/ApprovalSection.tsx",
           "patterns": [
-            "px-1.5 py-0.5 text-[10px] font-medium rounded",
+            "px-1.5 py-0.5 text-[10px] font-medium rounded-sm",
             "approvalRisk.badgeClass",
             "fixRisk.badgeClass",
-            "bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300"
+            "bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300"
           ]
         },
         {
           "path": "src/components/patrol/InvestigationSection.tsx",
           "patterns": [
-            "px-1.5 py-0.5 border text-[10px] font-medium rounded",
+            "px-1.5 py-0.5 border text-[10px] font-medium rounded-sm",
             "getInvestigationStatusBadgeClasses",
             "getInvestigationOutcomeBadgeClasses",
-            "rounded border border-border bg-surface px-1.5 py-0.5 text-[10px] font-medium text-muted",
-            "rounded bg-surface px-1.5 py-0.5 text-[10px] font-medium text-muted"
+            "rounded-sm border border-border bg-surface px-1.5 py-0.5 text-[10px] font-medium text-muted",
+            "rounded-sm bg-surface px-1.5 py-0.5 text-[10px] font-medium text-muted"
           ]
         },
         {
           "path": "src/components/patrol/RunHistoryEntry.tsx",
           "patterns": [
             "inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium",
-            "inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-blue-50"
+            "inline-flex items-center gap-1 px-1.5 py-0.5 rounded-sm bg-blue-50"
           ]
         },
         {
           "path": "src/components/patrol/RunToolCallTrace.tsx",
           "patterns": [
-            "px-1.5 py-0.5 rounded text-[10px] font-medium",
+            "px-1.5 py-0.5 rounded-sm text-[10px] font-medium",
             "getToolCallResultBadgeClass"
           ]
         },
         {
           "path": "src/features/proxmox/proxmoxBackupsTableShared.tsx",
           "patterns": [
-            "inline-flex items-center rounded-sm px-1.5 py-0.5 text-[10px] font-semibold",
+            "inline-flex items-center rounded-xs px-1.5 py-0.5 text-[10px] font-semibold",
             "presentation().badgeClassName",
-            "rounded-sm bg-violet-100 px-1.5 py-0.5 text-[10px] font-semibold",
-            "rounded-sm bg-amber-100 px-1.5 py-0.5 text-[10px] font-semibold",
-            "rounded-sm bg-emerald-100 px-1.5 py-0.5 text-[10px] font-semibold"
+            "rounded-xs bg-violet-100 px-1.5 py-0.5 text-[10px] font-semibold",
+            "rounded-xs bg-amber-100 px-1.5 py-0.5 text-[10px] font-semibold",
+            "rounded-xs bg-emerald-100 px-1.5 py-0.5 text-[10px] font-semibold"
           ]
         },
         {
@@ -3226,7 +3226,7 @@
           "patterns": [
             "const viewButtonClass",
             "inline-flex items-center gap-1 rounded-md border border-border bg-surface p-1",
-            "inline-flex min-h-8 items-center gap-1.5 rounded-sm px-3 text-xs font-medium transition-colors"
+            "inline-flex min-h-8 items-center gap-1.5 rounded-xs px-3 text-xs font-medium transition-colors"
           ]
         }
       ],
@@ -3251,7 +3251,7 @@
           "patterns": [
             "inline-flex min-h-10 sm:min-h-10 items-center rounded-full border px-3 py-2 text-sm font-semibold transition",
             "min-h-10 sm:min-h-10 rounded-full border px-3 py-2 text-sm font-semibold transition",
-            "border-blue-500 bg-blue-600 text-white shadow-sm",
+            "border-blue-500 bg-blue-600 text-white shadow-xs",
             "hover:border-blue-400 hover:text-blue-600 dark:hover:border-blue-400 dark:hover:text-blue-200"
           ]
         }
@@ -3385,7 +3385,7 @@
       "scopes": ["src/features/standalone/AgentsMachinesTable.tsx"],
       "extensions": [".tsx"],
       "allPatterns": [
-        "inline-flex h-7 w-7 items-center justify-center rounded-md text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60"
+        "inline-flex h-7 w-7 items-center justify-center rounded-md text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500/60"
       ],
       "legacyReason": "Retired migration debt. Standalone machine action triggers compose ActionIconButton for shared icon-action size, tone, focus, title, and accessible-label behavior.",
       "allowedPaths": [],
@@ -3408,7 +3408,7 @@
       "scopes": ["src/components/AI/Chat/MessageItem.tsx"],
       "extensions": [".tsx"],
       "allPatterns": [
-        "inline-flex h-5 w-5 items-center justify-center rounded text-blue-700 transition-colors hover:bg-blue-100 hover:text-blue-950 focus:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500/30"
+        "inline-flex h-5 w-5 items-center justify-center rounded-sm text-blue-700 transition-colors hover:bg-blue-100 hover:text-blue-950/25 focus:bg-blue-100 focus:outline-hidden focus:ring-2 focus:ring-blue-500/30"
       ],
       "legacyReason": "Retired migration debt. AI Chat queued message icon actions belong to ActionIconButton.",
       "allowedPaths": [],
@@ -3431,7 +3431,7 @@
       "scopes": ["src/components/AI/Chat"],
       "extensions": [".tsx"],
       "allPatterns": [
-        "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md border border-border bg-surface text-muted transition-colors hover:border-border hover:bg-surface-hover hover:text-base-content"
+        "flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-border bg-surface text-muted transition-colors hover:border-border hover:bg-surface-hover hover:text-base-content"
       ],
       "legacyReason": "Retired migration debt. AI Chat header icon actions belong to ActionIconButton.",
       "allowedPaths": [],
@@ -3457,7 +3457,7 @@
       "scopes": ["src/components/AI/Chat"],
       "extensions": [".tsx"],
       "allPatterns": [
-        "inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-blue-700 transition-colors hover:bg-blue-100 hover:text-blue-950"
+        "inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-blue-700 transition-colors hover:bg-blue-100 hover:text-blue-950/25"
       ],
       "legacyReason": "Retired migration debt. AI Chat accent icon actions belong to ActionIconButton.",
       "allowedPaths": [],
@@ -3483,7 +3483,7 @@
       "scopes": ["src/components/AI/Chat"],
       "extensions": [".tsx"],
       "allPatterns": [
-        "flex h-9 w-9 items-center justify-center rounded-md bg-blue-600 text-white shadow-sm transition-colors hover:bg-blue-700"
+        "flex h-9 w-9 items-center justify-center rounded-md bg-blue-600 text-white shadow-xs transition-colors hover:bg-blue-700"
       ],
       "legacyReason": "Retired migration debt. AI Chat primary icon actions belong to ActionIconButton.",
       "allowedPaths": [],
@@ -3562,7 +3562,7 @@
       "extensions": [".tsx"],
       "allPatterns": [
         "inline-flex h-7 w-7",
-        "border border-border-subtle bg-surface text-muted opacity-0 shadow-sm transition-opacity hover:text-base-content",
+        "border border-border-subtle bg-surface text-muted opacity-0 shadow-xs transition-opacity hover:text-base-content",
         "CopyIcon class=\"h-3.5 w-3.5\""
       ],
       "legacyReason": "Retired migration debt. AI Chat message copy actions belong to CopyValueButton.",
@@ -3586,7 +3586,7 @@
       "scopes": ["src/components/AI/Chat/ToolExecutionBlock.tsx"],
       "extensions": [".tsx"],
       "allPatterns": [
-        "inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border border-border-subtle bg-surface text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus:outline-none focus:ring-2 focus:ring-blue-500/30",
+        "inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-sm border border-border-subtle bg-surface text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus:outline-hidden focus:ring-2 focus:ring-blue-500/30",
         "CopyIcon class=\"h-3 w-3\""
       ],
       "legacyReason": "Retired migration debt. AI Chat tool copy actions belong to CopyValueButton.",
@@ -4027,7 +4027,7 @@
       },
       "scopes": ["src/components", "src/features", "src/pages"],
       "extensions": [".ts", ".tsx"],
-      "allPatterns": ["rounded border border-border bg-surface p-3 shadow-sm"],
+      "allPatterns": ["rounded-sm border border-border bg-surface p-3 shadow-xs"],
       "legacyReason": "Retired migration debt. Repeated compact information card frames must use InfoCardFrame; local card-shell copies are not allowed.",
       "allowedPaths": [],
       "ignoredPaths": ["src/components/shared/SharedPrimitives.guardrails.test.ts"],
@@ -5141,7 +5141,7 @@
       },
       "scopes": ["src/components/AI"],
       "extensions": [".tsx"],
-      "allPatterns": ["px-1.5 py-0.5 border text-[10px] font-medium rounded"],
+      "allPatterns": ["px-1.5 py-0.5 border text-[10px] font-medium rounded-sm"],
       "legacyReason": "Retired migration debt. Patrol finding row state, source, severity, investigation, confidence, and regression chips use MetadataBadge for shared shell, sizing, tone, and outline behavior.",
       "allowedPaths": [],
       "ignoredPaths": ["src/components/shared/SharedPrimitives.guardrails.test.ts"],
@@ -5161,7 +5161,7 @@
       },
       "scopes": ["src/components/patrol"],
       "extensions": [".tsx"],
-      "allPatterns": ["px-1.5 py-0.5 border text-[10px] font-medium rounded"],
+      "allPatterns": ["px-1.5 py-0.5 border text-[10px] font-medium rounded-sm"],
       "legacyReason": "Retired migration debt. Patrol investigation status, outcome, durable-record, and tool chips use MetadataBadge for shared shell, sizing, tone, and outline behavior.",
       "allowedPaths": [],
       "ignoredPaths": ["src/components/shared/SharedPrimitives.guardrails.test.ts"],
@@ -5181,7 +5181,7 @@
       },
       "scopes": ["src/components/patrol"],
       "extensions": [".tsx"],
-      "allPatterns": ["px-1.5 py-0.5", "text-[10px] font-medium rounded"],
+      "allPatterns": ["px-1.5 py-0.5", "text-[10px] font-medium rounded-sm"],
       "legacyReason": "Retired migration debt. Patrol approval risk, approval state, and tool-call result chips use MetadataBadge for shared shell, sizing, tone, and whitespace behavior.",
       "allowedPaths": [],
       "ignoredPaths": ["src/components/shared/SharedPrimitives.guardrails.test.ts"],
@@ -5222,7 +5222,7 @@
       },
       "scopes": ["src/features/proxmox"],
       "extensions": [".tsx"],
-      "allPatterns": ["rounded-sm px-1.5 py-0.5 text-[10px] font-semibold"],
+      "allPatterns": ["rounded-xs px-1.5 py-0.5 text-[10px] font-semibold"],
       "legacyReason": "Retired migration debt. Proxmox backup source/state chips use MetadataBadge for shared shell, sizing, tone vocabulary, and whitespace behavior.",
       "allowedPaths": [],
       "ignoredPaths": ["src/components/shared/SharedPrimitives.guardrails.test.ts"],
@@ -5456,7 +5456,7 @@
       "extensions": [".tsx"],
       "allPatterns": [
         "inline-flex items-center gap-1 rounded-md border border-border bg-surface p-1",
-        "inline-flex min-h-8 items-center gap-1.5 rounded-sm px-3 text-xs font-medium transition-colors"
+        "inline-flex min-h-8 items-center gap-1.5 rounded-xs px-3 text-xs font-medium transition-colors"
       ],
       "legacyReason": "Retired migration debt. Feature table view toggles must use FilterButtonGroup; local bordered segmented-view selector forks are not allowed.",
       "allowedPaths": [],
@@ -5478,7 +5478,7 @@
       "extensions": [".tsx"],
       "allPatterns": [
         "rounded-full border px-3 py-2 text-sm font-semibold transition",
-        "border-blue-500 bg-blue-600 text-white shadow-sm",
+        "border-blue-500 bg-blue-600 text-white shadow-xs",
         "hover:border-blue-400 hover:text-blue-600"
       ],
       "legacyReason": "Retired migration debt. Pressed/unpressed pill selectors belong to SelectablePillButton.",
@@ -5550,7 +5550,7 @@
       "scopes": ["src/components", "src/features", "src/pages"],
       "extensions": [".tsx"],
       "allPatterns": [
-        "inline-flex h-8 min-h-11 min-w-11 items-center gap-1.5 rounded border border-border bg-surface px-2 text-xs font-medium text-base-content transition-colors hover:bg-surface-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+        "inline-flex h-8 min-h-11 min-w-11 items-center gap-1.5 rounded-sm border border-border bg-surface px-2 text-xs font-medium text-base-content transition-colors hover:bg-surface-hover focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500"
       ],
       "legacyReason": "Retired migration debt. Drawer header Assistant and context-copy actions belong to the shared Button primitive family.",
       "allowedPaths": [],
@@ -5572,7 +5572,7 @@
       "scopes": ["src/components", "src/features", "src/pages"],
       "extensions": [".tsx"],
       "allPatterns": [
-        "inline-flex h-8 w-8 min-h-11 min-w-11 items-center justify-center rounded-md hover:bg-surface-hover hover:text-base-content focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+        "inline-flex h-8 w-8 min-h-11 min-w-11 items-center justify-center rounded-md hover:bg-surface-hover hover:text-base-content focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500"
       ],
       "legacyReason": "Retired migration debt. Drawer header close and icon actions belong to the shared Button primitive family.",
       "allowedPaths": [],
@@ -5642,7 +5642,7 @@
       "scopes": ["src/components", "src/features", "src/pages"],
       "extensions": [".tsx"],
       "allPatterns": [
-        "inline-flex min-h-7 min-w-7 shrink-0 items-center justify-center rounded border border-border bg-surface px-2 text-muted transition-colors hover:bg-surface-hover hover:text-base-content",
+        "inline-flex min-h-7 min-w-7 shrink-0 items-center justify-center rounded-sm border border-border bg-surface px-2 text-muted transition-colors hover:bg-surface-hover hover:text-base-content",
         "fallback={<CopyIcon class=\"h-3.5 w-3.5\" />}"
       ],
       "legacyReason": "Retired migration debt. Neutral copy-value icon buttons belong to CopyValueButton.",
@@ -5686,7 +5686,7 @@
       "scopes": ["src/components", "src/features", "src/pages"],
       "extensions": [".tsx"],
       "allPatterns": [
-        "inline-flex min-h-7 min-w-7 shrink-0 items-center justify-center rounded text-blue-700 transition-colors hover:bg-blue-100 dark:text-blue-200 dark:hover:bg-blue-950",
+        "inline-flex min-h-7 min-w-7 shrink-0 items-center justify-center rounded-sm text-blue-700 transition-colors hover:bg-blue-100 dark:text-blue-200 dark:hover:bg-blue-950/25",
         "fallback={<CopyIcon class=\"h-3.5 w-3.5\" />}"
       ],
       "legacyReason": "Retired migration debt. Accent copy-value icon buttons belong to CopyValueButton.",
@@ -5708,7 +5708,7 @@
       "scopes": ["src/components", "src/features", "src/pages"],
       "extensions": [".tsx"],
       "allPatterns": [
-        "flex items-start gap-2 rounded bg-surface-alt px-2 py-1.5",
+        "flex items-start gap-2 rounded-sm bg-surface-alt px-2 py-1.5",
         "break-all font-mono text-xs text-base-content"
       ],
       "legacyReason": "Retired migration debt. Copyable code rows belong to CopyableCodeRow so code styling and copy behavior stay canonical.",
@@ -6012,7 +6012,7 @@
       "extensions": [".tsx"],
       "allPatterns": [
         "px-3 py-1.5 bg-green-600 hover:bg-green-700",
-        "text-white text-xs font-medium rounded"
+        "text-white text-xs font-medium rounded-sm"
       ],
       "legacyReason": "Retired migration debt. Patrol approval execute actions belong to the shared Button primitive family.",
       "allowedPaths": [],
@@ -6035,7 +6035,7 @@
       "extensions": [".tsx"],
       "allPatterns": [
         "px-3 py-1.5 bg-amber-600 hover:bg-amber-700",
-        "text-white text-xs font-medium rounded"
+        "text-white text-xs font-medium rounded-sm"
       ],
       "legacyReason": "Retired migration debt. Patrol approval warning actions belong to the shared Button primitive family.",
       "allowedPaths": [],
@@ -6058,7 +6058,7 @@
       "extensions": [".tsx"],
       "allPatterns": [
         "px-3 py-1.5 bg-blue-600 hover:bg-blue-700",
-        "text-white text-xs font-medium rounded"
+        "text-white text-xs font-medium rounded-sm"
       ],
       "legacyReason": "Retired migration debt. Patrol Assistant handoff actions belong to the shared Button primitive family.",
       "allowedPaths": [],
@@ -6103,7 +6103,7 @@
       "scopes": ["src/components/Settings", "src/features", "src/pages"],
       "extensions": [".tsx"],
       "allPatterns": [
-        "rounded-md border border-emerald-300 bg-white px-3 py-2 text-sm font-medium text-emerald-900"
+        "rounded-md border border-emerald-300 bg-white px-3 py-2 text-sm font-medium text-emerald-900/25"
       ],
       "legacyReason": "Retired migration debt. Positive outlined settings actions belong to the shared Button primitive family.",
       "allowedPaths": [],
@@ -6124,7 +6124,7 @@
       },
       "scopes": ["src/components/Settings", "src/features", "src/pages"],
       "extensions": [".tsx"],
-      "allPatterns": ["rounded-md px-3 py-2 text-sm font-medium text-emerald-900"],
+      "allPatterns": ["rounded-md px-3 py-2 text-sm font-medium text-emerald-900/25"],
       "legacyReason": "Retired migration debt. Positive ghost settings actions belong to the shared Button primitive family.",
       "allowedPaths": [],
       "ignoredPaths": ["src/components/shared/Button.test.tsx"],
@@ -6146,7 +6146,7 @@
       "extensions": [".tsx"],
       "allPatterns": [
         "rounded-md px-2 py-1 text-xs font-medium text-emerald-700",
-        "hover:bg-emerald-50 dark:text-emerald-300 dark:hover:bg-emerald-900"
+        "hover:bg-emerald-50 dark:text-emerald-300 dark:hover:bg-emerald-900/25"
       ],
       "legacyReason": "Retired migration debt. Positive row actions belong to the shared Button primitive family.",
       "allowedPaths": [],
@@ -6255,7 +6255,7 @@
       "extensions": [".tsx"],
       "allPatterns": [
         "rounded-md px-2 py-1 text-xs font-medium text-red-600",
-        "hover:bg-red-50 dark:text-red-300 dark:hover:bg-red-900"
+        "hover:bg-red-50 dark:text-red-300 dark:hover:bg-red-900/25"
       ],
       "legacyReason": "Retired migration debt. Destructive row actions belong to the shared Button primitive family.",
       "allowedPaths": [],
diff --git a/frontend-modern/src/AppLayout.tsx b/frontend-modern/src/AppLayout.tsx
index 19d5c9a972..330044bf00 100644
--- a/frontend-modern/src/AppLayout.tsx
+++ b/frontend-modern/src/AppLayout.tsx
@@ -136,9 +136,9 @@ export function sessionHasSettingsAccess(scopes: string[] | undefined): boolean
 }
 const NAV_TAB_ICON_CLASS = 'w-4 h-4 shrink-0';
 const AI_CHAT_MOBILE_LAUNCHER_BUTTON_CLASS =
-  'group relative flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-full bg-surface-hover text-blue-600 transition-colors hover:bg-border hover:text-blue-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 dark:text-blue-400 dark:hover:text-blue-300';
+  'group relative flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-surface-hover text-blue-600 transition-colors hover:bg-border hover:text-blue-700 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 dark:text-blue-400 dark:hover:text-blue-300';
 const AI_CHAT_DESKTOP_LAUNCHER_BUTTON_CLASS =
-  'fixed right-0 top-1/2 z-40 flex min-h-9 min-w-10 -translate-y-1/2 items-center justify-center rounded-l-lg border border-r-0 border-border bg-surface px-2.5 py-2.5 text-blue-600 transition-colors duration-200 hover:bg-surface-hover hover:text-blue-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 dark:text-blue-400 dark:hover:text-blue-300';
+  'fixed right-0 top-1/2 z-40 flex min-h-9 min-w-10 -translate-y-1/2 items-center justify-center rounded-l-lg border border-r-0 border-border bg-surface px-2.5 py-2.5 text-blue-600 transition-colors duration-200 hover:bg-surface-hover hover:text-blue-700 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 dark:text-blue-400 dark:hover:text-blue-300';
 
 function getDesktopUtilityTabAriaLabel(tab: UtilityTab): string {
   const count = tab.count ?? 0;
@@ -208,7 +208,7 @@ export function ConnectionStatusBadge(props: {
       aria-label={status().detail}
     >
       <Show when={showSpinner()}>
-        <svg class="animate-spin h-3 w-3 flex-shrink-0" fill="none" viewBox="0 0 24 24">
+        <svg class="animate-spin h-3 w-3 shrink-0" fill="none" viewBox="0 0 24 24">
           <circle
             class="opacity-25"
             cx="12"
@@ -225,7 +225,7 @@ export function ConnectionStatusBadge(props: {
         </svg>
       </Show>
       <Show when={!showSpinner()}>
-        <span class={`h-2.5 w-2.5 rounded-full flex-shrink-0 ${indicatorClass()}`} />
+        <span class={`h-2.5 w-2.5 rounded-full shrink-0 ${indicatorClass()}`} />
       </Show>
       <span
         class={`whitespace-nowrap overflow-hidden transition-all duration-500 ${
@@ -470,7 +470,7 @@ export function AppLayout(props: AppLayoutProps) {
       title={assistantPageContext().title}
       aria-label={assistantPageContext().ariaLabel}
     >
-      <SparklesIcon class="h-5 w-5 flex-shrink-0" />
+      <SparklesIcon class="h-5 w-5 shrink-0" />
     </button>
   );
   createEffect(() => {
@@ -691,7 +691,7 @@ export function AppLayout(props: AppLayoutProps) {
 
     const className = () => {
       if (isActive()) {
-        return `${baseClasses} bg-surface text-blue-600 dark:text-blue-400 border-border border-b border-b-surface shadow-sm font-semibold`;
+        return `${baseClasses} bg-surface text-blue-600 dark:text-blue-400 border-border border-b border-b-surface shadow-xs font-semibold`;
       }
       if (needsSetup()) {
         return `${baseClasses} text-muted opacity-70 bg-base hover:bg-surface-hover`;
@@ -718,7 +718,7 @@ export function AppLayout(props: AppLayoutProps) {
         <span class="hidden xs:inline-flex items-center gap-1">
           <span>{tab.label}</span>
           <Show when={tab.badge}>
-            <span class="px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-muted bg-surface-hover rounded">
+            <span class="px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-muted bg-surface-hover rounded-sm">
               {tab.badge}
             </span>
           </Show>
@@ -751,7 +751,7 @@ export function AppLayout(props: AppLayoutProps) {
       <div
         class={`header mb-1 flex flex-wrap items-center gap-1 sm:flex-nowrap sm:mb-3 sm:gap-2 ${
           kioskMode()
-            ? 'fixed top-0 left-0 right-0 z-50 justify-end bg-surface shadow-sm'
+            ? 'fixed top-0 left-0 right-0 z-50 justify-end bg-surface shadow-xs'
             : 'justify-between sm:grid sm:grid-cols-[1fr_auto_1fr] sm:items-center sm:gap-0'
         }`}
         style={
@@ -797,7 +797,7 @@ export function AppLayout(props: AppLayoutProps) {
                   <img
                     src={logoDataUrl()}
                     alt={customBrandName() ? `${customBrandName()} logo` : 'Custom logo'}
-                    class="max-h-8 max-w-[12rem] object-contain"
+                    class="max-h-8 max-w-48 object-contain"
                     data-testid="custom-brand-logo"
                   />
                 )}
@@ -808,7 +808,7 @@ export function AppLayout(props: AppLayoutProps) {
                 </span>
               </Show>
               <Show when={props.versionInfo()?.channel === 'rc'}>
-                <span class="text-xs px-1.5 py-0.5 bg-orange-700 text-white rounded font-bold">
+                <span class="text-xs px-1.5 py-0.5 bg-orange-700 text-white rounded-sm font-bold">
                   Preview
                 </span>
               </Show>
@@ -834,9 +834,9 @@ export function AppLayout(props: AppLayoutProps) {
               <button
                 type="button"
                 onClick={toggleKioskMode}
-                class={`group relative flex h-9 w-9 items-center justify-center rounded-full text-xs transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 sm:h-10 sm:w-10 ${
+                class={`group relative flex h-9 w-9 items-center justify-center rounded-full text-xs transition focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 sm:h-10 sm:w-10 ${
                   kioskMode()
-                    ? 'bg-blue-100 text-blue-700 hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-300 dark:hover:bg-blue-800'
+                    ? 'bg-blue-100 text-blue-700 hover:bg-blue-200 dark:bg-blue-900/25 dark:text-blue-300 dark:hover:bg-blue-800'
                     : 'bg-surface-hover text-base-content hover:bg-border'
                 }`}
                 title={
@@ -847,8 +847,8 @@ export function AppLayout(props: AppLayoutProps) {
                 aria-label={kioskMode() ? 'Exit kiosk mode' : 'Enter kiosk mode'}
                 aria-pressed={kioskMode()}
               >
-                <Show when={kioskMode()} fallback={<Maximize2Icon class="h-4 w-4 flex-shrink-0" />}>
-                  <Minimize2Icon class="h-4 w-4 flex-shrink-0" />
+                <Show when={kioskMode()} fallback={<Maximize2Icon class="h-4 w-4 shrink-0" />}>
+                  <Minimize2Icon class="h-4 w-4 shrink-0" />
                 </Show>
               </button>
               <Show when={props.proxyAuthInfo()?.username}>
@@ -857,12 +857,12 @@ export function AppLayout(props: AppLayoutProps) {
               <button
                 type="button"
                 onClick={props.handleLogout}
-                class="group relative flex h-9 w-9 items-center justify-center rounded-full bg-surface-hover text-xs text-base-content transition hover:bg-border focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 sm:h-10 sm:w-10"
+                class="group relative flex h-9 w-9 items-center justify-center rounded-full bg-surface-hover text-xs text-base-content transition hover:bg-border focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 sm:h-10 sm:w-10"
                 title="Logout"
                 aria-label="Logout"
               >
                 <svg
-                  class="h-4 w-4 flex-shrink-0"
+                  class="h-4 w-4 shrink-0"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
@@ -878,7 +878,7 @@ export function AppLayout(props: AppLayoutProps) {
               </button>
             </div>
           </Show>
-          <ConnectionStatusBadge connectionStatus={props.connectionStatus} class="flex-shrink-0" />
+          <ConnectionStatusBadge connectionStatus={props.connectionStatus} class="shrink-0" />
         </div>
       </div>
 
@@ -901,7 +901,7 @@ export function AppLayout(props: AppLayoutProps) {
 
                   const className = () => {
                     if (isActive()) {
-                      return `${baseClasses} bg-surface text-blue-600 dark:text-blue-400 border-border border-b border-b-surface shadow-sm font-semibold`;
+                      return `${baseClasses} bg-surface text-blue-600 dark:text-blue-400 border-border border-b border-b-surface shadow-xs font-semibold`;
                     }
                     return `${baseClasses} text-muted hover:text-base-content hover:bg-surface-hover`;
                   };
@@ -960,7 +960,7 @@ export function AppLayout(props: AppLayoutProps) {
                         </span>
                       </Show>
                       <Show when={tab.badge === 'pro' && !presentationPolicyHidesUpgradePrompts()}>
-                        <span class="ml-1.5 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-900 rounded">
+                        <span class="ml-1.5 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-900/25 rounded-sm">
                           Pro
                         </span>
                       </Show>
@@ -976,7 +976,7 @@ export function AppLayout(props: AppLayoutProps) {
       <main
         id="main"
         tabindex="-1"
-        class="tab-content mb-1 block rounded-b rounded-tl rounded-tr bg-surface shadow sm:mb-2"
+        class="tab-content mb-1 block rounded-b rounded-tl rounded-tr bg-surface shadow-sm sm:mb-2"
       >
         <div class="pulse-panel">
           <Suspense fallback={<div class="p-6 text-sm text-muted">Loading view...</div>}>
@@ -1004,7 +1004,7 @@ export function AppLayout(props: AppLayoutProps) {
               href="https://github.com/rcourtman/Pulse/releases"
               target="_blank"
               rel="noopener noreferrer"
-              class="inline-flex min-h-8 items-center break-all rounded px-1 py-1 text-blue-600 hover:underline dark:text-blue-400 sm:min-h-9"
+              class="inline-flex min-h-8 items-center break-all rounded-sm px-1 py-1 text-blue-600 hover:underline dark:text-blue-400 sm:min-h-9"
             >
               {props.versionInfo()?.version || 'loading...'}
             </a>
@@ -1023,7 +1023,7 @@ export function AppLayout(props: AppLayoutProps) {
             <Show when={isPro()}>
               <a
                 href={`mailto:support@pulserelay.pro?subject=${encodeURIComponent(`Support Request - Pulse ${props.versionInfo()?.version || ''}`)}`}
-                class="inline-flex min-h-8 items-center rounded px-1 py-1 text-blue-600 hover:underline dark:text-blue-400 sm:min-h-9"
+                class="inline-flex min-h-8 items-center rounded-sm px-1 py-1 text-blue-600 hover:underline dark:text-blue-400 sm:min-h-9"
               >
                 Get Support
               </a>
diff --git a/frontend-modern/src/__tests__/App.architecture.test.ts b/frontend-modern/src/__tests__/App.architecture.test.ts
index dca733a7ee..e26e2ddef5 100644
--- a/frontend-modern/src/__tests__/App.architecture.test.ts
+++ b/frontend-modern/src/__tests__/App.architecture.test.ts
@@ -639,7 +639,7 @@ describe('App architecture', () => {
     expect(appLayoutSource).toContain('animate-pulse-brand');
     expect(appLayoutSource).toContain('pulse-brand-wordmark');
     expect(appLayoutSource).toContain("'pb-safe-or-14 xl:pb-0'");
-    expect(appStylesSource).toContain('.pb-safe-or-14');
+    expect(appStylesSource).toContain('@utility pb-safe-or-14');
     expect(appStylesSource).toContain('.pulse-shell--full-width');
     expect(appStylesSource).toContain('.pulse-wide-data-surface.space-y-3');
     expect(appStylesSource).toContain('.filter-bar > div > div:first-child button');
diff --git a/frontend-modern/src/api/patrol.ts b/frontend-modern/src/api/patrol.ts
index 5354edf4d0..1703d8eab5 100644
--- a/frontend-modern/src/api/patrol.ts
+++ b/frontend-modern/src/api/patrol.ts
@@ -721,26 +721,26 @@ export const investigationOutcomeLabels: Record<InvestigationOutcome, string> =
  */
 export const investigationOutcomeColors: Record<InvestigationOutcome, string> = {
   resolved:
-    'border-green-200 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-900 dark:text-green-300',
+    'border-green-200 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-900/25 dark:text-green-300',
   fix_queued:
-    'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-900 dark:text-blue-300',
+    'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-900/25 dark:text-blue-300',
   fix_executed:
-    'border-green-200 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-900 dark:text-green-300',
+    'border-green-200 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-900/25 dark:text-green-300',
   fix_failed:
-    'border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-900 dark:text-red-300',
+    'border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-900/25 dark:text-red-300',
   fix_rejected:
-    'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-900 dark:text-amber-300',
+    'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-900/25 dark:text-amber-300',
   needs_attention:
-    'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-900 dark:text-amber-300',
+    'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-900/25 dark:text-amber-300',
   cannot_fix: 'border-slate-200 bg-slate-50 text-slate-600',
   timed_out:
-    'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-900 dark:text-amber-300',
+    'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-900/25 dark:text-amber-300',
   fix_verified:
-    'border-green-200 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-900 dark:text-green-300',
+    'border-green-200 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-900/25 dark:text-green-300',
   fix_verification_failed:
-    'border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-900 dark:text-red-300',
+    'border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-900/25 dark:text-red-300',
   fix_verification_unknown:
-    'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-900 dark:text-amber-300',
+    'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-900/25 dark:text-amber-300',
 };
 
 // =============================================================================
diff --git a/frontend-modern/src/components/AI/AICostDashboard.tsx b/frontend-modern/src/components/AI/AICostDashboard.tsx
index 6a5ac8c1d4..27babcf133 100644
--- a/frontend-modern/src/components/AI/AICostDashboard.tsx
+++ b/frontend-modern/src/components/AI/AICostDashboard.tsx
@@ -287,10 +287,10 @@ export const AICostDashboard: Component = () => {
 
   return (
     <Card padding="none" class="overflow-hidden border border-border" border={false}>
-      <div class="bg-blue-50 dark:bg-blue-900 px-4 py-4 border-b border-border sm:px-6">
+      <div class="bg-blue-50 dark:bg-blue-900/25 px-4 py-4 border-b border-border sm:px-6">
         <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
           <div class="flex min-w-0 items-start gap-3 sm:flex-1 sm:items-center">
-            <div class="shrink-0 p-2 bg-blue-100 dark:bg-blue-900 rounded-md">
+            <div class="shrink-0 p-2 bg-blue-100 dark:bg-blue-900/25 rounded-md">
               <svg
                 class="w-5 h-5 text-blue-600 dark:text-blue-300"
                 fill="none"
@@ -340,14 +340,14 @@ export const AICostDashboard: Component = () => {
         </Show>
 
         <Show when={summary()?.truncated}>
-          <div class="text-xs px-3 py-2 rounded border border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900 text-blue-900 dark:text-blue-100">
+          <div class="text-xs px-3 py-2 rounded-sm border border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900/25 text-blue-900/25 dark:text-blue-100">
             Showing the last {summary()?.effective_days} days due to a {summary()?.retention_days}
             -day retention window.
           </div>
         </Show>
 
         <Show when={isOverBudget()}>
-          <div class="text-xs px-3 py-2 rounded border border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900 text-red-900 dark:text-red-100">
+          <div class="text-xs px-3 py-2 rounded-sm border border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/25 text-red-900/25 dark:text-red-100">
             Estimated spend ({formatUSD(estimatedTotalUSD() ?? 0)}) is above your budget (
             {formatUSD(budgetForRange() ?? 0)}).
           </div>
@@ -357,14 +357,14 @@ export const AICostDashboard: Component = () => {
           <div
             role="alert"
             aria-live="polite"
-            class="flex items-center justify-between gap-3 text-xs px-3 py-2 rounded border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900 text-amber-900 dark:text-amber-100"
+            class="flex items-center justify-between gap-3 text-xs px-3 py-2 rounded-sm border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/25 text-amber-900/25 dark:text-amber-100"
           >
             <div class="truncate">Couldn’t refresh. Showing last loaded data. {loadError()}</div>
             <button
               type="button"
               disabled={loading()}
               onClick={() => loadSummary(days())}
-              class={`shrink-0 px-2 py-1 rounded border border-amber-300 dark:border-amber-700 hover:bg-amber-100 dark:hover:bg-amber-900 ${loading() ? 'opacity-60 cursor-not-allowed' : ''}`}
+              class={`shrink-0 px-2 py-1 rounded-sm border border-amber-300 dark:border-amber-700 hover:bg-amber-100 dark:hover:bg-amber-900/25 ${loading() ? 'opacity-60 cursor-not-allowed' : ''}`}
             >
               Retry
             </button>
@@ -522,7 +522,7 @@ export const AICostDashboard: Component = () => {
                     type="button"
                     disabled={loading()}
                     onClick={() => downloadExport('csv')}
-                    class={`min-h-10 sm:min-h-9 px-2.5 py-2 text-sm rounded border border-border hover:bg-surface-hover ${loading() ? 'opacity-60 cursor-not-allowed' : ''}`}
+                    class={`min-h-10 sm:min-h-9 px-2.5 py-2 text-sm rounded-sm border border-border hover:bg-surface-hover ${loading() ? 'opacity-60 cursor-not-allowed' : ''}`}
                   >
                     Export CSV
                   </button>
@@ -530,7 +530,7 @@ export const AICostDashboard: Component = () => {
                     type="button"
                     disabled={loading()}
                     onClick={() => downloadExport('json')}
-                    class={`min-h-10 sm:min-h-9 px-2.5 py-2 text-sm rounded border border-border hover:bg-surface-hover ${loading() ? 'opacity-60 cursor-not-allowed' : ''}`}
+                    class={`min-h-10 sm:min-h-9 px-2.5 py-2 text-sm rounded-sm border border-border hover:bg-surface-hover ${loading() ? 'opacity-60 cursor-not-allowed' : ''}`}
                   >
                     Export JSON
                   </button>
@@ -538,7 +538,7 @@ export const AICostDashboard: Component = () => {
                     type="button"
                     disabled={loading()}
                     onClick={resetHistory}
-                    class={`min-h-10 sm:min-h-9 px-2.5 py-2 text-sm rounded border border-border hover:bg-surface-hover ${loading() ? 'opacity-60 cursor-not-allowed' : ''}`}
+                    class={`min-h-10 sm:min-h-9 px-2.5 py-2 text-sm rounded-sm border border-border hover:bg-surface-hover ${loading() ? 'opacity-60 cursor-not-allowed' : ''}`}
                   >
                     {AI_COST_RESET_HISTORY_LABEL}
                   </button>
diff --git a/frontend-modern/src/components/AI/Chat/ApprovalCard.tsx b/frontend-modern/src/components/AI/Chat/ApprovalCard.tsx
index b8bbef46a2..4878289ccf 100644
--- a/frontend-modern/src/components/AI/Chat/ApprovalCard.tsx
+++ b/frontend-modern/src/components/AI/Chat/ApprovalCard.tsx
@@ -26,11 +26,11 @@ const confidenceLabel = (level?: string) => {
 const confidenceClasses = (level?: string) => {
   switch (level) {
     case 'verified':
-      return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-200';
+      return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/25 dark:text-emerald-200';
     case 'partial':
-      return 'bg-sky-100 text-sky-700 dark:bg-sky-900 dark:text-sky-200';
+      return 'bg-sky-100 text-sky-700 dark:bg-sky-900/25 dark:text-sky-200';
     case 'inferred':
-      return 'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-200';
+      return 'bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-200';
     default:
       return 'bg-base-200 text-base-content';
   }
@@ -51,18 +51,18 @@ const formatExpiry = (expiresAt?: string) => {
 
 export const ApprovalCard: Component<ApprovalCardProps> = (props) => {
   return (
-    <div class="rounded-md border border-amber-300 dark:border-amber-700 overflow-hidden shadow-sm">
+    <div class="rounded-md border border-amber-300 dark:border-amber-700 overflow-hidden shadow-xs">
       {/* Header */}
-      <div class="px-3 py-2 text-xs font-medium flex items-center gap-2 bg-amber-50 dark:bg-amber-900 text-amber-800 dark:text-amber-200 border-b border-amber-200 dark:border-amber-800">
-        <div class="p-1 rounded bg-amber-100 dark:bg-amber-800">
+      <div class="px-3 py-2 text-xs font-medium flex items-center gap-2 bg-amber-50 dark:bg-amber-900/25 text-amber-800 dark:text-amber-200 border-b border-amber-200 dark:border-amber-800">
+        <div class="p-1 rounded-sm bg-amber-100 dark:bg-amber-800">
           <AlertTriangleIcon class="w-3.5 h-3.5" />
         </div>
         <span class="font-semibold">Approval Required</span>
-        <span class="px-1.5 py-0.5 bg-amber-200 dark:bg-amber-800 rounded text-[10px] font-bold uppercase tracking-wider">
+        <span class="px-1.5 py-0.5 bg-amber-200 dark:bg-amber-800 rounded-sm text-[10px] font-bold uppercase tracking-wider">
           {riskLabel(props.approval.risk)}
         </span>
         <Show when={props.approval.runOnHost}>
-          <span class="px-1.5 py-0.5 bg-amber-200 dark:bg-amber-800 rounded text-[10px] font-bold uppercase tracking-wider">
+          <span class="px-1.5 py-0.5 bg-amber-200 dark:bg-amber-800 rounded-sm text-[10px] font-bold uppercase tracking-wider">
             Agent
           </span>
         </Show>
@@ -74,9 +74,9 @@ export const ApprovalCard: Component<ApprovalCardProps> = (props) => {
       </div>
 
       {/* Command */}
-      <div class="px-3 py-3 bg-amber-50 dark:bg-amber-900">
+      <div class="px-3 py-3 bg-amber-50 dark:bg-amber-900/25">
         <Show when={props.approval.description}>
-          <p class="mb-3 text-xs leading-relaxed text-amber-900 dark:text-amber-100">
+          <p class="mb-3 text-xs leading-relaxed text-amber-900/25 dark:text-amber-100">
             {props.approval.description}
           </p>
         </Show>
@@ -100,7 +100,7 @@ export const ApprovalCard: Component<ApprovalCardProps> = (props) => {
           </div>
         </div>
 
-        <div class="mb-3 p-2 bg-surface rounded border border-amber-200 dark:border-amber-700">
+        <div class="mb-3 p-2 bg-surface rounded-sm border border-amber-200 dark:border-amber-700">
           <code class="text-xs font-mono text-base-content break-all">
             {props.approval.command}
           </code>
@@ -131,7 +131,7 @@ export const ApprovalCard: Component<ApprovalCardProps> = (props) => {
                   <div class="uppercase font-semibold text-amber-700 dark:text-amber-300">
                     Approval
                   </div>
-                  <div class="text-base-content break-words">
+                  <div class="text-base-content wrap-break-word">
                     {props.approval.plan?.approval_policy || 'admin approval'}
                   </div>
                 </div>
@@ -139,7 +139,7 @@ export const ApprovalCard: Component<ApprovalCardProps> = (props) => {
                   <div class="uppercase font-semibold text-amber-700 dark:text-amber-300">
                     Blast radius
                   </div>
-                  <div class="text-base-content break-words">
+                  <div class="text-base-content wrap-break-word">
                     {props.approval.plan?.blast_radius || 'target resource state'}
                   </div>
                 </div>
@@ -170,7 +170,7 @@ export const ApprovalCard: Component<ApprovalCardProps> = (props) => {
                     <span class="text-[11px] font-semibold uppercase text-amber-700 dark:text-amber-300">
                       Preflight
                     </span>
-                    <span class="px-1.5 py-0.5 rounded bg-base-200 text-[10px] font-bold uppercase text-base-content">
+                    <span class="px-1.5 py-0.5 rounded-sm bg-base-200 text-[10px] font-bold uppercase text-base-content">
                       {props.approval.preflight?.dry_run_available ? 'Dry run' : 'No dry run'}
                     </span>
                   </div>
@@ -181,7 +181,7 @@ export const ApprovalCard: Component<ApprovalCardProps> = (props) => {
                         <div class="uppercase font-semibold text-amber-700 dark:text-amber-300">
                           Target
                         </div>
-                        <div class="text-base-content break-words">
+                        <div class="text-base-content wrap-break-word">
                           {props.approval.preflight?.target}
                         </div>
                       </div>
@@ -191,7 +191,7 @@ export const ApprovalCard: Component<ApprovalCardProps> = (props) => {
                         <div class="uppercase font-semibold text-amber-700 dark:text-amber-300">
                           Intended change
                         </div>
-                        <div class="text-base-content break-words">
+                        <div class="text-base-content wrap-break-word">
                           {props.approval.preflight?.intended_change}
                         </div>
                       </div>
@@ -215,9 +215,9 @@ export const ApprovalCard: Component<ApprovalCardProps> = (props) => {
                       <div class="text-[11px] font-semibold uppercase text-amber-700 dark:text-amber-300">
                         Safety checks
                       </div>
-                      <ul class="mt-1 space-y-1 text-[11px] text-base-content/80">
+                      <ul class="mt-1 space-y-1 text-[11px]">
                         <For each={props.approval.preflight?.safety_checks || []}>
-                          {(item) => <li class="break-words">{item}</li>}
+                          {(item) => <li class="wrap-break-word">{item}</li>}
                         </For>
                       </ul>
                     </div>
@@ -228,9 +228,9 @@ export const ApprovalCard: Component<ApprovalCardProps> = (props) => {
                       <div class="text-[11px] font-semibold uppercase text-amber-700 dark:text-amber-300">
                         Verification
                       </div>
-                      <ul class="mt-1 space-y-1 text-[11px] text-base-content/80">
+                      <ul class="mt-1 space-y-1 text-[11px]">
                         <For each={props.approval.preflight?.verification_steps || []}>
-                          {(item) => <li class="break-words">{item}</li>}
+                          {(item) => <li class="wrap-break-word">{item}</li>}
                         </For>
                       </ul>
                     </div>
@@ -256,9 +256,9 @@ export const ApprovalCard: Component<ApprovalCardProps> = (props) => {
                     </p>
                   </Show>
                   <Show when={(props.approval.contextConfidence?.evidence || []).length > 0}>
-                    <ul class="mt-1.5 space-y-1 text-[11px] text-base-content/80">
+                    <ul class="mt-1.5 space-y-1 text-[11px]">
                       <For each={props.approval.contextConfidence?.evidence || []}>
-                        {(item) => <li class="break-words">{item}</li>}
+                        {(item) => <li class="wrap-break-word">{item}</li>}
                       </For>
                     </ul>
                   </Show>
@@ -266,7 +266,7 @@ export const ApprovalCard: Component<ApprovalCardProps> = (props) => {
               </Show>
 
               <Show when={props.approval.auditId || props.approval.plan?.plan_hash}>
-                <div class="pt-2 border-t border-amber-200 dark:border-amber-700 text-[11px] text-base-content/80 break-all">
+                <div class="pt-2 border-t border-amber-200 dark:border-amber-700 text-[11px] break-all">
                   <Show when={props.approval.auditId}>
                     <span>Audit {props.approval.auditId}</span>
                   </Show>
@@ -288,7 +288,7 @@ export const ApprovalCard: Component<ApprovalCardProps> = (props) => {
             class={`flex-1 px-3 py-2 text-xs font-semibold rounded-md transition-all ${
               props.approval.isExecuting
                 ? 'bg-green-400 text-white cursor-wait'
-                : 'bg-green-500 hover:bg-green-600 text-white shadow-sm hover:shadow-sm'
+                : 'bg-green-500 hover:bg-green-600 text-white shadow-xs hover:shadow-xs'
             }`}
           >
             <Show
diff --git a/frontend-modern/src/components/AI/Chat/AssistantCommandHelpDialog.tsx b/frontend-modern/src/components/AI/Chat/AssistantCommandHelpDialog.tsx
index 616ab3530f..128a8cd3c6 100644
--- a/frontend-modern/src/components/AI/Chat/AssistantCommandHelpDialog.tsx
+++ b/frontend-modern/src/components/AI/Chat/AssistantCommandHelpDialog.tsx
@@ -112,7 +112,7 @@ export function AssistantCommandHelpDialog(props: AssistantCommandHelpDialogProp
       isOpen={true}
       onClose={props.onClose}
       layout="mobile-sheet"
-      panelClass="max-w-[30rem] shadow-xl"
+      panelClass="max-w-120 shadow-xl"
       ariaLabel={AI_CHAT_COMMAND_HELP_TITLE}
     >
       <>
@@ -139,7 +139,7 @@ export function AssistantCommandHelpDialog(props: AssistantCommandHelpDialogProp
           />
         </div>
         <div
-          class="max-h-[25rem] overflow-y-auto p-2"
+          class="max-h-100 overflow-y-auto p-2"
           role="listbox"
           aria-label={AI_CHAT_COMMAND_HELP_TITLE}
         >
@@ -172,7 +172,7 @@ export function AssistantCommandHelpDialog(props: AssistantCommandHelpDialogProp
                           role="option"
                           aria-selected={item.index === selectedCommandIndex()}
                           aria-disabled={command.disabled ? 'true' : undefined}
-                          class={`flex w-full items-start gap-3 rounded-md px-3 py-2.5 text-left transition-colors focus:outline-none ${
+                          class={`flex w-full items-start gap-3 rounded-md px-3 py-2.5 text-left transition-colors focus:outline-hidden ${
                             command.disabled
                               ? 'cursor-help opacity-55'
                               : 'hover:bg-surface-hover focus:bg-surface-hover'
diff --git a/frontend-modern/src/components/AI/Chat/ChatMessages.tsx b/frontend-modern/src/components/AI/Chat/ChatMessages.tsx
index aa59de2924..8badbd59f5 100644
--- a/frontend-modern/src/components/AI/Chat/ChatMessages.tsx
+++ b/frontend-modern/src/components/AI/Chat/ChatMessages.tsx
@@ -286,7 +286,7 @@ export const ChatMessages: Component<ChatMessagesProps> = (props) => {
                 {(prompt) => (
                   <button
                     type="button"
-                    class="w-full rounded-md border border-border bg-surface px-3 py-2 text-left text-sm text-base-content transition-colors hover:border-blue-300 hover:bg-surface-alt focus:outline-none focus:ring-2 focus:ring-blue-500/30"
+                    class="w-full rounded-md border border-border bg-surface px-3 py-2 text-left text-sm text-base-content transition-colors hover:border-blue-300 hover:bg-surface-alt focus:outline-hidden focus:ring-2 focus:ring-blue-500/30"
                     onClick={() => props.onSuggestedPrompt?.(prompt)}
                     data-testid="assistant-suggested-prompt"
                   >
@@ -310,7 +310,7 @@ export const ChatMessages: Component<ChatMessagesProps> = (props) => {
                   return (
                     <button
                       type="button"
-                      class="w-full rounded-md border border-border bg-surface px-3 py-2 text-left transition-colors hover:border-blue-300 hover:bg-surface-alt focus:outline-none focus:ring-2 focus:ring-blue-500/30"
+                      class="w-full rounded-md border border-border bg-surface px-3 py-2 text-left transition-colors hover:border-blue-300 hover:bg-surface-alt focus:outline-hidden focus:ring-2 focus:ring-blue-500/30"
                       onClick={() => props.onLoadSession?.(session.id)}
                       aria-label={`Resume ${session.title || 'Untitled Assistant session'}`}
                     >
diff --git a/frontend-modern/src/components/AI/Chat/MentionAutocomplete.tsx b/frontend-modern/src/components/AI/Chat/MentionAutocomplete.tsx
index afff643d5e..e05b6912cb 100644
--- a/frontend-modern/src/components/AI/Chat/MentionAutocomplete.tsx
+++ b/frontend-modern/src/components/AI/Chat/MentionAutocomplete.tsx
@@ -184,7 +184,7 @@ export function MentionAutocomplete(props: MentionAutocompleteProps) {
   return (
     <Show when={props.visible && filteredResources().length > 0}>
       <div
-        class="absolute z-50 w-[calc(100vw-36px)] min-w-[280px] max-w-[400px] overflow-hidden rounded-md border border-border bg-surface shadow-sm"
+        class="absolute z-50 w-[calc(100vw-36px)] min-w-[280px] max-w-[400px] overflow-hidden rounded-md border border-border bg-surface shadow-xs"
         style={{
           bottom: `${props.position.top}px`,
           left: `${props.position.left}px`,
@@ -247,11 +247,11 @@ export function MentionAutocomplete(props: MentionAutocompleteProps) {
           </For>
         </div>
         <div class="px-3 py-1.5 border-t border-border text-xs text-muted flex items-center gap-2">
-          <span class="px-1.5 py-0.5 bg-surface-hover rounded text-[10px]">↑↓</span>
+          <span class="px-1.5 py-0.5 bg-surface-hover rounded-sm text-[10px]">↑↓</span>
           navigate
-          <span class="px-1.5 py-0.5 bg-surface-hover rounded text-[10px]">↵</span>
+          <span class="px-1.5 py-0.5 bg-surface-hover rounded-sm text-[10px]">↵</span>
           select
-          <span class="px-1.5 py-0.5 bg-surface-hover rounded text-[10px]">esc</span>
+          <span class="px-1.5 py-0.5 bg-surface-hover rounded-sm text-[10px]">esc</span>
           close
         </div>
       </div>
diff --git a/frontend-modern/src/components/AI/Chat/MessageItem.tsx b/frontend-modern/src/components/AI/Chat/MessageItem.tsx
index 144ab4f20c..ef48fe7709 100644
--- a/frontend-modern/src/components/AI/Chat/MessageItem.tsx
+++ b/frontend-modern/src/components/AI/Chat/MessageItem.tsx
@@ -73,7 +73,7 @@ interface MessageItemProps {
 }
 
 const markdownClass =
-  'text-sm prose prose-slate prose-sm dark:prose-invert max-w-none prose-p:leading-relaxed prose-p:my-2 prose-pre:bg-slate-900 prose-pre:text-slate-100 prose-pre:rounded-md prose-pre:text-xs prose-pre:border prose-pre:border-slate-800 prose-code:[overflow-wrap:anywhere] prose-code:text-blue-700 dark:prose-code:text-blue-300 prose-code:bg-blue-50 dark:prose-code:bg-blue-900 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:font-mono prose-code:text-[0.9em] prose-code:border prose-code:border-blue-100 dark:prose-code:border-blue-800 prose-code:before:content-none prose-code:after:content-none prose-headings:font-semibold prose-hr:border-slate-200 dark:prose-hr:border-slate-700 prose-ul:my-2 prose-ol:my-2 prose-li:my-1';
+  'text-sm prose prose-slate prose-sm dark:prose-invert max-w-none prose-p:leading-relaxed prose-p:my-2 prose-pre:bg-slate-900 prose-pre:text-slate-100 prose-pre:rounded-md prose-pre:text-xs prose-pre:border prose-pre:border-slate-800 prose-code:wrap-anywhere prose-code:text-blue-700 dark:prose-code:text-blue-300 prose-code:bg-blue-50 dark:prose-code:bg-blue-900/25 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:font-mono prose-code:text-[0.9em] prose-code:border prose-code:border-blue-100 dark:prose-code:border-blue-800 prose-code:before:content-none prose-code:after:content-none prose-headings:font-semibold prose-hr:border-slate-200 dark:prose-hr:border-slate-700 prose-ul:my-2 prose-ol:my-2 prose-li:my-1';
 
 const TEXT_RENDER_PACE_MS = 24;
 const TEXT_RENDER_SNAP = /[\s.,!?;:)\]]/;
@@ -547,7 +547,7 @@ export const MessageItem: Component<MessageItemProps> = (props) => {
               title="Edit and resend"
               tone="outline"
               size="sm"
-              class="mt-1 opacity-0 shadow-sm transition-opacity focus:opacity-100 group-hover:opacity-100"
+              class="mt-1 opacity-0 shadow-xs transition-opacity focus:opacity-100 group-hover:opacity-100"
             >
               <PencilIcon class="h-3.5 w-3.5" aria-hidden="true" />
             </ActionIconButton>
@@ -560,13 +560,13 @@ export const MessageItem: Component<MessageItemProps> = (props) => {
               label={copyButtonLabel()}
               size="md"
               stopPropagation
-              class="mt-1 opacity-0 shadow-sm transition-opacity focus:opacity-100 group-hover:opacity-100"
+              class="mt-1 opacity-0 shadow-xs transition-opacity focus:opacity-100 group-hover:opacity-100"
             />
           </Show>
           <div
-            class={`min-w-0 px-4 py-2.5 rounded-md rounded-br-sm shadow-sm ${
+            class={`min-w-0 px-4 py-2.5 rounded-md rounded-br-sm shadow-xs ${
               isQueuedUserMessage()
-                ? 'border border-blue-200 bg-blue-50 text-blue-950 dark:border-blue-900/60 dark:bg-blue-950/30 dark:text-blue-100'
+                ? 'border border-blue-200 bg-blue-50 text-blue-950/25 dark:border-blue-900/60 dark:bg-blue-950/30 dark:text-blue-100'
                 : 'bg-blue-600 text-white'
             }`}
           >
@@ -581,7 +581,7 @@ export const MessageItem: Component<MessageItemProps> = (props) => {
                 <Show when={queuedModelRouteLabel()}>
                   {(label) => (
                     <span
-                      class="inline-flex max-w-[12rem] items-center rounded border border-blue-200 bg-white/80 px-1.5 py-0.5 text-[10px] font-semibold text-blue-800 dark:border-blue-800 dark:bg-blue-950/40 dark:text-blue-200"
+                      class="inline-flex max-w-48 items-center rounded-sm border border-blue-200 bg-white/80 px-1.5 py-0.5 text-[10px] font-semibold text-blue-800 dark:border-blue-800 dark:bg-blue-950/40 dark:text-blue-200"
                       title={props.message.request?.model}
                     >
                       <span class="truncate">{label()}</span>
@@ -617,7 +617,7 @@ export const MessageItem: Component<MessageItemProps> = (props) => {
       {/* Assistant message */}
       <Show when={!isUser()}>
         <div class="group flex w-full min-w-0 gap-3 px-1 py-2">
-          <div class="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-border-subtle bg-surface-alt text-blue-600 shadow-sm dark:text-blue-400">
+          <div class="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-border-subtle bg-surface-alt text-blue-600 shadow-xs dark:text-blue-400">
             <SparklesIcon class="h-3.5 w-3.5" />
           </div>
 
@@ -628,7 +628,7 @@ export const MessageItem: Component<MessageItemProps> = (props) => {
               </span>
               <Show when={messageModelLabel()}>
                 <span
-                  class="max-w-[12rem] truncate rounded border border-border-subtle bg-surface-alt px-1.5 py-0.5 text-[10px] font-medium text-muted"
+                  class="max-w-48 truncate rounded-sm border border-border-subtle bg-surface-alt px-1.5 py-0.5 text-[10px] font-medium text-muted"
                   title={props.message.model}
                 >
                   {messageModelLabel()}
@@ -636,7 +636,7 @@ export const MessageItem: Component<MessageItemProps> = (props) => {
               </Show>
               <Show when={messageDurationLabel()}>
                 <span
-                  class="inline-flex shrink-0 items-center gap-1 rounded border border-border-subtle bg-surface-alt px-1.5 py-0.5 text-[10px] font-medium text-muted"
+                  class="inline-flex shrink-0 items-center gap-1 rounded-sm border border-border-subtle bg-surface-alt px-1.5 py-0.5 text-[10px] font-medium text-muted"
                   title="Turn duration"
                   aria-label={`Turn duration ${messageDurationLabel()}`}
                 >
@@ -669,7 +669,7 @@ export const MessageItem: Component<MessageItemProps> = (props) => {
                   label={copyButtonLabel()}
                   size="md"
                   stopPropagation
-                  class="ml-auto opacity-0 shadow-sm transition-opacity focus:opacity-100 group-hover:opacity-100"
+                  class="ml-auto opacity-0 shadow-xs transition-opacity focus:opacity-100 group-hover:opacity-100"
                 />
               </Show>
               <Show when={props.onRegenerate}>
@@ -679,7 +679,7 @@ export const MessageItem: Component<MessageItemProps> = (props) => {
                   title="Regenerate response"
                   tone="outline"
                   size="sm"
-                  class={`${canCopy() ? '' : 'ml-auto '}opacity-0 shadow-sm transition-opacity focus:opacity-100 group-hover:opacity-100`}
+                  class={`${canCopy() ? '' : 'ml-auto '}opacity-0 shadow-xs transition-opacity focus:opacity-100 group-hover:opacity-100`}
                 >
                   <RotateCcwIcon class="h-3.5 w-3.5" aria-hidden="true" />
                 </ActionIconButton>
@@ -931,7 +931,7 @@ export const MessageItem: Component<MessageItemProps> = (props) => {
                             }
                             aria-label={modelRouteRecoveryButtonLabel()}
                             title={alternative().label}
-                            class="inline-flex max-w-[14rem] items-center gap-1.5 rounded-md border border-red-300 bg-white/80 px-2 py-1 text-xs font-medium text-red-700 transition-colors hover:bg-red-100 dark:border-red-800 dark:bg-red-950/20 dark:text-red-300 dark:hover:bg-red-900/40"
+                            class="inline-flex max-w-56 items-center gap-1.5 rounded-md border border-red-300 bg-white/80 px-2 py-1 text-xs font-medium text-red-700 transition-colors hover:bg-red-100 dark:border-red-800 dark:bg-red-950/20 dark:text-red-300 dark:hover:bg-red-900/40"
                           >
                             <CpuIcon class="h-3.5 w-3.5" />
                             <span class="truncate">{modelRouteRecoveryButtonLabel()}</span>
diff --git a/frontend-modern/src/components/AI/Chat/ModelSelector.tsx b/frontend-modern/src/components/AI/Chat/ModelSelector.tsx
index f20d89d910..a4d7e81428 100644
--- a/frontend-modern/src/components/AI/Chat/ModelSelector.tsx
+++ b/frontend-modern/src/components/AI/Chat/ModelSelector.tsx
@@ -98,7 +98,7 @@ export const ModelSelector: Component<ModelSelectorProps> = (props) => {
       onManageProviders={props.onManageProviders}
       manageProvidersLabel="Open Assistant provider settings"
       align="left"
-      buttonClass="flex flex-shrink-0 items-center gap-1.5 rounded-md border border-border bg-surface px-2.5 py-1.5 text-[11px] text-muted transition-colors hover:border-border hover:text-base-content"
+      buttonClass="flex shrink-0 items-center gap-1.5 rounded-md border border-border bg-surface px-2.5 py-1.5 text-[11px] text-muted transition-colors hover:border-border hover:text-base-content"
       buttonLabelClass="max-w-[90px] truncate font-medium sm:max-w-[180px]"
       dropdownClass="w-80 max-w-[calc(100vw-2rem)]"
     />
diff --git a/frontend-modern/src/components/AI/Chat/QuestionCard.tsx b/frontend-modern/src/components/AI/Chat/QuestionCard.tsx
index e37cae7440..24b67d5c1d 100644
--- a/frontend-modern/src/components/AI/Chat/QuestionCard.tsx
+++ b/frontend-modern/src/components/AI/Chat/QuestionCard.tsx
@@ -40,10 +40,10 @@ export const QuestionCard: Component<QuestionCardProps> = (props) => {
   };
 
   return (
-    <div class="rounded-md border border-blue-300 dark:border-blue-700 overflow-hidden shadow-sm">
+    <div class="rounded-md border border-blue-300 dark:border-blue-700 overflow-hidden shadow-xs">
       {/* Header */}
-      <div class="px-3 py-2 text-xs font-medium flex items-center gap-2 bg-blue-50 dark:bg-blue-900 text-blue-800 dark:text-blue-200 border-b border-blue-200 dark:border-blue-800">
-        <div class="p-1 rounded bg-blue-100 dark:bg-blue-800">
+      <div class="px-3 py-2 text-xs font-medium flex items-center gap-2 bg-blue-50 dark:bg-blue-900/25 text-blue-800 dark:text-blue-200 border-b border-blue-200 dark:border-blue-800">
+        <div class="p-1 rounded-sm bg-blue-100 dark:bg-blue-800">
           <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path
               stroke-linecap="round"
@@ -57,7 +57,7 @@ export const QuestionCard: Component<QuestionCardProps> = (props) => {
       </div>
 
       {/* Questions */}
-      <div class="px-3 py-3 bg-blue-50 dark:bg-blue-900 space-y-4">
+      <div class="px-3 py-3 bg-blue-50 dark:bg-blue-900/25 space-y-4">
         <For each={props.question.questions}>
           {(q) => (
             <div class="space-y-2">
@@ -71,7 +71,7 @@ export const QuestionCard: Component<QuestionCardProps> = (props) => {
                   type="text"
                   value={answers()[q.id] || ''}
                   onInput={(e) => handleInputChange(q.id, e.currentTarget.value)}
-                  class="w-full px-3 py-2 text-sm border border-blue-200 dark:border-blue-700 rounded-md bg-surface text-base-content focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  class="w-full px-3 py-2 text-sm border border-blue-200 dark:border-blue-700 rounded-md bg-surface text-base-content focus:outline-hidden focus:ring-2 focus:ring-blue-500"
                   placeholder={AI_CHAT_QUESTION_CARD_PLACEHOLDER}
                   disabled={props.question.isAnswering}
                 />
@@ -88,7 +88,7 @@ export const QuestionCard: Component<QuestionCardProps> = (props) => {
                         class={`w-full px-3 py-2 text-sm text-left rounded-md border transition-colors ${
                           answers()[q.id] === option.value
                             ? 'bg-blue-100 dark:bg-blue-800 border-blue-400 dark:border-blue-600 text-blue-800 dark:text-blue-200'
-                            : 'bg-surface border-blue-200 dark:border-blue-700 text-base-content hover:bg-blue-50 dark:hover:bg-blue-900'
+                            : 'bg-surface border-blue-200 dark:border-blue-700 text-base-content hover:bg-blue-50 dark:hover:bg-blue-900/25'
                         } ${props.question.isAnswering ? 'opacity-50 cursor-not-allowed' : ''}`}
                       >
                         <div class="flex flex-col gap-0.5">
@@ -117,7 +117,7 @@ export const QuestionCard: Component<QuestionCardProps> = (props) => {
                 ? 'bg-blue-400 text-white cursor-wait'
                 : !isValid()
                   ? 'bg-surface-hover text-muted cursor-not-allowed'
-                  : 'bg-blue-500 hover:bg-blue-600 text-white shadow-sm hover:shadow-sm'
+                  : 'bg-blue-500 hover:bg-blue-600 text-white shadow-xs hover:shadow-xs'
             }`}
           >
             <Show
diff --git a/frontend-modern/src/components/AI/Chat/SlashCommandAutocomplete.tsx b/frontend-modern/src/components/AI/Chat/SlashCommandAutocomplete.tsx
index 2a929afbda..8a93970e0f 100644
--- a/frontend-modern/src/components/AI/Chat/SlashCommandAutocomplete.tsx
+++ b/frontend-modern/src/components/AI/Chat/SlashCommandAutocomplete.tsx
@@ -166,7 +166,7 @@ export function SlashCommandAutocomplete(props: SlashCommandAutocompleteProps) {
   return (
     <Show when={props.visible}>
       <div
-        class="absolute z-50 w-[calc(100vw-36px)] min-w-[280px] max-w-[420px] overflow-hidden rounded-md border border-border bg-surface shadow-sm"
+        class="absolute z-50 w-[calc(100vw-36px)] min-w-[280px] max-w-[420px] overflow-hidden rounded-md border border-border bg-surface shadow-xs"
         style={{
           bottom: `${props.position.top}px`,
           left: `${props.position.left}px`,
diff --git a/frontend-modern/src/components/AI/Chat/ThinkingBlock.tsx b/frontend-modern/src/components/AI/Chat/ThinkingBlock.tsx
index 7d503616c5..d2f52bd4c8 100644
--- a/frontend-modern/src/components/AI/Chat/ThinkingBlock.tsx
+++ b/frontend-modern/src/components/AI/Chat/ThinkingBlock.tsx
@@ -63,7 +63,7 @@ export const ThinkingBlock: Component<ThinkingBlockProps> = (props) => {
       />
       <span class="min-w-0 truncate">
         {statusText()}
-        <span class="text-muted/80">
+        <span class="">
           {durationLabel()
             ? props.isStreaming
               ? ` (${durationLabel()})`
diff --git a/frontend-modern/src/components/AI/Chat/ToolExecutionBlock.tsx b/frontend-modern/src/components/AI/Chat/ToolExecutionBlock.tsx
index 3a8d9988ae..5e050e1917 100644
--- a/frontend-modern/src/components/AI/Chat/ToolExecutionBlock.tsx
+++ b/frontend-modern/src/components/AI/Chat/ToolExecutionBlock.tsx
@@ -156,7 +156,7 @@ const ToolInputSummary: Component<ToolInputSummaryProps> = (props) => {
   const isShellSummary = createMemo(() => props.summary.trim().startsWith('$ '));
   const className = createMemo(
     () =>
-      `mt-1 block whitespace-pre-wrap break-words leading-5 text-base-content ${
+      `mt-1 block whitespace-pre-wrap wrap-break-word leading-5 text-base-content ${
         isShellSummary() ? 'font-mono text-[11px]' : 'text-[12px] font-medium'
       }`,
   );
@@ -210,7 +210,7 @@ const VisibleToolCommandPreview: Component<ToolCommandPreviewProps> = (props) =>
       <code
         data-testid="tool-command-preview"
         aria-label="Tool command"
-        class="min-w-0 flex-1 whitespace-pre-wrap break-words font-mono text-[11px] leading-5 text-muted"
+        class="min-w-0 flex-1 whitespace-pre-wrap wrap-break-word font-mono text-[11px] leading-5 text-muted"
       >
         {props.preview}
       </code>
@@ -254,7 +254,7 @@ const detailCopyTarget = (kind: ToolDetailKind) => {
 };
 
 const detailPreClass = (kind: ToolDetailKind) =>
-  `${kind === 'output' ? 'max-h-72' : 'max-h-36'} overflow-auto rounded bg-surface-alt p-2 font-mono text-[10px] leading-5 text-muted whitespace-pre-wrap break-words`;
+  `${kind === 'output' ? 'max-h-72' : 'max-h-36'} overflow-auto rounded-sm bg-surface-alt p-2 font-mono text-[10px] leading-5 text-muted whitespace-pre-wrap wrap-break-word`;
 
 const ToolDetailsPanel: Component<ToolDetailsPanelProps> = (props) => {
   const [copiedDetail, setCopiedDetail] = createSignal<ToolDetailKind | null>(null);
@@ -450,7 +450,7 @@ export const ToolExecutionBlock: Component<ToolExecutionBlockProps> = (props) =>
           </Show>
           <Show when={hiddenOutputBadgeSummary()}>
             <span
-              class="shrink-0 rounded border border-border-subtle bg-surface px-1.5 py-0.5 text-[9px] font-medium"
+              class="shrink-0 rounded-sm border border-border-subtle bg-surface px-1.5 py-0.5 text-[9px] font-medium"
               title="Open the completed turn to inspect tool output"
               aria-label={`Tool output available: ${hiddenOutputBadgeSummary()}`}
             >
@@ -461,14 +461,14 @@ export const ToolExecutionBlock: Component<ToolExecutionBlockProps> = (props) =>
       }
     >
       <div
-        class="my-2 overflow-hidden rounded-md border border-border-subtle bg-surface text-[11px] shadow-sm"
+        class="my-2 overflow-hidden rounded-md border border-border-subtle bg-surface text-[11px] shadow-xs"
         role={settlingFastCompletion() ? 'status' : undefined}
         aria-label={settlingFastCompletion() ? 'Assistant tool running' : undefined}
       >
         <div
           class={`flex min-w-0 items-start gap-2 px-2.5 py-2 ${
             hasDetails()
-              ? 'cursor-pointer transition-colors hover:bg-surface-hover focus:outline-none focus:ring-2 focus:ring-blue-500/30 focus:ring-inset'
+              ? 'cursor-pointer transition-colors hover:bg-surface-hover focus:outline-hidden focus:ring-2 focus:ring-blue-500/30 focus:ring-inset'
               : ''
           }`}
           role={hasDetails() ? 'button' : undefined}
@@ -512,7 +512,7 @@ export const ToolExecutionBlock: Component<ToolExecutionBlockProps> = (props) =>
                 {toolLabel()}
               </span>
               <span
-                class={`shrink-0 rounded border px-1.5 py-0.5 text-[9px] font-medium ${statusPillClass()}`}
+                class={`shrink-0 rounded-sm border px-1.5 py-0.5 text-[9px] font-medium ${statusPillClass()}`}
               >
                 {statusLabel()}
               </span>
@@ -536,7 +536,7 @@ export const ToolExecutionBlock: Component<ToolExecutionBlockProps> = (props) =>
               </Show>
               <Show when={hiddenOutputBadgeSummary()}>
                 <span
-                  class="shrink-0 rounded border border-border-subtle bg-surface-alt px-1.5 py-0.5 text-[9px] font-medium text-muted"
+                  class="shrink-0 rounded-sm border border-border-subtle bg-surface-alt px-1.5 py-0.5 text-[9px] font-medium text-muted"
                   title="Open tool details to inspect output"
                   aria-label={`Tool output available: ${hiddenOutputBadgeSummary()}`}
                 >
@@ -570,7 +570,7 @@ export const ToolExecutionBlock: Component<ToolExecutionBlockProps> = (props) =>
               Output preview
             </div>
             <pre
-              class="px-3 pb-2 pt-1 font-mono text-[11px] leading-5 text-base-content whitespace-pre-wrap break-words"
+              class="px-3 pb-2 pt-1 font-mono text-[11px] leading-5 text-base-content whitespace-pre-wrap wrap-break-word"
               aria-label="Tool output preview"
             >
               {outputPreview()}
@@ -676,7 +676,7 @@ export const PendingToolBlock: Component<PendingToolBlockProps> = (props) => {
       <div
         class={`px-2.5 py-2 ${
           hasDetails()
-            ? 'cursor-pointer transition-colors hover:bg-blue-100/60 focus:outline-none focus:ring-2 focus:ring-blue-500/30 focus:ring-inset dark:hover:bg-blue-950/30'
+            ? 'cursor-pointer transition-colors hover:bg-blue-100/60 focus:outline-hidden focus:ring-2 focus:ring-blue-500/30 focus:ring-inset dark:hover:bg-blue-950/30'
             : ''
         }`}
         role={hasDetails() ? 'button' : undefined}
@@ -731,8 +731,8 @@ export const PendingToolBlock: Component<PendingToolBlockProps> = (props) => {
         </div>
 
         <Show when={progressText()}>
-          <div class="mt-1 min-w-0 pl-[calc(0.875rem+0.5rem)] text-[10px] leading-snug text-muted">
-            <span class="block whitespace-pre-wrap break-words" title={progressText()}>
+          <div class="mt-1 min-w-0 pl-5.5 text-[10px] leading-snug text-muted">
+            <span class="block whitespace-pre-wrap wrap-break-word" title={progressText()}>
               {progressText()}
             </span>
           </div>
@@ -799,7 +799,7 @@ export const ToolCancellationBlock: Component<ToolCancellationBlockProps> = (pro
       <div
         class={`flex min-w-0 items-start gap-2 px-2.5 py-2 ${
           hasDetails()
-            ? 'cursor-pointer transition-colors hover:bg-amber-100/60 focus:outline-none focus:ring-2 focus:ring-amber-500/30 focus:ring-inset dark:hover:bg-amber-950/30'
+            ? 'cursor-pointer transition-colors hover:bg-amber-100/60 focus:outline-hidden focus:ring-2 focus:ring-amber-500/30 focus:ring-inset dark:hover:bg-amber-950/30'
             : ''
         }`}
         role={hasDetails() ? 'button' : undefined}
@@ -822,7 +822,7 @@ export const ToolCancellationBlock: Component<ToolCancellationBlockProps> = (pro
             <span class="shrink-0 font-mono text-[9px] font-semibold uppercase tracking-wider text-muted">
               {toolLabel()}
             </span>
-            <span class="shrink-0 rounded border border-amber-200 bg-amber-100 px-1.5 py-0.5 text-[9px] font-medium text-amber-800 dark:border-amber-900/60 dark:bg-amber-950/40 dark:text-amber-200">
+            <span class="shrink-0 rounded-sm border border-amber-200 bg-amber-100 px-1.5 py-0.5 text-[9px] font-medium text-amber-800 dark:border-amber-900/60 dark:bg-amber-950/40 dark:text-amber-200">
               skipped
             </span>
             <Show when={hasDetails()}>
@@ -839,7 +839,7 @@ export const ToolCancellationBlock: Component<ToolCancellationBlockProps> = (pro
             <ToolCommandPreview preview={commandPreview()} />
           </Show>
           <div class="mt-1 min-w-0 text-[10px] leading-snug text-muted">
-            <span class="block whitespace-pre-wrap break-words">{reason()}</span>
+            <span class="block whitespace-pre-wrap wrap-break-word">{reason()}</span>
           </div>
         </div>
       </div>
@@ -879,7 +879,7 @@ export const PendingToolsList: Component<PendingToolsListProps> = (props) => {
       <Show when={shouldCollapse() && !expanded()}>
         <button
           onClick={() => setExpanded(true)}
-          class="w-full mt-0.5 py-1 text-[10px] text-muted hover:text-base-content hover:bg-surface-hover rounded text-center font-medium"
+          class="w-full mt-0.5 py-1 text-[10px] text-muted hover:text-base-content hover:bg-surface-hover rounded-sm text-center font-medium"
         >
           + {hiddenCount()} more tools running...
         </button>
@@ -920,7 +920,7 @@ export const ToolExecutionsList: Component<ToolExecutionsListProps> = (props) =>
       <Show when={shouldCollapse() && !showAll()}>
         <button
           onClick={() => setShowAll(true)}
-          class="w-full mt-0.5 py-1 text-[10px] text-muted hover:bg-surface-hover rounded text-center font-medium"
+          class="w-full mt-0.5 py-1 text-[10px] text-muted hover:bg-surface-hover rounded-sm text-center font-medium"
         >
           + {hiddenCount()} more tools ({stats().success} ✓ / {stats().failed} ✗)
         </button>
diff --git a/frontend-modern/src/components/AI/Chat/__tests__/AIChat.test.tsx b/frontend-modern/src/components/AI/Chat/__tests__/AIChat.test.tsx
index 5d6c26fd39..7ebdd41f03 100644
--- a/frontend-modern/src/components/AI/Chat/__tests__/AIChat.test.tsx
+++ b/frontend-modern/src/components/AI/Chat/__tests__/AIChat.test.tsx
@@ -665,16 +665,16 @@ describe('AIChat', () => {
       );
       expect(aiChatSource).toContain('<ActionIconButton');
       for (const retiredActionIconShell of [
-        'flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md border border-border bg-surface text-muted transition-colors hover:border-border hover:bg-surface-hover hover:text-base-content disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-surface disabled:hover:text-muted',
-        'flex-shrink-0 p-2 hover:text-base-content rounded-md hover:bg-surface-hover transition-colors',
-        'inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-blue-700 transition-colors hover:bg-blue-100 hover:text-blue-950 disabled:cursor-wait disabled:opacity-70 dark:text-blue-200 dark:hover:bg-blue-900/60',
-        'rounded p-1 text-muted opacity-0 transition-opacity hover:bg-blue-100 hover:text-blue-600 focus:opacity-100 group-hover:opacity-100 group-focus-within:opacity-100 dark:hover:bg-blue-900 dark:hover:text-blue-300',
-        'order-2 flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-md hover:text-base-content hover:bg-surface-hover transition-colors sm:order-none',
-        'flex h-7 w-7 items-center justify-center rounded-md border border-amber-200 bg-surface text-amber-700 transition-colors hover:bg-amber-100 hover:text-amber-900 dark:border-amber-800 dark:bg-amber-950/60 dark:text-amber-200 dark:hover:bg-amber-900',
-        'flex h-7 w-7 items-center justify-center rounded-md text-amber-700 transition-colors hover:bg-amber-100 hover:text-amber-900 dark:text-amber-200 dark:hover:bg-amber-900',
-        'inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-blue-700 transition-colors hover:bg-blue-100 hover:text-blue-950 dark:text-blue-200 dark:hover:bg-blue-900/60',
-        'flex h-9 w-9 items-center justify-center rounded-md bg-blue-600 text-white shadow-sm transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-45',
-        'flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-border bg-surface text-muted transition-colors hover:border-border hover:bg-surface-hover hover:text-base-content focus:outline-none focus:ring-2 focus:ring-blue-500/30',
+        'flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-border bg-surface text-muted transition-colors hover:border-border hover:bg-surface-hover hover:text-base-content disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-surface disabled:hover:text-muted',
+        'shrink-0 p-2 hover:text-base-content rounded-md hover:bg-surface-hover transition-colors',
+        'inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-blue-700 transition-colors hover:bg-blue-100 hover:text-blue-950/25 disabled:cursor-wait disabled:opacity-70 dark:text-blue-200 dark:hover:bg-blue-900/60',
+        'rounded-sm p-1 text-muted opacity-0 transition-opacity hover:bg-blue-100 hover:text-blue-600 focus:opacity-100 group-hover:opacity-100 group-focus-within:opacity-100 dark:hover:bg-blue-900/25 dark:hover:text-blue-300',
+        'order-2 flex h-9 w-9 shrink-0 items-center justify-center rounded-md hover:text-base-content hover:bg-surface-hover transition-colors sm:order-0',
+        'flex h-7 w-7 items-center justify-center rounded-md border border-amber-200 bg-surface text-amber-700 transition-colors hover:bg-amber-100 hover:text-amber-900/25 dark:border-amber-800 dark:bg-amber-950/60 dark:text-amber-200 dark:hover:bg-amber-900/25',
+        'flex h-7 w-7 items-center justify-center rounded-md text-amber-700 transition-colors hover:bg-amber-100 hover:text-amber-900/25 dark:text-amber-200 dark:hover:bg-amber-900/25',
+        'inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-blue-700 transition-colors hover:bg-blue-100 hover:text-blue-950/25 dark:text-blue-200 dark:hover:bg-blue-900/60',
+        'flex h-9 w-9 items-center justify-center rounded-md bg-blue-600 text-white shadow-xs transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-45',
+        'flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-border bg-surface text-muted transition-colors hover:border-border hover:bg-surface-hover hover:text-base-content focus:outline-hidden focus:ring-2 focus:ring-blue-500/30',
         'disabled:opacity-45',
       ]) {
         expect(aiChatSource).not.toContain(retiredActionIconShell);
@@ -2040,12 +2040,12 @@ describe('AIChat', () => {
       const panel = screen.getByText('Pulse Assistant').closest('[data-layout-mode]');
       expect(panel).toHaveAttribute('data-layout-mode', 'overlay');
       expect(panel).toHaveClass('top-0');
-      expect(panel).toHaveClass('bottom-[var(--pulse-mobile-nav-height)]');
+      expect(panel).toHaveClass('bottom-(--pulse-mobile-nav-height)');
       expect(panel).toHaveClass('h-auto');
       expect(panel).not.toHaveClass('inset-y-0');
       expect(panel).not.toHaveClass('h-full');
       const backdrop = screen.getByRole('button', { name: 'Close Pulse Assistant backdrop' });
-      expect(backdrop).toHaveClass('bottom-[var(--pulse-mobile-nav-height)]');
+      expect(backdrop).toHaveClass('bottom-(--pulse-mobile-nav-height)');
       expect(backdrop).not.toHaveClass('inset-0');
       expect(screen.queryByTitle('Collapse Pulse Assistant')).not.toBeInTheDocument();
       expect(screen.getByLabelText('Close Pulse Assistant')).toBeInTheDocument();
diff --git a/frontend-modern/src/components/AI/Chat/__tests__/MessageItem.test.tsx b/frontend-modern/src/components/AI/Chat/__tests__/MessageItem.test.tsx
index 0794566b44..f414d99558 100644
--- a/frontend-modern/src/components/AI/Chat/__tests__/MessageItem.test.tsx
+++ b/frontend-modern/src/components/AI/Chat/__tests__/MessageItem.test.tsx
@@ -134,10 +134,10 @@ describe('MessageItem', () => {
     expect(messageItemSource).not.toContain('lucide-solid/icons/copy');
     expect(messageItemSource).not.toContain("lucide-solid/icons/check';");
     expect(messageItemSource).not.toContain(
-      'mt-1 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-border-subtle bg-surface text-muted opacity-0 shadow-sm transition-opacity hover:text-base-content',
+      'mt-1 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-border-subtle bg-surface text-muted opacity-0 shadow-xs transition-opacity hover:text-base-content',
     );
     expect(messageItemSource).not.toContain(
-      'inline-flex h-5 w-5 items-center justify-center rounded text-blue-700 transition-colors hover:bg-blue-100 hover:text-blue-950 focus:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500/30',
+      'inline-flex h-5 w-5 items-center justify-center rounded-sm text-blue-700 transition-colors hover:bg-blue-100 hover:text-blue-950/25 focus:bg-blue-100 focus:outline-hidden focus:ring-2 focus:ring-blue-500/30',
     );
   });
 
diff --git a/frontend-modern/src/components/AI/Chat/__tests__/ToolExecutionBlock.test.tsx b/frontend-modern/src/components/AI/Chat/__tests__/ToolExecutionBlock.test.tsx
index e92fe3c59f..ffada68074 100644
--- a/frontend-modern/src/components/AI/Chat/__tests__/ToolExecutionBlock.test.tsx
+++ b/frontend-modern/src/components/AI/Chat/__tests__/ToolExecutionBlock.test.tsx
@@ -93,7 +93,7 @@ describe('ToolExecutionBlock', () => {
     expect(toolExecutionBlockSource).not.toContain('lucide-solid/icons/copy');
     expect(toolExecutionBlockSource).not.toContain("lucide-solid/icons/check';");
     expect(toolExecutionBlockSource).not.toContain(
-      'inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border border-border-subtle bg-surface text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus:outline-none focus:ring-2 focus:ring-blue-500/30',
+      'inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-sm border border-border-subtle bg-surface text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus:outline-hidden focus:ring-2 focus:ring-blue-500/30',
     );
   });
 
@@ -432,7 +432,7 @@ describe('ToolExecutionBlock', () => {
       .closest('[data-testid="tool-input-summary"]');
     expect(summary).toBeInTheDocument();
     expect(summary?.className).toContain('whitespace-pre-wrap');
-    expect(summary?.className).toContain('break-words');
+    expect(summary?.className).toContain('wrap-break-word');
     expect(summary?.className).not.toContain('truncate');
   });
 
@@ -755,7 +755,7 @@ describe('ToolExecutionBlock', () => {
     expect(detailBlocks.length).toBeGreaterThanOrEqual(2);
     for (const block of detailBlocks) {
       expect(block.className).toContain('whitespace-pre-wrap');
-      expect(block.className).toContain('break-words');
+      expect(block.className).toContain('wrap-break-word');
       expect(block.className).not.toContain('break-all');
     }
   });
@@ -1022,7 +1022,7 @@ describe('PendingToolBlock', () => {
       .closest('[data-testid="tool-input-summary"]');
     expect(summary).toBeInTheDocument();
     expect(summary?.className).toContain('whitespace-pre-wrap');
-    expect(summary?.className).toContain('break-words');
+    expect(summary?.className).toContain('wrap-break-word');
     expect(summary?.className).not.toContain('truncate');
   });
 
@@ -1142,7 +1142,7 @@ describe('PendingToolBlock', () => {
     expect(progress).toBeInTheDocument();
     expect(progress).toHaveAttribute('title', 'Running command.');
     expect(progress.className).not.toContain('hidden');
-    expect(progress.className).toContain('break-words');
+    expect(progress.className).toContain('wrap-break-word');
     expect(progress.className).not.toContain('truncate');
   });
 
diff --git a/frontend-modern/src/components/AI/Chat/index.tsx b/frontend-modern/src/components/AI/Chat/index.tsx
index 9be55a5295..18e44ec7cc 100644
--- a/frontend-modern/src/components/AI/Chat/index.tsx
+++ b/frontend-modern/src/components/AI/Chat/index.tsx
@@ -2275,14 +2275,14 @@ export const AIChat: Component<AIChatProps> = (props) => {
   onCleanup(stopPanelResize);
   const rootClassName = createMemo(() => {
     if (isOverlayLayout()) {
-      return `fixed top-0 right-0 bottom-[var(--pulse-mobile-nav-height)] z-50 flex h-auto w-full flex-col bg-surface transition-transform duration-300 sm:w-[560px] sm:max-w-[calc(100vw-1rem)] ${
+      return `fixed top-0 right-0 bottom-(--pulse-mobile-nav-height) z-50 flex h-auto w-full flex-col bg-surface transition-transform duration-300 sm:w-[560px] sm:max-w-[calc(100vw-1rem)] ${
         isOpen()
           ? 'translate-x-0 overflow-visible border-l border-border shadow-2xl'
           : 'translate-x-full overflow-hidden border-l-0'
       }`;
     }
 
-    return `relative flex h-full flex-shrink-0 flex-col bg-surface transition-all duration-300 ${
+    return `relative flex h-full shrink-0 flex-col bg-surface transition-all duration-300 ${
       isOpen()
         ? 'w-full overflow-visible border-l border-border sm:w-[560px]'
         : 'w-0 overflow-hidden border-l-0'
@@ -2758,7 +2758,7 @@ export const AIChat: Component<AIChatProps> = (props) => {
   const currentStatusKind = createMemo(() => currentStatus()?.type);
   const currentStatusRowClass = createMemo(() => {
     if (currentStatusKind() === 'retrying') {
-      return 'bg-amber-50/80 text-amber-900 dark:bg-amber-950/25 dark:text-amber-100';
+      return 'bg-amber-50/80 text-amber-900/25 dark:bg-amber-950/25 dark:text-amber-100';
     }
     return '';
   });
@@ -4274,7 +4274,7 @@ export const AIChat: Component<AIChatProps> = (props) => {
       <Show when={isOpen() && isOverlayLayout()}>
         <button
           type="button"
-          class="fixed inset-x-0 top-0 bottom-[var(--pulse-mobile-nav-height)] z-40 bg-slate-950/45 backdrop-blur-[1px]"
+          class="fixed inset-x-0 top-0 bottom-(--pulse-mobile-nav-height) z-40 bg-slate-950/45 backdrop-blur-[1px]"
           onClick={props.onClose}
           aria-label="Close Pulse Assistant backdrop"
         />
@@ -4287,7 +4287,7 @@ export const AIChat: Component<AIChatProps> = (props) => {
         <Show when={isOpen()}>
           {/* Drag handle to resize the panel (desktop widths only) */}
           <div
-            class="absolute inset-y-0 left-0 z-50 hidden w-1.5 cursor-col-resize touch-none hover:bg-blue-400/40 focus:bg-blue-400/60 focus:outline-none sm:block"
+            class="absolute inset-y-0 left-0 z-50 hidden w-1.5 cursor-col-resize touch-none hover:bg-blue-400/40 focus:bg-blue-400/60 focus:outline-hidden sm:block"
             role="separator"
             aria-orientation="vertical"
             aria-label="Resize Assistant panel"
@@ -4308,7 +4308,7 @@ export const AIChat: Component<AIChatProps> = (props) => {
               aria-label={AI_CHAT_COLLAPSE_TITLE}
             >
               <svg
-                class="h-5 w-5 flex-shrink-0"
+                class="h-5 w-5 shrink-0"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -4336,14 +4336,14 @@ export const AIChat: Component<AIChatProps> = (props) => {
             </h2>
 
             <div
-              class="order-3 flex w-full min-w-0 flex-wrap items-center gap-1.5 sm:order-none sm:w-auto sm:flex-none"
+              class="order-3 flex w-full min-w-0 flex-wrap items-center gap-1.5 sm:order-0 sm:w-auto sm:flex-none"
               data-testid="assistant-header-actions"
             >
               {/* New chat */}
               <button
                 type="button"
                 onClick={handleNewConversation}
-                class="flex flex-shrink-0 items-center gap-1.5 px-2.5 py-1.5 text-[11px] text-muted hover:text-base-content rounded-md border border-border hover:border-border bg-surface transition-colors"
+                class="flex shrink-0 items-center gap-1.5 px-2.5 py-1.5 text-[11px] text-muted hover:text-base-content rounded-md border border-border hover:border-border bg-surface transition-colors"
                 title={AI_CHAT_NEW_SESSION_BUTTON_TITLE}
                 aria-label={AI_CHAT_NEW_SESSION_BUTTON_TITLE}
               >
@@ -4507,7 +4507,7 @@ export const AIChat: Component<AIChatProps> = (props) => {
 
                 <Show when={showSessions()}>
                   <div
-                    class="fixed w-[min(20rem,calc(100vw-1rem))] bg-surface rounded-md shadow-sm border border-border z-[9999] overflow-hidden"
+                    class="fixed w-[min(20rem,calc(100vw-1rem))] bg-surface rounded-md shadow-xs border border-border z-9999 overflow-hidden"
                     role="dialog"
                     aria-label={AI_CHAT_SESSION_MENU_TITLE}
                     style={{
@@ -4519,7 +4519,7 @@ export const AIChat: Component<AIChatProps> = (props) => {
                     <button
                       type="button"
                       onClick={handleNewConversation}
-                      class="w-full px-3 py-2.5 text-left text-sm flex items-center gap-2 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900 border-b border-border"
+                      class="w-full px-3 py-2.5 text-left text-sm flex items-center gap-2 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/25 border-b border-border"
                       aria-label={AI_CHAT_NEW_SESSION_MENU_ARIA_LABEL}
                     >
                       <PlusIcon class="h-4 w-4" aria-hidden="true" />
@@ -4567,7 +4567,7 @@ export const AIChat: Component<AIChatProps> = (props) => {
                         <For each={sessionPickerSections()}>
                           {(section) => (
                             <>
-                              <div class="sticky top-0 z-10 border-b border-border/60 bg-surface-alt px-3 py-1.5 text-[11px] font-semibold text-muted">
+                              <div class="sticky top-0 z-10 border-b bg-surface-alt px-3 py-1.5 text-[11px] font-semibold text-muted">
                                 {section.title}
                               </div>
                               <For each={section.sessions}>
@@ -4575,7 +4575,7 @@ export const AIChat: Component<AIChatProps> = (props) => {
                                   <div
                                     class={`group relative flex items-start gap-2 px-3 py-2.5 hover:bg-surface-hover focus-within:bg-surface-hover ${
                                       isSessionCurrent(session.id)
-                                        ? 'bg-blue-50 dark:bg-blue-900'
+                                        ? 'bg-blue-50 dark:bg-blue-900/25'
                                         : ''
                                     }`}
                                   >
@@ -4590,7 +4590,7 @@ export const AIChat: Component<AIChatProps> = (props) => {
                                           role="option"
                                           aria-selected={isSessionCurrent(session.id)}
                                           aria-label={getSessionPickerOptionLabel(session)}
-                                          class="min-w-0 flex-1 text-left focus:outline-none"
+                                          class="min-w-0 flex-1 text-left focus:outline-hidden"
                                           onClick={() => handleLoadSession(session.id)}
                                           onKeyDown={(event) =>
                                             handleSessionOptionKeyDown(event, session.id)
@@ -4601,7 +4601,7 @@ export const AIChat: Component<AIChatProps> = (props) => {
                                               {session.title || 'Untitled'}
                                             </div>
                                             <Show when={isSessionWorking(session.id)}>
-                                              <span class="inline-flex shrink-0 items-center gap-1 rounded border border-blue-200 bg-blue-100 px-1.5 py-0.5 text-[10px] font-semibold text-blue-700 dark:border-blue-800 dark:bg-blue-950/60 dark:text-blue-200">
+                                              <span class="inline-flex shrink-0 items-center gap-1 rounded-sm border border-blue-200 bg-blue-100 px-1.5 py-0.5 text-[10px] font-semibold text-blue-700 dark:border-blue-800 dark:bg-blue-950/60 dark:text-blue-200">
                                                 <LoaderCircleIcon class="h-3 w-3 animate-spin" />
                                                 Working
                                               </span>
@@ -4612,7 +4612,7 @@ export const AIChat: Component<AIChatProps> = (props) => {
                                                 !isSessionWorking(session.id)
                                               }
                                             >
-                                              <span class="shrink-0 rounded border border-blue-200 bg-blue-100 px-1.5 py-0.5 text-[10px] font-semibold uppercase text-blue-700 dark:border-blue-800 dark:bg-blue-950/60 dark:text-blue-200">
+                                              <span class="shrink-0 rounded-sm border border-blue-200 bg-blue-100 px-1.5 py-0.5 text-[10px] font-semibold uppercase text-blue-700 dark:border-blue-800 dark:bg-blue-950/60 dark:text-blue-200">
                                                 Current
                                               </span>
                                             </Show>
@@ -4635,15 +4635,15 @@ export const AIChat: Component<AIChatProps> = (props) => {
                                           <Show when={session.handoff_summary}>
                                             {(summary) => (
                                               <div class="mt-1 flex max-w-full flex-wrap gap-1.5">
-                                                <span class="rounded border border-blue-200 bg-blue-50 px-1.5 py-0.5 text-[10px] font-medium text-blue-700 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-200">
+                                                <span class="rounded-sm border border-blue-200 bg-blue-50 px-1.5 py-0.5 text-[10px] font-medium text-blue-700 dark:border-blue-800 dark:bg-blue-950/25 dark:text-blue-200">
                                                   {getSessionHandoffSourceLabel(summary())}
                                                 </span>
-                                                <span class="rounded border border-border bg-surface-alt px-1.5 py-0.5 text-[10px] text-muted">
+                                                <span class="rounded-sm border border-border bg-surface-alt px-1.5 py-0.5 text-[10px] text-muted">
                                                   {getSessionHandoffBadgeLabel(summary())}
                                                 </span>
                                                 <Show when={formatSessionHandoffStatus(summary())}>
                                                   {(status) => (
-                                                    <span class="max-w-full truncate rounded border border-border bg-surface-alt px-1.5 py-0.5 text-[10px] text-muted">
+                                                    <span class="max-w-full truncate rounded-sm border border-border bg-surface-alt px-1.5 py-0.5 text-[10px] text-muted">
                                                       {status()}
                                                     </span>
                                                   )}
@@ -4672,7 +4672,7 @@ export const AIChat: Component<AIChatProps> = (props) => {
                                             maxLength={AI_CHAT_SESSION_TITLE_MAX_LENGTH}
                                             disabled={sessionRenameSaving()}
                                             aria-label={`New title for ${session.title || 'Untitled'}`}
-                                            class="min-w-0 flex-1 rounded border border-blue-300 bg-surface px-2 py-1 text-sm font-medium text-base-content outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 disabled:opacity-70 dark:border-blue-800"
+                                            class="min-w-0 flex-1 rounded-sm border border-blue-300 bg-surface px-2 py-1 text-sm font-medium text-base-content outline-hidden focus:border-blue-500 focus:ring-1 focus:ring-blue-500 disabled:opacity-70 dark:border-blue-800"
                                           />
                                           <ActionIconButton
                                             type="submit"
@@ -4775,7 +4775,7 @@ export const AIChat: Component<AIChatProps> = (props) => {
               }}
               tone="neutral"
               size="lg"
-              class="order-2 sm:order-none"
+              class="order-2 sm:order-0"
               title={AI_CHAT_CLOSE_LABEL}
               label={AI_CHAT_CLOSE_LABEL}
               data-testid="assistant-close-button"
@@ -4787,7 +4787,7 @@ export const AIChat: Component<AIChatProps> = (props) => {
           <Show when={transcriptCopyFallback()}>
             {(fallback) => (
               <section
-                class="border-b border-amber-200 bg-amber-50 px-4 py-3 text-amber-950 dark:border-amber-900 dark:bg-amber-950/30 dark:text-amber-100"
+                class="border-b border-amber-200 bg-amber-50 px-4 py-3 text-amber-950/25 dark:border-amber-900/25 dark:bg-amber-950/30 dark:text-amber-100"
                 aria-label={AI_CHAT_TRANSCRIPT_FALLBACK_TITLE}
               >
                 <div class="mb-2 flex items-center justify-between gap-2">
@@ -4815,7 +4815,7 @@ export const AIChat: Component<AIChatProps> = (props) => {
                 </div>
                 <textarea
                   ref={transcriptFallbackTextareaRef}
-                  class="h-36 w-full resize-y rounded-md border border-amber-200 bg-surface px-2 py-2 font-mono text-[11px] leading-relaxed text-base-content outline-none focus:border-amber-400 dark:border-amber-800 dark:bg-surface"
+                  class="h-36 w-full resize-y rounded-md border border-amber-200 bg-surface px-2 py-2 font-mono text-[11px] leading-relaxed text-base-content outline-hidden focus:border-amber-400 dark:border-amber-800 dark:bg-surface"
                   readonly
                   value={fallback().transcript}
                   aria-label={AI_CHAT_TRANSCRIPT_FALLBACK_TEXTAREA_LABEL}
@@ -4829,17 +4829,17 @@ export const AIChat: Component<AIChatProps> = (props) => {
               <section
                 class={`border-b px-4 py-2.5 text-[11px] ${
                   presentation().tone === 'checking'
-                    ? 'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-200'
+                    ? 'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-950/25 dark:text-blue-200'
                     : presentation().tone === 'ready'
-                      ? 'border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-100'
-                      : 'border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-100'
+                      ? 'border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-800 dark:bg-emerald-950/25 dark:text-emerald-100'
+                      : 'border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-950/25 dark:text-amber-100'
                 }`}
                 aria-label="Assistant selected model route status"
               >
                 <div class="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
                   <div class="flex min-w-0 items-start gap-2.5">
                     <span
-                      class={`mt-1 h-2 w-2 flex-shrink-0 rounded-full ${
+                      class={`mt-1 h-2 w-2 shrink-0 rounded-full ${
                         presentation().tone === 'checking'
                           ? 'bg-blue-500 dark:bg-blue-300'
                           : presentation().tone === 'ready'
@@ -4879,7 +4879,7 @@ export const AIChat: Component<AIChatProps> = (props) => {
                           <button
                             type="button"
                             onClick={switchToProviderReadinessAlternative}
-                            class="inline-flex max-w-[11rem] items-center gap-1.5 rounded-md border border-current/20 bg-surface px-2 py-1 text-[10px] font-medium text-base-content hover:bg-surface-hover"
+                            class="inline-flex max-w-44 items-center gap-1.5 rounded-md border bg-surface px-2 py-1 text-[10px] font-medium text-base-content hover:bg-surface-hover"
                             aria-label={providerReadinessAlternativeButtonLabel()}
                             title={alternative().label}
                           >
@@ -4893,7 +4893,7 @@ export const AIChat: Component<AIChatProps> = (props) => {
                         type="button"
                         onClick={retrySelectedProviderReadiness}
                         disabled={providerReadiness().status === 'checking'}
-                        class="inline-flex items-center gap-1.5 rounded-md border border-current/20 bg-surface px-2 py-1 text-[10px] font-medium text-base-content hover:bg-surface-hover disabled:cursor-not-allowed disabled:opacity-60"
+                        class="inline-flex items-center gap-1.5 rounded-md border bg-surface px-2 py-1 text-[10px] font-medium text-base-content hover:bg-surface-hover disabled:cursor-not-allowed disabled:opacity-60"
                         aria-label="Retry route check"
                       >
                         <RefreshCwIcon class="h-3.5 w-3.5" />
@@ -4901,7 +4901,7 @@ export const AIChat: Component<AIChatProps> = (props) => {
                       </button>
                       <a
                         href={AI_CHAT_PROVIDER_READINESS_SETTINGS_HREF}
-                        class="inline-flex items-center gap-1.5 rounded-md border border-current/20 bg-surface px-2 py-1 text-[10px] font-medium text-base-content hover:bg-surface-hover"
+                        class="inline-flex items-center gap-1.5 rounded-md border bg-surface px-2 py-1 text-[10px] font-medium text-base-content hover:bg-surface-hover"
                       >
                         <SettingsIcon class="h-3.5 w-3.5" />
                         <span>{AI_CHAT_PROVIDER_READINESS_SETTINGS_LABEL}</span>
@@ -4910,7 +4910,7 @@ export const AIChat: Component<AIChatProps> = (props) => {
                         <button
                           type="button"
                           onClick={() => setProviderReadinessVisible(false)}
-                          class="inline-flex items-center gap-1.5 rounded-md border border-current/20 bg-surface px-2 py-1 text-[10px] font-medium text-base-content hover:bg-surface-hover"
+                          class="inline-flex items-center gap-1.5 rounded-md border bg-surface px-2 py-1 text-[10px] font-medium text-base-content hover:bg-surface-hover"
                           aria-label="Hide route status"
                         >
                           <XIcon class="h-3.5 w-3.5" />
@@ -4926,10 +4926,10 @@ export const AIChat: Component<AIChatProps> = (props) => {
 
           {/* Discovery hint - show when discovery is disabled */}
           <Show when={discoveryEnabled() === false && !discoveryHintDismissed()}>
-            <div class="px-4 py-2 border-b border-cyan-200 dark:border-cyan-800 bg-cyan-50 dark:bg-cyan-900 flex items-center justify-between gap-3 text-[11px] text-cyan-700 dark:text-cyan-200">
+            <div class="px-4 py-2 border-b border-cyan-200 dark:border-cyan-800 bg-cyan-50 dark:bg-cyan-900/25 flex items-center justify-between gap-3 text-[11px] text-cyan-700 dark:text-cyan-200">
               <div class="flex items-center gap-2">
                 <svg
-                  class="w-4 h-4 text-cyan-500 dark:text-cyan-400 flex-shrink-0"
+                  class="w-4 h-4 text-cyan-500 dark:text-cyan-400 shrink-0"
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
@@ -4984,7 +4984,7 @@ export const AIChat: Component<AIChatProps> = (props) => {
               <Show when={contextBriefing()!.actionHref && contextBriefing()!.actionLabel}>
                 <a
                   href={contextBriefing()!.actionHref}
-                  class="mt-2 inline-flex rounded border border-border bg-surface px-2 py-1 text-[11px] font-medium text-base-content hover:bg-surface-alt"
+                  class="mt-2 inline-flex rounded-sm border border-border bg-surface px-2 py-1 text-[11px] font-medium text-base-content hover:bg-surface-alt"
                 >
                   {contextBriefing()!.actionLabel}
                 </a>
@@ -5038,7 +5038,7 @@ export const AIChat: Component<AIChatProps> = (props) => {
               }
             >
               <div
-                class="mb-2 overflow-hidden rounded-md border border-border bg-surface-alt text-base-content shadow-sm"
+                class="mb-2 overflow-hidden rounded-md border border-border bg-surface-alt text-base-content shadow-xs"
                 data-testid="assistant-activity-dock"
               >
                 <Show when={currentStatus()}>
@@ -5114,7 +5114,7 @@ export const AIChat: Component<AIChatProps> = (props) => {
                 <Show when={autonomousWarningVisible()}>
                   <div
                     class={`flex min-h-8 min-w-0 items-center gap-2 px-2.5 py-1.5 text-xs text-red-700 dark:text-red-200 ${
-                      currentStatus() ? 'border-t border-border/70' : ''
+                      currentStatus() ? 'border-t ' : ''
                     }`}
                     role="status"
                     aria-label="Assistant chat actions warning"
@@ -5130,7 +5130,7 @@ export const AIChat: Component<AIChatProps> = (props) => {
                     <button
                       type="button"
                       onClick={() => updateControlLevel('controlled')}
-                      class="inline-flex shrink-0 items-center rounded-md border border-red-200 bg-surface px-2 py-1 text-[10px] font-medium text-red-700 transition-colors hover:bg-red-50 hover:text-red-900 dark:border-red-800 dark:bg-surface dark:text-red-200 dark:hover:bg-red-950/40"
+                      class="inline-flex shrink-0 items-center rounded-md border border-red-200 bg-surface px-2 py-1 text-[10px] font-medium text-red-700 transition-colors hover:bg-red-50 hover:text-red-900/25 dark:border-red-800 dark:bg-surface dark:text-red-200 dark:hover:bg-red-950/40"
                       aria-label={AI_CHAT_SWITCH_TO_APPROVAL_LABEL}
                     >
                       Switch to Ask first
@@ -5149,9 +5149,7 @@ export const AIChat: Component<AIChatProps> = (props) => {
                 <Show when={activityDockQueuedFollowUpCount() > 0}>
                   <div
                     class={`px-2.5 py-1.5 ${
-                      currentStatus() || autonomousWarningVisible()
-                        ? 'border-t border-border/70'
-                        : ''
+                      currentStatus() || autonomousWarningVisible() ? 'border-t ' : ''
                     }`}
                     role="status"
                     aria-label="Queued follow-up messages"
@@ -5194,7 +5192,7 @@ export const AIChat: Component<AIChatProps> = (props) => {
                           };
                           return (
                             <div
-                              class="flex min-h-7 items-center gap-2 rounded-md bg-white/70 px-2 py-1 text-xs text-blue-900 outline-none transition-colors focus:bg-white focus:ring-2 focus:ring-blue-500/40 dark:bg-blue-900/30 dark:text-blue-100 dark:focus:bg-blue-900/50"
+                              class="flex min-h-7 items-center gap-2 rounded-md bg-white/70 px-2 py-1 text-xs text-blue-900/25 outline-hidden transition-colors focus:bg-white focus:ring-2 focus:ring-blue-500/40 dark:bg-blue-900/30 dark:text-blue-100 dark:focus:bg-blue-900/50"
                               classList={{
                                 'bg-blue-50 ring-2 ring-blue-500/60 dark:bg-blue-800/50':
                                   queuedFollowUpCommandTargetId() === queued.id,
@@ -5372,7 +5370,7 @@ export const AIChat: Component<AIChatProps> = (props) => {
               class="relative"
             >
               <div
-                class={`relative flex min-h-[56px] items-end rounded-lg border bg-surface-alt shadow-sm transition-colors ${
+                class={`relative flex min-h-[56px] items-end rounded-lg border bg-surface-alt shadow-xs transition-colors ${
                   mentionActive() || slashCommandActive()
                     ? 'border-blue-400 ring-2 ring-blue-500/20'
                     : 'border-border focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500/20'
@@ -5402,7 +5400,7 @@ export const AIChat: Component<AIChatProps> = (props) => {
                         : undefined
                   }
                   rows={1}
-                  class="max-h-40 min-h-[54px] flex-1 resize-none bg-transparent px-3.5 py-3.5 pr-14 text-sm leading-5 text-base-content placeholder-slate-400 focus:outline-none"
+                  class="max-h-40 min-h-[54px] flex-1 resize-none bg-transparent px-3.5 py-3.5 pr-14 text-sm leading-5 text-base-content placeholder-slate-400 focus:outline-hidden"
                 />
                 <div data-mention-autocomplete>
                   <MentionAutocomplete
@@ -5469,7 +5467,7 @@ export const AIChat: Component<AIChatProps> = (props) => {
                       aria-label="Assistant selected model route health"
                       aria-live="polite"
                       title={health().title}
-                      class={`inline-flex h-7 max-w-[11rem] shrink-0 items-center gap-1.5 rounded-md border px-2 text-[10px] font-medium ${health().className}`}
+                      class={`inline-flex h-7 max-w-44 shrink-0 items-center gap-1.5 rounded-md border px-2 text-[10px] font-medium ${health().className}`}
                       data-testid="assistant-provider-route-health"
                     >
                       <span
@@ -5487,7 +5485,7 @@ export const AIChat: Component<AIChatProps> = (props) => {
                       aria-label="Assistant capability availability"
                       aria-live="polite"
                       title={health().title}
-                      class={`inline-flex h-7 max-w-[9rem] shrink-0 items-center gap-1.5 rounded-md border px-2 text-[10px] font-medium ${health().className}`}
+                      class={`inline-flex h-7 max-w-36 shrink-0 items-center gap-1.5 rounded-md border px-2 text-[10px] font-medium ${health().className}`}
                       data-testid="assistant-surface-tools-health"
                     >
                       <WrenchIcon
@@ -5537,7 +5535,7 @@ export const AIChat: Component<AIChatProps> = (props) => {
                     ref={controlModeButtonRef}
                     onClick={toggleControlMenu}
                     onKeyDown={handleControlModeTriggerKeyDown}
-                    class={`flex flex-shrink-0 items-center gap-1.5 px-2.5 py-1.5 text-[11px] font-medium rounded-md border transition-colors ${controlPresentation().pillClassName} ${controlSaving() ? 'opacity-70 cursor-wait' : 'hover:opacity-90'}`}
+                    class={`flex shrink-0 items-center gap-1.5 px-2.5 py-1.5 text-[11px] font-medium rounded-md border transition-colors ${controlPresentation().pillClassName} ${controlSaving() ? 'opacity-70 cursor-wait' : 'hover:opacity-90'}`}
                     title={AI_CHAT_CONTROL_MODE_LABEL}
                     aria-label={`${AI_CHAT_CONTROL_MODE_LABEL}: ${controlPresentation().label}`}
                     aria-haspopup="menu"
@@ -5560,7 +5558,7 @@ export const AIChat: Component<AIChatProps> = (props) => {
 
                   <Show when={showControlMenu()}>
                     <div
-                      class="absolute bottom-full left-0 z-50 mb-2 w-60 overflow-hidden rounded-md border border-border bg-surface shadow-sm"
+                      class="absolute bottom-full left-0 z-50 mb-2 w-60 overflow-hidden rounded-md border border-border bg-surface shadow-xs"
                       role="menu"
                       aria-label={AI_CHAT_CONTROL_MODE_MENU_LABEL}
                     >
@@ -5629,7 +5627,7 @@ export const AIChat: Component<AIChatProps> = (props) => {
               <Show when={lastAssistantTurnSummary()}>
                 {(summary) => (
                   <div
-                    class="flex h-5 min-w-0 items-center justify-end self-end text-[10px] font-medium text-muted sm:h-7 sm:max-w-[14rem] sm:shrink-0 sm:self-auto"
+                    class="flex h-5 min-w-0 items-center justify-end self-end text-[10px] font-medium text-muted sm:h-7 sm:max-w-56 sm:shrink-0 sm:self-auto"
                     aria-label={summary().title}
                     title={summary().title}
                   >
diff --git a/frontend-modern/src/components/AI/FindingsPanel.tsx b/frontend-modern/src/components/AI/FindingsPanel.tsx
index 693870b94d..c5aaaaeae8 100644
--- a/frontend-modern/src/components/AI/FindingsPanel.tsx
+++ b/frontend-modern/src/components/AI/FindingsPanel.tsx
@@ -1037,7 +1037,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
         class={`p-3 transition-colors ${
           isPatrolFindingsSource()
             ? `border-l-2 ${patrolSeverityAccentClass(finding.severity)} ${
-                expandedId() === finding.id ? 'bg-surface-alt/80' : 'hover:bg-surface-hover'
+                expandedId() === finding.id ? '' : 'hover:bg-surface-hover'
               }`
             : ''
         } ${
@@ -1065,7 +1065,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
                 toggleExpanded();
               }
             }}
-            class="min-w-0 flex-1 cursor-pointer rounded text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
+            class="min-w-0 flex-1 cursor-pointer rounded-sm text-left focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary/40"
           >
             <div class="flex items-center gap-2 flex-wrap">
               {/* Status badge for non-active findings */}
@@ -1318,7 +1318,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
                 <button
                   type="button"
                   onClick={toggleExpanded}
-                  class="rounded bg-amber-600 px-2 py-1 text-xs font-semibold text-white transition-colors hover:bg-amber-700"
+                  class="rounded-sm bg-amber-600 px-2 py-1 text-xs font-semibold text-white transition-colors hover:bg-amber-700"
                   title={action().detail}
                 >
                   {action().label}
@@ -1330,7 +1330,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
                 <a
                   href={action().href}
                   onClick={(e) => e.stopPropagation()}
-                  class="inline-flex items-center rounded bg-blue-600 px-2 py-1 text-xs font-semibold text-white transition-colors hover:bg-blue-700"
+                  class="inline-flex items-center rounded-sm bg-blue-600 px-2 py-1 text-xs font-semibold text-white transition-colors hover:bg-blue-700"
                 >
                   {action().label}
                 </a>
@@ -1406,7 +1406,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
                 aria-expanded={manageOpenId() === finding.id}
                 aria-controls={`finding-${finding.id}-manage`}
                 onClick={toggleFindingOptions}
-                class="inline-flex min-h-11 items-center rounded border border-border bg-surface px-2 py-1 text-xs font-medium text-base-content transition-colors hover:bg-surface-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 sm:min-h-0"
+                class="inline-flex min-h-11 items-center rounded-sm border border-border bg-surface px-2 py-1 text-xs font-medium text-base-content transition-colors hover:bg-surface-hover focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary/40 sm:min-h-0"
                 title="Resolve, dismiss, remember as expected, or create a rule"
               >
                 Finding options
@@ -1422,7 +1422,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
               aria-expanded={expandedId() === finding.id}
               aria-controls={`finding-${finding.id}-details`}
               onClick={toggleExpanded}
-              class="inline-flex min-h-11 items-center gap-1 rounded border border-border bg-surface px-2 py-1 text-xs font-medium text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 sm:min-h-0"
+              class="inline-flex min-h-11 items-center gap-1 rounded-sm border border-border bg-surface px-2 py-1 text-xs font-medium text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary/40 sm:min-h-0"
               title={
                 isPatrolFindingsSource()
                   ? expandedId() === finding.id
@@ -1536,7 +1536,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
           </p>
         </Show>
         <Show when={finding.previousResolvedFixSummary}>
-          <p class="text-sm text-base-content mt-2 px-2 py-1 rounded border border-emerald-200 bg-emerald-50/40 dark:border-emerald-800 dark:bg-emerald-950/30">
+          <p class="text-sm text-base-content mt-2 px-2 py-1 rounded-sm border border-emerald-200 bg-emerald-50/40 dark:border-emerald-800 dark:bg-emerald-950/30">
             <span class="font-medium text-emerald-800 dark:text-emerald-300">
               Last time this resolved:
             </span>{' '}
@@ -1554,7 +1554,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
         </Show>
 
         <Show when={relatedFindings.length > 0}>
-          <div class="mt-3 rounded border border-border bg-surface-alt p-2">
+          <div class="mt-3 rounded-sm border border-border bg-surface-alt p-2">
             <div class="text-xs font-medium text-base-content">Related issues</div>
             <div class="mt-2 space-y-1">
               <For each={relatedFindings}>
@@ -1584,7 +1584,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
         </Show>
 
         <Show when={shouldShowFindingLifecycle(finding)}>
-          <div class="mt-3 p-2 rounded border border-border bg-surface-alt">
+          <div class="mt-3 p-2 rounded-sm border border-border bg-surface-alt">
             <div class="text-xs font-medium text-base-content mb-2">Lifecycle</div>
             <div class="space-y-1">
               <For each={[...(finding.lifecycle || [])].slice(-6).reverse()}>
@@ -1630,11 +1630,11 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
         {/* User note display / editor */}
         <Show when={editingNoteId() === finding.id}>
           <div
-            class="mt-3 p-2 rounded border border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900"
+            class="mt-3 p-2 rounded-sm border border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900/25"
             onClick={(e) => e.stopPropagation()}
           >
             <textarea
-              class="w-full text-sm rounded border border-border bg-surface text-base-content px-2 py-1.5 resize-none focus:outline-none focus:ring-1 focus:ring-blue-500"
+              class="w-full text-sm rounded-sm border border-border bg-surface text-base-content px-2 py-1.5 resize-none focus:outline-hidden focus:ring-1 focus:ring-blue-500"
               rows={3}
               value={noteText()}
               onInput={(e) => setNoteText(e.currentTarget.value)}
@@ -1644,7 +1644,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
               <button
                 type="button"
                 onClick={(e) => handleSaveNote(finding, e)}
-                class="px-3 py-1 text-xs font-medium rounded bg-blue-600 hover:bg-blue-700 text-white disabled:opacity-50"
+                class="px-3 py-1 text-xs font-medium rounded-sm bg-blue-600 hover:bg-blue-700 text-white disabled:opacity-50"
                 disabled={actionLoading() === finding.id}
               >
                 Save
@@ -1652,7 +1652,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
               <button
                 type="button"
                 onClick={handleCancelNote}
-                class="px-3 py-1 text-xs font-medium rounded border border-border hover:bg-surface-hover"
+                class="px-3 py-1 text-xs font-medium rounded-sm border border-border hover:bg-surface-hover"
               >
                 Cancel
               </button>
@@ -1660,9 +1660,9 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
           </div>
         </Show>
         <Show when={editingNoteId() !== finding.id && finding.userNote}>
-          <div class="mt-3 p-2 rounded border border-border bg-surface-alt flex items-start gap-2">
+          <div class="mt-3 p-2 rounded-sm border border-border bg-surface-alt flex items-start gap-2">
             <svg
-              class="w-4 h-4 text-muted mt-0.5 flex-shrink-0"
+              class="w-4 h-4 text-muted mt-0.5 shrink-0"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -1678,7 +1678,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
             <button
               type="button"
               onClick={(e) => handleStartEditNote(finding, e)}
-              class="p-1 hover:text-base-content flex-shrink-0"
+              class="p-1 hover:text-base-content shrink-0"
               title="Edit note"
             >
               <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -1702,7 +1702,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
               <a
                 href={action().href}
                 onClick={(e) => e.stopPropagation()}
-                class="inline-flex items-center gap-1 rounded bg-blue-600 px-3 py-1.5 font-semibold text-white transition-colors hover:bg-blue-700"
+                class="inline-flex items-center gap-1 rounded-sm bg-blue-600 px-3 py-1.5 font-semibold text-white transition-colors hover:bg-blue-700"
               >
                 {action().label}
               </a>
@@ -1715,7 +1715,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
                 e.stopPropagation();
                 void openFindingInAssistant(finding);
               }}
-              class="inline-flex items-center gap-1 rounded bg-blue-600 px-3 py-1.5 font-semibold text-white transition-colors hover:bg-blue-700"
+              class="inline-flex items-center gap-1 rounded-sm bg-blue-600 px-3 py-1.5 font-semibold text-white transition-colors hover:bg-blue-700"
               title={getPrimaryAssistantFindingAction(finding).title}
             >
               <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -1745,7 +1745,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
               type="button"
               onClick={(e) => handleInvestigate(finding, e)}
               disabled={actionLoading() === finding.id}
-              class="inline-flex items-center gap-1 rounded bg-blue-600 px-3 py-1.5 font-semibold text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
+              class="inline-flex items-center gap-1 rounded-sm bg-blue-600 px-3 py-1.5 font-semibold text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
               title="Have Patrol investigate this finding"
             >
               {actionLoading() === finding.id ? 'Investigating…' : 'Investigate'}
@@ -1773,7 +1773,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
                   props.onPatrolModeNudgeAction?.();
                 }}
                 disabled={props.patrolModeNudgeBusy}
-                class="inline-flex items-center gap-1 rounded bg-blue-600 px-3 py-1.5 font-semibold text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
+                class="inline-flex items-center gap-1 rounded-sm bg-blue-600 px-3 py-1.5 font-semibold text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
                 title="Switch Patrol to Ask first so it can investigate and prepare fixes for your approval"
               >
                 {props.patrolModeNudgeBusy ? 'Switching…' : modeNudge!.actionLabel}
@@ -1788,10 +1788,10 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
               onClick={(e) => e.stopPropagation()}
               onToggle={(event) => setManageOpenId(event.currentTarget.open ? finding.id : null)}
             >
-              <summary class="list-none cursor-pointer rounded border border-border bg-surface px-3 py-1.5 font-medium text-base-content hover:bg-surface-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/40">
+              <summary class="list-none cursor-pointer rounded-sm border border-border bg-surface px-3 py-1.5 font-medium text-base-content hover:bg-surface-hover focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary/40">
                 Resolve or dismiss
               </summary>
-              <div class="mt-1 flex min-w-48 flex-col gap-1 rounded border border-border bg-surface p-1 shadow-sm">
+              <div class="mt-1 flex min-w-48 flex-col gap-1 rounded-sm border border-border bg-surface p-1 shadow-xs">
                 <Show when={shouldShowAssistantManageAction}>
                   <button
                     type="button"
@@ -1799,7 +1799,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
                       e.stopPropagation();
                       void openFindingInAssistant(finding);
                     }}
-                    class="rounded px-2 py-1 text-left hover:bg-surface-hover"
+                    class="rounded-sm px-2 py-1 text-left hover:bg-surface-hover"
                     title={getPrimaryAssistantFindingAction(finding).title}
                   >
                     {getPrimaryAssistantFindingAction(finding).label}
@@ -1809,7 +1809,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
                   <button
                     type="button"
                     onClick={(e) => handleStartEditNote(finding, e)}
-                    class="rounded px-2 py-1 text-left hover:bg-surface-hover"
+                    class="rounded-sm px-2 py-1 text-left hover:bg-surface-hover"
                   >
                     Add Note
                   </button>
@@ -1817,7 +1817,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
                 <button
                   type="button"
                   onClick={(e) => handleCopyFindingSummary(finding, e)}
-                  class="rounded px-2 py-1 text-left hover:bg-surface-hover"
+                  class="rounded-sm px-2 py-1 text-left hover:bg-surface-hover"
                 >
                   Copy summary
                 </button>
@@ -1826,7 +1826,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
                     <button
                       type="button"
                       onClick={(e) => handleAcknowledge(finding, e)}
-                      class="rounded px-2 py-1 text-left hover:bg-surface-hover disabled:opacity-50"
+                      class="rounded-sm px-2 py-1 text-left hover:bg-surface-hover disabled:opacity-50"
                       disabled={actionLoading() === finding.id}
                     >
                       Acknowledge
@@ -1836,7 +1836,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
                     <button
                       type="button"
                       onClick={(e) => handleResolve(finding, e)}
-                      class="rounded px-2 py-1 text-left text-emerald-700 hover:bg-emerald-50 disabled:opacity-50 dark:text-emerald-300 dark:hover:bg-emerald-900"
+                      class="rounded-sm px-2 py-1 text-left text-emerald-700 hover:bg-emerald-50 disabled:opacity-50 dark:text-emerald-300 dark:hover:bg-emerald-900/25"
                       disabled={actionLoading() === finding.id}
                     >
                       Mark resolved
@@ -1846,7 +1846,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
                     <button
                       type="button"
                       onClick={(e) => handleSnooze(finding, 1, e)}
-                      class="rounded px-2 py-1 text-left hover:bg-surface-hover disabled:opacity-50"
+                      class="rounded-sm px-2 py-1 text-left hover:bg-surface-hover disabled:opacity-50"
                       disabled={actionLoading() === finding.id}
                     >
                       Snooze 1h
@@ -1854,7 +1854,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
                     <button
                       type="button"
                       onClick={(e) => handleSnooze(finding, 24, e)}
-                      class="rounded px-2 py-1 text-left hover:bg-surface-hover disabled:opacity-50"
+                      class="rounded-sm px-2 py-1 text-left hover:bg-surface-hover disabled:opacity-50"
                       disabled={actionLoading() === finding.id}
                     >
                       Snooze 24h
@@ -1862,7 +1862,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
                     <button
                       type="button"
                       onClick={(e) => handleSnooze(finding, 168, e)}
-                      class="rounded px-2 py-1 text-left hover:bg-surface-hover disabled:opacity-50"
+                      class="rounded-sm px-2 py-1 text-left hover:bg-surface-hover disabled:opacity-50"
                       disabled={actionLoading() === finding.id}
                     >
                       Snooze 7d
@@ -1872,7 +1872,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
                     <button
                       type="button"
                       onClick={(e) => handleStartDismiss(finding, 'not_an_issue', e)}
-                      class="rounded px-2 py-1 text-left text-red-600 hover:bg-red-50 disabled:opacity-50 dark:text-red-400 dark:hover:bg-red-900"
+                      class="rounded-sm px-2 py-1 text-left text-red-600 hover:bg-red-50 disabled:opacity-50 dark:text-red-400 dark:hover:bg-red-900/25"
                       disabled={actionLoading() === finding.id}
                     >
                       Dismiss: Not an issue
@@ -1880,7 +1880,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
                     <button
                       type="button"
                       onClick={(e) => handleStartDismiss(finding, 'expected_behavior', e)}
-                      class="rounded px-2 py-1 text-left hover:bg-surface-hover disabled:opacity-50"
+                      class="rounded-sm px-2 py-1 text-left hover:bg-surface-hover disabled:opacity-50"
                       disabled={actionLoading() === finding.id}
                     >
                       Remember as expected
@@ -1888,7 +1888,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
                     <button
                       type="button"
                       onClick={(e) => handleStartDismiss(finding, 'will_fix_later', e)}
-                      class="rounded px-2 py-1 text-left hover:bg-surface-hover disabled:opacity-50"
+                      class="rounded-sm px-2 py-1 text-left hover:bg-surface-hover disabled:opacity-50"
                       disabled={actionLoading() === finding.id}
                     >
                       Dismiss: Later
@@ -1896,7 +1896,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
                     <button
                       type="button"
                       onClick={(e) => handleStartCreateRule(finding, e)}
-                      class="rounded px-2 py-1 text-left hover:bg-surface-hover disabled:opacity-50"
+                      class="rounded-sm px-2 py-1 text-left hover:bg-surface-hover disabled:opacity-50"
                       disabled={
                         actionLoading() === finding.id ||
                         !getFindingSuppressionRuleScope(finding).canCreate
@@ -1915,7 +1915,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
                   <button
                     type="button"
                     onClick={(e) => handleReopen(finding, e)}
-                    class="rounded px-2 py-1 text-left text-blue-700 hover:bg-blue-50 disabled:opacity-50 dark:text-blue-300 dark:hover:bg-blue-900"
+                    class="rounded-sm px-2 py-1 text-left text-blue-700 hover:bg-blue-50 disabled:opacity-50 dark:text-blue-300 dark:hover:bg-blue-900/25"
                     disabled={actionLoading() === finding.id}
                   >
                     Reopen finding
@@ -1931,7 +1931,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
             visually but uses neutral surface styling — this isn't a
             dismissal, it's a permanent commitment. */}
         <Show when={creatingRuleForId() === finding.id}>
-          <div class="mt-2 p-2 rounded border border-border bg-surface-alt">
+          <div class="mt-2 p-2 rounded-sm border border-border bg-surface-alt">
             <div class="flex items-center gap-2 mb-1.5">
               <span class="text-xs font-medium text-base-content">
                 Create suppression rule for{' '}
@@ -1947,7 +1947,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
               suppressions management surface.
             </p>
             <textarea
-              class="w-full text-xs px-2 py-1.5 rounded border border-border bg-surface text-base-content resize-none focus:outline-none focus:ring-1 focus:ring-blue-400"
+              class="w-full text-xs px-2 py-1.5 rounded-sm border border-border bg-surface text-base-content resize-none focus:outline-hidden focus:ring-1 focus:ring-blue-400"
               rows={2}
               value={createRuleDescription()}
               onInput={(e) => setCreateRuleDescription(e.currentTarget.value)}
@@ -1958,7 +1958,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
               <button
                 type="button"
                 onClick={(e) => handleConfirmCreateRule(finding, e)}
-                class="px-3 py-1 text-xs font-medium rounded bg-blue-600 hover:bg-blue-700 text-white disabled:opacity-50"
+                class="px-3 py-1 text-xs font-medium rounded-sm bg-blue-600 hover:bg-blue-700 text-white disabled:opacity-50"
                 disabled={actionLoading() === finding.id || !createRuleDescription().trim()}
               >
                 Create rule
@@ -1966,7 +1966,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
               <button
                 type="button"
                 onClick={handleCancelCreateRule}
-                class="px-3 py-1 text-xs font-medium rounded border border-border hover:bg-surface-hover"
+                class="px-3 py-1 text-xs font-medium rounded-sm border border-border hover:bg-surface-hover"
               >
                 Cancel
               </button>
@@ -1978,7 +1978,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
             "Pulse should know this is expected"), "Dismiss as" for the
             other reasons (past-looking, "make this go away"). */}
         <Show when={dismissingId() === finding.id}>
-          <div class="mt-2 p-2 rounded border border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900">
+          <div class="mt-2 p-2 rounded-sm border border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/25">
             <div class="flex items-center gap-2 mb-1.5">
               <span class="text-xs font-medium text-red-700 dark:text-red-300">
                 {dismissReason() === 'expected_behavior'
@@ -2024,7 +2024,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
               </p>
             </Show>
             <textarea
-              class="w-full text-xs px-2 py-1.5 rounded border border-border bg-surface text-base-content resize-none focus:outline-none focus:ring-1 focus:ring-red-400"
+              class="w-full text-xs px-2 py-1.5 rounded-sm border border-border bg-surface text-base-content resize-none focus:outline-hidden focus:ring-1 focus:ring-red-400"
               rows={2}
               placeholder="Optional note (for learning context)..."
               value={dismissNote()}
@@ -2036,14 +2036,14 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
                 type="button"
                 onClick={(e) => handleConfirmDismiss(finding.id, e)}
                 disabled={actionLoading() === finding.id}
-                class="px-2.5 py-1 text-xs font-medium text-white bg-red-600 hover:bg-red-700 disabled:bg-red-400 rounded transition-colors"
+                class="px-2.5 py-1 text-xs font-medium text-white bg-red-600 hover:bg-red-700 disabled:bg-red-400 rounded-sm transition-colors"
               >
                 Confirm Dismiss
               </button>
               <button
                 type="button"
                 onClick={handleCancelDismiss}
-                class="px-2.5 py-1 text-xs font-medium text-muted hover:bg-surface-hover rounded transition-colors"
+                class="px-2.5 py-1 text-xs font-medium text-muted hover:bg-surface-hover rounded-sm transition-colors"
               >
                 Cancel
               </button>
@@ -2099,21 +2099,21 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
               <div class="mt-3 pt-3 border-t border-border-subtle">
                 <div class="flex flex-wrap items-center justify-between gap-3">
                   <div class="flex min-w-0 items-center gap-2">
-                    <AlertCircleIcon class="h-4 w-4 flex-shrink-0 text-muted" />
+                    <AlertCircleIcon class="h-4 w-4 shrink-0 text-muted" />
                     <span class="text-sm font-medium text-base-content">Assistant context</span>
                   </div>
                   <div class="flex items-center gap-2">
                     <button
                       type="button"
                       onClick={(e) => handleOpenPlanInAssistant(finding, plan(), e)}
-                      class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-xs font-medium rounded flex items-center justify-center gap-1.5"
+                      class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-xs font-medium rounded-sm flex items-center justify-center gap-1.5"
                     >
                       Ask Assistant
                     </button>
                     <button
                       type="button"
                       onClick={(e) => handleDismissPlan(plan(), e)}
-                      class="px-3 py-1.5 hover:bg-surface-hover text-muted text-xs font-medium rounded"
+                      class="px-3 py-1.5 hover:bg-surface-hover text-muted text-xs font-medium rounded-sm"
                     >
                       Dismiss
                     </button>
@@ -2145,7 +2145,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
               fieldBaseClass="contents"
               value={sortBy()}
               onChange={(e) => setSortBy(e.currentTarget.value as 'severity' | 'time')}
-              selectBaseClass="min-h-11 rounded border border-border bg-surface px-2 py-1 text-xs sm:min-h-0"
+              selectBaseClass="min-h-11 rounded-sm border border-border bg-surface px-2 py-1 text-xs sm:min-h-0"
             >
               <option value="severity">By Severity</option>
               <option value="time">By Time</option>
@@ -2243,7 +2243,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
                       class="divide-y divide-border-subtle"
                       aria-label={`${group.label}: ${getPatrolFindingIssueCountLabel(group.findings.length)}`}
                     >
-                      <div class="flex flex-wrap items-center justify-between gap-2 bg-surface-alt/60 px-3 py-2 text-xs">
+                      <div class="flex flex-wrap items-center justify-between gap-2 px-3 py-2 text-xs">
                         <span class="font-semibold text-base-content">{group.label}</span>
                         <span class="text-muted">
                           {getPatrolFindingIssueCountLabel(group.findings.length)}
@@ -2261,8 +2261,8 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
                 )}
               </For>
               <Show when={alertMirroredFindings().length > 0}>
-                <details class="bg-surface-alt/40">
-                  <summary class="flex min-h-11 cursor-pointer flex-wrap items-center justify-between gap-2 px-3 py-2 text-xs focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500">
+                <details class="">
+                  <summary class="flex min-h-11 cursor-pointer flex-wrap items-center justify-between gap-2 px-3 py-2 text-xs focus:outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500">
                     <span class="font-semibold text-base-content">
                       {alertMirroredFindings().length}{' '}
                       {alertMirroredFindings().length === 1 ? 'finding mirrors' : 'findings mirror'}{' '}
@@ -2293,9 +2293,9 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
                 <aside
                   id={`finding-${finding().id}-details`}
                   aria-label={`Review ${title().label}`}
-                  class="overflow-hidden rounded-md border border-border bg-surface shadow-sm xl:sticky xl:top-4"
+                  class="overflow-hidden rounded-md border border-border bg-surface shadow-xs xl:sticky xl:top-4"
                 >
-                  <div class="flex items-start justify-between gap-3 border-b border-border-subtle bg-surface-alt/60 px-4 py-3">
+                  <div class="flex items-start justify-between gap-3 border-b border-border-subtle px-4 py-3">
                     <div class="min-w-0">
                       <div class="flex flex-wrap items-center gap-2">
                         <MetadataBadge
@@ -2319,7 +2319,7 @@ export const FindingsPanel: Component<FindingsPanelProps> = (props) => {
                       type="button"
                       aria-label={`Close review panel for ${title().label}`}
                       onClick={closeReviewPanel}
-                      class="rounded p-1.5 text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
+                      class="rounded-sm p-1.5 text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary/40"
                     >
                       <XIcon class="h-4 w-4" />
                     </button>
diff --git a/frontend-modern/src/components/AI/__tests__/FindingsPanel.test.ts b/frontend-modern/src/components/AI/__tests__/FindingsPanel.test.ts
index 9a57ac5add..d5f0381115 100644
--- a/frontend-modern/src/components/AI/__tests__/FindingsPanel.test.ts
+++ b/frontend-modern/src/components/AI/__tests__/FindingsPanel.test.ts
@@ -178,7 +178,9 @@ describe('FindingsPanel assistant handoff', () => {
     // row body itself opens the same details panel for normal scanning.
     expect(findingsPanelSource).toContain('role="button"');
     expect(findingsPanelSource).toContain('tabIndex={0}');
-    expect(findingsPanelSource).toContain('class="min-w-0 flex-1 cursor-pointer rounded text-left');
+    expect(findingsPanelSource).toContain(
+      'class="min-w-0 flex-1 cursor-pointer rounded-sm text-left',
+    );
     expect(findingsPanelSource).toContain('aria-expanded={expandedId() === finding.id}');
     expect(findingsPanelSource).toContain(
       "aria-label={`${expandedId() === finding.id ? 'Close issue details' : 'Open issue details'} for ${title.label}`}",
@@ -563,7 +565,7 @@ describe('aiFindingPresentation', () => {
       ).toEqual({
         label: 'Runtime issue',
         badgeClasses:
-          'border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-800 dark:bg-sky-900 dark:text-sky-300',
+          'border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-800 dark:bg-sky-900/25 dark:text-sky-300',
         badgeTone: 'sky',
         uppercase: false,
       });
@@ -671,7 +673,7 @@ describe('aiFindingPresentation', () => {
         kind: 'runtime',
         label: 'Patrol runtime',
         badgeClasses:
-          'border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-800 dark:bg-sky-900 dark:text-sky-300',
+          'border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-800 dark:bg-sky-900/25 dark:text-sky-300',
       });
     });
 
@@ -944,10 +946,10 @@ describe('aiFindingPresentation', () => {
 
     it('keeps Patrol review and sort controls touch-sized on phones', () => {
       expect(findingsPanelSource).toContain(
-        'class="inline-flex min-h-11 items-center gap-1 rounded border border-border',
+        'class="inline-flex min-h-11 items-center gap-1 rounded-sm border border-border',
       );
       expect(findingsPanelSource).toContain(
-        'selectBaseClass="min-h-11 rounded border border-border',
+        'selectBaseClass="min-h-11 rounded-sm border border-border',
       );
       expect(findingsPanelSource).toContain('sm:min-h-0');
     });
@@ -1093,7 +1095,7 @@ describe('aiFindingPresentation', () => {
       expect(findingsPanelSource).toContain('severityPresentation.badgeTone');
       expect(findingsPanelSource).toContain('severityPresentation.label');
       expect(findingsPanelSource).not.toContain(
-        'px-1.5 py-0.5 border text-[10px] font-medium rounded',
+        'px-1.5 py-0.5 border text-[10px] font-medium rounded-sm',
       );
     });
 
diff --git a/frontend-modern/src/components/AI/aiChatUtils.ts b/frontend-modern/src/components/AI/aiChatUtils.ts
index 782caa17f0..93df8f7c62 100644
--- a/frontend-modern/src/components/AI/aiChatUtils.ts
+++ b/frontend-modern/src/components/AI/aiChatUtils.ts
@@ -142,7 +142,7 @@ export const renderMarkdown = (content: unknown): string => {
     for (const table of template.content.querySelectorAll('table')) {
       const region = document.createElement('div');
       region.className =
-        'max-w-full overflow-x-auto focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-500';
+        'max-w-full overflow-x-auto focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-blue-500';
       region.tabIndex = 0;
       region.setAttribute('role', 'region');
       region.setAttribute('aria-label', 'Scrollable table');
diff --git a/frontend-modern/src/components/Alerts/AlertResourceTableDesktop.tsx b/frontend-modern/src/components/Alerts/AlertResourceTableDesktop.tsx
index ed9e33fac5..92593af32f 100644
--- a/frontend-modern/src/components/Alerts/AlertResourceTableDesktop.tsx
+++ b/frontend-modern/src/components/Alerts/AlertResourceTableDesktop.tsx
@@ -96,7 +96,7 @@ export function AlertResourceTableDesktop(props: AlertResourceTableDesktopProps)
     return (
       <button
         type="button"
-        class={`inline-flex items-center justify-center px-2 py-0.5 text-xs font-medium rounded transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 focus-visible:ring-offset-1 ${config.className} ${disabled ? 'opacity-60 cursor-not-allowed pointer-events-none' : ''}`.trim()}
+        class={`inline-flex items-center justify-center px-2 py-0.5 text-xs font-medium rounded-sm transition-colors duration-150 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-400 focus-visible:ring-offset-1 ${config.className} ${disabled ? 'opacity-60 cursor-not-allowed pointer-events-none' : ''}`.trim()}
         disabled={disabled}
         onClick={() => {
           if (disabled) return;
@@ -195,7 +195,7 @@ export function AlertResourceTableDesktop(props: AlertResourceTableDesktopProps)
                     });
                   }}
                   onChange={(e) => props.toggleAll(e.currentTarget.checked)}
-                  class="rounded text-sky-600 focus:ring-sky-500 transition-shadow cursor-pointer"
+                  class="rounded-sm text-sky-600 focus:ring-sky-500 transition-shadow cursor-pointer"
                   aria-label="Select all resources"
                 />
               </TableHead>
@@ -209,7 +209,7 @@ export function AlertResourceTableDesktop(props: AlertResourceTableDesktopProps)
             <For each={props.table.columns}>
               {(column) => (
                 <TableHead
-                  class={`${getPlatformTableHeadClassForKind(getAlertResourceColumnKind(column))} whitespace-normal break-words`}
+                  class={`${getPlatformTableHeadClassForKind(getAlertResourceColumnKind(column))} whitespace-normal wrap-break-word`}
                   title={getAlertResourceColumnHeaderTooltip(column)}
                 >
                   {column}
@@ -260,7 +260,7 @@ export function AlertResourceTableDesktop(props: AlertResourceTableDesktopProps)
                         props.table.onToggleGlobalDisable?.();
                         props.table.setHasUnsavedChanges?.(true);
                       }}
-                      class="my-[1px]"
+                      class="my-px"
                       title="Global alerts toggle - disable all alerts for this resource type"
                       ariaLabel="Global alerts toggle"
                     />
@@ -271,7 +271,7 @@ export function AlertResourceTableDesktop(props: AlertResourceTableDesktopProps)
                 <div class="flex items-center gap-2">
                   <span class="text-sm font-semibold text-base-content">Global Defaults</span>
                   <Show when={props.hasCustomGlobalDefaults()}>
-                    <span class="text-xs px-1.5 py-0.5 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded">
+                    <span class="text-xs px-1.5 py-0.5 bg-blue-100 dark:bg-blue-900/25 text-blue-700 dark:text-blue-300 rounded-sm">
                       {getAlertResourceTableCustomBadgeLabel()}
                     </span>
                   </Show>
@@ -328,7 +328,7 @@ export function AlertResourceTableDesktop(props: AlertResourceTableDesktopProps)
                           <Show when={isOff()}>
                             <button
                               type="button"
-                              class="absolute inset-0 w-full rounded cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400"
+                              class="absolute inset-0 w-full rounded-sm cursor-pointer focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-400"
                               onClick={() => {
                                 props.table.setGlobalDefaults?.((prev) => ({
                                   ...prev,
@@ -501,7 +501,7 @@ export function AlertResourceTableDesktop(props: AlertResourceTableDesktopProps)
                           min="0"
                           value={overrideDelay !== undefined ? overrideDelay : ''}
                           placeholder={String(typeDefaultDelay)}
-                          class="w-16 rounded border border-border bg-surface px-2 py-0.5 text-sm text-center text-base-content focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+                          class="w-16 rounded-sm border border-border bg-surface px-2 py-0.5 text-sm text-center text-base-content focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
                           onInput={(e) => {
                             const raw = e.currentTarget.value;
                             if (raw === '') {
diff --git a/frontend-modern/src/components/Alerts/AlertResourceTableMobile.tsx b/frontend-modern/src/components/Alerts/AlertResourceTableMobile.tsx
index 19958916ac..7fc3fb71a6 100644
--- a/frontend-modern/src/components/Alerts/AlertResourceTableMobile.tsx
+++ b/frontend-modern/src/components/Alerts/AlertResourceTableMobile.tsx
@@ -121,7 +121,7 @@ export function AlertResourceTableMobile(props: AlertResourceTableMobileProps) {
     return (
       <button
         type="button"
-        class={`inline-flex min-h-11 items-center justify-center px-2 py-0.5 text-xs font-medium rounded transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 focus-visible:ring-offset-1 sm:min-h-0 ${config.className} ${disabled ? 'opacity-60 cursor-not-allowed pointer-events-none' : ''}`.trim()}
+        class={`inline-flex min-h-11 items-center justify-center px-2 py-0.5 text-xs font-medium rounded-sm transition-colors duration-150 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-400 focus-visible:ring-offset-1 sm:min-h-0 ${config.className} ${disabled ? 'opacity-60 cursor-not-allowed pointer-events-none' : ''}`.trim()}
         disabled={disabled}
         onClick={() => {
           if (disabled) return;
@@ -179,13 +179,13 @@ export function AlertResourceTableMobile(props: AlertResourceTableMobileProps) {
       >
         <Card
           padding="sm"
-          class="border border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900"
+          class="border border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900/25"
         >
           <div class="flex justify-between items-center mb-3">
             <div class="flex items-center gap-2">
               <span class="font-semibold text-sm">Global Defaults</span>
               <Show when={props.hasCustomGlobalDefaults()}>
-                <span class="text-[10px] px-1.5 py-0.5 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded">
+                <span class="text-[10px] px-1.5 py-0.5 bg-blue-100 dark:bg-blue-900/25 text-blue-700 dark:text-blue-300 rounded-sm">
                   {getAlertResourceTableCustomBadgeLabel()}
                 </span>
               </Show>
@@ -218,7 +218,7 @@ export function AlertResourceTableMobile(props: AlertResourceTableMobileProps) {
                 const isOff = () => isAlertResourceMetricOff(value());
 
                 return (
-                  <div class="p-2 bg-surface rounded border border-border-subtle flex flex-col gap-1">
+                  <div class="p-2 bg-surface rounded-sm border border-border-subtle flex flex-col gap-1">
                     <span class="text-[10px] uppercase text-slate-500 font-medium">{column}</span>
                     <div class="flex items-center gap-1.5">
                       <div class="relative flex-1">
@@ -230,7 +230,7 @@ export function AlertResourceTableMobile(props: AlertResourceTableMobileProps) {
                           value={isOff() ? '' : value()}
                           placeholder={getAlertResourceTableMetricPlaceholder(isOff())}
                           disabled={isOff()}
-                          class={`min-h-11 w-full rounded border p-1 text-center text-sm sm:min-h-0 ${isOff() ? 'bg-surface-hover' : ' border-border'}`}
+                          class={`min-h-11 w-full rounded-sm border p-1 text-center text-sm sm:min-h-0 ${isOff() ? 'bg-surface-hover' : ' border-border'}`}
                           onInput={(e) => {
                             const nextValue = parseFloat(e.currentTarget.value);
                             // An empty box is mid-edit, not a disable request:
@@ -284,7 +284,7 @@ export function AlertResourceTableMobile(props: AlertResourceTableMobileProps) {
               }}
             </For>
             <Show when={props.table.showOfflineAlertsColumn}>
-              <div class="p-2 bg-surface rounded border border-border-subtle flex flex-col gap-1">
+              <div class="p-2 bg-surface rounded-sm border border-border-subtle flex flex-col gap-1">
                 <span class="text-[10px] uppercase text-slate-500 font-medium">Offline alerts</span>
                 <div class="flex items-center min-h-11 sm:min-h-0">
                   <Show
@@ -473,7 +473,7 @@ export function AlertResourceTableMobile(props: AlertResourceTableMobileProps) {
                   label="Override note"
                   labelClass="sr-only"
                   fieldBaseClass="w-full"
-                  textareaBaseClass="w-full text-xs p-2 rounded border border-border bg-surface-alt"
+                  textareaBaseClass="w-full text-xs p-2 rounded-sm border border-border bg-surface-alt"
                   rows={2}
                   placeholder={getAlertResourceTableEditNotePlaceholder()}
                   value={props.table.editingNote()}
@@ -505,7 +505,7 @@ export function AlertResourceTableMobile(props: AlertResourceTableMobileProps) {
                       const titlePrefix = metric === 'backup' ? 'Backup' : 'Snapshot';
 
                       return (
-                        <div class="flex justify-between items-center p-1.5 bg-surface-alt rounded">
+                        <div class="flex justify-between items-center p-1.5 bg-surface-alt rounded-sm">
                           <span class="text-[10px] uppercase font-bold tracking-wider">
                             {column}
                           </span>
@@ -524,7 +524,7 @@ export function AlertResourceTableMobile(props: AlertResourceTableMobileProps) {
                     const bounds = getAlertResourceMetricBounds(metric);
 
                     return (
-                      <div class="flex justify-between items-center p-1.5 bg-surface-alt rounded">
+                      <div class="flex justify-between items-center p-1.5 bg-surface-alt rounded-sm">
                         <span class="text-[10px] uppercase font-bold tracking-wider">
                           {column.replace(/mb\/s|%|°c/gi, '').trim()}
                         </span>
@@ -535,7 +535,7 @@ export function AlertResourceTableMobile(props: AlertResourceTableMobileProps) {
                             <button
                               type="button"
                               onClick={(e) => startEditing(resource, metric, e)}
-                              class="min-h-11 min-w-11 font-mono text-xs font-medium cursor-pointer rounded px-1 -mx-1 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400"
+                              class="min-h-11 min-w-11 font-mono text-xs font-medium cursor-pointer rounded-sm px-1 -mx-1 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-400"
                               aria-label={`Edit ${column} threshold for ${getAlertResourceLabel(resource)}`}
                             >
                               <MetricValueWithHeat
@@ -554,7 +554,7 @@ export function AlertResourceTableMobile(props: AlertResourceTableMobileProps) {
                               max={bounds.max}
                               value={isDisabled() ? '' : (thresholds()?.[metric] ?? '')}
                               placeholder={getAlertResourceTableMetricPlaceholder(isDisabled())}
-                              class="min-h-11 w-16 text-right text-xs p-1 rounded border border-border bg-surface"
+                              class="min-h-11 w-16 text-right text-xs p-1 rounded-sm border border-border bg-surface"
                               onInput={(e) => {
                                 const nextValue = parseFloat(e.currentTarget.value);
                                 if (
@@ -601,7 +601,7 @@ export function AlertResourceTableMobile(props: AlertResourceTableMobileProps) {
                     const disabledGlobally = () => props.table.globalDisableFlag?.() ?? false;
 
                     return (
-                      <div class="flex justify-between items-center p-1.5 bg-surface-alt rounded">
+                      <div class="flex justify-between items-center p-1.5 bg-surface-alt rounded-sm">
                         <span class="text-[10px] uppercase font-bold tracking-wider">Offline</span>
                         <Show
                           when={supportsTriState}
diff --git a/frontend-modern/src/components/Alerts/AlertResourceTableRow.tsx b/frontend-modern/src/components/Alerts/AlertResourceTableRow.tsx
index fa73611ae5..437e3f49b4 100644
--- a/frontend-modern/src/components/Alerts/AlertResourceTableRow.tsx
+++ b/frontend-modern/src/components/Alerts/AlertResourceTableRow.tsx
@@ -203,7 +203,7 @@ export function AlertResourceTableRow(props: AlertResourceTableRowProps) {
     return (
       <button
         type="button"
-        class={`inline-flex items-center justify-center px-2 py-0.5 text-xs font-medium rounded transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 focus-visible:ring-offset-1 ${config.className} ${disabled ? 'opacity-60 cursor-not-allowed pointer-events-none' : ''}`.trim()}
+        class={`inline-flex items-center justify-center px-2 py-0.5 text-xs font-medium rounded-sm transition-colors duration-150 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-400 focus-visible:ring-offset-1 ${config.className} ${disabled ? 'opacity-60 cursor-not-allowed pointer-events-none' : ''}`.trim()}
         disabled={disabled}
         onClick={() => {
           if (disabled) return;
@@ -228,7 +228,7 @@ export function AlertResourceTableRow(props: AlertResourceTableRowProps) {
             type="checkbox"
             checked={props.selected}
             onChange={(e) => props.onToggleSelection?.(e.currentTarget.checked)}
-            class="rounded border-border text-sky-600 focus:ring-sky-500 transition-shadow cursor-pointer"
+            class="rounded-sm border-border text-sky-600 focus:ring-sky-500 transition-shadow cursor-pointer"
             aria-label={`Select ${resourceLabel()}`}
           />
         </TableCell>
@@ -246,7 +246,7 @@ export function AlertResourceTableRow(props: AlertResourceTableRowProps) {
                   checked={isChecked}
                   disabled={globallyDisabled}
                   onToggle={() => !globallyDisabled && props.onToggleDisabled?.(props.resource.id)}
-                  class="my-[1px]"
+                  class="my-px"
                   title={
                     globallyDisabled
                       ? 'Alerts disabled globally'
@@ -289,14 +289,14 @@ export function AlertResourceTableRow(props: AlertResourceTableRowProps) {
                 title={`Open ${resourceLabel()} web interface`}
               />
               <Show when={props.resource.clusterName}>
-                <span class="rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300">
+                <span class="rounded-sm px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-blue-100 text-blue-700 dark:bg-blue-900/25 dark:text-blue-300">
                   {props.resource.clusterName}
                 </span>
               </Show>
             </div>
           </Show>
           <Show when={props.resource.type === 'storage' && props.resource.node}>
-            <span class="rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300">
+            <span class="rounded-sm px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300">
               {props.resource.node}
             </span>
           </Show>
@@ -304,7 +304,7 @@ export function AlertResourceTableRow(props: AlertResourceTableRowProps) {
             <span class="text-xs text-muted">{props.resource.subtitle as string}</span>
           </Show>
           <Show when={props.resource.hasOverride || props.resource.disableConnectivity}>
-            <span class="text-xs px-1.5 py-0.5 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded">
+            <span class="text-xs px-1.5 py-0.5 bg-blue-100 dark:bg-blue-900/25 text-blue-700 dark:text-blue-300 rounded-sm">
               {getAlertResourceTableCustomBadgeLabel()}
             </span>
           </Show>
@@ -315,7 +315,7 @@ export function AlertResourceTableRow(props: AlertResourceTableRowProps) {
             label="Override note"
             labelClass="sr-only"
             fieldBaseClass="mt-2 w-full"
-            textareaBaseClass="w-full rounded border border-border bg-surface px-2 py-1 text-xs text-base-content focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+            textareaBaseClass="w-full rounded-sm border border-border bg-surface px-2 py-1 text-xs text-base-content focus:border-blue-500 focus:outline-hidden focus:ring-1 focus:ring-blue-500"
             rows={2}
             placeholder={getAlertResourceTableOverrideNotePlaceholder()}
             value={props.editingNote()}
@@ -323,7 +323,9 @@ export function AlertResourceTableRow(props: AlertResourceTableRowProps) {
           />
         </Show>
         <Show when={!isEditing() && props.resource.note}>
-          <p class="mt-2 text-xs italic text-muted break-words">{props.resource.note as string}</p>
+          <p class="mt-2 text-xs italic text-muted wrap-break-word">
+            {props.resource.note as string}
+          </p>
         </Show>
       </TableCell>
 
@@ -394,7 +396,7 @@ export function AlertResourceTableRow(props: AlertResourceTableRowProps) {
                           openMetricEditor();
                         }
                       }}
-                      class="cursor-pointer hover:bg-surface-hover rounded px-1 py-0.5 transition-colors"
+                      class="cursor-pointer hover:bg-surface-hover rounded-sm px-1 py-0.5 transition-colors"
                       title={getAlertResourceTableEditMetricTitle()}
                       aria-label={getAlertResourceTableEditMetricTitle()}
                     >
diff --git a/frontend-modern/src/components/Alerts/BulkEditDialog.tsx b/frontend-modern/src/components/Alerts/BulkEditDialog.tsx
index 9833596cf4..9a4e26f60b 100644
--- a/frontend-modern/src/components/Alerts/BulkEditDialog.tsx
+++ b/frontend-modern/src/components/Alerts/BulkEditDialog.tsx
@@ -96,7 +96,7 @@ export function BulkEditDialog(props: BulkEditDialogProps) {
 
   return (
     <Dialog isOpen={props.isOpen} onClose={props.onClose} ariaLabel={getAlertBulkEditOpenLabel()}>
-      <div class="fixed inset-0 min-h-screen z-[100] flex items-center justify-center pointer-events-none">
+      <div class="fixed inset-0 min-h-screen z-100 flex items-center justify-center pointer-events-none">
         <div class="bg-surface rounded-xl shadow-2xl ring-1 ring-border max-w-lg w-full p-6 max-h-[90vh] flex flex-col pointer-events-auto">
           <h2 class="text-xl font-semibold text-base-content mb-2">
             {ALERT_BULK_EDIT_DIALOG_TITLE}
@@ -163,7 +163,7 @@ export function BulkEditDialog(props: BulkEditDialogProps) {
                           <input
                             type="number"
                             aria-label={`${column} threshold`}
-                            class="w-full h-9 rounded-md border border-border bg-surface px-3 py-1 text-sm shadow-sm transition-colors focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500"
+                            class="w-full h-9 rounded-md border border-border bg-surface px-3 py-1 text-sm shadow-xs transition-colors focus:border-sky-500 focus:outline-hidden focus:ring-1 focus:ring-sky-500"
                             min={bounds.min}
                             max={bounds.max}
                             step={bounds.step}
@@ -209,14 +209,14 @@ export function BulkEditDialog(props: BulkEditDialogProps) {
           <div class="mt-4 flex justify-end gap-3 pt-4 border-t border-border shrink-0">
             <button
               type="button"
-              class="px-5 py-2 text-sm font-medium text-base-content bg-surface border border-border hover:bg-surface-hover rounded-md transition-colors shadow-sm"
+              class="px-5 py-2 text-sm font-medium text-base-content bg-surface border border-border hover:bg-surface-hover rounded-md transition-colors shadow-xs"
               onClick={props.onClose}
             >
               {ALERT_BULK_EDIT_CANCEL_LABEL}
             </button>
             <button
               type="button"
-              class="px-5 py-2 text-sm font-medium text-white bg-sky-600 hover:bg-sky-500 rounded-md shadow-sm transition-colors"
+              class="px-5 py-2 text-sm font-medium text-white bg-sky-600 hover:bg-sky-500 rounded-md shadow-xs transition-colors"
               onClick={handleSave}
             >
               {getAlertBulkEditApplyLabel(props.selectedIds.length)}
diff --git a/frontend-modern/src/components/Alerts/EmailProviderSelect.tsx b/frontend-modern/src/components/Alerts/EmailProviderSelect.tsx
index 4e1f7adb86..f86710d368 100644
--- a/frontend-modern/src/components/Alerts/EmailProviderSelect.tsx
+++ b/frontend-modern/src/components/Alerts/EmailProviderSelect.tsx
@@ -65,7 +65,7 @@ export function EmailProviderSelect(props: EmailProviderSelectProps) {
     minimumSeverity: `${fieldIdPrefix}-minimum-severity`,
   };
   const instructionBoxClass =
-    'mt-2 rounded border border-blue-200 bg-blue-50 px-3 py-2 text-xs leading-relaxed text-blue-900 dark:border-blue-700 dark:bg-blue-900 dark:text-blue-200';
+    'mt-2 rounded-sm border border-blue-200 bg-blue-50 px-3 py-2 text-xs leading-relaxed text-blue-900/25 dark:border-blue-700 dark:bg-blue-900/25 dark:text-blue-200';
 
   return (
     <div class="space-y-4 text-sm overflow-hidden">
@@ -386,7 +386,7 @@ export function EmailProviderSelect(props: EmailProviderSelectProps) {
           type="button"
           onClick={props.onTest}
           disabled={props.testing || !props.config.enabled}
-          class="min-h-11 rounded border border-blue-500 px-3 py-1.5 text-xs font-medium text-blue-600 transition-colors hover:bg-blue-50 disabled:opacity-50 disabled:cursor-not-allowed sm:min-h-0 dark:border-blue-400 dark:text-blue-300 dark:hover:bg-blue-900"
+          class="min-h-11 rounded-sm border border-blue-500 px-3 py-1.5 text-xs font-medium text-blue-600 transition-colors hover:bg-blue-50 disabled:opacity-50 disabled:cursor-not-allowed sm:min-h-0 dark:border-blue-400 dark:text-blue-300 dark:hover:bg-blue-900/25"
         >
           {getAlertEmailTestButtonLabel(Boolean(props.testing))}
         </button>
diff --git a/frontend-modern/src/components/Alerts/IncidentAssistantHandoffButton.tsx b/frontend-modern/src/components/Alerts/IncidentAssistantHandoffButton.tsx
index 07699af34d..e3d0912d7e 100644
--- a/frontend-modern/src/components/Alerts/IncidentAssistantHandoffButton.tsx
+++ b/frontend-modern/src/components/Alerts/IncidentAssistantHandoffButton.tsx
@@ -36,7 +36,7 @@ export function IncidentAssistantHandoffButton(props: IncidentAssistantHandoffBu
       type="button"
       class={
         props.class ||
-        'inline-flex shrink-0 items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs font-medium text-blue-600 transition-colors hover:bg-surface-hover hover:text-blue-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:text-blue-400 dark:hover:text-blue-300'
+        'inline-flex shrink-0 items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs font-medium text-blue-600 transition-colors hover:bg-surface-hover hover:text-blue-700 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500 dark:text-blue-400 dark:hover:text-blue-300'
       }
       title="Discuss this incident with Pulse Assistant"
       aria-label={`Discuss incident ${props.incident.id} with Pulse Assistant`}
diff --git a/frontend-modern/src/components/Alerts/IncidentTimelineEventCard.tsx b/frontend-modern/src/components/Alerts/IncidentTimelineEventCard.tsx
index ff40b51255..0780d61094 100644
--- a/frontend-modern/src/components/Alerts/IncidentTimelineEventCard.tsx
+++ b/frontend-modern/src/components/Alerts/IncidentTimelineEventCard.tsx
@@ -43,10 +43,10 @@ export function IncidentTimelineEventCard(props: IncidentTimelineEventCardProps)
       <Show when={props.event.evidence}>
         {(evidence) => (
           <details class="text-xs text-muted mt-2">
-            <summary class="cursor-pointer rounded focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">
+            <summary class="cursor-pointer rounded-sm focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2">
               {INCIDENT_EVIDENCE_DETAILS}
             </summary>
-            <dl class="mt-2 grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1 break-words">
+            <dl class="mt-2 grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1 wrap-break-word">
               <dt>Observed</dt>
               <dd>
                 {formatIncidentEvidenceTime(evidence().observedAt) ?? INCIDENT_TIME_UNAVAILABLE}
diff --git a/frontend-modern/src/components/Alerts/InvestigateAlertButton.tsx b/frontend-modern/src/components/Alerts/InvestigateAlertButton.tsx
index 3a083dc04f..e7098f7af4 100644
--- a/frontend-modern/src/components/Alerts/InvestigateAlertButton.tsx
+++ b/frontend-modern/src/components/Alerts/InvestigateAlertButton.tsx
@@ -163,7 +163,7 @@ export function InvestigateAlertButton(props: InvestigateAlertButtonProps) {
   const baseButtonClass = `
     inline-flex items-center justify-center
     rounded-md transition-all duration-200
-    focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500
+    focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500
     disabled:opacity-50 disabled:cursor-not-allowed
   `;
 
@@ -191,7 +191,7 @@ export function InvestigateAlertButton(props: InvestigateAlertButtonProps) {
             onClick={handleOpenAssistant}
             class="flex w-full items-center gap-2 px-3 py-2 text-left text-xs text-base-content hover:bg-surface-hover"
           >
-            <SparklesIcon class="h-4 w-4 flex-shrink-0 text-blue-600 dark:text-blue-400" />
+            <SparklesIcon class="h-4 w-4 shrink-0 text-blue-600 dark:text-blue-400" />
             <span class="flex flex-col">
               <span class="font-medium">{t('alerts.assistant.explain.menuLabel')}</span>
               <span class="text-[10px] text-muted">{t('alerts.assistant.explain.menuHint')}</span>
@@ -274,7 +274,7 @@ export function InvestigateAlertButton(props: InvestigateAlertButtonProps) {
               </svg>
             }
           >
-            <ShieldCheckIcon class="h-3.5 w-3.5 flex-shrink-0" />
+            <ShieldCheckIcon class="h-3.5 w-3.5 shrink-0" />
           </Show>
           <span class="text-xs font-medium">
             {usesPatrolPrimary()
@@ -304,7 +304,7 @@ export function InvestigateAlertButton(props: InvestigateAlertButtonProps) {
           bg-blue-600
           hover:bg-blue-700
           text-white font-medium
-          shadow-sm hover:shadow-sm
+          shadow-xs hover:shadow-xs
           gap-2
           ${showPatrolOption() ? 'rounded-r-none' : ''}
           ${isLocked() ? 'opacity-60 cursor-not-allowed hover:bg-blue-600' : ''}
@@ -325,7 +325,7 @@ export function InvestigateAlertButton(props: InvestigateAlertButtonProps) {
             </svg>
           }
         >
-          <ShieldCheckIcon class="h-4 w-4 flex-shrink-0" />
+          <ShieldCheckIcon class="h-4 w-4 shrink-0" />
         </Show>
         <span>
           {usesPatrolPrimary()
diff --git a/frontend-modern/src/components/Alerts/ResourceTable.test.tsx b/frontend-modern/src/components/Alerts/ResourceTable.test.tsx
index 46bbf72bbc..d478a6815f 100644
--- a/frontend-modern/src/components/Alerts/ResourceTable.test.tsx
+++ b/frontend-modern/src/components/Alerts/ResourceTable.test.tsx
@@ -341,7 +341,7 @@ describe('ResourceTable', () => {
       expect(alertResourceTableMobileSource).toContain('FormTextarea');
       expect(alertResourceTableMobileSource).toContain('ActionIconButton');
       expect(alertResourceTableMobileSource).toContain(
-        'min-h-11 w-full rounded border p-1 text-center text-sm sm:min-h-0',
+        'min-h-11 w-full rounded-sm border p-1 text-center text-sm sm:min-h-0',
       );
       expect(alertResourceTableMobileSource).not.toContain(['<', 'textarea'].join(''));
       expect(alertResourceTableMobileSource).not.toContain(rawSvgTag);
diff --git a/frontend-modern/src/components/Alerts/ResourceTable.tsx b/frontend-modern/src/components/Alerts/ResourceTable.tsx
index ce6f2406ef..38cca6f3f0 100644
--- a/frontend-modern/src/components/Alerts/ResourceTable.tsx
+++ b/frontend-modern/src/components/Alerts/ResourceTable.tsx
@@ -145,14 +145,14 @@ export function ResourceTable(props: ResourceTableProps) {
       </Show>
 
       <Show when={selectedIds().size > 0 && props.onBulkEdit}>
-        <div class="fixed bottom-8 left-1/2 -translate-x-1/2 bg-base border border-border shadow-2xl rounded-full px-5 py-3 flex items-center gap-6 z-[100] animate-in slide-in-from-bottom-5">
+        <div class="fixed bottom-8 left-1/2 -translate-x-1/2 bg-base border border-border shadow-2xl rounded-full px-5 py-3 flex items-center gap-6 z-100 animate-in slide-in-from-bottom-5">
           <span class="text-sm font-medium text-white">
             {selectedIds().size} <span class="text-slate-400">selected</span>
           </span>
           <div class="flex items-center gap-2">
             <button
               type="button"
-              class="bg-blue-600 hover:bg-blue-500 text-white rounded-full px-5 py-1.5 text-sm font-medium transition-colors shadow-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+              class="bg-blue-600 hover:bg-blue-500 text-white rounded-full px-5 py-1.5 text-sm font-medium transition-colors shadow-xs focus:ring-2 focus:ring-blue-500 focus:outline-hidden"
               onClick={() => {
                 if (props.onBulkEdit) {
                   props.onBulkEdit(Array.from(selectedIds()));
diff --git a/frontend-modern/src/components/Alerts/Thresholds/sections/CollapsibleSection.tsx b/frontend-modern/src/components/Alerts/Thresholds/sections/CollapsibleSection.tsx
index 834148e386..d57c44a562 100644
--- a/frontend-modern/src/components/Alerts/Thresholds/sections/CollapsibleSection.tsx
+++ b/frontend-modern/src/components/Alerts/Thresholds/sections/CollapsibleSection.tsx
@@ -95,37 +95,37 @@ export const CollapsibleSection: Component<CollapsibleSectionProps> = (props) =>
           <button
             type="button"
             onClick={handleToggle}
-            class="flex min-h-11 w-full min-w-0 items-center gap-3 px-4 py-3 text-left cursor-pointer select-none focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-500"
+            class="flex min-h-11 w-full min-w-0 items-center gap-3 px-4 py-3 text-left cursor-pointer select-none focus-visible:outline-solid focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-500"
             aria-expanded={!isCollapsed()}
             aria-controls={`section-content-${props.id}`}
           >
             {/* Left side: Chevron + Icon + Title + Count */}
-            <span class="flex-shrink-0 text-muted transition-transform duration-200">
+            <span class="shrink-0 text-muted transition-transform duration-200">
               <Show when={isCollapsed()} fallback={<ChevronDown class="w-5 h-5" />}>
                 <ChevronRight class="w-5 h-5" />
               </Show>
             </span>
 
             <Show when={props.icon}>
-              <span class="flex-shrink-0 text-muted">{props.icon}</span>
+              <span class="shrink-0 text-muted">{props.icon}</span>
             </Show>
 
             <span class="min-w-0">
               <span class="flex items-center gap-2">
                 <span class="truncate font-semibold text-base-content">{props.title}</span>
                 <Show when={props.resourceCount !== undefined}>
-                  <span class="flex-shrink-0 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-surface-alt text-muted">
+                  <span class="shrink-0 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-surface-alt text-muted">
                     {props.resourceCount}
                   </span>
                 </Show>
                 <Show when={props.isGloballyDisabled}>
-                  <span class="flex-shrink-0 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-400">
+                  <span class="shrink-0 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-700 dark:bg-yellow-900/25 dark:text-yellow-400">
                     {getAlertThresholdsSectionDisabledLabel()}
                   </span>
                 </Show>
                 <Show when={props.hasChanges}>
                   <span
-                    class="flex-shrink-0 w-2 h-2 rounded-full bg-blue-500"
+                    class="shrink-0 w-2 h-2 rounded-full bg-blue-500"
                     title={getAlertThresholdsSectionUnsavedChangesTitle()}
                   />
                 </Show>
@@ -138,7 +138,7 @@ export const CollapsibleSection: Component<CollapsibleSectionProps> = (props) =>
         </h3>
 
         <Show when={props.headerActions}>
-          <div class="flex flex-shrink-0 items-center gap-2 pr-4">{props.headerActions}</div>
+          <div class="flex shrink-0 items-center gap-2 pr-4">{props.headerActions}</div>
         </Show>
       </div>
 
@@ -197,9 +197,9 @@ export const SectionActionButton: Component<SectionActionButtonProps> = (props)
   const variantClasses = {
     default: 'text-slate-600 hover:text-base-content hover:bg-slate-100',
     primary:
-      'text-blue-600 hover:text-blue-700 hover:bg-blue-50 dark:text-blue-400 dark:hover:text-blue-300 dark:hover:bg-blue-900',
+      'text-blue-600 hover:text-blue-700 hover:bg-blue-50 dark:text-blue-400 dark:hover:text-blue-300 dark:hover:bg-blue-900/25',
     danger:
-      'text-red-600 hover:text-red-700 hover:bg-red-50 dark:text-red-400 dark:hover:text-red-300 dark:hover:bg-red-900',
+      'text-red-600 hover:text-red-700 hover:bg-red-50 dark:text-red-400 dark:hover:text-red-300 dark:hover:bg-red-900/25',
   };
   return (
     <button
@@ -247,7 +247,7 @@ export const NestedGroupHeader: Component<NestedGroupHeaderProps> = (props) => {
     >
       <div class="flex items-center gap-2 min-w-0">
         <Show when={props.onToggle}>
-          <div class="flex-shrink-0 text-slate-400">
+          <div class="shrink-0 text-slate-400">
             <Show when={props.collapsed} fallback={<ChevronDown class="w-4 h-4" />}>
               <ChevronRight class="w-4 h-4" />
             </Show>
@@ -256,7 +256,7 @@ export const NestedGroupHeader: Component<NestedGroupHeaderProps> = (props) => {
 
         <Show when={props.status}>
           <StatusDot
-            class="flex-shrink-0"
+            class="shrink-0"
             variant={statusIndicator().variant}
             title={statusIndicator().label}
             ariaLabel={statusIndicator().label}
diff --git a/frontend-modern/src/components/Alerts/ThresholdsTable.tsx b/frontend-modern/src/components/Alerts/ThresholdsTable.tsx
index 3e4139a8fe..441b0446af 100644
--- a/frontend-modern/src/components/Alerts/ThresholdsTable.tsx
+++ b/frontend-modern/src/components/Alerts/ThresholdsTable.tsx
@@ -89,11 +89,11 @@ export function ThresholdsTable(props: ThresholdsTableProps) {
       />
 
       <Show when={!state.helpBannerDismissed()}>
-        <div class="rounded-md border border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-900 p-3 relative group">
+        <div class="rounded-md border border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-900/25 p-3 relative group">
           <button
             type="button"
             onClick={state.dismissHelpBanner}
-            class="absolute right-1 top-1 inline-flex min-h-11 min-w-11 items-center justify-center rounded-md p-1 text-blue-500 transition-colors hover:bg-blue-100 hover:text-blue-700 dark:text-blue-400 dark:hover:bg-blue-900 dark:hover:text-blue-200 sm:right-2 sm:top-2 sm:min-h-0 sm:min-w-0 sm:opacity-0 sm:group-hover:opacity-100"
+            class="absolute right-1 top-1 inline-flex min-h-11 min-w-11 items-center justify-center rounded-md p-1 text-blue-500 transition-colors hover:bg-blue-100 hover:text-blue-700 dark:text-blue-400 dark:hover:bg-blue-900/25 dark:hover:text-blue-200 sm:right-2 sm:top-2 sm:min-h-0 sm:min-w-0 sm:opacity-0 sm:group-hover:opacity-100"
             title={state.getAlertThresholdsHelpDismissLabel()}
             aria-label={state.getAlertThresholdsHelpDismissLabel()}
           >
@@ -108,7 +108,7 @@ export function ThresholdsTable(props: ThresholdsTableProps) {
           </button>
           <div class="flex items-start gap-2 pr-6">
             <svg
-              class="w-5 h-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5"
+              class="w-5 h-5 text-blue-600 dark:text-blue-400 shrink-0 mt-0.5"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
@@ -120,7 +120,7 @@ export function ThresholdsTable(props: ThresholdsTableProps) {
                 d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
               />
             </svg>
-            <div class="text-sm text-blue-900 dark:text-blue-100">
+            <div class="text-sm text-blue-900/25 dark:text-blue-100">
               <p class="font-medium">{state.getAlertThresholdsHelpBanner().title}</p>
               <p class="mt-1">{state.getAlertThresholdsHelpBanner().toggleGuidance}</p>
               <p>{state.getAlertThresholdsHelpBanner().inheritanceGuidance}</p>
@@ -152,12 +152,12 @@ export function ThresholdsTable(props: ThresholdsTableProps) {
                 {(item) => (
                   <button
                     type="button"
-                    class="inline-flex min-h-11 items-center gap-2 rounded-full border border-sky-200 bg-surface px-3 py-1.5 text-xs font-medium text-base-content transition-colors hover:border-sky-400 hover:bg-sky-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 sm:min-h-0 dark:border-sky-700 dark:hover:bg-sky-900"
+                    class="inline-flex min-h-11 items-center gap-2 rounded-full border border-sky-200 bg-surface px-3 py-1.5 text-xs font-medium text-base-content transition-colors hover:border-sky-400 hover:bg-sky-100 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-sky-500 sm:min-h-0 dark:border-sky-700 dark:hover:bg-sky-900/25"
                     onClick={() => state.revealCustomOverrides(item.key)}
                     aria-label={`Show ${item.label}: ${state.getAlertThresholdsOverrideCountLabel(item.overrides)}`}
                   >
                     <span>{item.label}</span>
-                    <span class="rounded-full bg-sky-100 px-2 py-0.5 text-sky-700 dark:bg-sky-900 dark:text-sky-200">
+                    <span class="rounded-full bg-sky-100 px-2 py-0.5 text-sky-700 dark:bg-sky-900/25 dark:text-sky-200">
                       {state.getAlertThresholdsOverrideCountLabel(item.overrides)}
                     </span>
                   </button>
@@ -173,7 +173,7 @@ export function ThresholdsTable(props: ThresholdsTableProps) {
           <button
             type="button"
             onClick={state.expandAll}
-            class="min-h-11 rounded px-2 py-1 text-xs transition-colors hover:bg-surface-hover hover:text-muted sm:min-h-0"
+            class="min-h-11 rounded-sm px-2 py-1 text-xs transition-colors hover:bg-surface-hover hover:text-muted sm:min-h-0"
           >
             Expand all
           </button>
@@ -181,7 +181,7 @@ export function ThresholdsTable(props: ThresholdsTableProps) {
           <button
             type="button"
             onClick={state.collapseAll}
-            class="min-h-11 rounded px-2 py-1 text-xs transition-colors hover:bg-surface-hover hover:text-muted sm:min-h-0"
+            class="min-h-11 rounded-sm px-2 py-1 text-xs transition-colors hover:bg-surface-hover hover:text-muted sm:min-h-0"
           >
             Collapse all
           </button>
diff --git a/frontend-modern/src/components/Alerts/ThresholdsTableAgentsResourcesSection.tsx b/frontend-modern/src/components/Alerts/ThresholdsTableAgentsResourcesSection.tsx
index d7062a7555..b4d77dbf87 100644
--- a/frontend-modern/src/components/Alerts/ThresholdsTableAgentsResourcesSection.tsx
+++ b/frontend-modern/src/components/Alerts/ThresholdsTableAgentsResourcesSection.tsx
@@ -105,7 +105,7 @@ export function ThresholdsTableAgentsResourcesSection(props: ThresholdsTableSect
                         }));
                         tableProps.setHasUnsavedChanges(true);
                       }}
-                      class="mt-1 w-full rounded-md border border-border bg-surface p-2 text-sm text-base-content focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200 dark:focus:border-sky-400 dark:focus:ring-sky-600"
+                      class="mt-1 w-full rounded-md border border-border bg-surface p-2 text-sm text-base-content focus:border-sky-500 focus:outline-hidden focus:ring-2 focus:ring-sky-200 dark:focus:border-sky-400 dark:focus:ring-sky-600"
                     />
                   </div>
                 )}
diff --git a/frontend-modern/src/components/Alerts/ThresholdsTableDockerIgnoredPrefixesSection.tsx b/frontend-modern/src/components/Alerts/ThresholdsTableDockerIgnoredPrefixesSection.tsx
index 1c69a6ea26..9064d87229 100644
--- a/frontend-modern/src/components/Alerts/ThresholdsTableDockerIgnoredPrefixesSection.tsx
+++ b/frontend-modern/src/components/Alerts/ThresholdsTableDockerIgnoredPrefixesSection.tsx
@@ -41,7 +41,7 @@ export function ThresholdsTableDockerIgnoredPrefixesSection(props: ThresholdsTab
         }}
         placeholder={state.dockerIgnoredPrefixesPresentation.placeholder}
         rows={4}
-        textareaBaseClass="mt-4 w-full rounded-md border border-border bg-surface p-3 text-sm text-base-content focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200 dark:focus:border-sky-400 dark:focus:ring-sky-600"
+        textareaBaseClass="mt-4 w-full rounded-md border border-border bg-surface p-3 text-sm text-base-content focus:border-sky-500 focus:outline-hidden focus:ring-2 focus:ring-sky-200 dark:focus:border-sky-400 dark:focus:ring-sky-600"
       />
     </Card>
   );
diff --git a/frontend-modern/src/components/Alerts/ThresholdsTableDockerServiceGapSection.tsx b/frontend-modern/src/components/Alerts/ThresholdsTableDockerServiceGapSection.tsx
index bd6de0bf03..0496ec7528 100644
--- a/frontend-modern/src/components/Alerts/ThresholdsTableDockerServiceGapSection.tsx
+++ b/frontend-modern/src/components/Alerts/ThresholdsTableDockerServiceGapSection.tsx
@@ -57,7 +57,7 @@ export function ThresholdsTableDockerServiceGapSection(props: ThresholdsTableSec
               }));
               tableProps.setHasUnsavedChanges(true);
             }}
-            class="mt-1 w-full rounded-md border border-border bg-surface p-2 text-sm text-base-content focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200 dark:focus:border-sky-400 dark:focus:ring-sky-600"
+            class="mt-1 w-full rounded-md border border-border bg-surface p-2 text-sm text-base-content focus:border-sky-500 focus:outline-hidden focus:ring-2 focus:ring-sky-200 dark:focus:border-sky-400 dark:focus:ring-sky-600"
           />
           <p class="mt-1 text-xs text-muted">
             {state.dockerServicePresentation.warningGapDescription}
@@ -85,7 +85,7 @@ export function ThresholdsTableDockerServiceGapSection(props: ThresholdsTableSec
               }));
               tableProps.setHasUnsavedChanges(true);
             }}
-            class="mt-1 w-full rounded-md border border-border bg-surface p-2 text-sm text-base-content focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200 dark:focus:border-sky-400 dark:focus:ring-sky-600"
+            class="mt-1 w-full rounded-md border border-border bg-surface p-2 text-sm text-base-content focus:border-sky-500 focus:outline-hidden focus:ring-2 focus:ring-sky-200 dark:focus:border-sky-400 dark:focus:ring-sky-600"
           />
           <p class="mt-1 text-xs text-muted">
             {state.dockerServicePresentation.criticalGapDescription}
diff --git a/frontend-modern/src/components/Alerts/ThresholdsTableDockerUpdateAlertsSection.tsx b/frontend-modern/src/components/Alerts/ThresholdsTableDockerUpdateAlertsSection.tsx
index f4c9513859..853a1b72ca 100644
--- a/frontend-modern/src/components/Alerts/ThresholdsTableDockerUpdateAlertsSection.tsx
+++ b/frontend-modern/src/components/Alerts/ThresholdsTableDockerUpdateAlertsSection.tsx
@@ -80,7 +80,7 @@ export function ThresholdsTableDockerUpdateAlertsSection(props: ThresholdsTableS
                 }));
                 tableProps.setHasUnsavedChanges(true);
               }}
-              class="mt-1 w-full rounded-md border border-border bg-surface p-2 text-sm text-base-content focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200 dark:focus:border-sky-400 dark:focus:ring-sky-600"
+              class="mt-1 w-full rounded-md border border-border bg-surface p-2 text-sm text-base-content focus:border-sky-500 focus:outline-hidden focus:ring-2 focus:ring-sky-200 dark:focus:border-sky-400 dark:focus:ring-sky-600"
             />
             <p class="mt-1 text-xs text-muted">{state.dockerUpdatePresentation.delayDescription}</p>
           </div>
diff --git a/frontend-modern/src/components/Alerts/WebhookConfigForm.tsx b/frontend-modern/src/components/Alerts/WebhookConfigForm.tsx
index 57b6d63d0d..35b80aec49 100644
--- a/frontend-modern/src/components/Alerts/WebhookConfigForm.tsx
+++ b/frontend-modern/src/components/Alerts/WebhookConfigForm.tsx
@@ -100,7 +100,7 @@ export function WebhookConfigForm(props: WebhookConfigFormProps) {
                   onClick={() => props.selectService(service.id)}
                   class={`min-h-11 px-2 py-1.5 text-left border transition-colors text-xs sm:min-h-0 ${
                     props.formData().service === service.id
-                      ? 'border-blue-500 bg-blue-50 dark:bg-blue-900'
+                      ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/25'
                       : 'border-border hover:bg-surface-hover'
                   }`}
                 >
@@ -114,7 +114,7 @@ export function WebhookConfigForm(props: WebhookConfigFormProps) {
 
         <Show when={props.currentTemplate()?.instructions}>
           <div class="mb-3 border-l-2 border-blue-300 pl-3 text-xs leading-relaxed text-blue-800 dark:border-blue-700 dark:text-blue-200">
-            <h4 class="text-sm font-medium text-blue-900 dark:text-blue-100 mb-2">
+            <h4 class="text-sm font-medium text-blue-900/25 dark:text-blue-100 mb-2">
               {getAlertWebhookSetupInstructionsTitle()}
             </h4>
             {props.currentTemplate()!.instructions}
@@ -411,7 +411,7 @@ export function WebhookConfigForm(props: WebhookConfigFormProps) {
       <div class="flex justify-end gap-2 text-xs">
         <button
           onClick={props.cancelForm}
-          class="min-h-11 px-3 py-1.5 border border-border rounded text-xs hover:bg-surface-hover sm:min-h-0"
+          class="min-h-11 px-3 py-1.5 border border-border rounded-sm text-xs hover:bg-surface-hover sm:min-h-0"
         >
           {ALERT_WEBHOOK_CANCEL_LABEL}
         </button>
@@ -419,7 +419,7 @@ export function WebhookConfigForm(props: WebhookConfigFormProps) {
           <button
             onClick={props.testWebhookForm}
             disabled={props.testing === (props.editingId() || 'temp-new-webhook')}
-            class="min-h-11 px-3 py-1.5 border border-border rounded text-xs hover:bg-slate-100 sm:min-h-0"
+            class="min-h-11 px-3 py-1.5 border border-border rounded-sm text-xs hover:bg-slate-100 sm:min-h-0"
           >
             {getAlertWebhookTestLabel(
               props.testing === (props.editingId() || 'temp-new-webhook'),
@@ -430,7 +430,7 @@ export function WebhookConfigForm(props: WebhookConfigFormProps) {
         <button
           onClick={props.saveWebhook}
           disabled={!props.formData().name || !props.formData().url}
-          class="min-h-11 px-3 py-1.5 bg-blue-600 text-white text-xs rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed sm:min-h-0"
+          class="min-h-11 px-3 py-1.5 bg-blue-600 text-white text-xs rounded-sm hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed sm:min-h-0"
         >
           {getAlertWebhookSubmitLabel(Boolean(props.editingId()))}
         </button>
diff --git a/frontend-modern/src/components/Alerts/WebhookConfigList.tsx b/frontend-modern/src/components/Alerts/WebhookConfigList.tsx
index 5347c868be..e910e04ed5 100644
--- a/frontend-modern/src/components/Alerts/WebhookConfigList.tsx
+++ b/frontend-modern/src/components/Alerts/WebhookConfigList.tsx
@@ -29,7 +29,7 @@ interface WebhookConfigListProps {
 export function WebhookConfigList(props: WebhookConfigListProps) {
   return (
     <div class="space-y-3 w-full">
-      <div class="flex flex-col gap-2 rounded border border-border px-3 py-3 text-xs sm:flex-row sm:items-center sm:justify-between">
+      <div class="flex flex-col gap-2 rounded-sm border border-border px-3 py-3 text-xs sm:flex-row sm:items-center sm:justify-between">
         <div class="text-muted sm:text-sm">
           {getAlertWebhookSummaryLabel(
             props.webhooks.filter((webhook) => webhook.enabled).length,
@@ -40,14 +40,14 @@ export function WebhookConfigList(props: WebhookConfigListProps) {
           <button
             onClick={() => props.toggleAllWebhooks(false)}
             disabled={!props.someEnabled()}
-            class="min-h-11 w-full rounded border px-3 py-1 text-xs transition-colors hover:bg-surface-hover sm:min-h-0 sm:w-auto"
+            class="min-h-11 w-full rounded-sm border px-3 py-1 text-xs transition-colors hover:bg-surface-hover sm:min-h-0 sm:w-auto"
           >
             {getAlertWebhookToggleAllLabel(false)}
           </button>
           <button
             onClick={() => props.toggleAllWebhooks(true)}
             disabled={props.allEnabled()}
-            class="min-h-11 w-full rounded border border-green-500 px-3 py-1 text-xs text-green-700 transition-colors hover:bg-green-50 sm:min-h-0 sm:w-auto dark:border-green-600 dark:text-green-400 dark:hover:bg-green-900"
+            class="min-h-11 w-full rounded-sm border border-green-500 px-3 py-1 text-xs text-green-700 transition-colors hover:bg-green-50 sm:min-h-0 sm:w-auto dark:border-green-600 dark:text-green-400 dark:hover:bg-green-900/25"
           >
             {getAlertWebhookToggleAllLabel(true)}
           </button>
@@ -61,22 +61,22 @@ export function WebhookConfigList(props: WebhookConfigListProps) {
               <span class="font-medium text-base-content">{webhook.name}</span>
               <button
                 onClick={() => props.onToggleWebhook(webhook)}
-                class={`min-h-11 rounded border px-3 py-1 text-xs font-medium transition-colors sm:min-h-0 ${webhook.enabled ? 'border-green-500 text-green-700 hover:bg-green-50 dark:border-green-600 dark:text-green-400 dark:hover:bg-green-900' : 'border-border text-muted hover:bg-surface-hover'}`}
+                class={`min-h-11 rounded-sm border px-3 py-1 text-xs font-medium transition-colors sm:min-h-0 ${webhook.enabled ? 'border-green-500 text-green-700 hover:bg-green-50 dark:border-green-600 dark:text-green-400 dark:hover:bg-green-900/25' : 'border-border text-muted hover:bg-surface-hover'}`}
               >
                 {getAlertWebhookToggleLabel(webhook.enabled)}
               </button>
             </div>
             <div class="mt-2 flex flex-wrap gap-2 text-[11px] text-muted sm:text-xs">
-              <span class="rounded bg-surface-alt px-2 py-0.5 text-base-content">
+              <span class="rounded-sm bg-surface-alt px-2 py-0.5 text-base-content">
                 {getAlertWebhookServiceLabelFromTemplates(
                   webhook.service || 'generic',
                   props.templates(),
                 )}
               </span>
-              <span class="rounded bg-surface-alt px-2 py-0.5 text-base-content">
+              <span class="rounded-sm bg-surface-alt px-2 py-0.5 text-base-content">
                 {webhook.method}
               </span>
-              <span class="rounded bg-surface-alt px-2 py-0.5 text-base-content">
+              <span class="rounded-sm bg-surface-alt px-2 py-0.5 text-base-content">
                 {getAlertDestinationSeverityLabel(
                   webhook.minimumSeverity === 'critical' || webhook.minimumSeverity === 'warning'
                     ? webhook.minimumSeverity
@@ -85,13 +85,13 @@ export function WebhookConfigList(props: WebhookConfigListProps) {
               </span>
               <For each={webhook.tagFilter ?? []}>
                 {(tag) => (
-                  <span class="rounded bg-sky-50 px-2 py-0.5 text-sky-700 dark:bg-sky-900 dark:text-sky-300">
+                  <span class="rounded-sm bg-sky-50 px-2 py-0.5 text-sky-700 dark:bg-sky-900/25 dark:text-sky-300">
                     {tag}
                   </span>
                 )}
               </For>
               <Show when={(webhook.tagFilter?.length ?? 0) > 1}>
-                <span class="rounded bg-surface-alt px-2 py-0.5 text-muted">
+                <span class="rounded-sm bg-surface-alt px-2 py-0.5 text-muted">
                   Match {webhook.tagFilterMode === 'any' ? 'any' : 'all'}
                 </span>
               </Show>
@@ -101,19 +101,19 @@ export function WebhookConfigList(props: WebhookConfigListProps) {
               <button
                 onClick={() => props.onTestWebhook(webhook)}
                 disabled={props.testing === webhook.id || !webhook.enabled}
-                class="min-h-11 rounded border px-3 py-1 text-xs text-base-content transition-colors hover:bg-surface-hover disabled:opacity-50 sm:min-h-0"
+                class="min-h-11 rounded-sm border px-3 py-1 text-xs text-base-content transition-colors hover:bg-surface-hover disabled:opacity-50 sm:min-h-0"
               >
                 {getAlertWebhookTestLabel(props.testing === webhook.id)}
               </button>
               <button
                 onClick={() => props.onEditWebhook(webhook)}
-                class="min-h-11 rounded border border-blue-300 px-3 py-1 text-xs text-blue-600 transition-colors hover:bg-blue-50 sm:min-h-0 dark:border-blue-500 dark:text-blue-300 dark:hover:bg-blue-900"
+                class="min-h-11 rounded-sm border border-blue-300 px-3 py-1 text-xs text-blue-600 transition-colors hover:bg-blue-50 sm:min-h-0 dark:border-blue-500 dark:text-blue-300 dark:hover:bg-blue-900/25"
               >
                 {ALERT_WEBHOOK_EDIT_LABEL}
               </button>
               <button
                 onClick={() => props.onDeleteWebhook(webhook)}
-                class="min-h-11 rounded border border-red-300 px-3 py-1 text-xs text-red-600 transition-colors hover:bg-red-50 sm:min-h-0 dark:border-red-500 dark:text-red-300 dark:hover:bg-red-900"
+                class="min-h-11 rounded-sm border border-red-300 px-3 py-1 text-xs text-red-600 transition-colors hover:bg-red-50 sm:min-h-0 dark:border-red-500 dark:text-red-300 dark:hover:bg-red-900/25"
               >
                 {ALERT_WEBHOOK_DELETE_LABEL}
               </button>
diff --git a/frontend-modern/src/components/AppBootstrapStatus.tsx b/frontend-modern/src/components/AppBootstrapStatus.tsx
index 8fcc556c10..091d6b2428 100644
--- a/frontend-modern/src/components/AppBootstrapStatus.tsx
+++ b/frontend-modern/src/components/AppBootstrapStatus.tsx
@@ -33,7 +33,7 @@ export const AppBootstrapStatus: Component<AppBootstrapStatusProps> = (props) =>
       class="flex min-h-screen items-center justify-center bg-base px-4 py-8 text-base-content"
       aria-labelledby="app-bootstrap-title"
     >
-      <div class="w-full max-w-md rounded-md border border-border bg-surface p-6 text-center shadow-sm sm:p-8">
+      <div class="w-full max-w-md rounded-md border border-border bg-surface p-6 text-center shadow-xs sm:p-8">
         <LoadingSpinner size="xl" tone="info" class="mb-4" />
         <h1 id="app-bootstrap-title" class="text-lg font-semibold tracking-tight">
           Connecting to Pulse
diff --git a/frontend-modern/src/components/Brand/PulseBrandMark.tsx b/frontend-modern/src/components/Brand/PulseBrandMark.tsx
index 59f951e7ae..15f5e705d9 100644
--- a/frontend-modern/src/components/Brand/PulseBrandMark.tsx
+++ b/frontend-modern/src/components/Brand/PulseBrandMark.tsx
@@ -37,7 +37,7 @@ export const PulseBrandMark: Component<PulseBrandMarkProps> = (props) => {
       </Show>
       <circle class="pulse-bg fill-blue-600 dark:fill-blue-500" cx="128" cy="128" r="122" />
       <circle
-        class="pulse-ring fill-none stroke-white dark:stroke-[#dbeafe] stroke-[14] opacity-[0.92]"
+        class="pulse-ring fill-none stroke-white dark:stroke-[#dbeafe] stroke-14 opacity-[0.92]"
         cx="128"
         cy="128"
         r="84"
diff --git a/frontend-modern/src/components/Discovery/AvailabilityProposalCard.tsx b/frontend-modern/src/components/Discovery/AvailabilityProposalCard.tsx
index d05916192d..9e6f6df292 100644
--- a/frontend-modern/src/components/Discovery/AvailabilityProposalCard.tsx
+++ b/frontend-modern/src/components/Discovery/AvailabilityProposalCard.tsx
@@ -222,13 +222,13 @@ export const AvailabilityProposalCard: Component<AvailabilityProposalCardProps>
     <Show when={proposal()}>
       {(current) => (
         <section
-          class="rounded-lg border border-blue-300 bg-blue-50/70 p-4 shadow-sm dark:border-blue-800 dark:bg-blue-950/30"
+          class="rounded-lg border border-blue-300 bg-blue-50/70 p-4 shadow-xs dark:border-blue-800 dark:bg-blue-950/30"
           aria-label="Suggested service verification"
         >
           <div class="flex flex-wrap items-start justify-between gap-3">
             <div>
               <div class="flex flex-wrap items-center gap-2">
-                <h3 class="text-sm font-semibold text-blue-950 dark:text-blue-100">
+                <h3 class="text-sm font-semibold text-blue-950/25 dark:text-blue-100">
                   Suggested service verification
                 </h3>
                 <span class="rounded-full border border-blue-300 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-blue-700 dark:border-blue-700 dark:text-blue-300">
@@ -274,7 +274,7 @@ export const AvailabilityProposalCard: Component<AvailabilityProposalCardProps>
             }
           >
             <div class="mt-4 grid gap-2 sm:grid-cols-2">
-              <div class="rounded-md border border-blue-200 bg-white/70 p-3 dark:border-blue-900 dark:bg-black/10">
+              <div class="rounded-md border border-blue-200 bg-white/70 p-3 dark:border-blue-900/25 dark:bg-black/10">
                 <p class="text-[10px] font-medium uppercase tracking-wide text-blue-600 dark:text-blue-400">
                   Endpoint · inferred
                 </p>
@@ -282,7 +282,7 @@ export const AvailabilityProposalCard: Component<AvailabilityProposalCardProps>
                   {endpointLabel(current())}
                 </code>
               </div>
-              <div class="rounded-md border border-blue-200 bg-white/70 p-3 dark:border-blue-900 dark:bg-black/10">
+              <div class="rounded-md border border-blue-200 bg-white/70 p-3 dark:border-blue-900/25 dark:bg-black/10">
                 <p class="text-[10px] font-medium uppercase tracking-wide text-blue-600 dark:text-blue-400">
                   Expected behavior · reviewed default
                 </p>
@@ -344,7 +344,7 @@ export const AvailabilityProposalCard: Component<AvailabilityProposalCardProps>
             <Show when={duplicate()}>
               {(match) => (
                 <div
-                  class="mt-3 rounded-md border border-amber-300 bg-amber-50 px-3 py-2 text-xs text-amber-900 dark:border-amber-800 dark:bg-amber-950/30 dark:text-amber-200"
+                  class="mt-3 rounded-md border border-amber-300 bg-amber-50 px-3 py-2 text-xs text-amber-900/25 dark:border-amber-800 dark:bg-amber-950/30 dark:text-amber-200"
                   role="status"
                 >
                   {match().kind === 'endpoint'
@@ -359,7 +359,7 @@ export const AvailabilityProposalCard: Component<AvailabilityProposalCardProps>
               </div>
             </Show>
             <Show when={targets.error}>
-              <div class="mt-3 rounded-md border border-red-300 bg-red-50 px-3 py-2 text-xs text-red-900 dark:border-red-800 dark:bg-red-950/30 dark:text-red-200">
+              <div class="mt-3 rounded-md border border-red-300 bg-red-50 px-3 py-2 text-xs text-red-900/25 dark:border-red-800 dark:bg-red-950/30 dark:text-red-200">
                 <p role="alert">
                   Pulse could not check for existing active checks. Creating a check is unavailable
                   until that safety check succeeds.
@@ -380,8 +380,8 @@ export const AvailabilityProposalCard: Component<AvailabilityProposalCardProps>
                 <div
                   class={`mt-3 rounded-md border px-3 py-2 text-xs ${
                     result().success
-                      ? 'border-emerald-300 bg-emerald-50 text-emerald-900 dark:border-emerald-800 dark:bg-emerald-950/30 dark:text-emerald-200'
-                      : 'border-red-300 bg-red-50 text-red-900 dark:border-red-800 dark:bg-red-950/30 dark:text-red-200'
+                      ? 'border-emerald-300 bg-emerald-50 text-emerald-900/25 dark:border-emerald-800 dark:bg-emerald-950/30 dark:text-emerald-200'
+                      : 'border-red-300 bg-red-50 text-red-900/25 dark:border-red-800 dark:bg-red-950/30 dark:text-red-200'
                   }`}
                   role={result().success ? 'status' : 'alert'}
                 >
@@ -392,7 +392,7 @@ export const AvailabilityProposalCard: Component<AvailabilityProposalCardProps>
             <Show when={createdTarget()}>
               {(created) => (
                 <div
-                  class="mt-3 flex items-center gap-2 rounded-md border border-emerald-300 bg-emerald-50 px-3 py-2 text-xs text-emerald-900 dark:border-emerald-800 dark:bg-emerald-950/30 dark:text-emerald-200"
+                  class="mt-3 flex items-center gap-2 rounded-md border border-emerald-300 bg-emerald-50 px-3 py-2 text-xs text-emerald-900/25 dark:border-emerald-800 dark:bg-emerald-950/30 dark:text-emerald-200"
                   role="status"
                 >
                   <CheckCircleIcon class="h-4 w-4" aria-hidden="true" />
@@ -478,7 +478,7 @@ export const AvailabilityProposalCard: Component<AvailabilityProposalCardProps>
                 </Show>
                 <Show when={machineDiscoveries.error}>
                   <p
-                    class="rounded-md border border-red-300 bg-red-50 p-4 text-sm text-red-900 dark:border-red-800 dark:bg-red-950/30 dark:text-red-200"
+                    class="rounded-md border border-red-300 bg-red-50 p-4 text-sm text-red-900/25 dark:border-red-800 dark:bg-red-950/30 dark:text-red-200"
                     role="alert"
                   >
                     Pulse could not load this machine’s assurance suggestions. Close this review and
diff --git a/frontend-modern/src/components/Discovery/DiscoveryTab.tsx b/frontend-modern/src/components/Discovery/DiscoveryTab.tsx
index 1417ee04a8..6de5668272 100644
--- a/frontend-modern/src/components/Discovery/DiscoveryTab.tsx
+++ b/frontend-modern/src/components/Discovery/DiscoveryTab.tsx
@@ -148,9 +148,9 @@ export const DiscoveryTab: Component<DiscoveryTabProps> = (props) => {
   return (
     <div class="space-y-4 whitespace-normal">
       <Show when={discoveryFeatureKnownDisabled()}>
-        <div class="rounded border border-amber-200 bg-amber-50/80 p-3 shadow-sm dark:border-amber-800/50 dark:bg-amber-900/20">
+        <div class="rounded-sm border border-amber-200 bg-amber-50/80 p-3 shadow-xs dark:border-amber-800/50 dark:bg-amber-900/20">
           <div class="flex items-start gap-2.5">
-            <TriangleAlertIcon class="mt-0.5 h-4 w-4 flex-shrink-0 text-amber-600 dark:text-amber-400" />
+            <TriangleAlertIcon class="mt-0.5 h-4 w-4 shrink-0 text-amber-600 dark:text-amber-400" />
             <div class="text-xs text-amber-800 dark:text-amber-200">
               <p class="mb-1 font-medium">Service identification is off</p>
               <p class="text-amber-700 dark:text-amber-300">
@@ -211,9 +211,9 @@ export const DiscoveryTab: Component<DiscoveryTabProps> = (props) => {
             Surfaces the "enabled but no provider" dead end that previously only
             showed for agents, so Discovery is never silently on-but-useless. */}
         <Show when={!discoveryInfo.loading && discoveryReadiness().status === 'needs_ai_provider'}>
-          <div class="rounded border border-amber-200 bg-amber-50/80 p-3 shadow-sm dark:border-amber-800/50 dark:bg-amber-900/20">
+          <div class="rounded-sm border border-amber-200 bg-amber-50/80 p-3 shadow-xs dark:border-amber-800/50 dark:bg-amber-900/20">
             <div class="flex items-start gap-2.5">
-              <TriangleAlertIcon class="mt-0.5 h-4 w-4 flex-shrink-0 text-amber-600 dark:text-amber-400" />
+              <TriangleAlertIcon class="mt-0.5 h-4 w-4 shrink-0 text-amber-600 dark:text-amber-400" />
               <div class="text-xs text-amber-800 dark:text-amber-200">
                 <p class="mb-1 font-medium">AI provider not configured</p>
                 <p class="text-amber-700 dark:text-amber-300">
@@ -236,7 +236,7 @@ export const DiscoveryTab: Component<DiscoveryTabProps> = (props) => {
                 type="button"
                 onClick={() => handleTriggerDiscovery(true)}
                 disabled={isScanning() || !canTriggerDiscovery()}
-                class="inline-flex min-h-9 items-center justify-center gap-1.5 rounded border border-border bg-surface px-3 py-1.5 text-xs font-medium text-base-content transition-colors hover:bg-surface-hover disabled:cursor-not-allowed disabled:opacity-50"
+                class="inline-flex min-h-9 items-center justify-center gap-1.5 rounded-sm border border-border bg-surface px-3 py-1.5 text-xs font-medium text-base-content transition-colors hover:bg-surface-hover disabled:cursor-not-allowed disabled:opacity-50"
               >
                 <Show
                   when={isScanning()}
@@ -269,11 +269,11 @@ export const DiscoveryTab: Component<DiscoveryTabProps> = (props) => {
 
         {/* "What Discovery Does" explanation - shown when no discovery exists yet */}
         <Show when={!discovery() && !isScanning() && !showLoadingSpinner() && showExplanation()}>
-          <div class="rounded border border-amber-200 bg-amber-50 p-3 shadow-sm dark:border-amber-800 dark:bg-amber-900">
+          <div class="rounded-sm border border-amber-200 bg-amber-50 p-3 shadow-xs dark:border-amber-800 dark:bg-amber-900/25">
             <div class="flex items-start justify-between gap-3">
               <div class="flex items-start gap-2.5">
                 <svg
-                  class="w-4 h-4 text-amber-600 dark:text-amber-400 flex-shrink-0 mt-0.5"
+                  class="w-4 h-4 text-amber-600 dark:text-amber-400 shrink-0 mt-0.5"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
@@ -292,7 +292,7 @@ export const DiscoveryTab: Component<DiscoveryTabProps> = (props) => {
               </div>
               <button
                 onClick={() => setShowExplanation(false)}
-                class="text-amber-500 hover:text-amber-700 dark:text-amber-400 dark:hover:text-amber-300 flex-shrink-0"
+                class="text-amber-500 hover:text-amber-700 dark:text-amber-400 dark:hover:text-amber-300 shrink-0"
                 title="Dismiss"
               >
                 <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -320,7 +320,7 @@ export const DiscoveryTab: Component<DiscoveryTabProps> = (props) => {
           }
         >
           <details
-            class="rounded border border-border bg-surface shadow-sm"
+            class="rounded-sm border border-border bg-surface shadow-xs"
             open={showCommandsPreview()}
           >
             <summary
@@ -351,7 +351,7 @@ export const DiscoveryTab: Component<DiscoveryTabProps> = (props) => {
                   {(cmd) => (
                     <div class="text-xs">
                       <div class="flex items-start gap-2">
-                        <code class="text-[10px] px-1.5 py-0.5 rounded bg-surface-hover text-base-content font-mono break-all">
+                        <code class="text-[10px] px-1.5 py-0.5 rounded-sm bg-surface-hover text-base-content font-mono break-all">
                           {cmd.command}
                         </code>
                       </div>
@@ -374,7 +374,7 @@ export const DiscoveryTab: Component<DiscoveryTabProps> = (props) => {
 
         {/* Scan Progress Bar */}
         <Show when={scanProgress() && isScanning()}>
-          <div class="rounded border border-blue-200 bg-blue-50 p-3 shadow-sm dark:border-blue-800 dark:bg-blue-900">
+          <div class="rounded-sm border border-blue-200 bg-blue-50 p-3 shadow-xs dark:border-blue-800 dark:bg-blue-900/25">
             <div class="flex items-center justify-between mb-2">
               <div class="flex items-center gap-2">
                 <div class="animate-spin h-4 w-4 border-2 border-blue-500 border-t-transparent rounded-full"></div>
@@ -409,7 +409,7 @@ export const DiscoveryTab: Component<DiscoveryTabProps> = (props) => {
 
         {/* Scanning state without WebSocket progress - show live timer */}
         <Show when={isScanning() && !scanProgress()}>
-          <div class="rounded border border-blue-200 bg-blue-50 p-3 shadow-sm dark:border-blue-800 dark:bg-blue-900">
+          <div class="rounded-sm border border-blue-200 bg-blue-50 p-3 shadow-xs dark:border-blue-800 dark:bg-blue-900/25">
             <div class="flex items-center gap-2 mb-2">
               <div class="animate-spin h-4 w-4 border-2 border-blue-500 border-t-transparent rounded-full"></div>
               <span class="text-sm font-medium text-blue-700 dark:text-blue-300">
@@ -430,7 +430,7 @@ export const DiscoveryTab: Component<DiscoveryTabProps> = (props) => {
           <div
             role="status"
             aria-live="polite"
-            class="mb-4 rounded-md border border-green-200 bg-green-50 p-4 dark:border-green-800 dark:bg-green-900"
+            class="mb-4 rounded-md border border-green-200 bg-green-50 p-4 dark:border-green-800 dark:bg-green-900/25"
           >
             <div class="flex items-center gap-2">
               <svg
@@ -455,10 +455,10 @@ export const DiscoveryTab: Component<DiscoveryTabProps> = (props) => {
 
         {/* Scan Error */}
         <Show when={scanError()}>
-          <div class="mb-4 rounded-md border border-red-200 bg-red-50 p-4 dark:border-red-800 dark:bg-red-900">
+          <div class="mb-4 rounded-md border border-red-200 bg-red-50 p-4 dark:border-red-800 dark:bg-red-900/25">
             <div class="flex items-start gap-3">
               <svg
-                class="w-5 h-5 text-red-500 dark:text-red-400 flex-shrink-0 mt-0.5"
+                class="w-5 h-5 text-red-500 dark:text-red-400 shrink-0 mt-0.5"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
@@ -535,10 +535,10 @@ export const DiscoveryTab: Component<DiscoveryTabProps> = (props) => {
               }
             >
               <Show when={discoveryReadiness().status === 'needs_commands'}>
-                <div class="mb-4 mx-auto max-w-md rounded-md border border-amber-200 bg-amber-50 p-3 text-left dark:border-amber-800 dark:bg-amber-900">
+                <div class="mb-4 mx-auto max-w-md rounded-md border border-amber-200 bg-amber-50 p-3 text-left dark:border-amber-800 dark:bg-amber-900/25">
                   <div class="flex items-start gap-2">
                     <svg
-                      class="w-4 h-4 text-amber-500 dark:text-amber-400 flex-shrink-0 mt-0.5"
+                      class="w-4 h-4 text-amber-500 dark:text-amber-400 shrink-0 mt-0.5"
                       fill="none"
                       viewBox="0 0 24 24"
                       stroke="currentColor"
@@ -566,10 +566,10 @@ export const DiscoveryTab: Component<DiscoveryTabProps> = (props) => {
                 </div>
               </Show>
               <Show when={discoveryReadiness().status === 'needs_connected_agent'}>
-                <div class="mb-4 mx-auto max-w-md rounded-md border border-amber-200 bg-amber-50 p-3 text-left dark:border-amber-800 dark:bg-amber-900">
+                <div class="mb-4 mx-auto max-w-md rounded-md border border-amber-200 bg-amber-50 p-3 text-left dark:border-amber-800 dark:bg-amber-900/25">
                   <div class="flex items-start gap-2">
                     <svg
-                      class="w-4 h-4 text-amber-500 dark:text-amber-400 flex-shrink-0 mt-0.5"
+                      class="w-4 h-4 text-amber-500 dark:text-amber-400 shrink-0 mt-0.5"
                       fill="none"
                       viewBox="0 0 24 24"
                       stroke="currentColor"
@@ -588,7 +588,7 @@ export const DiscoveryTab: Component<DiscoveryTabProps> = (props) => {
                       <p class="text-amber-700 dark:text-amber-300 mt-0.5">
                         Commands are enabled, but the agent isn't connected via WebSocket. Check
                         that the API token has the{' '}
-                        <code class="px-1 py-0.5 bg-amber-100 dark:bg-amber-800 rounded">
+                        <code class="px-1 py-0.5 bg-amber-100 dark:bg-amber-800 rounded-sm">
                           agent:exec
                         </code>{' '}
                         scope in{' '}
@@ -606,10 +606,10 @@ export const DiscoveryTab: Component<DiscoveryTabProps> = (props) => {
                   green "connected" claim must require a genuinely connected
                   agent with commands explicitly enabled. */}
               <Show when={props.commandsEnabled === true && hasConnectedAgent()}>
-                <div class="mb-4 mx-auto max-w-md rounded-md border border-green-200 bg-green-50 p-3 text-left dark:border-green-800 dark:bg-green-900">
+                <div class="mb-4 mx-auto max-w-md rounded-md border border-green-200 bg-green-50 p-3 text-left dark:border-green-800 dark:bg-green-900/25">
                   <div class="flex items-center gap-2">
                     <svg
-                      class="w-4 h-4 text-green-500 dark:text-green-400 flex-shrink-0"
+                      class="w-4 h-4 text-green-500 dark:text-green-400 shrink-0"
                       fill="none"
                       viewBox="0 0 24 24"
                       stroke="currentColor"
@@ -728,9 +728,9 @@ export const DiscoveryTab: Component<DiscoveryTabProps> = (props) => {
           {(d) => (
             <div class="space-y-4">
               <Show when={isStaleDiscovery()}>
-                <div class="rounded border border-amber-200 bg-amber-50/80 p-3 shadow-sm dark:border-amber-800/50 dark:bg-amber-900/20">
+                <div class="rounded-sm border border-amber-200 bg-amber-50/80 p-3 shadow-xs dark:border-amber-800/50 dark:bg-amber-900/20">
                   <div class="flex items-start gap-2">
-                    <TriangleAlertIcon class="mt-0.5 h-4 w-4 flex-shrink-0 text-amber-600 dark:text-amber-400" />
+                    <TriangleAlertIcon class="mt-0.5 h-4 w-4 shrink-0 text-amber-600 dark:text-amber-400" />
                     <p class="text-xs text-amber-800 dark:text-amber-200">
                       This was discovered by an earlier version of Pulse. Re-run discovery for
                       improved identification and access details.
@@ -781,11 +781,11 @@ export const DiscoveryTab: Component<DiscoveryTabProps> = (props) => {
                       ("Last run: X ago") whenever it's rendered; only repeat it
                       here when that block is absent. */}
                   <Show when={d().updated_at && !showManualRunAction()}>
-                    <span class="rounded border border-border bg-surface-alt px-2 py-0.5">
+                    <span class="rounded-sm border border-border bg-surface-alt px-2 py-0.5">
                       Last observed {formatDiscoveryAge(d().updated_at)}
                     </span>
                   </Show>
-                  <span class="rounded border border-border bg-surface-alt px-2 py-0.5">
+                  <span class="rounded-sm border border-border bg-surface-alt px-2 py-0.5">
                     Available to Pulse Assistant
                   </span>
                 </div>
@@ -863,7 +863,7 @@ export const DiscoveryTab: Component<DiscoveryTabProps> = (props) => {
 
               {/* CLI Access */}
               <Show when={d().cli_access}>
-                <div class="rounded border border-border p-3 shadow-sm">
+                <div class="rounded-sm border border-border p-3 shadow-xs">
                   <div class="mb-2 flex items-center gap-1.5 text-[11px] font-medium uppercase tracking-wide text-base-content">
                     <span>CLI Access</span>
                     <DiscoveryProvenanceMarker showLabel={false} />
@@ -899,7 +899,7 @@ export const DiscoveryTab: Component<DiscoveryTabProps> = (props) => {
                   d().log_paths?.length > 0
                 }
               >
-                <div class="rounded border border-border p-3 shadow-sm">
+                <div class="rounded-sm border border-border p-3 shadow-xs">
                   <Show when={d().config_paths?.length > 0}>
                     <div class="mb-3">
                       <div class="mb-1 flex items-center gap-1.5 text-[11px] font-medium uppercase tracking-wide text-base-content">
@@ -967,7 +967,7 @@ export const DiscoveryTab: Component<DiscoveryTabProps> = (props) => {
                   Docker resources. The host source is where to actually edit or
                   back up files; the container destination is what the app sees. */}
               <Show when={(d().docker_mounts?.length ?? 0) > 0}>
-                <div class="rounded border border-border p-3 shadow-sm">
+                <div class="rounded-sm border border-border p-3 shadow-xs">
                   <div class="mb-2 flex items-center gap-1.5 text-[11px] font-medium uppercase tracking-wide text-base-content">
                     <span>Bind Mounts</span>
                     <DiscoveryProvenanceMarker showLabel={false} />
@@ -997,7 +997,7 @@ export const DiscoveryTab: Component<DiscoveryTabProps> = (props) => {
 
               {/* Ports */}
               <Show when={d().ports?.length > 0}>
-                <div class="rounded border border-border p-3 shadow-sm">
+                <div class="rounded-sm border border-border p-3 shadow-xs">
                   <div class="mb-2 flex items-center gap-1.5 text-[11px] font-medium uppercase tracking-wide text-base-content">
                     <span>Listening Ports</span>
                     <DiscoveryProvenanceMarker showLabel={false} />
@@ -1028,7 +1028,7 @@ export const DiscoveryTab: Component<DiscoveryTabProps> = (props) => {
 
               {/* Key Facts */}
               <Show when={d().facts?.length > 0}>
-                <div class="rounded border border-border p-3 shadow-sm">
+                <div class="rounded-sm border border-border p-3 shadow-xs">
                   <div class="mb-2 flex items-center gap-1.5 text-[11px] font-medium uppercase tracking-wide text-base-content">
                     <span>Discovered Facts</span>
                     <DiscoveryProvenanceMarker showLabel={false} />
@@ -1069,7 +1069,7 @@ export const DiscoveryTab: Component<DiscoveryTabProps> = (props) => {
               </Show>
 
               {/* User Notes */}
-              <div class="rounded border border-border p-3 shadow-sm">
+              <div class="rounded-sm border border-border p-3 shadow-xs">
                 <div class="flex items-center justify-between mb-2">
                   <div class="text-[11px] font-medium uppercase tracking-wide text-base-content">
                     Your Notes
@@ -1104,7 +1104,7 @@ export const DiscoveryTab: Component<DiscoveryTabProps> = (props) => {
                       value={notesText()}
                       onInput={(e) => setNotesText(e.currentTarget.value)}
                       placeholder="Add notes about this resource (API tokens, passwords, important info)..."
-                      class="w-full h-24 px-2 py-1.5 text-xs border border-border rounded bg-surface text-base-content focus:outline-none focus:ring-1 focus:ring-blue-500"
+                      class="w-full h-24 px-2 py-1.5 text-xs border border-border rounded-sm bg-surface text-base-content focus:outline-hidden focus:ring-1 focus:ring-blue-500"
                     />
                     <Show when={saveError()}>
                       <p
@@ -1118,13 +1118,13 @@ export const DiscoveryTab: Component<DiscoveryTabProps> = (props) => {
                     <div class="flex gap-2">
                       <button
                         onClick={handleSaveNotes}
-                        class="px-3 py-1 bg-blue-600 text-white text-xs rounded hover:bg-blue-700 transition-colors"
+                        class="px-3 py-1 bg-blue-600 text-white text-xs rounded-sm hover:bg-blue-700 transition-colors"
                       >
                         Save
                       </button>
                       <button
                         onClick={() => setEditingNotes(false)}
-                        class="px-3 py-1 bg-surface-hover text-base-content text-xs rounded hover:bg-slate-300 transition-colors"
+                        class="px-3 py-1 bg-surface-hover text-base-content text-xs rounded-sm hover:bg-slate-300 transition-colors"
                       >
                         Cancel
                       </button>
@@ -1135,7 +1135,7 @@ export const DiscoveryTab: Component<DiscoveryTabProps> = (props) => {
 
               {/* Analysis reasoning (collapsible) */}
               <Show when={d().ai_reasoning}>
-                <details class="rounded border shadow-sm">
+                <details class="rounded-sm border shadow-xs">
                   <summary class="p-3 text-[11px] font-medium uppercase tracking-wide text-base-content cursor-pointer hover:bg-surface-hover">
                     {DISCOVERY_ANALYSIS_REASONING_LABEL}
                   </summary>
@@ -1149,7 +1149,7 @@ export const DiscoveryTab: Component<DiscoveryTabProps> = (props) => {
               <Show
                 when={d().raw_command_output && Object.keys(d().raw_command_output!).length > 0}
               >
-                <details class="rounded border shadow-sm">
+                <details class="rounded-sm border shadow-xs">
                   <summary class="p-3 text-[11px] font-medium uppercase tracking-wide text-base-content cursor-pointer hover:bg-surface-hover">
                     Scan Details ({Object.keys(d().raw_command_output!).length} commands)
                   </summary>
@@ -1158,7 +1158,7 @@ export const DiscoveryTab: Component<DiscoveryTabProps> = (props) => {
                       {([cmdName, output]) => (
                         <div>
                           <div class="text-xs font-medium text-base-content mb-1">{cmdName}</div>
-                          <pre class="text-[10px] bg-surface-alt rounded p-2 overflow-x-auto text-muted max-h-32 overflow-y-auto">
+                          <pre class="text-[10px] bg-surface-alt rounded-sm p-2 overflow-x-auto text-muted max-h-32 overflow-y-auto">
                             {output || '(no output)'}
                           </pre>
                         </div>
@@ -1192,7 +1192,7 @@ export const DiscoveryTab: Component<DiscoveryTabProps> = (props) => {
                   <button
                     onClick={() => handleTriggerDiscovery(true)}
                     disabled={isScanning() || !canTriggerDiscovery()}
-                    class="px-3 py-1.5 bg-surface-hover text-base-content text-xs rounded hover:bg-surface-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center gap-1.5"
+                    class="px-3 py-1.5 bg-surface-hover text-base-content text-xs rounded-sm hover:bg-surface-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center gap-1.5"
                   >
                     <Show
                       when={isScanning()}
diff --git a/frontend-modern/src/components/Docker/SwarmServicesDrawer.tsx b/frontend-modern/src/components/Docker/SwarmServicesDrawer.tsx
index c76f7e8842..911d4ebea3 100644
--- a/frontend-modern/src/components/Docker/SwarmServicesDrawer.tsx
+++ b/frontend-modern/src/components/Docker/SwarmServicesDrawer.tsx
@@ -199,12 +199,12 @@ export const SwarmServicesDrawer: Component<{ cluster: string; swarm?: SwarmInfo
           </div>
 
           <div class="flex flex-wrap items-center gap-2">
-            <div class="w-[12rem]">
+            <div class="w-48">
               <SearchInput
                 value={search}
                 onChange={setSearch}
                 placeholder={drawerPresentation.searchPlaceholder}
-                inputClass="py-1 text-xs font-medium shadow-sm"
+                inputClass="py-1 text-xs font-medium shadow-xs"
                 typeToSearch
                 clearOnEscape
               />
@@ -227,17 +227,17 @@ export const SwarmServicesDrawer: Component<{ cluster: string; swarm?: SwarmInfo
         >
           <div class="mt-2 flex flex-wrap gap-2 text-[11px]">
             <Show when={asTrimmedString(swarm()?.nodeRole)}>
-              <span class="inline-flex items-center rounded bg-surface-alt px-2 py-0.5 text-base-content">
+              <span class="inline-flex items-center rounded-sm bg-surface-alt px-2 py-0.5 text-base-content">
                 {formatSwarmRoleLabel(asTrimmedString(swarm()?.nodeRole))}
               </span>
             </Show>
             <Show when={asTrimmedString(swarm()?.localState)}>
-              <span class="inline-flex items-center rounded bg-surface-alt px-2 py-0.5 text-base-content">
+              <span class="inline-flex items-center rounded-sm bg-surface-alt px-2 py-0.5 text-base-content">
                 {formatSwarmStateLabel(asTrimmedString(swarm()?.localState))}
               </span>
             </Show>
             <Show when={typeof swarm()?.controlAvailable === 'boolean'}>
-              <span class="inline-flex items-center rounded bg-surface-alt px-2 py-0.5 text-base-content">
+              <span class="inline-flex items-center rounded-sm bg-surface-alt px-2 py-0.5 text-base-content">
                 {formatSwarmControlLabel(swarm()?.controlAvailable)}
               </span>
             </Show>
@@ -245,7 +245,7 @@ export const SwarmServicesDrawer: Component<{ cluster: string; swarm?: SwarmInfo
         </Show>
 
         <Show when={asTrimmedString(swarm()?.error)}>
-          <div class="mt-2 rounded border border-amber-200 bg-amber-50 px-2 py-1.5 text-[10px] text-amber-800 dark:border-amber-700 dark:bg-amber-900 dark:text-amber-200">
+          <div class="mt-2 rounded-sm border border-amber-200 bg-amber-50 px-2 py-1.5 text-[10px] text-amber-800 dark:border-amber-700 dark:bg-amber-900/25 dark:text-amber-200">
             {asTrimmedString(swarm()?.error)}
           </div>
         </Show>
diff --git a/frontend-modern/src/components/ErrorBoundary.tsx b/frontend-modern/src/components/ErrorBoundary.tsx
index 739d4b8b36..05861653b0 100644
--- a/frontend-modern/src/components/ErrorBoundary.tsx
+++ b/frontend-modern/src/components/ErrorBoundary.tsx
@@ -15,7 +15,7 @@ interface ErrorBoundaryProps {
 const DefaultErrorFallback: Component<{ error: Error; reset: () => void }> = (props) => {
   return (
     <div class="min-h-screen flex items-center justify-center bg-base p-4">
-      <div class="max-w-md w-full bg-surface rounded-md shadow-sm p-6">
+      <div class="max-w-md w-full bg-surface rounded-md shadow-xs p-6">
         <div class="flex items-center mb-4">
           <AlertTriangleIcon class="mr-3 h-12 w-12 text-red-500" aria-hidden="true" />
           <div>
@@ -91,7 +91,7 @@ export const RouteErrorBoundary: Component<{ children: JSX.Element }> = (props)
     <ErrorBoundary
       fallback={(_error, reset) => (
         <div class="flex min-h-[60vh] items-center justify-center p-4">
-          <div class="max-w-md w-full bg-surface rounded-md shadow-sm p-6">
+          <div class="max-w-md w-full bg-surface rounded-md shadow-xs p-6">
             <div class="flex items-center mb-4">
               <AlertTriangleIcon class="mr-3 h-10 w-10 text-red-500" aria-hidden="true" />
               <SectionHeader
diff --git a/frontend-modern/src/components/GitHubStarBanner.tsx b/frontend-modern/src/components/GitHubStarBanner.tsx
index b58ec934e3..b189f194f2 100644
--- a/frontend-modern/src/components/GitHubStarBanner.tsx
+++ b/frontend-modern/src/components/GitHubStarBanner.tsx
@@ -108,7 +108,7 @@ export function GitHubStarBanner() {
   return (
     <Show when={showPrompt()}>
       <section
-        class="fixed left-4 right-20 bottom-[var(--pulse-mobile-nav-height)] z-30 max-w-sm overflow-hidden rounded-lg border border-border bg-surface text-base-content shadow-lg md:right-auto md:bottom-4"
+        class="fixed left-4 right-20 bottom-(--pulse-mobile-nav-height) z-30 max-w-sm overflow-hidden rounded-lg border border-border bg-surface text-base-content shadow-lg md:right-auto md:bottom-4"
         aria-labelledby="github-star-title"
         aria-live="polite"
       >
diff --git a/frontend-modern/src/components/Infrastructure/AvailabilityProbeStatusCard.tsx b/frontend-modern/src/components/Infrastructure/AvailabilityProbeStatusCard.tsx
index 9be3448cec..d4785c8a47 100644
--- a/frontend-modern/src/components/Infrastructure/AvailabilityProbeStatusCard.tsx
+++ b/frontend-modern/src/components/Infrastructure/AvailabilityProbeStatusCard.tsx
@@ -152,13 +152,13 @@ export function AvailabilityProbeStatusCard(props: AvailabilityProbeStatusCardPr
     <InfoCardFrame data-testid="availability-probe-status">
       <div class="flex items-center justify-between gap-2 mb-2">
         <div class="flex min-w-0 items-center gap-1.5">
-          <Activity class="h-3.5 w-3.5 text-base-content/60" aria-hidden="true" />
+          <Activity class="h-3.5 w-3.5" aria-hidden="true" />
           <h3 class="truncate text-[11px] font-medium uppercase tracking-wide text-base-content">
             Availability
           </h3>
         </div>
         <span
-          class="shrink-0 rounded px-1.5 py-0.5 text-[10px] font-semibold"
+          class="shrink-0 rounded-sm px-1.5 py-0.5 text-[10px] font-semibold"
           classList={{
             'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300':
               isFreshUp(),
@@ -215,7 +215,7 @@ export function AvailabilityProbeStatusCard(props: AvailabilityProbeStatusCardPr
             </div>
             <For each={props.availability.locations}>
               {(location) => (
-                <div class="flex items-start justify-between gap-3 rounded bg-base-200/60 px-2 py-1.5">
+                <div class="flex items-start justify-between gap-3 rounded-sm bg-base-200/60 px-2 py-1.5">
                   <div class="min-w-0">
                     <div
                       class="truncate font-medium text-base-content"
@@ -253,11 +253,7 @@ export function AvailabilityProbeStatusCard(props: AvailabilityProbeStatusCardPr
           valueTitle={targetAddr()}
         />
         <Show when={lastChecked()}>
-          <InfoCardKeyValueRow
-            label="Checked"
-            value={lastChecked()}
-            valueClass="text-base-content/70"
-          />
+          <InfoCardKeyValueRow label="Checked" value={lastChecked()} valueClass="" />
         </Show>
         <InfoCardKeyValueRow
           label="Freshness"
diff --git a/frontend-modern/src/components/Infrastructure/ClusterDeployBanner.tsx b/frontend-modern/src/components/Infrastructure/ClusterDeployBanner.tsx
index 71f8635fa5..6f9df6aa52 100644
--- a/frontend-modern/src/components/Infrastructure/ClusterDeployBanner.tsx
+++ b/frontend-modern/src/components/Infrastructure/ClusterDeployBanner.tsx
@@ -62,7 +62,7 @@ export const ClusterDeployBanner: Component<ClusterDeployBannerProps> = (props)
               e.stopPropagation();
               props.onDeploy(info().cluster, info().cluster);
             }}
-            class="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] font-medium text-blue-700 bg-blue-100 hover:bg-blue-200 dark:text-blue-300 dark:bg-blue-900 dark:hover:bg-blue-800 transition-colors"
+            class="inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-[10px] font-medium text-blue-700 bg-blue-100 hover:bg-blue-200 dark:text-blue-300 dark:bg-blue-900/25 dark:hover:bg-blue-800 transition-colors"
           >
             <RocketIcon class="w-2.5 h-2.5" />
             Review & Deploy
diff --git a/frontend-modern/src/components/Infrastructure/MaintenanceVerificationSection.tsx b/frontend-modern/src/components/Infrastructure/MaintenanceVerificationSection.tsx
index 3fa077aad1..9d3cc78dcb 100644
--- a/frontend-modern/src/components/Infrastructure/MaintenanceVerificationSection.tsx
+++ b/frontend-modern/src/components/Infrastructure/MaintenanceVerificationSection.tsx
@@ -42,9 +42,9 @@ const STATUS_LABELS: Record<MaintenanceVerificationStatus, string> = {
 
 const STATUS_CLASSES: Record<MaintenanceVerificationStatus, string> = {
   pending: 'bg-surface-hover text-base-content',
-  healthy: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300',
-  needs_review: 'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300',
-  failed_verification: 'bg-rose-100 text-rose-700 dark:bg-rose-900 dark:text-rose-300',
+  healthy: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/25 dark:text-emerald-300',
+  needs_review: 'bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300',
+  failed_verification: 'bg-rose-100 text-rose-700 dark:bg-rose-900/25 dark:text-rose-300',
 };
 
 export const MaintenanceVerificationSection: Component<MaintenanceVerificationSectionProps> = (
@@ -111,7 +111,7 @@ export const MaintenanceVerificationSection: Component<MaintenanceVerificationSe
 
   return (
     <section
-      class="rounded border border-border bg-surface p-3 text-sm"
+      class="rounded-sm border border-border bg-surface p-3 text-sm"
       data-testid="maintenance-verification-section"
       aria-labelledby="maintenance-verification-heading"
     >
@@ -127,7 +127,7 @@ export const MaintenanceVerificationSection: Component<MaintenanceVerificationSe
         </div>
         <button
           type="button"
-          class="rounded border border-border bg-surface-hover px-2 py-1 text-xs font-medium hover:bg-surface"
+          class="rounded-sm border border-border bg-surface-hover px-2 py-1 text-xs font-medium hover:bg-surface"
           disabled={rerunning() || !props.resourceId}
           onClick={handleRerun}
           data-testid="maintenance-verification-rerun"
@@ -139,7 +139,7 @@ export const MaintenanceVerificationSection: Component<MaintenanceVerificationSe
       <Show
         when={hasReports()}
         fallback={
-          <div class="mt-3 rounded border border-dashed border-border bg-surface-hover p-3 text-xs text-muted">
+          <div class="mt-3 rounded-sm border border-dashed border-border bg-surface-hover p-3 text-xs text-muted">
             No verification reports yet. A report is written automatically the next time this
             resource exits a maintenance window.
           </div>
@@ -149,13 +149,13 @@ export const MaintenanceVerificationSection: Component<MaintenanceVerificationSe
           <For each={reports()}>
             {(report) => (
               <li
-                class="rounded border border-border bg-surface-hover p-2"
+                class="rounded-sm border border-border bg-surface-hover p-2"
                 data-testid="maintenance-verification-report"
               >
                 <div class="flex flex-wrap items-center justify-between gap-2">
                   <div class="flex flex-wrap items-center gap-2">
                     <span
-                      class={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${STATUS_CLASSES[report.status]}`}
+                      class={`inline-flex items-center rounded-sm px-1.5 py-0.5 text-[10px] font-medium ${STATUS_CLASSES[report.status]}`}
                       data-testid={`maintenance-verification-status-${report.status}`}
                     >
                       {STATUS_LABELS[report.status]}
@@ -168,7 +168,7 @@ export const MaintenanceVerificationSection: Component<MaintenanceVerificationSe
                   <Show when={!report.userOutcome}>
                     <button
                       type="button"
-                      class="rounded border border-border bg-surface px-2 py-1 text-[11px] font-medium hover:bg-surface-hover"
+                      class="rounded-sm border border-border bg-surface px-2 py-1 text-[11px] font-medium hover:bg-surface-hover"
                       disabled={reviewingId() === report.id}
                       onClick={() => handleReview(report)}
                       data-testid="maintenance-verification-review"
diff --git a/frontend-modern/src/components/Infrastructure/ReportMergeModal.tsx b/frontend-modern/src/components/Infrastructure/ReportMergeModal.tsx
index 64b459d01a..d162113609 100644
--- a/frontend-modern/src/components/Infrastructure/ReportMergeModal.tsx
+++ b/frontend-modern/src/components/Infrastructure/ReportMergeModal.tsx
@@ -28,7 +28,7 @@ export const ReportMergeModal: Component<ReportMergeModalProps> = (props) => {
         label: badge?.label || getSourcePlatformLabel(source),
         classes:
           badge?.classes ||
-          'inline-flex items-center rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-surface-alt text-base-content',
+          'inline-flex items-center rounded-sm px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-surface-alt text-base-content',
       };
     }),
   );
@@ -125,7 +125,7 @@ export const ReportMergeModal: Component<ReportMergeModalProps> = (props) => {
           value={notes()}
           onInput={(event) => setNotes(event.currentTarget.value)}
           rows={3}
-          textareaBaseClass="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+          textareaBaseClass="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-1 focus:ring-blue-500"
           placeholder="Example: Agent running on a different host with same hostname."
         />
 
@@ -133,7 +133,7 @@ export const ReportMergeModal: Component<ReportMergeModalProps> = (props) => {
           <div
             role="alert"
             aria-live="assertive"
-            class="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700 dark:border-red-900 dark:bg-red-900 dark:text-red-200"
+            class="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700 dark:border-red-900/25 dark:bg-red-900/25 dark:text-red-200"
           >
             {error()}
           </div>
diff --git a/frontend-modern/src/components/Infrastructure/ResourceActionHistory.tsx b/frontend-modern/src/components/Infrastructure/ResourceActionHistory.tsx
index a14fc47b69..150159d7c4 100644
--- a/frontend-modern/src/components/Infrastructure/ResourceActionHistory.tsx
+++ b/frontend-modern/src/components/Infrastructure/ResourceActionHistory.tsx
@@ -32,7 +32,7 @@ const ActionHistoryRow: Component<{ audit: ActionAuditRecord }> = (props) => {
   const compensation = () => props.audit.result?.actionResultV2?.compensation;
 
   return (
-    <div class="rounded border border-border bg-surface-hover px-2 py-1.5 text-[10px]">
+    <div class="rounded-sm border border-border bg-surface-hover px-2 py-1.5 text-[10px]">
       <div class="flex items-start justify-between gap-3">
         <div class="min-w-0">
           <div class="font-medium text-base-content">
@@ -46,7 +46,7 @@ const ActionHistoryRow: Component<{ audit: ActionAuditRecord }> = (props) => {
             </Show>
           </div>
         </div>
-        <span class={`shrink-0 rounded border px-1.5 py-0.5 font-medium ${state().className}`}>
+        <span class={`shrink-0 rounded-sm border px-1.5 py-0.5 font-medium ${state().className}`}>
           {state().label}
         </span>
       </div>
@@ -69,7 +69,7 @@ const ActionHistoryRow: Component<{ audit: ActionAuditRecord }> = (props) => {
           <InfoCardKeyValueRow
             label="Intent"
             value={preflight()?.intendedChange}
-            valueClass="break-words"
+            valueClass="wrap-break-word"
           />
         </Show>
         <Show when={(preflight()?.safetyChecks || []).length > 0}>
@@ -86,7 +86,7 @@ const ActionHistoryRow: Component<{ audit: ActionAuditRecord }> = (props) => {
           {(() => {
             const presentation = resultPresentation()!;
             return (
-              <div class={`rounded border px-2 py-1 text-[10px] ${presentation.className}`}>
+              <div class={`rounded-sm border px-2 py-1 text-[10px] ${presentation.className}`}>
                 <div class="font-medium">{presentation.label}</div>
                 <Show when={presentation.kind === 'refusal'}>
                   <div class="mt-0.5 font-medium">Refused before dispatch</div>
@@ -110,14 +110,14 @@ const ActionHistoryRow: Component<{ audit: ActionAuditRecord }> = (props) => {
         <Show when={apt()?.facts.length}>
           <div
             data-testid="resource-apt-action-facts"
-            class="grid gap-1 rounded border border-border bg-surface px-2 py-1.5 sm:grid-cols-2"
+            class="grid gap-1 rounded-sm border border-border bg-surface px-2 py-1.5 sm:grid-cols-2"
           >
             <For each={apt()?.facts ?? []}>
               {(fact) => (
                 <InfoCardKeyValueRow
                   label={fact.label}
                   value={fact.value}
-                  valueClass="break-words"
+                  valueClass="wrap-break-word"
                 />
               )}
             </For>
@@ -127,7 +127,7 @@ const ActionHistoryRow: Component<{ audit: ActionAuditRecord }> = (props) => {
           {(() => {
             const outcome = verificationOutcome()!;
             return (
-              <div class={`rounded border px-2 py-1 text-[10px] ${outcome.className}`}>
+              <div class={`rounded-sm border px-2 py-1 text-[10px] ${outcome.className}`}>
                 <div class="font-medium">{outcome.label}</div>
                 <div class="mt-0.5 opacity-80">{outcome.detail}</div>
                 <Show when={outcome.evidenceSummary}>
@@ -144,7 +144,7 @@ const ActionHistoryRow: Component<{ audit: ActionAuditRecord }> = (props) => {
           {(recovery) => (
             <div
               data-testid="resource-action-recovery-truth"
-              class="rounded border border-border bg-surface px-2 py-1 text-[10px] text-base-content"
+              class="rounded-sm border border-border bg-surface px-2 py-1 text-[10px] text-base-content"
             >
               <div class="font-medium">
                 Recovery: {formatActionCapabilityLabel(recovery().status)}
@@ -162,7 +162,7 @@ const ActionHistoryRow: Component<{ audit: ActionAuditRecord }> = (props) => {
           {(presentation) => (
             <div
               data-testid="resource-apt-action-next-step"
-              class="rounded border border-blue-200 bg-blue-50 px-2 py-1 text-[10px] text-blue-900 dark:border-blue-800 dark:bg-blue-950/40 dark:text-blue-200"
+              class="rounded-sm border border-blue-200 bg-blue-50 px-2 py-1 text-[10px] text-blue-900/25 dark:border-blue-800 dark:bg-blue-950/40 dark:text-blue-200"
             >
               <span class="font-medium">Next: </span>
               {presentation().nextStep}
@@ -176,7 +176,7 @@ const ActionHistoryRow: Component<{ audit: ActionAuditRecord }> = (props) => {
               ? 'border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-300'
               : 'border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-300';
             return (
-              <div class={`rounded border px-2 py-1 text-[10px] ${toneClass}`}>
+              <div class={`rounded-sm border px-2 py-1 text-[10px] ${toneClass}`}>
                 <div class="font-medium">
                   {v.success
                     ? 'Legacy check passed (source unclassified)'
@@ -186,7 +186,7 @@ const ActionHistoryRow: Component<{ audit: ActionAuditRecord }> = (props) => {
                   <div class="mt-0.5 font-mono text-[10px] opacity-80">{v.command}</div>
                 </Show>
                 <Show when={v.output}>
-                  <div class="mt-0.5 whitespace-pre-wrap break-words">{v.output}</div>
+                  <div class="mt-0.5 whitespace-pre-wrap wrap-break-word">{v.output}</div>
                 </Show>
                 <Show when={v.note}>
                   <div class="mt-0.5 italic">{v.note}</div>
@@ -215,7 +215,7 @@ export const ResourceActionHistory: Component<ResourceActionHistoryProps> = (pro
     </div>
 
     <Show when={props.error}>
-      <div class="mt-2 rounded border border-amber-200 bg-amber-50 px-2 py-1.5 text-[10px] text-amber-700 dark:border-amber-700 dark:bg-amber-900 dark:text-amber-200">
+      <div class="mt-2 rounded-sm border border-amber-200 bg-amber-50 px-2 py-1.5 text-[10px] text-amber-700 dark:border-amber-700 dark:bg-amber-900/25 dark:text-amber-200">
         <div class="flex items-start justify-between gap-2">
           <span>{props.error}</span>
           <button
@@ -232,7 +232,7 @@ export const ResourceActionHistory: Component<ResourceActionHistoryProps> = (pro
     <Show
       when={props.audits.length > 0}
       fallback={
-        <div class="mt-3 rounded border border-dashed border-border bg-surface-hover px-2 py-2 text-[10px] text-muted">
+        <div class="mt-3 rounded-sm border border-dashed border-border bg-surface-hover px-2 py-2 text-[10px] text-muted">
           No actions yet.
         </div>
       }
diff --git a/frontend-modern/src/components/Infrastructure/ResourceCorrelationSummary.tsx b/frontend-modern/src/components/Infrastructure/ResourceCorrelationSummary.tsx
index 39d74a5995..4ce01065d8 100644
--- a/frontend-modern/src/components/Infrastructure/ResourceCorrelationSummary.tsx
+++ b/frontend-modern/src/components/Infrastructure/ResourceCorrelationSummary.tsx
@@ -92,36 +92,36 @@ export const ResourceCorrelationSummary: Component<ResourceCorrelationSummaryPro
                       : '';
 
                   return (
-                    <div class="rounded bg-surface px-2 py-1">
+                    <div class="rounded-sm bg-surface px-2 py-1">
                       <div class="flex flex-wrap items-center gap-1 text-[10px] text-base-content">
                         {sourceHref ? (
                           <a
-                            class="inline-flex items-center rounded bg-surface-alt px-1.5 py-0.5 text-[10px] text-blue-700 hover:underline dark:text-blue-300"
+                            class="inline-flex items-center rounded-sm bg-surface-alt px-1.5 py-0.5 text-[10px] text-blue-700 hover:underline dark:text-blue-300"
                             href={sourceHref}
                             aria-label={`Open source resource ${sourceLabel} in Infrastructure`}
                           >
                             {sourceLabel}
                           </a>
                         ) : (
-                          <span class="inline-flex items-center rounded bg-surface-alt px-1.5 py-0.5 text-[10px]">
+                          <span class="inline-flex items-center rounded-sm bg-surface-alt px-1.5 py-0.5 text-[10px]">
                             {sourceLabel}
                           </span>
                         )}
                         <span class="text-muted">→</span>
                         {targetHref ? (
                           <a
-                            class="inline-flex items-center rounded bg-surface-alt px-1.5 py-0.5 text-[10px] text-blue-700 hover:underline dark:text-blue-300"
+                            class="inline-flex items-center rounded-sm bg-surface-alt px-1.5 py-0.5 text-[10px] text-blue-700 hover:underline dark:text-blue-300"
                             href={targetHref}
                             aria-label={`Open target resource ${targetLabel} in Infrastructure`}
                           >
                             {targetLabel}
                           </a>
                         ) : (
-                          <span class="inline-flex items-center rounded bg-surface-alt px-1.5 py-0.5 text-[10px]">
+                          <span class="inline-flex items-center rounded-sm bg-surface-alt px-1.5 py-0.5 text-[10px]">
                             {targetLabel}
                           </span>
                         )}
-                        <span class="inline-flex items-center rounded bg-surface-alt px-1.5 py-0.5 text-[9px] text-muted">
+                        <span class="inline-flex items-center rounded-sm bg-surface-alt px-1.5 py-0.5 text-[9px] text-muted">
                           {typeLabel}
                         </span>
                       </div>
@@ -153,14 +153,14 @@ export const ResourceCorrelationSummary: Component<ResourceCorrelationSummaryPro
                   const href = buildResourceHref(dependency);
                   return href ? (
                     <a
-                      class="inline-flex items-center rounded bg-surface-alt px-1.5 py-0.5 text-[10px] text-blue-700 hover:underline dark:text-blue-300"
+                      class="inline-flex items-center rounded-sm bg-surface-alt px-1.5 py-0.5 text-[10px] text-blue-700 hover:underline dark:text-blue-300"
                       href={href}
                       aria-label={`Open dependency resource ${label} in Infrastructure`}
                     >
                       {label}
                     </a>
                   ) : (
-                    <span class="inline-flex items-center rounded bg-surface-alt px-1.5 py-0.5 text-[10px]">
+                    <span class="inline-flex items-center rounded-sm bg-surface-alt px-1.5 py-0.5 text-[10px]">
                       {label}
                     </span>
                   );
@@ -180,14 +180,14 @@ export const ResourceCorrelationSummary: Component<ResourceCorrelationSummaryPro
                   const href = buildResourceHref(dependent);
                   return href ? (
                     <a
-                      class="inline-flex items-center rounded bg-surface-alt px-1.5 py-0.5 text-[10px] text-blue-700 hover:underline dark:text-blue-300"
+                      class="inline-flex items-center rounded-sm bg-surface-alt px-1.5 py-0.5 text-[10px] text-blue-700 hover:underline dark:text-blue-300"
                       href={href}
                       aria-label={`Open dependent resource ${label} in Infrastructure`}
                     >
                       {label}
                     </a>
                   ) : (
-                    <span class="inline-flex items-center rounded bg-surface-alt px-1.5 py-0.5 text-[10px]">
+                    <span class="inline-flex items-center rounded-sm bg-surface-alt px-1.5 py-0.5 text-[10px]">
                       {label}
                     </span>
                   );
@@ -218,36 +218,36 @@ export const ResourceCorrelationSummary: Component<ResourceCorrelationSummaryPro
                         })
                       : '';
                   return (
-                    <div class="rounded bg-surface px-2 py-1" title={headline}>
+                    <div class="rounded-sm bg-surface px-2 py-1" title={headline}>
                       <div class="flex flex-wrap items-center gap-1 text-[10px] text-base-content">
                         {sourceHref ? (
                           <a
-                            class="inline-flex items-center rounded bg-surface-alt px-1.5 py-0.5 text-[10px] text-blue-700 hover:underline dark:text-blue-300"
+                            class="inline-flex items-center rounded-sm bg-surface-alt px-1.5 py-0.5 text-[10px] text-blue-700 hover:underline dark:text-blue-300"
                             href={sourceHref}
                             aria-label={`Open source resource ${sourceLabel} in Infrastructure`}
                           >
                             {sourceLabel}
                           </a>
                         ) : (
-                          <span class="inline-flex items-center rounded bg-surface-alt px-1.5 py-0.5 text-[10px]">
+                          <span class="inline-flex items-center rounded-sm bg-surface-alt px-1.5 py-0.5 text-[10px]">
                             {sourceLabel}
                           </span>
                         )}
                         <span class="text-muted">→</span>
                         {targetHref ? (
                           <a
-                            class="inline-flex items-center rounded bg-surface-alt px-1.5 py-0.5 text-[10px] text-blue-700 hover:underline dark:text-blue-300"
+                            class="inline-flex items-center rounded-sm bg-surface-alt px-1.5 py-0.5 text-[10px] text-blue-700 hover:underline dark:text-blue-300"
                             href={targetHref}
                             aria-label={`Open target resource ${targetLabel} in Infrastructure`}
                           >
                             {targetLabel}
                           </a>
                         ) : (
-                          <span class="inline-flex items-center rounded bg-surface-alt px-1.5 py-0.5 text-[10px]">
+                          <span class="inline-flex items-center rounded-sm bg-surface-alt px-1.5 py-0.5 text-[10px]">
                             {targetLabel}
                           </span>
                         )}
-                        <span class="inline-flex items-center rounded bg-surface-alt px-1.5 py-0.5 text-[9px] text-muted">
+                        <span class="inline-flex items-center rounded-sm bg-surface-alt px-1.5 py-0.5 text-[9px] text-muted">
                           {patternLabel}
                         </span>
                       </div>
diff --git a/frontend-modern/src/components/Infrastructure/ResourceDetailDrawer.tsx b/frontend-modern/src/components/Infrastructure/ResourceDetailDrawer.tsx
index 0d3cba03bd..d259e3f4a9 100644
--- a/frontend-modern/src/components/Infrastructure/ResourceDetailDrawer.tsx
+++ b/frontend-modern/src/components/Infrastructure/ResourceDetailDrawer.tsx
@@ -43,7 +43,7 @@ interface ResourceDetailDrawerProps {
 }
 
 const TabAvailabilityNotice: Component<{ message: string }> = (props) => (
-  <div class="rounded border border-dashed border-border bg-surface-hover p-4 text-sm text-muted">
+  <div class="rounded-sm border border-dashed border-border bg-surface-hover p-4 text-sm text-muted">
     {props.message}
   </div>
 );
@@ -84,7 +84,7 @@ const DrawerContent: Component<ResourceDetailDrawerProps> = (props) => {
         />
         <h2
           id={headingId()}
-          class="text-sm font-semibold text-base-content min-w-0 [overflow-wrap:anywhere] m-0"
+          class="text-sm font-semibold text-base-content min-w-0 wrap-anywhere m-0"
           title={drawer.displayName()}
         >
           {drawer.displayName()}
@@ -101,7 +101,7 @@ const DrawerContent: Component<ResourceDetailDrawerProps> = (props) => {
         <Show when={drawer.healthIssue()}>
           {(issue) => (
             <span
-              class="inline-flex max-w-full items-center rounded bg-amber-100 px-1.5 py-0.5 text-[10px] font-medium text-amber-700 dark:bg-amber-900 dark:text-amber-300"
+              class="inline-flex max-w-full items-center rounded-sm bg-amber-100 px-1.5 py-0.5 text-[10px] font-medium text-amber-700 dark:bg-amber-900/25 dark:text-amber-300"
               title={issue().title}
             >
               {issue().compactLabel}
diff --git a/frontend-modern/src/components/Infrastructure/ResourceDetailDrawerOverviewTab.tsx b/frontend-modern/src/components/Infrastructure/ResourceDetailDrawerOverviewTab.tsx
index d69e02c2de..b4db3fa104 100644
--- a/frontend-modern/src/components/Infrastructure/ResourceDetailDrawerOverviewTab.tsx
+++ b/frontend-modern/src/components/Infrastructure/ResourceDetailDrawerOverviewTab.tsx
@@ -149,7 +149,7 @@ const HostDetailsDisclosure: Component<{
       class={props.class}
       contentClass={
         props.contentClass ??
-        'mt-3 flex flex-wrap gap-3 [&>*]:flex-1 [&>*]:basis-[calc(50%-0.375rem)] [&>*]:min-w-[220px] [&>*]:max-w-full [&>*]:overflow-hidden'
+        'mt-3 flex flex-wrap gap-3 *:flex-1 *:basis-[calc(50%-0.375rem)] *:min-w-[220px] *:max-w-full *:overflow-hidden'
       }
       dataTestId="resource-host-details-section"
     >
@@ -270,7 +270,7 @@ export const ResourceAccessDisclosure: Component<{
                 <a
                   href={link.href}
                   aria-label={link.ariaLabel}
-                  class="inline-flex items-center rounded border border-blue-200 bg-blue-50 px-2.5 py-1 text-[11px] font-medium text-blue-700 transition-colors hover:bg-blue-100 dark:border-blue-700 dark:bg-blue-900 dark:text-blue-200 dark:hover:bg-blue-900"
+                  class="inline-flex items-center rounded-sm border border-blue-200 bg-blue-50 px-2.5 py-1 text-[11px] font-medium text-blue-700 transition-colors hover:bg-blue-100 dark:border-blue-700 dark:bg-blue-900/25 dark:text-blue-200 dark:hover:bg-blue-900/25"
                 >
                   {link.compactLabel}
                 </a>
@@ -398,7 +398,7 @@ export const ResourceDetailDrawerOverviewTab: Component<ResourceDetailDrawerOver
       </TechnicalDetailsSection>
 
       <Show when={resource.availability || (resource.availabilityChecks?.length ?? 0) > 0}>
-        <div class="flex flex-wrap gap-3 [&>*]:min-w-[240px] [&>*]:flex-1">
+        <div class="flex flex-wrap gap-3 *:min-w-[240px] *:flex-1">
           <AvailabilityProbeStatusCards
             availability={resource.availability}
             checks={resource.availabilityChecks}
@@ -460,7 +460,7 @@ export const ResourceDetailDrawerOverviewTab: Component<ResourceDetailDrawerOver
                   label="Change kind"
                   fieldBaseClass="space-y-1 text-[10px]"
                   labelClass="text-muted"
-                  selectBaseClass="w-full rounded border border-border bg-base px-2 py-1 text-[11px] text-base-content"
+                  selectBaseClass="w-full rounded-sm border border-border bg-base px-2 py-1 text-[11px] text-base-content"
                   value={drawer.timelineKindFilter()}
                   onChange={(event) =>
                     drawer.setTimelineKindFilter(
@@ -476,7 +476,7 @@ export const ResourceDetailDrawerOverviewTab: Component<ResourceDetailDrawerOver
                   label="Source type"
                   fieldBaseClass="space-y-1 text-[10px]"
                   labelClass="text-muted"
-                  selectBaseClass="w-full rounded border border-border bg-base px-2 py-1 text-[11px] text-base-content"
+                  selectBaseClass="w-full rounded-sm border border-border bg-base px-2 py-1 text-[11px] text-base-content"
                   value={drawer.timelineSourceTypeFilter()}
                   onChange={(event) =>
                     drawer.setTimelineSourceTypeFilter(
@@ -492,7 +492,7 @@ export const ResourceDetailDrawerOverviewTab: Component<ResourceDetailDrawerOver
                   label="Source adapter"
                   fieldBaseClass="space-y-1 text-[10px]"
                   labelClass="text-muted"
-                  selectBaseClass="w-full rounded border border-border bg-base px-2 py-1 text-[11px] text-base-content"
+                  selectBaseClass="w-full rounded-sm border border-border bg-base px-2 py-1 text-[11px] text-base-content"
                   value={drawer.timelineSourceAdapterFilter()}
                   onChange={(event) =>
                     drawer.setTimelineSourceAdapterFilter(
@@ -525,7 +525,7 @@ export const ResourceDetailDrawerOverviewTab: Component<ResourceDetailDrawerOver
             </Show>
 
             <Show when={drawer.facetBundleError()}>
-              <div class="mt-2 rounded border border-amber-200 bg-amber-50 px-2 py-1.5 text-[10px] text-amber-700 dark:border-amber-700 dark:bg-amber-900 dark:text-amber-200">
+              <div class="mt-2 rounded-sm border border-amber-200 bg-amber-50 px-2 py-1.5 text-[10px] text-amber-700 dark:border-amber-700 dark:bg-amber-900/25 dark:text-amber-200">
                 <div class="flex items-start justify-between gap-2">
                   <span>{drawer.facetBundleError()}</span>
                   <button
@@ -542,7 +542,7 @@ export const ResourceDetailDrawerOverviewTab: Component<ResourceDetailDrawerOver
             <Show
               when={drawer.sortedResourceTimeline().length > 0}
               fallback={
-                <div class="mt-3 rounded border border-dashed border-border bg-surface-hover px-2 py-2 text-[10px] text-muted">
+                <div class="mt-3 rounded-sm border border-dashed border-border bg-surface-hover px-2 py-2 text-[10px] text-muted">
                   No events yet.
                 </div>
               }
@@ -559,7 +559,7 @@ export const ResourceDetailDrawerOverviewTab: Component<ResourceDetailDrawerOver
                       : null;
 
                     return (
-                      <div class="rounded border border-border bg-surface-hover px-2 py-1.5 text-[10px]">
+                      <div class="rounded-sm border border-border bg-surface-hover px-2 py-1.5 text-[10px]">
                         <div class="flex items-start justify-between gap-3">
                           <div class="min-w-0">
                             <div class="font-medium text-base-content">
@@ -588,28 +588,28 @@ export const ResourceDetailDrawerOverviewTab: Component<ResourceDetailDrawerOver
                             <InfoCardKeyValueRow
                               label="Actor"
                               value={change.actor}
-                              valueClass="break-words"
+                              valueClass="wrap-break-word"
                             />
                           </Show>
                           <Show when={change.from || change.to}>
                             <InfoCardKeyValueRow
                               label="Transition"
                               value={`${change.from || '—'} → ${change.to || '—'}`}
-                              valueClass="break-words"
+                              valueClass="wrap-break-word"
                             />
                           </Show>
                         </div>
                         <Show when={change.reason}>
-                          <div class="mt-1 rounded border border-border bg-base px-2 py-1 text-[10px] text-base-content">
+                          <div class="mt-1 rounded-sm border border-border bg-base px-2 py-1 text-[10px] text-base-content">
                             {change.reason}
                           </div>
                         </Show>
                         <Show when={hasMetadataEntries(change.metadata)}>
-                          <details class="mt-1 rounded border border-border bg-base px-2 py-1">
+                          <details class="mt-1 rounded-sm border border-border bg-base px-2 py-1">
                             <summary class="cursor-pointer list-none text-[10px] font-medium text-muted">
                               Metadata
                             </summary>
-                            <pre class="mt-2 overflow-auto whitespace-pre-wrap break-words text-[10px] text-base-content">
+                            <pre class="mt-2 overflow-auto whitespace-pre-wrap wrap-break-word text-[10px] text-base-content">
                               {JSON.stringify(change.metadata ?? {}, null, 2)}
                             </pre>
                           </details>
@@ -621,7 +621,7 @@ export const ResourceDetailDrawerOverviewTab: Component<ResourceDetailDrawerOver
                               {(relatedResource) => {
                                 const label = drawer.resolveResourceLabel(relatedResource);
                                 return (
-                                  <span class="inline-flex rounded bg-surface px-1.5 py-0.5 text-[10px] text-base-content">
+                                  <span class="inline-flex rounded-sm bg-surface px-1.5 py-0.5 text-[10px] text-base-content">
                                     {label}
                                   </span>
                                 );
@@ -668,7 +668,7 @@ export const ResourceDetailDrawerOverviewTab: Component<ResourceDetailDrawerOver
           >
             <div
               data-testid="resource-support-sections"
-              class="flex flex-wrap gap-3 [&>*]:flex-1 [&>*]:basis-[calc(50%-0.375rem)] [&>*]:min-w-[260px] [&>*]:max-w-full [&>*]:overflow-hidden"
+              class="flex flex-wrap gap-3 *:flex-1 *:basis-[calc(50%-0.375rem)] *:min-w-[260px] *:max-w-full *:overflow-hidden"
             >
               <Show when={drawer.hasTrueNASDetails()}>
                 <TrueNASDetailsDisclosure drawer={drawer} class="h-full" />
@@ -707,7 +707,7 @@ export const ResourceDetailDrawerOverviewTab: Component<ResourceDetailDrawerOver
                   dataTestId="resource-service-details-section"
                 >
                   <Show when={resource.type === 'docker-host'}>
-                    <div class="rounded border border-sky-200 bg-sky-50 p-3 dark:border-sky-700 dark:bg-sky-900">
+                    <div class="rounded-sm border border-sky-200 bg-sky-50 p-3 dark:border-sky-700 dark:bg-sky-900/25">
                       <div class="mb-2 flex items-center justify-between gap-2">
                         <div class="text-[11px] font-medium uppercase tracking-wide text-sky-700 dark:text-sky-300">
                           Docker runtime
@@ -751,7 +751,7 @@ export const ResourceDetailDrawerOverviewTab: Component<ResourceDetailDrawerOver
                                 drawer.dockerHostCommand()?.status
                               }
                             >
-                              <div class="rounded border border-sky-200 bg-surface px-2 py-1.5 text-[10px] dark:border-sky-700">
+                              <div class="rounded-sm border border-sky-200 bg-surface px-2 py-1.5 text-[10px] dark:border-sky-700">
                                 <InfoCardKeyValueRow
                                   label="Action"
                                   value={formatIdentifierLabel(drawer.dockerHostCommand()?.type, {
@@ -790,12 +790,12 @@ export const ResourceDetailDrawerOverviewTab: Component<ResourceDetailDrawerOver
                             </Show>
 
                             <Show when={drawer.dockerActionError()}>
-                              <div class="rounded border border-red-200 bg-red-50 px-2 py-1.5 text-[10px] text-red-700 dark:border-red-700 dark:bg-red-900 dark:text-red-200">
+                              <div class="rounded-sm border border-red-200 bg-red-50 px-2 py-1.5 text-[10px] text-red-700 dark:border-red-700 dark:bg-red-900/25 dark:text-red-200">
                                 {drawer.dockerActionError()}
                               </div>
                             </Show>
                             <Show when={drawer.dockerActionNote()}>
-                              <div class="rounded border border-sky-200 bg-surface px-2 py-1.5 text-[10px] text-base-content dark:border-sky-700">
+                              <div class="rounded-sm border border-sky-200 bg-surface px-2 py-1.5 text-[10px] text-base-content dark:border-sky-700">
                                 {drawer.dockerActionNote()}
                               </div>
                             </Show>
@@ -864,7 +864,7 @@ export const ResourceDetailDrawerOverviewTab: Component<ResourceDetailDrawerOver
                         pbs().connectionHealth,
                       );
                       return (
-                        <div class="rounded border border-indigo-200 bg-indigo-50 p-3 dark:border-indigo-700 dark:bg-indigo-900">
+                        <div class="rounded-sm border border-indigo-200 bg-indigo-50 p-3 dark:border-indigo-700 dark:bg-indigo-900/25">
                           <div class="mb-2 flex items-center justify-between gap-2">
                             <div class="text-[11px] font-medium uppercase tracking-wide text-indigo-700 dark:text-indigo-300">
                               PBS
@@ -903,20 +903,20 @@ export const ResourceDetailDrawerOverviewTab: Component<ResourceDetailDrawerOver
                             <Show when={drawer.showPbsJobDetail()}>
                               <div class="space-y-1.5 border-t border-indigo-200 pt-2 dark:border-indigo-700">
                                 <div class="grid grid-cols-2 gap-2 md:grid-cols-3">
-                                  <div class="rounded border border-indigo-200 bg-surface px-2 py-1.5 dark:border-indigo-700">
+                                  <div class="rounded-sm border border-indigo-200 bg-surface px-2 py-1.5 dark:border-indigo-700">
                                     <div class="text-[10px] text-muted">Datastores</div>
                                     <div class="text-sm font-semibold text-base-content">
                                       {formatInteger(pbs().datastoreCount)}
                                     </div>
                                   </div>
-                                  <div class="rounded border border-indigo-200 bg-surface px-2 py-1.5 dark:border-indigo-700">
+                                  <div class="rounded-sm border border-indigo-200 bg-surface px-2 py-1.5 dark:border-indigo-700">
                                     <div class="text-[10px] text-muted">Jobs</div>
                                     <div class="text-sm font-semibold text-base-content">
                                       {formatInteger(drawer.pbsJobTotal())}
                                     </div>
                                   </div>
                                   <Show when={drawer.pbsActiveTaskCount() > 0}>
-                                    <div class="rounded border border-emerald-200 bg-emerald-50 px-2 py-1.5 dark:border-emerald-700 dark:bg-emerald-950/40">
+                                    <div class="rounded-sm border border-emerald-200 bg-emerald-50 px-2 py-1.5 dark:border-emerald-700 dark:bg-emerald-950/40">
                                       <div class="text-[10px] text-muted">Active</div>
                                       <div class="text-sm font-semibold text-emerald-700 dark:text-emerald-300">
                                         {formatInteger(drawer.pbsActiveTaskCount())}
@@ -927,7 +927,7 @@ export const ResourceDetailDrawerOverviewTab: Component<ResourceDetailDrawerOver
                                 <Show when={drawer.pbsActiveTaskCount() > 0}>
                                   <div
                                     data-testid="pbs-active-tasks"
-                                    class="rounded border border-emerald-200 bg-surface px-2 py-1.5 dark:border-emerald-700"
+                                    class="rounded-sm border border-emerald-200 bg-surface px-2 py-1.5 dark:border-emerald-700"
                                   >
                                     <div class="flex items-center justify-between gap-2">
                                       <span class="text-[10px] font-medium uppercase tracking-wide text-muted">
@@ -977,7 +977,7 @@ export const ResourceDetailDrawerOverviewTab: Component<ResourceDetailDrawerOver
                                 <Show when={pbsJobHealthEvidence().evidenceCount > 0}>
                                   <div
                                     data-testid="pbs-job-health-evidence"
-                                    class="rounded border border-indigo-200 bg-surface px-2 py-1.5 dark:border-indigo-700"
+                                    class="rounded-sm border border-indigo-200 bg-surface px-2 py-1.5 dark:border-indigo-700"
                                   >
                                     <div class="flex flex-wrap items-center justify-between gap-2">
                                       <span class="text-[10px] font-medium uppercase tracking-wide text-muted">
@@ -990,7 +990,7 @@ export const ResourceDetailDrawerOverviewTab: Component<ResourceDetailDrawerOver
                                     <div class="mt-2 space-y-2 border-t border-indigo-200 pt-2 dark:border-indigo-700">
                                       <For each={pbsJobHealthEvidence().entries}>
                                         {(entry) => (
-                                          <div class="min-w-0 rounded border border-border bg-surface-hover px-2 py-1.5 text-[10px]">
+                                          <div class="min-w-0 rounded-sm border border-border bg-surface-hover px-2 py-1.5 text-[10px]">
                                             <div class="flex flex-wrap items-start justify-between gap-2">
                                               <div class="min-w-0">
                                                 <div
@@ -1071,7 +1071,7 @@ export const ResourceDetailDrawerOverviewTab: Component<ResourceDetailDrawerOver
                                     </div>
                                   </div>
                                 </Show>
-                                <details class="rounded border border-indigo-200 bg-surface px-2 py-1.5 dark:border-indigo-700">
+                                <details class="rounded-sm border border-indigo-200 bg-surface px-2 py-1.5 dark:border-indigo-700">
                                   <summary class="flex cursor-pointer list-none items-center justify-between text-[10px] font-medium text-muted">
                                     <span>Types</span>
                                     <span class="text-muted">
@@ -1113,7 +1113,7 @@ export const ResourceDetailDrawerOverviewTab: Component<ResourceDetailDrawerOver
                         pmg().connectionHealth,
                       );
                       return (
-                        <div class="rounded border border-rose-200 bg-rose-50 p-3 dark:border-rose-700 dark:bg-rose-900">
+                        <div class="rounded-sm border border-rose-200 bg-rose-50 p-3 dark:border-rose-700 dark:bg-rose-900/25">
                           <div class="mb-2 flex items-center justify-between gap-2">
                             <div class="text-[11px] font-medium uppercase tracking-wide text-rose-700 dark:text-rose-300">
                               PMG
@@ -1145,7 +1145,7 @@ export const ResourceDetailDrawerOverviewTab: Component<ResourceDetailDrawerOver
                             <Show when={drawer.showPmgMailFlowDetail()}>
                               <div class="space-y-1.5 border-t border-rose-200 pt-2 dark:border-rose-700">
                                 <div class="grid grid-cols-2 gap-2">
-                                  <div class="rounded border border-rose-200 bg-surface px-2 py-1.5 dark:border-rose-700">
+                                  <div class="rounded-sm border border-rose-200 bg-surface px-2 py-1.5 dark:border-rose-700">
                                     <div class="text-[10px] text-muted">Queue</div>
                                     <div
                                       class={`text-sm font-semibold ${drawer.pmgQueueBacklog() > 0 ? 'text-amber-600 dark:text-amber-400' : 'text-base-content'}`}
@@ -1153,7 +1153,7 @@ export const ResourceDetailDrawerOverviewTab: Component<ResourceDetailDrawerOver
                                       {formatInteger(pmg().queueTotal)}
                                     </div>
                                   </div>
-                                  <div class="rounded border border-rose-200 bg-surface px-2 py-1.5 dark:border-rose-700">
+                                  <div class="rounded-sm border border-rose-200 bg-surface px-2 py-1.5 dark:border-rose-700">
                                     <div class="text-[10px] text-muted">Backlog</div>
                                     <div
                                       class={`text-sm font-semibold ${drawer.pmgQueueBacklog() > 0 ? 'text-amber-600 dark:text-amber-400' : 'text-base-content'}`}
@@ -1165,7 +1165,7 @@ export const ResourceDetailDrawerOverviewTab: Component<ResourceDetailDrawerOver
                                 <Show when={pmg().nodeCount || drawer.pmgUpdatedRelative()}>
                                   <div
                                     data-testid="pmg-support-context"
-                                    class="space-y-1.5 rounded border border-dashed border-rose-200 bg-surface px-2 py-1.5 text-[10px] dark:border-rose-700"
+                                    class="space-y-1.5 rounded-sm border border-dashed border-rose-200 bg-surface px-2 py-1.5 text-[10px] dark:border-rose-700"
                                   >
                                     <Show when={pmg().nodeCount}>
                                       <InfoCardKeyValueRow
@@ -1186,7 +1186,7 @@ export const ResourceDetailDrawerOverviewTab: Component<ResourceDetailDrawerOver
                                     </Show>
                                   </div>
                                 </Show>
-                                <details class="rounded border border-rose-200 bg-surface px-2 py-1.5 dark:border-rose-700">
+                                <details class="rounded-sm border border-rose-200 bg-surface px-2 py-1.5 dark:border-rose-700">
                                   <summary class="cursor-pointer list-none text-[10px] font-medium text-muted">
                                     Queue detail
                                   </summary>
@@ -1204,7 +1204,7 @@ export const ResourceDetailDrawerOverviewTab: Component<ResourceDetailDrawerOver
                                     </For>
                                   </div>
                                 </details>
-                                <details class="rounded border border-rose-200 bg-surface px-2 py-1.5 dark:border-rose-700">
+                                <details class="rounded-sm border border-rose-200 bg-surface px-2 py-1.5 dark:border-rose-700">
                                   <summary class="cursor-pointer list-none text-[10px] font-medium text-muted">
                                     Mail detail
                                   </summary>
diff --git a/frontend-modern/src/components/Infrastructure/ResourceDetailDrawerSupportDisclosure.tsx b/frontend-modern/src/components/Infrastructure/ResourceDetailDrawerSupportDisclosure.tsx
index 885f826e65..6e047607b7 100644
--- a/frontend-modern/src/components/Infrastructure/ResourceDetailDrawerSupportDisclosure.tsx
+++ b/frontend-modern/src/components/Infrastructure/ResourceDetailDrawerSupportDisclosure.tsx
@@ -27,7 +27,7 @@ export const ResourceDetailDrawerSupportDisclosure: Component<
   return (
     <div
       data-testid={props.dataTestId}
-      class={`rounded border border-border bg-surface px-2 py-1.5 ${props.class ?? ''}`}
+      class={`rounded-sm border border-border bg-surface px-2 py-1.5 ${props.class ?? ''}`}
     >
       <div class="flex min-w-0 items-center justify-between gap-2">
         <div class="flex min-w-0 flex-1 items-baseline gap-2">
diff --git a/frontend-modern/src/components/Infrastructure/ResourceDetailSummary.tsx b/frontend-modern/src/components/Infrastructure/ResourceDetailSummary.tsx
index 8291e514a0..50e454e147 100644
--- a/frontend-modern/src/components/Infrastructure/ResourceDetailSummary.tsx
+++ b/frontend-modern/src/components/Infrastructure/ResourceDetailSummary.tsx
@@ -171,7 +171,7 @@ const dockerSection = (docker: NonNullable<Resource['docker']>): DetailSection =
             <For each={labelEntries}>
               {([key, value]) => (
                 <span
-                  class="inline-flex max-w-full items-center truncate rounded bg-surface-alt px-1.5 py-0.5 text-[10px]"
+                  class="inline-flex max-w-full items-center truncate rounded-sm bg-surface-alt px-1.5 py-0.5 text-[10px]"
                   title={value ? `${key}: ${value}` : key}
                 >
                   {key}
@@ -202,7 +202,7 @@ export const InlineResourceSummaryTables: Component<ResourceSummaryPresentationP
               <For each={props.drawer.identityIpValues()}>
                 {(ip) => (
                   <span
-                    class="inline-flex items-center rounded bg-blue-100 px-1.5 py-0.5 text-[10px] text-blue-700 dark:bg-blue-900 dark:text-blue-200"
+                    class="inline-flex items-center rounded-sm bg-blue-100 px-1.5 py-0.5 text-[10px] text-blue-700 dark:bg-blue-900/25 dark:text-blue-200"
                     title={ip}
                   >
                     {ip}
@@ -227,7 +227,7 @@ export const InlineResourceSummaryTables: Component<ResourceSummaryPresentationP
               <For each={props.drawer.aliasPreviewValues()}>
                 {(value) => (
                   <span
-                    class="inline-flex items-center rounded bg-surface-alt px-1.5 py-0.5 text-[10px]"
+                    class="inline-flex items-center rounded-sm bg-surface-alt px-1.5 py-0.5 text-[10px]"
                     title={value}
                   >
                     {value}
@@ -235,7 +235,7 @@ export const InlineResourceSummaryTables: Component<ResourceSummaryPresentationP
                 )}
               </For>
               <Show when={props.drawer.hasAliasOverflow()}>
-                <span class="inline-flex items-center rounded bg-surface-alt px-1.5 py-0.5 text-[10px] text-muted">
+                <span class="inline-flex items-center rounded-sm bg-surface-alt px-1.5 py-0.5 text-[10px] text-muted">
                   +
                   {props.drawer.identityAliasValues().length -
                     props.drawer.aliasPreviewValues().length}
diff --git a/frontend-modern/src/components/Infrastructure/ResourceFacetSummary.tsx b/frontend-modern/src/components/Infrastructure/ResourceFacetSummary.tsx
index 265e8c1702..a6dd66010c 100644
--- a/frontend-modern/src/components/Infrastructure/ResourceFacetSummary.tsx
+++ b/frontend-modern/src/components/Infrastructure/ResourceFacetSummary.tsx
@@ -25,7 +25,7 @@ export interface ResourceFacetSummaryProps {
 }
 
 const badgeBase =
-  'inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium whitespace-nowrap';
+  'inline-flex items-center rounded-sm px-1.5 py-0.5 text-[10px] font-medium whitespace-nowrap';
 
 const countLabel = (count: number, singular: string, plural = `${singular}s`) =>
   `${count} ${count === 1 ? singular : plural}`;
@@ -42,7 +42,7 @@ const buildFacetBadges = (
     badges.push({
       label: `Timeline ${changeCount}`,
       title: countLabel(changeCount, 'timeline event'),
-      className: `${badgeBase} bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300`,
+      className: `${badgeBase} bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300`,
     });
   }
 
diff --git a/frontend-modern/src/components/Infrastructure/ResourceInvestigationContextTables.tsx b/frontend-modern/src/components/Infrastructure/ResourceInvestigationContextTables.tsx
index 9628819d34..6837b2a3ed 100644
--- a/frontend-modern/src/components/Infrastructure/ResourceInvestigationContextTables.tsx
+++ b/frontend-modern/src/components/Infrastructure/ResourceInvestigationContextTables.tsx
@@ -33,7 +33,7 @@ const redactionLabelsRow = (labels: string[]): DetailRow | null => {
       <div class="flex flex-wrap gap-1">
         <For each={labels}>
           {(label) => (
-            <span class="inline-flex items-center rounded bg-surface-alt px-1.5 py-0.5 text-[10px]">
+            <span class="inline-flex items-center rounded-sm bg-surface-alt px-1.5 py-0.5 text-[10px]">
               {label}
             </span>
           )}
diff --git a/frontend-modern/src/components/Infrastructure/ResourceOperatorStateSection.tsx b/frontend-modern/src/components/Infrastructure/ResourceOperatorStateSection.tsx
index 091c5d1dd9..379a27d354 100644
--- a/frontend-modern/src/components/Infrastructure/ResourceOperatorStateSection.tsx
+++ b/frontend-modern/src/components/Infrastructure/ResourceOperatorStateSection.tsx
@@ -575,7 +575,7 @@ export const ResourceOperatorStateSection: Component<ResourceOperatorStateSectio
       </header>
 
       <Show when={activeMaintenanceWindow()}>
-        <div class="rounded border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800 dark:border-amber-800 dark:bg-amber-900 dark:text-amber-200">
+        <div class="rounded-sm border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-800 dark:border-amber-800 dark:bg-amber-900/25 dark:text-amber-200">
           <span class="font-semibold">Maintenance window active.</span> Attention on this resource
           <Show when={activeMaintenanceWindow()!.maintenanceScope === 'resource_and_descendants'}>
             {' '}
@@ -594,7 +594,7 @@ export const ResourceOperatorStateSection: Component<ResourceOperatorStateSectio
       </Show>
 
       <Show when={scheduledMaintenanceWindow() && !activeMaintenanceWindow()}>
-        <div class="rounded border border-blue-200 bg-blue-50 px-3 py-2 text-xs text-blue-800 dark:border-blue-800 dark:bg-blue-900 dark:text-blue-200">
+        <div class="rounded-sm border border-blue-200 bg-blue-50 px-3 py-2 text-xs text-blue-800 dark:border-blue-800 dark:bg-blue-900/25 dark:text-blue-200">
           <span class="font-semibold">Maintenance window scheduled.</span> Attention will be paused
           from {new Date(scheduledMaintenanceWindow()!.maintenanceStartAt!).toLocaleString()} until{' '}
           {new Date(scheduledMaintenanceWindow()!.maintenanceEndAt!).toLocaleString()}.
@@ -607,7 +607,7 @@ export const ResourceOperatorStateSection: Component<ResourceOperatorStateSectio
       </Show>
 
       <Show when={persisted()?.maintenanceRecurrence && !activeMaintenanceWindow()}>
-        <div class="rounded border border-blue-200 bg-blue-50 px-3 py-2 text-xs text-blue-800 dark:border-blue-800 dark:bg-blue-900 dark:text-blue-200">
+        <div class="rounded-sm border border-blue-200 bg-blue-50 px-3 py-2 text-xs text-blue-800 dark:border-blue-800 dark:bg-blue-900/25 dark:text-blue-200">
           <span class="font-semibold">Recurring maintenance configured.</span>{' '}
           {persisted()!
             .maintenanceRecurrence!.weekdays.map((weekday) => weekday.slice(0, 3))
@@ -672,7 +672,7 @@ export const ResourceOperatorStateSection: Component<ResourceOperatorStateSectio
                 type="button"
                 onClick={handleOpenScheduler}
                 disabled={saving()}
-                class="min-h-11 self-start rounded border border-border px-2.5 py-1 text-xs font-medium text-base-content hover:bg-surface-hover disabled:opacity-50 sm:min-h-0"
+                class="min-h-11 self-start rounded-sm border border-border px-2.5 py-1 text-xs font-medium text-base-content hover:bg-surface-hover disabled:opacity-50 sm:min-h-0"
               >
                 Schedule window
               </button>
@@ -683,7 +683,7 @@ export const ResourceOperatorStateSection: Component<ResourceOperatorStateSectio
                 type="button"
                 onClick={handleOpenScheduler}
                 disabled={saving()}
-                class="min-h-11 px-2.5 py-1 text-xs font-medium text-base-content border border-border rounded hover:bg-surface-hover disabled:opacity-50 sm:min-h-0"
+                class="min-h-11 px-2.5 py-1 text-xs font-medium text-base-content border border-border rounded-sm hover:bg-surface-hover disabled:opacity-50 sm:min-h-0"
               >
                 Edit window
               </button>
@@ -691,7 +691,7 @@ export const ResourceOperatorStateSection: Component<ResourceOperatorStateSectio
                 type="button"
                 onClick={handleClearMaintenanceWindow}
                 disabled={saving()}
-                class="min-h-11 px-2.5 py-1 text-xs font-medium text-amber-700 border border-amber-200 rounded hover:bg-amber-50 dark:text-amber-300 dark:border-amber-800 dark:hover:bg-amber-900 disabled:opacity-50 sm:min-h-0"
+                class="min-h-11 px-2.5 py-1 text-xs font-medium text-amber-700 border border-amber-200 rounded-sm hover:bg-amber-50 dark:text-amber-300 dark:border-amber-800 dark:hover:bg-amber-900/25 disabled:opacity-50 sm:min-h-0"
               >
                 Cancel window
               </button>
@@ -701,20 +701,20 @@ export const ResourceOperatorStateSection: Component<ResourceOperatorStateSectio
       </Show>
 
       <Show when={schedulerOpen()}>
-        <div class="rounded border border-border bg-surface-alt/40 px-3 py-3 space-y-2">
+        <div class="rounded-sm border border-border px-3 py-3 space-y-2">
           <div class="text-xs font-semibold text-base-content">Schedule maintenance window</div>
-          <div class="inline-flex gap-0.5 rounded border border-border bg-surface p-0.5 text-xs">
+          <div class="inline-flex gap-0.5 rounded-sm border border-border bg-surface p-0.5 text-xs">
             <button
               type="button"
               onClick={() => setScheduleKind('once')}
-              class={`rounded px-2.5 py-1 ${scheduleKind() === 'once' ? 'bg-blue-600 text-white' : 'text-muted hover:bg-surface-hover'}`}
+              class={`rounded-sm px-2.5 py-1 ${scheduleKind() === 'once' ? 'bg-blue-600 text-white' : 'text-muted hover:bg-surface-hover'}`}
             >
               One time
             </button>
             <button
               type="button"
               onClick={() => setScheduleKind('recurring')}
-              class={`rounded px-2.5 py-1 ${scheduleKind() === 'recurring' ? 'bg-blue-600 text-white' : 'text-muted hover:bg-surface-hover'}`}
+              class={`rounded-sm px-2.5 py-1 ${scheduleKind() === 'recurring' ? 'bg-blue-600 text-white' : 'text-muted hover:bg-surface-hover'}`}
             >
               Recurring
             </button>
@@ -728,7 +728,7 @@ export const ResourceOperatorStateSection: Component<ResourceOperatorStateSectio
                   type="datetime-local"
                   value={scheduleStart()}
                   onInput={(e) => setScheduleStart(e.currentTarget.value)}
-                  class="mt-0.5 min-h-11 w-full text-xs rounded border border-border bg-surface px-2 py-1 text-base-content focus:outline-none focus:ring-1 focus:ring-blue-400 sm:min-h-0"
+                  class="mt-0.5 min-h-11 w-full text-xs rounded-sm border border-border bg-surface px-2 py-1 text-base-content focus:outline-hidden focus:ring-1 focus:ring-blue-400 sm:min-h-0"
                   disabled={saving()}
                 />
               </label>
@@ -738,7 +738,7 @@ export const ResourceOperatorStateSection: Component<ResourceOperatorStateSectio
                   type="datetime-local"
                   value={scheduleEnd()}
                   onInput={(e) => setScheduleEnd(e.currentTarget.value)}
-                  class="mt-0.5 min-h-11 w-full text-xs rounded border border-border bg-surface px-2 py-1 text-base-content focus:outline-none focus:ring-1 focus:ring-blue-400 sm:min-h-0"
+                  class="mt-0.5 min-h-11 w-full text-xs rounded-sm border border-border bg-surface px-2 py-1 text-base-content focus:outline-hidden focus:ring-1 focus:ring-blue-400 sm:min-h-0"
                   disabled={saving()}
                 />
               </label>
@@ -751,7 +751,7 @@ export const ResourceOperatorStateSection: Component<ResourceOperatorStateSectio
                     type="button"
                     onClick={() => applyPresetDuration(hours)}
                     disabled={saving()}
-                    class="min-h-11 min-w-11 px-1.5 py-0.5 rounded border border-border hover:bg-surface-hover disabled:opacity-50 sm:min-h-0 sm:min-w-0"
+                    class="min-h-11 min-w-11 px-1.5 py-0.5 rounded-sm border border-border hover:bg-surface-hover disabled:opacity-50 sm:min-h-0 sm:min-w-0"
                   >
                     {hours}h
                   </button>
@@ -771,7 +771,7 @@ export const ResourceOperatorStateSection: Component<ResourceOperatorStateSectio
                         type="button"
                         aria-pressed={scheduleWeekdays().includes(value)}
                         onClick={() => toggleMaintenanceWeekday(value)}
-                        class={`min-h-9 rounded border px-2 text-xs ${scheduleWeekdays().includes(value) ? 'border-blue-600 bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-200' : 'border-border text-muted hover:bg-surface-hover'}`}
+                        class={`min-h-9 rounded-sm border px-2 text-xs ${scheduleWeekdays().includes(value) ? 'border-blue-600 bg-blue-50 text-blue-700 dark:bg-blue-950/25 dark:text-blue-200' : 'border-border text-muted hover:bg-surface-hover'}`}
                       >
                         {label}
                       </button>
@@ -786,7 +786,7 @@ export const ResourceOperatorStateSection: Component<ResourceOperatorStateSectio
                     type="time"
                     value={scheduleRecurringStart()}
                     onInput={(event) => setScheduleRecurringStart(event.currentTarget.value)}
-                    class="mt-0.5 min-h-11 w-full rounded border border-border bg-surface px-2 text-xs text-base-content sm:min-h-0"
+                    class="mt-0.5 min-h-11 w-full rounded-sm border border-border bg-surface px-2 text-xs text-base-content sm:min-h-0"
                   />
                 </label>
                 <label class="block">
@@ -795,7 +795,7 @@ export const ResourceOperatorStateSection: Component<ResourceOperatorStateSectio
                     type="time"
                     value={scheduleRecurringEnd()}
                     onInput={(event) => setScheduleRecurringEnd(event.currentTarget.value)}
-                    class="mt-0.5 min-h-11 w-full rounded border border-border bg-surface px-2 text-xs text-base-content sm:min-h-0"
+                    class="mt-0.5 min-h-11 w-full rounded-sm border border-border bg-surface px-2 text-xs text-base-content sm:min-h-0"
                   />
                 </label>
                 <label class="block">
@@ -804,7 +804,7 @@ export const ResourceOperatorStateSection: Component<ResourceOperatorStateSectio
                     type="text"
                     value={scheduleTimezone()}
                     onInput={(event) => setScheduleTimezone(event.currentTarget.value)}
-                    class="mt-0.5 min-h-11 w-full rounded border border-border bg-surface px-2 text-xs text-base-content sm:min-h-0"
+                    class="mt-0.5 min-h-11 w-full rounded-sm border border-border bg-surface px-2 text-xs text-base-content sm:min-h-0"
                   />
                 </label>
               </div>
@@ -835,7 +835,7 @@ export const ResourceOperatorStateSection: Component<ResourceOperatorStateSectio
               value={scheduleReason()}
               onInput={(e) => setScheduleReason(e.currentTarget.value)}
               placeholder="e.g. Q3 storage upgrade, kernel patch reboot"
-              class="mt-0.5 min-h-11 w-full text-xs rounded border border-border bg-surface px-2 py-1 text-base-content focus:outline-none focus:ring-1 focus:ring-blue-400 sm:min-h-0"
+              class="mt-0.5 min-h-11 w-full text-xs rounded-sm border border-border bg-surface px-2 py-1 text-base-content focus:outline-hidden focus:ring-1 focus:ring-blue-400 sm:min-h-0"
               disabled={saving()}
               maxLength={200}
             />
@@ -850,7 +850,7 @@ export const ResourceOperatorStateSection: Component<ResourceOperatorStateSectio
               type="button"
               onClick={() => setSchedulerOpen(false)}
               disabled={saving()}
-              class="min-h-11 px-2.5 py-1 text-xs font-medium text-muted hover:bg-surface-hover rounded transition-colors disabled:opacity-50 sm:min-h-0"
+              class="min-h-11 px-2.5 py-1 text-xs font-medium text-muted hover:bg-surface-hover rounded-sm transition-colors disabled:opacity-50 sm:min-h-0"
             >
               Cancel
             </button>
@@ -858,7 +858,7 @@ export const ResourceOperatorStateSection: Component<ResourceOperatorStateSectio
               type="button"
               onClick={handleScheduleSave}
               disabled={saving() || Boolean(scheduleValidationError())}
-              class="min-h-11 px-2.5 py-1 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 rounded transition-colors sm:min-h-0"
+              class="min-h-11 px-2.5 py-1 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 rounded-sm transition-colors sm:min-h-0"
             >
               {saving() ? 'Saving…' : 'Save window'}
             </button>
@@ -886,7 +886,7 @@ export const ResourceOperatorStateSection: Component<ResourceOperatorStateSectio
           </div>
 
           <Show when={autoRemediationEnabled()}>
-            <fieldset class="space-y-2 rounded border border-border bg-surface-alt/40 px-3 py-2.5">
+            <fieldset class="space-y-2 rounded-sm border border-border px-3 py-2.5">
               <legend class="px-1 text-xs font-semibold text-base-content">
                 Actions allowed by this limit
               </legend>
@@ -945,7 +945,7 @@ export const ResourceOperatorStateSection: Component<ResourceOperatorStateSectio
                       value={autoWindowStart()}
                       onInput={(event) => setAutoWindowStart(event.currentTarget.value)}
                       disabled={saving()}
-                      class="mt-0.5 w-full rounded border border-border bg-surface px-2 py-1 text-xs text-base-content"
+                      class="mt-0.5 w-full rounded-sm border border-border bg-surface px-2 py-1 text-xs text-base-content"
                     />
                   </label>
                   <label class="block text-[11px] text-muted">
@@ -955,7 +955,7 @@ export const ResourceOperatorStateSection: Component<ResourceOperatorStateSectio
                       value={autoWindowEnd()}
                       onInput={(event) => setAutoWindowEnd(event.currentTarget.value)}
                       disabled={saving()}
-                      class="mt-0.5 w-full rounded border border-border bg-surface px-2 py-1 text-xs text-base-content"
+                      class="mt-0.5 w-full rounded-sm border border-border bg-surface px-2 py-1 text-xs text-base-content"
                     />
                   </label>
                   <label class="block text-[11px] text-muted">
@@ -965,7 +965,7 @@ export const ResourceOperatorStateSection: Component<ResourceOperatorStateSectio
                       value={autoWindowTimezone()}
                       onInput={(event) => setAutoWindowTimezone(event.currentTarget.value)}
                       disabled={saving()}
-                      class="mt-0.5 w-full rounded border border-border bg-surface px-2 py-1 text-xs text-base-content"
+                      class="mt-0.5 w-full rounded-sm border border-border bg-surface px-2 py-1 text-xs text-base-content"
                     />
                   </label>
                 </div>
@@ -1014,7 +1014,7 @@ export const ResourceOperatorStateSection: Component<ResourceOperatorStateSectio
       </div>
 
       <Show when={lifecycleState() === 'retired'}>
-        <div class="rounded border border-border bg-surface-alt px-3 py-2 text-xs text-base-content">
+        <div class="rounded-sm border border-border bg-surface-alt px-3 py-2 text-xs text-base-content">
           Retired resources remain in {inventoryOwnership().ownerLabel} inventory and keep their
           Pulse history. All alert attention and automated remediation are disabled until the
           lifecycle returns to Active.
@@ -1041,7 +1041,7 @@ export const ResourceOperatorStateSection: Component<ResourceOperatorStateSectio
       </div>
 
       <Show when={confirmingLock()}>
-        <div class="rounded border border-red-300 bg-red-50 px-3 py-2.5 text-xs text-red-900 dark:border-red-800 dark:bg-red-950 dark:text-red-100">
+        <div class="rounded-sm border border-red-300 bg-red-50 px-3 py-2.5 text-xs text-red-900/25 dark:border-red-800 dark:bg-red-950/25 dark:text-red-100">
           <p class="font-semibold">Lock this resource against all automated remediation?</p>
           <p class="mt-1 leading-relaxed">
             Pulse will refuse every dispatch targeting this resource, including approved actions
@@ -1051,14 +1051,14 @@ export const ResourceOperatorStateSection: Component<ResourceOperatorStateSectio
             <button
               type="button"
               onClick={confirmLockToggle}
-              class="rounded border border-red-400 bg-white px-2 py-1 text-xs font-medium text-red-900 hover:bg-red-100 dark:border-red-700 dark:bg-red-900 dark:text-red-100 dark:hover:bg-red-800"
+              class="rounded-sm border border-red-400 bg-white px-2 py-1 text-xs font-medium text-red-900/25 hover:bg-red-100 dark:border-red-700 dark:bg-red-900/25 dark:text-red-100 dark:hover:bg-red-800"
             >
               Lock this resource
             </button>
             <button
               type="button"
               onClick={cancelLockToggle}
-              class="rounded border border-border bg-surface px-2 py-1 text-xs font-medium text-muted hover:bg-surface-hover"
+              class="rounded-sm border border-border bg-surface px-2 py-1 text-xs font-medium text-muted hover:bg-surface-hover"
             >
               Cancel
             </button>
@@ -1072,7 +1072,7 @@ export const ResourceOperatorStateSection: Component<ResourceOperatorStateSectio
             type="button"
             onClick={handleClear}
             disabled={saving()}
-            class="px-2.5 py-1 text-xs font-medium text-muted hover:text-base-content hover:bg-surface-hover rounded transition-colors disabled:opacity-50"
+            class="px-2.5 py-1 text-xs font-medium text-muted hover:text-base-content hover:bg-surface-hover rounded-sm transition-colors disabled:opacity-50"
           >
             Clear all overrides
           </button>
@@ -1082,7 +1082,7 @@ export const ResourceOperatorStateSection: Component<ResourceOperatorStateSectio
             type="button"
             onClick={handleDiscard}
             disabled={saving()}
-            class="px-2.5 py-1 text-xs font-medium text-muted hover:bg-surface-hover rounded transition-colors disabled:opacity-50"
+            class="px-2.5 py-1 text-xs font-medium text-muted hover:bg-surface-hover rounded-sm transition-colors disabled:opacity-50"
           >
             Discard
           </button>
@@ -1090,7 +1090,7 @@ export const ResourceOperatorStateSection: Component<ResourceOperatorStateSectio
             type="button"
             onClick={handleSave}
             disabled={saving() || Boolean(autoPolicyValidationError())}
-            class="px-2.5 py-1 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 rounded transition-colors"
+            class="px-2.5 py-1 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 rounded-sm transition-colors"
           >
             {saving() ? 'Saving…' : 'Save overrides'}
           </button>
diff --git a/frontend-modern/src/components/Infrastructure/ResourcePolicySummary.tsx b/frontend-modern/src/components/Infrastructure/ResourcePolicySummary.tsx
index 2f3391d5bf..582a4f8b31 100644
--- a/frontend-modern/src/components/Infrastructure/ResourcePolicySummary.tsx
+++ b/frontend-modern/src/components/Infrastructure/ResourcePolicySummary.tsx
@@ -62,7 +62,7 @@ export const ResourcePolicySummary: Component<ResourcePolicySummaryProps> = (pro
             <div class="mt-2 flex flex-wrap gap-1">
               <For each={redactionSummaries()}>
                 {(item) => (
-                  <span class="inline-flex items-center rounded bg-surface-alt px-1.5 py-0.5 text-[10px]">
+                  <span class="inline-flex items-center rounded-sm bg-surface-alt px-1.5 py-0.5 text-[10px]">
                     {item.label} {item.count}
                   </span>
                 )}
diff --git a/frontend-modern/src/components/Infrastructure/UnifiedResourceHostTableCard.tsx b/frontend-modern/src/components/Infrastructure/UnifiedResourceHostTableCard.tsx
index e81d3612fb..ce2fea9148 100644
--- a/frontend-modern/src/components/Infrastructure/UnifiedResourceHostTableCard.tsx
+++ b/frontend-modern/src/components/Infrastructure/UnifiedResourceHostTableCard.tsx
@@ -350,7 +350,7 @@ export const UnifiedResourceHostTableCard: Component<UnifiedResourceHostTableCar
                     'cursor-pointer transition-all duration-200 relative group hover:bg-surface-hover';
 
                   if (isExpanded()) {
-                    return 'cursor-pointer transition-all duration-200 relative z-10 group bg-blue-50 dark:bg-blue-900';
+                    return 'cursor-pointer transition-all duration-200 relative z-10 group bg-blue-50 dark:bg-blue-900/25';
                   }
 
                   let className = baseHover;
@@ -433,7 +433,7 @@ export const UnifiedResourceHostTableCard: Component<UnifiedResourceHostTableCar
                               <Show when={healthIssue()}>
                                 {(issue) => (
                                   <span
-                                    class="hidden shrink-0 whitespace-nowrap rounded bg-amber-100 px-1 text-[9px] font-medium text-amber-700 dark:bg-amber-900 dark:text-amber-300 lg:inline"
+                                    class="hidden shrink-0 whitespace-nowrap rounded-sm bg-amber-100 px-1 text-[9px] font-medium text-amber-700 dark:bg-amber-900/25 dark:text-amber-300 lg:inline"
                                     title={issue().title}
                                   >
                                     {issue().compactLabel}
@@ -443,7 +443,7 @@ export const UnifiedResourceHostTableCard: Component<UnifiedResourceHostTableCar
                               <Show when={availabilityProbe()}>
                                 {(probe) => (
                                   <span
-                                    class={`hidden shrink-0 whitespace-nowrap rounded px-1 text-[9px] font-medium lg:inline ${probe().toneClassName}`}
+                                    class={`hidden shrink-0 whitespace-nowrap rounded-sm px-1 text-[9px] font-medium lg:inline ${probe().toneClassName}`}
                                     title={probe().detailLabel}
                                   >
                                     {probe().methodLabel}
@@ -470,7 +470,7 @@ export const UnifiedResourceHostTableCard: Component<UnifiedResourceHostTableCar
                                   recentChanges={resource.recentChanges}
                                   counts={resource.facetCounts}
                                   maxVisibleBadges={1}
-                                  class="hidden max-w-[48%] shrink-0 flex-nowrap overflow-hidden lg:flex"
+                                  class="hidden max-w-[48%] shrink-0 flex-nowrap! overflow-hidden lg:flex"
                                 />
                               </Show>
                             </div>
diff --git a/frontend-modern/src/components/Infrastructure/UnifiedResourcePBSTableSection.tsx b/frontend-modern/src/components/Infrastructure/UnifiedResourcePBSTableSection.tsx
index e5280682f5..7e638e9263 100644
--- a/frontend-modern/src/components/Infrastructure/UnifiedResourcePBSTableSection.tsx
+++ b/frontend-modern/src/components/Infrastructure/UnifiedResourcePBSTableSection.tsx
@@ -142,10 +142,10 @@ export const UnifiedResourcePBSTableSection: Component<UnifiedResourcePBSTableSe
 
               const rowClass = createMemo(() => {
                 const baseBorder = 'border-b border-border-subtle';
-                const baseHover = `cursor-pointer transition-all duration-200 relative hover:shadow-sm group ${baseBorder}`;
+                const baseHover = `cursor-pointer transition-all duration-200 relative hover:shadow-xs group ${baseBorder}`;
 
                 if (isExpanded()) {
-                  return `cursor-pointer transition-all duration-200 relative hover:shadow-sm z-10 group bg-blue-50 dark:bg-blue-900 ${baseBorder}`;
+                  return `cursor-pointer transition-all duration-200 relative hover:shadow-xs z-10 group bg-blue-50 dark:bg-blue-900/25 ${baseBorder}`;
                 }
 
                 let className = baseHover;
@@ -209,7 +209,7 @@ export const UnifiedResourcePBSTableSection: Component<UnifiedResourcePBSTableSe
                           recentChanges={resource.recentChanges}
                           counts={resource.facetCounts}
                           maxVisibleBadges={1}
-                          class="hidden max-w-[48%] shrink-0 flex-nowrap overflow-hidden lg:flex"
+                          class="hidden max-w-[48%] shrink-0 flex-nowrap! overflow-hidden lg:flex"
                         />
                       </div>
                     </TableCell>
@@ -315,7 +315,7 @@ export const UnifiedResourcePBSTableSection: Component<UnifiedResourcePBSTableSe
                           {(link) => (
                             <a
                               href={link().href}
-                              class="inline-flex items-center rounded border border-blue-200 bg-blue-50 px-1.5 py-0.5 text-[10px] font-medium text-blue-700 transition-colors hover:bg-blue-100 dark:border-blue-700 dark:bg-blue-900 dark:text-blue-200 dark:hover:bg-blue-800"
+                              class="inline-flex items-center rounded-sm border border-blue-200 bg-blue-50 px-1.5 py-0.5 text-[10px] font-medium text-blue-700 transition-colors hover:bg-blue-100 dark:border-blue-700 dark:bg-blue-900/25 dark:text-blue-200 dark:hover:bg-blue-800"
                               title={link().label}
                               aria-label={link().ariaLabel}
                               onClick={(event) => event.stopPropagation()}
diff --git a/frontend-modern/src/components/Infrastructure/UnifiedResourcePMGTableSection.tsx b/frontend-modern/src/components/Infrastructure/UnifiedResourcePMGTableSection.tsx
index 2f8e075371..79f38dc613 100644
--- a/frontend-modern/src/components/Infrastructure/UnifiedResourcePMGTableSection.tsx
+++ b/frontend-modern/src/components/Infrastructure/UnifiedResourcePMGTableSection.tsx
@@ -156,10 +156,10 @@ export const UnifiedResourcePMGTableSection: Component<UnifiedResourcePMGTableSe
 
               const rowClass = createMemo(() => {
                 const baseBorder = 'border-b border-border-subtle';
-                const baseHover = `cursor-pointer transition-all duration-200 relative hover:shadow-sm group ${baseBorder}`;
+                const baseHover = `cursor-pointer transition-all duration-200 relative hover:shadow-xs group ${baseBorder}`;
 
                 if (isExpanded()) {
-                  return `cursor-pointer transition-all duration-200 relative hover:shadow-sm z-10 group bg-blue-50 dark:bg-blue-900 ${baseBorder}`;
+                  return `cursor-pointer transition-all duration-200 relative hover:shadow-xs z-10 group bg-blue-50 dark:bg-blue-900/25 ${baseBorder}`;
                 }
 
                 let className = baseHover;
@@ -223,7 +223,7 @@ export const UnifiedResourcePMGTableSection: Component<UnifiedResourcePMGTableSe
                           recentChanges={resource.recentChanges}
                           counts={resource.facetCounts}
                           maxVisibleBadges={1}
-                          class="hidden max-w-[48%] shrink-0 flex-nowrap overflow-hidden lg:flex"
+                          class="hidden max-w-[48%] shrink-0 flex-nowrap! overflow-hidden lg:flex"
                         />
                       </div>
                     </TableCell>
@@ -355,7 +355,7 @@ export const UnifiedResourcePMGTableSection: Component<UnifiedResourcePMGTableSe
                           {(link) => (
                             <a
                               href={link().href}
-                              class="inline-flex items-center rounded border border-blue-200 bg-blue-50 px-1.5 py-0.5 text-[10px] font-medium text-blue-700 transition-colors hover:bg-blue-100 dark:border-blue-700 dark:bg-blue-900 dark:text-blue-200 dark:hover:bg-blue-800"
+                              class="inline-flex items-center rounded-sm border border-blue-200 bg-blue-50 px-1.5 py-0.5 text-[10px] font-medium text-blue-700 transition-colors hover:bg-blue-100 dark:border-blue-700 dark:bg-blue-900/25 dark:text-blue-200 dark:hover:bg-blue-800"
                               title={link().label}
                               aria-label={link().ariaLabel}
                               onClick={(event) => event.stopPropagation()}
diff --git a/frontend-modern/src/components/Infrastructure/UnifiedResourceSourceBadgeCell.tsx b/frontend-modern/src/components/Infrastructure/UnifiedResourceSourceBadgeCell.tsx
index 31b0e71d92..3e72eaa983 100644
--- a/frontend-modern/src/components/Infrastructure/UnifiedResourceSourceBadgeCell.tsx
+++ b/frontend-modern/src/components/Infrastructure/UnifiedResourceSourceBadgeCell.tsx
@@ -58,7 +58,7 @@ export const UnifiedResourceSourceBadgeCell: Component<UnifiedResourceSourceBadg
       </For>
       <Show when={hiddenBadgeCount() > 0}>
         <span
-          class="inline-flex min-w-0 max-w-full items-center overflow-hidden rounded bg-surface-alt px-1 py-0.5 text-[10px] font-medium text-muted"
+          class="inline-flex min-w-0 max-w-full items-center overflow-hidden rounded-sm bg-surface-alt px-1 py-0.5 text-[10px] font-medium text-muted"
           aria-label={`Additional systems: ${hiddenBadges()
             .map((badge) => badge.title ?? badge.label)
             .join(', ')}`}
diff --git a/frontend-modern/src/components/Infrastructure/__tests__/ResourceDetailDrawer.history.test.tsx b/frontend-modern/src/components/Infrastructure/__tests__/ResourceDetailDrawer.history.test.tsx
index a7c1fd727b..808f6339fd 100644
--- a/frontend-modern/src/components/Infrastructure/__tests__/ResourceDetailDrawer.history.test.tsx
+++ b/frontend-modern/src/components/Infrastructure/__tests__/ResourceDetailDrawer.history.test.tsx
@@ -610,7 +610,7 @@ describe('ResourceDetailDrawer change history section', () => {
     await within(contextSection).findByText('Analysis');
     expect(contextSection.querySelector('table')).toBeTruthy();
     expect(contextSection.querySelector('tbody')).toBeTruthy();
-    expect(contextSection.querySelectorAll('tbody[class*="shadow-sm"]')).toHaveLength(1);
+    expect(contextSection.querySelectorAll('tbody[class*="shadow-xs"]')).toHaveLength(1);
     expect(screen.getByText('Health')).toBeInTheDocument();
     expect(screen.getByText('A · 92/100')).toBeInTheDocument();
     expect(screen.getByText('Trend')).toBeInTheDocument();
diff --git a/frontend-modern/src/components/Infrastructure/__tests__/ResourceDetailDrawer.identity-runtime.test.tsx b/frontend-modern/src/components/Infrastructure/__tests__/ResourceDetailDrawer.identity-runtime.test.tsx
index 85c0494341..5e835255e0 100644
--- a/frontend-modern/src/components/Infrastructure/__tests__/ResourceDetailDrawer.identity-runtime.test.tsx
+++ b/frontend-modern/src/components/Infrastructure/__tests__/ResourceDetailDrawer.identity-runtime.test.tsx
@@ -348,7 +348,7 @@ describe('ResourceDetailDrawer runtime and identity cards', () => {
     expect(
       getByTestId('resource-host-details-section')
         .querySelector('.mt-3.flex.flex-wrap')
-        ?.classList.contains('[&>*]:min-w-[220px]'),
+        ?.classList.contains('*:min-w-[220px]'),
     ).toBe(true);
     expect(getByText('Network')).toBeInTheDocument();
     expect(getByText('Disks')).toBeInTheDocument();
@@ -977,7 +977,7 @@ describe('ResourceDetailDrawer runtime and identity cards', () => {
     const contextSection = getByTestId('resource-investigation-context');
     expect(contextSection.querySelector('table')).toBeTruthy();
     expect(contextSection.querySelector('tbody')).toBeTruthy();
-    expect(contextSection.querySelectorAll('tbody[class*="shadow-sm"]')).toHaveLength(1);
+    expect(contextSection.querySelectorAll('tbody[class*="shadow-xs"]')).toHaveLength(1);
     expect(getByText('Health')).toBeInTheDocument();
     expect(getByText('A · 92/100')).toBeInTheDocument();
     expect(getByText('Trend')).toBeInTheDocument();
diff --git a/frontend-modern/src/components/Infrastructure/__tests__/ResourceDetailDrawer.truenas-details.test.tsx b/frontend-modern/src/components/Infrastructure/__tests__/ResourceDetailDrawer.truenas-details.test.tsx
index 9638d06d11..39677acb26 100644
--- a/frontend-modern/src/components/Infrastructure/__tests__/ResourceDetailDrawer.truenas-details.test.tsx
+++ b/frontend-modern/src/components/Infrastructure/__tests__/ResourceDetailDrawer.truenas-details.test.tsx
@@ -250,7 +250,7 @@ describe('ResourceDetailDrawer TrueNAS details', () => {
     expect(getByTestId('resource-technical-summary-section').querySelector('table')).toBeTruthy();
     expect(() => getByTestId('resource-current-state-section')).toThrow();
     expect(getByTestId('resource-identity-section').tagName).toBe('TBODY');
-    expect(summary.querySelector('[class*="shadow-sm"]')).not.toBeNull();
+    expect(summary.querySelector('[class*="shadow-xs"]')).not.toBeNull();
     expect(getByRole('button', { name: 'Hide TrueNAS' })).toBeInTheDocument();
     const trueNASSection = getByTestId('resource-truenas-details-section');
     expect(
diff --git a/frontend-modern/src/components/Infrastructure/__tests__/ResourceOperatorStateSection.test.ts b/frontend-modern/src/components/Infrastructure/__tests__/ResourceOperatorStateSection.test.ts
index 37ee1f060f..af4becd1f4 100644
--- a/frontend-modern/src/components/Infrastructure/__tests__/ResourceOperatorStateSection.test.ts
+++ b/frontend-modern/src/components/Infrastructure/__tests__/ResourceOperatorStateSection.test.ts
@@ -200,7 +200,7 @@ describe('ResourceOperatorStateSection', () => {
     expect(sectionSource).toContain(
       'flex flex-col items-stretch justify-between gap-3 border-t border-border-subtle pt-2 sm:flex-row sm:items-center',
     );
-    expect(sectionSource).toContain('min-h-11 self-start rounded border border-border');
+    expect(sectionSource).toContain('min-h-11 self-start rounded-sm border border-border');
     expect(sectionSource).toContain(
       'min-h-11 px-2.5 py-1 text-xs font-medium text-white bg-blue-600',
     );
diff --git a/frontend-modern/src/components/Infrastructure/__tests__/UnifiedResourceTable.performance.contract.test.tsx b/frontend-modern/src/components/Infrastructure/__tests__/UnifiedResourceTable.performance.contract.test.tsx
index f67ba03150..9231ffcd19 100644
--- a/frontend-modern/src/components/Infrastructure/__tests__/UnifiedResourceTable.performance.contract.test.tsx
+++ b/frontend-modern/src/components/Infrastructure/__tests__/UnifiedResourceTable.performance.contract.test.tsx
@@ -823,7 +823,7 @@ describe('UnifiedResourceTable performance contract', () => {
         expect(source).toContain('createSummaryInteractiveRowPreviewHandlers');
         expect(source).toContain('SummaryRowActionButton');
         expect(source).toContain('hideWhenRowTappableOnMobile');
-        expect(source).not.toContain('bg-blue-50 dark:bg-blue-900 ring-1 ring-blue-300');
+        expect(source).not.toContain('bg-blue-50 dark:bg-blue-900/25 ring-1 ring-blue-300');
         expect(source).not.toContain('bg-blue-100 dark:bg-blue-800');
       }
 
diff --git a/frontend-modern/src/components/Infrastructure/__tests__/resourceDetailDrawerOperationalModel.branchcov2.test.ts b/frontend-modern/src/components/Infrastructure/__tests__/resourceDetailDrawerOperationalModel.branchcov2.test.ts
index cdef3548cd..66a5bdeb05 100644
--- a/frontend-modern/src/components/Infrastructure/__tests__/resourceDetailDrawerOperationalModel.branchcov2.test.ts
+++ b/frontend-modern/src/components/Infrastructure/__tests__/resourceDetailDrawerOperationalModel.branchcov2.test.ts
@@ -16,9 +16,9 @@ import type { Resource } from '@/types/resource';
 // Mirrors the private badge-class constants in resourceDetailDrawerOperationalModel.ts
 // so the assertions here stay brittle to drift in those exact Tailwind tokens.
 const SUPPORTED_BADGE_CLASS =
-  'inline-flex items-center rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-cyan-100 text-cyan-700 dark:bg-cyan-900 dark:text-cyan-400';
+  'inline-flex items-center rounded-sm px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-cyan-100 text-cyan-700 dark:bg-cyan-900/25 dark:text-cyan-400';
 const UNSUPPORTED_BADGE_CLASS =
-  'inline-flex items-center rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-surface-alt text-muted';
+  'inline-flex items-center rounded-sm px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-surface-alt text-muted';
 
 type SourceStatusMap = NonNullable<PlatformData['sourceStatus']>;
 
diff --git a/frontend-modern/src/components/Infrastructure/__tests__/resourceDetailDrawerOperationalModel.test.ts b/frontend-modern/src/components/Infrastructure/__tests__/resourceDetailDrawerOperationalModel.test.ts
index 61e4db3051..94d53bfed7 100644
--- a/frontend-modern/src/components/Infrastructure/__tests__/resourceDetailDrawerOperationalModel.test.ts
+++ b/frontend-modern/src/components/Infrastructure/__tests__/resourceDetailDrawerOperationalModel.test.ts
@@ -40,31 +40,31 @@ describe('resourceDetailDrawerOperationalModel', () => {
       {
         label: 'K8s Node CPU/Memory',
         classes:
-          'inline-flex items-center rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-cyan-100 text-cyan-700 dark:bg-cyan-900 dark:text-cyan-400',
+          'inline-flex items-center rounded-sm px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-cyan-100 text-cyan-700 dark:bg-cyan-900/25 dark:text-cyan-400',
         title: 'Node CPU and memory metrics are available.',
       },
       {
         label: 'Node Telemetry (Agent)',
         classes:
-          'inline-flex items-center rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-cyan-100 text-cyan-700 dark:bg-cyan-900 dark:text-cyan-400',
+          'inline-flex items-center rounded-sm px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-cyan-100 text-cyan-700 dark:bg-cyan-900/25 dark:text-cyan-400',
         title: 'Linked Pulse agent provides node uptime, temperature, disk, network, and disk I/O.',
       },
       {
         label: 'Pod CPU/Memory',
         classes:
-          'inline-flex items-center rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-cyan-100 text-cyan-700 dark:bg-cyan-900 dark:text-cyan-400',
+          'inline-flex items-center rounded-sm px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-cyan-100 text-cyan-700 dark:bg-cyan-900/25 dark:text-cyan-400',
         title: 'Pod CPU and memory metrics are available.',
       },
       {
         label: 'Pod Ephemeral Disk',
         classes:
-          'inline-flex items-center rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-cyan-100 text-cyan-700 dark:bg-cyan-900 dark:text-cyan-400',
+          'inline-flex items-center rounded-sm px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-cyan-100 text-cyan-700 dark:bg-cyan-900/25 dark:text-cyan-400',
         title: 'Pod ephemeral storage usage is available.',
       },
       {
         label: 'Pod Disk I/O Unsupported',
         classes:
-          'inline-flex items-center rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-surface-alt text-muted',
+          'inline-flex items-center rounded-sm px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-surface-alt text-muted',
         title:
           'Pod disk read/write throughput is not collected by the Kubernetes integration path today.',
       },
diff --git a/frontend-modern/src/components/Infrastructure/__tests__/unifiedResourceTableStateModel.test.ts b/frontend-modern/src/components/Infrastructure/__tests__/unifiedResourceTableStateModel.test.ts
index 3055dfe8a9..1e028a9764 100644
--- a/frontend-modern/src/components/Infrastructure/__tests__/unifiedResourceTableStateModel.test.ts
+++ b/frontend-modern/src/components/Infrastructure/__tests__/unifiedResourceTableStateModel.test.ts
@@ -133,7 +133,7 @@ describe('unifiedResourceTableStateModel', () => {
     expect(getUnifiedResourceTableShellClass('mobile')).not.toContain('min-w-[640px]');
     expect(getUnifiedResourceTableShellClass('compact')).toContain('min-w-[640px]');
     expect(getUnifiedResourceTableShellClass('wide')).toContain('min-w-[640px]');
-    expect(getUnifiedResourceTableShellClass('wide')).not.toContain('min-w-[max-content]');
+    expect(getUnifiedResourceTableShellClass('wide')).not.toContain('min-w-max');
     // Mobile keeps the prioritized column set but preserves a readable width
     // floor inside the shared horizontal-scroll shell. Wider modes keep all
     // host columns visible while compressing their tracks before any
diff --git a/frontend-modern/src/components/Infrastructure/resourceDetailDrawerOperationalModel.ts b/frontend-modern/src/components/Infrastructure/resourceDetailDrawerOperationalModel.ts
index 5aaf8e98e3..3648cd2293 100644
--- a/frontend-modern/src/components/Infrastructure/resourceDetailDrawerOperationalModel.ts
+++ b/frontend-modern/src/components/Infrastructure/resourceDetailDrawerOperationalModel.ts
@@ -19,9 +19,9 @@ export type ResourceDetailDrawerOperationalLink = ServiceDetailLink;
 type SourceStatusMap = NonNullable<PlatformData['sourceStatus']>;
 
 const SUPPORTED_BADGE_CLASS =
-  'inline-flex items-center rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-cyan-100 text-cyan-700 dark:bg-cyan-900 dark:text-cyan-400';
+  'inline-flex items-center rounded-sm px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-cyan-100 text-cyan-700 dark:bg-cyan-900/25 dark:text-cyan-400';
 const UNSUPPORTED_BADGE_CLASS =
-  'inline-flex items-center rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-surface-alt text-muted';
+  'inline-flex items-center rounded-sm px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-surface-alt text-muted';
 
 export const buildKubernetesCapabilityBadges = (
   capabilities?: KubernetesMetricCapabilities,
diff --git a/frontend-modern/src/components/Kubernetes/K8sDeploymentsDrawer.tsx b/frontend-modern/src/components/Kubernetes/K8sDeploymentsDrawer.tsx
index eec04efa21..925a72c72e 100644
--- a/frontend-modern/src/components/Kubernetes/K8sDeploymentsDrawer.tsx
+++ b/frontend-modern/src/components/Kubernetes/K8sDeploymentsDrawer.tsx
@@ -186,12 +186,12 @@ export const K8sDeploymentsDrawer: Component<{
           </div>
 
           <div class="flex flex-wrap items-center gap-2">
-            <div class="w-[12rem]">
+            <div class="w-48">
               <SearchInput
                 value={search}
                 onChange={setSearch}
                 placeholder={drawerPresentation.searchPlaceholder}
-                inputClass="py-1 text-xs font-medium shadow-sm"
+                inputClass="py-1 text-xs font-medium shadow-xs"
                 typeToSearch
                 clearOnEscape
               />
@@ -204,7 +204,7 @@ export const K8sDeploymentsDrawer: Component<{
                 fieldBaseClass={filterGroupClass}
                 labelClass={filterLabelClass}
                 selectBaseClass={filterSelectClass}
-                selectClass="min-w-[10rem]"
+                selectClass="min-w-40"
                 value={namespace()}
                 aria-label={drawerPresentation.namespaceFilterLabel}
                 onChange={(e) => setNamespace(e.currentTarget.value)}
@@ -217,7 +217,7 @@ export const K8sDeploymentsDrawer: Component<{
             <button
               type="button"
               onClick={() => openPods(namespace() || undefined)}
-              class="rounded-md border border-border px-3 py-1 text-xs font-semibold shadow-sm hover:bg-surface-hover"
+              class="rounded-md border border-border px-3 py-1 text-xs font-semibold shadow-xs hover:bg-surface-hover"
             >
               {drawerPresentation.openPodsLabel}
             </button>
@@ -330,7 +330,7 @@ export const K8sDeploymentsDrawer: Component<{
                               type="button"
                               aria-label={drawerPresentation.viewPodsLabel}
                               onClick={() => openPods(dep.kubernetes?.namespace)}
-                              class="rounded-md border border-border bg-surface px-2 py-1 text-[11px] font-semibold text-base-content shadow-sm hover:bg-surface-hover"
+                              class="rounded-md border border-border bg-surface px-2 py-1 text-[11px] font-semibold text-base-content shadow-xs hover:bg-surface-hover"
                             >
                               <PlatformResponsiveTableLabel
                                 compact="Pods"
diff --git a/frontend-modern/src/components/Kubernetes/K8sNamespacesDrawer.tsx b/frontend-modern/src/components/Kubernetes/K8sNamespacesDrawer.tsx
index a26e38f7bc..ba4d786c04 100644
--- a/frontend-modern/src/components/Kubernetes/K8sNamespacesDrawer.tsx
+++ b/frontend-modern/src/components/Kubernetes/K8sNamespacesDrawer.tsx
@@ -95,12 +95,12 @@ export const K8sNamespacesDrawer: Component<{
           </div>
 
           <div class="flex flex-wrap items-center gap-2">
-            <div class="w-[12rem]">
+            <div class="w-48">
               <SearchInput
                 value={search}
                 onChange={setSearch}
                 placeholder={drawerPresentation.searchPlaceholder}
-                inputClass="py-1 text-xs font-medium shadow-sm"
+                inputClass="py-1 text-xs font-medium shadow-xs"
                 typeToSearch
                 clearOnEscape
               />
@@ -108,7 +108,7 @@ export const K8sNamespacesDrawer: Component<{
             <button
               type="button"
               onClick={() => openPods(null)}
-              class="rounded-md border border-border bg-surface px-3 py-1 text-xs font-semibold shadow-sm hover:bg-surface-hover"
+              class="rounded-md border border-border bg-surface px-3 py-1 text-xs font-semibold shadow-xs hover:bg-surface-hover"
             >
               {drawerPresentation.openAllPodsLabel}
             </button>
@@ -222,7 +222,7 @@ export const K8sNamespacesDrawer: Component<{
                                 type="button"
                                 aria-label={drawerPresentation.openPodsLabel}
                                 onClick={() => openPods(row.namespace)}
-                                class="rounded-md border border-border bg-surface px-2 py-1 text-[11px] font-semibold text-base-content shadow-sm hover:bg-surface-hover"
+                                class="rounded-md border border-border bg-surface px-2 py-1 text-[11px] font-semibold text-base-content shadow-xs hover:bg-surface-hover"
                               >
                                 <PlatformResponsiveTableLabel
                                   compact="Pods"
@@ -234,7 +234,7 @@ export const K8sNamespacesDrawer: Component<{
                                   type="button"
                                   aria-label={drawerPresentation.viewDeploymentsLabel}
                                   onClick={() => props.onOpenDeployments?.(row.namespace)}
-                                  class="rounded-md border border-border bg-surface px-2 py-1 text-[11px] font-semibold text-base-content shadow-sm hover:bg-surface-hover"
+                                  class="rounded-md border border-border bg-surface px-2 py-1 text-[11px] font-semibold text-base-content shadow-xs hover:bg-surface-hover"
                                 >
                                   <PlatformResponsiveTableLabel
                                     compact="Deployments"
diff --git a/frontend-modern/src/components/Login.tsx b/frontend-modern/src/components/Login.tsx
index d9981c83d9..d783c6a03c 100644
--- a/frontend-modern/src/components/Login.tsx
+++ b/frontend-modern/src/components/Login.tsx
@@ -442,9 +442,9 @@ const LoginForm: Component<{
       <div class="max-w-md w-full space-y-8">
         {/* Demo Credentials Banner */}
         <Show when={demoModeEnabled}>
-          <div class="bg-surface rounded-md p-4 shadow-sm border border-blue-200 dark:border-blue-800 animate-fade-in">
+          <div class="bg-surface rounded-md p-4 shadow-xs border border-blue-200 dark:border-blue-800 animate-fade-in">
             <div class="flex items-center gap-3">
-              <div class="flex-shrink-0 w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center">
+              <div class="shrink-0 w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center">
                 <svg
                   class="w-5 h-5 text-white"
                   fill="none"
@@ -466,11 +466,11 @@ const LoginForm: Component<{
                   fallback={
                     <div class="text-sm text-muted">
                       Login with{' '}
-                      <code class="bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 px-1.5 py-0.5 rounded font-mono text-xs">
+                      <code class="bg-blue-100 dark:bg-blue-900/25 text-blue-700 dark:text-blue-300 px-1.5 py-0.5 rounded-sm font-mono text-xs">
                         demo
                       </code>{' '}
                       /{' '}
-                      <code class="bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 px-1.5 py-0.5 rounded font-mono text-xs">
+                      <code class="bg-blue-100 dark:bg-blue-900/25 text-blue-700 dark:text-blue-300 px-1.5 py-0.5 rounded-sm font-mono text-xs">
                         demo
                       </code>
                     </div>
@@ -503,7 +503,7 @@ const LoginForm: Component<{
           </Show>
         </div>
         <form
-          class="mt-8 space-y-6 bg-surface rounded-md p-8 shadow-sm border border-border animate-slide-up"
+          class="mt-8 space-y-6 bg-surface rounded-md p-8 shadow-xs border border-border animate-slide-up"
           onSubmit={handleSubmit}
         >
           {/* Multi-Provider SSO Section */}
@@ -513,7 +513,7 @@ const LoginForm: Component<{
                 {(provider) => (
                   <button
                     type="button"
-                    class={`w-full inline-flex items-center justify-center gap-2 px-4 py-3 rounded-md border border-blue-500 text-blue-600 hover:bg-blue-50 transition dark:border-blue-400 dark:text-blue-200 dark:hover:bg-blue-900 ${oidcLoading() ? 'opacity-75 cursor-wait' : ''}`}
+                    class={`w-full inline-flex items-center justify-center gap-2 px-4 py-3 rounded-md border border-blue-500 text-blue-600 hover:bg-blue-50 transition dark:border-blue-400 dark:text-blue-200 dark:hover:bg-blue-900/25 ${oidcLoading() ? 'opacity-75 cursor-wait' : ''}`}
                     disabled={oidcLoading()}
                     onClick={() => {
                       window.location.href = provider.loginUrl;
@@ -538,12 +538,12 @@ const LoginForm: Component<{
                 )}
               </For>
               <Show when={oidcError()}>
-                <div class="rounded-md bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-800 px-3 py-2 text-sm text-red-600 dark:text-red-300">
+                <div class="rounded-md bg-red-50 dark:bg-red-900/25 border border-red-200 dark:border-red-800 px-3 py-2 text-sm text-red-600 dark:text-red-300">
                   {oidcError()}
                 </div>
               </Show>
               <Show when={oidcMessage()}>
-                <div class="rounded-md bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-700 px-3 py-2 text-sm text-green-600 dark:text-green-300">
+                <div class="rounded-md bg-green-50 dark:bg-green-900/25 border border-green-200 dark:border-green-700 px-3 py-2 text-sm text-green-600 dark:text-green-300">
                   {oidcMessage()}
                 </div>
               </Show>
@@ -581,7 +581,7 @@ const LoginForm: Component<{
                   type="text"
                   autocomplete="username"
                   required
-                  class="appearance-none relative block w-full pl-10 pr-3 py-3 border border-border placeholder-gray-500 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm"
+                  class="appearance-none relative block w-full pl-10 pr-3 py-3 border border-border placeholder-gray-500 rounded-md focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm"
                   placeholder="Username"
                   value={username()}
                   onInput={(e) => setUsername(e.currentTarget.value)}
@@ -607,7 +607,7 @@ const LoginForm: Component<{
                   type="password"
                   autocomplete="current-password"
                   required
-                  class="appearance-none relative block w-full pl-10 pr-3 py-3 border border-border placeholder-gray-500 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm"
+                  class="appearance-none relative block w-full pl-10 pr-3 py-3 border border-border placeholder-gray-500 rounded-md focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all sm:text-sm"
                   placeholder="Password"
                   value={password()}
                   onInput={(e) => setPassword(e.currentTarget.value)}
@@ -620,7 +620,7 @@ const LoginForm: Component<{
                   type="checkbox"
                   checked={rememberMe()}
                   onChange={(e) => setRememberMe(e.currentTarget.checked)}
-                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-border rounded cursor-pointer"
+                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-border rounded-sm cursor-pointer"
                 />
                 <label
                   for="remember-me"
@@ -638,11 +638,11 @@ const LoginForm: Component<{
                 class={`rounded-md p-4 ${
                   error().includes('locked')
                     ? 'bg-orange-50 dark:bg-orange-900'
-                    : 'bg-red-50 dark:bg-red-900'
+                    : 'bg-red-50 dark:bg-red-900/25'
                 }`}
               >
                 <div class="flex">
-                  <div class="flex-shrink-0">
+                  <div class="shrink-0">
                     <Show
                       when={error().includes('locked')}
                       fallback={
@@ -689,7 +689,7 @@ const LoginForm: Component<{
               <button
                 type="submit"
                 disabled={loading()}
-                class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
               >
                 <Show when={loading()}>
                   <LoadingSpinner size="button" tone="inverse" class="-ml-1 mr-3" />
@@ -703,7 +703,7 @@ const LoginForm: Component<{
           <div class="border-t border-border pt-4 text-center">
             <a
               href={TROUBLESHOOTING_DOC_URL}
-              class="inline-flex min-h-10 items-center rounded px-1 text-xs font-medium text-blue-700 underline-offset-2 transition-colors hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60 dark:text-blue-300 sm:min-h-9"
+              class="inline-flex min-h-10 items-center rounded-sm px-1 text-xs font-medium text-blue-700 underline-offset-2 transition-colors hover:underline focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500/60 dark:text-blue-300 sm:min-h-9"
             >
               Can’t sign in?
             </a>
diff --git a/frontend-modern/src/components/OrgSwitcher.tsx b/frontend-modern/src/components/OrgSwitcher.tsx
index 2d8c839676..27403d6d3d 100644
--- a/frontend-modern/src/components/OrgSwitcher.tsx
+++ b/frontend-modern/src/components/OrgSwitcher.tsx
@@ -34,7 +34,7 @@ export function OrgSwitcher(props: OrgSwitcherProps) {
           label="Organization"
           labelClass="sr-only"
           fieldBaseClass="contents"
-          selectBaseClass="h-7 max-w-44 rounded-md border border-border bg-surface px-2 text-xs text-base-content shadow-sm transition-colors focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-60"
+          selectBaseClass="h-7 max-w-44 rounded-md border border-border bg-surface px-2 text-xs text-base-content shadow-xs transition-colors focus:border-blue-500 focus:outline-hidden focus:ring-1 focus:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-60"
           aria-label="Organization"
           value={props.selectedOrgId}
           disabled={Boolean(props.loading)}
diff --git a/frontend-modern/src/components/SecurityWarning.tsx b/frontend-modern/src/components/SecurityWarning.tsx
index a64d12737b..d85c7eae09 100644
--- a/frontend-modern/src/components/SecurityWarning.tsx
+++ b/frontend-modern/src/components/SecurityWarning.tsx
@@ -128,7 +128,7 @@ export const SecurityWarning: Component = () => {
   return (
     <Show when={shouldShow()}>
       <div
-        class={`relative z-20 border-b shadow-sm ${warningPresentation().background} ${warningPresentation().border}`}
+        class={`relative z-20 border-b shadow-xs ${warningPresentation().background} ${warningPresentation().border}`}
         role="status"
         aria-live="polite"
       >
@@ -149,7 +149,7 @@ export const SecurityWarning: Component = () => {
                     </span>
                   }
                   size="sm"
-                  class="flex-1 min-w-[12rem]"
+                  class="flex-1 min-w-48"
                   titleClass="text-base-content"
                 />
                 <button
@@ -246,7 +246,7 @@ export const SecurityWarning: Component = () => {
                   >
                     Dismiss ▼
                   </button>
-                  <div class="absolute left-0 top-full mt-1 bg-surface rounded shadow-sm border border-border opacity-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto transition-opacity">
+                  <div class="absolute left-0 top-full mt-1 bg-surface rounded-sm shadow-xs border border-border opacity-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto transition-opacity">
                     <button
                       type="button"
                       onClick={() => handleDismiss('day')}
diff --git a/frontend-modern/src/components/Settings/AIChatMaintenanceSection.tsx b/frontend-modern/src/components/Settings/AIChatMaintenanceSection.tsx
index f35d1d61a9..6489e475e5 100644
--- a/frontend-modern/src/components/Settings/AIChatMaintenanceSection.tsx
+++ b/frontend-modern/src/components/Settings/AIChatMaintenanceSection.tsx
@@ -92,7 +92,7 @@ export const AIChatMaintenanceSection: Component<AIChatMaintenanceSectionProps>
                   fieldBaseClass="contents"
                   value={state.selectedSessionId()}
                   onChange={(e) => state.setSelectedSessionId(e.currentTarget.value)}
-                  selectBaseClass="w-full min-h-10 sm:min-h-9 px-2 py-2 text-sm border border-border rounded"
+                  selectBaseClass="w-full min-h-10 sm:min-h-9 px-2 py-2 text-sm border border-border rounded-sm"
                   disabled={state.saving()}
                 >
                   <For each={state.chatSessions()}>
@@ -116,7 +116,7 @@ export const AIChatMaintenanceSection: Component<AIChatMaintenanceSectionProps>
               type="button"
               onClick={state.handleSessionSummarize}
               disabled={!state.selectedSessionId() || state.sessionActionLoading() !== null}
-              class="w-full sm:w-auto min-h-10 sm:min-h-9 px-3 py-2 text-sm font-medium rounded border border-border bg-surface text-base-content hover:bg-surface-hover disabled:opacity-50"
+              class="w-full sm:w-auto min-h-10 sm:min-h-9 px-3 py-2 text-sm font-medium rounded-sm border border-border bg-surface text-base-content hover:bg-surface-hover disabled:opacity-50"
             >
               {state.sessionActionLoading() === 'summarize'
                 ? 'Summarizing...'
diff --git a/frontend-modern/src/components/Settings/AIModelSelectionSection.tsx b/frontend-modern/src/components/Settings/AIModelSelectionSection.tsx
index 4d00d95251..824c159422 100644
--- a/frontend-modern/src/components/Settings/AIModelSelectionSection.tsx
+++ b/frontend-modern/src/components/Settings/AIModelSelectionSection.tsx
@@ -132,13 +132,13 @@ export const PatrolModelReadinessControl: Component<{ state: AISettingsState }>
   const toneClasses = () => {
     switch (tone()) {
       case 'success':
-        return 'border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-900 text-green-700 dark:text-green-300';
+        return 'border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-900/25 text-green-700 dark:text-green-300';
       case 'warning':
-        return 'border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900 text-amber-700 dark:text-amber-300';
+        return 'border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/25 text-amber-700 dark:text-amber-300';
       case 'neutral':
         return 'border-border bg-surface-alt text-base-content';
       case 'error':
-        return 'border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900 text-red-700 dark:text-red-300';
+        return 'border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/25 text-red-700 dark:text-red-300';
       default:
         return '';
     }
@@ -268,8 +268,8 @@ export const PatrolModelReadinessControl: Component<{ state: AISettingsState }>
           disabled={state.saving()}
           class={`inline-flex min-h-9 items-center rounded-md px-3 py-1.5 text-sm disabled:opacity-50 whitespace-nowrap ${
             state.patrolModelReadinessRunning()
-              ? 'bg-amber-100 dark:bg-amber-900 text-amber-700 dark:text-amber-300 hover:bg-amber-200 dark:hover:bg-amber-800'
-              : 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-blue-800'
+              ? 'bg-amber-100 dark:bg-amber-900/25 text-amber-700 dark:text-amber-300 hover:bg-amber-200 dark:hover:bg-amber-800'
+              : 'bg-blue-100 dark:bg-blue-900/25 text-blue-700 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-blue-800'
           }`}
         >
           {state.patrolModelReadinessRunning() ? 'Cancel check' : 'Check Patrol model'}
@@ -282,7 +282,7 @@ export const PatrolModelReadinessControl: Component<{ state: AISettingsState }>
       </Show>
       <Show when={result()}>
         {(r) => (
-          <div class={`rounded border px-3 py-2 ${toneClasses()}`}>
+          <div class={`rounded-sm border px-3 py-2 ${toneClasses()}`}>
             <div class="flex items-baseline justify-between gap-2">
               <p class="text-xs font-medium">{headline()}</p>
               <Show when={r().duration_ms > 0}>
@@ -295,7 +295,7 @@ export const PatrolModelReadinessControl: Component<{ state: AISettingsState }>
             <div class="mt-2 grid gap-1 sm:grid-cols-2">
               <For each={dimensionRows()}>
                 {(dimension) => (
-                  <div class="rounded bg-white/40 px-2 py-1 dark:bg-black/10">
+                  <div class="rounded-sm bg-white/40 px-2 py-1 dark:bg-black/10">
                     <div class="flex items-center justify-between gap-2">
                       <span class="text-[11px]">{dimension.label}</span>
                       <span
@@ -312,7 +312,7 @@ export const PatrolModelReadinessControl: Component<{ state: AISettingsState }>
                 )}
               </For>
             </div>
-            <div class="mt-2 border-t border-current/15 pt-2">
+            <div class="mt-2 border-t pt-2">
               <p class="text-[11px] font-medium mb-1">Autonomy suitability</p>
               <div class="grid gap-1 sm:grid-cols-2">
                 <For each={modeRows()}>
@@ -378,11 +378,11 @@ export const PatrolModelReadinessControl: Component<{ state: AISettingsState }>
 const patrolCostToneClasses = (tone: PatrolCostTone) => {
   switch (tone) {
     case 'positive':
-      return 'border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-900 text-green-800 dark:text-green-200';
+      return 'border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-900/25 text-green-800 dark:text-green-200';
     case 'warning':
-      return 'border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900 text-amber-800 dark:text-amber-200';
+      return 'border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/25 text-amber-800 dark:text-amber-200';
     case 'danger':
-      return 'border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900 text-red-800 dark:text-red-200';
+      return 'border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/25 text-red-800 dark:text-red-200';
     default:
       return 'border-border bg-surface-alt text-base-content';
   }
@@ -411,7 +411,7 @@ export const PatrolCostPreview: Component<{ state: AISettingsState }> = (props)
     <Show when={presentation()}>
       {(view) => (
         <div
-          class={`mt-2 rounded border px-3 py-2 ${patrolCostToneClasses(view().tone)}`}
+          class={`mt-2 rounded-sm border px-3 py-2 ${patrolCostToneClasses(view().tone)}`}
           data-testid="patrol-cost-preview"
           role="status"
         >
@@ -583,12 +583,7 @@ export const AIModelOverrideField: Component<{
       <SelectedModelGuidanceNote annotation={selectedAnnotation} />
       <Show when={selectedModel() && !isModelProviderConfigured(selectedModel(), state.settings())}>
         <p class="text-xs text-amber-600 dark:text-amber-400 mt-1 flex items-center gap-1">
-          <svg
-            class="w-3.5 h-3.5 flex-shrink-0"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
+          <svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path
               stroke-linecap="round"
               stroke-linejoin="round"
@@ -701,12 +696,7 @@ export const AIModelSelectionSection: Component<AIModelSelectionSectionProps> =
         <SelectedModelGuidanceNote annotation={sharedSelectedAnnotation} />
         <Show when={state.modelsError()}>
           <p class="text-xs text-amber-600 dark:text-amber-400 mt-1 flex items-center gap-1">
-            <svg
-              class="w-3.5 h-3.5 flex-shrink-0"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
+            <svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
                 stroke-linecap="round"
                 stroke-linejoin="round"
@@ -722,12 +712,7 @@ export const AIModelSelectionSection: Component<AIModelSelectionSectionProps> =
           when={state.form.model && !isModelProviderConfigured(state.form.model, state.settings())}
         >
           <p class="text-xs text-amber-600 dark:text-amber-400 mt-1 flex items-center gap-1">
-            <svg
-              class="w-3.5 h-3.5 flex-shrink-0"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
+            <svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
                 stroke-linecap="round"
                 stroke-linejoin="round"
diff --git a/frontend-modern/src/components/Settings/AIProviderConfigurationSection.tsx b/frontend-modern/src/components/Settings/AIProviderConfigurationSection.tsx
index c995d7802c..066f8ccc46 100644
--- a/frontend-modern/src/components/Settings/AIProviderConfigurationSection.tsx
+++ b/frontend-modern/src/components/Settings/AIProviderConfigurationSection.tsx
@@ -78,7 +78,7 @@ export const AIProviderConfigurationSection: Component<AIProviderConfigurationSe
             type="button"
             onClick={() => void props.runProviderPreflight()}
             disabled={props.preflightRunning() || props.saving()}
-            class="inline-flex min-h-10 sm:min-h-9 items-center rounded-md px-3 py-2 text-sm bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-blue-800 disabled:opacity-50"
+            class="inline-flex min-h-10 sm:min-h-9 items-center rounded-md px-3 py-2 text-sm bg-blue-100 dark:bg-blue-900/25 text-blue-700 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-blue-800 disabled:opacity-50"
           >
             {props.preflightRunning() ? 'Checking...' : 'Run Preflight'}
           </button>
@@ -163,13 +163,13 @@ export const AIProviderConfigurationSection: Component<AIProviderConfigurationSe
                   <div class="flex items-center gap-2">
                     <span class="font-medium text-sm">{config.title}</span>
                     <Show when={configured()}>
-                      <span class="px-1.5 py-0.5 text-[10px] font-semibold bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 rounded">
+                      <span class="px-1.5 py-0.5 text-[10px] font-semibold bg-green-100 dark:bg-green-900/25 text-green-700 dark:text-green-300 rounded-sm">
                         {config.configuredLabel}
                       </span>
                     </Show>
                     <Show when={configured()}>
                       <span
-                        class={`px-1.5 py-0.5 text-[10px] font-semibold rounded ${getAIProviderHealthPresentation(health().status).badgeClass}`}
+                        class={`px-1.5 py-0.5 text-[10px] font-semibold rounded-sm ${getAIProviderHealthPresentation(health().status).badgeClass}`}
                       >
                         {getAIProviderHealthPresentation(health().status).label}
                       </span>
@@ -235,7 +235,7 @@ export const AIProviderConfigurationSection: Component<AIProviderConfigurationSe
                           }
                           disabled={props.saving()}
                           aria-label={`Enable ${getAIProviderDisplayName(config.provider)}`}
-                          class="mt-0.5 h-4 w-4 rounded border-border"
+                          class="mt-0.5 h-4 w-4 rounded-sm border-border"
                         />
                         <span>
                           Use this machine's existing subscription login. Pulse stores no OAuth
@@ -324,7 +324,7 @@ export const AIProviderConfigurationSection: Component<AIProviderConfigurationSe
                             type="button"
                             onClick={() => void props.handleTestProvider(config.provider)}
                             disabled={props.testingProvider() === config.provider || props.saving()}
-                            class="inline-flex min-h-10 sm:min-h-9 items-center rounded-md px-3 py-2 text-sm bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-blue-800 disabled:opacity-50"
+                            class="inline-flex min-h-10 sm:min-h-9 items-center rounded-md px-3 py-2 text-sm bg-blue-100 dark:bg-blue-900/25 text-blue-700 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-blue-800 disabled:opacity-50"
                           >
                             {props.testingProvider() === config.provider ? 'Testing...' : 'Test'}
                           </button>
@@ -332,7 +332,7 @@ export const AIProviderConfigurationSection: Component<AIProviderConfigurationSe
                             type="button"
                             onClick={() => void props.handleClearProvider(config.provider)}
                             disabled={props.saving()}
-                            class="inline-flex min-h-10 sm:min-h-9 items-center rounded-md px-3 py-2 text-sm bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300 hover:bg-red-200 dark:hover:bg-red-800 disabled:opacity-50"
+                            class="inline-flex min-h-10 sm:min-h-9 items-center rounded-md px-3 py-2 text-sm bg-red-100 dark:bg-red-900/25 text-red-700 dark:text-red-300 hover:bg-red-200 dark:hover:bg-red-800 disabled:opacity-50"
                             title={config.clearTitle}
                           >
                             Remove
diff --git a/frontend-modern/src/components/Settings/AIRuntimeControlsSection.tsx b/frontend-modern/src/components/Settings/AIRuntimeControlsSection.tsx
index 2c2699673c..97007862f1 100644
--- a/frontend-modern/src/components/Settings/AIRuntimeControlsSection.tsx
+++ b/frontend-modern/src/components/Settings/AIRuntimeControlsSection.tsx
@@ -42,7 +42,7 @@ export const AIDiscoveryControlsSection: Component<AIRuntimeControlsSectionProps
     <div class="rounded-md border border-blue-200 dark:border-blue-800 overflow-hidden">
       <button
         type="button"
-        class="w-full min-h-10 sm:min-h-9 px-3 py-2.5 flex items-center justify-between bg-blue-50 dark:bg-blue-900 hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors text-left"
+        class="w-full min-h-10 sm:min-h-9 px-3 py-2.5 flex items-center justify-between bg-blue-50 dark:bg-blue-900/25 hover:bg-blue-100 dark:hover:bg-blue-900/25 transition-colors text-left"
         onClick={() => state.setShowDiscoverySettings(!state.showDiscoverySettings())}
         aria-expanded={state.showDiscoverySettings()}
         aria-controls="ai-discovery-controls-panel"
@@ -63,14 +63,14 @@ export const AIDiscoveryControlsSection: Component<AIRuntimeControlsSectionProps
           </svg>
           <span class="text-sm font-medium text-base-content">Service Context</span>
           <Show when={state.form.discoveryEnabled}>
-            <span class="px-1.5 py-0.5 text-[10px] font-medium bg-blue-100 dark:bg-blue-800 text-blue-700 dark:text-blue-300 rounded">
+            <span class="px-1.5 py-0.5 text-[10px] font-medium bg-blue-100 dark:bg-blue-800 text-blue-700 dark:text-blue-300 rounded-sm">
               {state.form.discoveryIntervalHours > 0
                 ? `Auto ${state.form.discoveryIntervalHours}h`
                 : 'Manual only'}
             </span>
           </Show>
           <Show when={!state.form.discoveryEnabled}>
-            <span class="px-1.5 py-0.5 text-[10px] font-medium bg-surface-hover text-muted rounded">
+            <span class="px-1.5 py-0.5 text-[10px] font-medium bg-surface-hover text-muted rounded-sm">
               Off
             </span>
           </Show>
@@ -119,8 +119,8 @@ export const AIDiscoveryControlsSection: Component<AIRuntimeControlsSectionProps
                 disabled={state.saving()}
                 fieldBaseClass="flex"
                 fieldClass="items-center gap-3"
-                labelClass="text-xs font-medium text-muted w-32 flex-shrink-0"
-                selectBaseClass="flex-1 px-2 py-1 text-sm border border-border rounded bg-surface"
+                labelClass="text-xs font-medium text-muted w-32 shrink-0"
+                selectBaseClass="flex-1 px-2 py-1 text-sm border border-border rounded-sm bg-surface"
               >
                 <option value="0">Manual only</option>
                 <option value="6">Every 6 hours</option>
@@ -137,7 +137,7 @@ export const AIDiscoveryControlsSection: Component<AIRuntimeControlsSectionProps
             </div>
           </Show>
 
-          <div class="flex flex-col gap-2 rounded border border-border bg-surface-alt px-3 py-2 sm:flex-row sm:items-center sm:justify-between sm:gap-3">
+          <div class="flex flex-col gap-2 rounded-sm border border-border bg-surface-alt px-3 py-2 sm:flex-row sm:items-center sm:justify-between sm:gap-3">
             <p class="text-[10px] text-muted sm:flex-1">
               {state.form.discoveryEnabled && state.form.discoveryIntervalHours > 0
                 ? 'Runs the same scan used by the schedule.'
@@ -147,7 +147,7 @@ export const AIDiscoveryControlsSection: Component<AIRuntimeControlsSectionProps
             </p>
             <button
               type="button"
-              class="inline-flex min-h-10 items-center gap-1.5 self-start rounded-md border border-border px-3 py-1.5 text-xs font-medium text-base-content hover:bg-surface-hover disabled:cursor-not-allowed disabled:opacity-50 sm:min-h-9 sm:self-auto sm:flex-shrink-0"
+              class="inline-flex min-h-10 items-center gap-1.5 self-start rounded-md border border-border px-3 py-1.5 text-xs font-medium text-base-content hover:bg-surface-hover disabled:cursor-not-allowed disabled:opacity-50 sm:min-h-9 sm:self-auto sm:shrink-0"
               onClick={() => void state.handleRunDiscoveryRefresh()}
               disabled={state.saving() || state.discoveryRunRunning()}
             >
@@ -177,7 +177,7 @@ export const AIProviderRuntimeControlsSection: Component<AIRuntimeControlsSectio
     <div class="grid gap-3 lg:grid-cols-2">
       <div class="flex items-center gap-3 p-3 rounded-md border border-border bg-surface-alt">
         <svg
-          class="w-4 h-4 text-muted flex-shrink-0"
+          class="w-4 h-4 text-muted shrink-0"
           fill="none"
           stroke="currentColor"
           viewBox="0 0 24 24"
@@ -192,12 +192,12 @@ export const AIProviderRuntimeControlsSection: Component<AIRuntimeControlsSectio
         <label for="ai-cost-budget" class="text-xs font-medium text-base-content">
           30-day Budget
         </label>
-        <div class="relative flex-shrink-0">
+        <div class="relative shrink-0">
           <span class="absolute left-2 top-1/2 -translate-y-1/2 text-muted text-xs">$</span>
           <input
             id="ai-cost-budget"
             type="number"
-            class="w-24 min-h-10 sm:min-h-9 pl-5 pr-2 py-2 text-sm border border-border rounded bg-surface"
+            class="w-24 min-h-10 sm:min-h-9 pl-5 pr-2 py-2 text-sm border border-border rounded-sm bg-surface"
             value={state.form.costBudgetUSD30d}
             onInput={(e) => state.setForm('costBudgetUSD30d', e.currentTarget.value)}
             min={0}
@@ -219,7 +219,7 @@ export const AIProviderRuntimeControlsSection: Component<AIRuntimeControlsSectio
       <div class="flex flex-col gap-1">
         <div class="flex items-center gap-3 p-3 rounded-md border border-border bg-surface-alt">
           <svg
-            class="w-4 h-4 text-muted flex-shrink-0"
+            class="w-4 h-4 text-muted shrink-0"
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24"
@@ -237,7 +237,7 @@ export const AIProviderRuntimeControlsSection: Component<AIRuntimeControlsSectio
           <input
             id="ai-request-timeout"
             type="number"
-            class="w-20 min-h-10 sm:min-h-9 px-2 py-2 text-sm border border-border rounded bg-surface"
+            class="w-20 min-h-10 sm:min-h-9 px-2 py-2 text-sm border border-border rounded-sm bg-surface"
             value={state.form.requestTimeoutSeconds}
             onInput={(e) => {
               const value = parseInt(e.currentTarget.value, 10);
@@ -302,7 +302,7 @@ export const AIAssistantCommandAccessSection: Component<AIRuntimeControlsSection
           </span>
           <Show when={state.form.controlLevel !== 'read_only'}>
             <span
-              class={`px-1.5 py-0.5 text-[10px] font-medium rounded ${getAIControlLevelBadgeClass(state.form.controlLevel)}`}
+              class={`px-1.5 py-0.5 text-[10px] font-medium rounded-sm ${getAIControlLevelBadgeClass(state.form.controlLevel)}`}
             >
               {assistantCommandAccessBadgeLabel()}
             </span>
@@ -321,8 +321,8 @@ export const AIAssistantCommandAccessSection: Component<AIRuntimeControlsSection
           disabled={state.saving()}
           fieldBaseClass="flex flex-col gap-2 sm:flex-row"
           fieldClass="sm:items-center sm:gap-3"
-          labelClass="text-xs font-medium text-muted sm:w-28 sm:flex-shrink-0"
-          selectBaseClass="w-full min-w-0 min-h-10 px-2 py-2 text-sm border border-border rounded bg-surface sm:min-h-9 sm:flex-1"
+          labelClass="text-xs font-medium text-muted sm:w-28 sm:shrink-0"
+          selectBaseClass="w-full min-w-0 min-h-10 px-2 py-2 text-sm border border-border rounded-sm bg-surface sm:min-h-9 sm:flex-1"
         >
           <option value="read_only">Observe only - Assistant cannot take chat actions</option>
           <option value="controlled">Ask first - Assistant asks before chat-only actions</option>
@@ -332,11 +332,11 @@ export const AIAssistantCommandAccessSection: Component<AIRuntimeControlsSection
             </option>
           </Show>
         </FormSelect>
-        <p class="text-[10px] text-muted sm:ml-[7.5rem]">
+        <p class="text-[10px] text-muted sm:ml-30">
           {getAIControlLevelDescription(state.form.controlLevel)}
         </p>
         <Show when={state.form.controlLevel === 'autonomous'}>
-          <div class="p-2 bg-amber-100 dark:bg-amber-900 rounded border border-amber-200 dark:border-amber-800 text-[10px] text-amber-800 dark:text-amber-200">
+          <div class="p-2 bg-amber-100 dark:bg-amber-900/25 rounded-sm border border-amber-200 dark:border-amber-800 text-[10px] text-amber-800 dark:text-amber-200">
             <strong>Important:</strong> Assistant may take eligible chat-only actions from this
             mode. Infrastructure changes stay with Patrol mode. Keep protected guests set for
             anything Assistant must not touch. See{' '}
@@ -368,7 +368,7 @@ export const AIAssistantCommandAccessSection: Component<AIRuntimeControlsSection
           <div class="flex items-start gap-3 pt-2 border-t border-blue-200 dark:border-blue-700">
             <label
               for="ai-protected-guests"
-              class="text-xs font-medium text-muted w-28 flex-shrink-0 pt-1"
+              class="text-xs font-medium text-muted w-28 shrink-0 pt-1"
             >
               Protected guests
             </label>
@@ -379,7 +379,7 @@ export const AIAssistantCommandAccessSection: Component<AIRuntimeControlsSection
                 value={state.form.protectedGuests}
                 onInput={(e) => state.setForm('protectedGuests', e.currentTarget.value)}
                 placeholder="e.g., 100, 101, prod-db"
-                class="w-full min-h-10 sm:min-h-9 px-2 py-2 text-sm border border-border rounded"
+                class="w-full min-h-10 sm:min-h-9 px-2 py-2 text-sm border border-border rounded-sm"
                 disabled={state.saving()}
               />
               <p class="text-[10px] text-muted mt-1">
diff --git a/frontend-modern/src/components/Settings/AISettings.tsx b/frontend-modern/src/components/Settings/AISettings.tsx
index 4f05bed684..931653fdec 100644
--- a/frontend-modern/src/components/Settings/AISettings.tsx
+++ b/frontend-modern/src/components/Settings/AISettings.tsx
@@ -142,7 +142,7 @@ const PatrolSettingsContent: Component<{ state: ReturnType<typeof useAISettingsS
           </div>
           <button
             type="button"
-            class="inline-flex min-h-10 items-center justify-center rounded-md border border-blue-300 px-3 py-2 text-sm font-medium text-blue-700 hover:bg-blue-50 dark:border-blue-700 dark:text-blue-300 dark:hover:bg-blue-900 sm:min-h-9"
+            class="inline-flex min-h-10 items-center justify-center rounded-md border border-blue-300 px-3 py-2 text-sm font-medium text-blue-700 hover:bg-blue-50 dark:border-blue-700 dark:text-blue-300 dark:hover:bg-blue-900/25 sm:min-h-9"
             onClick={() => navigate(PATROL_PATH)}
           >
             Open Patrol
@@ -342,7 +342,7 @@ const AssistantSettingsContent: Component<{ state: ReturnType<typeof useAISettin
     <AIModelOverrideField state={props.state} kind="assistant" />
     <AIAssistantCommandAccessSection state={props.state} />
     <AIChatMaintenanceSection state={props.state} />
-    <details class="overflow-hidden rounded-md border border-border bg-surface-alt/40">
+    <details class="overflow-hidden rounded-md border border-border">
       <summary class="cursor-pointer list-none px-4 py-3 text-sm font-semibold text-base-content hover:bg-surface-hover">
         Service identification
         <span class="ml-2 font-normal text-muted">
@@ -459,7 +459,7 @@ export const AISettings: Component<{ page?: AISettingsPage }> = (props) => {
               >
                 <div class="flex items-center gap-2 text-sm text-red-700 dark:text-red-300">
                   <svg
-                    class="h-4 w-4 flex-shrink-0"
+                    class="h-4 w-4 shrink-0"
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor"
@@ -475,7 +475,7 @@ export const AISettings: Component<{ page?: AISettingsPage }> = (props) => {
                 </div>
                 <button
                   type="button"
-                  class="flex-shrink-0 px-3 py-1.5 text-sm font-medium text-red-700 dark:text-red-300 border border-red-300 dark:border-red-700 rounded-md hover:bg-red-100 dark:hover:bg-red-900/50"
+                  class="shrink-0 px-3 py-1.5 text-sm font-medium text-red-700 dark:text-red-300 border border-red-300 dark:border-red-700 rounded-md hover:bg-red-100 dark:hover:bg-red-900/50"
                   onClick={() => state.loadSettings()}
                 >
                   {getAISettingsRetryLabel()}
diff --git a/frontend-modern/src/components/Settings/AISettingsStatusAndActions.tsx b/frontend-modern/src/components/Settings/AISettingsStatusAndActions.tsx
index a569fbcefa..54f99f5537 100644
--- a/frontend-modern/src/components/Settings/AISettingsStatusAndActions.tsx
+++ b/frontend-modern/src/components/Settings/AISettingsStatusAndActions.tsx
@@ -45,7 +45,7 @@ export const AISettingsStatusAndActions: Component<AISettingsStatusAndActionsPro
         <Show when={props.showConnectionControls && state.settings()?.configured}>
           <button
             type="button"
-            class="w-full sm:w-auto min-h-10 sm:min-h-9 px-4 py-2.5 text-sm border border-blue-300 dark:border-blue-700 text-blue-700 dark:text-blue-300 rounded-md hover:bg-blue-50 dark:hover:bg-blue-900 disabled:opacity-50 disabled:cursor-not-allowed"
+            class="w-full sm:w-auto min-h-10 sm:min-h-9 px-4 py-2.5 text-sm border border-blue-300 dark:border-blue-700 text-blue-700 dark:text-blue-300 rounded-md hover:bg-blue-50 dark:hover:bg-blue-900/25 disabled:opacity-50 disabled:cursor-not-allowed"
             onClick={state.handleTest}
             disabled={state.testing() || state.saving() || state.loading()}
           >
diff --git a/frontend-modern/src/components/Settings/APITokenManager.tsx b/frontend-modern/src/components/Settings/APITokenManager.tsx
index 921e64e832..fe46282b94 100644
--- a/frontend-modern/src/components/Settings/APITokenManager.tsx
+++ b/frontend-modern/src/components/Settings/APITokenManager.tsx
@@ -217,7 +217,7 @@ export const APITokenManager: Component<APITokenManagerProps> = (props) => {
               <span
                 class={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${
                   isWildcard
-                    ? 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200'
+                    ? 'bg-amber-100 text-amber-800 dark:bg-amber-900/25 dark:text-amber-200'
                     : 'bg-surface-alt text-base-content'
                 }`}
                 title={scope.value}
@@ -259,7 +259,7 @@ export const APITokenManager: Component<APITokenManagerProps> = (props) => {
       >
         <span class="text-muted">{usageSummary}</span>
         <Show when={agentUsageEntry && agentUsageEntry.count > 1}>
-          <span class="inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-semibold text-amber-800 dark:bg-amber-900 dark:text-amber-200">
+          <span class="inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-semibold text-amber-800 dark:bg-amber-900/25 dark:text-amber-200">
             <svg class="h-3 w-3" viewBox="0 0 20 20" fill="currentColor">
               <path
                 fill-rule="evenodd"
@@ -288,7 +288,7 @@ export const APITokenManager: Component<APITokenManagerProps> = (props) => {
         data-api-token-action="edit-scopes"
         onClick={(event) => openScopeEditor(token, event.currentTarget)}
         disabled={!canManage()}
-        class={`inline-flex min-h-10 items-center justify-center rounded-md px-2.5 py-1.5 text-sm font-semibold text-blue-600 transition hover:bg-blue-50 hover:text-blue-700 disabled:cursor-not-allowed disabled:opacity-60 dark:text-blue-300 dark:hover:bg-blue-900 dark:hover:text-blue-200 ${
+        class={`inline-flex min-h-10 items-center justify-center rounded-md px-2.5 py-1.5 text-sm font-semibold text-blue-600 transition hover:bg-blue-50 hover:text-blue-700 disabled:cursor-not-allowed disabled:opacity-60 dark:text-blue-300 dark:hover:bg-blue-900/25 dark:hover:text-blue-200 ${
           compact ? 'flex-1 border border-blue-200 dark:border-blue-800' : 'sm:min-h-9'
         }`}
       >
@@ -300,7 +300,7 @@ export const APITokenManager: Component<APITokenManagerProps> = (props) => {
         data-api-token-action="rename"
         onClick={(event) => openRenameDialog(token, event.currentTarget)}
         disabled={!canManage()}
-        class={`inline-flex min-h-10 items-center justify-center rounded-md px-2.5 py-1.5 text-sm font-semibold text-blue-600 transition hover:bg-blue-50 hover:text-blue-700 disabled:cursor-not-allowed disabled:opacity-60 dark:text-blue-300 dark:hover:bg-blue-900 dark:hover:text-blue-200 ${
+        class={`inline-flex min-h-10 items-center justify-center rounded-md px-2.5 py-1.5 text-sm font-semibold text-blue-600 transition hover:bg-blue-50 hover:text-blue-700 disabled:cursor-not-allowed disabled:opacity-60 dark:text-blue-300 dark:hover:bg-blue-900/25 dark:hover:text-blue-200 ${
           compact ? 'flex-1 border border-blue-200 dark:border-blue-800' : 'sm:min-h-9'
         }`}
       >
@@ -312,8 +312,8 @@ export const APITokenManager: Component<APITokenManagerProps> = (props) => {
         data-api-token-action="revoke"
         onClick={(event) => openRevokeDialog(token, event.currentTarget)}
         disabled={!canManage()}
-        class={`inline-flex min-h-10 items-center justify-center rounded-md px-2.5 py-1.5 text-sm font-semibold text-red-600 transition hover:bg-red-50 hover:text-red-700 disabled:cursor-not-allowed disabled:opacity-60 dark:text-red-400 dark:hover:bg-red-900 dark:hover:text-red-300 ${
-          compact ? 'flex-1 border border-red-200 dark:border-red-900' : 'sm:min-h-9'
+        class={`inline-flex min-h-10 items-center justify-center rounded-md px-2.5 py-1.5 text-sm font-semibold text-red-600 transition hover:bg-red-50 hover:text-red-700 disabled:cursor-not-allowed disabled:opacity-60 dark:text-red-400 dark:hover:bg-red-900/25 dark:hover:text-red-300 ${
+          compact ? 'flex-1 border border-red-200 dark:border-red-900/25' : 'sm:min-h-9'
         }`}
       >
         Revoke
@@ -323,7 +323,7 @@ export const APITokenManager: Component<APITokenManagerProps> = (props) => {
 
   return (
     <div class="space-y-5">
-      <Card padding="none" class="border border-border shadow-sm">
+      <Card padding="none" class="border border-border shadow-xs">
         <div class="flex flex-col gap-6 p-4 sm:p-6 lg:p-8">
           <div class="flex flex-wrap items-center justify-between gap-4">
             <div class="flex flex-wrap items-center gap-3">
@@ -342,7 +342,7 @@ export const APITokenManager: Component<APITokenManagerProps> = (props) => {
               type="button"
               onClick={focusCreateSection}
               disabled={!canManage()}
-              class="inline-flex min-h-10 sm:min-h-10 items-center gap-2 rounded-md bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-blue-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1 focus-visible:ring-offset-white"
+              class="inline-flex min-h-10 sm:min-h-10 items-center gap-2 rounded-md bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white shadow-xs transition hover:bg-blue-700 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1 focus-visible:ring-offset-white"
             >
               <svg
                 class="h-4 w-4"
@@ -369,14 +369,14 @@ export const APITokenManager: Component<APITokenManagerProps> = (props) => {
           </Show>
 
           <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
-            <div class="rounded-md border border-border p-4 text-sm shadow-sm">
+            <div class="rounded-md border border-border p-4 text-sm shadow-xs">
               <div class="text-[0.7rem] font-semibold uppercase tracking-wide text-muted">
                 Total tokens
               </div>
               <div class="mt-1 text-2xl font-semibold text-base-content">{totalTokens()}</div>
               <p class="mt-1 text-xs text-muted">Stored credentials across all agents</p>
             </div>
-            <div class="rounded-md border border-border p-4 text-sm shadow-sm">
+            <div class="rounded-md border border-border p-4 text-sm shadow-xs">
               <div class="text-[0.7rem] font-semibold uppercase tracking-wide text-muted">
                 Scoped tokens
               </div>
@@ -384,7 +384,7 @@ export const APITokenManager: Component<APITokenManagerProps> = (props) => {
               <p class="mt-1 text-xs text-muted">Limited access tokens with defined scopes</p>
             </div>
             <div
-              class={`rounded-md border p-4 text-sm shadow-sm ${hasWildcardTokens() ? 'border-amber-300 bg-amber-50 text-amber-900 dark:border-amber-700 dark:bg-amber-900 dark:text-amber-100' : 'border-border bg-surface text-base-content'}`}
+              class={`rounded-md border p-4 text-sm shadow-xs ${hasWildcardTokens() ? 'border-amber-300 bg-amber-50 text-amber-900/25 dark:border-amber-700 dark:bg-amber-900/25 dark:text-amber-100' : 'border-border bg-surface text-base-content'}`}
             >
               <div
                 class={`text-[0.7rem] font-semibold uppercase tracking-wide ${
@@ -440,7 +440,7 @@ export const APITokenManager: Component<APITokenManagerProps> = (props) => {
               <button
                 onClick={reopenTokenDialog}
                 disabled={!canManage()}
-                class="font-medium underline decoration-green-500 underline-offset-2 hover:text-green-900 dark:hover:text-green-100"
+                class="font-medium underline decoration-green-500 underline-offset-2 hover:text-green-900/25 dark:hover:text-green-100"
               >
                 Show
               </button>
@@ -448,7 +448,7 @@ export const APITokenManager: Component<APITokenManagerProps> = (props) => {
                 onClick={() => {
                   dismissNewToken();
                 }}
-                class="font-medium underline decoration-green-500 underline-offset-2 hover:text-green-900 dark:hover:text-green-100"
+                class="font-medium underline decoration-green-500 underline-offset-2 hover:text-green-900/25 dark:hover:text-green-100"
               >
                 Dismiss
               </button>
@@ -461,20 +461,20 @@ export const APITokenManager: Component<APITokenManagerProps> = (props) => {
               newTokenRecord()?.scopes?.[0] === MONITORING_READ_SCOPE
             }
           >
-            <div class="rounded-md border border-blue-200 bg-blue-50 p-4 text-sm text-blue-900 shadow-sm dark:border-blue-800 dark:bg-blue-900 dark:text-blue-100">
+            <div class="rounded-md border border-blue-200 bg-blue-50 p-4 text-sm text-blue-900/25 shadow-xs dark:border-blue-800 dark:bg-blue-900/25 dark:text-blue-100">
               <div class="mb-2 font-semibold">Magic Kiosk Link</div>
               <p class="mb-3 text-xs text-blue-700 dark:text-blue-300">
                 Use this link to open Pulse directly in Kiosk mode without logging in. Perfect for
                 wall displays and digital signage.
               </p>
               <div class="flex items-center gap-2">
-                <code class="flex-1 rounded border border-blue-200 bg-surface px-3 py-2 font-mono text-xs text-blue-800 dark:border-blue-800 dark:bg-black dark:text-blue-200 break-all">
+                <code class="flex-1 rounded-sm border border-blue-200 bg-surface px-3 py-2 font-mono text-xs text-blue-800 dark:border-blue-800 dark:bg-black dark:text-blue-200 break-all">
                   {newMonitoringKioskLink()}
                 </code>
                 <button
                   type="button"
                   onClick={() => void copyNewMonitoringKioskLink()}
-                  class="flex-shrink-0 rounded-md bg-blue-600 px-3 py-2 text-xs font-semibold text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 dark:bg-blue-600 dark:hover:bg-blue-500"
+                  class="shrink-0 rounded-md bg-blue-600 px-3 py-2 text-xs font-semibold text-white shadow-xs hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 dark:bg-blue-600 dark:hover:bg-blue-500"
                 >
                   Copy Link
                 </button>
@@ -516,7 +516,7 @@ export const APITokenManager: Component<APITokenManagerProps> = (props) => {
               type="button"
               onClick={focusCreateSection}
               disabled={!canManage()}
-              class="inline-flex min-h-10 sm:min-h-10 items-center gap-2 rounded-md border border-blue-200 px-3 py-2 text-sm font-semibold text-blue-600 transition hover:bg-blue-50 dark:border-blue-700 dark:text-blue-200 dark:hover:bg-blue-900"
+              class="inline-flex min-h-10 sm:min-h-10 items-center gap-2 rounded-md border border-blue-200 px-3 py-2 text-sm font-semibold text-blue-600 transition hover:bg-blue-50 dark:border-blue-700 dark:text-blue-200 dark:hover:bg-blue-900/25"
             >
               Generate new
             </button>
@@ -535,7 +535,7 @@ export const APITokenManager: Component<APITokenManagerProps> = (props) => {
                 >
                   <div class="flex min-w-0 items-start justify-between gap-3">
                     <div class="min-w-0">
-                      <h5 class="break-words text-sm font-semibold text-base-content">
+                      <h5 class="wrap-break-word text-sm font-semibold text-base-content">
                         {token.name || 'Untitled'}
                       </h5>
                       <div class="mt-1 font-mono text-xs text-muted">{tokenHint(token)}</div>
@@ -641,7 +641,7 @@ export const APITokenManager: Component<APITokenManagerProps> = (props) => {
         id={API_TOKEN_CREATE_ANCHOR}
         padding="none"
         class={`border border-border transition-shadow ${
-          createHighlight() ? 'ring-2 ring-blue-500 shadow-sm' : ''
+          createHighlight() ? 'ring-2 ring-blue-500 shadow-xs' : ''
         }`}
         ref={setCreateSectionRef}
       >
@@ -661,7 +661,7 @@ export const APITokenManager: Component<APITokenManagerProps> = (props) => {
                   ? undefined
                   : 'Choose a scope preset or custom scope before generating a token.'
               }
-              class="inline-flex min-h-11 w-full items-center justify-center rounded-md bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60 sm:min-h-10 sm:w-auto dark:bg-blue-500 dark:hover:bg-blue-400"
+              class="inline-flex min-h-11 w-full items-center justify-center rounded-md bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white shadow-xs transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60 sm:min-h-10 sm:w-auto dark:bg-blue-500 dark:hover:bg-blue-400"
             >
               {isGenerating() ? 'Generating…' : 'Generate'}
             </button>
@@ -682,7 +682,7 @@ export const APITokenManager: Component<APITokenManagerProps> = (props) => {
                 onInput={(e) => setNameInput(e.currentTarget.value)}
                 placeholder={API_TOKEN_NAME_PLACEHOLDER}
                 disabled={!canManage()}
-                class="w-full min-h-10 sm:min-h-10 rounded-md border border-border bg-surface px-3 py-2.5 text-sm text-base-content shadow-sm transition focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:focus:border-blue-400 dark:focus:ring-blue-500"
+                class="w-full min-h-10 sm:min-h-10 rounded-md border border-border bg-surface px-3 py-2.5 text-sm text-base-content shadow-xs transition focus:border-blue-500 focus:outline-hidden focus:ring-2 focus:ring-blue-200 dark:focus:border-blue-400 dark:focus:ring-blue-500"
               />
             </div>
 
diff --git a/frontend-modern/src/components/Settings/APITokenManagerDialogs.tsx b/frontend-modern/src/components/Settings/APITokenManagerDialogs.tsx
index 4f7107fd3c..ee4cf50d0b 100644
--- a/frontend-modern/src/components/Settings/APITokenManagerDialogs.tsx
+++ b/frontend-modern/src/components/Settings/APITokenManagerDialogs.tsx
@@ -44,16 +44,16 @@ export const APITokenManagerDialogs: Component<APITokenManagerDialogsProps> = (p
             </p>
           </div>
 
-          <label class="flex cursor-pointer items-start gap-3 rounded-md border border-amber-300 bg-amber-50 p-3 text-sm dark:border-amber-700 dark:bg-amber-900">
+          <label class="flex cursor-pointer items-start gap-3 rounded-md border border-amber-300 bg-amber-50 p-3 text-sm dark:border-amber-700 dark:bg-amber-900/25">
             <input
               type="checkbox"
               checked={props.editScopes().includes('*')}
               onChange={() => props.onToggleEditScope('*')}
               disabled={props.updatingTokenId() !== null}
-              class="mt-0.5 h-4 w-4 rounded border-border text-amber-600 focus:ring-amber-500"
+              class="mt-0.5 h-4 w-4 rounded-sm border-border text-amber-600 focus:ring-amber-500"
             />
             <span>
-              <span class="block font-semibold text-amber-900 dark:text-amber-100">
+              <span class="block font-semibold text-amber-900/25 dark:text-amber-100">
                 Full access
               </span>
               <span class="text-amber-800 dark:text-amber-200">
@@ -78,7 +78,7 @@ export const APITokenManagerDialogs: Component<APITokenManagerDialogsProps> = (p
                             checked={props.editScopes().includes(option.value)}
                             onChange={() => props.onToggleEditScope(option.value)}
                             disabled={props.updatingTokenId() !== null}
-                            class="mt-0.5 h-4 w-4 rounded border-border text-blue-600 focus:ring-blue-500"
+                            class="mt-0.5 h-4 w-4 rounded-sm border-border text-blue-600 focus:ring-blue-500"
                           />
                           <span>
                             <span class="block font-medium text-base-content">{option.label}</span>
@@ -151,7 +151,7 @@ export const APITokenManagerDialogs: Component<APITokenManagerDialogsProps> = (p
               value={props.renameInput()}
               onInput={(event) => props.onRenameInput(event.currentTarget.value)}
               disabled={props.isRenaming()}
-              class="w-full min-h-10 rounded-md border border-border bg-surface px-3 py-2 text-sm text-base-content shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
+              class="w-full min-h-10 rounded-md border border-border bg-surface px-3 py-2 text-sm text-base-content shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-2 focus:ring-blue-200"
               autofocus
             />
           </label>
diff --git a/frontend-modern/src/components/Settings/AgentIntegrationsPanel.tsx b/frontend-modern/src/components/Settings/AgentIntegrationsPanel.tsx
index 7c49e4d086..5dff1e4314 100644
--- a/frontend-modern/src/components/Settings/AgentIntegrationsPanel.tsx
+++ b/frontend-modern/src/components/Settings/AgentIntegrationsPanel.tsx
@@ -204,7 +204,7 @@ export const AgentIntegrationsPanel: Component = () => {
       title="External agents"
       noPadding
       class={`scroll-mt-20 transition-shadow ${
-        panelHighlight() ? 'ring-2 ring-blue-500 shadow-sm' : ''
+        panelHighlight() ? 'ring-2 ring-blue-500 shadow-xs' : ''
       }`}
     >
       <span id={PULSE_MCP_SETUP_ANCHOR} class="sr-only" aria-hidden="true" />
@@ -294,7 +294,7 @@ export const AgentIntegrationsPanel: Component = () => {
               </li>
             </ol>
             <details
-              class="rounded-md border border-border bg-surface-alt/40 p-3"
+              class="rounded-md border border-border p-3"
               onToggle={(event) => setInstallerCommandsOpen(event.currentTarget.open)}
             >
               <summary class="cursor-pointer text-sm font-semibold text-base-content">
@@ -326,7 +326,7 @@ export const AgentIntegrationsPanel: Component = () => {
               </Show>
             </details>
             <details
-              class="rounded-md border border-border bg-surface-alt/40 p-3"
+              class="rounded-md border border-border p-3"
               onToggle={(event) => setClientConfigOpen(event.currentTarget.open)}
             >
               <summary class="cursor-pointer text-sm font-semibold text-base-content">
@@ -379,7 +379,7 @@ export const AgentIntegrationsPanel: Component = () => {
             </details>
             <Show when={hasClientBuilderDetails()}>
               <details
-                class="rounded-md border border-border bg-surface-alt/40 p-3"
+                class="rounded-md border border-border p-3"
                 onToggle={(event) => setAdvancedClientDetailsOpen(event.currentTarget.open)}
               >
                 <summary class="cursor-pointer text-sm font-semibold text-base-content">
@@ -405,7 +405,7 @@ export const AgentIntegrationsPanel: Component = () => {
                           />
                           <span>
                             External agents expose {posture().label}{' '}
-                            <span class="text-muted/80">through Patrol mode</span>
+                            <span class="">through Patrol mode</span>
                           </span>
                         </div>
                       )}
@@ -420,7 +420,7 @@ export const AgentIntegrationsPanel: Component = () => {
                             Built-in Pulse views and connected clients all sit behind the same
                             Patrol policy. Connected agents do not get separate powers.
                           </p>
-                          <ul class="divide-y divide-border rounded-md border border-border bg-surface-alt/40">
+                          <ul class="divide-y divide-border rounded-md border border-border">
                             <For each={surfaceContractEntries()}>
                               {(entry) => (
                                 <li class="space-y-1 p-3">
@@ -460,7 +460,7 @@ export const AgentIntegrationsPanel: Component = () => {
                             build clients against this instance. They do not change Patrol mode.
                           </p>
                           <Show when={workflowPrompts().length > 0}>
-                            <details class="rounded-md border border-border bg-surface-alt/40 p-3">
+                            <details class="rounded-md border border-border p-3">
                               <summary class="cursor-pointer text-sm font-semibold text-base-content">
                                 <span>Agent starting points</span>{' '}
                                 <span class="ml-2 text-xs font-normal text-muted">
@@ -481,7 +481,7 @@ export const AgentIntegrationsPanel: Component = () => {
                                               prompt.name === AGENT_WORKFLOW_PROMPT_OPERATIONS_LOOP
                                             }
                                           >
-                                            <span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-300">
+                                            <span class="rounded-full border border-emerald-200 bg-emerald-50 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950/25 dark:text-emerald-300">
                                               Patrol
                                             </span>
                                           </Show>
@@ -532,7 +532,7 @@ export const AgentIntegrationsPanel: Component = () => {
                             </p>
                           </Show>
                           <Show when={errorCodeSummaries().length > 0}>
-                            <details class="rounded-md border border-border bg-surface-alt/40 p-3 text-xs text-muted">
+                            <details class="rounded-md border border-border p-3 text-xs text-muted">
                               <summary class="cursor-pointer text-sm font-semibold text-base-content">
                                 Failure codes{' '}
                                 <span class="ml-2 text-xs font-normal text-muted">
@@ -571,7 +571,7 @@ export const AgentIntegrationsPanel: Component = () => {
                             design notes.
                           </p>
                           <Show when={manifest() && grouped().length > 0}>
-                            <details class="rounded-md border border-border bg-surface-alt/40 p-3">
+                            <details class="rounded-md border border-border p-3">
                               <summary class="cursor-pointer text-sm font-semibold text-base-content">
                                 Agent capabilities{' '}
                                 <span class="ml-2 text-xs font-normal text-muted">
diff --git a/frontend-modern/src/components/Settings/AgentProfilesPanel.tsx b/frontend-modern/src/components/Settings/AgentProfilesPanel.tsx
index 122c689c16..5b398e98ed 100644
--- a/frontend-modern/src/components/Settings/AgentProfilesPanel.tsx
+++ b/frontend-modern/src/components/Settings/AgentProfilesPanel.tsx
@@ -87,7 +87,7 @@ export const AgentProfilesPanel: Component = () => {
           <Show when={showUpgradePrompts()}>
             <Card padding="lg" class="space-y-4">
               <div class="flex items-center gap-3">
-                <div class="flex items-center justify-center w-10 h-10 rounded-md bg-amber-100 dark:bg-amber-900">
+                <div class="flex items-center justify-center w-10 h-10 rounded-md bg-amber-100 dark:bg-amber-900/25">
                   <Crown class="w-5 h-5 text-amber-600 dark:text-amber-400" />
                 </div>
                 <div>
@@ -198,7 +198,7 @@ export const AgentProfilesPanel: Component = () => {
                         <button
                           type="button"
                           onClick={() => handleEdit(profile)}
-                          class="inline-flex min-h-11 min-w-11 items-center justify-center rounded-md p-1.5 hover:text-blue-600 hover:bg-blue-50 sm:min-h-0 sm:min-w-0 dark:hover:text-blue-400 dark:hover:bg-blue-900"
+                          class="inline-flex min-h-11 min-w-11 items-center justify-center rounded-md p-1.5 hover:text-blue-600 hover:bg-blue-50 sm:min-h-0 sm:min-w-0 dark:hover:text-blue-400 dark:hover:bg-blue-900/25"
                           title="Edit profile"
                         >
                           <Pencil class="w-4 h-4" />
@@ -206,7 +206,7 @@ export const AgentProfilesPanel: Component = () => {
                         <button
                           type="button"
                           onClick={() => handleDelete(profile)}
-                          class="inline-flex min-h-11 min-w-11 items-center justify-center rounded-md p-1.5 hover:text-red-600 hover:bg-red-50 sm:min-h-0 sm:min-w-0 dark:hover:text-red-400 dark:hover:bg-red-900"
+                          class="inline-flex min-h-11 min-w-11 items-center justify-center rounded-md p-1.5 hover:text-red-600 hover:bg-red-50 sm:min-h-0 sm:min-w-0 dark:hover:text-red-400 dark:hover:bg-red-900/25"
                           title="Delete profile"
                         >
                           <Trash2 class="w-4 h-4" />
@@ -268,7 +268,7 @@ export const AgentProfilesPanel: Component = () => {
                           fieldBaseClass="contents"
                           value={assignment()?.profile_id || ''}
                           onChange={(e) => handleAssign(agent.assignmentId, e.currentTarget.value)}
-                          selectBaseClass="min-h-10 sm:min-h-9 w-full sm:max-w-xs rounded-md border border-border bg-surface px-2.5 py-1.5 text-sm text-base-content shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                          selectBaseClass="min-h-10 sm:min-h-9 w-full sm:max-w-xs rounded-md border border-border bg-surface px-2.5 py-1.5 text-sm text-base-content shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-1 focus:ring-blue-500"
                         >
                           <option value="">No profile</option>
                           <Show
@@ -369,7 +369,7 @@ export const AgentProfilesPanel: Component = () => {
                       value={formName()}
                       onInput={(e) => setFormName(e.currentTarget.value)}
                       placeholder="e.g., Production Servers"
-                      class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-base-content shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:focus:border-blue-400 dark:focus:ring-blue-800"
+                      class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-base-content shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-2 focus:ring-blue-200 dark:focus:border-blue-400 dark:focus:ring-blue-800"
                     />
                   </div>
 
@@ -386,7 +386,7 @@ export const AgentProfilesPanel: Component = () => {
                     onInput={(e) => setFormDescription(e.currentTarget.value)}
                     placeholder="What is this profile for?"
                     rows={2}
-                    textareaBaseClass="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-base-content shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:focus:border-blue-400 dark:focus:ring-blue-800 resize-none"
+                    textareaBaseClass="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-base-content shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-2 focus:ring-blue-200 dark:focus:border-blue-400 dark:focus:ring-blue-800 resize-none"
                   />
 
                   {/* Settings */}
@@ -447,7 +447,7 @@ export const AgentProfilesPanel: Component = () => {
                                 onChange={(e) =>
                                   updateSetting(setting.key, e.currentTarget.value || undefined)
                                 }
-                                selectBaseClass="min-h-10 sm:min-h-9 rounded-md border border-border bg-surface px-2.5 py-1.5 text-sm text-base-content shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                                selectBaseClass="min-h-10 sm:min-h-9 rounded-md border border-border bg-surface px-2.5 py-1.5 text-sm text-base-content shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-1 focus:ring-blue-500"
                               >
                                 <option value="">Default</option>
                                 <For each={(setting as SelectSetting).options}>
@@ -464,7 +464,7 @@ export const AgentProfilesPanel: Component = () => {
                                   updateSetting(setting.key, e.currentTarget.value || undefined)
                                 }
                                 placeholder="30s"
-                                class="min-h-10 sm:min-h-9 w-24 rounded-md border border-border bg-surface px-2.5 py-1.5 text-sm text-base-content shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                                class="min-h-10 sm:min-h-9 w-24 rounded-md border border-border bg-surface px-2.5 py-1.5 text-sm text-base-content shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-1 focus:ring-blue-500"
                               />
                             </Show>
                             <Show when={setting.type === 'string'}>
@@ -476,7 +476,7 @@ export const AgentProfilesPanel: Component = () => {
                                   updateSetting(setting.key, e.currentTarget.value || undefined)
                                 }
                                 placeholder={(setting as StringSetting).placeholder || ''}
-                                class="min-h-10 sm:min-h-9 w-40 rounded-md border bg-surface px-2.5 py-1.5 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                                class="min-h-10 sm:min-h-9 w-40 rounded-md border bg-surface px-2.5 py-1.5 text-sm shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-1 focus:ring-blue-500"
                               />
                             </Show>
                           </div>
@@ -493,7 +493,7 @@ export const AgentProfilesPanel: Component = () => {
                         </p>
                         <For each={unknownKeys()}>
                           {(key) => (
-                            <div class="rounded-md border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900 p-3 mb-2">
+                            <div class="rounded-md border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/25 p-3 mb-2">
                               <div class="flex items-center justify-between">
                                 <span class="text-sm font-medium text-base-content font-mono">
                                   {key}
@@ -512,12 +512,12 @@ export const AgentProfilesPanel: Component = () => {
                                         updateSetting(key, val || undefined);
                                       }
                                     }}
-                                    class="min-h-10 sm:min-h-9 w-32 rounded-md border bg-surface px-2.5 py-1.5 text-sm text-base-content shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                                    class="min-h-10 sm:min-h-9 w-32 rounded-md border bg-surface px-2.5 py-1.5 text-sm text-base-content shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-1 focus:ring-blue-500"
                                   />
                                   <button
                                     type="button"
                                     onClick={() => updateSetting(key, undefined)}
-                                    class="inline-flex min-h-10 min-w-10 sm:min-h-9 sm:min-w-9 items-center justify-center rounded text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900"
+                                    class="inline-flex min-h-10 min-w-10 sm:min-h-9 sm:min-w-9 items-center justify-center rounded-sm text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/25"
                                     title="Remove this setting"
                                   >
                                     <svg
diff --git a/frontend-modern/src/components/Settings/AuditLogPanel.tsx b/frontend-modern/src/components/Settings/AuditLogPanel.tsx
index db0462dc7b..8dceaa592d 100644
--- a/frontend-modern/src/components/Settings/AuditLogPanel.tsx
+++ b/frontend-modern/src/components/Settings/AuditLogPanel.tsx
@@ -324,7 +324,7 @@ export default function AuditLogPanel() {
         <div
           role="alert"
           aria-live="assertive"
-          class="p-4 bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-800 rounded-md text-red-700 dark:text-red-300"
+          class="p-4 bg-red-50 dark:bg-red-900/25 border border-red-200 dark:border-red-800 rounded-md text-red-700 dark:text-red-300"
         >
           {error()}
         </div>
@@ -402,7 +402,7 @@ export default function AuditLogPanel() {
                 render: (event) => (
                   <div class="min-w-0">
                     <span
-                      class={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${getAuditEventTypeBadgeClass(event.event)}`}
+                      class={`inline-flex items-center px-2 py-0.5 rounded-sm text-xs font-medium ${getAuditEventTypeBadgeClass(event.event)}`}
                     >
                       {event.event}
                     </span>
@@ -454,7 +454,7 @@ export default function AuditLogPanel() {
                         when={isVerifying}
                         fallback={
                           <span
-                            class={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${badge.className}`}
+                            class={`inline-flex items-center px-2 py-0.5 rounded-sm text-xs font-medium ${badge.className}`}
                           >
                             {badge.label}
                           </span>
diff --git a/frontend-modern/src/components/Settings/AuditWebhookPanel.tsx b/frontend-modern/src/components/Settings/AuditWebhookPanel.tsx
index 4d453ccdfa..aa0c356204 100644
--- a/frontend-modern/src/components/Settings/AuditWebhookPanel.tsx
+++ b/frontend-modern/src/components/Settings/AuditWebhookPanel.tsx
@@ -105,7 +105,7 @@ export const AuditWebhookPanel: Component<AuditWebhookPanelProps> = (props) => {
                     <button
                       onClick={() => setUrlToRemove(url)}
                       disabled={!canManage()}
-                      class="p-2 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900 rounded-md transition-colors"
+                      class="p-2 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/25 rounded-md transition-colors"
                       title="Remove webhook endpoint"
                     >
                       <Trash2 size={16} />
@@ -147,11 +147,11 @@ export const AuditWebhookPanel: Component<AuditWebhookPanelProps> = (props) => {
       </SettingsPanel>
       <Card tone="warning" class="border border-amber-200 dark:border-amber-800">
         <div class="p-5 flex gap-4">
-          <div class="p-3 bg-amber-100 dark:bg-amber-900 rounded-md h-fit text-amber-600 dark:text-amber-300">
+          <div class="p-3 bg-amber-100 dark:bg-amber-900/25 rounded-md h-fit text-amber-600 dark:text-amber-300">
             <Shield size={22} />
           </div>
           <div>
-            <h3 class="text-base font-semibold text-amber-900 dark:text-amber-100 mb-1.5">
+            <h3 class="text-base font-semibold text-amber-900/25 dark:text-amber-100 mb-1.5">
               {AUDIT_WEBHOOK_SECURITY_NOTE_TITLE}
             </h3>
             <p class="text-sm text-amber-800 dark:text-amber-200 leading-relaxed">
diff --git a/frontend-modern/src/components/Settings/AvailabilitySettingsPanel.tsx b/frontend-modern/src/components/Settings/AvailabilitySettingsPanel.tsx
index fe7471cb64..8b07446175 100644
--- a/frontend-modern/src/components/Settings/AvailabilitySettingsPanel.tsx
+++ b/frontend-modern/src/components/Settings/AvailabilitySettingsPanel.tsx
@@ -226,7 +226,7 @@ export const AvailabilitySettingsPanel: Component = () => {
             {(message) => (
               <div
                 role="alert"
-                class="border-b border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-800 dark:border-rose-900 dark:bg-rose-950 dark:text-rose-200"
+                class="border-b border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-800 dark:border-rose-900/25 dark:bg-rose-950/25 dark:text-rose-200"
               >
                 {message()}
               </div>
@@ -246,7 +246,7 @@ export const AvailabilitySettingsPanel: Component = () => {
                     type="button"
                     variant="primary"
                     size="mdCompact"
-                    class="min-h-9 gap-2"
+                    class="min-h-9! gap-2"
                     onClick={() => openAddDialog('service')}
                   >
                     <Plus class="h-4 w-4" />
diff --git a/frontend-modern/src/components/Settings/BackupTransferDialogs.tsx b/frontend-modern/src/components/Settings/BackupTransferDialogs.tsx
index 352b99c689..6615becc4b 100644
--- a/frontend-modern/src/components/Settings/BackupTransferDialogs.tsx
+++ b/frontend-modern/src/components/Settings/BackupTransferDialogs.tsx
@@ -124,10 +124,10 @@ export const BackupTransferDialogs: Component<BackupTransferDialogsProps> = (pro
                 </Show>
               </div>
 
-              <div class="bg-amber-50 dark:bg-amber-900 border border-amber-200 dark:border-amber-800 rounded-md p-3">
+              <div class="bg-amber-50 dark:bg-amber-900/25 border border-amber-200 dark:border-amber-800 rounded-md p-3">
                 <div class="flex gap-2">
                   <svg
-                    class="w-4 h-4 text-amber-600 dark:text-amber-400 flex-shrink-0 mt-0.5"
+                    class="w-4 h-4 text-amber-600 dark:text-amber-400 shrink-0 mt-0.5"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24"
@@ -206,7 +206,7 @@ export const BackupTransferDialogs: Component<BackupTransferDialogsProps> = (pro
                 />
               </div>
 
-              <div class="text-xs text-muted rounded p-2">
+              <div class="text-xs text-muted rounded-sm p-2">
                 <p class="font-semibold mb-1">{getAPITokenManagementLocationMessage()}</p>
                 <p>
                   Tokens are managed in the UI and stored in <code>api_tokens.json</code>.
@@ -279,7 +279,7 @@ export const BackupTransferDialogs: Component<BackupTransferDialogsProps> = (pro
                 </p>
               </div>
 
-              <div class="bg-yellow-50 dark:bg-yellow-900 border border-yellow-200 dark:border-yellow-800 rounded p-3">
+              <div class="bg-yellow-50 dark:bg-yellow-900/25 border border-yellow-200 dark:border-yellow-800 rounded-sm p-3">
                 <div class="space-y-2 text-xs text-yellow-700 dark:text-yellow-300">
                   <p>
                     <strong>Warning:</strong> Importing will replace all current configuration. This
diff --git a/frontend-modern/src/components/Settings/BillingAdminOrganizationsTable.tsx b/frontend-modern/src/components/Settings/BillingAdminOrganizationsTable.tsx
index f988628948..563945193e 100644
--- a/frontend-modern/src/components/Settings/BillingAdminOrganizationsTable.tsx
+++ b/frontend-modern/src/components/Settings/BillingAdminOrganizationsTable.tsx
@@ -55,7 +55,7 @@ export const BillingAdminOrganizationsTable: Component<BillingAdminOrganizations
               <div class="text-xs text-muted">
                 <span class="font-mono">{org.org_id}</span>
                 {getBillingAdminOrganizationBadges(org).map((badge) => (
-                  <span class={`ml-2 rounded px-1.5 py-0.5 ${badge.badgeClass}`}>
+                  <span class={`ml-2 rounded-sm px-1.5 py-0.5 ${badge.badgeClass}`}>
                     {badge.label}
                   </span>
                 ))}
diff --git a/frontend-modern/src/components/Settings/BillingAdminPanel.tsx b/frontend-modern/src/components/Settings/BillingAdminPanel.tsx
index bcd559d371..f83ab057d6 100644
--- a/frontend-modern/src/components/Settings/BillingAdminPanel.tsx
+++ b/frontend-modern/src/components/Settings/BillingAdminPanel.tsx
@@ -38,7 +38,7 @@ export const BillingAdminPanel: Component = () => {
         bodyClass="space-y-4"
       >
         <Show when={state.orgsError()}>
-          <div class="rounded-md border border-red-200 dark:border-red-900 bg-red-50 dark:bg-red-900 p-3 text-sm text-red-800 dark:text-red-200">
+          <div class="rounded-md border border-red-200 dark:border-red-900/25 bg-red-50 dark:bg-red-900/25 p-3 text-sm text-red-800 dark:text-red-200">
             {state.orgsError()}
           </div>
         </Show>
diff --git a/frontend-modern/src/components/Settings/BrandingSettingsCard.tsx b/frontend-modern/src/components/Settings/BrandingSettingsCard.tsx
index b7830c18de..7b4fc6ddc9 100644
--- a/frontend-modern/src/components/Settings/BrandingSettingsCard.tsx
+++ b/frontend-modern/src/components/Settings/BrandingSettingsCard.tsx
@@ -155,7 +155,7 @@ export const BrandingSettingsCard: Component<BrandingSettingsCardProps> = (props
         <div class="flex min-h-28 flex-col justify-between gap-4 rounded-md border border-border bg-base p-4">
           <div>
             <p class="text-xs font-medium uppercase tracking-wide text-muted">Header preview</p>
-            <div class="mt-3 flex min-h-10 items-center justify-center gap-2 overflow-hidden rounded bg-surface px-3 py-2">
+            <div class="mt-3 flex min-h-10 items-center justify-center gap-2 overflow-hidden rounded-sm bg-surface px-3 py-2">
               <Show
                 when={preview()}
                 fallback={<PulseBrandMark class="h-5 w-5 shrink-0" decorative />}
@@ -164,7 +164,7 @@ export const BrandingSettingsCard: Component<BrandingSettingsCardProps> = (props
                   <img
                     src={logo()}
                     alt=""
-                    class="max-h-8 max-w-[12rem] object-contain"
+                    class="max-h-8 max-w-48 object-contain"
                     data-testid="branding-logo-preview"
                   />
                 )}
diff --git a/frontend-modern/src/components/Settings/ChangePasswordModal.tsx b/frontend-modern/src/components/Settings/ChangePasswordModal.tsx
index bd2bc828aa..715e2f89c3 100644
--- a/frontend-modern/src/components/Settings/ChangePasswordModal.tsx
+++ b/frontend-modern/src/components/Settings/ChangePasswordModal.tsx
@@ -143,7 +143,7 @@ export const ChangePasswordModal: Component<ChangePasswordModalProps> = (props)
               type="password"
               value={currentPassword()}
               onInput={(e) => setCurrentPassword(e.currentTarget.value)}
-              class={controlClass('shadow-sm')}
+              class={controlClass('shadow-xs')}
               required
               disabled={loading()}
             />
@@ -158,7 +158,7 @@ export const ChangePasswordModal: Component<ChangePasswordModalProps> = (props)
               type="password"
               value={newPassword()}
               onInput={(e) => setNewPassword(e.currentTarget.value)}
-              class={controlClass('shadow-sm')}
+              class={controlClass('shadow-xs')}
               required
               disabled={loading()}
               minLength={12}
@@ -175,7 +175,7 @@ export const ChangePasswordModal: Component<ChangePasswordModalProps> = (props)
               type="password"
               value={confirmPassword()}
               onInput={(e) => setConfirmPassword(e.currentTarget.value)}
-              class={controlClass('shadow-sm')}
+              class={controlClass('shadow-xs')}
               required
               disabled={loading()}
             />
@@ -185,7 +185,7 @@ export const ChangePasswordModal: Component<ChangePasswordModalProps> = (props)
             <div
               role="alert"
               aria-live="assertive"
-              class="p-3 bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-800 rounded-md"
+              class="p-3 bg-red-50 dark:bg-red-900/25 border border-red-200 dark:border-red-800 rounded-md"
             >
               <p class="text-sm text-red-600 dark:text-red-400">{error()}</p>
             </div>
diff --git a/frontend-modern/src/components/Settings/CommercialBillingSections.tsx b/frontend-modern/src/components/Settings/CommercialBillingSections.tsx
index d6952351d9..d44423faf0 100644
--- a/frontend-modern/src/components/Settings/CommercialBillingSections.tsx
+++ b/frontend-modern/src/components/Settings/CommercialBillingSections.tsx
@@ -89,9 +89,9 @@ export const CommercialUsageMeters: Component<CommercialUsageMetersProps> = (pro
             </span>
           </div>
           <Show when={typeof item.limit === 'number'}>
-            <div class="h-2 w-full rounded bg-surface-hover">
+            <div class="h-2 w-full rounded-sm bg-surface-hover">
               <div
-                class={`h-2 rounded ${item.accentClass}`}
+                class={`h-2 rounded-sm ${item.accentClass}`}
                 style={{ width: `${usageRatio(item.current, item.limit)}%` }}
               />
             </div>
diff --git a/frontend-modern/src/components/Settings/ConnectionEditor/CredentialSlots/AvailabilityTargetSlot.tsx b/frontend-modern/src/components/Settings/ConnectionEditor/CredentialSlots/AvailabilityTargetSlot.tsx
index 69e98c81fb..004562de2b 100644
--- a/frontend-modern/src/components/Settings/ConnectionEditor/CredentialSlots/AvailabilityTargetSlot.tsx
+++ b/frontend-modern/src/components/Settings/ConnectionEditor/CredentialSlots/AvailabilityTargetSlot.tsx
@@ -730,7 +730,7 @@ export const AvailabilityTargetSlot: Component<AvailabilityTargetSlotProps> = (p
           </label>
         </Show>
         <Show when={form().protocol === 'http' || form().protocol === 'https'}>
-          <section class="space-y-4 rounded-lg border border-border bg-surface-alt/40 p-4 sm:col-span-2">
+          <section class="space-y-4 rounded-lg border border-border p-4 sm:col-span-2">
             <div>
               <h3 class="text-sm font-semibold text-base-content">
                 What proves this service is working?
diff --git a/frontend-modern/src/components/Settings/ConnectionEditor/CredentialSlots/NodeCredentialSlot.tsx b/frontend-modern/src/components/Settings/ConnectionEditor/CredentialSlots/NodeCredentialSlot.tsx
index d99cb05ece..351e55d3fb 100644
--- a/frontend-modern/src/components/Settings/ConnectionEditor/CredentialSlots/NodeCredentialSlot.tsx
+++ b/frontend-modern/src/components/Settings/ConnectionEditor/CredentialSlots/NodeCredentialSlot.tsx
@@ -168,7 +168,7 @@ export const NodeCredentialSlot: Component<NodeCredentialSlotProps> = (props) =>
       >
         <div class="grid gap-3 text-sm sm:grid-cols-3">
           <div class="flex items-start gap-2">
-            <span class="mt-0.5 inline-flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-blue-600 text-xs font-semibold text-white">
+            <span class="mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600 text-xs font-semibold text-white">
               1
             </span>
             <div>
@@ -177,7 +177,7 @@ export const NodeCredentialSlot: Component<NodeCredentialSlotProps> = (props) =>
             </div>
           </div>
           <div class="flex items-start gap-2">
-            <span class="mt-0.5 inline-flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-blue-600 text-xs font-semibold text-white">
+            <span class="mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600 text-xs font-semibold text-white">
               2
             </span>
             <div>
@@ -186,7 +186,7 @@ export const NodeCredentialSlot: Component<NodeCredentialSlotProps> = (props) =>
             </div>
           </div>
           <div class="flex items-start gap-2">
-            <span class="mt-0.5 inline-flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-blue-600 text-xs font-semibold text-white">
+            <span class="mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600 text-xs font-semibold text-white">
               3
             </span>
             <div>
diff --git a/frontend-modern/src/components/Settings/DataHandlingPanel.tsx b/frontend-modern/src/components/Settings/DataHandlingPanel.tsx
index afdc65bca0..402b36df44 100644
--- a/frontend-modern/src/components/Settings/DataHandlingPanel.tsx
+++ b/frontend-modern/src/components/Settings/DataHandlingPanel.tsx
@@ -21,7 +21,7 @@ import {
 } from './dataHandlingPanelModel';
 
 const meterClassByTone: Record<DataHandlingPostureItem['tone'], string> = {
-  neutral: 'bg-base-content/40',
+  neutral: '',
   info: 'bg-sky-500 dark:bg-sky-400',
   success: 'bg-emerald-500 dark:bg-emerald-400',
   warning: 'bg-amber-500 dark:bg-amber-400',
@@ -30,10 +30,10 @@ const meterClassByTone: Record<DataHandlingPostureItem['tone'], string> = {
 
 const badgeClassByTone: Record<DataHandlingPostureItem['tone'], string> = {
   neutral: 'border border-border bg-surface text-muted',
-  info: 'bg-sky-100 text-sky-700 dark:bg-sky-900 dark:text-sky-200',
-  success: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-200',
-  warning: 'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-200',
-  danger: 'bg-rose-100 text-rose-700 dark:bg-rose-900 dark:text-rose-200',
+  info: 'bg-sky-100 text-sky-700 dark:bg-sky-900/25 dark:text-sky-200',
+  success: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/25 dark:text-emerald-200',
+  warning: 'bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-200',
+  danger: 'bg-rose-100 text-rose-700 dark:bg-rose-900/25 dark:text-rose-200',
 };
 
 const formatCount = (value: number): string => new Intl.NumberFormat().format(value);
@@ -64,7 +64,7 @@ const errorMessageFor = (error: unknown): string => {
 };
 
 const PolicyScopeSummary: Component = () => (
-  <section class="rounded-md border border-sky-200 bg-sky-50 px-4 py-4 dark:border-sky-900 dark:bg-sky-950/40">
+  <section class="rounded-md border border-sky-200 bg-sky-50 px-4 py-4 dark:border-sky-900/25 dark:bg-sky-950/40">
     <div class="flex items-start gap-3">
       <Info class="mt-0.5 h-4 w-4 shrink-0 text-sky-700 dark:text-sky-300" aria-hidden="true" />
       <div class="min-w-0">
@@ -125,17 +125,17 @@ const PostureMeter: Component<{ item: DataHandlingPostureItem }> = (props) => (
         <p class="mt-1 text-xs text-muted">{props.item.description}</p>
       </div>
       <span
-        class={`shrink-0 rounded px-2 py-0.5 text-xs font-semibold ${badgeClassByTone[props.item.tone]}`}
+        class={`shrink-0 rounded-sm px-2 py-0.5 text-xs font-semibold ${badgeClassByTone[props.item.tone]}`}
       >
         {formatCount(props.item.count)}
       </span>
     </div>
     <div
-      class="mt-3 h-2 overflow-hidden rounded bg-surface-hover"
+      class="mt-3 h-2 overflow-hidden rounded-sm bg-surface-hover"
       aria-label={`${props.item.label} ${props.item.percentage}%`}
     >
       <div
-        class={`h-full rounded ${meterClassByTone[props.item.tone]}`}
+        class={`h-full rounded-sm ${meterClassByTone[props.item.tone]}`}
         style={{ width: `${props.item.percentage}%` }}
       />
     </div>
@@ -176,7 +176,7 @@ export const DataHandlingPanel: Component = () => {
           <div
             role="alert"
             aria-live="polite"
-            class="rounded-md border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900 dark:border-amber-800 dark:bg-amber-900 dark:text-amber-100"
+            class="rounded-md border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900/25 dark:border-amber-800 dark:bg-amber-900/25 dark:text-amber-100"
           >
             <div class="flex items-start gap-3">
               <AlertTriangle class="mt-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
@@ -278,7 +278,7 @@ export const DataHandlingPanel: Component = () => {
                 </p>
               </div>
               <Show when={!model().hasRedactions}>
-                <span class="w-fit rounded bg-surface px-2 py-1 text-xs font-medium text-muted">
+                <span class="w-fit rounded-sm bg-surface px-2 py-1 text-xs font-medium text-muted">
                   No active redaction hints
                 </span>
               </Show>
@@ -288,7 +288,7 @@ export const DataHandlingPanel: Component = () => {
                 <For each={model().redactionItems}>
                   {(item) => (
                     <span
-                      class={`inline-flex items-center gap-1.5 rounded px-2.5 py-1 text-xs font-medium ${badgeClassByTone[item.tone]}`}
+                      class={`inline-flex items-center gap-1.5 rounded-sm px-2.5 py-1 text-xs font-medium ${badgeClassByTone[item.tone]}`}
                       title={item.description}
                     >
                       {item.label}
diff --git a/frontend-modern/src/components/Settings/DiagnosticsPanel.tsx b/frontend-modern/src/components/Settings/DiagnosticsPanel.tsx
index e1a00a1f79..f41422dce6 100644
--- a/frontend-modern/src/components/Settings/DiagnosticsPanel.tsx
+++ b/frontend-modern/src/components/Settings/DiagnosticsPanel.tsx
@@ -66,7 +66,7 @@ export const DiagnosticsPanel: Component = () => {
                 type="button"
                 onClick={() => exportDiagnostics(true)}
                 disabled={exportLoading()}
-                class="flex min-h-11 sm:min-h-9 items-center gap-1.5 px-3 py-2 text-sm font-medium text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-800 rounded-md hover:bg-green-100 dark:hover:bg-green-900 transition-colors"
+                class="flex min-h-11 sm:min-h-9 items-center gap-1.5 px-3 py-2 text-sm font-medium text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-900/25 border border-green-200 dark:border-green-800 rounded-md hover:bg-green-100 dark:hover:bg-green-900/25 transition-colors"
               >
                 <Download class="w-3.5 h-3.5" />
                 {DIAGNOSTICS_PANEL_COPY.exportGithubLabel}
diff --git a/frontend-modern/src/components/Settings/DiagnosticsResultsPanel.tsx b/frontend-modern/src/components/Settings/DiagnosticsResultsPanel.tsx
index c6489ec5c4..940fd848f0 100644
--- a/frontend-modern/src/components/Settings/DiagnosticsResultsPanel.tsx
+++ b/frontend-modern/src/components/Settings/DiagnosticsResultsPanel.tsx
@@ -39,7 +39,7 @@ const DiagnosticCard: Component<{
   const tone = () => getSemanticTonePresentation(props.status || 'info');
 
   return (
-    <div class={`rounded-md border p-4 transition-all hover:shadow-sm ${tone().panelClass}`}>
+    <div class={`rounded-md border p-4 transition-all hover:shadow-xs ${tone().panelClass}`}>
       <div class="mb-3 flex items-center gap-3">
         <div class={`rounded-md bg-surface p-2 ${tone().iconClass}`}>
           <props.icon class="h-4 w-4" />
@@ -263,7 +263,7 @@ export const DiagnosticsResultsPanel: Component<DiagnosticsResultsPanelProps> =
           <Show when={props.diagnosticsData?.metricsStore}>
             <Card padding="md">
               <div class="mb-4 flex items-center gap-3 border-b border-border pb-3">
-                <div class="rounded-md bg-blue-100 p-2 dark:bg-blue-900">
+                <div class="rounded-md bg-blue-100 p-2 dark:bg-blue-900/25">
                   <Database class="h-4 w-4 text-blue-600 dark:text-blue-400" />
                 </div>
                 <div>
@@ -352,7 +352,7 @@ export const DiagnosticsResultsPanel: Component<DiagnosticsResultsPanelProps> =
           <Show when={props.diagnosticsData?.apiTokens}>
             <Card padding="md">
               <div class="mb-4 flex items-center gap-3 border-b border-border pb-3">
-                <div class="rounded-md bg-blue-100 p-2 dark:bg-blue-900">
+                <div class="rounded-md bg-blue-100 p-2 dark:bg-blue-900/25">
                   <Shield class="h-4 w-4 text-blue-600 dark:text-blue-400" />
                 </div>
                 <div>
@@ -385,7 +385,7 @@ export const DiagnosticsResultsPanel: Component<DiagnosticsResultsPanelProps> =
           <Show when={props.diagnosticsData?.dockerAgents}>
             <Card padding="md">
               <div class="mb-4 flex items-center gap-3 border-b border-border pb-3">
-                <div class="rounded-md bg-blue-100 p-2 dark:bg-blue-900">
+                <div class="rounded-md bg-blue-100 p-2 dark:bg-blue-900/25">
                   <Database class="h-4 w-4 text-blue-600 dark:text-blue-400" />
                 </div>
                 <div>
@@ -435,7 +435,7 @@ export const DiagnosticsResultsPanel: Component<DiagnosticsResultsPanelProps> =
           <Show when={props.diagnosticsData?.alerts}>
             <Card padding="md">
               <div class="mb-4 flex items-center gap-3 border-b border-border pb-3">
-                <div class="rounded-md bg-rose-100 p-2 dark:bg-rose-900">
+                <div class="rounded-md bg-rose-100 p-2 dark:bg-rose-900/25">
                   <AlertTriangle class="h-4 w-4 text-rose-600 dark:text-rose-400" />
                 </div>
                 <div>
@@ -476,7 +476,7 @@ export const DiagnosticsResultsPanel: Component<DiagnosticsResultsPanelProps> =
           <Show when={props.diagnosticsData?.aiChat}>
             <Card padding="md">
               <div class="mb-4 flex items-center gap-3 border-b border-border pb-3">
-                <div class="rounded-md bg-blue-100 p-2 dark:bg-blue-900">
+                <div class="rounded-md bg-blue-100 p-2 dark:bg-blue-900/25">
                   <Sparkles class="h-4 w-4 text-blue-600 dark:text-blue-400" />
                 </div>
                 <div>
@@ -536,7 +536,7 @@ export const DiagnosticsResultsPanel: Component<DiagnosticsResultsPanelProps> =
                 </div>
               </div>
               <Show when={(props.diagnosticsData?.aiChat?.notes?.length || 0) > 0}>
-                <ul class="mt-3 list-disc rounded bg-amber-50 p-2 pl-4 text-xs text-amber-700 dark:bg-amber-900 dark:text-amber-400">
+                <ul class="mt-3 list-disc rounded-sm bg-amber-50 p-2 pl-4 text-xs text-amber-700 dark:bg-amber-900/25 dark:text-amber-400">
                   <For each={props.diagnosticsData?.aiChat?.notes || []}>
                     {(note) => <li>{note}</li>}
                   </For>
@@ -547,15 +547,20 @@ export const DiagnosticsResultsPanel: Component<DiagnosticsResultsPanelProps> =
         </div>
 
         <Show when={(props.diagnosticsData?.errors?.length || 0) > 0}>
-          <Card padding="md" class="border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-900">
+          <Card
+            padding="md"
+            class="border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-900/25"
+          >
             <div class="mb-3 flex items-center gap-3">
               <XCircle class="h-5 w-5 text-red-600 dark:text-red-400" />
-              <h4 class="text-sm font-semibold text-red-900 dark:text-red-100">Errors Detected</h4>
+              <h4 class="text-sm font-semibold text-red-900/25 dark:text-red-100">
+                Errors Detected
+              </h4>
             </div>
             <ul class="space-y-2 text-xs text-red-700 dark:text-red-300">
               <For each={props.diagnosticsData?.errors || []}>
                 {(error) => (
-                  <li class="flex items-start gap-2 rounded bg-red-100 p-2 dark:bg-red-900">
+                  <li class="flex items-start gap-2 rounded-sm bg-red-100 p-2 dark:bg-red-900/25">
                     <span class="text-rose-400">•</span>
                     <span>{error}</span>
                   </li>
diff --git a/frontend-modern/src/components/Settings/DiscoverySettingsForm.tsx b/frontend-modern/src/components/Settings/DiscoverySettingsForm.tsx
index 9bc9b57f16..ced5f6340f 100644
--- a/frontend-modern/src/components/Settings/DiscoverySettingsForm.tsx
+++ b/frontend-modern/src/components/Settings/DiscoverySettingsForm.tsx
@@ -29,7 +29,7 @@ export const DiscoverySettingsForm: Component<DiscoverySettingsFormProps> = (pro
   const scanScopeOptionClass = (mode: 'auto' | 'custom') =>
     `flex w-full items-start gap-3 rounded-md border p-2 text-left transition-colors disabled:cursor-not-allowed disabled:opacity-60 ${
       props.discoveryMode() === mode
-        ? 'border-blue-200 bg-blue-50 dark:border-blue-700 dark:bg-blue-900'
+        ? 'border-blue-200 bg-blue-50 dark:border-blue-700 dark:bg-blue-900/25'
         : scanScopeLocked()
           ? 'border-transparent'
           : 'border-transparent hover:border-border'
@@ -193,7 +193,7 @@ export const DiscoverySettingsForm: Component<DiscoverySettingsFormProps> = (pro
                             class={`rounded border px-2.5 py-1 text-[0.7rem] transition-colors ${
                               isActive
                                 ? 'border-blue-500 bg-blue-600 text-white dark:border-blue-400 dark:bg-blue-500'
-                                : 'border-border text-base-content hover:border-blue-400 hover:bg-blue-50 dark:hover:border-blue-500 dark:hover:bg-blue-900'
+                                : 'border-border text-base-content hover:border-blue-400 hover:bg-blue-50 dark:hover:border-blue-500 dark:hover:bg-blue-900/25'
                             }`}
                             onClick={async () => {
                               if (scanScopeLocked()) {
@@ -263,9 +263,9 @@ export const DiscoverySettingsForm: Component<DiscoverySettingsFormProps> = (pro
                 type="text"
                 value={props.discoverySubnetDraft()}
                 placeholder={subnetPresentation().placeholder}
-                class={`w-full min-h-10 rounded-md border px-3 py-2.5 text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 sm:min-h-10 ${
+                class={`w-full min-h-10 rounded-md border px-3 py-2.5 text-sm transition-colors focus:outline-hidden focus:ring-2 focus:ring-blue-500 sm:min-h-10 ${
                   props.envOverrides().discoverySubnet
-                    ? 'cursor-not-allowed border-amber-300 bg-amber-50 text-amber-800 opacity-60 dark:border-amber-600 dark:bg-amber-900 dark:text-amber-200'
+                    ? 'cursor-not-allowed border-amber-300 bg-amber-50 text-amber-800 opacity-60 dark:border-amber-600 dark:bg-amber-900/25 dark:text-amber-200'
                     : 'border-border bg-surface'
                 }`}
                 disabled={props.envOverrides().discoverySubnet}
@@ -329,7 +329,7 @@ export const DiscoverySettingsForm: Component<DiscoverySettingsFormProps> = (pro
         </Show>
 
         <Show when={props.envOverrides().discoveryEnabled || props.envOverrides().discoverySubnet}>
-          <div class="rounded-md border border-amber-200 bg-amber-100 p-3 text-xs text-amber-800 dark:border-amber-700 dark:bg-amber-900 dark:text-amber-200">
+          <div class="rounded-md border border-amber-200 bg-amber-100 p-3 text-xs text-amber-800 dark:border-amber-700 dark:bg-amber-900/25 dark:text-amber-200">
             {sectionPresentation().environmentOverrideMessage}
           </div>
         </Show>
diff --git a/frontend-modern/src/components/Settings/DockerRuntimeSettingsCard.tsx b/frontend-modern/src/components/Settings/DockerRuntimeSettingsCard.tsx
index bc8e3b00fa..d8935ca9af 100644
--- a/frontend-modern/src/components/Settings/DockerRuntimeSettingsCard.tsx
+++ b/frontend-modern/src/components/Settings/DockerRuntimeSettingsCard.tsx
@@ -74,7 +74,7 @@ export const DockerRuntimeSettingsCard: Component<DockerRuntimeSettingsCardProps
         <span class="hidden sm:inline">
           {getDockerUpdateActionsPresentation().environmentHint}{' '}
         </span>
-        <code class="block max-w-full overflow-x-auto whitespace-nowrap rounded bg-surface-hover px-1 py-0.5 text-base-content sm:inline sm:overflow-visible">
+        <code class="block max-w-full overflow-x-auto whitespace-nowrap rounded-sm bg-surface-hover px-1 py-0.5 text-base-content sm:inline sm:overflow-visible">
           {DOCKER_UPDATE_ACTIONS_ENV_VAR}=true
         </code>
       </p>
diff --git a/frontend-modern/src/components/Settings/GeneralSettingsPanel.tsx b/frontend-modern/src/components/Settings/GeneralSettingsPanel.tsx
index 6176d13f10..af0835e4bc 100644
--- a/frontend-modern/src/components/Settings/GeneralSettingsPanel.tsx
+++ b/frontend-modern/src/components/Settings/GeneralSettingsPanel.tsx
@@ -402,7 +402,7 @@ export const GeneralSettingsPanel: Component<GeneralSettingsPanelProps> = (props
                     min={PVE_POLLING_MIN_SECONDS}
                     max={PVE_POLLING_MAX_SECONDS}
                     value={props.pvePollingCustomSeconds()}
-                    class="w-full sm:w-32 min-h-10 rounded-md border border-border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:focus:ring-blue-400 shadow-sm"
+                    class="w-full sm:w-32 min-h-10 rounded-md border border-border px-3 py-2 text-sm focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:focus:ring-blue-400 shadow-xs"
                     disabled={props.pvePollingEnvLocked()}
                     onInput={(e) => {
                       if (props.pvePollingEnvLocked()) return;
@@ -424,7 +424,7 @@ export const GeneralSettingsPanel: Component<GeneralSettingsPanelProps> = (props
 
               {/* Env override warning */}
               <Show when={props.pvePollingEnvLocked()}>
-                <div class="flex items-center gap-3 rounded-md border border-amber-200 bg-amber-50 px-4 py-3 text-xs text-amber-800 dark:border-amber-800 dark:bg-amber-900 dark:text-amber-200">
+                <div class="flex items-center gap-3 rounded-md border border-amber-200 bg-amber-50 px-4 py-3 text-xs text-amber-800 dark:border-amber-800 dark:bg-amber-900/25 dark:text-amber-200">
                   <svg
                     class="h-4 w-4 shrink-0 mt-0.5 self-start"
                     viewBox="0 0 24 24"
diff --git a/frontend-modern/src/components/Settings/GuestDockerDiscoverySettingsCard.tsx b/frontend-modern/src/components/Settings/GuestDockerDiscoverySettingsCard.tsx
index 579335e0e6..f1be2becbd 100644
--- a/frontend-modern/src/components/Settings/GuestDockerDiscoverySettingsCard.tsx
+++ b/frontend-modern/src/components/Settings/GuestDockerDiscoverySettingsCard.tsx
@@ -75,7 +75,7 @@ export const GuestDockerDiscoverySettingsCard: Component<GuestDockerDiscoverySet
         <span class="hidden sm:inline">
           {getGuestDockerDiscoveryPresentation().environmentHint}{' '}
         </span>
-        <code class="block max-w-full overflow-x-auto whitespace-nowrap rounded bg-surface-hover px-1 py-0.5 text-base-content sm:inline sm:overflow-visible">
+        <code class="block max-w-full overflow-x-auto whitespace-nowrap rounded-sm bg-surface-hover px-1 py-0.5 text-base-content sm:inline sm:overflow-visible">
           {GUEST_DOCKER_INVENTORY_ENV_VAR}=true
         </code>
       </p>
diff --git a/frontend-modern/src/components/Settings/InfrastructureAgentDoctorPage.tsx b/frontend-modern/src/components/Settings/InfrastructureAgentDoctorPage.tsx
index 2697cd82d7..ec9aa1bf5b 100644
--- a/frontend-modern/src/components/Settings/InfrastructureAgentDoctorPage.tsx
+++ b/frontend-modern/src/components/Settings/InfrastructureAgentDoctorPage.tsx
@@ -47,19 +47,19 @@ const STATUS_PRESENTATION: Record<
 > = {
   healthy: {
     label: 'Healthy',
-    badgeClass: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-200',
+    badgeClass: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/25 dark:text-emerald-200',
   },
   waiting: {
     label: 'Waiting for updater',
-    badgeClass: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
+    badgeClass: 'bg-blue-100 text-blue-800 dark:bg-blue-900/25 dark:text-blue-200',
   },
   warning: {
     label: 'Needs attention',
-    badgeClass: 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200',
+    badgeClass: 'bg-amber-100 text-amber-800 dark:bg-amber-900/25 dark:text-amber-200',
   },
   critical: {
     label: 'Critical',
-    badgeClass: 'bg-rose-100 text-rose-800 dark:bg-rose-900 dark:text-rose-200',
+    badgeClass: 'bg-rose-100 text-rose-800 dark:bg-rose-900/25 dark:text-rose-200',
   },
   removed: {
     label: 'Removed',
@@ -418,7 +418,7 @@ export const InfrastructureAgentDoctorPage: Component<InfrastructureAgentDoctorP
                   labelClass="text-xs font-medium text-blue-800 dark:text-blue-100"
                   value={selectedTokenTarget()?.key}
                   onChange={(event) => setSelectedTokenTargetKey(event.currentTarget.value)}
-                  selectBaseClass="min-h-10 w-full rounded-md border border-blue-200 bg-surface px-3 py-2 text-sm text-base-content shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:border-blue-700 dark:bg-blue-950 dark:focus:ring-blue-900"
+                  selectBaseClass="min-h-10 w-full rounded-md border border-blue-200 bg-surface px-3 py-2 text-sm text-base-content shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-2 focus:ring-blue-200 dark:border-blue-700 dark:bg-blue-950/25 dark:focus:ring-blue-900/25"
                 >
                   <For each={tokenGatedTargets()}>
                     {(target) => (
@@ -440,7 +440,7 @@ export const InfrastructureAgentDoctorPage: Component<InfrastructureAgentDoctorP
                   }
                 }}
                 placeholder="Token name (optional)"
-                class="min-h-10 flex-1 rounded-md border border-blue-200 bg-surface px-3 py-2 text-sm text-base-content shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:border-blue-700 dark:bg-blue-950 dark:focus:ring-blue-900"
+                class="min-h-10 flex-1 rounded-md border border-blue-200 bg-surface px-3 py-2 text-sm text-base-content shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-2 focus:ring-blue-200 dark:border-blue-700 dark:bg-blue-950/25 dark:focus:ring-blue-900/25"
               />
               <button
                 type="button"
@@ -483,7 +483,7 @@ export const InfrastructureAgentDoctorPage: Component<InfrastructureAgentDoctorP
 
         <div class="rounded-md border border-border bg-surface">
           <Table class="w-full min-w-0 table-fixed text-sm">
-            <TableHeader class="bg-surface-alt/60">
+            <TableHeader class="">
               <TableRow>
                 <TableHead class="w-[40%] py-1.5 pl-3 pr-3 text-left text-[11px] font-medium text-muted whitespace-nowrap sm:w-[26%]">
                   Agent
@@ -547,7 +547,7 @@ export const InfrastructureAgentDoctorPage: Component<InfrastructureAgentDoctorP
                           <div class="flex items-center gap-1.5">
                             <button
                               type="button"
-                              class="inline-flex items-center rounded p-0.5 text-muted transition-colors hover:bg-surface-alt hover:text-base-content"
+                              class="inline-flex items-center rounded-sm p-0.5 text-muted transition-colors hover:bg-surface-alt hover:text-base-content"
                               aria-expanded={expanded()}
                               aria-label={`${expanded() ? 'Hide' : 'Show'} details for ${target.displayName}`}
                               onClick={(event) => {
@@ -619,7 +619,7 @@ export const InfrastructureAgentDoctorPage: Component<InfrastructureAgentDoctorP
                               <div class="flex flex-wrap items-center gap-2">
                                 <span class="font-medium text-base-content">Security posture</span>
                                 <Show when={target.safeCollector}>
-                                  <span class="rounded-full bg-emerald-100 px-2 py-0.5 font-medium text-emerald-800 dark:bg-emerald-900 dark:text-emerald-200">
+                                  <span class="rounded-full bg-emerald-100 px-2 py-0.5 font-medium text-emerald-800 dark:bg-emerald-900/25 dark:text-emerald-200">
                                     Safe collector confirmed
                                   </span>
                                 </Show>
diff --git a/frontend-modern/src/components/Settings/InfrastructureInstallerSection.tsx b/frontend-modern/src/components/Settings/InfrastructureInstallerSection.tsx
index d5135b3d50..ed5c93f93f 100644
--- a/frontend-modern/src/components/Settings/InfrastructureInstallerSection.tsx
+++ b/frontend-modern/src/components/Settings/InfrastructureInstallerSection.tsx
@@ -155,7 +155,7 @@ export const InfrastructureInstallerSection: Component<InfrastructureInstallerSe
     >
       <Show when={state.setupHandoff()}>
         {(handoff) => (
-          <div class="rounded-md border border-emerald-200 bg-emerald-50 px-4 py-4 text-sm text-emerald-950 dark:border-emerald-700 dark:bg-emerald-900 dark:text-emerald-50">
+          <div class="rounded-md border border-emerald-200 bg-emerald-50 px-4 py-4 text-sm text-emerald-950/25 dark:border-emerald-700 dark:bg-emerald-900/25 dark:text-emerald-50">
             <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
               <div class="space-y-2">
                 <p class="font-semibold">
@@ -191,13 +191,13 @@ export const InfrastructureInstallerSection: Component<InfrastructureInstallerSe
                   </Show>
                 </p>
                 <div class="grid gap-3 sm:grid-cols-2">
-                  <div class="rounded-md border border-emerald-200 bg-white px-3 py-2 dark:border-emerald-800 dark:bg-emerald-950">
+                  <div class="rounded-md border border-emerald-200 bg-white px-3 py-2 dark:border-emerald-800 dark:bg-emerald-950/25">
                     <div class="text-[11px] font-medium uppercase tracking-wide text-emerald-700 dark:text-emerald-300">
                       Username
                     </div>
                     <div class="mt-1 font-mono text-sm text-base-content">{handoff().username}</div>
                   </div>
-                  <div class="rounded-md border border-emerald-200 bg-white px-3 py-2 dark:border-emerald-800 dark:bg-emerald-950">
+                  <div class="rounded-md border border-emerald-200 bg-white px-3 py-2 dark:border-emerald-800 dark:bg-emerald-950/25">
                     <div class="text-[11px] font-medium uppercase tracking-wide text-emerald-700 dark:text-emerald-300">
                       Admin API Token
                     </div>
@@ -241,7 +241,7 @@ export const InfrastructureInstallerSection: Component<InfrastructureInstallerSe
       </Show>
 
       <div class="space-y-5">
-        <div class="rounded-md border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-950 dark:border-emerald-700 dark:bg-emerald-900 dark:text-emerald-50">
+        <div class="rounded-md border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-950/25 dark:border-emerald-700 dark:bg-emerald-900/25 dark:text-emerald-50">
           <p class="font-semibold">{presentation().recommendationTitle}</p>
           <p class="mt-1 text-xs text-emerald-800 dark:text-emerald-200">
             {presentation().recommendationDetail}
@@ -251,7 +251,7 @@ export const InfrastructureInstallerSection: Component<InfrastructureInstallerSe
         <Show when={focus() === 'agent'}>
           <div
             data-testid="proxmox-api-first-guidance"
-            class="rounded-md border border-blue-200 bg-blue-50 px-4 py-3 text-sm text-blue-950 dark:border-blue-700 dark:bg-blue-900 dark:text-blue-50"
+            class="rounded-md border border-blue-200 bg-blue-50 px-4 py-3 text-sm text-blue-950/25 dark:border-blue-700 dark:bg-blue-900/25 dark:text-blue-50"
           >
             <p class="font-semibold">Adding Proxmox? Start with the API connection.</p>
             <p class="mt-1 text-xs text-blue-800 dark:text-blue-200">
@@ -263,19 +263,19 @@ export const InfrastructureInstallerSection: Component<InfrastructureInstallerSe
             <div class="mt-2 flex flex-wrap gap-x-4 gap-y-2 text-xs font-medium">
               <a
                 href={buildInfrastructureOnboardingPath('pve')}
-                class="text-blue-700 underline decoration-blue-300 underline-offset-2 hover:text-blue-900 dark:text-blue-200 dark:hover:text-white"
+                class="text-blue-700 underline decoration-blue-300 underline-offset-2 hover:text-blue-900/25 dark:text-blue-200 dark:hover:text-white"
               >
                 Connect Proxmox VE through the API
               </a>
               <a
                 href={buildInfrastructureOnboardingPath('pbs')}
-                class="text-blue-700 underline decoration-blue-300 underline-offset-2 hover:text-blue-900 dark:text-blue-200 dark:hover:text-white"
+                class="text-blue-700 underline decoration-blue-300 underline-offset-2 hover:text-blue-900/25 dark:text-blue-200 dark:hover:text-white"
               >
                 Connect PBS through the API
               </a>
               <a
                 href="/docs/PRODUCTION_SECURITY"
-                class="text-blue-700 underline decoration-blue-300 underline-offset-2 hover:text-blue-900 dark:text-blue-200 dark:hover:text-white"
+                class="text-blue-700 underline decoration-blue-300 underline-offset-2 hover:text-blue-900/25 dark:text-blue-200 dark:hover:text-white"
               >
                 Review the production security model
               </a>
@@ -284,7 +284,7 @@ export const InfrastructureInstallerSection: Component<InfrastructureInstallerSe
         </Show>
 
         <Show when={focus() === 'docker'}>
-          <div class="rounded-md border border-blue-200 bg-blue-50 px-4 py-3 text-sm text-blue-950 dark:border-blue-700 dark:bg-blue-900 dark:text-blue-50">
+          <div class="rounded-md border border-blue-200 bg-blue-50 px-4 py-3 text-sm text-blue-950/25 dark:border-blue-700 dark:bg-blue-900/25 dark:text-blue-50">
             <p class="font-semibold">Docker inside Proxmox LXCs</p>
             <p class="mt-1 text-xs text-blue-800 dark:text-blue-200">
               Install the agent on the Proxmox node, not inside every LXC. In advanced options,
@@ -324,7 +324,7 @@ export const InfrastructureInstallerSection: Component<InfrastructureInstallerSe
             </p>
           </div>
 
-          <div class="ml-6 rounded-md border border-blue-200 bg-blue-50 p-3 dark:border-blue-800 dark:bg-blue-900">
+          <div class="ml-6 rounded-md border border-blue-200 bg-blue-50 p-3 dark:border-blue-800 dark:bg-blue-900/25">
             <p class="mb-2 text-sm font-semibold text-blue-800 dark:text-blue-200">
               What this token authorizes:
             </p>
@@ -364,7 +364,7 @@ export const InfrastructureInstallerSection: Component<InfrastructureInstallerSe
                 }
               }}
               placeholder="Token name (optional label for your audit log)"
-              class="flex-1 rounded-md border border-border bg-surface px-3 py-2 text-sm text-base-content shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:focus:border-blue-400 dark:focus:ring-blue-900"
+              class="flex-1 rounded-md border border-border bg-surface px-3 py-2 text-sm text-base-content shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-2 focus:ring-blue-200 dark:focus:border-blue-400 dark:focus:ring-blue-900/25"
             />
             <button
               type="button"
@@ -381,7 +381,7 @@ export const InfrastructureInstallerSection: Component<InfrastructureInstallerSe
           </div>
 
           <Show when={state.latestRecord()}>
-            <div class="flex flex-col gap-3 rounded-md border border-blue-200 bg-blue-50 px-4 py-3 text-xs text-blue-800 dark:border-blue-800 dark:bg-blue-900 dark:text-blue-200 sm:flex-row sm:items-center sm:justify-between">
+            <div class="flex flex-col gap-3 rounded-md border border-blue-200 bg-blue-50 px-4 py-3 text-xs text-blue-800 dark:border-blue-800 dark:bg-blue-900/25 dark:text-blue-200 sm:flex-row sm:items-center sm:justify-between">
               <div class="flex items-center gap-2">
                 <svg
                   class="h-4 w-4 shrink-0"
@@ -421,7 +421,7 @@ export const InfrastructureInstallerSection: Component<InfrastructureInstallerSe
 
         <Show when={!state.requiresToken()}>
           <div class="space-y-3">
-            <div class="rounded-md border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800 dark:border-amber-700 dark:bg-amber-900 dark:text-amber-200">
+            <div class="rounded-md border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800 dark:border-amber-700 dark:bg-amber-900/25 dark:text-amber-200">
               Tokens are optional on this Pulse instance. Confirm to generate commands without a
               token.
             </div>
@@ -545,7 +545,7 @@ export const InfrastructureInstallerSection: Component<InfrastructureInstallerSe
                         value={state.customAgentUrl()}
                         onInput={(event) => state.setCustomAgentUrl(event.currentTarget.value)}
                         placeholder={state.agentUrl()}
-                        class="flex-1 rounded-md border bg-surface px-3 py-1.5 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:focus:border-blue-400 dark:focus:ring-blue-800"
+                        class="flex-1 rounded-md border bg-surface px-3 py-1.5 text-sm shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-1 focus:ring-blue-500 dark:focus:border-blue-400 dark:focus:ring-blue-800"
                       />
                     </div>
                     <p class="mt-1.5 text-xs text-muted">
@@ -577,7 +577,7 @@ export const InfrastructureInstallerSection: Component<InfrastructureInstallerSe
                             ? 'Not needed for plain HTTP'
                             : 'Examples: /etc/pulse/ca.pem or C:\\Pulse\\ca.cer'
                         }
-                        class="flex-1 rounded-md border bg-surface px-3 py-1.5 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:focus:border-blue-400 dark:focus:ring-blue-800"
+                        class="flex-1 rounded-md border bg-surface px-3 py-1.5 text-sm shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-1 focus:ring-blue-500 dark:focus:border-blue-400 dark:focus:ring-blue-800"
                       />
                     </div>
                     <p class="mt-1.5 text-xs text-muted">
@@ -589,7 +589,7 @@ export const InfrastructureInstallerSection: Component<InfrastructureInstallerSe
                   </div>
 
                   <Show when={state.insecureMode()}>
-                    <div class="rounded-md border border-amber-200 bg-amber-50 px-4 py-2 text-sm text-amber-800 dark:border-amber-700 dark:bg-amber-900 dark:text-amber-200">
+                    <div class="rounded-md border border-amber-200 bg-amber-50 px-4 py-2 text-sm text-amber-800 dark:border-amber-700 dark:bg-amber-900/25 dark:text-amber-200">
                       <span class="font-medium">TLS verification disabled</span> — skip cert checks
                       for self-signed setups. Not recommended for production.
                     </div>
@@ -603,7 +603,7 @@ export const InfrastructureInstallerSection: Component<InfrastructureInstallerSe
                       type="checkbox"
                       checked={state.insecureMode()}
                       onChange={(event) => state.setInsecureMode(event.currentTarget.checked)}
-                      class="rounded text-blue-600 focus:ring-blue-500"
+                      class="rounded-sm text-blue-600 focus:ring-blue-500"
                     />
                     Skip TLS certificate verification (self-signed certs, not recommended)
                   </label>
@@ -619,13 +619,13 @@ export const InfrastructureInstallerSection: Component<InfrastructureInstallerSe
                       onChange={(event) =>
                         void state.setEnableCommands(event.currentTarget.checked)
                       }
-                      class="rounded text-blue-600 focus:ring-blue-500"
+                      class="rounded-sm text-blue-600 focus:ring-blue-500"
                     />
                     Enable legacy combined command profile
                   </label>
 
                   <Show when={state.enableCommands()}>
-                    <div class="rounded-md border border-blue-200 bg-blue-50 px-4 py-2 text-sm text-blue-800 dark:border-blue-700 dark:bg-blue-900 dark:text-blue-200">
+                    <div class="rounded-md border border-blue-200 bg-blue-50 px-4 py-2 text-sm text-blue-800 dark:border-blue-700 dark:bg-blue-900/25 dark:text-blue-200">
                       <span class="font-medium">Legacy combined trust enabled</span>: The root
                       monitoring service will also accept server command requests. On Proxmox nodes,
                       this remains necessary for opted-in Docker-in-LXC inventory until the scoped
@@ -633,7 +633,7 @@ export const InfrastructureInstallerSection: Component<InfrastructureInstallerSe
                     </div>
                   </Show>
 
-                  <div class="rounded-md border border-emerald-200 bg-emerald-50 px-4 py-2 text-sm text-emerald-900 dark:border-emerald-700 dark:bg-emerald-900 dark:text-emerald-100">
+                  <div class="rounded-md border border-emerald-200 bg-emerald-50 px-4 py-2 text-sm text-emerald-900/25 dark:border-emerald-700 dark:bg-emerald-900/25 dark:text-emerald-100">
                     <span class="font-medium">Config signing (optional)</span> — Require signed
                     remote config payloads with{' '}
                     <code>PULSE_AGENT_CONFIG_SIGNATURE_REQUIRED=true</code>. Provide keys via{' '}
@@ -652,7 +652,7 @@ export const InfrastructureInstallerSection: Component<InfrastructureInstallerSe
                           event.currentTarget.value as InstallProfile,
                         )
                       }
-                      selectBaseClass="w-full rounded-md border bg-surface px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:focus:border-blue-400 dark:focus:ring-blue-800"
+                      selectBaseClass="w-full rounded-md border bg-surface px-3 py-2 text-sm shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-1 focus:ring-blue-500 dark:focus:border-blue-400 dark:focus:ring-blue-800"
                     >
                       <For each={INSTALL_PROFILE_OPTIONS}>
                         {(option) => <option value={option.value}>{option.label}</option>}
@@ -732,7 +732,7 @@ export const InfrastructureInstallerSection: Component<InfrastructureInstallerSe
               </For>
             </div>
 
-            <div class="space-y-3 rounded-md border border-blue-200 bg-blue-50 px-4 py-3 text-sm text-blue-900 dark:border-blue-800 dark:bg-blue-900 dark:text-blue-100">
+            <div class="space-y-3 rounded-md border border-blue-200 bg-blue-50 px-4 py-3 text-sm text-blue-900/25 dark:border-blue-800 dark:bg-blue-900/25 dark:text-blue-100">
               <div class="flex items-center justify-between gap-3">
                 <h5 class="text-sm font-semibold">Check installation status</h5>
                 <button
@@ -764,7 +764,7 @@ export const InfrastructureInstallerSection: Component<InfrastructureInstallerSe
                     }
                   }}
                   placeholder="Hostname or agent ID"
-                  class="flex-1 rounded-md border border-blue-200 bg-surface px-3 py-2 text-sm text-blue-900 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:border-blue-700 dark:bg-blue-900 dark:text-blue-100 dark:focus:border-blue-300 dark:focus:ring-blue-800"
+                  class="flex-1 rounded-md border border-blue-200 bg-surface px-3 py-2 text-sm text-blue-900/25 shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-2 focus:ring-blue-200 dark:border-blue-700 dark:bg-blue-900/25 dark:text-blue-100 dark:focus:border-blue-300 dark:focus:ring-blue-800"
                 />
               </div>
               <Show when={state.lookupError()}>
@@ -783,8 +783,8 @@ export const InfrastructureInstallerSection: Component<InfrastructureInstallerSe
                     <div
                       class={`space-y-3 rounded-md border px-3 py-3 text-xs ${
                         isConnected()
-                          ? 'border-emerald-200 bg-emerald-50 text-emerald-950 dark:border-emerald-700 dark:bg-emerald-900 dark:text-emerald-50'
-                          : 'border-blue-200 bg-surface text-blue-900 dark:border-blue-700 dark:bg-blue-900 dark:text-blue-100'
+                          ? 'border-emerald-200 bg-emerald-50 text-emerald-950/25 dark:border-emerald-700 dark:bg-emerald-900/25 dark:text-emerald-50'
+                          : 'border-blue-200 bg-surface text-blue-900/25 dark:border-blue-700 dark:bg-blue-900/25 dark:text-blue-100'
                       }`}
                     >
                       <div class="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
@@ -814,7 +814,7 @@ export const InfrastructureInstallerSection: Component<InfrastructureInstallerSe
                           >
                             {lookupStatusPresentation().label}
                           </span>
-                          <span class="inline-flex items-center rounded-full bg-blue-100 px-2 py-0.5 text-[11px] font-medium text-blue-700 dark:bg-blue-900 dark:text-blue-200">
+                          <span class="inline-flex items-center rounded-full bg-blue-100 px-2 py-0.5 text-[11px] font-medium text-blue-700 dark:bg-blue-900/25 dark:text-blue-200">
                             {agent().status || 'unknown'}
                           </span>
                         </div>
@@ -875,23 +875,23 @@ export const InfrastructureInstallerSection: Component<InfrastructureInstallerSe
                   </p>
                   <ul class="mt-2 list-inside list-disc space-y-1 text-xs text-muted">
                     <li>
-                      <code class="rounded bg-surface-hover px-1">--enable-docker</code> — Force
+                      <code class="rounded-sm bg-surface-hover px-1">--enable-docker</code> — Force
                       enable Docker/Podman monitoring
                     </li>
                     <li>
-                      <code class="rounded bg-surface-hover px-1">--enable-kubernetes</code> — Force
-                      enable Kubernetes monitoring
+                      <code class="rounded-sm bg-surface-hover px-1">--enable-kubernetes</code> —
+                      Force enable Kubernetes monitoring
                     </li>
                     <li>
-                      <code class="rounded bg-surface-hover px-1">--enable-proxmox</code> — Force
+                      <code class="rounded-sm bg-surface-hover px-1">--enable-proxmox</code> — Force
                       enable Proxmox integration (creates API token)
                     </li>
                     <li>
-                      <code class="rounded bg-surface-hover px-1">--proxmox-type pve|pbs</code> —
+                      <code class="rounded-sm bg-surface-hover px-1">--proxmox-type pve|pbs</code> —
                       Set Proxmox node mode explicitly
                     </li>
                     <li>
-                      <code class="rounded bg-surface-hover px-1">--disable-docker</code> — Skip
+                      <code class="rounded-sm bg-surface-hover px-1">--disable-docker</code> — Skip
                       Docker even if detected
                     </li>
                   </ul>
@@ -931,15 +931,15 @@ export const InfrastructureInstallerSection: Component<InfrastructureInstallerSe
             </div>
             <p class="text-xs italic text-muted">
               If the agent can't reach this server, run directly on the machine:{' '}
-              <code class="rounded bg-surface-hover px-1 not-italic">
+              <code class="rounded-sm bg-surface-hover px-1 not-italic">
                 sudo bash /var/lib/pulse-agent/install.sh --uninstall
               </code>{' '}
               (TrueNAS:{' '}
-              <code class="rounded bg-surface-hover px-1 not-italic">
+              <code class="rounded-sm bg-surface-hover px-1 not-italic">
                 /data/pulse-agent/install.sh
               </code>
               , Unraid:{' '}
-              <code class="rounded bg-surface-hover px-1 not-italic">
+              <code class="rounded-sm bg-surface-hover px-1 not-italic">
                 /boot/config/plugins/pulse-agent/install.sh
               </code>
               )
diff --git a/frontend-modern/src/components/Settings/InfrastructureSourceManager.tsx b/frontend-modern/src/components/Settings/InfrastructureSourceManager.tsx
index 5a2fa44645..33e8800370 100644
--- a/frontend-modern/src/components/Settings/InfrastructureSourceManager.tsx
+++ b/frontend-modern/src/components/Settings/InfrastructureSourceManager.tsx
@@ -74,7 +74,7 @@ interface InfrastructureSourceManagerProps {
 // dominant. They retain the 1-click shortcut for users adding another node
 // to an existing platform without competing with the primary CTA.
 const addSectionButtonClass =
-  'inline-flex min-h-11 items-center justify-center gap-1 rounded px-2 py-0.5 text-xs font-medium text-blue-700 transition-colors hover:bg-blue-50 lg:min-h-0 dark:text-blue-300 dark:hover:bg-blue-950/30';
+  'inline-flex min-h-11 items-center justify-center gap-1 rounded-sm px-2 py-0.5 text-xs font-medium text-blue-700 transition-colors hover:bg-blue-50 lg:min-h-0 dark:text-blue-300 dark:hover:bg-blue-950/30';
 const discoveryRowClass =
   'border-b border-border-subtle bg-blue-50/30 hover:bg-blue-50/40 dark:bg-blue-950/10 dark:hover:bg-blue-950/20';
 const discoveryScanTargetLabel = 'Proxmox VE, Proxmox Backup Server, and Proxmox Mail Gateway APIs';
@@ -669,7 +669,7 @@ export const InfrastructureSourceManager: Component<InfrastructureSourceManagerP
     <section
       aria-label="Discover Proxmox systems"
       aria-live="polite"
-      class="border-t border-border bg-surface-alt/35 px-4 py-3"
+      class="border-t border-border px-4 py-3"
     >
       <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
         <div class="min-w-0 flex-1">
@@ -700,7 +700,7 @@ export const InfrastructureSourceManager: Component<InfrastructureSourceManagerP
           <Show when={discoveryErrorSummary(props.discoveryScanStatus().errors)}>
             {(summary) => (
               <div class="mt-2 flex items-start gap-2 text-xs text-amber-800 dark:text-amber-200">
-                <AlertTriangle class="mt-0.5 h-3.5 w-3.5 flex-shrink-0" aria-hidden="true" />
+                <AlertTriangle class="mt-0.5 h-3.5 w-3.5 shrink-0" aria-hidden="true" />
                 <span>{summary()}</span>
               </div>
             )}
@@ -860,7 +860,7 @@ export const InfrastructureSourceManager: Component<InfrastructureSourceManagerP
 
         <Show when={!useCardLayout()}>
           <Table class="w-full min-w-[820px] table-fixed text-sm">
-            <TableHeader class="bg-surface-alt/60">
+            <TableHeader class="">
               <TableRow>
                 <TableHead class="w-[30%] py-1.5 pl-3 pr-3 text-left text-[11px] font-medium text-muted whitespace-nowrap">
                   System
@@ -872,7 +872,7 @@ export const InfrastructureSourceManager: Component<InfrastructureSourceManagerP
                   Health
                 </TableHead>
                 <Show when={actionColumnVisible()}>
-                  <TableHead class="w-[12rem] px-3 py-1.5 text-right text-[11px] font-medium text-muted whitespace-nowrap">
+                  <TableHead class="w-48 px-3 py-1.5 text-right text-[11px] font-medium text-muted whitespace-nowrap">
                     Actions
                   </TableHead>
                 </Show>
@@ -944,16 +944,14 @@ export const InfrastructureSourceManager: Component<InfrastructureSourceManagerP
                                   <>
                                     <TableRow
                                       class={`border-b border-border-subtle ${
-                                        row.isCluster ? 'bg-surface-alt/40' : ''
+                                        row.isCluster ? '' : ''
                                       }`}
                                     >
                                       <TableCell class="py-1.5 pl-3 pr-3 align-middle">
                                         <div class="flex min-w-0 flex-wrap items-center gap-1.5">
                                           <div
                                             class={`min-w-0 truncate text-[13px] ${
-                                              row.isCluster
-                                                ? 'font-medium text-base-content'
-                                                : 'text-base-content/90'
+                                              row.isCluster ? 'font-medium text-base-content' : ''
                                             }`}
                                             title={rowSystemTitle(row)}
                                           >
@@ -967,7 +965,7 @@ export const InfrastructureSourceManager: Component<InfrastructureSourceManagerP
                                               agentMethodTitleFor(row) ?? presentation.title;
                                             return (
                                               <span
-                                                class={`${presentation.badgeClassName} flex-shrink-0 whitespace-nowrap`}
+                                                class={`${presentation.badgeClassName} shrink-0 whitespace-nowrap`}
                                                 title={title}
                                               >
                                                 {presentation.label}
@@ -977,7 +975,7 @@ export const InfrastructureSourceManager: Component<InfrastructureSourceManagerP
                                           <Show when={row.members.length > 0}>
                                             <button
                                               type="button"
-                                              class="inline-flex items-center gap-0.5 rounded px-1 py-0.5 text-[11px] font-medium text-muted transition-colors hover:bg-surface-alt hover:text-base-content"
+                                              class="inline-flex items-center gap-0.5 rounded-sm px-1 py-0.5 text-[11px] font-medium text-muted transition-colors hover:bg-surface-alt hover:text-base-content"
                                               aria-expanded={membersExpanded(row)}
                                               aria-label={`${membersExpanded(row) ? 'Hide' : 'Show'} ${formatCount(row.members.length, row.ownerType === 'vmware' ? 'host' : 'node')} for ${row.name}`}
                                               onClick={() => toggleMembers(row)}
@@ -1031,7 +1029,7 @@ export const InfrastructureSourceManager: Component<InfrastructureSourceManagerP
                                             <Show
                                               when={props.onOpenAgentDoctor}
                                               fallback={
-                                                <span class="inline-flex items-center rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-medium whitespace-nowrap text-amber-800 dark:bg-amber-900 dark:text-amber-200">
+                                                <span class="inline-flex items-center rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-medium whitespace-nowrap text-amber-800 dark:bg-amber-900/25 dark:text-amber-200">
                                                   {row.agentUpdateCount === 1
                                                     ? 'Agent update'
                                                     : `${row.agentUpdateCount} updates`}
@@ -1040,7 +1038,7 @@ export const InfrastructureSourceManager: Component<InfrastructureSourceManagerP
                                             >
                                               <button
                                                 type="button"
-                                                class="inline-flex items-center rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-medium whitespace-nowrap text-amber-800 transition-colors hover:bg-amber-200 dark:bg-amber-900 dark:text-amber-200 dark:hover:bg-amber-800"
+                                                class="inline-flex items-center rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-medium whitespace-nowrap text-amber-800 transition-colors hover:bg-amber-200 dark:bg-amber-900/25 dark:text-amber-200 dark:hover:bg-amber-800"
                                                 onClick={() =>
                                                   props.onOpenAgentDoctor?.(
                                                     agentConnectionIDsForInfrastructureRow(
@@ -1058,7 +1056,7 @@ export const InfrastructureSourceManager: Component<InfrastructureSourceManagerP
                                             </Show>
                                           </Show>
                                           <span
-                                            class="truncate text-[12px] text-muted/90"
+                                            class="truncate text-[12px]"
                                             title={
                                               row.isCluster
                                                 ? 'Oldest activity across cluster API and member agents'
@@ -1110,7 +1108,7 @@ export const InfrastructureSourceManager: Component<InfrastructureSourceManagerP
                                                 type="button"
                                                 variant="outline"
                                                 size="xs"
-                                                class="min-w-[4.5rem]"
+                                                class="min-w-18"
                                                 onClick={() => props.onOpenConnection?.(row)}
                                                 data-infrastructure-manage-id={row.id}
                                               >
@@ -1145,7 +1143,7 @@ export const InfrastructureSourceManager: Component<InfrastructureSourceManagerP
                                           <Show when={row.lastErrorMessage}>
                                             <div
                                               role="alert"
-                                              class="mt-1 rounded-md border border-rose-300 bg-rose-50 px-3 py-2 text-xs text-rose-800 dark:border-rose-900 dark:bg-rose-950 dark:text-rose-200"
+                                              class="mt-1 rounded-md border border-rose-300 bg-rose-50 px-3 py-2 text-xs text-rose-800 dark:border-rose-900/25 dark:bg-rose-950/25 dark:text-rose-200"
                                             >
                                               {row.lastErrorMessage}
                                             </div>
@@ -1165,13 +1163,13 @@ export const InfrastructureSourceManager: Component<InfrastructureSourceManagerP
                                             : MEMBER_SHARED_API_TITLE;
                                           return (
                                             <>
-                                              <TableRow class="border-b border-border-subtle bg-surface-alt/30">
+                                              <TableRow class="border-b border-border-subtle">
                                                 <TableCell class="py-1.5 pl-3 pr-3 align-middle">
                                                   <div class="min-w-0 pl-4">
                                                     <div class="flex min-w-0 items-center gap-1.5">
-                                                      <span class="h-1.5 w-1.5 flex-shrink-0 rounded-full bg-border" />
+                                                      <span class="h-1.5 w-1.5 shrink-0 rounded-full bg-border" />
                                                       <div
-                                                        class="truncate text-[13px] text-base-content/85"
+                                                        class="truncate text-[13px]"
                                                         title={memberSystemTitle(member)}
                                                       >
                                                         {member.name}
@@ -1179,7 +1177,7 @@ export const InfrastructureSourceManager: Component<InfrastructureSourceManagerP
                                                       <Show when={memberPresentation}>
                                                         {(presentation) => (
                                                           <span
-                                                            class={`${presentation().badgeClassName} flex-shrink-0 whitespace-nowrap`}
+                                                            class={`${presentation().badgeClassName} shrink-0 whitespace-nowrap`}
                                                             title={memberSourceTitle}
                                                           >
                                                             {presentation().label}
@@ -1226,7 +1224,7 @@ export const InfrastructureSourceManager: Component<InfrastructureSourceManagerP
                                                     >
                                                       {member.statusLabel}
                                                     </span>
-                                                    <span class="truncate text-[12px] text-muted/90">
+                                                    <span class="truncate text-[12px]">
                                                       {member.lastActivityText}
                                                     </span>
                                                   </div>
@@ -1271,7 +1269,7 @@ export const InfrastructureSourceManager: Component<InfrastructureSourceManagerP
 
                                               <Show when={member.problem}>
                                                 {(problem) => (
-                                                  <TableRow class="border-b border-border-subtle bg-surface-alt/30">
+                                                  <TableRow class="border-b border-border-subtle">
                                                     <TableCell
                                                       colspan={actionColumnVisible() ? 4 : 3}
                                                       class="pb-1.5 pl-9 pr-3 pt-0"
@@ -1309,13 +1307,13 @@ export const InfrastructureSourceManager: Component<InfrastructureSourceManagerP
                                         <div class="min-w-0">
                                           <div class="flex items-center gap-1.5">
                                             <div
-                                              class="truncate text-[13px] text-base-content/85"
+                                              class="truncate text-[13px]"
                                               title={`${discoveredServerName(server)}${server.version ? ` · ${server.version}` : ''}`}
                                             >
                                               {discoveredServerName(server)}
                                             </div>
                                             <span
-                                              class="inline-flex flex-shrink-0 items-center rounded-full border border-dashed border-border bg-surface-alt px-2 py-0.5 text-[11px] font-medium text-muted whitespace-nowrap"
+                                              class="inline-flex shrink-0 items-center rounded-full border border-dashed border-border bg-surface-alt px-2 py-0.5 text-[11px] font-medium text-muted whitespace-nowrap"
                                               title="Discovery candidate — review to attach a source"
                                             >
                                               Candidate
@@ -1344,7 +1342,7 @@ export const InfrastructureSourceManager: Component<InfrastructureSourceManagerP
                                           <span class="inline-flex items-center rounded-full bg-blue-100 px-2 py-0.5 text-[11px] font-medium whitespace-nowrap text-blue-800 dark:bg-blue-950/40 dark:text-blue-200">
                                             Discovered
                                           </span>
-                                          <span class="truncate text-[12px] text-muted/90">
+                                          <span class="truncate text-[12px]">
                                             {lastDiscoveryResultText() ?? 'Waiting for scan'}
                                           </span>
                                         </div>
@@ -1362,7 +1360,7 @@ export const InfrastructureSourceManager: Component<InfrastructureSourceManagerP
                                               type="button"
                                               variant="outline"
                                               size="xs"
-                                              class="min-w-[4.5rem]"
+                                              class="min-w-18"
                                               onClick={() =>
                                                 props.onReviewDiscoveredSource?.(server)
                                               }
@@ -1443,11 +1441,11 @@ export const InfrastructureSourceManager: Component<InfrastructureSourceManagerP
                             const presentation = infrastructureSourcePresentation(row.source);
                             const sourceTitle = agentMethodTitleFor(row) ?? presentation.title;
                             return (
-                              <article class="rounded-md border border-border-subtle bg-surface p-3 shadow-sm">
+                              <article class="rounded-md border border-border-subtle bg-surface p-3 shadow-xs">
                                 <header class="flex items-start justify-between gap-2">
                                   <div class="min-w-0 flex-1">
                                     <div
-                                      class="break-words text-[13px] font-medium text-base-content"
+                                      class="wrap-break-word text-[13px] font-medium text-base-content"
                                       title={row.name}
                                     >
                                       {row.name}
@@ -1465,7 +1463,7 @@ export const InfrastructureSourceManager: Component<InfrastructureSourceManagerP
                                     <Show when={row.members.length > 0}>
                                       <button
                                         type="button"
-                                        class="mt-1 inline-flex min-h-11 items-center gap-0.5 rounded px-1 py-0.5 text-[11px] font-medium text-muted transition-colors hover:bg-surface-alt hover:text-base-content lg:min-h-0"
+                                        class="mt-1 inline-flex min-h-11 items-center gap-0.5 rounded-sm px-1 py-0.5 text-[11px] font-medium text-muted transition-colors hover:bg-surface-alt hover:text-base-content lg:min-h-0"
                                         aria-expanded={membersExpanded(row)}
                                         aria-label={`${membersExpanded(row) ? 'Hide' : 'Show'} ${formatCount(row.members.length, row.ownerType === 'vmware' ? 'host' : 'node')} for ${row.name}`}
                                         onClick={() => toggleMembers(row)}
@@ -1484,7 +1482,7 @@ export const InfrastructureSourceManager: Component<InfrastructureSourceManagerP
                                     </Show>
                                   </div>
                                   <span
-                                    class={`${presentation.badgeClassName} flex-shrink-0`}
+                                    class={`${presentation.badgeClassName} shrink-0`}
                                     title={sourceTitle}
                                   >
                                     {presentation.label}
@@ -1517,11 +1515,11 @@ export const InfrastructureSourceManager: Component<InfrastructureSourceManagerP
                                               memberPresentation.title)
                                             : MEMBER_SHARED_API_TITLE;
                                           return (
-                                            <div class="rounded-md border border-border-subtle bg-surface-alt/30 px-2.5 py-2">
+                                            <div class="rounded-md border border-border-subtle px-2.5 py-2">
                                               <div class="flex items-start justify-between gap-2">
                                                 <div class="min-w-0 flex-1">
                                                   <div
-                                                    class="break-words text-[13px] font-medium text-base-content"
+                                                    class="wrap-break-word text-[13px] font-medium text-base-content"
                                                     title={member.name}
                                                   >
                                                     {member.name}
@@ -1533,7 +1531,7 @@ export const InfrastructureSourceManager: Component<InfrastructureSourceManagerP
                                                 <Show when={memberPresentation}>
                                                   {(presentation) => (
                                                     <span
-                                                      class={`${presentation().badgeClassName} flex-shrink-0`}
+                                                      class={`${presentation().badgeClassName} shrink-0`}
                                                       title={memberSourceTitle}
                                                     >
                                                       {presentation().label}
@@ -1563,7 +1561,7 @@ export const InfrastructureSourceManager: Component<InfrastructureSourceManagerP
                                                 >
                                                   {member.statusLabel}
                                                 </span>
-                                                <span class="text-[12px] text-muted/90">
+                                                <span class="text-[12px]">
                                                   {member.lastActivityText}
                                                 </span>
                                               </div>
@@ -1624,7 +1622,7 @@ export const InfrastructureSourceManager: Component<InfrastructureSourceManagerP
                                         <Show
                                           when={props.onOpenAgentDoctor}
                                           fallback={
-                                            <span class="inline-flex items-center rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-medium text-amber-800 dark:bg-amber-900 dark:text-amber-200">
+                                            <span class="inline-flex items-center rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-medium text-amber-800 dark:bg-amber-900/25 dark:text-amber-200">
                                               {row.agentUpdateCount === 1
                                                 ? 'Agent update'
                                                 : `${row.agentUpdateCount} agent updates`}
@@ -1633,7 +1631,7 @@ export const InfrastructureSourceManager: Component<InfrastructureSourceManagerP
                                         >
                                           <button
                                             type="button"
-                                            class="inline-flex min-h-11 items-center rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-medium text-amber-800 transition-colors hover:bg-amber-200 lg:min-h-0 dark:bg-amber-900 dark:text-amber-200 dark:hover:bg-amber-800"
+                                            class="inline-flex min-h-11 items-center rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-medium text-amber-800 transition-colors hover:bg-amber-200 lg:min-h-0 dark:bg-amber-900/25 dark:text-amber-200 dark:hover:bg-amber-800"
                                             onClick={() =>
                                               props.onOpenAgentDoctor?.(
                                                 agentConnectionIDsForInfrastructureRow(row, true),
@@ -1648,7 +1646,7 @@ export const InfrastructureSourceManager: Component<InfrastructureSourceManagerP
                                         </Show>
                                       </Show>
                                       <span
-                                        class="text-[12px] text-muted/90"
+                                        class="text-[12px]"
                                         title={
                                           row.isCluster
                                             ? 'Oldest activity across cluster API and member agents'
@@ -1689,7 +1687,7 @@ export const InfrastructureSourceManager: Component<InfrastructureSourceManagerP
                                           type="button"
                                           variant="outline"
                                           size="xs"
-                                          class="min-h-11 min-w-[4.5rem] flex-shrink-0 lg:min-h-0"
+                                          class="min-h-11 min-w-18 shrink-0 lg:min-h-0"
                                           onClick={() => props.onOpenConnection?.(row)}
                                           data-infrastructure-manage-id={row.id}
                                         >
@@ -1717,7 +1715,7 @@ export const InfrastructureSourceManager: Component<InfrastructureSourceManagerP
                                 <Show when={row.lastErrorMessage}>
                                   <div
                                     role="alert"
-                                    class="mt-2 rounded-md border border-rose-300 bg-rose-50 px-3 py-2 text-xs text-rose-800 dark:border-rose-900 dark:bg-rose-950 dark:text-rose-200"
+                                    class="mt-2 rounded-md border border-rose-300 bg-rose-50 px-3 py-2 text-xs text-rose-800 dark:border-rose-900/25 dark:bg-rose-950/25 dark:text-rose-200"
                                   >
                                     {row.lastErrorMessage}
                                   </div>
@@ -1730,16 +1728,16 @@ export const InfrastructureSourceManager: Component<InfrastructureSourceManagerP
                         <Show when={group.id === product.type && discoveredRows().length > 0}>
                           <For each={discoveredRows()}>
                             {(server) => (
-                              <article class="rounded-md border border-blue-200 bg-blue-50/50 p-3 shadow-sm dark:border-blue-900 dark:bg-blue-950/20">
+                              <article class="rounded-md border border-blue-200 bg-blue-50/50 p-3 shadow-xs dark:border-blue-900/25 dark:bg-blue-950/20">
                                 <header class="flex items-start justify-between gap-2">
                                   <div
-                                    class="min-w-0 flex-1 break-words text-[13px] font-medium text-base-content"
+                                    class="min-w-0 flex-1 wrap-break-word text-[13px] font-medium text-base-content"
                                     title={`${discoveredServerName(server)}${server.version ? ` · ${server.version}` : ''}`}
                                   >
                                     {discoveredServerName(server)}
                                   </div>
                                   <span
-                                    class="inline-flex flex-shrink-0 items-center rounded-full border border-dashed border-border bg-surface-alt px-2 py-0.5 text-[11px] font-medium text-muted whitespace-nowrap"
+                                    class="inline-flex shrink-0 items-center rounded-full border border-dashed border-border bg-surface-alt px-2 py-0.5 text-[11px] font-medium text-muted whitespace-nowrap"
                                     title="Discovery candidate — review to attach a source"
                                   >
                                     Candidate
@@ -1762,7 +1760,7 @@ export const InfrastructureSourceManager: Component<InfrastructureSourceManagerP
                                     <span class="inline-flex items-center rounded-full bg-blue-100 px-2 py-0.5 text-[11px] font-medium text-blue-800 dark:bg-blue-950/40 dark:text-blue-200">
                                       Discovered
                                     </span>
-                                    <span class="text-[12px] text-muted/90">
+                                    <span class="text-[12px]">
                                       {lastDiscoveryResultText() ?? 'Waiting for scan'}
                                     </span>
                                   </div>
@@ -1771,7 +1769,7 @@ export const InfrastructureSourceManager: Component<InfrastructureSourceManagerP
                                       type="button"
                                       variant="outline"
                                       size="xs"
-                                      class="min-h-11 min-w-[4.5rem] flex-shrink-0 lg:min-h-0"
+                                      class="min-h-11 min-w-18 shrink-0 lg:min-h-0"
                                       onClick={() => props.onReviewDiscoveredSource?.(server)}
                                     >
                                       Review
diff --git a/frontend-modern/src/components/Settings/InfrastructureSourcePicker.tsx b/frontend-modern/src/components/Settings/InfrastructureSourcePicker.tsx
index 9312d7cca1..ef7b18ace9 100644
--- a/frontend-modern/src/components/Settings/InfrastructureSourcePicker.tsx
+++ b/frontend-modern/src/components/Settings/InfrastructureSourcePicker.tsx
@@ -17,13 +17,13 @@ interface InfrastructureSourcePickerProps {
 }
 
 const readinessBadgeClass =
-  'inline-flex items-center rounded-full border border-blue-200 bg-blue-100 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-blue-800 dark:border-blue-900 dark:bg-blue-950/40 dark:text-blue-200';
+  'inline-flex items-center rounded-full border border-blue-200 bg-blue-100 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-blue-800 dark:border-blue-900/25 dark:bg-blue-950/40 dark:text-blue-200';
 
 // Primary-path cards present the main onboarding journeys up front so users
 // pick a path before scanning the per-source card grid. The grid below stays
 // as a direct alternative for users who already know which source they want.
 const primaryPathCardClass =
-  'group flex h-full items-start gap-3 rounded-md border border-blue-200 bg-blue-50 p-4 text-left transition-colors hover:border-blue-500 hover:bg-blue-100 dark:border-blue-800 dark:bg-blue-950/40 dark:hover:bg-blue-900';
+  'group flex h-full items-start gap-3 rounded-md border border-blue-200 bg-blue-50 p-4 text-left transition-colors hover:border-blue-500 hover:bg-blue-100 dark:border-blue-800 dark:bg-blue-950/40 dark:hover:bg-blue-900/25';
 
 const CARD_ICON: Record<InfrastructureSourcePickerItemId, Component<{ class?: string }>> = {
   vmware: ServerCog,
@@ -112,7 +112,7 @@ export const InfrastructureSourcePicker: Component<InfrastructureSourcePickerPro
               >
                 <div
                   aria-hidden="true"
-                  class="flex h-10 w-10 flex-none items-center justify-center rounded-md border border-blue-200 bg-blue-100 text-blue-700 dark:border-blue-800 dark:bg-blue-900 dark:text-blue-200"
+                  class="flex h-10 w-10 flex-none items-center justify-center rounded-md border border-blue-200 bg-blue-100 text-blue-700 dark:border-blue-800 dark:bg-blue-900/25 dark:text-blue-200"
                 >
                   <Search class="h-5 w-5" />
                 </div>
@@ -132,7 +132,7 @@ export const InfrastructureSourcePicker: Component<InfrastructureSourcePickerPro
             >
               <div
                 aria-hidden="true"
-                class="flex h-10 w-10 flex-none items-center justify-center rounded-md border border-blue-200 bg-blue-100 text-blue-700 dark:border-blue-800 dark:bg-blue-900 dark:text-blue-200"
+                class="flex h-10 w-10 flex-none items-center justify-center rounded-md border border-blue-200 bg-blue-100 text-blue-700 dark:border-blue-800 dark:bg-blue-900/25 dark:text-blue-200"
               >
                 <Download class="h-5 w-5" />
               </div>
@@ -214,7 +214,7 @@ export const InfrastructureSourcePicker: Component<InfrastructureSourcePickerPro
             <button
               type="button"
               onClick={() => setShowAllSources(true)}
-              class="mt-1 inline-flex items-center text-xs font-medium text-blue-700 hover:text-blue-900 hover:underline dark:text-blue-300 dark:hover:text-blue-100"
+              class="mt-1 inline-flex items-center text-xs font-medium text-blue-700 hover:text-blue-900/25 hover:underline dark:text-blue-300 dark:hover:text-blue-100"
             >
               Show {hiddenCount()} more source{hiddenCount() === 1 ? '' : 's'}
             </button>
diff --git a/frontend-modern/src/components/Settings/InfrastructureWorkspace.tsx b/frontend-modern/src/components/Settings/InfrastructureWorkspace.tsx
index 655bb2fd8c..52a99f1c0a 100644
--- a/frontend-modern/src/components/Settings/InfrastructureWorkspace.tsx
+++ b/frontend-modern/src/components/Settings/InfrastructureWorkspace.tsx
@@ -466,7 +466,7 @@ const InfrastructureWorkspaceContent: Component<InfrastructureWorkspaceProps> =
         </div>
       </Show>
       <Show when={showAgentProfiles()}>
-        <div class="rounded-xl border border-border bg-surface p-4 shadow-sm">
+        <div class="rounded-xl border border-border bg-surface p-4 shadow-xs">
           <div class="mb-4 space-y-1">
             <div class="text-base font-semibold text-base-content">Agent profiles</div>
             <div class="text-sm text-muted">
@@ -538,7 +538,7 @@ const InfrastructureWorkspaceContent: Component<InfrastructureWorkspaceProps> =
           </div>
 
           <Show when={connection.lastError?.message}>
-            <div class="mt-4 rounded-md border border-rose-300 bg-rose-50 px-4 py-3 text-sm text-rose-800 dark:border-rose-900 dark:bg-rose-950 dark:text-rose-200">
+            <div class="mt-4 rounded-md border border-rose-300 bg-rose-50 px-4 py-3 text-sm text-rose-800 dark:border-rose-900/25 dark:bg-rose-950/25 dark:text-rose-200">
               {connection.lastError?.message}
             </div>
           </Show>
@@ -603,7 +603,7 @@ const InfrastructureWorkspaceContent: Component<InfrastructureWorkspaceProps> =
           {(message) => (
             <div
               role="alert"
-              class="rounded-md border border-rose-300 bg-rose-50 px-4 py-3 text-sm text-rose-800 dark:border-rose-900 dark:bg-rose-950 dark:text-rose-200"
+              class="rounded-md border border-rose-300 bg-rose-50 px-4 py-3 text-sm text-rose-800 dark:border-rose-900/25 dark:bg-rose-950/25 dark:text-rose-200"
             >
               {message()}
             </div>
@@ -654,7 +654,7 @@ const InfrastructureWorkspaceContent: Component<InfrastructureWorkspaceProps> =
                   <div class="space-y-1">
                     <div class="text-sm font-medium text-base-content">{connection.name}</div>
                     <Show when={connection.address && connection.address !== connection.name}>
-                      <div class="break-words text-xs text-muted">{connection.address}</div>
+                      <div class="wrap-break-word text-xs text-muted">{connection.address}</div>
                     </Show>
                     <Show when={versionPresentation()}>
                       {(presentation) => (
@@ -670,7 +670,7 @@ const InfrastructureWorkspaceContent: Component<InfrastructureWorkspaceProps> =
                     </Show>
                   </div>
                   <div class="flex items-center gap-2">
-                    <span class="inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-[11px] font-medium text-green-800 dark:bg-green-900 dark:text-green-300">
+                    <span class="inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-[11px] font-medium text-green-800 dark:bg-green-900/25 dark:text-green-300">
                       {connection.state === 'active' ? 'Active' : connection.state}
                     </span>
                     <span class="text-xs text-muted">{connectionLastActivityText(connection)}</span>
@@ -681,7 +681,7 @@ const InfrastructureWorkspaceContent: Component<InfrastructureWorkspaceProps> =
                   {(message) => (
                     <div
                       role="alert"
-                      class="mt-3 rounded-md border border-rose-300 bg-rose-50 px-3 py-2 text-xs text-rose-800 dark:border-rose-900 dark:bg-rose-950 dark:text-rose-200"
+                      class="mt-3 rounded-md border border-rose-300 bg-rose-50 px-3 py-2 text-xs text-rose-800 dark:border-rose-900/25 dark:bg-rose-950/25 dark:text-rose-200"
                     >
                       {message()}
                     </div>
@@ -737,7 +737,7 @@ const InfrastructureWorkspaceContent: Component<InfrastructureWorkspaceProps> =
         return (
           <div
             role="alert"
-            class="rounded-md border border-rose-300 bg-rose-50 px-4 py-3 text-sm text-rose-800 dark:border-rose-900 dark:bg-rose-950 dark:text-rose-200"
+            class="rounded-md border border-rose-300 bg-rose-50 px-4 py-3 text-sm text-rose-800 dark:border-rose-900/25 dark:bg-rose-950/25 dark:text-rose-200"
           >
             The selected connection is no longer available. Reload and try again.
           </div>
@@ -759,7 +759,7 @@ const InfrastructureWorkspaceContent: Component<InfrastructureWorkspaceProps> =
               fallback={
                 <div
                   role="alert"
-                  class="rounded-md border border-rose-300 bg-rose-50 px-4 py-3 text-sm text-rose-800 dark:border-rose-900 dark:bg-rose-950 dark:text-rose-200"
+                  class="rounded-md border border-rose-300 bg-rose-50 px-4 py-3 text-sm text-rose-800 dark:border-rose-900/25 dark:bg-rose-950/25 dark:text-rose-200"
                 >
                   Couldn't find the saved configuration for {connection.name}. It may have already
                   been removed.
@@ -776,7 +776,7 @@ const InfrastructureWorkspaceContent: Component<InfrastructureWorkspaceProps> =
             return (
               <div
                 role="alert"
-                class="rounded-md border border-rose-300 bg-rose-50 px-4 py-3 text-sm text-rose-800 dark:border-rose-900 dark:bg-rose-950 dark:text-rose-200"
+                class="rounded-md border border-rose-300 bg-rose-50 px-4 py-3 text-sm text-rose-800 dark:border-rose-900/25 dark:bg-rose-950/25 dark:text-rose-200"
               >
                 Couldn't find the saved VMware configuration for {connection.name}. It may have
                 already been removed.
@@ -805,7 +805,7 @@ const InfrastructureWorkspaceContent: Component<InfrastructureWorkspaceProps> =
             return (
               <div
                 role="alert"
-                class="rounded-md border border-rose-300 bg-rose-50 px-4 py-3 text-sm text-rose-800 dark:border-rose-900 dark:bg-rose-950 dark:text-rose-200"
+                class="rounded-md border border-rose-300 bg-rose-50 px-4 py-3 text-sm text-rose-800 dark:border-rose-900/25 dark:bg-rose-950/25 dark:text-rose-200"
               >
                 Couldn't find the saved TrueNAS configuration for {connection.name}. It may have
                 already been removed.
diff --git a/frontend-modern/src/components/Settings/NetworkBoundarySettingsSection.tsx b/frontend-modern/src/components/Settings/NetworkBoundarySettingsSection.tsx
index dd6e9bc009..174ea03989 100644
--- a/frontend-modern/src/components/Settings/NetworkBoundarySettingsSection.tsx
+++ b/frontend-modern/src/components/Settings/NetworkBoundarySettingsSection.tsx
@@ -9,7 +9,7 @@ interface EnvironmentOverrideAlertProps {
 
 function EnvironmentOverrideAlert(props: EnvironmentOverrideAlertProps) {
   return (
-    <div class="mt-2 p-2 bg-amber-100 dark:bg-amber-900 border border-amber-300 dark:border-amber-700 rounded text-xs text-amber-800 dark:text-amber-200">
+    <div class="mt-2 p-2 bg-amber-100 dark:bg-amber-900/25 border border-amber-300 dark:border-amber-700 rounded-sm text-xs text-amber-800 dark:text-amber-200">
       <div class="flex items-center gap-1">
         <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path
@@ -70,7 +70,7 @@ export const NetworkBoundarySettingsSection: Component<NetworkBoundarySettingsSe
               placeholder="https://pulse.example.com"
               class={`w-full min-h-10 sm:min-h-10 px-3 py-2.5 text-sm border rounded-md ${
                 props.envOverrides().publicURL
-                  ? 'border-amber-300 dark:border-amber-600 bg-amber-50 dark:bg-amber-900 cursor-not-allowed opacity-75'
+                  ? 'border-amber-300 dark:border-amber-600 bg-amber-50 dark:bg-amber-900/25 cursor-not-allowed opacity-75'
                   : 'border-border bg-surface'
               }`}
             />
@@ -126,7 +126,7 @@ export const NetworkBoundarySettingsSection: Component<NetworkBoundarySettingsSe
               placeholder="* or https://example.com"
               class={`w-full min-h-10 sm:min-h-10 px-3 py-2.5 text-sm border rounded-md ${
                 props.envOverrides().allowedOrigins
-                  ? 'border-amber-300 dark:border-amber-600 bg-amber-50 dark:bg-amber-900 cursor-not-allowed opacity-75'
+                  ? 'border-amber-300 dark:border-amber-600 bg-amber-50 dark:bg-amber-900/25 cursor-not-allowed opacity-75'
                   : 'border-border bg-surface'
               }`}
             />
@@ -166,7 +166,7 @@ export const NetworkBoundarySettingsSection: Component<NetworkBoundarySettingsSe
                 props.setAllowEmbedding(e.currentTarget.checked);
                 props.setHasUnsavedChanges(true);
               }}
-              class="h-5 w-5 sm:h-4 sm:w-4 rounded border-border text-blue-600 focus:ring-blue-500"
+              class="h-5 w-5 sm:h-4 sm:w-4 rounded-sm border-border text-blue-600 focus:ring-blue-500"
             />
             <label for="allowEmbedding" class="text-sm text-base-content">
               Allow iframe embedding
@@ -258,7 +258,7 @@ export const NetworkBoundarySettingsSection: Component<NetworkBoundarySettingsSe
         >
           <p class="text-xs text-amber-800 dark:text-amber-200 mb-2">
             <strong>Port Configuration:</strong> Use{' '}
-            <code class="font-mono bg-amber-100 dark:bg-amber-800 px-1 rounded">
+            <code class="font-mono bg-amber-100 dark:bg-amber-800 px-1 rounded-sm">
               systemctl edit pulse
             </code>
           </p>
diff --git a/frontend-modern/src/components/Settings/NodeModalClusterMembersSection.tsx b/frontend-modern/src/components/Settings/NodeModalClusterMembersSection.tsx
index 9016d2afc9..22d24f8417 100644
--- a/frontend-modern/src/components/Settings/NodeModalClusterMembersSection.tsx
+++ b/frontend-modern/src/components/Settings/NodeModalClusterMembersSection.tsx
@@ -54,7 +54,7 @@ export const NodeModalClusterMembersSection: Component<NodeModalClusterMembersSe
                     <span class="truncate">{endpoint.displayName || endpoint.nodeName}</span>
                     <Show when={endpoint.pulseReachable === false}>
                       <span
-                        class="inline-flex flex-shrink-0 items-center rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-medium text-amber-800 dark:bg-amber-950 dark:text-amber-300"
+                        class="inline-flex shrink-0 items-center rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-medium text-amber-800 dark:bg-amber-950/25 dark:text-amber-300"
                         title={endpoint.pulseError || 'Pulse could not connect to this node'}
                       >
                         Unreachable
diff --git a/frontend-modern/src/components/Settings/NodeModalMonitoringSection.tsx b/frontend-modern/src/components/Settings/NodeModalMonitoringSection.tsx
index 14e15a602e..c5bf8ede14 100644
--- a/frontend-modern/src/components/Settings/NodeModalMonitoringSection.tsx
+++ b/frontend-modern/src/components/Settings/NodeModalMonitoringSection.tsx
@@ -155,7 +155,7 @@ export const NodeModalMonitoringSection: Component<NodeModalMonitoringSectionPro
             class="mb-3"
             titleClass="text-base-content"
           />
-          <div class="rounded-md border border-border bg-surface p-3 text-sm shadow-sm">
+          <div class="rounded-md border border-border bg-surface p-3 text-sm shadow-xs">
             <div class="flex items-start justify-between gap-3">
               <div>
                 <p class="font-medium text-base-content">Monitor physical disk health (SMART)</p>
@@ -182,7 +182,7 @@ export const NodeModalMonitoringSection: Component<NodeModalMonitoringSectionPro
                   label="Physical disk health polling interval"
                   labelClass="sr-only"
                   fieldBaseClass="contents"
-                  selectBaseClass="rounded border bg-surface px-2 py-1 text-xs text-base-content"
+                  selectBaseClass="rounded-sm border bg-surface px-2 py-1 text-xs text-base-content"
                   value={state.formData().physicalDiskPollingMinutes}
                   onChange={(event) =>
                     state.updateField(
@@ -201,7 +201,7 @@ export const NodeModalMonitoringSection: Component<NodeModalMonitoringSectionPro
           </div>
 
           <Show when={state.showTemperatureMonitoringSection()}>
-            <div class="rounded-md border border-border bg-surface p-3 text-sm shadow-sm">
+            <div class="rounded-md border border-border bg-surface p-3 text-sm shadow-xs">
               <div class="flex items-start justify-between gap-3">
                 <div>
                   <p class="font-medium text-base-content">Temperature monitoring</p>
@@ -226,13 +226,13 @@ export const NodeModalMonitoringSection: Component<NodeModalMonitoringSectionPro
                 />
               </div>
               <Show when={!state.temperatureMonitoringEnabledValue()}>
-                <p class="mt-3 rounded border border-blue-200 bg-blue-50 p-2 text-xs text-blue-700 dark:border-blue-700 dark:bg-blue-900 dark:text-blue-200">
+                <p class="mt-3 rounded-sm border border-blue-200 bg-blue-50 p-2 text-xs text-blue-700 dark:border-blue-700 dark:bg-blue-900/25 dark:text-blue-200">
                   Pulse will skip SSH temperature polling for this node. Existing monitoring
                   readings will stop refreshing.
                 </p>
               </Show>
               <Show when={modalProps.temperatureMonitoringLocked}>
-                <p class="mt-3 rounded border border-amber-200 bg-amber-50 p-2 text-xs text-amber-800 dark:border-amber-700 dark:bg-amber-900 dark:text-amber-200">
+                <p class="mt-3 rounded-sm border border-amber-200 bg-amber-50 p-2 text-xs text-amber-800 dark:border-amber-700 dark:bg-amber-900/25 dark:text-amber-200">
                   {getTemperatureMonitoringLockedCopy()}
                 </p>
               </Show>
diff --git a/frontend-modern/src/components/Settings/NodeModalSetupGuideSection.tsx b/frontend-modern/src/components/Settings/NodeModalSetupGuideSection.tsx
index 19ff8161d4..9cc5eb4e86 100644
--- a/frontend-modern/src/components/Settings/NodeModalSetupGuideSection.tsx
+++ b/frontend-modern/src/components/Settings/NodeModalSetupGuideSection.tsx
@@ -41,7 +41,7 @@ const getNodeSetupStrategyPresentation = (
 const setupModeButtonClass = (selected: boolean): string =>
   `inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-md border border-transparent transition-colors ${
     selected
-      ? 'bg-surface text-blue-600 dark:text-blue-300 border-border shadow-sm'
+      ? 'bg-surface text-blue-600 dark:text-blue-300 border-border shadow-xs'
       : 'text-muted hover:text-blue-600 dark:hover:text-blue-300 hover:bg-surface-hover'
   }`;
 
@@ -74,7 +74,7 @@ export const NodeModalSetupGuideSection: Component<NodeModalSetupGuideSectionPro
         class={setupModeButtonClass(state.formData().setupMode === 'auto')}
       >
         Connect via API
-        <span class="ml-1.5 px-1.5 py-0.5 text-[10px] font-semibold bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 rounded">
+        <span class="ml-1.5 px-1.5 py-0.5 text-[10px] font-semibold bg-green-100 dark:bg-green-900/25 text-green-700 dark:text-green-300 rounded-sm">
           Recommended
         </span>
       </button>
@@ -99,8 +99,8 @@ export const NodeModalSetupGuideSection: Component<NodeModalSetupGuideSectionPro
     <div class="space-y-4">
       <Show when={modalProps.nodeType === 'pve'}>
         <div class="space-y-3 text-xs">
-          <div class="bg-blue-50 dark:bg-blue-900 border border-blue-200 dark:border-blue-800 rounded-md p-4">
-            <h5 class="text-sm font-medium text-blue-900 dark:text-blue-100 mb-3 flex items-center gap-2">
+          <div class="bg-blue-50 dark:bg-blue-900/25 border border-blue-200 dark:border-blue-800 rounded-md p-4">
+            <h5 class="text-sm font-medium text-blue-900/25 dark:text-blue-100 mb-3 flex items-center gap-2">
               <svg
                 width="16"
                 height="16"
@@ -116,7 +116,7 @@ export const NodeModalSetupGuideSection: Component<NodeModalSetupGuideSectionPro
             </h5>
             {setupStrategyPanel()}
             <Show when={setupHandoffDisabled()}>
-              <p class="mt-2 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs leading-5 text-amber-800 dark:border-amber-900 dark:bg-amber-950/30 dark:text-amber-200">
+              <p class="mt-2 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs leading-5 text-amber-800 dark:border-amber-900/25 dark:bg-amber-950/30 dark:text-amber-200">
                 {setupHandoffDisabledReason()}
               </p>
             </Show>
@@ -151,11 +151,11 @@ export const NodeModalSetupGuideSection: Component<NodeModalSetupGuideSectionPro
                       Pulse server must also be opted in: turn on{' '}
                       <span class="font-medium">Discover Docker in LXC guests</span> in Settings →
                       System → General (admin only), or set{' '}
-                      <code class="break-all rounded bg-blue-100 px-1 font-mono dark:bg-blue-900">
+                      <code class="break-all rounded-sm bg-blue-100 px-1 font-mono dark:bg-blue-900/25">
                         PULSE_ENABLE_PROXMOX_GUEST_DOCKER_INVENTORY=true
                       </code>{' '}
                       in the server environment to lock it on. You can limit guests with{' '}
-                      <code class="break-all rounded bg-blue-100 px-1 font-mono dark:bg-blue-900">
+                      <code class="break-all rounded-sm bg-blue-100 px-1 font-mono dark:bg-blue-900/25">
                         PULSE_PROXMOX_GUEST_DOCKER_INVENTORY_VMIDS=101,102
                       </code>
                       . Pulse uses bounded <code>pct exec</code> Docker summary checks and skips
@@ -218,7 +218,7 @@ export const NodeModalSetupGuideSection: Component<NodeModalSetupGuideSectionPro
                         </code>
                       }
                     >
-                      <code class="block text-base-content whitespace-pre-wrap break-words">
+                      <code class="block text-base-content whitespace-pre-wrap wrap-break-word">
                         {state.agentInstallCommand()}
                       </code>
                     </Show>
@@ -233,7 +233,7 @@ export const NodeModalSetupGuideSection: Component<NodeModalSetupGuideSectionPro
                       onChange={(event) =>
                         state.setAgentInstallInsecure(event.currentTarget.checked)
                       }
-                      class="mt-0.5 rounded text-blue-600 focus:ring-blue-500"
+                      class="mt-0.5 rounded-sm text-blue-600 focus:ring-blue-500"
                     />
                     <span>
                       Skip TLS certificate verification when downloading the installer and
@@ -329,7 +329,7 @@ export const NodeModalSetupGuideSection: Component<NodeModalSetupGuideSectionPro
                       <Show when={state.quickSetupTokenHint().length > 0}>
                         <div class="mt-2 text-xs text-blue-800 dark:text-blue-200">
                           <span class="font-semibold">Setup token hint:</span>
-                          <code class="ml-1 font-mono break-all text-blue-900 dark:text-blue-100">
+                          <code class="ml-1 font-mono break-all text-blue-900/25 dark:text-blue-100">
                             {state.quickSetupTokenHint()}
                           </code>
                           <Show when={state.quickSetupExpiry()}>
@@ -339,10 +339,10 @@ export const NodeModalSetupGuideSection: Component<NodeModalSetupGuideSectionPro
                       </Show>
                     </div>
 
-                    <div class="bg-amber-50 dark:bg-amber-900 border border-amber-200 dark:border-amber-800 rounded-md p-3">
+                    <div class="bg-amber-50 dark:bg-amber-900/25 border border-amber-200 dark:border-amber-800 rounded-md p-3">
                       <div class="flex items-start space-x-2">
                         <svg
-                          class="h-5 w-5 text-amber-600 dark:text-amber-400 mt-0.5 flex-shrink-0"
+                          class="h-5 w-5 text-amber-600 dark:text-amber-400 mt-0.5 shrink-0"
                           fill="none"
                           viewBox="0 0 24 24"
                           stroke="currentColor"
@@ -386,7 +386,7 @@ export const NodeModalSetupGuideSection: Component<NodeModalSetupGuideSectionPro
                           2. Upload to your server via SCP/SFTP
                           <br />
                           3. Run:{' '}
-                          <code class="bg-surface-alt px-1 rounded">
+                          <code class="bg-surface-alt px-1 rounded-sm">
                             bash &lt;downloaded-script&gt;
                           </code>
                         </div>
@@ -394,7 +394,7 @@ export const NodeModalSetupGuideSection: Component<NodeModalSetupGuideSectionPro
                     </details>
                   </div>
 
-                  <div class="bg-blue-50 dark:bg-blue-900 border border-blue-200 dark:border-blue-800 rounded-md p-3">
+                  <div class="bg-blue-50 dark:bg-blue-900/25 border border-blue-200 dark:border-blue-800 rounded-md p-3">
                     <p class="text-sm font-semibold text-blue-800 dark:text-blue-200 mb-2">
                       What this does:
                     </p>
@@ -403,7 +403,7 @@ export const NodeModalSetupGuideSection: Component<NodeModalSetupGuideSectionPro
                         <span class="text-emerald-400 mr-2 mt-0.5">✓</span>
                         <span>
                           Creates monitoring user{' '}
-                          <code class="bg-blue-100 dark:bg-blue-800 px-1 rounded">
+                          <code class="bg-blue-100 dark:bg-blue-800 px-1 rounded-sm">
                             pulse-monitor@pve
                           </code>
                         </span>
@@ -583,8 +583,8 @@ export const NodeModalSetupGuideSection: Component<NodeModalSetupGuideSectionPro
                       </p>
                     </div>
 
-                    <div class="bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-800 rounded-md p-2">
-                      <p class="text-sm font-medium text-green-900 dark:text-green-100 mb-1">
+                    <div class="bg-green-50 dark:bg-green-900/25 border border-green-200 dark:border-green-800 rounded-md p-2">
+                      <p class="text-sm font-medium text-green-900/25 dark:text-green-100 mb-1">
                         4. Add to Pulse with:
                       </p>
                       <ul class="text-xs text-green-800 dark:text-green-200 ml-4 list-disc">
@@ -610,8 +610,8 @@ export const NodeModalSetupGuideSection: Component<NodeModalSetupGuideSectionPro
 
       <Show when={modalProps.nodeType === 'pbs'}>
         <div class="space-y-3 text-xs">
-          <div class="bg-blue-50 dark:bg-blue-900 border border-blue-200 dark:border-blue-800 rounded-md p-4">
-            <h5 class="text-sm font-medium text-blue-900 dark:text-blue-100 mb-3 flex items-center gap-2">
+          <div class="bg-blue-50 dark:bg-blue-900/25 border border-blue-200 dark:border-blue-800 rounded-md p-4">
+            <h5 class="text-sm font-medium text-blue-900/25 dark:text-blue-100 mb-3 flex items-center gap-2">
               <svg
                 width="16"
                 height="16"
@@ -627,7 +627,7 @@ export const NodeModalSetupGuideSection: Component<NodeModalSetupGuideSectionPro
             </h5>
             {setupStrategyPanel()}
             <Show when={setupHandoffDisabled()}>
-              <p class="mt-2 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs leading-5 text-amber-800 dark:border-amber-900 dark:bg-amber-950/30 dark:text-amber-200">
+              <p class="mt-2 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs leading-5 text-amber-800 dark:border-amber-900/25 dark:bg-amber-950/30 dark:text-amber-200">
                 {setupHandoffDisabledReason()}
               </p>
             </Show>
@@ -659,7 +659,7 @@ export const NodeModalSetupGuideSection: Component<NodeModalSetupGuideSectionPro
                       onClick={() =>
                         state.copyProxmoxAgentInstallCommand('pbs', 'Command copied to clipboard')
                       }
-                      class="absolute top-2 right-2 p-1.5 text-slate-400 hover:text-white rounded bg-surface hover:bg-slate-700 transition-colors"
+                      class="absolute top-2 right-2 p-1.5 text-slate-400 hover:text-white rounded-sm bg-surface hover:bg-slate-700 transition-colors"
                       title={
                         setupHandoffDisabled() ? setupHandoffDisabledReason() : 'Copy to clipboard'
                       }
@@ -721,7 +721,7 @@ export const NodeModalSetupGuideSection: Component<NodeModalSetupGuideSectionPro
                       onChange={(event) =>
                         state.setAgentInstallInsecure(event.currentTarget.checked)
                       }
-                      class="mt-0.5 rounded text-blue-600 focus:ring-blue-500"
+                      class="mt-0.5 rounded-sm text-blue-600 focus:ring-blue-500"
                     />
                     <span>
                       Skip TLS certificate verification when downloading the installer and
@@ -802,7 +802,7 @@ export const NodeModalSetupGuideSection: Component<NodeModalSetupGuideSectionPro
                       <Show when={state.quickSetupTokenHint().length > 0}>
                         <div class="mt-2 text-xs text-blue-800 dark:text-blue-200">
                           <span class="font-semibold">Setup token hint:</span>
-                          <code class="ml-1 font-mono break-all text-blue-900 dark:text-blue-100">
+                          <code class="ml-1 font-mono break-all text-blue-900/25 dark:text-blue-100">
                             {state.quickSetupTokenHint()}
                           </code>
                           <Show when={state.quickSetupExpiry()}>
@@ -812,10 +812,10 @@ export const NodeModalSetupGuideSection: Component<NodeModalSetupGuideSectionPro
                       </Show>
                     </div>
 
-                    <div class="bg-amber-50 dark:bg-amber-900 border border-amber-200 dark:border-amber-800 rounded-md p-3">
+                    <div class="bg-amber-50 dark:bg-amber-900/25 border border-amber-200 dark:border-amber-800 rounded-md p-3">
                       <div class="flex items-start space-x-2">
                         <svg
-                          class="h-5 w-5 text-amber-600 dark:text-amber-400 mt-0.5 flex-shrink-0"
+                          class="h-5 w-5 text-amber-600 dark:text-amber-400 mt-0.5 shrink-0"
                           fill="none"
                           viewBox="0 0 24 24"
                           stroke="currentColor"
@@ -859,7 +859,7 @@ export const NodeModalSetupGuideSection: Component<NodeModalSetupGuideSectionPro
                           2. Upload to your PBS via SCP/SFTP
                           <br />
                           3. Run:{' '}
-                          <code class="bg-surface-alt px-1 rounded">
+                          <code class="bg-surface-alt px-1 rounded-sm">
                             bash &lt;downloaded-script&gt;
                           </code>
                         </div>
@@ -867,7 +867,7 @@ export const NodeModalSetupGuideSection: Component<NodeModalSetupGuideSectionPro
                     </details>
                   </div>
 
-                  <div class="bg-blue-50 dark:bg-blue-900 border border-blue-200 dark:border-blue-800 rounded-md p-3">
+                  <div class="bg-blue-50 dark:bg-blue-900/25 border border-blue-200 dark:border-blue-800 rounded-md p-3">
                     <p class="text-sm font-semibold text-blue-800 dark:text-blue-200 mb-2">
                       What this does:
                     </p>
@@ -876,7 +876,7 @@ export const NodeModalSetupGuideSection: Component<NodeModalSetupGuideSectionPro
                         <span class="text-emerald-400 mr-2 mt-0.5">✓</span>
                         <span>
                           Creates monitoring user{' '}
-                          <code class="bg-blue-100 dark:bg-blue-800 px-1 rounded">
+                          <code class="bg-blue-100 dark:bg-blue-800 px-1 rounded-sm">
                             pulse-monitor@pbs
                           </code>
                         </span>
@@ -1052,8 +1052,8 @@ export const NodeModalSetupGuideSection: Component<NodeModalSetupGuideSectionPro
                       </div>
                     </div>
 
-                    <div class="bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-800 rounded-md p-2">
-                      <p class="text-sm font-medium text-green-900 dark:text-green-100 mb-1">
+                    <div class="bg-green-50 dark:bg-green-900/25 border border-green-200 dark:border-green-800 rounded-md p-2">
+                      <p class="text-sm font-medium text-green-900/25 dark:text-green-100 mb-1">
                         4. Add to Pulse with:
                       </p>
                       <ul class="text-xs text-green-800 dark:text-green-200 ml-4 list-disc">
@@ -1070,7 +1070,7 @@ export const NodeModalSetupGuideSection: Component<NodeModalSetupGuideSectionPro
                       </ul>
                     </div>
 
-                    <div class="bg-amber-50 dark:bg-amber-900 border border-amber-200 dark:border-amber-800 rounded-md p-2 mt-3">
+                    <div class="bg-amber-50 dark:bg-amber-900/25 border border-amber-200 dark:border-amber-800 rounded-md p-2 mt-3">
                       <p class="text-xs font-semibold text-amber-800 dark:text-amber-200 mb-1">
                         About PBS Permissions:
                       </p>
diff --git a/frontend-modern/src/components/Settings/NodeModalStatusFooter.tsx b/frontend-modern/src/components/Settings/NodeModalStatusFooter.tsx
index c35d90d32e..74e8d57bad 100644
--- a/frontend-modern/src/components/Settings/NodeModalStatusFooter.tsx
+++ b/frontend-modern/src/components/Settings/NodeModalStatusFooter.tsx
@@ -50,7 +50,7 @@ export const NodeModalStatusFooter: Component<NodeModalStatusFooterProps> = (pro
                 fill="none"
                 stroke="currentColor"
                 stroke-width="2"
-                class="flex-shrink-0 mt-0.5"
+                class="shrink-0 mt-0.5"
               >
                 <path d="M9 12l2 2 4-4"></path>
                 <circle cx="12" cy="12" r="10"></circle>
@@ -64,7 +64,7 @@ export const NodeModalStatusFooter: Component<NodeModalStatusFooterProps> = (pro
                 fill="none"
                 stroke="currentColor"
                 stroke-width="2"
-                class="flex-shrink-0 mt-0.5"
+                class="shrink-0 mt-0.5"
               >
                 <path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
               </svg>
@@ -77,7 +77,7 @@ export const NodeModalStatusFooter: Component<NodeModalStatusFooterProps> = (pro
                 fill="none"
                 stroke="currentColor"
                 stroke-width="2"
-                class="flex-shrink-0 mt-0.5"
+                class="shrink-0 mt-0.5"
               >
                 <circle cx="12" cy="12" r="10"></circle>
                 <line x1="15" y1="9" x2="9" y2="15"></line>
@@ -117,7 +117,7 @@ export const NodeModalStatusFooter: Component<NodeModalStatusFooterProps> = (pro
         {(message) => (
           <div
             role="alert"
-            class="mx-6 mb-2 rounded-md border border-rose-300 bg-rose-50 px-4 py-3 text-sm text-rose-800 dark:border-rose-900 dark:bg-rose-950 dark:text-rose-200"
+            class="mx-6 mb-2 rounded-md border border-rose-300 bg-rose-50 px-4 py-3 text-sm text-rose-800 dark:border-rose-900/25 dark:bg-rose-950/25 dark:text-rose-200"
           >
             {message()}
           </div>
@@ -134,7 +134,7 @@ export const NodeModalStatusFooter: Component<NodeModalStatusFooterProps> = (pro
               class={`px-4 py-2 text-sm rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${
                 props.deleteConfirming
                   ? 'bg-rose-600 text-white hover:bg-rose-700'
-                  : 'border border-rose-300 text-rose-700 hover:bg-rose-50 dark:border-rose-900 dark:text-rose-300 dark:hover:bg-rose-950'
+                  : 'border border-rose-300 text-rose-700 hover:bg-rose-50 dark:border-rose-900/25 dark:text-rose-300 dark:hover:bg-rose-950/25'
               }`}
             >
               {props.deletePending
diff --git a/frontend-modern/src/components/Settings/OrganizationAccessManagementSection.tsx b/frontend-modern/src/components/Settings/OrganizationAccessManagementSection.tsx
index f2a7c39721..b611513cfc 100644
--- a/frontend-modern/src/components/Settings/OrganizationAccessManagementSection.tsx
+++ b/frontend-modern/src/components/Settings/OrganizationAccessManagementSection.tsx
@@ -26,7 +26,7 @@ export const OrganizationAccessManagementSection: Component<
                 value={props.state.inviteUserID()}
                 onInput={(event) => props.state.setInviteUserID(event.currentTarget.value)}
                 placeholder="username"
-                class="w-full rounded-md border px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                class="w-full rounded-md border px-3 py-2 text-sm shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500"
               />
               <FormSelect
                 label="Invite role"
@@ -36,7 +36,7 @@ export const OrganizationAccessManagementSection: Component<
                 onChange={(event) =>
                   props.state.setInviteRole(event.currentTarget.value as OrganizationRole)
                 }
-                selectBaseClass="rounded-md border border-border bg-surface px-3 py-2 text-sm text-base-content shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                selectBaseClass="rounded-md border border-border bg-surface px-3 py-2 text-sm text-base-content shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500"
               >
                 <For
                   each={ORGANIZATION_MEMBER_ROLE_OPTIONS.filter(
@@ -61,7 +61,7 @@ export const OrganizationAccessManagementSection: Component<
         </Show>
 
         <Show when={!props.state.canManageCurrentOrg()}>
-          <div class="rounded-md border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800 dark:border-amber-800 dark:bg-amber-900 dark:text-amber-300">
+          <div class="rounded-md border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800 dark:border-amber-800 dark:bg-amber-900/25 dark:text-amber-300">
             {getOrganizationAccessManageRequiredMessage()}
           </div>
         </Show>
diff --git a/frontend-modern/src/components/Settings/OrganizationAccessMembersSection.tsx b/frontend-modern/src/components/Settings/OrganizationAccessMembersSection.tsx
index 8c69e1edba..cf350a8223 100644
--- a/frontend-modern/src/components/Settings/OrganizationAccessMembersSection.tsx
+++ b/frontend-modern/src/components/Settings/OrganizationAccessMembersSection.tsx
@@ -55,7 +55,7 @@ export const OrganizationAccessMembersSection: Component<OrganizationAccessMembe
                       props.state.saving() ||
                       (isOwner() && props.currentUser !== currentOrg().ownerUserId)
                     }
-                    selectBaseClass="rounded-md border border-border bg-surface px-2 py-1 text-xs text-base-content shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-60"
+                    selectBaseClass="rounded-md border border-border bg-surface px-2 py-1 text-xs text-base-content shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-60"
                   >
                     <For
                       each={ORGANIZATION_MEMBER_ROLE_OPTIONS.filter(
diff --git a/frontend-modern/src/components/Settings/OrganizationOverviewDetailsSection.tsx b/frontend-modern/src/components/Settings/OrganizationOverviewDetailsSection.tsx
index e622bd0eb0..d1a3c9df6b 100644
--- a/frontend-modern/src/components/Settings/OrganizationOverviewDetailsSection.tsx
+++ b/frontend-modern/src/components/Settings/OrganizationOverviewDetailsSection.tsx
@@ -48,7 +48,7 @@ export const OrganizationOverviewDetailsSection: Component<
               value={props.state.displayNameDraft()}
               onInput={(event) => props.state.setDisplayNameDraft(event.currentTarget.value)}
               disabled={!props.state.canManageCurrentOrg() || props.state.saving()}
-              class="w-full rounded-md border px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 "
+              class="w-full rounded-md border px-3 py-2 text-sm shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500 "
             />
             <Button
               variant="primary"
diff --git a/frontend-modern/src/components/Settings/OrganizationSharingCreateSection.tsx b/frontend-modern/src/components/Settings/OrganizationSharingCreateSection.tsx
index 4d24477629..db02bb1671 100644
--- a/frontend-modern/src/components/Settings/OrganizationSharingCreateSection.tsx
+++ b/frontend-modern/src/components/Settings/OrganizationSharingCreateSection.tsx
@@ -28,7 +28,7 @@ export const OrganizationSharingCreateSection: Component<OrganizationSharingCrea
                 labelClass="text-xs font-medium uppercase tracking-wide text-muted"
                 value={props.state.targetOrgId()}
                 onChange={(event) => props.state.updateTargetOrg(event.currentTarget.value)}
-                selectBaseClass={`w-full rounded-md border bg-surface px-3 py-2 text-sm text-base-content shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 ${props.state.targetOrgError() ? 'border-red-400 dark:border-red-500' : 'border-border'}`}
+                selectBaseClass={`w-full rounded-md border bg-surface px-3 py-2 text-sm text-base-content shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500 ${props.state.targetOrgError() ? 'border-red-400 dark:border-red-500' : 'border-border'}`}
               >
                 <option value="">Select organization</option>
                 <For each={props.state.targetOrgOptions()}>
@@ -48,7 +48,7 @@ export const OrganizationSharingCreateSection: Component<OrganizationSharingCrea
               onChange={(event) =>
                 props.state.setAccessRole(event.currentTarget.value as ShareAccessRole)
               }
-              selectBaseClass="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-base-content shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              selectBaseClass="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-base-content shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500"
             >
               <For each={ORGANIZATION_SHARE_ROLE_OPTIONS}>
                 {(option) => <option value={option.value}>{option.label}</option>}
@@ -57,14 +57,14 @@ export const OrganizationSharingCreateSection: Component<OrganizationSharingCrea
           </div>
 
           <Show when={props.state.unifiedResourceOptions().length > 0}>
-            <div class="rounded-md border border-blue-200 bg-blue-50 p-3 space-y-2 dark:border-blue-900 dark:bg-blue-900">
+            <div class="rounded-md border border-blue-200 bg-blue-50 p-3 space-y-2 dark:border-blue-900/25 dark:bg-blue-900/25">
               <FormSelect
                 label="Quick Pick Resource"
                 labelClass="text-xs font-medium uppercase tracking-wide text-blue-700 dark:text-blue-300"
                 fieldBaseClass="space-y-1 block"
                 value={props.state.selectedQuickPick()}
                 onChange={(event) => props.state.applyResourceQuickPick(event.currentTarget.value)}
-                selectBaseClass="w-full rounded-md border border-blue-300 bg-surface px-3 py-2 text-sm text-base-content shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-blue-700"
+                selectBaseClass="w-full rounded-md border border-blue-300 bg-surface px-3 py-2 text-sm text-base-content shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:border-blue-700"
               >
                 <option value="">Select resource</option>
                 <For each={props.state.unifiedResourceOptions()}>
@@ -109,7 +109,7 @@ export const OrganizationSharingCreateSection: Component<OrganizationSharingCrea
                   value={props.state.resourceType()}
                   onInput={(event) => props.state.updateResourceType(event.currentTarget.value)}
                   placeholder={CANONICAL_RESOURCE_TYPES.join(' | ')}
-                  class={`w-full rounded-md border bg-surface px-3 py-2 text-sm text-base-content shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 ${props.state.resourceTypeError() ? 'border-red-400 dark:border-red-500' : 'border-border'}`}
+                  class={`w-full rounded-md border bg-surface px-3 py-2 text-sm text-base-content shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500 ${props.state.resourceTypeError() ? 'border-red-400 dark:border-red-500' : 'border-border'}`}
                 />
                 <Show when={props.state.resourceTypeError() !== ''}>
                   <p class="text-xs text-red-600 dark:text-red-400">
@@ -127,7 +127,7 @@ export const OrganizationSharingCreateSection: Component<OrganizationSharingCrea
                   value={props.state.resourceId()}
                   onInput={(event) => props.state.updateResourceId(event.currentTarget.value)}
                   placeholder="resource identifier"
-                  class={`w-full rounded-md border bg-surface px-3 py-2 text-sm text-base-content shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 ${props.state.resourceIdError() ? 'border-red-400 dark:border-red-500' : 'border-border'}`}
+                  class={`w-full rounded-md border bg-surface px-3 py-2 text-sm text-base-content shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500 ${props.state.resourceIdError() ? 'border-red-400 dark:border-red-500' : 'border-border'}`}
                 />
                 <Show when={props.state.resourceIdError() !== ''}>
                   <p class="text-xs text-red-600 dark:text-red-400">
@@ -145,7 +145,7 @@ export const OrganizationSharingCreateSection: Component<OrganizationSharingCrea
                   value={props.state.resourceName()}
                   onInput={(event) => props.state.updateResourceName(event.currentTarget.value)}
                   placeholder="optional display name"
-                  class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-base-content shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-base-content shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500"
                 />
               </label>
             </div>
@@ -168,7 +168,7 @@ export const OrganizationSharingCreateSection: Component<OrganizationSharingCrea
 
     <Show when={!props.state.canManageCurrentOrg()}>
       <div class="p-4 sm:p-6">
-        <div class="rounded-md border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800 dark:border-amber-800 dark:bg-amber-900 dark:text-amber-300">
+        <div class="rounded-md border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800 dark:border-amber-800 dark:bg-amber-900/25 dark:text-amber-300">
           Admin or owner role required to create or remove organization shares.
         </div>
       </div>
diff --git a/frontend-modern/src/components/Settings/ProLicensePlanSection.tsx b/frontend-modern/src/components/Settings/ProLicensePlanSection.tsx
index 13632ad65c..f434f12a99 100644
--- a/frontend-modern/src/components/Settings/ProLicensePlanSection.tsx
+++ b/frontend-modern/src/components/Settings/ProLicensePlanSection.tsx
@@ -111,11 +111,11 @@ const commercialMigrationNoticeTone = (notice: Notice): InlineNoticeTone =>
 const statusStateClass = (state: 'active' | 'partial' | 'missing') => {
   switch (state) {
     case 'active':
-      return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-200';
+      return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/25 dark:text-emerald-200';
     case 'partial':
-      return 'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-200';
+      return 'bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-200';
     case 'missing':
-      return 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-200';
+      return 'bg-red-100 text-red-700 dark:bg-red-900/25 dark:text-red-200';
   }
 };
 
@@ -406,7 +406,7 @@ export const ProLicensePlanSection: Component<ProLicensePlanSectionProps> = (pro
         )}
       </Show>
       <Show when={licenseEntitlementsLoadError()}>
-        <div class="rounded-md border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900 p-3 text-sm text-amber-800 dark:text-amber-200">
+        <div class="rounded-md border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/25 p-3 text-sm text-amber-800 dark:text-amber-200">
           <p class="font-medium">Could not load license status</p>
           <p class="text-xs text-amber-700 dark:text-amber-300 mt-1">
             The license server could not be reached. Some features may be temporarily restricted.
diff --git a/frontend-modern/src/components/Settings/QuickSecuritySetup.tsx b/frontend-modern/src/components/Settings/QuickSecuritySetup.tsx
index 98708a6c4a..1d1c2a692c 100644
--- a/frontend-modern/src/components/Settings/QuickSecuritySetup.tsx
+++ b/frontend-modern/src/components/Settings/QuickSecuritySetup.tsx
@@ -165,7 +165,7 @@ Important:
       <Show when={!showCredentials()}>
         <div class="space-y-4">
           <div class="flex items-start space-x-3">
-            <div class="flex-shrink-0">
+            <div class="shrink-0">
               <svg
                 class="h-6 w-6 text-blue-600 dark:text-blue-400"
                 fill="none"
@@ -190,7 +190,7 @@ Important:
                 }
                 size="sm"
                 titleClass="text-base-content"
-                descriptionClass="!text-xs text-muted"
+                descriptionClass="text-xs! text-muted"
               />
               <ul class="mt-2 space-y-1 text-xs text-muted">
                 <li class="flex items-center">
@@ -295,10 +295,10 @@ Important:
             </Show>
           </div>
 
-          <div class="bg-yellow-50 dark:bg-yellow-900 border border-yellow-200 dark:border-yellow-800 rounded-md p-3">
+          <div class="bg-yellow-50 dark:bg-yellow-900/25 border border-yellow-200 dark:border-yellow-800 rounded-md p-3">
             <div class="flex">
               <svg
-                class="h-5 w-5 text-yellow-600 dark:text-yellow-400 mr-2 flex-shrink-0"
+                class="h-5 w-5 text-yellow-600 dark:text-yellow-400 mr-2 shrink-0"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
@@ -377,13 +377,13 @@ Important:
             <button
               type="button"
               onClick={downloadCredentials}
-              class="px-3 py-1 text-xs bg-green-600 text-white rounded hover:bg-green-700 transition-colors"
+              class="px-3 py-1 text-xs bg-green-600 text-white rounded-sm hover:bg-green-700 transition-colors"
             >
               Download credentials
             </button>
           </div>
 
-          <div class="bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-800 rounded-md p-3">
+          <div class="bg-green-50 dark:bg-green-900/25 border border-green-200 dark:border-green-800 rounded-md p-3">
             <p class="text-sm font-semibold text-green-800 dark:text-green-200 mb-2">
               Save these credentials now - they won't be shown again!
             </p>
@@ -393,13 +393,13 @@ Important:
             <div class="bg-base rounded-md p-3">
               <span class={labelClass('text-xs')}>Username</span>
               <div class="mt-1 flex items-center gap-2">
-                <code class="flex-1 font-mono text-sm bg-surface px-3 py-2 rounded border border-border">
+                <code class="flex-1 font-mono text-sm bg-surface px-3 py-2 rounded-sm border border-border">
                   {credentials()!.username}
                 </code>
                 <button
                   type="button"
                   onClick={() => handleCopy(credentials()!.username, 'username')}
-                  class="px-3 py-2 text-xs bg-slate-600 text-white rounded hover:bg-slate-700 transition-colors"
+                  class="px-3 py-2 text-xs bg-slate-600 text-white rounded-sm hover:bg-slate-700 transition-colors"
                 >
                   {copied() === 'username' ? 'Copied!' : 'Copy'}
                 </button>
@@ -409,13 +409,13 @@ Important:
             <div class="bg-base rounded-md p-3">
               <span class={labelClass('text-xs')}>Password</span>
               <div class="mt-1 flex items-center gap-2">
-                <code class="flex-1 font-mono text-sm bg-surface px-3 py-2 rounded border border-border break-all">
+                <code class="flex-1 font-mono text-sm bg-surface px-3 py-2 rounded-sm border border-border break-all">
                   {credentials()!.password}
                 </code>
                 <button
                   type="button"
                   onClick={() => handleCopy(credentials()!.password, 'password')}
-                  class="px-3 py-2 text-xs bg-slate-600 text-white rounded hover:bg-slate-700 transition-colors"
+                  class="px-3 py-2 text-xs bg-slate-600 text-white rounded-sm hover:bg-slate-700 transition-colors"
                 >
                   {copied() === 'password' ? 'Copied!' : 'Copy'}
                 </button>
@@ -425,13 +425,13 @@ Important:
             <div class="bg-base rounded-md p-3">
               <span class={labelClass('text-xs')}>API token</span>
               <div class="mt-1 flex items-center gap-2">
-                <code class="flex-1 font-mono text-sm bg-surface px-3 py-2 rounded border border-border break-all">
+                <code class="flex-1 font-mono text-sm bg-surface px-3 py-2 rounded-sm border border-border break-all">
                   {credentials()!.apiToken}
                 </code>
                 <button
                   type="button"
                   onClick={() => handleCopy(credentials()!.apiToken!, 'token')}
-                  class="px-3 py-2 text-xs bg-slate-600 text-white rounded hover:bg-slate-700 transition-colors"
+                  class="px-3 py-2 text-xs bg-slate-600 text-white rounded-sm hover:bg-slate-700 transition-colors"
                 >
                   {copied() === 'token' ? 'Copied!' : 'Copy'}
                 </button>
@@ -445,7 +445,7 @@ Important:
             </div>
           </div>
 
-          <div class="bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-800 rounded-md p-3">
+          <div class="bg-green-50 dark:bg-green-900/25 border border-green-200 dark:border-green-800 rounded-md p-3">
             <p class="text-sm font-semibold text-green-800 dark:text-green-200 mb-2">
               Credentials saved
             </p>
diff --git a/frontend-modern/src/components/Settings/RecoverySettingsPanel.tsx b/frontend-modern/src/components/Settings/RecoverySettingsPanel.tsx
index ca0c37a5f5..2987846f47 100644
--- a/frontend-modern/src/components/Settings/RecoverySettingsPanel.tsx
+++ b/frontend-modern/src/components/Settings/RecoverySettingsPanel.tsx
@@ -80,7 +80,7 @@ export const RecoverySettingsPanel: Component<RecoverySettingsPanelProps> = (pro
                     }
                   }}
                 />
-                <div class="w-11 h-6 bg-surface-alt peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600 peer-disabled:opacity-50"></div>
+                <div class="w-11 h-6 bg-surface-alt peer-focus:outline-hidden rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600 peer-disabled:opacity-50"></div>
               </label>
             </div>
 
@@ -178,9 +178,9 @@ export const RecoverySettingsPanel: Component<RecoverySettingsPanelProps> = (pro
 
             {/* Env override warning */}
             <Show when={props.backupPollingEnvLocked()}>
-              <div class="flex items-start gap-2 rounded-md border border-amber-200 bg-amber-50 dark:border-amber-700 dark:bg-amber-900 p-3 text-xs text-amber-700 dark:text-amber-200">
+              <div class="flex items-start gap-2 rounded-md border border-amber-200 bg-amber-50 dark:border-amber-700 dark:bg-amber-900/25 p-3 text-xs text-amber-700 dark:text-amber-200">
                 <svg
-                  class="w-4 h-4 flex-shrink-0 mt-0.5"
+                  class="w-4 h-4 shrink-0 mt-0.5"
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
@@ -217,9 +217,9 @@ export const RecoverySettingsPanel: Component<RecoverySettingsPanelProps> = (pro
 
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
           {/* Export Section */}
-          <div class="group border border-border rounded-md p-5 bg-blue-50 dark:bg-blue-900 hover:border-blue-300 dark:hover:border-blue-700 transition-all duration-200">
+          <div class="group border border-border rounded-md p-5 bg-blue-50 dark:bg-blue-900/25 hover:border-blue-300 dark:hover:border-blue-700 transition-all duration-200">
             <div class="flex items-start gap-4">
-              <div class="flex-shrink-0 w-12 h-12 bg-blue-500 rounded-md flex items-center justify-center shadow-sm shadow-blue-500">
+              <div class="shrink-0 w-12 h-12 bg-blue-500 rounded-md flex items-center justify-center shadow-xs shadow-blue-500">
                 {/* Archive/Download Box Icon */}
                 <svg
                   class="w-6 h-6 text-white"
@@ -292,7 +292,7 @@ export const RecoverySettingsPanel: Component<RecoverySettingsPanelProps> = (pro
                     props.setUseCustomPassphrase(!props.securityStatus()?.hasAuthentication);
                     props.setShowExportDialog(true);
                   }}
-                  class="w-full sm:w-auto min-h-10 sm:min-h-9 px-4 py-2.5 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 transition-all duration-200 inline-flex items-center justify-center gap-2 shadow-sm hover:shadow-sm"
+                  class="w-full sm:w-auto min-h-10 sm:min-h-9 px-4 py-2.5 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 transition-all duration-200 inline-flex items-center justify-center gap-2 shadow-xs hover:shadow-xs"
                 >
                   <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path
@@ -311,7 +311,7 @@ export const RecoverySettingsPanel: Component<RecoverySettingsPanelProps> = (pro
           {/* Import Section */}
           <div class="group border border-border rounded-md p-5 bg-surface-alt hover:border-border transition-all duration-200">
             <div class="flex items-start gap-4">
-              <div class="flex-shrink-0 w-12 h-12 bg-slate-500 rounded-md flex items-center justify-center shadow-sm shadow-gray-500">
+              <div class="shrink-0 w-12 h-12 bg-slate-500 rounded-md flex items-center justify-center shadow-xs shadow-gray-500">
                 {/* Upload/Restore Icon */}
                 <svg
                   class="w-6 h-6 text-white"
@@ -370,7 +370,7 @@ export const RecoverySettingsPanel: Component<RecoverySettingsPanelProps> = (pro
                 <button
                   type="button"
                   onClick={() => props.setShowImportDialog(true)}
-                  class="w-full sm:w-auto min-h-10 sm:min-h-9 px-4 py-2.5 bg-slate-600 text-white text-sm font-medium rounded-md hover:bg-slate-700 transition-all duration-200 inline-flex items-center justify-center gap-2 shadow-sm hover:shadow-sm"
+                  class="w-full sm:w-auto min-h-10 sm:min-h-9 px-4 py-2.5 bg-slate-600 text-white text-sm font-medium rounded-md hover:bg-slate-700 transition-all duration-200 inline-flex items-center justify-center gap-2 shadow-xs hover:shadow-xs"
                 >
                   <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path
@@ -388,10 +388,10 @@ export const RecoverySettingsPanel: Component<RecoverySettingsPanelProps> = (pro
         </div>
 
         {/* Security Tips */}
-        <div class="mt-6 p-4 bg-amber-50 dark:bg-amber-900 rounded-md border border-amber-200 dark:border-amber-800">
+        <div class="mt-6 p-4 bg-amber-50 dark:bg-amber-900/25 rounded-md border border-amber-200 dark:border-amber-800">
           <div class="flex gap-3">
             {/* Shield Icon */}
-            <div class="flex-shrink-0 w-10 h-10 bg-amber-100 dark:bg-amber-900 rounded-md flex items-center justify-center">
+            <div class="shrink-0 w-10 h-10 bg-amber-100 dark:bg-amber-900/25 rounded-md flex items-center justify-center">
               <svg
                 class="w-5 h-5 text-amber-600 dark:text-amber-400"
                 fill="none"
@@ -413,7 +413,7 @@ export const RecoverySettingsPanel: Component<RecoverySettingsPanelProps> = (pro
               <ul class="space-y-2">
                 <li class="flex items-start gap-2 text-xs text-amber-700 dark:text-amber-300">
                   <svg
-                    class="w-4 h-4 text-amber-500 flex-shrink-0 mt-0.5"
+                    class="w-4 h-4 text-amber-500 shrink-0 mt-0.5"
                     fill="currentColor"
                     viewBox="0 0 20 20"
                   >
@@ -427,7 +427,7 @@ export const RecoverySettingsPanel: Component<RecoverySettingsPanelProps> = (pro
                 </li>
                 <li class="flex items-start gap-2 text-xs text-amber-700 dark:text-amber-300">
                   <svg
-                    class="w-4 h-4 text-amber-500 flex-shrink-0 mt-0.5"
+                    class="w-4 h-4 text-amber-500 shrink-0 mt-0.5"
                     fill="currentColor"
                     viewBox="0 0 20 20"
                   >
@@ -443,7 +443,7 @@ export const RecoverySettingsPanel: Component<RecoverySettingsPanelProps> = (pro
                 </li>
                 <li class="flex items-start gap-2 text-xs text-amber-700 dark:text-amber-300">
                   <svg
-                    class="w-4 h-4 text-amber-500 flex-shrink-0 mt-0.5"
+                    class="w-4 h-4 text-amber-500 shrink-0 mt-0.5"
                     fill="currentColor"
                     viewBox="0 0 20 20"
                   >
diff --git a/frontend-modern/src/components/Settings/RelaySettingsPanel.tsx b/frontend-modern/src/components/Settings/RelaySettingsPanel.tsx
index 390d8f97fc..0a342e3aef 100644
--- a/frontend-modern/src/components/Settings/RelaySettingsPanel.tsx
+++ b/frontend-modern/src/components/Settings/RelaySettingsPanel.tsx
@@ -142,7 +142,7 @@ export const RelaySettingsPanel: Component<RelaySettingsPanelProps> = (props) =>
         <Show when={state.config()?.identity_fingerprint}>
           <div class={formField}>
             <span class={labelClass()}>Instance Fingerprint</span>
-            <code class="block text-xs font-mono text-base-content bg-surface-alt rounded px-3 py-2 select-all break-all">
+            <code class="block text-xs font-mono text-base-content bg-surface-alt rounded-sm px-3 py-2 select-all break-all">
               {state.config()!.identity_fingerprint}
             </code>
             <p class={formHelpText}>
diff --git a/frontend-modern/src/components/Settings/ReportingPanel.tsx b/frontend-modern/src/components/Settings/ReportingPanel.tsx
index 686c794c10..8ad9a59e73 100644
--- a/frontend-modern/src/components/Settings/ReportingPanel.tsx
+++ b/frontend-modern/src/components/Settings/ReportingPanel.tsx
@@ -452,7 +452,7 @@ export function ReportingPanel() {
                                   <Button
                                     variant="ghost"
                                     size="sm"
-                                    class="min-h-11 w-full justify-start gap-2 px-2"
+                                    class="min-h-11 w-full gap-2 px-2"
                                     aria-label={`Run ${schedule.name} now`}
                                     isLoading={runningScheduleID() === schedule.id}
                                     disabled={runningScheduleID() !== ''}
@@ -466,7 +466,7 @@ export function ReportingPanel() {
                                   <Button
                                     variant="ghost"
                                     size="sm"
-                                    class="min-h-11 w-full justify-start gap-2 px-2"
+                                    class="min-h-11 w-full gap-2 px-2"
                                     aria-label={`Edit ${schedule.name}`}
                                     onClick={() => startEditSchedule(schedule)}
                                   >
@@ -476,7 +476,7 @@ export function ReportingPanel() {
                                   <Button
                                     variant="ghost"
                                     size="sm"
-                                    class="min-h-11 w-full justify-start gap-2 px-2"
+                                    class="min-h-11 w-full gap-2 px-2"
                                     aria-label={`Delete ${schedule.name}`}
                                     isLoading={deletingScheduleID() === schedule.id}
                                     disabled={deletingScheduleID() !== ''}
@@ -797,7 +797,7 @@ export function ReportingPanel() {
                     <For each={inventoryDefinition()?.columns ?? []}>
                       {(column) => (
                         <div class="space-y-1 rounded-lg border border-base-300/70 bg-base-100/70 p-3">
-                          <div class="text-xs font-semibold uppercase tracking-wide text-base-content/80">
+                          <div class="text-xs font-semibold uppercase tracking-wide">
                             {column.label}
                           </div>
                           <p class="text-xs leading-relaxed text-muted">{column.description}</p>
diff --git a/frontend-modern/src/components/Settings/ResourcePicker.tsx b/frontend-modern/src/components/Settings/ResourcePicker.tsx
index a250dda1e1..fe3838ec59 100644
--- a/frontend-modern/src/components/Settings/ResourcePicker.tsx
+++ b/frontend-modern/src/components/Settings/ResourcePicker.tsx
@@ -228,7 +228,7 @@ export function ResourcePicker(props: ResourcePickerProps) {
                       >
                         {/* Checkbox */}
                         <div
-                          class={`w-4 h-4 rounded border flex-shrink-0 flex items-center justify-center ${
+                          class={`w-4 h-4 rounded border shrink-0 flex items-center justify-center ${
                             isSelected(resource.id)
                               ? 'bg-blue-600 border-blue-600'
                               : 'border-slate-600'
@@ -261,7 +261,7 @@ export function ResourcePicker(props: ResourcePickerProps) {
                         {/* Name and ID */}
                         <div class="flex-1 min-w-0">
                           <div
-                            class="text-sm text-white sm:truncate break-words"
+                            class="text-sm text-white sm:truncate wrap-break-word"
                             title={getPreferredInfrastructureDisplayName(resource)}
                           >
                             {getPreferredInfrastructureDisplayName(resource)}
@@ -276,7 +276,7 @@ export function ResourcePicker(props: ResourcePickerProps) {
                             <Show when={resource.tags && resource.tags.length > 0}>
                               <For each={resource.tags?.slice(0, 2)}>
                                 {(tag) => (
-                                  <span class="text-xs px-1.5 py-0.5 rounded bg-surface-hover text-slate-300">
+                                  <span class="text-xs px-1.5 py-0.5 rounded-sm bg-surface-hover text-slate-300">
                                     {tag}
                                   </span>
                                 )}
@@ -292,17 +292,17 @@ export function ResourcePicker(props: ResourcePickerProps) {
 
                         {/* Type badge */}
                         <span
-                          class={`hidden sm:inline-flex text-xs px-2 py-0.5 rounded-full flex-shrink-0 ${badge.badgeClasses}`}
+                          class={`hidden sm:inline-flex text-xs px-2 py-0.5 rounded-full shrink-0 ${badge.badgeClasses}`}
                         >
                           {badge.label}
                         </span>
 
                         {/* Tags */}
                         <Show when={resource.tags && resource.tags.length > 0}>
-                          <div class="hidden sm:flex gap-1 flex-shrink-0">
+                          <div class="hidden sm:flex gap-1 shrink-0">
                             <For each={resource.tags?.slice(0, 2)}>
                               {(tag) => (
-                                <span class="text-xs px-1.5 py-0.5 rounded bg-surface-hover text-slate-300">
+                                <span class="text-xs px-1.5 py-0.5 rounded-sm bg-surface-hover text-slate-300">
                                   {tag}
                                 </span>
                               )}
diff --git a/frontend-modern/src/components/Settings/RolesEditorDialog.tsx b/frontend-modern/src/components/Settings/RolesEditorDialog.tsx
index f7a0a79691..d9a0b423aa 100644
--- a/frontend-modern/src/components/Settings/RolesEditorDialog.tsx
+++ b/frontend-modern/src/components/Settings/RolesEditorDialog.tsx
@@ -63,7 +63,7 @@ export const RolesEditorDialog: Component<RolesEditorDialogProps> = (props) => (
                 onInput={(event) => props.onFormIdInput(event.currentTarget.value)}
                 placeholder="e.g., custom-auditor"
                 disabled={!!props.editingRole}
-                class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:focus:border-blue-400 dark:focus:ring-blue-900 disabled:opacity-50"
+                class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-2 focus:ring-blue-200 dark:focus:border-blue-400 dark:focus:ring-blue-900/25 disabled:opacity-50"
               />
             </div>
             <div class="space-y-1">
@@ -76,7 +76,7 @@ export const RolesEditorDialog: Component<RolesEditorDialogProps> = (props) => (
                 value={props.formName}
                 onInput={(event) => props.onFormNameInput(event.currentTarget.value)}
                 placeholder="e.g., Custom Auditor"
-                class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:focus:border-blue-400 dark:focus:ring-blue-900"
+                class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-2 focus:ring-blue-200 dark:focus:border-blue-400 dark:focus:ring-blue-900/25"
               />
             </div>
           </div>
@@ -93,7 +93,7 @@ export const RolesEditorDialog: Component<RolesEditorDialogProps> = (props) => (
               value={props.formDescription}
               onInput={(event) => props.onFormDescriptionInput(event.currentTarget.value)}
               placeholder="Brief description of this role's purpose"
-              class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-base-content shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:focus:border-blue-400 dark:focus:ring-blue-900"
+              class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-base-content shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-2 focus:ring-blue-200 dark:focus:border-blue-400 dark:focus:ring-blue-900/25"
             />
           </div>
 
diff --git a/frontend-modern/src/components/Settings/SSOProvidersPanel.tsx b/frontend-modern/src/components/Settings/SSOProvidersPanel.tsx
index 3363dfbc78..38606de496 100644
--- a/frontend-modern/src/components/Settings/SSOProvidersPanel.tsx
+++ b/frontend-modern/src/components/Settings/SSOProvidersPanel.tsx
@@ -106,7 +106,7 @@ export const SSOProvidersPanel: Component<SSOProvidersPanelProps> = (props) => {
         bodyClass="space-y-6"
       >
         <Show when={!canManage()}>
-          <div class="rounded-md border border-blue-200 bg-blue-50 px-4 py-3 text-xs text-blue-800 dark:border-blue-800 dark:bg-blue-900 dark:text-blue-200">
+          <div class="rounded-md border border-blue-200 bg-blue-50 px-4 py-3 text-xs text-blue-800 dark:border-blue-800 dark:bg-blue-900/25 dark:text-blue-200">
             Single sign-on is read-only for this account. You can review configured providers but
             cannot add, edit, enable, or delete them.
           </div>
@@ -462,7 +462,7 @@ export const SSOProvidersPanel: Component<SSOProvidersPanelProps> = (props) => {
                     >
                       <div class="mt-2 flex flex-col gap-1 sm:flex-row sm:items-center sm:gap-2">
                         <span class="text-xs text-muted">SP Metadata:</span>
-                        <code class="inline-block max-w-full break-all rounded bg-surface-hover px-2 py-0.5 text-xs">
+                        <code class="inline-block max-w-full break-all rounded-sm bg-surface-hover px-2 py-0.5 text-xs">
                           {publicUrl()}/api/saml/{form.id || '{id}'}/metadata
                         </code>
                       </div>
@@ -599,7 +599,7 @@ export const SSOProvidersPanel: Component<SSOProvidersPanelProps> = (props) => {
                         type="checkbox"
                         checked={form.samlAllowIdpInitiated}
                         onChange={(e) => setForm('samlAllowIdpInitiated', e.currentTarget.checked)}
-                        class="rounded border-slate-300"
+                        class="rounded-sm border-slate-300"
                       />
                       <span class="text-base-content">Allow IdP-initiated SSO</span>
                     </label>
@@ -712,7 +712,7 @@ export const SSOProvidersPanel: Component<SSOProvidersPanelProps> = (props) => {
                   type="button"
                   variant="ghost"
                   size="xs"
-                  class="justify-start font-semibold hover:underline"
+                  class="font-semibold hover:underline"
                   onClick={() => setAdvancedOpen(!advancedOpen())}
                 >
                   {advancedOpen() ? 'Hide' : 'Show'} access restrictions & role mapping
@@ -853,7 +853,7 @@ export const SSOProvidersPanel: Component<SSOProvidersPanelProps> = (props) => {
         >
           <div class="w-full max-h-[90vh] flex flex-col">
             {/* Modal header */}
-            <div class="px-6 py-4 border-b border-border flex items-center justify-between flex-shrink-0">
+            <div class="px-6 py-4 border-b border-border flex items-center justify-between shrink-0">
               <h3 class="text-lg font-semibold text-base-content">IdP Metadata Preview</h3>
               <ActionIconButton
                 type="button"
@@ -867,7 +867,7 @@ export const SSOProvidersPanel: Component<SSOProvidersPanelProps> = (props) => {
             </div>
 
             {/* Parsed info summary */}
-            <div class="px-6 py-4 bg-surface-alt border-b border-border flex-shrink-0">
+            <div class="px-6 py-4 bg-surface-alt border-b border-border shrink-0">
               <h4 class="text-sm font-medium text-base-content mb-3">Parsed Information</h4>
               <dl class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
                 <div>
@@ -946,7 +946,7 @@ export const SSOProvidersPanel: Component<SSOProvidersPanelProps> = (props) => {
             </div>
 
             {/* Modal footer */}
-            <div class="px-6 py-4 border-t border-border flex justify-end flex-shrink-0">
+            <div class="px-6 py-4 border-t border-border flex justify-end shrink-0">
               <Button
                 type="button"
                 onClick={() => setShowMetadataPreview(false)}
diff --git a/frontend-modern/src/components/Settings/SecurityAuthPanel.tsx b/frontend-modern/src/components/Settings/SecurityAuthPanel.tsx
index 4ee701430c..a421640fd4 100644
--- a/frontend-modern/src/components/Settings/SecurityAuthPanel.tsx
+++ b/frontend-modern/src/components/Settings/SecurityAuthPanel.tsx
@@ -104,7 +104,7 @@ export const SecurityAuthPanel: Component<SecurityAuthPanelProps> = (props) => {
         <div>
           <div class="p-4 sm:p-6 flex flex-col gap-3 sm:gap-4">
             <Show when={!props.canManage}>
-              <div class="rounded-md border border-blue-200 bg-blue-50 px-3 py-2 text-xs text-blue-800 dark:border-blue-800 dark:bg-blue-900 dark:text-blue-200">
+              <div class="rounded-md border border-blue-200 bg-blue-50 px-3 py-2 text-xs text-blue-800 dark:border-blue-800 dark:bg-blue-900/25 dark:text-blue-200">
                 {SECURITY_AUTH_SETTINGS_READ_ONLY_MESSAGE}
               </div>
             </Show>
@@ -188,7 +188,7 @@ export const SecurityAuthPanel: Component<SecurityAuthPanelProps> = (props) => {
             <Show when={props.versionInfo()?.deploymentType === 'proxmoxve'}>
               <div class="space-y-2">
                 <p class="text-xs text-base-content">
-                  Type <code class="px-1 py-0.5 bg-surface-hover rounded">update</code> in your
+                  Type <code class="px-1 py-0.5 bg-surface-hover rounded-sm">update</code> in your
                   ProxmoxVE console
                 </p>
                 <p class="text-xs text-muted italic">
@@ -201,7 +201,7 @@ export const SecurityAuthPanel: Component<SecurityAuthPanelProps> = (props) => {
             <Show when={props.versionInfo()?.deploymentType === 'docker'}>
               <div class="space-y-1">
                 <p class="text-xs text-base-content">{restartInstruction().label}</p>
-                <code class="block text-xs bg-surface-hover p-2 rounded mt-1">
+                <code class="block text-xs bg-surface-hover p-2 rounded-sm mt-1">
                   {restartInstruction().command}
                 </code>
               </div>
@@ -215,7 +215,7 @@ export const SecurityAuthPanel: Component<SecurityAuthPanelProps> = (props) => {
             >
               <div class="space-y-1">
                 <p class="text-xs text-base-content">{restartInstruction().label}</p>
-                <code class="block text-xs bg-surface-hover p-2 rounded mt-1">
+                <code class="block text-xs bg-surface-hover p-2 rounded-sm mt-1">
                   {restartInstruction().command}
                 </code>
               </div>
@@ -224,7 +224,7 @@ export const SecurityAuthPanel: Component<SecurityAuthPanelProps> = (props) => {
             <Show when={props.versionInfo()?.deploymentType === 'development'}>
               <div class="space-y-1">
                 <p class="text-xs text-base-content">{restartInstruction().label}</p>
-                <code class="block text-xs bg-surface-hover p-2 rounded mt-1">
+                <code class="block text-xs bg-surface-hover p-2 rounded-sm mt-1">
                   {restartInstruction().command}
                 </code>
               </div>
@@ -237,7 +237,7 @@ export const SecurityAuthPanel: Component<SecurityAuthPanelProps> = (props) => {
             </Show>
           </div>
 
-          <div class="rounded border border-green-200 bg-green-50 p-2 dark:border-green-800 dark:bg-green-900">
+          <div class="rounded-sm border border-green-200 bg-green-50 p-2 dark:border-green-800 dark:bg-green-900/25">
             <p class="text-xs text-green-700 dark:text-green-300">
               <strong>Tip:</strong> {SECURITY_AUTH_RESTART_TIP.replace(/^Tip:\s*/, '')}
             </p>
diff --git a/frontend-modern/src/components/Settings/SecurityOverviewPanel.tsx b/frontend-modern/src/components/Settings/SecurityOverviewPanel.tsx
index 44e5e67444..151e631c3e 100644
--- a/frontend-modern/src/components/Settings/SecurityOverviewPanel.tsx
+++ b/frontend-modern/src/components/Settings/SecurityOverviewPanel.tsx
@@ -183,8 +183,8 @@ export const SecurityOverviewPanel: Component<SecurityOverviewPanelProps> = (pro
                           <span
                             class={`inline-flex rounded-full px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide ${
                               action.severity === 'critical'
-                                ? 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
-                                : 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
+                                ? 'bg-red-100 text-red-800 dark:bg-red-900/25 dark:text-red-200'
+                                : 'bg-blue-100 text-blue-800 dark:bg-blue-900/25 dark:text-blue-200'
                             }`}
                           >
                             {action.severity === 'critical' ? 'Act now' : 'Recommended'}
@@ -219,13 +219,13 @@ export const SecurityOverviewPanel: Component<SecurityOverviewPanelProps> = (pro
 
       <Show when={!props.securityStatusLoading() && props.securityStatus()?.hasProxyAuth}>
         <div class="rounded-md border border-blue-200 dark:border-blue-800 overflow-hidden bg-blue-50/60 dark:bg-blue-950/40">
-          <div class="bg-blue-50 dark:bg-blue-900 px-6 py-4 border-b border-blue-200 dark:border-blue-700">
+          <div class="bg-blue-50 dark:bg-blue-900/25 px-6 py-4 border-b border-blue-200 dark:border-blue-700">
             <div class="flex items-start gap-3">
-              <div class="p-2 bg-blue-100 dark:bg-blue-900 rounded-md">
+              <div class="p-2 bg-blue-100 dark:bg-blue-900/25 rounded-md">
                 <Shield class="w-5 h-5 text-blue-600 dark:text-blue-300" strokeWidth={2} />
               </div>
               <div class="min-w-0 flex-1">
-                <p class="text-sm font-semibold text-blue-900 dark:text-blue-100">
+                <p class="text-sm font-semibold text-blue-900/25 dark:text-blue-100">
                   Proxy Authentication Active
                 </p>
                 <p class="text-sm text-blue-700 dark:text-blue-300">
@@ -254,7 +254,7 @@ export const SecurityOverviewPanel: Component<SecurityOverviewPanelProps> = (pro
               <Show when={props.securityStatus()?.proxyAuthLogoutURL}>
                 <a
                   href={props.securityStatus()?.proxyAuthLogoutURL}
-                  class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md border border-blue-300 dark:border-blue-600 bg-blue-50 dark:bg-blue-900 text-blue-700 dark:text-blue-200 hover:bg-blue-100 dark:hover:bg-blue-800 transition-colors"
+                  class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md border border-blue-300 dark:border-blue-600 bg-blue-50 dark:bg-blue-900/25 text-blue-700 dark:text-blue-200 hover:bg-blue-100 dark:hover:bg-blue-800 transition-colors"
                 >
                   <svg
                     class="w-4 h-4"
diff --git a/frontend-modern/src/components/Settings/SelfHostedCommercialRecoverySection.tsx b/frontend-modern/src/components/Settings/SelfHostedCommercialRecoverySection.tsx
index d66acc5464..cb99cb8d8c 100644
--- a/frontend-modern/src/components/Settings/SelfHostedCommercialRecoverySection.tsx
+++ b/frontend-modern/src/components/Settings/SelfHostedCommercialRecoverySection.tsx
@@ -66,7 +66,7 @@ export const SelfHostedCommercialRecoverySection: Component<
               </>
             }
           />
-          <div class="mt-3 rounded-md border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900 p-3 text-sm text-amber-800 dark:text-amber-200">
+          <div class="mt-3 rounded-md border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/25 p-3 text-sm text-amber-800 dark:text-amber-200">
             <p class="font-medium">
               {SELF_HOSTED_RECOVERY_PRESENTATION.privateRuntimeNotice.title}
             </p>
@@ -82,7 +82,7 @@ export const SelfHostedCommercialRecoverySection: Component<
             </ExternalTextLink>
           </div>
           <Show when={props.looksLikeLegacyLicenseKey}>
-            <div class="mt-3 rounded-md border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900 p-3 text-sm text-amber-800 dark:text-amber-200">
+            <div class="mt-3 rounded-md border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/25 p-3 text-sm text-amber-800 dark:text-amber-200">
               <p class="font-medium">{SELF_HOSTED_RECOVERY_PRESENTATION.legacyNotice.title}</p>
               <p class="text-xs text-amber-700 dark:text-amber-300 mt-1">
                 {SELF_HOSTED_RECOVERY_PRESENTATION.legacyNotice.body}
diff --git a/frontend-modern/src/components/Settings/SettingsPageShell.tsx b/frontend-modern/src/components/Settings/SettingsPageShell.tsx
index d229e445ae..c82af0533b 100644
--- a/frontend-modern/src/components/Settings/SettingsPageShell.tsx
+++ b/frontend-modern/src/components/Settings/SettingsPageShell.tsx
@@ -47,11 +47,11 @@ export const SettingsPageShell: Component<SettingsPageShellProps> = (props) => {
       </div>
 
       <Show when={props.hasUnsavedChanges() && props.activeTabSaveBehavior() === 'system'}>
-        <div class="mb-3 border-l-4 border-amber-500 bg-amber-50 p-3 shadow-sm dark:border-amber-400 dark:bg-amber-900 sm:rounded-r-lg sm:p-4 lg:mb-0">
+        <div class="mb-3 border-l-4 border-amber-500 bg-amber-50 p-3 shadow-xs dark:border-amber-400 dark:bg-amber-900/25 sm:rounded-r-lg sm:p-4 lg:mb-0">
           <div class="flex flex-col items-start justify-between gap-3 sm:flex-row sm:items-center sm:gap-4">
             <div class="flex items-start gap-3">
               <svg
-                class="w-5 h-5 text-amber-600 dark:text-amber-400 flex-shrink-0 mt-0.5"
+                class="w-5 h-5 text-amber-600 dark:text-amber-400 shrink-0 mt-0.5"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
@@ -64,7 +64,7 @@ export const SettingsPageShell: Component<SettingsPageShellProps> = (props) => {
                 />
               </svg>
               <div>
-                <p class="font-semibold text-amber-900 dark:text-amber-100">
+                <p class="font-semibold text-amber-900/25 dark:text-amber-100">
                   {unsavedChangesBanner().title}
                 </p>
                 <p class="text-sm text-amber-700 dark:text-amber-200 mt-0.5">
@@ -75,7 +75,7 @@ export const SettingsPageShell: Component<SettingsPageShellProps> = (props) => {
             <div class="flex w-full gap-2 sm:w-auto sm:gap-3">
               <button
                 type="button"
-                class="flex-1 sm:flex-initial px-5 py-2.5 text-sm font-medium bg-amber-600 text-white rounded-md hover:bg-amber-700 shadow-sm transition-colors"
+                class="flex-1 sm:flex-initial px-5 py-2.5 text-sm font-medium bg-amber-600 text-white rounded-md hover:bg-amber-700 shadow-xs transition-colors"
                 onClick={props.saveSettings}
               >
                 {unsavedChangesBanner().saveLabel}
@@ -99,7 +99,7 @@ export const SettingsPageShell: Component<SettingsPageShellProps> = (props) => {
       >
         <nav
           data-settings-navigation
-          class={`${props.isMobileMenuOpen() ? 'flex w-full flex-col' : 'hidden lg:flex lg:flex-col'} ${props.sidebarCollapsed() ? 'lg:w-16 lg:min-w-[4rem] lg:max-w-[4rem] lg:basis-[4rem]' : 'lg:w-72 lg:min-w-[18rem] lg:max-w-[18rem] lg:basis-[18rem]'} relative z-10 max-h-[calc(100dvh-8rem)] flex-shrink-0 overflow-y-auto overscroll-contain border-b border-border bg-surface transition-all duration-200 lg:max-h-none lg:overflow-visible lg:border-b-0 lg:border-r lg:bg-transparent lg:align-top`}
+          class={`${props.isMobileMenuOpen() ? 'flex w-full flex-col' : 'hidden lg:flex lg:flex-col'} ${props.sidebarCollapsed() ? 'lg:w-16 lg:min-w-16 lg:max-w-16 lg:basis-16' : 'lg:w-72 lg:min-w-[18rem] lg:max-w-[18rem] lg:basis-[18rem]'} relative z-10 max-h-[calc(100dvh-8rem)] shrink-0 overflow-y-auto overscroll-contain border-b border-border bg-surface transition-all duration-200 lg:max-h-none lg:overflow-visible lg:border-b-0 lg:border-r lg:bg-transparent lg:align-top`}
           aria-label={shellCopy().navigationAriaLabel}
         >
           <div
@@ -202,7 +202,7 @@ export const SettingsPageShell: Component<SettingsPageShellProps> = (props) => {
                         !(group.items.length === 1 && group.items[0]?.label === group.label)
                       }
                     >
-                      <p class="mb-1.5 px-2 text-[11px] font-semibold uppercase tracking-wider text-muted lg:mb-0 lg:px-0 lg:text-xs lg:font-[500]">
+                      <p class="mb-1.5 px-2 text-[11px] font-semibold uppercase tracking-wider text-muted lg:mb-0 lg:px-0 lg:text-xs lg:font-medium">
                         {group.label}
                       </p>
                     </Show>
@@ -215,7 +215,7 @@ export const SettingsPageShell: Component<SettingsPageShellProps> = (props) => {
                               type="button"
                               aria-current={isActive() ? 'page' : undefined}
                               disabled={item.disabled}
-                              class={`group flex min-h-12 w-full items-center ${props.sidebarCollapsed() ? 'justify-center' : 'justify-between'} lg:min-h-0 lg:rounded-md ${props.sidebarCollapsed() ? 'px-2 py-2.5' : 'px-3 py-2.5 lg:px-3 lg:py-2'} text-sm font-medium transition-colors ${item.disabled ? 'cursor-not-allowed text-muted opacity-60' : isActive() ? 'bg-surface text-blue-600 dark:text-blue-300 lg:bg-blue-50 lg:dark:bg-blue-900 lg:dark:text-blue-200' : 'hover:text-base-content active:bg-surface-hover lg:hover:bg-surface-hover lg:active:bg-transparent'}`}
+                              class={`group flex min-h-12 w-full items-center ${props.sidebarCollapsed() ? 'justify-center' : 'justify-between'} lg:min-h-0 lg:rounded-md ${props.sidebarCollapsed() ? 'px-2 py-2.5' : 'px-3 py-2.5 lg:px-3 lg:py-2'} text-sm font-medium transition-colors ${item.disabled ? 'cursor-not-allowed text-muted opacity-60' : isActive() ? 'bg-surface text-blue-600 dark:text-blue-300 lg:bg-blue-50 lg:dark:bg-blue-900/25 lg:dark:text-blue-200' : 'hover:text-base-content active:bg-surface-hover lg:hover:bg-surface-hover lg:active:bg-transparent'}`}
                               onClick={() => {
                                 if (item.disabled) return;
                                 props.setActiveTab(item.id);
@@ -225,7 +225,7 @@ export const SettingsPageShell: Component<SettingsPageShellProps> = (props) => {
                             >
                               <div class="flex w-full items-center gap-3 lg:gap-2.5">
                                 <div
-                                  class={`flex h-8 w-8 items-center justify-center rounded-md lg:h-auto lg:w-auto lg:rounded-none ${isActive() ? 'bg-blue-100 text-blue-600 dark:bg-blue-900 dark:text-blue-400 lg:bg-transparent' : 'bg-surface text-muted lg:bg-transparent lg:text-inherit'}`}
+                                  class={`flex h-8 w-8 items-center justify-center rounded-md lg:h-auto lg:w-auto lg:rounded-none ${isActive() ? 'bg-blue-100 text-blue-600 dark:bg-blue-900/25 dark:text-blue-400 lg:bg-transparent' : 'bg-surface text-muted lg:bg-transparent lg:text-inherit'}`}
                                 >
                                   <item.icon
                                     class="w-5 h-5 lg:w-4 lg:h-4"
@@ -243,7 +243,7 @@ export const SettingsPageShell: Component<SettingsPageShellProps> = (props) => {
                                       {item.badge}
                                     </span>
                                   </Show>
-                                  <ChevronRight class="w-4 h-4 lg:hidden text-muted ml-1 flex-shrink-0" />
+                                  <ChevronRight class="w-4 h-4 lg:hidden text-muted ml-1 shrink-0" />
                                 </Show>
                               </div>
                             </button>
@@ -263,17 +263,17 @@ export const SettingsPageShell: Component<SettingsPageShellProps> = (props) => {
           class={`min-w-0 flex-1 overflow-visible lg:overflow-hidden ${props.isMobileMenuOpen() ? 'hidden lg:block' : 'block'}`}
         >
           <Show when={props.flatTabs().length > 0}>
-            <div class="sticky top-0 z-40 flex min-h-12 items-center border-b border-border-subtle bg-surface/95 px-2 backdrop-blur lg:hidden">
+            <div class="sticky top-0 z-40 flex min-h-12 items-center border-b border-border-subtle px-2 backdrop-blur-sm lg:hidden">
               <button
                 type="button"
                 onClick={() => {
                   props.setSidebarCollapsed(false);
                   props.setIsMobileMenuOpen(true);
                 }}
-                class="flex min-h-11 items-center gap-1 rounded-md px-2 py-1.5 text-sm font-medium text-blue-600 transition-colors active:bg-blue-50 dark:text-blue-400 dark:active:bg-blue-900"
+                class="flex min-h-11 items-center gap-1 rounded-md px-2 py-1.5 text-sm font-medium text-blue-600 transition-colors active:bg-blue-50 dark:text-blue-400 dark:active:bg-blue-900/25"
               >
                 <svg
-                  class="h-5 w-5 -ml-1 flex-shrink-0"
+                  class="h-5 w-5 -ml-1 shrink-0"
                   fill="none"
                   stroke="currentColor"
                   stroke-width="2.5"
diff --git a/frontend-modern/src/components/Settings/SuggestProfileModal.tsx b/frontend-modern/src/components/Settings/SuggestProfileModal.tsx
index 746121a621..59ef76cc9d 100644
--- a/frontend-modern/src/components/Settings/SuggestProfileModal.tsx
+++ b/frontend-modern/src/components/Settings/SuggestProfileModal.tsx
@@ -226,7 +226,7 @@ export const SuggestProfileModal: Component<SuggestProfileModalProps> = (props)
         {/* Header */}
         <div class="flex items-center justify-between px-6 py-4 border-b border-border shrink-0">
           <div class="flex items-center gap-3">
-            <div class="flex items-center justify-center w-8 h-8 rounded-md bg-amber-100 dark:bg-amber-900">
+            <div class="flex items-center justify-center w-8 h-8 rounded-md bg-amber-100 dark:bg-amber-900/25">
               <Lightbulb class="w-4 h-4 text-amber-600 dark:text-amber-400" />
             </div>
             <div>
@@ -272,7 +272,7 @@ export const SuggestProfileModal: Component<SuggestProfileModalProps> = (props)
               onInput={(e) => setPrompt(e.currentTarget.value)}
               placeholder="Describe the agents and use case for this profile..."
               rows={3}
-              textareaBaseClass="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-base-content shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:focus:border-blue-400 dark:focus:ring-blue-800 resize-none"
+              textareaBaseClass="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-base-content shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-2 focus:ring-blue-200 dark:focus:border-blue-400 dark:focus:ring-blue-800 resize-none"
               disabled={loading()}
             />
             <Show when={suggestion()}>
@@ -308,7 +308,7 @@ export const SuggestProfileModal: Component<SuggestProfileModalProps> = (props)
             <div
               role="alert"
               aria-live="assertive"
-              class="flex items-start gap-2 p-3 rounded-md bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-800"
+              class="flex items-start gap-2 p-3 rounded-md bg-red-50 dark:bg-red-900/25 border border-red-200 dark:border-red-800"
             >
               <AlertCircle class="w-4 h-4 text-red-600 dark:text-red-400 mt-0.5 shrink-0" />
               <p class="text-sm text-red-700 dark:text-red-300">{error()}</p>
@@ -330,7 +330,7 @@ export const SuggestProfileModal: Component<SuggestProfileModalProps> = (props)
             {(sugg) => (
               <div class="space-y-4">
                 {/* Draft Warning */}
-                <div class="flex items-start gap-2 p-3 rounded-md bg-amber-50 dark:bg-amber-900 border border-amber-200 dark:border-amber-800">
+                <div class="flex items-start gap-2 p-3 rounded-md bg-amber-50 dark:bg-amber-900/25 border border-amber-200 dark:border-amber-800">
                   <AlertCircle class="w-4 h-4 text-amber-600 dark:text-amber-400 mt-0.5 shrink-0" />
                   <p class="text-sm text-amber-700 dark:text-amber-300">
                     Draft suggestion — review settings before creating the profile.
@@ -352,7 +352,7 @@ export const SuggestProfileModal: Component<SuggestProfileModalProps> = (props)
                 </Show>
 
                 <Show when={validation()?.errors?.length}>
-                  <div class="flex items-start gap-2 p-3 rounded-md bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-800">
+                  <div class="flex items-start gap-2 p-3 rounded-md bg-red-50 dark:bg-red-900/25 border border-red-200 dark:border-red-800">
                     <AlertCircle class="w-4 h-4 text-red-600 dark:text-red-400 mt-0.5 shrink-0" />
                     <div class="space-y-1">
                       <p class="text-sm font-medium text-red-700 dark:text-red-300">
@@ -375,7 +375,7 @@ export const SuggestProfileModal: Component<SuggestProfileModalProps> = (props)
                 </Show>
 
                 <Show when={validation()?.warnings?.length}>
-                  <div class="flex items-start gap-2 p-3 rounded-md bg-amber-50 dark:bg-amber-900 border border-amber-200 dark:border-amber-800">
+                  <div class="flex items-start gap-2 p-3 rounded-md bg-amber-50 dark:bg-amber-900/25 border border-amber-200 dark:border-amber-800">
                     <AlertCircle class="w-4 h-4 text-amber-600 dark:text-amber-400 mt-0.5 shrink-0" />
                     <div class="space-y-1">
                       <p class="text-sm font-medium text-amber-700 dark:text-amber-300">
@@ -398,7 +398,7 @@ export const SuggestProfileModal: Component<SuggestProfileModalProps> = (props)
                 </Show>
 
                 <Show when={riskHints().length > 0}>
-                  <div class="flex items-start gap-2 p-3 rounded-md bg-amber-50 dark:bg-amber-900 border border-amber-200 dark:border-amber-800">
+                  <div class="flex items-start gap-2 p-3 rounded-md bg-amber-50 dark:bg-amber-900/25 border border-amber-200 dark:border-amber-800">
                     <AlertCircle class="w-4 h-4 text-amber-600 dark:text-amber-400 mt-0.5 shrink-0" />
                     <div class="space-y-1">
                       <p class="text-sm font-medium text-amber-700 dark:text-amber-300">
@@ -420,7 +420,7 @@ export const SuggestProfileModal: Component<SuggestProfileModalProps> = (props)
                       <p class="text-sm text-muted mt-1">{sugg().description}</p>
                     </div>
                     <Show when={activeHistoryItem()}>
-                      <div class="text-xs text-muted break-words">
+                      <div class="text-xs text-muted wrap-break-word">
                         <span class="font-medium text-muted">Prompt:</span>{' '}
                         {activeHistoryItem()?.prompt}
                       </div>
@@ -450,7 +450,7 @@ export const SuggestProfileModal: Component<SuggestProfileModalProps> = (props)
                                           {setting.key}
                                         </span>
                                         <Show when={!setting.known}>
-                                          <span class="text-[10px] uppercase tracking-wide px-1.5 py-0.5 rounded bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300">
+                                          <span class="text-[10px] uppercase tracking-wide px-1.5 py-0.5 rounded-sm bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300">
                                             Unknown (ignored)
                                           </span>
                                         </Show>
@@ -565,7 +565,7 @@ export const SuggestProfileModal: Component<SuggestProfileModalProps> = (props)
                           <button
                             type="button"
                             onClick={() => handleSelectHistory(item)}
-                            class="w-full text-left rounded-md border border-border p-3 hover:border-blue-300 hover:bg-blue-50 dark:hover:border-blue-700 dark:hover:bg-blue-900 transition-colors"
+                            class="w-full text-left rounded-md border border-border p-3 hover:border-blue-300 hover:bg-blue-50 dark:hover:border-blue-700 dark:hover:bg-blue-900/25 transition-colors"
                           >
                             <div class="flex items-center justify-between gap-3">
                               <span class="text-sm font-medium text-base-content">
diff --git a/frontend-modern/src/components/Settings/SystemLogsPanel.tsx b/frontend-modern/src/components/Settings/SystemLogsPanel.tsx
index 31dfcf37fb..24cb89bcd4 100644
--- a/frontend-modern/src/components/Settings/SystemLogsPanel.tsx
+++ b/frontend-modern/src/components/Settings/SystemLogsPanel.tsx
@@ -53,7 +53,7 @@ export const SystemLogsPanel: Component = () => {
               </button>
               <button
                 onClick={state.clearLogs}
-                class="min-h-11 sm:min-h-9 min-w-11 sm:min-w-9 p-2.5 rounded hover:bg-surface-hover text-muted transition-colors"
+                class="min-h-11 sm:min-h-9 min-w-11 sm:min-w-9 p-2.5 rounded-sm hover:bg-surface-hover text-muted transition-colors"
                 title={SYSTEM_LOGS_PANEL_COPY.clearTitle}
               >
                 <Trash2 size={18} />
@@ -78,7 +78,7 @@ export const SystemLogsPanel: Component = () => {
           >
             <For each={state.logs()}>
               {(log) => (
-                <div class="animate-enter border-b border-border-subtle last:border-0 pb-0.5 mb-0.5 hover:bg-surface-hover px-1 -mx-1 rounded">
+                <div class="animate-enter border-b border-border-subtle last:border-0 pb-0.5 mb-0.5 hover:bg-surface-hover px-1 -mx-1 rounded-sm">
                   <span class={getSystemLogLineClass(log)}>{log}</span>
                 </div>
               )}
diff --git a/frontend-modern/src/components/Settings/UpdateInstallGuide.tsx b/frontend-modern/src/components/Settings/UpdateInstallGuide.tsx
index 910d6294ad..062d5513ba 100644
--- a/frontend-modern/src/components/Settings/UpdateInstallGuide.tsx
+++ b/frontend-modern/src/components/Settings/UpdateInstallGuide.tsx
@@ -71,11 +71,11 @@ function InstallStep(props: { step: UpdateInstallStep; index: number }) {
 function readinessTone(status: UpdateReadiness['status']) {
   switch (status) {
     case 'blocked':
-      return 'border-red-200 bg-red-50 text-red-900 dark:border-red-800 dark:bg-red-950/40 dark:text-red-100';
+      return 'border-red-200 bg-red-50 text-red-900/25 dark:border-red-800 dark:bg-red-950/40 dark:text-red-100';
     case 'attention':
-      return 'border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-100';
+      return 'border-amber-200 bg-amber-50 text-amber-900/25 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-100';
     default:
-      return 'border-green-200 bg-green-50 text-green-900 dark:border-green-800 dark:bg-green-950/40 dark:text-green-100';
+      return 'border-green-200 bg-green-50 text-green-900/25 dark:border-green-800 dark:bg-green-950/40 dark:text-green-100';
   }
 }
 
@@ -112,7 +112,7 @@ function UpdateReadinessPanel(props: { readiness: UpdateReadiness }) {
           {(check) => (
             <div class="py-3 first:pt-0 last:pb-0">
               <div class={`flex items-start gap-2 ${readinessCheckTone(check.status)}`}>
-                <span class="mt-0.5 flex-shrink-0">
+                <span class="mt-0.5 shrink-0">
                   <ReadinessCheckIcon status={check.status} />
                 </span>
                 <div class="min-w-0 flex-1">
@@ -158,10 +158,10 @@ export const UpdateInstallGuide: Component<UpdateInstallGuideProps> = (props) =>
           !props.updateInfo?.available
         }
       >
-        <div class="space-y-3 rounded-md border border-blue-200 bg-blue-50 p-4 dark:border-blue-800 dark:bg-blue-900">
+        <div class="space-y-3 rounded-md border border-blue-200 bg-blue-50 p-4 dark:border-blue-800 dark:bg-blue-900/25">
           <div class="flex items-center gap-2">
             <svg
-              class="h-5 w-5 flex-shrink-0 text-blue-600 dark:text-blue-400"
+              class="h-5 w-5 shrink-0 text-blue-600 dark:text-blue-400"
               viewBox="0 0 24 24"
               fill="currentColor"
             >
@@ -185,7 +185,7 @@ export const UpdateInstallGuide: Component<UpdateInstallGuideProps> = (props) =>
               />
               <p class="text-[10px] text-blue-600 dark:text-blue-400">
                 Not using Compose?{' '}
-                <code class="rounded bg-blue-100 px-1 py-0.5 text-[10px] dark:bg-blue-800">
+                <code class="rounded-sm bg-blue-100 px-1 py-0.5 text-[10px] dark:bg-blue-800">
                   {buildIdleDockerUpdateCommand()}
                 </code>{' '}
                 then re-run your original docker run command. A plain docker restart keeps the old
@@ -197,7 +197,7 @@ export const UpdateInstallGuide: Component<UpdateInstallGuideProps> = (props) =>
       </Show>
 
       <Show when={props.versionInfo?.isSourceBuild}>
-        <div class="rounded-md border border-blue-200 bg-blue-50 p-3 dark:border-blue-800 dark:bg-blue-900">
+        <div class="rounded-md border border-blue-200 bg-blue-50 p-3 dark:border-blue-800 dark:bg-blue-900/25">
           <p class="text-xs text-blue-800 dark:text-blue-200">
             <strong>Built from source:</strong>{' '}
             <Show
@@ -211,17 +211,17 @@ export const UpdateInstallGuide: Component<UpdateInstallGuideProps> = (props) =>
       </Show>
 
       <Show when={props.updateInfo?.warning}>
-        <div class="rounded-md border border-amber-200 bg-amber-50 p-3 dark:border-amber-700 dark:bg-amber-900">
+        <div class="rounded-md border border-amber-200 bg-amber-50 p-3 dark:border-amber-700 dark:bg-amber-900/25">
           <p class="text-xs text-amber-800 dark:text-amber-200">{props.updateInfo?.warning}</p>
         </div>
       </Show>
 
       <Show when={!props.versionInfo?.isSourceBuild && props.updateInfo?.available && guide()}>
-        <div class="overflow-hidden rounded-md border border-green-200 bg-green-50 dark:border-green-700 dark:bg-green-900">
+        <div class="overflow-hidden rounded-md border border-green-200 bg-green-50 dark:border-green-700 dark:bg-green-900/25">
           <div class="border-b border-green-200 bg-green-100 px-5 py-4 dark:border-green-800 dark:bg-green-800">
             <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
               <div class="flex items-center gap-3">
-                <div class="rounded-md bg-green-100 p-2 dark:bg-green-900">
+                <div class="rounded-md bg-green-100 p-2 dark:bg-green-900/25">
                   <svg
                     class="h-5 w-5 text-green-700 dark:text-green-300"
                     fill="none"
@@ -237,7 +237,7 @@ export const UpdateInstallGuide: Component<UpdateInstallGuideProps> = (props) =>
                   </svg>
                 </div>
                 <div>
-                  <h4 class="text-base font-semibold text-green-900 dark:text-green-100">
+                  <h4 class="text-base font-semibold text-green-900/25 dark:text-green-100">
                     {guide()!.headerTitle}
                   </h4>
                   <p class="text-xs text-green-700 dark:text-green-300">{guide()!.headerSummary}</p>
@@ -253,7 +253,7 @@ export const UpdateInstallGuide: Component<UpdateInstallGuideProps> = (props) =>
                     props.isInstalling
                       ? 'cursor-not-allowed bg-green-400 text-white dark:bg-green-600'
                       : readinessBlocked()
-                        ? 'cursor-not-allowed bg-red-200 text-red-800 dark:bg-red-900 dark:text-red-200'
+                        ? 'cursor-not-allowed bg-red-200 text-red-800 dark:bg-red-900/25 dark:text-red-200'
                         : 'bg-green-600 text-white hover:bg-green-700'
                   }`}
                 >
diff --git a/frontend-modern/src/components/Settings/UpdatesSettingsPanel.tsx b/frontend-modern/src/components/Settings/UpdatesSettingsPanel.tsx
index f5518e2979..dc1b56efc3 100644
--- a/frontend-modern/src/components/Settings/UpdatesSettingsPanel.tsx
+++ b/frontend-modern/src/components/Settings/UpdatesSettingsPanel.tsx
@@ -111,7 +111,7 @@ export const UpdatesSettingsPanel: Component<UpdatesSettingsPanelProps> = (props
               {/* Current Version */}
               <div class="bg-surface-alt p-4">
                 <div class="flex items-start gap-3">
-                  <div class="p-2 bg-blue-100 dark:bg-blue-900 rounded-md">
+                  <div class="p-2 bg-blue-100 dark:bg-blue-900/25 rounded-md">
                     <Package class="w-5 h-5 text-blue-600 dark:text-blue-400" />
                   </div>
                   <div class="flex-1 min-w-0">
@@ -150,7 +150,7 @@ export const UpdatesSettingsPanel: Component<UpdatesSettingsPanelProps> = (props
 
               {/* Update Status / Arrow */}
               <Show when={props.updateInfo()?.available}>
-                <div class="bg-green-50 dark:bg-green-900 p-4 flex items-center justify-center">
+                <div class="bg-green-50 dark:bg-green-900/25 p-4 flex items-center justify-center">
                   <div class="flex flex-col items-center gap-1.5">
                     <div class="flex items-center gap-2 text-green-600 dark:text-green-400">
                       <ArrowRight class="w-5 h-5" />
@@ -165,7 +165,9 @@ export const UpdatesSettingsPanel: Component<UpdatesSettingsPanelProps> = (props
               {/* Latest Version / Status */}
               <div
                 class={`p-4 ${
-                  props.updateInfo()?.available ? 'bg-green-50 dark:bg-green-900' : 'bg-surface-alt'
+                  props.updateInfo()?.available
+                    ? 'bg-green-50 dark:bg-green-900/25'
+                    : 'bg-surface-alt'
                 }`}
               >
                 <div class="flex items-start gap-3">
@@ -310,7 +312,7 @@ export const UpdatesSettingsPanel: Component<UpdatesSettingsPanelProps> = (props
           />
 
           <Show when={isPreviewChannel()}>
-            <div class="rounded-md border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-100">
+            <div class="rounded-md border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900/25 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-100">
               <p class="font-medium">{UPDATES_PANEL_COPY.previewChannelTitle}</p>
               <p class="mt-1 text-xs text-amber-800 dark:text-amber-200">
                 {UPDATES_PANEL_COPY.previewChannelDescription}
@@ -322,7 +324,7 @@ export const UpdatesSettingsPanel: Component<UpdatesSettingsPanelProps> = (props
           <div class="p-4 rounded-md border border-border bg-surface-alt">
             <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
               <div class="flex items-center gap-3">
-                <div class="p-2 bg-blue-100 dark:bg-blue-900 rounded-md">
+                <div class="p-2 bg-blue-100 dark:bg-blue-900/25 rounded-md">
                   <svg
                     class="w-5 h-5 text-blue-600 dark:text-blue-400"
                     fill="none"
@@ -357,7 +359,7 @@ export const UpdatesSettingsPanel: Component<UpdatesSettingsPanelProps> = (props
                   aria-labelledby={autoUpdateTitleId}
                   class="sr-only peer"
                 />
-                <div class="w-11 h-6 bg-surface-alt peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600 peer-disabled:opacity-50"></div>
+                <div class="w-11 h-6 bg-surface-alt peer-focus:outline-hidden rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600 peer-disabled:opacity-50"></div>
               </label>
             </div>
 
diff --git a/frontend-modern/src/components/Settings/UserAssignmentsDialog.tsx b/frontend-modern/src/components/Settings/UserAssignmentsDialog.tsx
index d00055dc8b..132a05fbd3 100644
--- a/frontend-modern/src/components/Settings/UserAssignmentsDialog.tsx
+++ b/frontend-modern/src/components/Settings/UserAssignmentsDialog.tsx
@@ -69,15 +69,15 @@ export const UserAssignmentsDialog: Component<UserAssignmentsDialogProps> = (pro
               <For each={props.roles}>
                 {(role) => (
                   <label
-                    class={`flex flex-col p-3 rounded-md border transition-all cursor-pointer ${props.formRoleIds.includes(role.id) ? 'bg-blue-50 border-blue-200 dark:bg-blue-900 dark:border-blue-800' : 'bg-surface border-border hover:border-blue-100 dark:hover:border-blue-900'}`}
+                    class={`flex flex-col p-3 rounded-md border transition-all cursor-pointer ${props.formRoleIds.includes(role.id) ? 'bg-blue-50 border-blue-200 dark:bg-blue-900/25 dark:border-blue-800' : 'bg-surface border-border hover:border-blue-100 dark:hover:border-blue-900/25'}`}
                   >
                     <div class="flex items-start justify-between gap-2 mb-1">
-                      <div class="flex items-center gap-2 shadow-sm">
+                      <div class="flex items-center gap-2 shadow-xs">
                         <input
                           type="checkbox"
                           checked={props.formRoleIds.includes(role.id)}
                           onChange={() => props.onToggleRole(role.id)}
-                          class="w-4 h-4 text-blue-600 rounded border-border focus:ring-blue-500"
+                          class="w-4 h-4 text-blue-600 rounded-sm border-border focus:ring-blue-500"
                         />
                         <span class="text-sm font-semibold text-base-content">{role.name}</span>
                       </div>
@@ -113,7 +113,7 @@ export const UserAssignmentsDialog: Component<UserAssignmentsDialogProps> = (pro
               <div class="flex flex-wrap gap-2">
                 <For each={props.userPermissions}>
                   {(permission) => (
-                    <span class="inline-flex items-center rounded-md bg-surface px-2.5 py-1 text-xs font-semibold text-base-content border border-border shadow-sm">
+                    <span class="inline-flex items-center rounded-md bg-surface px-2.5 py-1 text-xs font-semibold text-base-content border border-border shadow-xs">
                       <span class="text-blue-600 dark:text-blue-400">{permission.action}</span>
                       <span class="mx-1 text-slate-400">:</span>
                       <span class="text-blue-600 dark:text-blue-400">{permission.resource}</span>
diff --git a/frontend-modern/src/components/Settings/UserAssignmentsPanel.tsx b/frontend-modern/src/components/Settings/UserAssignmentsPanel.tsx
index 956365b26d..31c0c1db84 100644
--- a/frontend-modern/src/components/Settings/UserAssignmentsPanel.tsx
+++ b/frontend-modern/src/components/Settings/UserAssignmentsPanel.tsx
@@ -38,7 +38,7 @@ export const UserAssignmentsPanel: Component = () => {
             value={state.searchQuery()}
             onChange={state.setSearchQuery}
             disabled={!state.featureGate.rbacEnabled() || Boolean(state.loadError())}
-            class="min-w-[15rem]"
+            class="min-w-60"
             inputClass="min-h-10 sm:min-h-9 py-2.5"
           />
         }
@@ -226,7 +226,7 @@ export const UserAssignmentsPanel: Component = () => {
                   revokes their active Pulse sessions.
                 </p>
               </div>
-              <div class="rounded-md border border-amber-300 bg-amber-50 p-3 text-sm text-amber-900 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-100">
+              <div class="rounded-md border border-amber-300 bg-amber-50 p-3 text-sm text-amber-900/25 dark:border-amber-800 dark:bg-amber-950/25 dark:text-amber-100">
                 This does not disable the account at the identity provider. A later authorized SSO
                 login will create the user record again.
               </div>
diff --git a/frontend-modern/src/components/Settings/__tests__/AISettings.test.tsx b/frontend-modern/src/components/Settings/__tests__/AISettings.test.tsx
index ad4fe57fd9..9625418385 100644
--- a/frontend-modern/src/components/Settings/__tests__/AISettings.test.tsx
+++ b/frontend-modern/src/components/Settings/__tests__/AISettings.test.tsx
@@ -246,7 +246,7 @@ describe('AISettings model loading error states', () => {
     expect(chatActionMode.parentElement).toHaveClass('flex-col', 'sm:flex-row');
     expect(
       screen.getByText('Assistant asks before chat-only actions.', { exact: false }),
-    ).toHaveClass('sm:ml-[7.5rem]');
+    ).toHaveClass('sm:ml-30');
     expect(screen.getByRole('option', { name: /Ask first/i })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /Save Assistant settings/i })).toBeInTheDocument();
     expect(screen.getByRole('heading', { name: 'External agents' })).toBeInTheDocument();
diff --git a/frontend-modern/src/components/Settings/__tests__/APITokenManager.test.tsx b/frontend-modern/src/components/Settings/__tests__/APITokenManager.test.tsx
index cd2d2498f0..f0efc9b135 100644
--- a/frontend-modern/src/components/Settings/__tests__/APITokenManager.test.tsx
+++ b/frontend-modern/src/components/Settings/__tests__/APITokenManager.test.tsx
@@ -261,7 +261,7 @@ describe('APITokenManager', () => {
     expect(apiTokenManagerSource).not.toContain(
       'min-h-10 sm:min-h-10 rounded-full border px-3 py-2 text-sm font-semibold transition',
     );
-    expect(apiTokenManagerSource).not.toContain('border-blue-500 bg-blue-600 text-white shadow-sm');
+    expect(apiTokenManagerSource).not.toContain('border-blue-500 bg-blue-600 text-white shadow-xs');
     expect(apiTokenManagerSource).not.toContain('hover:border-blue-400 hover:text-blue-600');
 
     render(() => <APITokenManager onTokensChanged={vi.fn()} canManage />);
diff --git a/frontend-modern/src/components/Settings/__tests__/InfrastructureSourceManager.test.tsx b/frontend-modern/src/components/Settings/__tests__/InfrastructureSourceManager.test.tsx
index e5a7203d86..641b5b1e34 100644
--- a/frontend-modern/src/components/Settings/__tests__/InfrastructureSourceManager.test.tsx
+++ b/frontend-modern/src/components/Settings/__tests__/InfrastructureSourceManager.test.tsx
@@ -169,7 +169,7 @@ describe('InfrastructureSourceManager setup summary', () => {
       'lg:min-h-0',
     );
     expect(infrastructureSourceManagerSource).toContain(
-      'class="min-h-11 min-w-[4.5rem] flex-shrink-0 lg:min-h-0"',
+      'class="min-h-11 min-w-18 shrink-0 lg:min-h-0"',
     );
   });
 
diff --git a/frontend-modern/src/components/Settings/__tests__/ProLicensePanel.test.tsx b/frontend-modern/src/components/Settings/__tests__/ProLicensePanel.test.tsx
index 0897108765..3121bc9ebe 100644
--- a/frontend-modern/src/components/Settings/__tests__/ProLicensePanel.test.tsx
+++ b/frontend-modern/src/components/Settings/__tests__/ProLicensePanel.test.tsx
@@ -1666,7 +1666,7 @@ describe('ProLicensePanel', () => {
     expect(selfHostedCommercialRecoverySectionSource).not.toContain('target="_blank"');
     expect(selfHostedCommercialRecoverySectionSource).not.toContain('rel="noopener noreferrer"');
     expect(proLicensePlanSectionSource).not.toContain(
-      'inline-flex items-center gap-1 mt-3 min-h-10 sm:min-h-9 rounded-md border border-current/20 px-3 py-2 text-xs font-medium hover:bg-black/5 dark:hover:bg-white/5',
+      'inline-flex items-center gap-1 mt-3 min-h-10 sm:min-h-9 rounded-md border px-3 py-2 text-xs font-medium hover:bg-black/5 dark:hover:bg-white/5',
     );
     expect(proLicensePlanSectionSource).toContain('props.planComparisonSummary.cards.length > 0');
     expect(proLicensePlanSectionSource).toContain(
diff --git a/frontend-modern/src/components/Settings/__tests__/availabilitySettingsModel.branchcov0724pm.test.ts b/frontend-modern/src/components/Settings/__tests__/availabilitySettingsModel.branchcov0724pm.test.ts
index 359d91352c..c2fe29dc66 100644
--- a/frontend-modern/src/components/Settings/__tests__/availabilitySettingsModel.branchcov0724pm.test.ts
+++ b/frontend-modern/src/components/Settings/__tests__/availabilitySettingsModel.branchcov0724pm.test.ts
@@ -96,7 +96,7 @@ describe('getAvailabilityTargetStatusClass (indeterminate arm)', () => {
           status: status({ available: false, outcome: 'indeterminate' }),
         }),
       ),
-    ).toBe('bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300');
+    ).toBe('bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300');
   });
 });
 
diff --git a/frontend-modern/src/components/Settings/__tests__/availabilitySettingsModel.test.ts b/frontend-modern/src/components/Settings/__tests__/availabilitySettingsModel.test.ts
index f99d5b325b..d99d7785f6 100644
--- a/frontend-modern/src/components/Settings/__tests__/availabilitySettingsModel.test.ts
+++ b/frontend-modern/src/components/Settings/__tests__/availabilitySettingsModel.test.ts
@@ -145,7 +145,7 @@ describe('availabilitySettingsModel', () => {
       'bg-surface-alt text-muted',
     );
     expect(getAvailabilityTargetStatusClass(target())).toBe(
-      'bg-sky-100 text-sky-700 dark:bg-sky-900 dark:text-sky-300',
+      'bg-sky-100 text-sky-700 dark:bg-sky-900/25 dark:text-sky-300',
     );
     expect(
       getAvailabilityTargetStatusClass(
@@ -153,12 +153,12 @@ describe('availabilitySettingsModel', () => {
           status: { ...target(), targetId: 'mqtt-broker', available: true, latencyMillis: 12 },
         }),
       ),
-    ).toBe('bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300');
+    ).toBe('bg-emerald-100 text-emerald-700 dark:bg-emerald-900/25 dark:text-emerald-300');
     expect(
       getAvailabilityTargetStatusClass(
         target({ status: { ...target(), targetId: 'mqtt-broker', available: false } }),
       ),
-    ).toBe('bg-rose-100 text-rose-700 dark:bg-rose-900 dark:text-rose-300');
+    ).toBe('bg-rose-100 text-rose-700 dark:bg-rose-900/25 dark:text-rose-300');
   });
 
   it('attributes probe-reported results to the assigned agent host', () => {
@@ -214,7 +214,7 @@ describe('availabilitySettingsModel', () => {
     expect(getAvailabilityTargetStatusLabel(stale)).toBe('No recent probe report');
     // No new visual language: it reuses the amber indeterminate badge.
     expect(getAvailabilityTargetStatusClass(stale)).toBe(
-      'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300',
+      'bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300',
     );
     // The UDP open-or-filtered case keeps its own copy.
     expect(
diff --git a/frontend-modern/src/components/Settings/__tests__/connectionsTableModel.coverage.test.ts b/frontend-modern/src/components/Settings/__tests__/connectionsTableModel.coverage.test.ts
index 304a9dbd79..6c803410ea 100644
--- a/frontend-modern/src/components/Settings/__tests__/connectionsTableModel.coverage.test.ts
+++ b/frontend-modern/src/components/Settings/__tests__/connectionsTableModel.coverage.test.ts
@@ -195,10 +195,10 @@ describe('fleetSignalClassName', () => {
     'inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-medium whitespace-nowrap ';
 
   const expectedByTone: Record<FleetGovernanceSignalTone, string> = {
-    ok: `${PREFIX}border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-900 dark:bg-emerald-950/30 dark:text-emerald-200`,
-    info: `${PREFIX}border-blue-200 bg-blue-50 text-blue-800 dark:border-blue-900 dark:bg-blue-950/30 dark:text-blue-200`,
-    warning: `${PREFIX}border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-900 dark:bg-amber-950/30 dark:text-amber-200`,
-    critical: `${PREFIX}border-rose-200 bg-rose-50 text-rose-800 dark:border-rose-900 dark:bg-rose-950/30 dark:text-rose-200`,
+    ok: `${PREFIX}border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-900/25 dark:bg-emerald-950/30 dark:text-emerald-200`,
+    info: `${PREFIX}border-blue-200 bg-blue-50 text-blue-800 dark:border-blue-900/25 dark:bg-blue-950/30 dark:text-blue-200`,
+    warning: `${PREFIX}border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-900/25 dark:bg-amber-950/30 dark:text-amber-200`,
+    critical: `${PREFIX}border-rose-200 bg-rose-50 text-rose-800 dark:border-rose-900/25 dark:bg-rose-950/30 dark:text-rose-200`,
     muted: `${PREFIX}border-border bg-surface-alt text-muted`,
   };
 
diff --git a/frontend-modern/src/components/Settings/__tests__/settingsArchitecture.test.ts b/frontend-modern/src/components/Settings/__tests__/settingsArchitecture.test.ts
index a6c84839ac..f09e623ab2 100644
--- a/frontend-modern/src/components/Settings/__tests__/settingsArchitecture.test.ts
+++ b/frontend-modern/src/components/Settings/__tests__/settingsArchitecture.test.ts
@@ -630,10 +630,10 @@ describe('settings architecture guardrails', () => {
       'inline-flex items-center justify-center rounded-md bg-emerald-600 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-emerald-700',
     );
     expect(infrastructureInstallerSectionSource).not.toContain(
-      'inline-flex items-center justify-center rounded-md border border-emerald-300 bg-white px-3 py-2 text-sm font-medium text-emerald-900 transition-colors hover:bg-emerald-100',
+      'inline-flex items-center justify-center rounded-md border border-emerald-300 bg-white px-3 py-2 text-sm font-medium text-emerald-900/25 transition-colors hover:bg-emerald-100',
     );
     expect(infrastructureInstallerSectionSource).not.toContain(
-      'inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium text-emerald-900 hover:bg-emerald-100',
+      'inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium text-emerald-900/25 hover:bg-emerald-100',
     );
 
     expect(ssoProvidersPanelSource).toContain(
@@ -755,7 +755,7 @@ describe('settings architecture guardrails', () => {
     expect(discoverySettingsFormSource).not.toContain(
       'rounded-md border border-amber-200 bg-amber-50/80',
     );
-    expect(aiProviderConfigurationSectionSource).not.toContain('rounded border border-red-200');
+    expect(aiProviderConfigurationSectionSource).not.toContain('rounded-sm border border-red-200');
     expect(diagnosticsResultsPanelSource).not.toContain(
       'rounded-md border border-amber-200 bg-amber-50',
     );
diff --git a/frontend-modern/src/components/Settings/availabilitySettingsModel.ts b/frontend-modern/src/components/Settings/availabilitySettingsModel.ts
index 42323785a0..f603c41be4 100644
--- a/frontend-modern/src/components/Settings/availabilitySettingsModel.ts
+++ b/frontend-modern/src/components/Settings/availabilitySettingsModel.ts
@@ -131,20 +131,20 @@ export function getAvailabilityTargetStatusLabel(target: AvailabilityTarget): st
 
 export function getAvailabilityTargetStatusClass(target: AvailabilityTarget): string {
   if (!target.enabled) return 'bg-surface-alt text-muted';
-  if (!target.status) return 'bg-sky-100 text-sky-700 dark:bg-sky-900 dark:text-sky-300';
+  if (!target.status) return 'bg-sky-100 text-sky-700 dark:bg-sky-900/25 dark:text-sky-300';
   if (target.status.aggregateState === 'degraded' || target.status.aggregateState === 'unknown') {
-    return 'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300';
+    return 'bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300';
   }
   if (target.status.aggregateState === 'unavailable') {
-    return 'bg-rose-100 text-rose-700 dark:bg-rose-900 dark:text-rose-300';
+    return 'bg-rose-100 text-rose-700 dark:bg-rose-900/25 dark:text-rose-300';
   }
   if (target.status.outcome === 'indeterminate') {
-    return 'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300';
+    return 'bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300';
   }
   if (target.status.available) {
-    return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300';
+    return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/25 dark:text-emerald-300';
   }
-  return 'bg-rose-100 text-rose-700 dark:bg-rose-900 dark:text-rose-300';
+  return 'bg-rose-100 text-rose-700 dark:bg-rose-900/25 dark:text-rose-300';
 }
 
 /**
diff --git a/frontend-modern/src/components/Settings/connectionsTableModel.ts b/frontend-modern/src/components/Settings/connectionsTableModel.ts
index bf2348d3a6..241aabb4f5 100644
--- a/frontend-modern/src/components/Settings/connectionsTableModel.ts
+++ b/frontend-modern/src/components/Settings/connectionsTableModel.ts
@@ -136,7 +136,7 @@ export const connectionAgentVersionPresentation = (
   if (connection.agentUpdateAvailable && currentVersion && expectedVersion) {
     return {
       badgeClassName:
-        'inline-flex items-center rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-medium text-amber-800 dark:bg-amber-900 dark:text-amber-200',
+        'inline-flex items-center rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-medium text-amber-800 dark:bg-amber-900/25 dark:text-amber-200',
       badgeLabel: 'Update available',
       detail: `${currentVersion} -> ${expectedVersion}`,
       title: `Pulse Agent update available: ${currentVersion} -> ${expectedVersion}`,
@@ -356,12 +356,12 @@ const commandPolicyFromFleet = (fleet: ConnectionFleetGovernance): ConnectionFle
 };
 
 const fleetSignalClassNameByTone: Record<FleetGovernanceSignalTone, string> = {
-  ok: 'border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-900 dark:bg-emerald-950/30 dark:text-emerald-200',
-  info: 'border-blue-200 bg-blue-50 text-blue-800 dark:border-blue-900 dark:bg-blue-950/30 dark:text-blue-200',
+  ok: 'border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-900/25 dark:bg-emerald-950/30 dark:text-emerald-200',
+  info: 'border-blue-200 bg-blue-50 text-blue-800 dark:border-blue-900/25 dark:bg-blue-950/30 dark:text-blue-200',
   warning:
-    'border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-900 dark:bg-amber-950/30 dark:text-amber-200',
+    'border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-900/25 dark:bg-amber-950/30 dark:text-amber-200',
   critical:
-    'border-rose-200 bg-rose-50 text-rose-800 dark:border-rose-900 dark:bg-rose-950/30 dark:text-rose-200',
+    'border-rose-200 bg-rose-50 text-rose-800 dark:border-rose-900/25 dark:bg-rose-950/30 dark:text-rose-200',
   muted: 'border-border bg-surface-alt text-muted',
 };
 
diff --git a/frontend-modern/src/components/Settings/useConnectionsLedger.ts b/frontend-modern/src/components/Settings/useConnectionsLedger.ts
index 19c1888a44..edb7508a99 100644
--- a/frontend-modern/src/components/Settings/useConnectionsLedger.ts
+++ b/frontend-modern/src/components/Settings/useConnectionsLedger.ts
@@ -45,23 +45,23 @@ export const CONNECTION_TYPE_LABELS: Record<ConnectionType, string> = {
 const STATE_PRESENTATION: Record<ConnectionState, { label: string; badgeClass: string }> = {
   active: {
     label: 'Active',
-    badgeClass: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300',
+    badgeClass: 'bg-green-100 text-green-800 dark:bg-green-900/25 dark:text-green-300',
   },
   paused: {
     label: 'Paused',
-    badgeClass: 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200',
+    badgeClass: 'bg-amber-100 text-amber-800 dark:bg-amber-900/25 dark:text-amber-200',
   },
   unauthorized: {
     label: 'Unauthorized',
-    badgeClass: 'bg-rose-100 text-rose-800 dark:bg-rose-900 dark:text-rose-200',
+    badgeClass: 'bg-rose-100 text-rose-800 dark:bg-rose-900/25 dark:text-rose-200',
   },
   unreachable: {
     label: 'Unreachable',
-    badgeClass: 'bg-rose-100 text-rose-800 dark:bg-rose-900 dark:text-rose-200',
+    badgeClass: 'bg-rose-100 text-rose-800 dark:bg-rose-900/25 dark:text-rose-200',
   },
   stale: {
     label: 'Stale',
-    badgeClass: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
+    badgeClass: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/25 dark:text-yellow-200',
   },
   pending: {
     label: 'Pending',
diff --git a/frontend-modern/src/components/Settings/useProLicensePanelState.ts b/frontend-modern/src/components/Settings/useProLicensePanelState.ts
index 39123b371a..60d0838a61 100644
--- a/frontend-modern/src/components/Settings/useProLicensePanelState.ts
+++ b/frontend-modern/src/components/Settings/useProLicensePanelState.ts
@@ -201,7 +201,7 @@ export function useProLicensePanelState() {
       return null;
     }
     return {
-      tone: 'border-sky-200 dark:border-sky-900 bg-sky-50 dark:bg-sky-950 text-sky-900 dark:text-sky-100',
+      tone: 'border-sky-200 dark:border-sky-900/25 bg-sky-50 dark:bg-sky-950/25 text-sky-900/25 dark:text-sky-100',
       title: SELF_HOSTED_PRO_BILLING_PRESENTATION.planSelectionPromptTitle,
       body: SELF_HOSTED_PRO_BILLING_PRESENTATION.planSelectionPromptBody,
       actionLabel: SELF_HOSTED_PRO_BILLING_PRESENTATION.planSelectionPromptActionLabel,
diff --git a/frontend-modern/src/components/SetupWizard/SetupCompletionPanel.tsx b/frontend-modern/src/components/SetupWizard/SetupCompletionPanel.tsx
index f1e1f8021a..711dbc8505 100644
--- a/frontend-modern/src/components/SetupWizard/SetupCompletionPanel.tsx
+++ b/frontend-modern/src/components/SetupWizard/SetupCompletionPanel.tsx
@@ -197,7 +197,7 @@ export const SetupCompletionPanel: Component<CompleteStepProps> = (props) => {
     <div class="max-w-2xl mx-auto bg-surface border border-border overflow-hidden relative rounded-md p-6 sm:p-8 text-center text-base-content">
       <div class="relative z-10">
         <div class="mb-8">
-          <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-emerald-100 dark:bg-emerald-900 text-emerald-600 dark:text-emerald-400 mb-6 border border-emerald-200 dark:border-emerald-800">
+          <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-emerald-100 dark:bg-emerald-900/25 text-emerald-600 dark:text-emerald-400 mb-6 border border-emerald-200 dark:border-emerald-800">
             <svg
               class="w-8 h-8"
               fill="none"
@@ -217,7 +217,7 @@ export const SetupCompletionPanel: Component<CompleteStepProps> = (props) => {
         </div>
 
         <Show when={completionViewModel().hasConnectedSystems}>
-          <div class="bg-emerald-50 dark:bg-emerald-900 rounded-md border border-emerald-200 dark:border-emerald-800 p-5 text-left mb-6">
+          <div class="bg-emerald-50 dark:bg-emerald-900/25 rounded-md border border-emerald-200 dark:border-emerald-800 p-5 text-left mb-6">
             <h3 class="text-sm font-semibold text-emerald-800 dark:text-emerald-400 mb-3 flex items-center gap-2">
               <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path
@@ -238,7 +238,7 @@ export const SetupCompletionPanel: Component<CompleteStepProps> = (props) => {
                       <span class="text-base-content text-sm font-medium">{system.name}</span>
                     </div>
                     <div class="flex items-center gap-2">
-                      <span class="text-[10px] text-emerald-700 dark:text-emerald-300 bg-emerald-100 dark:bg-emerald-900 border border-emerald-200 dark:border-emerald-800 px-2 py-0.5 rounded-full font-medium">
+                      <span class="text-[10px] text-emerald-700 dark:text-emerald-300 bg-emerald-100 dark:bg-emerald-900/25 border border-emerald-200 dark:border-emerald-800 px-2 py-0.5 rounded-full font-medium">
                         {system.typeLabel}
                       </span>
                       <Show when={system.host}>
@@ -258,7 +258,7 @@ export const SetupCompletionPanel: Component<CompleteStepProps> = (props) => {
             class="w-full p-4 sm:p-6 flex items-center justify-between gap-4 text-left hover:bg-surface-hover transition-colors group"
           >
             <div class="flex items-start gap-3">
-              <div class="w-8 h-8 rounded-md bg-amber-50 dark:bg-amber-900 flex items-center justify-center border border-amber-100 dark:border-amber-800 shrink-0">
+              <div class="w-8 h-8 rounded-md bg-amber-50 dark:bg-amber-900/25 flex items-center justify-center border border-amber-100 dark:border-amber-800 shrink-0">
                 <svg
                   class="w-4 h-4 text-amber-500"
                   fill="none"
@@ -276,7 +276,7 @@ export const SetupCompletionPanel: Component<CompleteStepProps> = (props) => {
               <div>
                 <span class="text-base-content font-semibold text-sm flex items-center gap-2 flex-wrap">
                   {t('setup.completion.credentials.title')}
-                  <span class="text-[10px] text-amber-700 dark:text-amber-400 bg-amber-100 dark:bg-amber-900 border border-amber-200 dark:border-amber-800 px-2 py-0.5 rounded-full">
+                  <span class="text-[10px] text-amber-700 dark:text-amber-400 bg-amber-100 dark:bg-amber-900/25 border border-amber-200 dark:border-amber-800 px-2 py-0.5 rounded-full">
                     {t('setup.completion.credentials.badge')}
                   </span>
                 </span>
@@ -409,7 +409,7 @@ export const SetupCompletionPanel: Component<CompleteStepProps> = (props) => {
 
               <button
                 onClick={downloadCredentials}
-                class="w-full mt-2 py-2.5 text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 flex items-center justify-center gap-1.5 bg-blue-50 dark:bg-blue-900 hover:bg-blue-100 dark:hover:bg-blue-900 rounded-md transition-colors border border-blue-100 dark:border-blue-900"
+                class="w-full mt-2 py-2.5 text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 flex items-center justify-center gap-1.5 bg-blue-50 dark:bg-blue-900/25 hover:bg-blue-100 dark:hover:bg-blue-900/25 rounded-md transition-colors border border-blue-100 dark:border-blue-900/25"
               >
                 <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path
@@ -463,7 +463,7 @@ export const SetupCompletionPanel: Component<CompleteStepProps> = (props) => {
                 {completionViewModel().nextStepTitle}
               </h3>
             </div>
-            <div class="rounded-sm bg-blue-50 px-2 py-1 text-[10px] font-medium text-blue-700 dark:bg-blue-900 dark:text-blue-300">
+            <div class="rounded-xs bg-blue-50 px-2 py-1 text-[10px] font-medium text-blue-700 dark:bg-blue-900/25 dark:text-blue-300">
               {t('setup.completion.nextStep.badge')}
             </div>
           </div>
diff --git a/frontend-modern/src/components/SetupWizard/steps/SecurityStep.tsx b/frontend-modern/src/components/SetupWizard/steps/SecurityStep.tsx
index 4394f9737e..9bd832abf9 100644
--- a/frontend-modern/src/components/SetupWizard/steps/SecurityStep.tsx
+++ b/frontend-modern/src/components/SetupWizard/steps/SecurityStep.tsx
@@ -157,7 +157,7 @@ export const SecurityStep: Component<SecurityStepProps> = (props) => {
             type="text"
             value={username()}
             onInput={(e) => setUsername(e.currentTarget.value)}
-            class="w-full px-5 py-3.5 bg-surface border border-border rounded-md text-base-content placeholder-slate-400 focus:outline-none focus:ring-0 focus:border-blue-500 transition-colors font-mono"
+            class="w-full px-5 py-3.5 bg-surface border border-border rounded-md text-base-content placeholder-slate-400 focus:outline-hidden focus:ring-0 focus:border-blue-500 transition-colors font-mono"
             placeholder={t('setup.security.placeholder.username')}
           />
         </div>
@@ -199,7 +199,7 @@ export const SecurityStep: Component<SecurityStepProps> = (props) => {
                   type={showPassword() ? 'text' : 'password'}
                   value={password()}
                   onInput={(e) => setPassword(e.currentTarget.value)}
-                  class="w-full px-5 py-3.5 pr-20 bg-surface border border-border rounded-md text-base-content placeholder-slate-400 focus:outline-none focus:ring-0 focus:border-blue-500 transition-colors font-mono"
+                  class="w-full px-5 py-3.5 pr-20 bg-surface border border-border rounded-md text-base-content placeholder-slate-400 focus:outline-hidden focus:ring-0 focus:border-blue-500 transition-colors font-mono"
                   placeholder={t('setup.security.placeholder.password')}
                 />
                 <button
@@ -217,7 +217,7 @@ export const SecurityStep: Component<SecurityStepProps> = (props) => {
                 type={showPassword() ? 'text' : 'password'}
                 value={confirmPassword()}
                 onInput={(e) => setConfirmPassword(e.currentTarget.value)}
-                class="w-full px-5 py-3.5 bg-surface border border-border rounded-md text-base-content placeholder-slate-400 focus:outline-none focus:ring-0 focus:border-blue-500 transition-colors font-mono"
+                class="w-full px-5 py-3.5 bg-surface border border-border rounded-md text-base-content placeholder-slate-400 focus:outline-hidden focus:ring-0 focus:border-blue-500 transition-colors font-mono"
                 placeholder={t('setup.security.label.confirmPassword')}
               />
               <p class="text-xs text-muted">{t('setup.security.minimumPasswordHelp')}</p>
diff --git a/frontend-modern/src/components/SetupWizard/steps/WelcomeStep.tsx b/frontend-modern/src/components/SetupWizard/steps/WelcomeStep.tsx
index 281ab5b938..644afc57aa 100644
--- a/frontend-modern/src/components/SetupWizard/steps/WelcomeStep.tsx
+++ b/frontend-modern/src/components/SetupWizard/steps/WelcomeStep.tsx
@@ -180,12 +180,12 @@ export const WelcomeStep: Component<WelcomeStepProps> = (props) => {
                   <div class="mb-1.5 text-[11px] font-semibold text-muted">{item.label}</div>
                   <div class="flex items-center justify-between gap-3 font-mono text-sm text-emerald-400">
                     <div class="flex min-w-0 items-center space-x-3 overflow-x-auto scrollbar-hide">
-                      <Terminal class="h-4 w-4 flex-shrink-0" />
+                      <Terminal class="h-4 w-4 shrink-0" />
                       <code class="whitespace-nowrap select-all">{item.command}</code>
                     </div>
                     <button
                       onClick={() => void copyCommand(item.id, item.command)}
-                      class="flex-shrink-0 rounded-md bg-surface p-2 text-slate-300 transition-colors hover:bg-slate-700 hover:text-white focus:outline-none focus:ring-0"
+                      class="shrink-0 rounded-md bg-surface p-2 text-slate-300 transition-colors hover:bg-slate-700 hover:text-white focus:outline-hidden focus:ring-0"
                       title={`${t('setup.welcome.copyCommandTitle')}: ${item.label}`}
                     >
                       <Show when={copiedCommand() === item.id} fallback={<Copy class="h-4 w-4" />}>
@@ -213,14 +213,14 @@ export const WelcomeStep: Component<WelcomeStepProps> = (props) => {
                 props.setBootstrapToken(e.currentTarget.value);
               }}
               onKeyDown={(e) => e.key === 'Enter' && void handleUnlock()}
-              class="w-full px-5 py-3.5 bg-surface border border-border rounded-md text-base-content placeholder-slate-400 focus:outline-none focus:ring-0 focus:border-blue-500 transition-colors font-mono"
+              class="w-full px-5 py-3.5 bg-surface border border-border rounded-md text-base-content placeholder-slate-400 focus:outline-hidden focus:ring-0 focus:border-blue-500 transition-colors font-mono"
               placeholder={t('setup.welcome.placeholder.bootstrapToken')}
               autofocus
             />
 
             <p class="text-xs text-muted">{t('setup.welcome.tokenHelp.afterVerify')}</p>
             <Show when={looksLikeBootstrapTokenSnapshot(props.bootstrapToken)}>
-              <p class="rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-900 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-100">
+              <p class="rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-900/25 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-100">
                 {snapshotPasteHelp()}
               </p>
             </Show>
diff --git a/frontend-modern/src/components/Storage/EnhancedStorageBar.tsx b/frontend-modern/src/components/Storage/EnhancedStorageBar.tsx
index 71ea29ccef..4df116d888 100644
--- a/frontend-modern/src/components/Storage/EnhancedStorageBar.tsx
+++ b/frontend-modern/src/components/Storage/EnhancedStorageBar.tsx
@@ -100,7 +100,7 @@ export function EnhancedStorageBar(props: EnhancedStorageBarProps) {
                 </span>
               </div>
               <Show when={zfsSummary()?.scan}>
-                <div class={`${getZfsScanTextClass()} mt-0.5 max-w-[200px] break-words`}>
+                <div class={`${getZfsScanTextClass()} mt-0.5 max-w-[200px] wrap-break-word`}>
                   {zfsSummary()?.scan}
                 </div>
               </Show>
diff --git a/frontend-modern/src/components/Storage/StorageDetailKeyValueRow.tsx b/frontend-modern/src/components/Storage/StorageDetailKeyValueRow.tsx
index 6661c8ed6e..0520220d62 100644
--- a/frontend-modern/src/components/Storage/StorageDetailKeyValueRow.tsx
+++ b/frontend-modern/src/components/Storage/StorageDetailKeyValueRow.tsx
@@ -17,7 +17,7 @@ export const StorageDetailKeyValueRow: Component<StorageDetailKeyValueRowProps>
     label={props.label}
     labelClass={STORAGE_DETAIL_KEY_CLASS}
     value={props.value}
-    valueClass={`${STORAGE_DETAIL_VALUE_CLASS} break-words`}
+    valueClass={`${STORAGE_DETAIL_VALUE_CLASS} wrap-break-word`}
     valueTitle={props.value}
   />
 );
diff --git a/frontend-modern/src/components/Storage/StoragePoolDetail.tsx b/frontend-modern/src/components/Storage/StoragePoolDetail.tsx
index 72df9c020a..c2e7383750 100644
--- a/frontend-modern/src/components/Storage/StoragePoolDetail.tsx
+++ b/frontend-modern/src/components/Storage/StoragePoolDetail.tsx
@@ -184,7 +184,7 @@ export const StoragePoolDetail: Component<StoragePoolDetailProps> = (props) => {
                       <div class="text-xs font-medium text-base-content">
                         Datasets ({zfsSummary()!.datasets.length})
                       </div>
-                      <div class="table-scroll-shell overflow-x-auto rounded border border-border">
+                      <div class="table-scroll-shell overflow-x-auto rounded-sm border border-border">
                         <table class="w-full min-w-0 table-fixed text-left text-xs">
                           <thead class="bg-surface-alt text-muted">
                             <tr>
@@ -256,24 +256,24 @@ export const StoragePoolDetail: Component<StoragePoolDetailProps> = (props) => {
                         />
                         <span class={STORAGE_DETAIL_LINKED_DISK_MODEL_CLASS}>{disk.model}</span>
                         <Show when={disk.role}>
-                          <span class="flex-shrink-0 rounded bg-surface-alt px-1.5 py-0.5 text-[10px] uppercase text-muted">
+                          <span class="shrink-0 rounded-sm bg-surface-alt px-1.5 py-0.5 text-[10px] uppercase text-muted">
                             {disk.role}
                           </span>
                         </Show>
                         <Show when={disk.sizeLabel}>
-                          <span class="flex-shrink-0 font-mono text-muted">{disk.sizeLabel}</span>
+                          <span class="shrink-0 font-mono text-muted">{disk.sizeLabel}</span>
                         </Show>
                         <Show when={disk.state}>
-                          <span class="flex-shrink-0 text-muted">{disk.state}</span>
+                          <span class="shrink-0 text-muted">{disk.state}</span>
                         </Show>
                         <Show when={disk.ioLabel}>
-                          <span class="flex-shrink-0 font-mono text-muted">{disk.ioLabel}</span>
+                          <span class="shrink-0 font-mono text-muted">{disk.ioLabel}</span>
                         </Show>
                         <Show when={disk.spunDown}>
-                          <span class="flex-shrink-0 text-muted">spun down</span>
+                          <span class="shrink-0 text-muted">spun down</span>
                         </Show>
                         <Show when={disk.errorCount > 0}>
-                          <span class="flex-shrink-0 font-semibold text-amber-700 dark:text-amber-300">
+                          <span class="shrink-0 font-semibold text-amber-700 dark:text-amber-300">
                             {disk.errorCount.toLocaleString()} errors
                           </span>
                         </Show>
diff --git a/frontend-modern/src/components/Storage/StoragePoolsTable.tsx b/frontend-modern/src/components/Storage/StoragePoolsTable.tsx
index c6217f0273..e05cf67137 100644
--- a/frontend-modern/src/components/Storage/StoragePoolsTable.tsx
+++ b/frontend-modern/src/components/Storage/StoragePoolsTable.tsx
@@ -141,8 +141,8 @@ export const StoragePoolsTable: Component<StoragePoolsTableProps> = (props) => {
             </TableHeader>
             <TableBody ref={tableWindow.setBodyRef} class={STORAGE_POOLS_BODY_CLASS}>
               <Show when={tableWindow.topSpacerHeight() > 0}>
-                <TableRow aria-hidden="true" class="h-0 !border-0">
-                  <TableCell colspan={99} class="h-0 !border-0 !p-0 leading-[0]">
+                <TableRow aria-hidden="true" class="h-0 border-0!">
+                  <TableCell colspan={99} class="h-0 border-0! p-0! leading-0">
                     <svg
                       aria-hidden="true"
                       width="1"
@@ -200,8 +200,8 @@ export const StoragePoolsTable: Component<StoragePoolsTableProps> = (props) => {
                 }}
               </For>
               <Show when={tableWindow.bottomSpacerHeight() > 0}>
-                <TableRow aria-hidden="true" class="h-0 !border-0">
-                  <TableCell colspan={99} class="h-0 !border-0 !p-0 leading-[0]">
+                <TableRow aria-hidden="true" class="h-0 border-0!">
+                  <TableCell colspan={99} class="h-0 border-0! p-0! leading-0">
                     <svg
                       aria-hidden="true"
                       width="1"
diff --git a/frontend-modern/src/components/Storage/__tests__/StoragePoolDetail.test.tsx b/frontend-modern/src/components/Storage/__tests__/StoragePoolDetail.test.tsx
index 4652191e6c..41f50ab844 100644
--- a/frontend-modern/src/components/Storage/__tests__/StoragePoolDetail.test.tsx
+++ b/frontend-modern/src/components/Storage/__tests__/StoragePoolDetail.test.tsx
@@ -206,7 +206,7 @@ describe('StoragePoolDetail', () => {
     );
     expect(screen.getByText('London Edge Standalone')).toHaveClass(
       'min-w-0',
-      'break-words',
+      'wrap-break-word',
       'text-right',
       'sm:text-left',
     );
diff --git a/frontend-modern/src/components/Toast/Toast.tsx b/frontend-modern/src/components/Toast/Toast.tsx
index 1bea03a0d7..b531d3a6f7 100644
--- a/frontend-modern/src/components/Toast/Toast.tsx
+++ b/frontend-modern/src/components/Toast/Toast.tsx
@@ -136,12 +136,12 @@ export const Toast: Component<ToastProps> = (props) => {
         class={`
            bg-surface
           border border-border
-          px-4 py-3 sm:px-5 sm:py-4 rounded-md shadow-sm
+          px-4 py-3 sm:px-5 sm:py-4 rounded-md shadow-xs
           flex w-full min-w-0 items-start gap-3 sm:gap-4
         `}
       >
         <div
-          class={`flex-shrink-0 flex items-center justify-center p-1.5 sm:p-2 rounded-md border bg-surface ${iconTone().iconClass} ${iconTone().panelClass}`}
+          class={`shrink-0 flex items-center justify-center p-1.5 sm:p-2 rounded-md border bg-surface ${iconTone().iconClass} ${iconTone().panelClass}`}
         >
           {icon()}
         </div>
@@ -155,7 +155,7 @@ export const Toast: Component<ToastProps> = (props) => {
               <summary class="text-xs text-muted cursor-pointer select-none hover:text-base-content">
                 Details
               </summary>
-              <p class="mt-1 text-xs text-base-content/70 break-all">{props.toast.detail}</p>
+              <p class="mt-1 text-xs break-all">{props.toast.detail}</p>
             </details>
           </Show>
         </div>
@@ -166,7 +166,7 @@ export const Toast: Component<ToastProps> = (props) => {
           title="Dismiss"
           tone="muted"
           size="sm"
-          class="flex-shrink-0"
+          class="shrink-0"
         >
           <XIcon class="h-4 w-4" aria-hidden="true" />
         </ActionIconButton>
@@ -217,7 +217,7 @@ export const ToastContainer: Component = () => {
       <div
         role="region"
         aria-label="Notifications"
-        class="fixed inset-x-3 bottom-3 z-[9999] space-y-2 sm:left-auto sm:right-4 sm:bottom-4 sm:w-full sm:max-w-[500px]"
+        class="fixed inset-x-3 bottom-3 z-9999 space-y-2 sm:left-auto sm:right-4 sm:bottom-4 sm:w-full sm:max-w-[500px]"
       >
         <For each={toasts()}>{(toast) => <Toast toast={toast} onRemove={removeToast} />}</For>
       </div>
diff --git a/frontend-modern/src/components/Toast/__tests__/Toast.test.tsx b/frontend-modern/src/components/Toast/__tests__/Toast.test.tsx
index 8187601f20..c6e46be7e8 100644
--- a/frontend-modern/src/components/Toast/__tests__/Toast.test.tsx
+++ b/frontend-modern/src/components/Toast/__tests__/Toast.test.tsx
@@ -189,7 +189,7 @@ describe('Toast', () => {
     expect(toastSource).not.toContain('<svg');
     expect(toastSource).not.toContain('const icons = {');
     expect(toastSource).not.toContain(
-      'flex-shrink-0 text-muted hover:text-base-content hover:bg-surface rounded-md p-1.5 transition-all duration-200',
+      'shrink-0 text-muted hover:text-base-content hover:bg-surface rounded-md p-1.5 transition-all duration-200',
     );
   });
 });
diff --git a/frontend-modern/src/components/TokenRevealDialog.tsx b/frontend-modern/src/components/TokenRevealDialog.tsx
index f9f2a77b6c..76b0e8993f 100644
--- a/frontend-modern/src/components/TokenRevealDialog.tsx
+++ b/frontend-modern/src/components/TokenRevealDialog.tsx
@@ -78,7 +78,7 @@ export const TokenRevealDialog: Component = () => {
             ariaLabel="API token ready"
           >
             <div class="w-full">
-              <Card padding="lg" class="shadow-sm relative">
+              <Card padding="lg" class="shadow-xs relative">
                 <button
                   type="button"
                   class="absolute top-3 right-3 rounded-md px-2 py-1 text-xs font-medium hover:text-base-content transition-colors"
@@ -89,7 +89,7 @@ export const TokenRevealDialog: Component = () => {
                 </button>
 
                 <div class="flex items-start gap-3">
-                  <div class="flex-shrink-0 rounded-full bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300 p-2">
+                  <div class="shrink-0 rounded-full bg-green-100 text-green-700 dark:bg-green-900/25 dark:text-green-300 p-2">
                     <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                       <path
                         stroke-linecap="round"
@@ -106,7 +106,7 @@ export const TokenRevealDialog: Component = () => {
                         <span
                           class={
                             sourceBadge?.classes ||
-                            'inline-flex items-center rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-surface-alt text-base-content'
+                            'inline-flex items-center rounded-sm px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-surface-alt text-base-content'
                           }
                         >
                           {sourceLabel}
@@ -128,7 +128,7 @@ export const TokenRevealDialog: Component = () => {
                     <button
                       type="button"
                       onClick={() => handleCopy(info.token)}
-                      class="inline-flex items-center justify-center rounded-md bg-green-600 hover:bg-green-700 text-white text-sm font-semibold px-4 py-2 transition-colors shadow-sm"
+                      class="inline-flex items-center justify-center rounded-md bg-green-600 hover:bg-green-700 text-white text-sm font-semibold px-4 py-2 transition-colors shadow-xs"
                     >
                       {copied() ? 'Copied!' : 'Copy token'}
                     </button>
@@ -139,7 +139,7 @@ export const TokenRevealDialog: Component = () => {
                       <span>
                         {' '}
                         · Hint:{' '}
-                        <code class="rounded bg-surface-alt px-1.5 py-0.5 font-mono text-[11px] text-muted">
+                        <code class="rounded-sm bg-surface-alt px-1.5 py-0.5 font-mono text-[11px] text-muted">
                           {tokenHint as string}
                         </code>
                       </span>
diff --git a/frontend-modern/src/components/UpdateBanner.tsx b/frontend-modern/src/components/UpdateBanner.tsx
index 6d359db591..d1a7ecb2ab 100644
--- a/frontend-modern/src/components/UpdateBanner.tsx
+++ b/frontend-modern/src/components/UpdateBanner.tsx
@@ -140,14 +140,14 @@ export function UpdateBanner() {
     <Show when={updateStore.isUpdateVisible()}>
       <div
         data-testid="update-banner"
-        class="update-banner bg-blue-50 dark:bg-blue-900 border-b border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-200 relative animate-slideDown"
+        class="update-banner bg-blue-50 dark:bg-blue-900/25 border-b border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-200 relative animate-slideDown"
       >
         <div class="px-4 py-1.5">
           <div class="flex items-center justify-between">
             <div class="flex items-center gap-3">
               {/* Update icon */}
               <svg
-                class="w-4 h-4 flex-shrink-0"
+                class="w-4 h-4 shrink-0"
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
@@ -170,7 +170,7 @@ export function UpdateBanner() {
 
                 {/* Pre-release badge */}
                 <Show when={updateStore.updateInfo()?.isPrerelease && !isExpanded()}>
-                  <span class="px-2 py-0.5 text-xs font-medium bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200 rounded">
+                  <span class="px-2 py-0.5 text-xs font-medium bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200 rounded-sm">
                     Pre-release
                   </span>
                 </Show>
@@ -180,7 +180,7 @@ export function UpdateBanner() {
                 <Show when={updatePlan()?.canAutoUpdate && !isExpanded()}>
                   <button
                     onClick={handleApplyUpdate}
-                    class="px-3 py-1 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded transition-colors"
+                    class="px-3 py-1 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-sm transition-colors"
                   >
                     Apply Update
                   </button>
@@ -192,7 +192,7 @@ export function UpdateBanner() {
                     updatePlan() && !updatePlan()?.canAutoUpdate && !isExpanded() && !isProEdition()
                   }
                 >
-                  <span class="px-2 py-0.5 text-xs font-medium bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200 rounded">
+                  <span class="px-2 py-0.5 text-xs font-medium bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200 rounded-sm">
                     Manual steps required
                   </span>
                 </Show>
@@ -208,7 +208,7 @@ export function UpdateBanner() {
                     href={PRO_RELEASE_ACCESS_URL}
                     target="_blank"
                     rel="noopener noreferrer"
-                    class="px-3 py-1 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded transition-colors"
+                    class="px-3 py-1 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-sm transition-colors"
                   >
                     Update via Private Release Access →
                   </a>
@@ -239,7 +239,7 @@ export function UpdateBanner() {
               {/* Expand/Collapse button */}
               <button
                 onClick={() => setIsExpanded(!isExpanded())}
-                class="p-1 hover:bg-blue-100 dark:hover:bg-blue-800 rounded transition-colors"
+                class="p-1 hover:bg-blue-100 dark:hover:bg-blue-800 rounded-sm transition-colors"
                 title={isExpanded() ? 'Show less' : 'Show more'}
               >
                 <svg
@@ -256,7 +256,7 @@ export function UpdateBanner() {
               {/* Dismiss button */}
               <button
                 onClick={() => updateStore.dismissUpdate()}
-                class="p-1 hover:bg-blue-100 dark:hover:bg-blue-800 rounded transition-colors"
+                class="p-1 hover:bg-blue-100 dark:hover:bg-blue-800 rounded-sm transition-colors"
                 title="Dismiss this update"
               >
                 <svg
@@ -286,7 +286,7 @@ export function UpdateBanner() {
 
                 {/* What's new preview (customer-facing improvements or historical Highlights) */}
                 <Show when={highlightsHtml()}>
-                  <div class="mt-2 p-3 rounded-md border bg-blue-100 dark:bg-blue-950 border-blue-300 dark:border-blue-700 text-blue-800 dark:text-blue-200">
+                  <div class="mt-2 p-3 rounded-md border bg-blue-100 dark:bg-blue-950/25 border-blue-300 dark:border-blue-700 text-blue-800 dark:text-blue-200">
                     <div class="font-medium mb-1">
                       What's new in v
                       {normalizeReleaseVersion(updateStore.updateInfo()?.latestVersion)}
@@ -311,7 +311,7 @@ export function UpdateBanner() {
                 {/* Pro edition without auto-update: portal update path (the
                     community instructions below would strip Pro features) */}
                 <Show when={isProEdition() && updatePlan() && !updatePlan()?.canAutoUpdate}>
-                  <div class="mt-2 p-3 rounded-md border bg-blue-100 dark:bg-blue-950 border-blue-300 dark:border-blue-700 text-blue-800 dark:text-blue-200">
+                  <div class="mt-2 p-3 rounded-md border bg-blue-100 dark:bg-blue-950/25 border-blue-300 dark:border-blue-700 text-blue-800 dark:text-blue-200">
                     <div class="font-medium mb-1">Pulse Pro update</div>
                     <Show
                       when={updateStore.updateInfo()?.dockerUpdate}
@@ -365,7 +365,7 @@ export function UpdateBanner() {
                       href={PRO_RELEASE_ACCESS_URL}
                       target="_blank"
                       rel="noopener noreferrer"
-                      class="inline-block mt-2 underline hover:text-blue-900 dark:hover:text-blue-100"
+                      class="inline-block mt-2 underline hover:text-blue-900/25 dark:hover:text-blue-100"
                     >
                       Open Private Release Access →
                     </a>
@@ -384,13 +384,13 @@ export function UpdateBanner() {
                       updateStore.updateInfo()?.isPrerelease
                         ? 'bg-orange-50 dark:bg-orange-950 border-orange-300 dark:border-orange-700 text-orange-800 dark:text-orange-200'
                         : updateStore.updateInfo()?.isMajorUpgrade
-                          ? 'bg-amber-50 dark:bg-amber-950 border-amber-300 dark:border-amber-700 text-amber-800 dark:text-amber-200'
-                          : 'bg-blue-100 dark:bg-blue-950 border-blue-300 dark:border-blue-700 text-blue-800 dark:text-blue-200'
+                          ? 'bg-amber-50 dark:bg-amber-950/25 border-amber-300 dark:border-amber-700 text-amber-800 dark:text-amber-200'
+                          : 'bg-blue-100 dark:bg-blue-950/25 border-blue-300 dark:border-blue-700 text-blue-800 dark:text-blue-200'
                     }`}
                   >
                     <div class="flex items-start gap-2">
                       <svg
-                        class="w-4 h-4 mt-0.5 flex-shrink-0"
+                        class="w-4 h-4 mt-0.5 shrink-0"
                         fill="none"
                         stroke="currentColor"
                         viewBox="0 0 24 24"
@@ -420,14 +420,14 @@ export function UpdateBanner() {
                     <div class="space-y-2">
                       <For each={updatePlan()?.instructions || []}>
                         {(instruction, index) => (
-                          <div class="bg-surface-alt rounded border border-blue-200 dark:border-blue-700 p-2">
+                          <div class="bg-surface-alt rounded-sm border border-blue-200 dark:border-blue-700 p-2">
                             <div class="flex items-start justify-between gap-2">
                               <code class="text-xs text-base-content font-mono flex-1 break-all">
                                 {instruction}
                               </code>
                               <button
                                 onClick={() => handleCopy(instruction, index())}
-                                class="flex-shrink-0 p-1 hover:bg-blue-100 dark:hover:bg-blue-800 rounded transition-colors"
+                                class="shrink-0 p-1 hover:bg-blue-100 dark:hover:bg-blue-800 rounded-sm transition-colors"
                                 title="Copy to clipboard"
                               >
                                 <Show
@@ -476,7 +476,7 @@ export function UpdateBanner() {
                   <div class="mt-3 pt-3 border-t border-blue-200 dark:border-blue-800">
                     <button
                       onClick={handleApplyUpdate}
-                      class="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded transition-colors"
+                      class="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-sm transition-colors"
                     >
                       Apply Update Automatically
                     </button>
diff --git a/frontend-modern/src/components/UpdateConfirmationModal.tsx b/frontend-modern/src/components/UpdateConfirmationModal.tsx
index 9597d4ea25..0bc2efed7f 100644
--- a/frontend-modern/src/components/UpdateConfirmationModal.tsx
+++ b/frontend-modern/src/components/UpdateConfirmationModal.tsx
@@ -117,7 +117,7 @@ export function UpdateConfirmationModal(props: UpdateConfirmationModalProps) {
                   {(prerequisite) => (
                     <li class="flex items-start gap-2 text-sm text-base-content">
                       <AlertTriangleIcon
-                        class="mt-0.5 h-4 w-4 flex-shrink-0 text-amber-500"
+                        class="mt-0.5 h-4 w-4 shrink-0 text-amber-500"
                         aria-hidden="true"
                       />
                       <span>{prerequisite}</span>
@@ -159,7 +159,7 @@ export function UpdateConfirmationModal(props: UpdateConfirmationModalProps) {
                 type="checkbox"
                 checked={acknowledged()}
                 onChange={(e) => setAcknowledged(e.currentTarget.checked)}
-                class="mt-1 w-4 h-4 text-blue-600 bg-surface-alt rounded focus:ring-blue-500 focus:ring-2"
+                class="mt-1 w-4 h-4 text-blue-600 bg-surface-alt rounded-sm focus:ring-blue-500 focus:ring-2"
                 disabled={props.isApplying}
               />
               <span class="text-sm text-base-content">
diff --git a/frontend-modern/src/components/WhatsNewCard.tsx b/frontend-modern/src/components/WhatsNewCard.tsx
index 4d90f41a91..2f8e56e9da 100644
--- a/frontend-modern/src/components/WhatsNewCard.tsx
+++ b/frontend-modern/src/components/WhatsNewCard.tsx
@@ -123,7 +123,7 @@ export function WhatsNewCard() {
     <>
       <Show when={noticeVisible()}>
         <aside
-          class="fixed bottom-[var(--pulse-mobile-nav-height)] left-4 right-4 z-30 max-w-sm md:right-auto md:bottom-4"
+          class="fixed bottom-(--pulse-mobile-nav-height) left-4 right-4 z-30 max-w-sm md:right-auto md:bottom-4"
           aria-live="polite"
           data-testid="whats-new-notice"
         >
@@ -156,7 +156,7 @@ export function WhatsNewCard() {
                 <div class="flex items-center gap-3 min-w-0">
                   {/* Sparkle icon */}
                   <svg
-                    class="w-5 h-5 flex-shrink-0 text-emerald-600 dark:text-emerald-400"
+                    class="w-5 h-5 shrink-0 text-emerald-600 dark:text-emerald-400"
                     viewBox="0 0 24 24"
                     fill="none"
                     stroke="currentColor"
diff --git a/frontend-modern/src/components/Workloads/AvailabilityProbeSuggestionCard.tsx b/frontend-modern/src/components/Workloads/AvailabilityProbeSuggestionCard.tsx
index f2e3dedcb8..563c8e763f 100644
--- a/frontend-modern/src/components/Workloads/AvailabilityProbeSuggestionCard.tsx
+++ b/frontend-modern/src/components/Workloads/AvailabilityProbeSuggestionCard.tsx
@@ -58,7 +58,7 @@ export function AvailabilityProbeSuggestionCard(props: AvailabilityProbeSuggesti
             Availability Monitoring
           </h3>
         </div>
-        <span class="shrink-0 rounded bg-surface-alt px-1.5 py-0.5 text-[10px] font-medium text-muted">
+        <span class="shrink-0 rounded-sm bg-surface-alt px-1.5 py-0.5 text-[10px] font-medium text-muted">
           Suggested
         </span>
       </div>
@@ -84,7 +84,7 @@ export function AvailabilityProbeSuggestionCard(props: AvailabilityProbeSuggesti
             type="button"
             disabled={state() === 'creating'}
             onClick={handleCreate}
-            class="mt-2 w-full inline-flex items-center justify-center gap-1.5 rounded-md bg-emerald-600 px-3 py-1.5 text-[11px] font-semibold text-white hover:bg-emerald-700 disabled:opacity-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500"
+            class="mt-2 w-full inline-flex items-center justify-center gap-1.5 rounded-md bg-emerald-600 px-3 py-1.5 text-[11px] font-semibold text-white hover:bg-emerald-700 disabled:opacity-50 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-emerald-500"
           >
             <Show when={state() === 'creating'}>
               <Loader2 class="h-3 w-3 animate-spin" aria-hidden="true" />
diff --git a/frontend-modern/src/components/Workloads/DiskList.tsx b/frontend-modern/src/components/Workloads/DiskList.tsx
index 88afbf99c2..ae74147396 100644
--- a/frontend-modern/src/components/Workloads/DiskList.tsx
+++ b/frontend-modern/src/components/Workloads/DiskList.tsx
@@ -18,12 +18,12 @@ export function DiskList(props: DiskListProps) {
         <For each={diskPresentation()}>
           {(disk) => {
             return (
-              <div class="rounded border border-border bg-surface-hover px-1.5 py-1 text-[10px] leading-tight shadow-sm">
+              <div class="rounded-sm border border-border bg-surface-hover px-1.5 py-1 text-[10px] leading-tight shadow-xs">
                 <div class="truncate text-base-content" title={disk.labelTitle}>
                   {disk.label}
                 </div>
                 <div class="mt-0.5 text-[9px] text-muted">{disk.usageText}</div>
-                <div class="relative mt-1 h-1.5 w-full overflow-hidden rounded bg-surface-hover">
+                <div class="relative mt-1 h-1.5 w-full overflow-hidden rounded-sm bg-surface-hover">
                   <div
                     class={`absolute inset-y-0 left-0 ${disk.progressClass}`}
                     style={{ width: disk.progressWidth }}
diff --git a/frontend-modern/src/components/Workloads/DrawerDiskListCard.tsx b/frontend-modern/src/components/Workloads/DrawerDiskListCard.tsx
index f6c0ab67e1..4de0e0150d 100644
--- a/frontend-modern/src/components/Workloads/DrawerDiskListCard.tsx
+++ b/frontend-modern/src/components/Workloads/DrawerDiskListCard.tsx
@@ -55,7 +55,7 @@ interface DrawerDiskListCardProps {
 
 export function DrawerDiskListCard(props: DrawerDiskListCardProps) {
   return (
-    <InfoCardFrame class="basis-[calc(50%-0.75rem)] grow-[2]" data-testid={props.testId}>
+    <InfoCardFrame class="basis-[calc(50%-0.75rem)] grow-2" data-testid={props.testId}>
       <h3 class="mb-2 text-[11px] font-medium uppercase tracking-wide text-base-content">
         {props.title ?? 'Storage'}
       </h3>
@@ -78,9 +78,9 @@ export function DrawerDiskListCard(props: DrawerDiskListCardProps) {
                   </span>
                 </span>
               </div>
-              <div class="relative h-1.5 w-full overflow-hidden rounded bg-surface-hover">
+              <div class="relative h-1.5 w-full overflow-hidden rounded-sm bg-surface-hover">
                 <div
-                  class="absolute inset-y-0 left-0 rounded"
+                  class="absolute inset-y-0 left-0 rounded-sm"
                   style={{
                     width: `${Math.max(0, Math.min(100, disk.percent))}%`,
                     background: disk.color,
diff --git a/frontend-modern/src/components/Workloads/EnhancedCPUBar.tsx b/frontend-modern/src/components/Workloads/EnhancedCPUBar.tsx
index 91e0f1f7a5..bca20abbd3 100644
--- a/frontend-modern/src/components/Workloads/EnhancedCPUBar.tsx
+++ b/frontend-modern/src/components/Workloads/EnhancedCPUBar.tsx
@@ -17,7 +17,7 @@ export function EnhancedCPUBar(props: EnhancedCPUBarProps) {
   return (
     <div class="metric-text w-full h-4 flex items-center justify-center">
       <div
-        class="relative w-full h-full overflow-hidden bg-surface-hover rounded"
+        class="relative w-full h-full overflow-hidden bg-surface-hover rounded-sm"
         onMouseEnter={state.handleMouseEnter}
         onMouseLeave={state.handleMouseLeave}
       >
diff --git a/frontend-modern/src/components/Workloads/GuestDrawerHistory.tsx b/frontend-modern/src/components/Workloads/GuestDrawerHistory.tsx
index 427b7ec2f6..8d3c515018 100644
--- a/frontend-modern/src/components/Workloads/GuestDrawerHistory.tsx
+++ b/frontend-modern/src/components/Workloads/GuestDrawerHistory.tsx
@@ -355,7 +355,7 @@ const GuestDrawerHistoryGroupChart: Component<GuestDrawerHistoryGroupChartProps>
 
   return (
     <section
-      class="flex min-h-[154px] flex-col rounded-sm border border-border bg-surface p-2.5"
+      class="flex min-h-[154px] flex-col rounded-xs border border-border bg-surface p-2.5"
       data-testid="guest-history-group-chart"
       data-history-group={props.group.id}
     >
@@ -489,7 +489,7 @@ const GuestDrawerHistoryGroupChart: Component<GuestDrawerHistoryGroupChartProps>
               stroke="currentColor"
               stroke-dasharray="3 3"
               stroke-width="1"
-              class="text-base-content/50"
+              class=""
               vector-effect="non-scaling-stroke"
             />
             <For each={hoveredSeries()}>
@@ -509,12 +509,12 @@ const GuestDrawerHistoryGroupChart: Component<GuestDrawerHistoryGroupChartProps>
           </Show>
         </svg>
         <Show when={!hasStoredData() && !props.loading}>
-          <div class="absolute inset-x-8 inset-y-2 flex items-center justify-center rounded-sm bg-surface/80 text-xs text-muted">
+          <div class="absolute inset-x-8 inset-y-2 flex items-center justify-center rounded-xs text-xs text-muted">
             No stored history in this range
           </div>
         </Show>
         <Show when={props.loading}>
-          <div class="absolute inset-x-8 inset-y-2 flex items-center justify-center rounded-sm bg-surface/80 text-xs text-muted">
+          <div class="absolute inset-x-8 inset-y-2 flex items-center justify-center rounded-xs text-xs text-muted">
             Loading history
           </div>
         </Show>
@@ -583,7 +583,7 @@ const GuestDrawerHistoryGroupChart: Component<GuestDrawerHistoryGroupChartProps>
             max={observationTimes().length - 1}
             step="1"
             value={selectedIndex()}
-            class="h-11 w-full cursor-pointer rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 sm:h-6"
+            class="h-11 w-full cursor-pointer rounded-xs focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 sm:h-6"
             onFocus={() => {
               setHoverTimestamp(null);
               setSelectedTimestamp(observationTimes()[selectedIndex()] ?? null);
@@ -670,7 +670,7 @@ export const GuestDrawerHistory: Component<GuestDrawerHistoryProps> = (props) =>
         <Show
           when={!locked()}
           fallback={
-            <div class="rounded-sm border border-border bg-surface p-5 text-sm text-muted">
+            <div class="rounded-xs border border-border bg-surface p-5 text-sm text-muted">
               {formatRangeLabel(props.range)} history requires a higher license plan. This
               instance's plan retains {maxHistoryDays()} days.
             </div>
diff --git a/frontend-modern/src/components/Workloads/GuestPhysicalDisks.tsx b/frontend-modern/src/components/Workloads/GuestPhysicalDisks.tsx
index 2862228f12..a9c75d3db7 100644
--- a/frontend-modern/src/components/Workloads/GuestPhysicalDisks.tsx
+++ b/frontend-modern/src/components/Workloads/GuestPhysicalDisks.tsx
@@ -23,7 +23,7 @@ const GuestPhysicalDiskRow: Component<{ disk: Resource }> = (props) => {
 
   return (
     <details
-      class="rounded border border-border p-2"
+      class="rounded-sm border border-border p-2"
       onToggle={(event) => setExpanded(event.currentTarget.open)}
       data-testid="guest-physical-disk"
     >
diff --git a/frontend-modern/src/components/Workloads/GuestRow.tsx b/frontend-modern/src/components/Workloads/GuestRow.tsx
index 299d9e6875..16df105c4e 100644
--- a/frontend-modern/src/components/Workloads/GuestRow.tsx
+++ b/frontend-modern/src/components/Workloads/GuestRow.tsx
@@ -739,7 +739,7 @@ export function GuestRow(props: GuestRowProps) {
                   <span class="text-xs text-muted truncate max-w-[80px]" title={props.guest.node}>
                     {props.guest.node}
                   </span>
-                  <span class="rounded px-1.5 py-0.5 text-[10px] font-medium whitespace-nowrap bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300">
+                  <span class="rounded-sm px-1.5 py-0.5 text-[10px] font-medium whitespace-nowrap bg-blue-100 text-blue-700 dark:bg-blue-900/25 dark:text-blue-300">
                     {clusterName()}
                   </span>
                 </Show>
diff --git a/frontend-modern/src/components/Workloads/GuestRowCells.tsx b/frontend-modern/src/components/Workloads/GuestRowCells.tsx
index 060aa61e3e..9bcc470f3e 100644
--- a/frontend-modern/src/components/Workloads/GuestRowCells.tsx
+++ b/frontend-modern/src/components/Workloads/GuestRowCells.tsx
@@ -16,7 +16,7 @@ import {
 function BackupShieldIcon(props: { icon: 'check' | 'warning' | 'x' | 'running'; pulse?: boolean }) {
   return (
     <svg
-      class="h-3.5 w-3.5 flex-shrink-0"
+      class="h-3.5 w-3.5 shrink-0"
       classList={{ 'animate-pulse': props.pulse }}
       viewBox="0 0 24 24"
       fill="none"
@@ -65,11 +65,7 @@ function BackupIndicator(props: {
   });
 
   return (
-    <span
-      class={`flex-shrink-0 ${config().color}`}
-      title={tooltipText()}
-      aria-label={tooltipText()}
-    >
+    <span class={`shrink-0 ${config().color}`} title={tooltipText()} aria-label={tooltipText()}>
       <BackupShieldIcon icon={config().icon} pulse={displayStatus() === 'running'} />
     </span>
   );
@@ -90,7 +86,7 @@ function getBackupAgeBadgeLabel(
 
 function getBackupAgeBadgeClass(status: WorkloadsGuestBackupDisplayStatus): string {
   const layout =
-    'inline-flex h-5 min-w-[3.25rem] items-center justify-center gap-1 px-1.5 text-[10px] font-semibold leading-none tabular-nums cursor-help';
+    'inline-flex h-5 min-w-13 items-center justify-center gap-1 px-1.5 text-[10px] font-semibold leading-none tabular-nums cursor-help';
   // A healthy backup only needs its shield. Existing backups that cross an age
   // threshold remain amber because age is a policy-relative caution, while red
   // is reserved for the materially different state where no backup exists.
@@ -456,7 +452,7 @@ function AvailabilityProbeCell(props: { presentation: AvailabilityProbePresentat
   return (
     <Show when={badgeText()}>
       <span
-        class={`inline-flex items-center rounded px-1 py-0.5 text-[9px] font-semibold leading-none whitespace-nowrap ${p().toneClassName}`}
+        class={`inline-flex items-center rounded-sm px-1 py-0.5 text-[9px] font-semibold leading-none whitespace-nowrap ${p().toneClassName}`}
         title={p().rowLabel}
       >
         {badgeText()}
diff --git a/frontend-modern/src/components/Workloads/MetricMiniSparkline.tsx b/frontend-modern/src/components/Workloads/MetricMiniSparkline.tsx
index fedfad0d24..82a31611e0 100644
--- a/frontend-modern/src/components/Workloads/MetricMiniSparkline.tsx
+++ b/frontend-modern/src/components/Workloads/MetricMiniSparkline.tsx
@@ -172,7 +172,7 @@ export const MetricMiniSparkline: Component<MetricMiniSparklineProps> = (props)
         </Show>
       </svg>
       <Show when={showInlineValue()}>
-        <span class="block max-w-[5.5rem] overflow-hidden text-ellipsis whitespace-nowrap text-right text-[10px] font-medium tabular-nums text-base-content">
+        <span class="block max-w-22 overflow-hidden text-ellipsis whitespace-nowrap text-right text-[10px] font-medium tabular-nums text-base-content">
           {displayLabel()}
         </span>
       </Show>
diff --git a/frontend-modern/src/components/Workloads/StackedDiskBar.tsx b/frontend-modern/src/components/Workloads/StackedDiskBar.tsx
index 6c1f78d5fe..d50486f26b 100644
--- a/frontend-modern/src/components/Workloads/StackedDiskBar.tsx
+++ b/frontend-modern/src/components/Workloads/StackedDiskBar.tsx
@@ -26,7 +26,7 @@ export function StackedDiskBar(props: StackedDiskBarProps) {
             fallback={
               <div
                 data-stacked-disk-trigger
-                class="relative w-full h-full overflow-hidden bg-surface-hover rounded"
+                class="relative w-full h-full overflow-hidden bg-surface-hover rounded-sm"
                 onMouseEnter={state.handleMouseEnter}
                 onMouseLeave={state.handleMouseLeave}
               >
@@ -158,7 +158,7 @@ export function StackedDiskBar(props: StackedDiskBarProps) {
                 <For each={presentation().miniDisks}>
                   {(disk) => (
                     <div
-                      class="relative min-w-0 flex-1 overflow-hidden rounded-sm bg-surface-alt"
+                      class="relative min-w-0 flex-1 overflow-hidden rounded-xs bg-surface-alt"
                       title={disk.title}
                     >
                       <svg
@@ -200,12 +200,12 @@ export function StackedDiskBar(props: StackedDiskBarProps) {
             <For each={presentation().verticalBars}>
               {(bar) => (
                 <div
-                  class="group/disk relative h-full w-[5px] shrink-0 cursor-help overflow-hidden rounded-sm bg-surface-hover ring-1 ring-transparent transition-[transform,box-shadow,ring-color] duration-100 hover:scale-y-[1.08] hover:ring-base-content/30"
+                  class="group/disk relative h-full w-[5px] shrink-0 cursor-help overflow-hidden rounded-xs bg-surface-hover ring-1 ring-transparent transition-[transform,box-shadow,ring-color] duration-100 hover:scale-y-[1.08]"
                   title={bar.title}
                 >
                   <div
                     data-stacked-disk-fill="vertical"
-                    class="absolute inset-0 rounded-sm brightness-100 transition-[filter] duration-100 group-hover/disk:brightness-125"
+                    class="absolute inset-0 rounded-xs brightness-100 transition-[filter] duration-100 group-hover/disk:brightness-125"
                   >
                     <svg
                       aria-hidden="true"
@@ -262,7 +262,7 @@ export function StackedDiskBar(props: StackedDiskBarProps) {
                     {item.used}/{item.total}
                   </span>
                 </div>
-                <div class="relative h-1.5 w-full overflow-hidden rounded bg-surface-hover">
+                <div class="relative h-1.5 w-full overflow-hidden rounded-sm bg-surface-hover">
                   <svg
                     aria-hidden="true"
                     class="absolute inset-0 h-full w-full"
diff --git a/frontend-modern/src/components/Workloads/StackedMemoryBar.test.tsx b/frontend-modern/src/components/Workloads/StackedMemoryBar.test.tsx
index 456c35442f..938a9b5383 100644
--- a/frontend-modern/src/components/Workloads/StackedMemoryBar.test.tsx
+++ b/frontend-modern/src/components/Workloads/StackedMemoryBar.test.tsx
@@ -235,8 +235,7 @@ describe('StackedMemoryBar', () => {
     // Should show sublabel in parentheses with bytes format
     const sublabel = screen.getByText(/4\.00 GB/);
     expect(sublabel).toBeInTheDocument();
-    expect(sublabel).toHaveClass('text-base-content/80');
-    expect(sublabel.parentElement).toHaveClass('bg-surface/80', 'shadow-sm');
+    expect(sublabel.parentElement).toHaveClass('shadow-xs');
   });
 
   it('hides sublabel when container is too narrow', () => {
diff --git a/frontend-modern/src/components/Workloads/StackedMemoryBar.tsx b/frontend-modern/src/components/Workloads/StackedMemoryBar.tsx
index 78e5ea94cb..d4fd470e9a 100644
--- a/frontend-modern/src/components/Workloads/StackedMemoryBar.tsx
+++ b/frontend-modern/src/components/Workloads/StackedMemoryBar.tsx
@@ -18,7 +18,7 @@ export function StackedMemoryBar(props: StackedMemoryBarProps) {
       class="metric-text w-full h-4 flex items-center justify-center"
     >
       <div
-        class="relative w-full h-full overflow-hidden bg-surface-hover rounded"
+        class="relative w-full h-full overflow-hidden bg-surface-hover rounded-sm"
         onMouseEnter={state.handleMouseEnter}
         onMouseLeave={state.handleMouseLeave}
       >
@@ -70,7 +70,7 @@ export function StackedMemoryBar(props: StackedMemoryBarProps) {
         </svg>
 
         <span class="absolute inset-0 flex items-center justify-center text-[10px] font-semibold text-base-content leading-none pointer-events-none min-w-0 overflow-hidden">
-          <span class="max-w-full min-w-0 whitespace-nowrap overflow-hidden text-ellipsis rounded-sm bg-surface/80 px-1 text-center shadow-sm">
+          <span class="max-w-full min-w-0 whitespace-nowrap overflow-hidden text-ellipsis rounded-xs px-1 text-center shadow-xs">
             <span>
               <Show
                 when={!presentation().unavailable}
@@ -80,10 +80,7 @@ export function StackedMemoryBar(props: StackedMemoryBarProps) {
               </Show>
             </span>
             <Show when={presentation().showSublabel}>
-              <span class="metric-sublabel font-normal text-base-content/80">
-                {' '}
-                ({presentation().displaySublabel})
-              </span>
+              <span class="metric-sublabel font-normal"> ({presentation().displaySublabel})</span>
             </Show>
             <Show when={presentation().anomalyDescription && presentation().anomalyRatio}>
               <span
diff --git a/frontend-modern/src/components/Workloads/ThresholdSlider.tsx b/frontend-modern/src/components/Workloads/ThresholdSlider.tsx
index 6307078ddc..520895ff1e 100644
--- a/frontend-modern/src/components/Workloads/ThresholdSlider.tsx
+++ b/frontend-modern/src/components/Workloads/ThresholdSlider.tsx
@@ -15,11 +15,11 @@ export function ThresholdSlider(props: ThresholdSliderProps) {
       style={{ 'touch-action': state.isDragging() ? 'none' : 'auto' }}
     >
       {/* Track background */}
-      <div class="absolute inset-0 h-3.5 rounded bg-surface-hover"></div>
+      <div class="absolute inset-0 h-3.5 rounded-sm bg-surface-hover"></div>
 
       {/* Colored fill */}
       <div
-        class={`absolute left-0 h-3.5 rounded ${getThresholdSliderFillClass(props.type)}`}
+        class={`absolute left-0 h-3.5 rounded-sm ${getThresholdSliderFillClass(props.type)}`}
         style={{ width: `${state.thumbPosition()}%` }}
       ></div>
 
@@ -48,7 +48,7 @@ export function ThresholdSlider(props: ThresholdSliderProps) {
         }}
       >
         <div class="relative">
-          <div class="w-9 h-4 bg-surface rounded-full shadow-sm border-2 border-current flex items-center justify-center">
+          <div class="w-9 h-4 bg-surface rounded-full shadow-xs border-2 border-current flex items-center justify-center">
             <span class="text-[9px] font-semibold">{state.sliderLabel()}</span>
           </div>
         </div>
diff --git a/frontend-modern/src/components/Workloads/WorkloadPanel.tsx b/frontend-modern/src/components/Workloads/WorkloadPanel.tsx
index 9042e6be52..dcd3c1da11 100644
--- a/frontend-modern/src/components/Workloads/WorkloadPanel.tsx
+++ b/frontend-modern/src/components/Workloads/WorkloadPanel.tsx
@@ -84,7 +84,7 @@ type WorkloadPanelProps = Pick<
 
 const GROUP_NODE_METRIC_CELL_CLASS = 'px-1.5 sm:px-2 py-0.5 align-middle';
 const GROUP_NODE_NAME_CELL_CLASS = getGroupedTableRowCellClass(
-  '!py-1 !pl-2 sm:!pl-3 !pr-1.5 sm:!pr-2',
+  'py-1! pl-2! sm:pl-3! pr-1.5! sm:pr-2!',
 );
 
 const getGroupNodeColumnCellClass = (_columnId: string, isNameColumn: boolean): string => {
@@ -203,7 +203,7 @@ export function WorkloadPanel(props: WorkloadPanelProps) {
         return (
           <div class="flex justify-center">
             <span
-              class="inline-flex items-center px-1 py-0.5 text-[10px] font-medium rounded whitespace-nowrap bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300"
+              class="inline-flex items-center px-1 py-0.5 text-[10px] font-medium rounded-sm whitespace-nowrap bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300"
               title="Proxmox VE node"
             >
               PVE
@@ -365,8 +365,8 @@ export function WorkloadPanel(props: WorkloadPanelProps) {
   return (
     <TableBody ref={props.setTableBodyRef} class="divide-y divide-border">
       <Show when={props.groupedWindowing.isWindowed() && props.topSpacerHeight() > 0}>
-        <TableRow aria-hidden="true" class="h-0 !border-0">
-          <TableCell colspan={props.totalColumns()} class="h-0 !p-0 !border-0 leading-[0]">
+        <TableRow aria-hidden="true" class="h-0 border-0!">
+          <TableCell colspan={props.totalColumns()} class="h-0 p-0! border-0! leading-0">
             <svg
               aria-hidden="true"
               width="1"
@@ -644,8 +644,8 @@ export function WorkloadPanel(props: WorkloadPanelProps) {
         }}
       </For>
       <Show when={props.groupedWindowing.isWindowed() && props.bottomSpacerHeight() > 0}>
-        <TableRow aria-hidden="true" class="h-0 !border-0">
-          <TableCell colspan={props.totalColumns()} class="h-0 !p-0 !border-0 leading-[0]">
+        <TableRow aria-hidden="true" class="h-0 border-0!">
+          <TableCell colspan={props.totalColumns()} class="h-0 p-0! border-0! leading-0">
             <svg
               aria-hidden="true"
               width="1"
diff --git a/frontend-modern/src/components/Workloads/WorkloadsFilter.tsx b/frontend-modern/src/components/Workloads/WorkloadsFilter.tsx
index 000086fb70..75814e225a 100644
--- a/frontend-modern/src/components/Workloads/WorkloadsFilter.tsx
+++ b/frontend-modern/src/components/Workloads/WorkloadsFilter.tsx
@@ -418,7 +418,7 @@ export const WorkloadsFilter: Component<WorkloadsFilterProps> = (props) => {
                 Summary
               </div>
               <ChartVisibilityToggleButton
-                class="!inline-flex"
+                class="inline-flex!"
                 collapsed={props.chartsCollapsed?.() ?? false}
                 onToggle={() => props.onChartsToggle?.()}
               />
@@ -458,7 +458,7 @@ export const WorkloadsFilter: Component<WorkloadsFilterProps> = (props) => {
           <div class="flex items-center gap-2">
             <Show when={props.metricHistoryHintVisible?.()}>
               <span
-                class="hidden whitespace-nowrap text-[11px] text-muted/80 lg:inline"
+                class="hidden whitespace-nowrap text-[11px] lg:inline"
                 data-testid="workload-history-hover-hint"
               >
                 Hover a guest to preview history
diff --git a/frontend-modern/src/components/Workloads/WorkloadsSurface.tsx b/frontend-modern/src/components/Workloads/WorkloadsSurface.tsx
index 448211f620..d1d5824bce 100644
--- a/frontend-modern/src/components/Workloads/WorkloadsSurface.tsx
+++ b/frontend-modern/src/components/Workloads/WorkloadsSurface.tsx
@@ -61,7 +61,7 @@ function WorkloadInventoryIssueList(props: { issues: readonly WorkloadInventoryS
                   </p>
                   <p class="text-sm leading-6 text-muted">{issue.description}</p>
                 </div>
-                <span class="shrink-0 rounded bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700 dark:bg-amber-950 dark:text-amber-200">
+                <span class="shrink-0 rounded-sm bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700 dark:bg-amber-950/25 dark:text-amber-200">
                   {issue.coverageLabel}
                 </span>
               </div>
@@ -124,7 +124,7 @@ export function WorkloadsSurface(props: WorkloadsSurfaceComponentProps) {
             label="Back to top"
             tone="outline"
             size="lg"
-            class="fixed right-3 bottom-[calc(var(--pulse-mobile-nav-height)+0.75rem)] z-[70] !h-11 !w-11 rounded-full bg-surface/95 shadow-lg backdrop-blur-sm xl:right-6 xl:bottom-6"
+            class="fixed right-3 bottom-[calc(var(--pulse-mobile-nav-height)+0.75rem)] z-70 h-11! w-11! rounded-full shadow-lg backdrop-blur-xs xl:right-6 xl:bottom-6"
             data-testid="workloads-scroll-to-top"
             onClick={() => state.scrollToTop?.()}
           >
diff --git a/frontend-modern/src/components/Workloads/WorkloadsTable.tsx b/frontend-modern/src/components/Workloads/WorkloadsTable.tsx
index 42634d259a..4879760192 100644
--- a/frontend-modern/src/components/Workloads/WorkloadsTable.tsx
+++ b/frontend-modern/src/components/Workloads/WorkloadsTable.tsx
@@ -10,7 +10,7 @@ import type { WorkloadsState } from './useWorkloadsState';
 import { WorkloadPanel } from './WorkloadPanel';
 import { WorkloadTableHeader } from './WorkloadTableHeader';
 
-export const WORKLOAD_TABLE_MOBILE_MIN_WIDTH_CLASS = 'min-w-[0px]';
+export const WORKLOAD_TABLE_MOBILE_MIN_WIDTH_CLASS = 'min-w-0';
 
 type WorkloadsTableProps = Pick<
   WorkloadsState,
diff --git a/frontend-modern/src/components/Workloads/__tests__/GuestDrawerOverview.filesystems.test.tsx b/frontend-modern/src/components/Workloads/__tests__/GuestDrawerOverview.filesystems.test.tsx
index 38e5e81bce..69a89b4926 100644
--- a/frontend-modern/src/components/Workloads/__tests__/GuestDrawerOverview.filesystems.test.tsx
+++ b/frontend-modern/src/components/Workloads/__tests__/GuestDrawerOverview.filesystems.test.tsx
@@ -88,7 +88,7 @@ describe('GuestDrawerOverview filesystem labels', () => {
     for (const path of paths) {
       const label = screen.getByText(path);
       expect(label.tagName).toBe('SPAN');
-      expect(label).toHaveClass('whitespace-normal', '[overflow-wrap:anywhere]');
+      expect(label).toHaveClass('whitespace-normal', 'wrap-anywhere');
       expect(label.closest('td')).toHaveAttribute('colspan', '2');
     }
     expect(
diff --git a/frontend-modern/src/components/Workloads/__tests__/WorkloadsSurface.performance.contract.test.tsx b/frontend-modern/src/components/Workloads/__tests__/WorkloadsSurface.performance.contract.test.tsx
index 2bd43bdb70..961906663b 100644
--- a/frontend-modern/src/components/Workloads/__tests__/WorkloadsSurface.performance.contract.test.tsx
+++ b/frontend-modern/src/components/Workloads/__tests__/WorkloadsSurface.performance.contract.test.tsx
@@ -934,7 +934,7 @@ describe('Workloads performance contract', () => {
       expect(groupedTableWindowingSource).toContain('targetRunway');
       expect(groupedTableWindowingSource).toContain('trailingRunway');
       expect(workloadPanelSource).toContain('groupGuests()[0] === fullGroupGuests()[0]');
-      expect(workloadPanelSource).toContain('class="h-0 !p-0 !border-0 leading-[0]"');
+      expect(workloadPanelSource).toContain('class="h-0 p-0! border-0! leading-0"');
       expect(workloadPanelSource).toContain('<For each={props.visibleGroupKeys()}');
       expect(workloadPanelSource).toContain('<For each={groupGuestIds()}');
       expect(workloadPanelSource).toContain('groupGuests().map(getCanonicalWorkloadId)');
@@ -1666,8 +1666,8 @@ describe('Workloads performance contract', () => {
       expect(guestDrawerOverviewSource).toContain('TechnicalDetailsSection');
       expect(nodeDrawerOverviewSource).toContain('TechnicalDetailsSection');
       const retiredInfoCardFrameClass = [
-        'rounded border border-border',
-        'bg-surface p-3 shadow-sm',
+        'rounded-sm border border-border',
+        'bg-surface p-3 shadow-xs',
       ].join(' ');
       expect(guestDrawerOverviewSource).not.toContain(retiredInfoCardFrameClass);
       expect(nodeDrawerOverviewSource).not.toContain(retiredInfoCardFrameClass);
@@ -1687,7 +1687,7 @@ describe('Workloads performance contract', () => {
       expect(workloadsWorkloadTableSource).not.toContain('style={{');
       expect(workloadsWorkloadTableSource).toContain('style={getGuestColumnWidthStyle(');
       expect(workloadsWorkloadTableSource).toContain(
-        "WORKLOAD_TABLE_MOBILE_MIN_WIDTH_CLASS = 'min-w-[0px]'",
+        "WORKLOAD_TABLE_MOBILE_MIN_WIDTH_CLASS = 'min-w-0'",
       );
       expect(workloadsWorkloadTableSource).toContain('workload-table--mobile');
       expect(workloadsWorkloadTableSource).toContain('WORKLOAD_TABLE_MOBILE_MIN_WIDTH_CLASS');
diff --git a/frontend-modern/src/components/Workloads/useGuestRowState.ts b/frontend-modern/src/components/Workloads/useGuestRowState.ts
index 1e32f41963..6034b22b98 100644
--- a/frontend-modern/src/components/Workloads/useGuestRowState.ts
+++ b/frontend-modern/src/components/Workloads/useGuestRowState.ts
@@ -256,16 +256,16 @@ export function useGuestRowState(props: GuestRowProps) {
     const base = 'transition-all duration-200 relative group cursor-pointer';
 
     if (props.isExpanded) {
-      return `${base} bg-blue-50 dark:bg-blue-900 z-10 hover:shadow-sm`;
+      return `${base} bg-blue-50 dark:bg-blue-900/25 z-10 hover:shadow-xs`;
     }
 
-    const hover = 'hover:shadow-sm';
+    const hover = 'hover:shadow-xs';
     const alertBg = hasUnacknowledgedAlert()
       ? props.alertStyles?.severity === 'critical'
-        ? 'bg-red-50 dark:bg-red-950'
+        ? 'bg-red-50 dark:bg-red-950/25'
         : props.alertStyles?.severity === 'info'
-          ? 'bg-blue-50 dark:bg-blue-950'
-          : 'bg-yellow-50 dark:bg-yellow-950'
+          ? 'bg-blue-50 dark:bg-blue-950/25'
+          : 'bg-yellow-50 dark:bg-yellow-950/25'
       : '';
     const defaultHover = hasUnacknowledgedAlert() ? '' : 'hover:bg-surface-hover';
     const stoppedDimming = !isRunning() ? 'opacity-60' : '';
diff --git a/frontend-modern/src/components/__tests__/CommercialMigrationBanner.test.tsx b/frontend-modern/src/components/__tests__/CommercialMigrationBanner.test.tsx
index 55a3c72461..ec89a44daf 100644
--- a/frontend-modern/src/components/__tests__/CommercialMigrationBanner.test.tsx
+++ b/frontend-modern/src/components/__tests__/CommercialMigrationBanner.test.tsx
@@ -73,13 +73,13 @@ describe('CommercialMigrationBanner', () => {
     expect(commercialMigrationBannerSource).not.toContain('toneClasses');
     expect(commercialMigrationBannerSource).not.toContain('buttonClasses');
     expect(commercialMigrationBannerSource).not.toContain(
-      'bg-amber-50 dark:bg-amber-900 border-b border-amber-200',
+      'bg-amber-50 dark:bg-amber-900/25 border-b border-amber-200',
     );
     expect(commercialMigrationBannerSource).not.toContain(
-      'bg-red-50 dark:bg-red-900 border-b border-red-200',
+      'bg-red-50 dark:bg-red-900/25 border-b border-red-200',
     );
     expect(commercialMigrationBannerSource).not.toContain(
-      'p-1 rounded transition-colors opacity-70 hover:opacity-100',
+      'p-1 rounded-sm transition-colors opacity-70 hover:opacity-100',
     );
   });
 
diff --git a/frontend-modern/src/components/__tests__/DemoBanner.test.tsx b/frontend-modern/src/components/__tests__/DemoBanner.test.tsx
index 9c25e08cd6..4f34b9a4b9 100644
--- a/frontend-modern/src/components/__tests__/DemoBanner.test.tsx
+++ b/frontend-modern/src/components/__tests__/DemoBanner.test.tsx
@@ -40,10 +40,10 @@ describe('DemoBanner', () => {
     expect(demoBannerSource).toContain('lucide-solid/icons/info');
     expect(demoBannerSource).not.toContain('<svg');
     expect(demoBannerSource).not.toContain(
-      'bg-blue-50 dark:bg-blue-900 border-b border-blue-200 dark:border-blue-800',
+      'bg-blue-50 dark:bg-blue-900/25 border-b border-blue-200 dark:border-blue-800',
     );
     expect(demoBannerSource).not.toContain(
-      'p-1 hover:bg-blue-100 dark:hover:bg-blue-800 rounded text-blue-600',
+      'p-1 hover:bg-blue-100 dark:hover:bg-blue-800 rounded-sm text-blue-600',
     );
   });
 
diff --git a/frontend-modern/src/components/__tests__/ErrorBoundary.test.tsx b/frontend-modern/src/components/__tests__/ErrorBoundary.test.tsx
index c16aa21b9b..e8d3a68ece 100644
--- a/frontend-modern/src/components/__tests__/ErrorBoundary.test.tsx
+++ b/frontend-modern/src/components/__tests__/ErrorBoundary.test.tsx
@@ -97,9 +97,9 @@ describe('ErrorBoundary', () => {
     expect(errorBoundarySource).toContain('lucide-solid/icons/alert-triangle');
     expect(errorBoundarySource).not.toContain('<svg');
     expect(errorBoundarySource).not.toContain(
-      'px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700',
+      'px-4 py-2 bg-blue-600 text-white rounded-sm hover:bg-blue-700',
     );
-    expect(errorBoundarySource).not.toContain('bg-red-50 dark:bg-red-900 border border-red-200');
+    expect(errorBoundarySource).not.toContain('bg-red-50 dark:bg-red-900/25 border border-red-200');
   });
 
   /* ---------- Logs error via logError ---------- */
diff --git a/frontend-modern/src/components/__tests__/GitHubStarBanner.test.tsx b/frontend-modern/src/components/__tests__/GitHubStarBanner.test.tsx
index f05626565f..1f18b93658 100644
--- a/frontend-modern/src/components/__tests__/GitHubStarBanner.test.tsx
+++ b/frontend-modern/src/components/__tests__/GitHubStarBanner.test.tsx
@@ -195,7 +195,7 @@ describe('GitHubStarBanner', () => {
 
 describe('GitHubStarBanner mobile navigation clearance', () => {
   it('reads the published bottom navigation height', () => {
-    expect(gitHubStarBannerSource).toContain('bottom-[var(--pulse-mobile-nav-height)]');
+    expect(gitHubStarBannerSource).toContain('bottom-(--pulse-mobile-nav-height)');
   });
 
   it('does not keep its own copy of the bar height', () => {
diff --git a/frontend-modern/src/components/__tests__/UpdateConfirmationModal.test.tsx b/frontend-modern/src/components/__tests__/UpdateConfirmationModal.test.tsx
index fb4563ec18..f638dae12a 100644
--- a/frontend-modern/src/components/__tests__/UpdateConfirmationModal.test.tsx
+++ b/frontend-modern/src/components/__tests__/UpdateConfirmationModal.test.tsx
@@ -52,10 +52,10 @@ describe('UpdateConfirmationModal', () => {
     expect(updateConfirmationModalSource).toContain('lucide-solid/icons/arrow-right');
     expect(updateConfirmationModalSource).not.toContain('<svg');
     expect(updateConfirmationModalSource).not.toContain(
-      'bg-blue-50 dark:bg-blue-900 border border-blue-200',
+      'bg-blue-50 dark:bg-blue-900/25 border border-blue-200',
     );
     expect(updateConfirmationModalSource).not.toContain(
-      'bg-yellow-50 dark:bg-yellow-900 border border-yellow-200',
+      'bg-yellow-50 dark:bg-yellow-900/25 border border-yellow-200',
     );
     expect(updateConfirmationModalSource).not.toContain(
       'px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors',
diff --git a/frontend-modern/src/components/patrol/ApprovalBanner.tsx b/frontend-modern/src/components/patrol/ApprovalBanner.tsx
index 24801a2916..266261292a 100644
--- a/frontend-modern/src/components/patrol/ApprovalBanner.tsx
+++ b/frontend-modern/src/components/patrol/ApprovalBanner.tsx
@@ -51,16 +51,16 @@ export const ApprovalBanner: Component = () => {
 
   return (
     <Show when={pending().length > 0}>
-      <div class="bg-amber-50 dark:bg-amber-900 border border-amber-200 dark:border-amber-800 rounded-md px-4 py-3">
+      <div class="bg-amber-50 dark:bg-amber-900/25 border border-amber-200 dark:border-amber-800 rounded-md px-4 py-3">
         <div class="flex items-center justify-between gap-3 flex-wrap">
           <div class="flex items-center gap-3">
-            <div class="flex-shrink-0 p-1.5 border border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-900 rounded-md">
+            <div class="shrink-0 p-1.5 border border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-900/25 rounded-md">
               <ShieldAlertIcon class="w-4 h-4 text-amber-500 dark:text-amber-400" />
             </div>
             <div>
               <Show when={pending().length === 1 && firstApproval()}>
                 <div class="flex items-center gap-2 flex-wrap">
-                  <span class="text-sm font-medium text-amber-900 dark:text-amber-100">
+                  <span class="text-sm font-medium text-amber-900/25 dark:text-amber-100">
                     Action awaiting approval
                   </span>
                   <MetadataBadge
@@ -81,7 +81,7 @@ export const ApprovalBanner: Component = () => {
                 </p>
               </Show>
               <Show when={pending().length > 1}>
-                <span class="text-sm font-medium text-amber-900 dark:text-amber-100">
+                <span class="text-sm font-medium text-amber-900/25 dark:text-amber-100">
                   {pending().length} actions awaiting your approval
                 </span>
               </Show>
diff --git a/frontend-modern/src/components/patrol/ApprovalSection.tsx b/frontend-modern/src/components/patrol/ApprovalSection.tsx
index 945171ea06..76526e3da3 100644
--- a/frontend-modern/src/components/patrol/ApprovalSection.tsx
+++ b/frontend-modern/src/components/patrol/ApprovalSection.tsx
@@ -226,7 +226,7 @@ export const ApprovalSection: Component<ApprovalSectionProps> = (props) => {
                   </div>
 
                   <Show when={(preflight()?.safetyChecks?.length || 0) > 0}>
-                    <details class="rounded border border-border bg-surface-alt px-2 py-1.5 text-xs">
+                    <details class="rounded-sm border border-border bg-surface-alt px-2 py-1.5 text-xs">
                       <summary class="cursor-pointer font-medium text-muted">
                         Safety and verification
                       </summary>
@@ -259,7 +259,7 @@ export const ApprovalSection: Component<ApprovalSectionProps> = (props) => {
                   <Show when={!reviewedPlanHash()}>
                     <div
                       role="alert"
-                      class="rounded border border-amber-300 bg-amber-50 p-2 text-sm text-amber-900 dark:bg-amber-950/40 dark:text-amber-200"
+                      class="rounded-sm border border-amber-300 bg-amber-50 p-2 text-sm text-amber-900/25 dark:bg-amber-950/40 dark:text-amber-200"
                     >
                       This action has no reviewed plan identity. Create a new plan before approving
                       or running it.
diff --git a/frontend-modern/src/components/patrol/InvestigationMessages.tsx b/frontend-modern/src/components/patrol/InvestigationMessages.tsx
index f5ede3cb54..22da36ae1e 100644
--- a/frontend-modern/src/components/patrol/InvestigationMessages.tsx
+++ b/frontend-modern/src/components/patrol/InvestigationMessages.tsx
@@ -15,7 +15,7 @@ import { ToolExecutionBlock } from '@/components/AI/Chat/ToolExecutionBlock';
 // Compact variant of the Assistant chat's markdown styling, scaled for the
 // investigation thread's text-xs bubbles.
 const investigationMarkdownClass =
-  'text-xs prose prose-slate prose-sm dark:prose-invert max-w-none break-words prose-p:leading-relaxed prose-p:my-1.5 prose-pre:bg-slate-900 prose-pre:text-slate-100 prose-pre:rounded-md prose-pre:text-[10px] prose-pre:border prose-pre:border-slate-800 prose-code:text-blue-700 dark:prose-code:text-blue-300 prose-code:bg-blue-50 dark:prose-code:bg-blue-900 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:font-mono prose-code:text-[0.9em] prose-code:before:content-none prose-code:after:content-none prose-headings:font-semibold prose-headings:my-2 prose-ul:my-1.5 prose-ol:my-1.5 prose-li:my-0.5';
+  'text-xs prose prose-slate prose-sm dark:prose-invert max-w-none wrap-break-word prose-p:leading-relaxed prose-p:my-1.5 prose-pre:bg-slate-900 prose-pre:text-slate-100 prose-pre:rounded-md prose-pre:text-[10px] prose-pre:border prose-pre:border-slate-800 prose-code:text-blue-700 dark:prose-code:text-blue-300 prose-code:bg-blue-50 dark:prose-code:bg-blue-900/25 prose-code:px-1 prose-code:py-0.5 prose-code:rounded-sm prose-code:font-mono prose-code:text-[0.9em] prose-code:before:content-none prose-code:after:content-none prose-headings:font-semibold prose-headings:my-2 prose-ul:my-1.5 prose-ol:my-1.5 prose-li:my-0.5';
 
 interface InvestigationMessagesProps {
   findingId: string;
@@ -60,7 +60,7 @@ export const InvestigationMessages: Component<InvestigationMessagesProps> = (pro
       </Show>
 
       <Show when={!messages.loading && messages() && messages()!.length > 0}>
-        <div class="space-y-2 max-h-80 overflow-y-auto rounded border border-border p-2 bg-surface-alt">
+        <div class="space-y-2 max-h-80 overflow-y-auto rounded-sm border border-border p-2 bg-surface-alt">
           <For each={messages()}>
             {(msg: ChatMessage) => {
               if (isEmptyMessage(msg)) return null;
@@ -70,7 +70,7 @@ export const InvestigationMessages: Component<InvestigationMessagesProps> = (pro
                   <div
                     class={`max-w-[85%] rounded-md px-3 py-2 ${
                       msg.role === 'user'
-                        ? 'bg-blue-100 dark:bg-blue-900 text-blue-900 dark:text-blue-100'
+                        ? 'bg-blue-100 dark:bg-blue-900/25 text-blue-900/25 dark:text-blue-100'
                         : msg.role === 'system'
                           ? 'bg-surface-alt text-muted text-xs'
                           : 'bg-surface text-base-content'
@@ -82,7 +82,7 @@ export const InvestigationMessages: Component<InvestigationMessagesProps> = (pro
                         <summary class="text-[10px] text-muted cursor-pointer hover:text-base-content hover:underline">
                           Show reasoning
                         </summary>
-                        <div class="mt-1 text-[10px] text-muted whitespace-pre-wrap break-words border-l-2 border-border pl-2">
+                        <div class="mt-1 text-[10px] text-muted whitespace-pre-wrap wrap-break-word border-l-2 border-border pl-2">
                           {msg.reasoning_content}
                         </div>
                       </details>
@@ -95,7 +95,9 @@ export const InvestigationMessages: Component<InvestigationMessagesProps> = (pro
                       <Show
                         when={msg.role === 'assistant'}
                         fallback={
-                          <div class="text-xs whitespace-pre-wrap break-words">{msg.content}</div>
+                          <div class="text-xs whitespace-pre-wrap wrap-break-word">
+                            {msg.content}
+                          </div>
                         }
                       >
                         <div
@@ -114,7 +116,7 @@ export const InvestigationMessages: Component<InvestigationMessagesProps> = (pro
                             <Show
                               when={typeof tc.success === 'boolean'}
                               fallback={
-                                <div class="text-xs rounded border border-indigo-200 dark:border-indigo-800 bg-indigo-50 dark:bg-indigo-900 px-2 py-1">
+                                <div class="text-xs rounded-sm border border-indigo-200 dark:border-indigo-800 bg-indigo-50 dark:bg-indigo-900/25 px-2 py-1">
                                   <span class="font-semibold text-indigo-700 dark:text-indigo-300">
                                     {tc.name}
                                   </span>
@@ -124,7 +126,7 @@ export const InvestigationMessages: Component<InvestigationMessagesProps> = (pro
                                     </pre>
                                   </Show>
                                   <Show when={tc.output}>
-                                    <pre class="mt-1 text-[10px] text-muted overflow-x-auto max-h-32 overflow-y-auto whitespace-pre-wrap break-words">
+                                    <pre class="mt-1 text-[10px] text-muted overflow-x-auto max-h-32 overflow-y-auto whitespace-pre-wrap wrap-break-word">
                                       {tc.output}
                                     </pre>
                                   </Show>
@@ -150,8 +152,8 @@ export const InvestigationMessages: Component<InvestigationMessagesProps> = (pro
                       <div
                         class={`text-xs rounded border px-2 py-1 ${
                           msg.tool_result!.is_error
-                            ? 'border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900'
-                            : 'border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-900'
+                            ? 'border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/25'
+                            : 'border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-900/25'
                         }`}
                       >
                         <span
@@ -163,7 +165,7 @@ export const InvestigationMessages: Component<InvestigationMessagesProps> = (pro
                         >
                           {msg.tool_result!.is_error ? 'Error' : 'Result'}
                         </span>
-                        <pre class="mt-1 text-[10px] text-muted overflow-x-auto max-h-32 overflow-y-auto whitespace-pre-wrap break-words">
+                        <pre class="mt-1 text-[10px] text-muted overflow-x-auto max-h-32 overflow-y-auto whitespace-pre-wrap wrap-break-word">
                           {msg.tool_result!.content}
                         </pre>
                       </div>
diff --git a/frontend-modern/src/components/patrol/InvestigationSection.tsx b/frontend-modern/src/components/patrol/InvestigationSection.tsx
index d3d3e8f906..14fc6c8d0b 100644
--- a/frontend-modern/src/components/patrol/InvestigationSection.tsx
+++ b/frontend-modern/src/components/patrol/InvestigationSection.tsx
@@ -42,7 +42,7 @@ const INVESTIGATION_BADGE_PROPS = {
 } as const;
 
 const summaryClass =
-  'text-sm prose prose-slate prose-sm dark:prose-invert max-w-none break-words prose-headings:my-2 prose-p:my-2 prose-pre:overflow-x-auto prose-code:break-all prose-code:before:content-none prose-code:after:content-none';
+  'text-sm prose prose-slate prose-sm dark:prose-invert max-w-none wrap-break-word prose-headings:my-2 prose-p:my-2 prose-pre:overflow-x-auto prose-code:break-all prose-code:before:content-none prose-code:after:content-none';
 
 interface InvestigationSectionProps {
   findingId: string;
@@ -159,7 +159,7 @@ export const InvestigationSection: Component<InvestigationSectionProps> = (props
             type="button"
             onClick={handleReinvestigate}
             disabled={reinvestigating()}
-            class="flex items-center gap-1 px-2 py-1 text-xs font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900 rounded transition-colors disabled:opacity-50"
+            class="flex items-center gap-1 px-2 py-1 text-xs font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/25 rounded-sm transition-colors disabled:opacity-50"
           >
             <RefreshCwIcon class={`w-3 h-3 ${reinvestigating() ? 'animate-spin' : ''}`} />
             Re-investigate
@@ -184,7 +184,7 @@ export const InvestigationSection: Component<InvestigationSectionProps> = (props
       </Show>
 
       <Show when={investigationRecord().hasRecord}>
-        <div class="mb-2 rounded border border-border bg-surface-alt p-2">
+        <div class="mb-2 rounded-sm border border-border bg-surface-alt p-2">
           <div class="flex items-center gap-2 flex-wrap">
             <span class="text-xs font-medium text-base-content">Patrol record</span>
             <MetadataBadge
@@ -229,7 +229,7 @@ export const InvestigationSection: Component<InvestigationSectionProps> = (props
 
           <Show when={investigationRecord().proposedFix}>
             {(fix) => (
-              <div class="mt-2 rounded border border-border-subtle bg-surface p-2 text-xs">
+              <div class="mt-2 rounded-sm border border-border-subtle bg-surface p-2 text-xs">
                 <div class="font-medium text-base-content">{fix().description}</div>
                 <div class="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-muted">
                   <Show when={fix().riskLabel}>
@@ -259,7 +259,7 @@ export const InvestigationSection: Component<InvestigationSectionProps> = (props
                 class="mt-1 text-xs"
                 classList={{
                   'text-muted': Boolean(investigationRecord().impact),
-                  'italic text-muted/70': !investigationRecord().impact,
+                  'italic ': !investigationRecord().impact,
                 }}
               >
                 {investigationRecord().impact || 'Impact not assessed'}
@@ -294,7 +294,7 @@ export const InvestigationSection: Component<InvestigationSectionProps> = (props
               <div class="text-[10px] font-medium uppercase text-muted">Rollback</div>
               <Show
                 when={investigationRecord().rollbackSummaries.length > 0}
-                fallback={<p class="mt-1 text-xs italic text-muted/70">Rollback not specified</p>}
+                fallback={<p class="mt-1 text-xs italic">Rollback not specified</p>}
               >
                 <ul class="mt-1 space-y-1 text-xs text-muted">
                   <For each={investigationRecord().rollbackSummaries}>
@@ -318,7 +318,7 @@ export const InvestigationSection: Component<InvestigationSectionProps> = (props
           </Show>
 
           <Show when={investigationRecord().error}>
-            <div class="mt-2 rounded border border-red-200 bg-red-50 p-2 text-xs text-red-700 dark:border-red-800 dark:bg-red-900 dark:text-red-300">
+            <div class="mt-2 rounded-sm border border-red-200 bg-red-50 p-2 text-xs text-red-700 dark:border-red-800 dark:bg-red-900/25 dark:text-red-300">
               {investigationRecord().error}
             </div>
           </Show>
@@ -344,7 +344,7 @@ export const InvestigationSection: Component<InvestigationSectionProps> = (props
                   inv().outcome === 'cannot_fix')
               }
             >
-              <div class="text-xs text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-800 rounded p-2">
+              <div class="text-xs text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-900/25 border border-red-200 dark:border-red-800 rounded-sm p-2">
                 {inv().error}
               </div>
             </Show>
@@ -356,7 +356,7 @@ export const InvestigationSection: Component<InvestigationSectionProps> = (props
               }
             >
               <div
-                class={`bg-surface-alt rounded p-2 ${summaryClass}`}
+                class={`bg-surface-alt rounded-sm p-2 ${summaryClass}`}
                 // eslint-disable-next-line solid/no-innerhtml
                 innerHTML={renderMarkdown(inv().summary!)}
               />
diff --git a/frontend-modern/src/components/patrol/RemediationStatus.tsx b/frontend-modern/src/components/patrol/RemediationStatus.tsx
index cb71c26856..e999e0ed2b 100644
--- a/frontend-modern/src/components/patrol/RemediationStatus.tsx
+++ b/frontend-modern/src/components/patrol/RemediationStatus.tsx
@@ -18,11 +18,11 @@ export const RemediationStatus: Component<RemediationStatusProps> = (props) => {
   const presentation = () => getRemediationPresentation(props.result.success);
 
   return (
-    <div class={`mt-2 p-2 rounded text-xs ${presentation().panelClass}`}>
+    <div class={`mt-2 p-2 rounded-sm text-xs ${presentation().panelClass}`}>
       <div class="flex items-center gap-2">
         <Show when={props.result.success}>
           <svg
-            class={`w-4 h-4 flex-shrink-0 ${presentation().iconClass}`}
+            class={`w-4 h-4 shrink-0 ${presentation().iconClass}`}
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24"
@@ -38,7 +38,7 @@ export const RemediationStatus: Component<RemediationStatusProps> = (props) => {
         </Show>
         <Show when={!props.result.success}>
           <svg
-            class={`w-4 h-4 flex-shrink-0 ${presentation().iconClass}`}
+            class={`w-4 h-4 shrink-0 ${presentation().iconClass}`}
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24"
@@ -77,7 +77,7 @@ export const RemediationStatus: Component<RemediationStatusProps> = (props) => {
           {showOutput() ? 'Hide output' : 'Show output'}
         </button>
         <Show when={showOutput()}>
-          <div class="bg-surface rounded p-2 font-mono mt-1 max-h-32 overflow-auto whitespace-pre-wrap text-[11px] text-base-content">
+          <div class="bg-surface rounded-sm p-2 font-mono mt-1 max-h-32 overflow-auto whitespace-pre-wrap text-[11px] text-base-content">
             {props.result.output}
           </div>
         </Show>
diff --git a/frontend-modern/src/components/patrol/RunHistoryEntry.tsx b/frontend-modern/src/components/patrol/RunHistoryEntry.tsx
index d9ea3ffd13..3ef11b8e0b 100644
--- a/frontend-modern/src/components/patrol/RunHistoryEntry.tsx
+++ b/frontend-modern/src/components/patrol/RunHistoryEntry.tsx
@@ -93,8 +93,8 @@ export function RunHistoryEntry(props: RunHistoryEntryProps) {
       <div
         class={`rounded-md border transition-colors ${
           hasError()
-            ? 'border-red-300 dark:border-red-700 bg-red-50 dark:bg-red-900'
-            : 'border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-blue-900'
+            ? 'border-red-300 dark:border-red-700 bg-red-50 dark:bg-red-900/25'
+            : 'border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-blue-900/25'
         }`}
       >
         <div class="px-3 py-2">
@@ -177,7 +177,7 @@ export function RunHistoryEntry(props: RunHistoryEntryProps) {
     <div
       class={`rounded-md border transition-colors ${
         props.selected
-          ? 'border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-blue-900'
+          ? 'border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-blue-900/25'
           : 'border-border'
       }`}
     >
@@ -209,7 +209,7 @@ export function RunHistoryEntry(props: RunHistoryEntryProps) {
           {/* Section 1: Narrative Summary */}
           <div class="mt-3 flex flex-wrap items-start justify-between gap-3">
             <div class="flex min-w-0 flex-1 items-start gap-2 text-sm text-base-content">
-              <SparklesIcon class="w-4 h-4 text-blue-500 dark:text-blue-400 mt-0.5 flex-shrink-0" />
+              <SparklesIcon class="w-4 h-4 text-blue-500 dark:text-blue-400 mt-0.5 shrink-0" />
               <p>
                 <strong>{operatorRecord.headline}.</strong> {operatorRecord.detail}
               </p>
@@ -218,7 +218,7 @@ export function RunHistoryEntry(props: RunHistoryEntryProps) {
               type="button"
               data-testid="patrol-run-assistant-button"
               onClick={handleDiscussRun}
-              class="inline-flex flex-shrink-0 items-center gap-1.5 rounded-md border border-border bg-surface px-2.5 py-1.5 text-xs font-semibold text-base-content shadow-sm transition-colors hover:bg-surface-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
+              class="inline-flex shrink-0 items-center gap-1.5 rounded-md border border-border bg-surface px-2.5 py-1.5 text-xs font-semibold text-base-content shadow-xs transition-colors hover:bg-surface-hover focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary/40"
               title="Discuss this Patrol run with Assistant"
             >
               <MessageSquareIcon class="h-3.5 w-3.5" aria-hidden="true" />
@@ -228,11 +228,11 @@ export function RunHistoryEntry(props: RunHistoryEntryProps) {
 
           <Show when={hasRunErrorDetail}>
             <div class="mt-3 flex items-start gap-2 rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-800 dark:border-red-800 dark:bg-red-950/40 dark:text-red-200">
-              <AlertTriangleIcon class="mt-0.5 h-4 w-4 flex-shrink-0" />
+              <AlertTriangleIcon class="mt-0.5 h-4 w-4 shrink-0" />
               <div class="min-w-0 space-y-1">
                 <p class="font-medium">{runErrorSummary || 'Patrol analysis did not complete'}</p>
                 <Show when={runErrorDetail && runErrorDetail !== runErrorSummary}>
-                  <p class="break-words text-xs leading-relaxed text-red-700 dark:text-red-300">
+                  <p class="wrap-break-word text-xs leading-relaxed text-red-700 dark:text-red-300">
                     {runErrorDetail}
                   </p>
                 </Show>
@@ -240,7 +240,7 @@ export function RunHistoryEntry(props: RunHistoryEntryProps) {
                   {(action) => (
                     <a
                       href={action().href}
-                      class="mt-2 inline-flex items-center gap-1.5 rounded-md border border-red-200 bg-white px-2.5 py-1.5 text-xs font-semibold text-red-800 transition-colors hover:bg-red-100 dark:border-red-800 dark:bg-red-950 dark:text-red-100 dark:hover:bg-red-900"
+                      class="mt-2 inline-flex items-center gap-1.5 rounded-md border border-red-200 bg-white px-2.5 py-1.5 text-xs font-semibold text-red-800 transition-colors hover:bg-red-100 dark:border-red-800 dark:bg-red-950/25 dark:text-red-100 dark:hover:bg-red-900/25"
                     >
                       <SettingsIcon class="h-3.5 w-3.5" aria-hidden="true" />
                       <span>{action().label}</span>
@@ -391,7 +391,7 @@ export function RunHistoryEntry(props: RunHistoryEntryProps) {
               </div>
               <Show when={showRunAnalysis()}>
                 <div
-                  class="mt-2 p-3 rounded bg-surface text-sm leading-relaxed text-base-content max-h-64 overflow-auto prose prose-sm max-w-none dark:prose-invert prose-headings:text-sm prose-headings:mt-2 prose-headings:mb-1 prose-p:my-1 prose-ul:my-1 prose-li:my-0"
+                  class="mt-2 p-3 rounded-sm bg-surface text-sm leading-relaxed text-base-content max-h-64 overflow-auto prose prose-sm max-w-none dark:prose-invert prose-headings:text-sm prose-headings:mt-2 prose-headings:mb-1 prose-p:my-1 prose-ul:my-1 prose-li:my-0"
                   // eslint-disable-next-line solid/no-innerhtml
                   innerHTML={renderMarkdown(sanitizeAnalysis(run.ai_analysis))}
                 />
diff --git a/frontend-modern/src/components/patrol/RunHistoryPanel.tsx b/frontend-modern/src/components/patrol/RunHistoryPanel.tsx
index 246b4b8ca0..1de95198b5 100644
--- a/frontend-modern/src/components/patrol/RunHistoryPanel.tsx
+++ b/frontend-modern/src/components/patrol/RunHistoryPanel.tsx
@@ -73,7 +73,7 @@ export function RunHistoryPanel(props: RunHistoryPanelProps) {
 
       <Show when={!props.loading && props.runs.length > 0}>
         <div class="space-y-3">
-          <div class="max-h-[28rem] space-y-2 overflow-y-auto pr-1">
+          <div class="max-h-112 space-y-2 overflow-y-auto pr-1">
             <For each={visibleRuns()}>
               {(run) => (
                 <RunHistoryEntry
diff --git a/frontend-modern/src/components/patrol/RunToolCallTrace.tsx b/frontend-modern/src/components/patrol/RunToolCallTrace.tsx
index 8805765c6a..d1bc4ec145 100644
--- a/frontend-modern/src/components/patrol/RunToolCallTrace.tsx
+++ b/frontend-modern/src/components/patrol/RunToolCallTrace.tsx
@@ -161,21 +161,21 @@ export const RunToolCallTrace: Component<RunToolCallTraceProps> = (props) => {
                 {(call: ToolCallRecord, index) => {
                   const status = verifiedStatus(call.verification);
                   return (
-                    <div class="border border-border rounded">
+                    <div class="border border-border rounded-sm">
                       <button
                         type="button"
                         onClick={() => setExpandedCall(expandedCall() === call.id ? null : call.id)}
                         class="w-full flex items-center justify-between gap-2 px-2 py-1.5 text-xs hover:bg-surface-hover"
                       >
                         <div class="flex items-center gap-2 min-w-0">
-                          <span class="text-muted font-mono w-5 text-right flex-shrink-0">
+                          <span class="text-muted font-mono w-5 text-right shrink-0">
                             {index() + 1}.
                           </span>
                           <span class="font-medium text-base-content font-mono truncate">
                             {call.tool_name}
                           </span>
                         </div>
-                        <div class="flex items-center gap-2 flex-shrink-0">
+                        <div class="flex items-center gap-2 shrink-0">
                           <span
                             class="inline-flex items-center justify-center w-4"
                             title={verifiedTooltip(call.verification)}
@@ -200,7 +200,7 @@ export const RunToolCallTrace: Component<RunToolCallTraceProps> = (props) => {
                           <Show when={call.input}>
                             <div>
                               <div class="text-[10px] font-medium text-muted mb-1">Input</div>
-                              <pre class="text-[11px] font-mono bg-base rounded p-2 max-h-32 overflow-auto whitespace-pre-wrap text-base-content">
+                              <pre class="text-[11px] font-mono bg-base rounded-sm p-2 max-h-32 overflow-auto whitespace-pre-wrap text-base-content">
                                 {truncate(call.input, 500)}
                               </pre>
                             </div>
@@ -208,7 +208,7 @@ export const RunToolCallTrace: Component<RunToolCallTraceProps> = (props) => {
                           <Show when={call.output}>
                             <div>
                               <div class="text-[10px] font-medium text-muted mb-1">Output</div>
-                              <pre class="text-[11px] font-mono bg-base rounded p-2 max-h-32 overflow-auto whitespace-pre-wrap text-base-content">
+                              <pre class="text-[11px] font-mono bg-base rounded-sm p-2 max-h-32 overflow-auto whitespace-pre-wrap text-base-content">
                                 {truncate(call.output, 500)}
                               </pre>
                             </div>
diff --git a/frontend-modern/src/components/shared/AIModelPicker.tsx b/frontend-modern/src/components/shared/AIModelPicker.tsx
index 366cbf9f89..fb91507c1d 100644
--- a/frontend-modern/src/components/shared/AIModelPicker.tsx
+++ b/frontend-modern/src/components/shared/AIModelPicker.tsx
@@ -134,11 +134,11 @@ const modelRouteSecondaryId = (entry: ResolvedModelRoute) => {
 const annotationBadgeClass = (tone?: AIModelPickerAnnotation['tone']) => {
   switch (tone) {
     case 'warning':
-      return 'shrink-0 rounded border border-amber-200 bg-amber-100 px-1.5 py-0.5 text-[10px] font-semibold text-amber-800 dark:border-amber-800 dark:bg-amber-950/60 dark:text-amber-200';
+      return 'shrink-0 rounded-sm border border-amber-200 bg-amber-100 px-1.5 py-0.5 text-[10px] font-semibold text-amber-800 dark:border-amber-800 dark:bg-amber-950/60 dark:text-amber-200';
     case 'positive':
-      return 'shrink-0 rounded border border-green-200 bg-green-100 px-1.5 py-0.5 text-[10px] font-semibold text-green-800 dark:border-green-800 dark:bg-green-950/60 dark:text-green-200';
+      return 'shrink-0 rounded-sm border border-green-200 bg-green-100 px-1.5 py-0.5 text-[10px] font-semibold text-green-800 dark:border-green-800 dark:bg-green-950/60 dark:text-green-200';
     default:
-      return 'shrink-0 rounded border border-border bg-surface-alt px-1.5 py-0.5 text-[10px] font-semibold text-muted';
+      return 'shrink-0 rounded-sm border border-border bg-surface-alt px-1.5 py-0.5 text-[10px] font-semibold text-muted';
   }
 };
 
@@ -159,7 +159,7 @@ const ModelAnnotationNote: Component<{ annotation: AIModelPickerAnnotation }> =
 );
 
 const CurrentSelectionBadge: Component = () => (
-  <span class="shrink-0 rounded border border-blue-200 bg-blue-100 px-1.5 py-0.5 text-[10px] font-semibold uppercase text-blue-700 dark:border-blue-800 dark:bg-blue-950/60 dark:text-blue-200">
+  <span class="shrink-0 rounded-sm border border-blue-200 bg-blue-100 px-1.5 py-0.5 text-[10px] font-semibold uppercase text-blue-700 dark:border-blue-800 dark:bg-blue-950/60 dark:text-blue-200">
     {' '}
     {CURRENT_SELECTION_LABEL}{' '}
   </span>
@@ -470,7 +470,7 @@ export const AIModelPicker: Component<AIModelPickerProps> = (props) => {
   const isSelectedRoute = (modelId: string) => selectedModel() === modelId;
   const optionClass = (isSelected: boolean) =>
     `w-full px-3 py-2 text-left text-sm hover:bg-surface-hover ${
-      isSelected ? 'bg-blue-50 dark:bg-blue-900' : ''
+      isSelected ? 'bg-blue-50 dark:bg-blue-900/25' : ''
     }`;
 
   createEffect(() => {
@@ -684,7 +684,7 @@ export const AIModelPicker: Component<AIModelPickerProps> = (props) => {
 
       <Show when={isOpen()}>
         <div
-          class={`fixed overflow-hidden rounded-md border border-border bg-surface shadow-sm z-[9999] ${props.dropdownClass || DEFAULT_DROPDOWN_CLASS}`}
+          class={`fixed overflow-hidden rounded-md border border-border bg-surface shadow-xs z-9999 ${props.dropdownClass || DEFAULT_DROPDOWN_CLASS}`}
           role="dialog"
           aria-label={props.title || 'Select model'}
           style={dropdownStyle()}
diff --git a/frontend-modern/src/components/shared/Button.test.tsx b/frontend-modern/src/components/shared/Button.test.tsx
index ee9eee77e3..807952e6ed 100644
--- a/frontend-modern/src/components/shared/Button.test.tsx
+++ b/frontend-modern/src/components/shared/Button.test.tsx
@@ -33,7 +33,7 @@ describe('Button', () => {
     expect(buttonModelSource).toContain('getActionIconButtonClass');
     expect(buttonSource).toContain('export function ActionIconButton');
     expect(buttonModelSource).toContain(
-      "secondary: 'border border-border bg-surface text-base-content shadow-sm hover:bg-surface-hover'",
+      "secondary: 'border border-border bg-surface text-base-content shadow-xs hover:bg-surface-hover'",
     );
     expect(buttonModelSource).toContain('primaryFlat:');
     expect(buttonModelSource).toContain('success:');
@@ -45,7 +45,7 @@ describe('Button', () => {
       "'border border-border bg-surface text-muted hover:bg-surface-hover hover:text-base-content'",
     );
     expect(buttonModelSource).toContain(
-      "accent: 'text-blue-700 hover:bg-blue-100 dark:text-blue-200 dark:hover:bg-blue-950'",
+      "accent: 'text-blue-700 hover:bg-blue-100 dark:text-blue-200 dark:hover:bg-blue-950/25'",
     );
     expect(buttonModelSource).toContain('dangerOutline:');
     expect(buttonModelSource).toContain('export const BUTTON_SIZE_CLASSES');
@@ -151,11 +151,11 @@ describe('Button', () => {
 
     const openInventoryButton = screen.getByRole('button', { name: 'Open inventory' });
     expect(openInventoryButton).toHaveClass('border-emerald-300');
-    expect(openInventoryButton).toHaveClass('text-emerald-900');
+    expect(openInventoryButton).toHaveClass('text-emerald-900/25');
 
     const dismissButton = screen.getByRole('button', { name: 'Dismiss' });
     expect(dismissButton).toHaveClass('border-transparent');
-    expect(dismissButton).toHaveClass('text-emerald-900');
+    expect(dismissButton).toHaveClass('text-emerald-900/25');
 
     const removeMemberButton = screen.getByRole('button', { name: 'Remove member' });
     expect(removeMemberButton).toHaveClass('border-transparent');
diff --git a/frontend-modern/src/components/shared/CalloutCard.tsx b/frontend-modern/src/components/shared/CalloutCard.tsx
index 5112e3935b..b075a33abb 100644
--- a/frontend-modern/src/components/shared/CalloutCard.tsx
+++ b/frontend-modern/src/components/shared/CalloutCard.tsx
@@ -15,26 +15,26 @@ interface CalloutCardProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'tit
 
 const toneClassByTone: Record<CalloutTone, string> = {
   danger:
-    'border border-red-200 bg-red-50 text-red-900 dark:border-red-800 dark:bg-red-900 dark:text-red-100',
-  info: 'border border-blue-200 bg-blue-50 text-blue-900 dark:border-blue-800 dark:bg-blue-900 dark:text-blue-100',
+    'border border-red-200 bg-red-50 text-red-900/25 dark:border-red-800 dark:bg-red-900/25 dark:text-red-100',
+  info: 'border border-blue-200 bg-blue-50 text-blue-900/25 dark:border-blue-800 dark:bg-blue-900/25 dark:text-blue-100',
   success:
-    'border border-emerald-200 bg-emerald-50 text-emerald-900 dark:border-emerald-800 dark:bg-emerald-900 dark:text-emerald-100',
+    'border border-emerald-200 bg-emerald-50 text-emerald-900/25 dark:border-emerald-800 dark:bg-emerald-900/25 dark:text-emerald-100',
   warning:
-    'border border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-800 dark:bg-amber-900 dark:text-amber-100',
+    'border border-amber-200 bg-amber-50 text-amber-900/25 dark:border-amber-800 dark:bg-amber-900/25 dark:text-amber-100',
 };
 
 const iconClassByTone: Record<CalloutTone, string> = {
-  danger: 'bg-red-100 text-red-600 dark:bg-red-900 dark:text-red-300',
-  info: 'bg-blue-100 text-blue-600 dark:bg-blue-900 dark:text-blue-300',
-  success: 'bg-emerald-100 text-emerald-600 dark:bg-emerald-900 dark:text-emerald-300',
-  warning: 'bg-amber-100 text-amber-600 dark:bg-amber-900 dark:text-amber-300',
+  danger: 'bg-red-100 text-red-600 dark:bg-red-900/25 dark:text-red-300',
+  info: 'bg-blue-100 text-blue-600 dark:bg-blue-900/25 dark:text-blue-300',
+  success: 'bg-emerald-100 text-emerald-600 dark:bg-emerald-900/25 dark:text-emerald-300',
+  warning: 'bg-amber-100 text-amber-600 dark:bg-amber-900/25 dark:text-amber-300',
 };
 
 const titleClassByTone: Record<CalloutTone, string> = {
-  danger: 'text-lg font-semibold text-red-900 dark:text-red-100',
-  info: 'text-lg font-semibold text-blue-900 dark:text-blue-100',
-  success: 'text-lg font-semibold text-emerald-900 dark:text-emerald-100',
-  warning: 'text-lg font-semibold text-amber-900 dark:text-amber-100',
+  danger: 'text-lg font-semibold text-red-900/25 dark:text-red-100',
+  info: 'text-lg font-semibold text-blue-900/25 dark:text-blue-100',
+  success: 'text-lg font-semibold text-emerald-900/25 dark:text-emerald-100',
+  warning: 'text-lg font-semibold text-amber-900/25 dark:text-amber-100',
 };
 
 const descriptionClassByTone: Record<CalloutTone, string> = {
@@ -62,10 +62,10 @@ const contentClassByScale: Record<CalloutScale, string> = {
 const titleClassByScaleAndTone: Record<CalloutScale, Record<CalloutTone, string>> = {
   default: titleClassByTone,
   compact: {
-    danger: 'text-sm font-semibold text-red-900 dark:text-red-100',
-    info: 'text-sm font-semibold text-blue-900 dark:text-blue-100',
-    success: 'text-sm font-semibold text-emerald-900 dark:text-emerald-100',
-    warning: 'text-sm font-semibold text-amber-900 dark:text-amber-100',
+    danger: 'text-sm font-semibold text-red-900/25 dark:text-red-100',
+    info: 'text-sm font-semibold text-blue-900/25 dark:text-blue-100',
+    success: 'text-sm font-semibold text-emerald-900/25 dark:text-emerald-100',
+    warning: 'text-sm font-semibold text-amber-900/25 dark:text-amber-100',
   },
 };
 
diff --git a/frontend-modern/src/components/shared/Card.tsx b/frontend-modern/src/components/shared/Card.tsx
index 3902521481..b281bb01a1 100644
--- a/frontend-modern/src/components/shared/Card.tsx
+++ b/frontend-modern/src/components/shared/Card.tsx
@@ -13,10 +13,10 @@ export type CardProps = {
 const toneClassMap: Record<Tone, string> = {
   default: 'bg-surface',
   muted: 'bg-base',
-  info: 'bg-blue-50 dark:bg-blue-900',
-  success: 'bg-emerald-50 dark:bg-emerald-900',
-  warning: 'bg-amber-50 dark:bg-amber-900',
-  danger: 'bg-red-50 dark:bg-red-900',
+  info: 'bg-blue-50 dark:bg-blue-900/25',
+  success: 'bg-emerald-50 dark:bg-emerald-900/25',
+  warning: 'bg-amber-50 dark:bg-amber-900/25',
+  danger: 'bg-red-50 dark:bg-red-900/25',
   card: 'bg-surface',
   glass: 'bg-base',
 };
diff --git a/frontend-modern/src/components/shared/ColumnPicker.tsx b/frontend-modern/src/components/shared/ColumnPicker.tsx
index debb655d26..adb55b9042 100644
--- a/frontend-modern/src/components/shared/ColumnPicker.tsx
+++ b/frontend-modern/src/components/shared/ColumnPicker.tsx
@@ -69,7 +69,7 @@ export const ColumnPicker: Component<ColumnPickerProps> = (props) => {
                 type="checkbox"
                 checked={state.isColumnChecked(column.id)}
                 onChange={() => state.handleColumnToggle(column.id)}
-                class="h-3.5 w-3.5 rounded border-border text-blue-600 focus:ring-blue-500 focus:ring-offset-0 dark:checked:bg-blue-600"
+                class="h-3.5 w-3.5 rounded-sm border-border text-blue-600 focus:ring-blue-500 focus:ring-offset-0 dark:checked:bg-blue-600"
               />
               <span class={getColumnPickerOptionTextClass(state.isColumnChecked(column.id))}>
                 {column.label}
diff --git a/frontend-modern/src/components/shared/CommandPaletteModal.tsx b/frontend-modern/src/components/shared/CommandPaletteModal.tsx
index 28fc4355f4..c155a5283b 100644
--- a/frontend-modern/src/components/shared/CommandPaletteModal.tsx
+++ b/frontend-modern/src/components/shared/CommandPaletteModal.tsx
@@ -71,7 +71,7 @@ export function CommandPaletteModal(props: CommandPaletteModalProps) {
                     role="option"
                     aria-selected={selected()}
                     tabIndex={-1}
-                    class={`flex w-full items-center justify-between rounded-md px-3 py-2 text-left text-sm text-base-content outline-none transition-colors hover:bg-surface-hover focus:bg-surface-hover ${
+                    class={`flex w-full items-center justify-between rounded-md px-3 py-2 text-left text-sm text-base-content outline-hidden transition-colors hover:bg-surface-hover focus:bg-surface-hover ${
                       selected() ? 'bg-surface-hover' : ''
                     }`}
                     onClick={() => handleSelect(command)}
@@ -84,7 +84,7 @@ export function CommandPaletteModal(props: CommandPaletteModalProps) {
                       </Show>
                     </div>
                     <Show when={command.shortcut}>
-                      <span class="rounded border border-border-subtle bg-base px-2 py-1 text-[10px] font-medium text-base-content">
+                      <span class="rounded-sm border border-border-subtle bg-base px-2 py-1 text-[10px] font-medium text-base-content">
                         {command.shortcut}
                       </span>
                     </Show>
diff --git a/frontend-modern/src/components/shared/ContainerUpdateBadge.tsx b/frontend-modern/src/components/shared/ContainerUpdateBadge.tsx
index 08a7b57ba0..ed514331ed 100644
--- a/frontend-modern/src/components/shared/ContainerUpdateBadge.tsx
+++ b/frontend-modern/src/components/shared/ContainerUpdateBadge.tsx
@@ -85,7 +85,7 @@ export const ContainerUpdateBadge: Component<ContainerUpdateBadgeProps> = (props
       <Switch>
         <Match when={hasContainerUpdate(props.updateStatus)}>
           <span
-            class="inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-xs font-medium bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300 cursor-help"
+            class="inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-xs font-medium bg-blue-100 text-blue-700 dark:bg-blue-900/25 dark:text-blue-300 cursor-help"
             onMouseEnter={(e) => {
               const rect = e.currentTarget.getBoundingClientRect();
               showTooltip(
@@ -181,7 +181,7 @@ export const UpdateIcon: Component<UpdateIconProps> = (props) => {
   return (
     <Show when={hasContainerUpdate(props.updateStatus)}>
       <span
-        class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300 cursor-help"
+        class="inline-flex items-center justify-center w-5 h-5 rounded-full bg-blue-100 text-blue-700 dark:bg-blue-900/25 dark:text-blue-300 cursor-help"
         onMouseEnter={(e) => {
           const rect = e.currentTarget.getBoundingClientRect();
           showTooltip(
diff --git a/frontend-modern/src/components/shared/CopyableCodeRow.tsx b/frontend-modern/src/components/shared/CopyableCodeRow.tsx
index 14da94cc7a..802e8b5ec9 100644
--- a/frontend-modern/src/components/shared/CopyableCodeRow.tsx
+++ b/frontend-modern/src/components/shared/CopyableCodeRow.tsx
@@ -12,7 +12,7 @@ export interface CopyableCodeRowProps extends Pick<
 
 export const CopyableCodeRow: Component<CopyableCodeRowProps> = (props) => (
   <div
-    class={['flex items-start gap-2 rounded bg-surface-alt px-2 py-1.5', props.class]
+    class={['flex items-start gap-2 rounded-sm bg-surface-alt px-2 py-1.5', props.class]
       .filter(Boolean)
       .join(' ')}
   >
diff --git a/frontend-modern/src/components/shared/DetailSectionTable.tsx b/frontend-modern/src/components/shared/DetailSectionTable.tsx
index 8dc65beeec..e0ab46d893 100644
--- a/frontend-modern/src/components/shared/DetailSectionTable.tsx
+++ b/frontend-modern/src/components/shared/DetailSectionTable.tsx
@@ -68,7 +68,7 @@ export const DetailSectionTable: Component<{
 }> = (props) => (
   <div
     data-testid={props.dataTestId}
-    class={`${props.class ?? 'overflow-hidden rounded border border-border bg-surface'} lg:overflow-visible lg:border-0 lg:bg-transparent`}
+    class={`${props.class ?? 'overflow-hidden rounded-sm border border-border bg-surface'} lg:overflow-visible lg:border-0 lg:bg-transparent`}
   >
     <Table
       class="w-full table-fixed text-[11px] lg:flex lg:flex-wrap lg:items-stretch lg:gap-2"
@@ -78,7 +78,7 @@ export const DetailSectionTable: Component<{
         {(section, sectionIndex) => (
           <TableBody
             data-testid={section.testId}
-            class={`divide-y divide-border lg:flex lg:min-w-0 lg:flex-none lg:flex-col lg:overflow-hidden lg:rounded lg:border lg:border-border lg:bg-surface lg:p-3 lg:shadow-sm lg:divide-y-0 ${detailSectionDesktopBasisClass(props.sections.length, sectionIndex())}`}
+            class={`divide-y divide-border lg:flex lg:min-w-0 lg:flex-none lg:flex-col lg:overflow-hidden lg:rounded-sm lg:border lg:border-border lg:bg-surface lg:p-3 lg:shadow-xs lg:divide-y-0 ${detailSectionDesktopBasisClass(props.sections.length, sectionIndex())}`}
           >
             <TableRow class="bg-surface-alt lg:mb-1 lg:block lg:bg-transparent lg:hover:bg-transparent">
               <TableHead
@@ -94,19 +94,19 @@ export const DetailSectionTable: Component<{
                   class={`lg:grid lg:min-w-0 lg:items-start lg:gap-3 lg:py-0.5 lg:hover:bg-transparent ${row.layout === 'stacked' ? 'lg:grid-cols-[minmax(0,1fr)]' : 'lg:grid-cols-[7rem_minmax(0,1fr)]'}`}
                 >
                   {row.layout !== 'stacked' ? (
-                    <TableCell class="w-[38%] px-2 py-1 align-top text-muted lg:w-auto lg:px-0 lg:py-0">
+                    <TableCell class="w-[38%] px-2 py-1 text-muted lg:w-auto lg:px-0 lg:py-0">
                       {row.label}
                     </TableCell>
                   ) : null}
                   <TableCell
                     colspan={row.layout === 'stacked' ? 2 : undefined}
-                    class={`px-2 py-1 text-right align-top font-medium lg:min-w-0 lg:px-0 lg:py-0 lg:text-left ${detailValueToneClass(
+                    class={`px-2 py-1 text-right font-medium lg:min-w-0 lg:px-0 lg:py-0 lg:text-left ${detailValueToneClass(
                       row.tone,
                     )} ${row.valueClass ?? ''}`}
                     title={row.title ?? row.value}
                   >
                     {row.layout === 'stacked' ? (
-                      <span class="mb-1 block whitespace-normal text-left font-normal leading-snug text-muted [overflow-wrap:anywhere]">
+                      <span class="mb-1 block whitespace-normal text-left font-normal leading-snug text-muted wrap-anywhere">
                         {row.label}
                       </span>
                     ) : null}
@@ -115,7 +115,7 @@ export const DetailSectionTable: Component<{
                         title={row.title ?? row.value}
                         class={
                           row.wrap
-                            ? 'block whitespace-normal break-words text-left leading-snug'
+                            ? 'block whitespace-normal wrap-break-word text-left leading-snug'
                             : 'block truncate'
                         }
                       >
diff --git a/frontend-modern/src/components/shared/Dialog.tsx b/frontend-modern/src/components/shared/Dialog.tsx
index a6bd2989f1..1a297bd122 100644
--- a/frontend-modern/src/components/shared/Dialog.tsx
+++ b/frontend-modern/src/components/shared/Dialog.tsx
@@ -38,9 +38,9 @@ export const Dialog: Component<DialogProps> = (props) => {
   return (
     <Show when={props.isOpen}>
       <Portal mount={document.body}>
-        <div ref={state.setLayerRef} class="fixed inset-0 z-[1000]" data-dialog-layer>
+        <div ref={state.setLayerRef} class="fixed inset-0 z-1000" data-dialog-layer>
           <div
-            class="absolute inset-0 bg-black/60 backdrop-blur-sm transition-opacity duration-300"
+            class="absolute inset-0 bg-black/60 backdrop-blur-xs transition-opacity duration-300"
             data-dialog-backdrop
             onClick={state.handleBackdropClick}
           />
diff --git a/frontend-modern/src/components/shared/DiscoveryReadinessBadge.tsx b/frontend-modern/src/components/shared/DiscoveryReadinessBadge.tsx
index a2df66ac52..8c2ae4a601 100644
--- a/frontend-modern/src/components/shared/DiscoveryReadinessBadge.tsx
+++ b/frontend-modern/src/components/shared/DiscoveryReadinessBadge.tsx
@@ -16,12 +16,12 @@ interface DiscoveryReadinessBadgeProps {
 
 const toneClasses: Record<DiscoveryReadinessPresentation['tone'], string> = {
   success:
-    'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-300',
+    'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950/25 dark:text-emerald-300',
   warning:
-    'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-300',
-  info: 'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-300',
+    'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-950/25 dark:text-amber-300',
+  info: 'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-950/25 dark:text-blue-300',
   danger:
-    'border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-950 dark:text-red-300',
+    'border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-950/25 dark:text-red-300',
   muted:
     'border-border bg-surface-alt text-muted dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300',
 };
@@ -56,7 +56,7 @@ export const DiscoveryReadinessBadge: Component<DiscoveryReadinessBadgeProps> =
   return (
     <span
       class={[
-        'inline-flex h-6 max-w-full items-center gap-1 rounded border px-1.5 text-[10px] font-medium leading-none whitespace-nowrap',
+        'inline-flex h-6 max-w-full items-center gap-1 rounded-sm border px-1.5 text-[10px] font-medium leading-none whitespace-nowrap',
         presentation() ? toneClasses[presentation()!.tone] : toneClasses.muted,
         props.class,
       ]
diff --git a/frontend-modern/src/components/shared/DrawerAttentionSection.tsx b/frontend-modern/src/components/shared/DrawerAttentionSection.tsx
index 330af6ed09..c0d8fd86d1 100644
--- a/frontend-modern/src/components/shared/DrawerAttentionSection.tsx
+++ b/frontend-modern/src/components/shared/DrawerAttentionSection.tsx
@@ -71,14 +71,17 @@ export const DrawerAttentionSection: Component<DrawerAttentionSectionProps> = (p
                       </Show>
                     </p>
                   </Show>
-                  <p class="break-words text-xs leading-5 text-base-content" title={item.message}>
+                  <p
+                    class="wrap-break-word text-xs leading-5 text-base-content"
+                    title={item.message}
+                  >
                     {item.message}
                   </p>
                 </div>
                 <span
                   class={
                     item.acknowledged
-                      ? 'inline-flex shrink-0 self-start items-center rounded bg-surface-alt px-1.5 py-0.5 text-[10px] font-semibold uppercase text-muted'
+                      ? 'inline-flex shrink-0 self-start items-center rounded-sm bg-surface-alt px-1.5 py-0.5 text-[10px] font-semibold uppercase text-muted'
                       : `${getAlertSeverityBadgeClass(item.severity || 'warning')} self-start`
                   }
                 >
@@ -96,7 +99,7 @@ export const DrawerAttentionSection: Component<DrawerAttentionSectionProps> = (p
             <Button
               variant="ghost"
               size="xs"
-              class="w-full justify-start text-muted hover:text-base-content"
+              class="w-full text-muted hover:text-base-content"
               aria-expanded={expanded()}
               onClick={() => setExpanded((current) => !current)}
             >
diff --git a/frontend-modern/src/components/shared/ExternalTextLink.tsx b/frontend-modern/src/components/shared/ExternalTextLink.tsx
index cdfe4429a4..17d62be01c 100644
--- a/frontend-modern/src/components/shared/ExternalTextLink.tsx
+++ b/frontend-modern/src/components/shared/ExternalTextLink.tsx
@@ -22,17 +22,17 @@ interface ExternalTextLinkProps extends Omit<
 export const EXTERNAL_TEXT_LINK_REL = 'noopener noreferrer';
 
 export const EXTERNAL_TEXT_LINK_BASE_CLASS =
-  'underline-offset-2 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60';
+  'underline-offset-2 transition-colors focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500/60';
 
 export const EXTERNAL_TEXT_LINK_VARIANT_CLASSES: Record<ExternalTextLinkVariant, string> = {
   inline: 'text-blue-600 hover:underline dark:text-blue-400',
   inlineSubtle: 'text-blue-600 hover:underline dark:text-blue-300',
   muted: 'text-muted hover:text-base-content hover:underline',
   compact:
-    'inline-flex min-h-10 items-center rounded px-1 py-1 text-sm text-blue-600 hover:underline dark:text-blue-400 sm:min-h-9',
+    'inline-flex min-h-10 items-center rounded-sm px-1 py-1 text-sm text-blue-600 hover:underline dark:text-blue-400 sm:min-h-9',
   compactAction:
-    'inline-flex min-h-10 items-center rounded px-1 text-xs font-medium text-blue-700 hover:underline dark:text-blue-300 sm:min-h-9',
-  compactInherit: 'inline-flex min-h-10 items-center rounded px-1 underline sm:min-h-9',
+    'inline-flex min-h-10 items-center rounded-sm px-1 text-xs font-medium text-blue-700 hover:underline dark:text-blue-300 sm:min-h-9',
+  compactInherit: 'inline-flex min-h-10 items-center rounded-sm px-1 underline sm:min-h-9',
   inlineAction:
     'inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium text-blue-600 hover:underline dark:text-blue-300',
 };
diff --git a/frontend-modern/src/components/shared/FeatureGateSection.tsx b/frontend-modern/src/components/shared/FeatureGateSection.tsx
index dfa473b1e5..26132bc08d 100644
--- a/frontend-modern/src/components/shared/FeatureGateSection.tsx
+++ b/frontend-modern/src/components/shared/FeatureGateSection.tsx
@@ -36,7 +36,7 @@ export const FeatureGateSection: Component<FeatureGateSectionProps> = (props) =>
   <div class="flex items-center gap-2.5 sm:gap-4">
     <div class="flex min-w-0 flex-1 items-start gap-2 text-left sm:gap-3">
       <Show when={props.icon}>
-        <span class="mt-0.5 flex-shrink-0 text-blue-500">{props.icon}</span>
+        <span class="mt-0.5 shrink-0 text-blue-500">{props.icon}</span>
       </Show>
       <div class="min-w-0 flex-1">
         <h4 class="text-sm font-semibold text-base-content sm:text-base">{props.title}</h4>
diff --git a/frontend-modern/src/components/shared/FilterBar/AddFilterMenu.tsx b/frontend-modern/src/components/shared/FilterBar/AddFilterMenu.tsx
index 396853467a..8e4544fc75 100644
--- a/frontend-modern/src/components/shared/FilterBar/AddFilterMenu.tsx
+++ b/frontend-modern/src/components/shared/FilterBar/AddFilterMenu.tsx
@@ -95,7 +95,7 @@ export const AddFilterMenu: Component<AddFilterMenuProps> = (props) => {
 
   const isDisabled = () => selectableByToken().size === 0;
   const fieldBaseClass = () =>
-    props.showLabel === false ? 'flex-shrink-0' : `${filterGroupClass} flex-shrink-0`;
+    props.showLabel === false ? 'shrink-0' : `${filterGroupClass} shrink-0`;
 
   const handleChange = (event: Event) => {
     const select = event.currentTarget as HTMLSelectElement;
@@ -112,8 +112,8 @@ export const AddFilterMenu: Component<AddFilterMenuProps> = (props) => {
         label="Filter"
         fieldBaseClass={fieldBaseClass()}
         labelClass={props.showLabel === false ? 'sr-only' : filterLabelClass}
-        selectBaseClass={`${filterToolbarControlClass} border border-transparent bg-surface-hover px-2 text-muted outline-none ring-1 ring-border-subtle transition-colors hover:bg-surface hover:text-base-content focus:border-blue-500`}
-        selectClass="w-[7.5rem]"
+        selectBaseClass={`${filterToolbarControlClass} border border-transparent bg-surface-hover px-2 text-muted outline-hidden ring-1 ring-border-subtle transition-colors hover:bg-surface hover:text-base-content focus:border-blue-500`}
+        selectClass="w-30"
         value=""
         onChange={handleChange}
         aria-label="Filter"
diff --git a/frontend-modern/src/components/shared/FilterBar/FilterBar.test.tsx b/frontend-modern/src/components/shared/FilterBar/FilterBar.test.tsx
index 7bdb4acd5d..e29aa39989 100644
--- a/frontend-modern/src/components/shared/FilterBar/FilterBar.test.tsx
+++ b/frontend-modern/src/components/shared/FilterBar/FilterBar.test.tsx
@@ -289,8 +289,8 @@ describe('FilterBar', () => {
     expect(select).toHaveClass('min-h-11');
     expect(select).toHaveClass('sm:h-7');
     expect(select).toHaveClass('sm:min-h-0');
-    expect(select).toHaveClass('w-[7.5rem]');
-    expect(select).not.toHaveClass('min-w-[7.5rem]');
+    expect(select).toHaveClass('w-30');
+    expect(select).not.toHaveClass('min-w-30');
     expect(select.parentElement).not.toHaveClass('p-0.5');
   });
 
diff --git a/frontend-modern/src/components/shared/FilterBar/FilterBar.tsx b/frontend-modern/src/components/shared/FilterBar/FilterBar.tsx
index 8b2a4e1124..4488d97a77 100644
--- a/frontend-modern/src/components/shared/FilterBar/FilterBar.tsx
+++ b/frontend-modern/src/components/shared/FilterBar/FilterBar.tsx
@@ -67,7 +67,7 @@ const FilterSearchTermChip: Component<{
   term: FilterSearchTerm;
   onRemove: () => void;
 }> = (props) => (
-  <div class="inline-flex items-center rounded-full border border-blue-200 bg-blue-50 text-xs dark:border-blue-900 dark:bg-blue-950/40">
+  <div class="inline-flex items-center rounded-full border border-blue-200 bg-blue-50 text-xs dark:border-blue-900/25 dark:bg-blue-950/40">
     <span class="py-0.5 pl-2 pr-1 font-medium text-base-content">{props.term.label}</span>
     <button
       type="button"
@@ -277,7 +277,7 @@ export const FilterBar: Component<FilterBarProps> = (props) => {
             </Show>
             <Show when={hasAddableMenuFilters() || hasClearableState() || hasAuxiliaryControls()}>
               <div
-                class="inline-flex max-w-full flex-shrink-0 flex-wrap items-center justify-start gap-2"
+                class="inline-flex max-w-full shrink-0 flex-wrap items-center justify-start gap-2"
                 data-filter-action-cluster
               >
                 <Show when={hasAddableMenuFilters()}>
diff --git a/frontend-modern/src/components/shared/FilterBar/FilterChip.tsx b/frontend-modern/src/components/shared/FilterBar/FilterChip.tsx
index f0d65e3c33..8cc358e3b2 100644
--- a/frontend-modern/src/components/shared/FilterBar/FilterChip.tsx
+++ b/frontend-modern/src/components/shared/FilterBar/FilterChip.tsx
@@ -115,7 +115,7 @@ export const FilterChip: Component<FilterChipProps> = (props) => {
 
   return (
     <div ref={containerRef} class="relative inline-flex">
-      <div class="inline-flex items-center rounded-full border border-blue-200 bg-blue-50 text-xs dark:border-blue-900 dark:bg-blue-950/40">
+      <div class="inline-flex items-center rounded-full border border-blue-200 bg-blue-50 text-xs dark:border-blue-900/25 dark:bg-blue-950/40">
         <button
           type="button"
           onClick={() => setOpen((value) => !value)}
@@ -155,7 +155,7 @@ export const FilterChip: Component<FilterChipProps> = (props) => {
               onKeyDown={handleSearchKeyDown}
               placeholder="Filter values..."
               aria-label={`Filter ${props.filter.label} values`}
-              class="w-full bg-transparent py-1.5 pl-7 pr-2 text-xs text-base-content placeholder-muted outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:rounded"
+              class="w-full bg-transparent py-1.5 pl-7 pr-2 text-xs text-base-content placeholder-muted outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:rounded-sm"
             />
           </div>
           <div class="max-h-64 overflow-y-auto py-1">
diff --git a/frontend-modern/src/components/shared/FilterBar/ViewOptionsDisclosure.test.tsx b/frontend-modern/src/components/shared/FilterBar/ViewOptionsDisclosure.test.tsx
index a8ab2f677f..f3e6c3abaa 100644
--- a/frontend-modern/src/components/shared/FilterBar/ViewOptionsDisclosure.test.tsx
+++ b/frontend-modern/src/components/shared/FilterBar/ViewOptionsDisclosure.test.tsx
@@ -32,7 +32,7 @@ describe('ViewOptionsDisclosure', () => {
     fireEvent.click(trigger);
 
     const region = screen.getByRole('region', { name: 'View preferences' });
-    expect(region).toHaveClass('border', 'bg-surface-alt/40');
+    expect(region).toHaveClass('border');
     expect(region).not.toHaveClass('absolute', 'fixed', 'shadow-lg');
     expect(region.firstElementChild?.nextElementSibling).toHaveClass('view-options-grid', 'grid');
     expect(screen.getByRole('button', { name: 'Grouped' })).toBeInTheDocument();
diff --git a/frontend-modern/src/components/shared/FilterBar/ViewOptionsDisclosure.tsx b/frontend-modern/src/components/shared/FilterBar/ViewOptionsDisclosure.tsx
index 78b86cacf4..e6e8b88e37 100644
--- a/frontend-modern/src/components/shared/FilterBar/ViewOptionsDisclosure.tsx
+++ b/frontend-modern/src/components/shared/FilterBar/ViewOptionsDisclosure.tsx
@@ -80,7 +80,7 @@ export const ViewOptionsDisclosurePanel: Component<ViewOptionsDisclosurePanelPro
         event.preventDefault();
         props.state.close(true);
       }}
-      class="rounded-md border border-border-subtle bg-surface-alt/40 p-3"
+      class="rounded-md border border-border-subtle p-3"
     >
       <div class="mb-3 border-b border-border-subtle pb-2">
         <div id={props.state.titleId} class="text-xs font-medium text-base-content">
diff --git a/frontend-modern/src/components/shared/FilterButtonGroup.test.tsx b/frontend-modern/src/components/shared/FilterButtonGroup.test.tsx
index 76655066cd..3c73a5e58b 100644
--- a/frontend-modern/src/components/shared/FilterButtonGroup.test.tsx
+++ b/frontend-modern/src/components/shared/FilterButtonGroup.test.tsx
@@ -123,7 +123,7 @@ describe('FilterButtonGroup', () => {
     const inactiveButton = screen.getByRole('button', { name: /fahrenheit/i });
 
     expect(activeButton.className).toContain('bg-surface');
-    expect(activeButton.className).toContain('shadow-sm');
+    expect(activeButton.className).toContain('shadow-xs');
     expect(activeButton.className).not.toContain('text-blue-600');
 
     expect(inactiveButton.className).toContain('text-muted');
@@ -171,7 +171,7 @@ describe('FilterButtonGroup', () => {
     const inactiveButton = within(group).getByRole('button', { name: 'VMs' });
 
     expect(activeButton.className).toContain('text-base-content');
-    expect(activeButton.className).toContain('shadow-sm');
+    expect(activeButton.className).toContain('shadow-xs');
     expect(inactiveButton.className).toContain('text-muted');
   });
 
diff --git a/frontend-modern/src/components/shared/FilterButtonGroup.tsx b/frontend-modern/src/components/shared/FilterButtonGroup.tsx
index 19f3ea62f6..fd48011f61 100644
--- a/frontend-modern/src/components/shared/FilterButtonGroup.tsx
+++ b/frontend-modern/src/components/shared/FilterButtonGroup.tsx
@@ -91,7 +91,7 @@ export function FilterButtonGroup<T extends string | number>(props: FilterButton
                 </Show>
                 <Show when={option.count !== undefined}>
                   <span
-                    class="inline-block text-[11px] font-semibold leading-4 tabular-nums text-base-content/70"
+                    class="inline-block text-[11px] font-semibold leading-4 tabular-nums"
                     aria-hidden="true"
                   >
                     {option.count!.toLocaleString()}
diff --git a/frontend-modern/src/components/shared/FilterToolbar.test.tsx b/frontend-modern/src/components/shared/FilterToolbar.test.tsx
index ac8df9afbb..5c70e44310 100644
--- a/frontend-modern/src/components/shared/FilterToolbar.test.tsx
+++ b/frontend-modern/src/components/shared/FilterToolbar.test.tsx
@@ -265,7 +265,7 @@ describe('FilterHeader', () => {
 
   it('keeps shared filter popovers above nested table and card shells', () => {
     expect(filterPanelClass).toContain('absolute');
-    expect(filterPanelClass).toContain('z-[80]');
+    expect(filterPanelClass).toContain('z-80');
     expect(filterPanelClass).not.toContain('w-[min(40rem,calc(100vw-2rem))]');
     expect(filterPanelDefaultWidthClass).toContain('w-[min(40rem,calc(100vw-2rem))]');
     expect(filterToolbarSource).toContain("'flex min-h-11 items-center gap-1.5");
diff --git a/frontend-modern/src/components/shared/FilterToolbar.tsx b/frontend-modern/src/components/shared/FilterToolbar.tsx
index fb1820bb16..8545a6bb4a 100644
--- a/frontend-modern/src/components/shared/FilterToolbar.tsx
+++ b/frontend-modern/src/components/shared/FilterToolbar.tsx
@@ -20,12 +20,12 @@ export const filterLabelClass =
 export const filterToolbarControlClass =
   'min-h-11 rounded-md text-xs font-medium sm:h-7 sm:min-h-0';
 export const filterActionButtonClass = `inline-flex items-center gap-1.5 ${filterToolbarControlClass} bg-surface-hover px-2.5 text-muted ring-1 ring-border-subtle transition-colors hover:bg-surface hover:text-base-content`;
-export const filterActionButtonActiveClass = 'bg-surface text-base-content shadow-sm';
+export const filterActionButtonActiveClass = 'bg-surface text-base-content shadow-xs';
 export const filterSelectClass =
-  'min-h-11 rounded-md border border-border bg-surface px-2 text-xs font-medium text-base-content outline-none focus:border-blue-500 sm:h-7 sm:min-h-0';
+  'min-h-11 rounded-md border border-border bg-surface px-2 text-xs font-medium text-base-content outline-hidden focus:border-blue-500 sm:h-7 sm:min-h-0';
 export const filterDividerClass = 'hidden h-5 w-px bg-surface-hover sm:block';
 export const filterPanelClass =
-  'absolute right-0 top-[calc(100%+0.5rem)] z-[80] rounded-md border border-border bg-surface p-3 shadow-lg';
+  'absolute right-0 top-[calc(100%+0.5rem)] z-80 rounded-md border border-border bg-surface p-3 shadow-lg';
 export const filterPanelDefaultWidthClass = 'w-[min(40rem,calc(100vw-2rem))]';
 export const filterPanelTitleClass = 'text-sm font-medium text-base-content';
 export const filterPanelDescriptionClass = 'text-xs text-muted';
diff --git a/frontend-modern/src/components/shared/Form.ts b/frontend-modern/src/components/shared/Form.ts
index 9f70d3a74c..6633b0bdb9 100644
--- a/frontend-modern/src/components/shared/Form.ts
+++ b/frontend-modern/src/components/shared/Form.ts
@@ -3,14 +3,14 @@ const baseLabel = 'text-sm font-medium text-base-content';
 const baseHelp = 'text-xs text-muted';
 const baseControl = [
   'w-full min-h-11 sm:min-h-9 rounded-md border border-border bg-surface px-3 py-2.5 text-sm text-base-content',
-  'focus:outline-none focus:ring-0 focus:border-blue-500 transition-colors',
+  'focus:outline-hidden focus:ring-0 focus:border-blue-500 transition-colors',
 ].join(' ');
 const compactControl = [
-  'w-full min-h-11 sm:min-h-8 rounded border border-border bg-surface px-2 py-1.5 text-xs text-base-content',
-  'focus:outline-none focus:ring-0 focus:border-blue-500 transition-colors',
+  'w-full min-h-11 sm:min-h-8 rounded-sm border border-border bg-surface px-2 py-1.5 text-xs text-base-content',
+  'focus:outline-hidden focus:ring-0 focus:border-blue-500 transition-colors',
 ].join(' ');
 const baseCheckbox =
-  'h-4 w-4 rounded border-border text-blue-600 focus:ring-0 focus:ring-offset-0 transition-colors';
+  'h-4 w-4 rounded-sm border-border text-blue-600 focus:ring-0 focus:ring-offset-0 transition-colors';
 
 const join = (base: string, extra?: string) => (extra ? `${base} ${extra}`.trim() : base);
 
diff --git a/frontend-modern/src/components/shared/HelpIcon.tsx b/frontend-modern/src/components/shared/HelpIcon.tsx
index 15f15100be..ab98ec2f05 100644
--- a/frontend-modern/src/components/shared/HelpIcon.tsx
+++ b/frontend-modern/src/components/shared/HelpIcon.tsx
@@ -24,7 +24,7 @@ export const HelpIcon: Component<HelpIconProps> = (props) => {
       <button
         ref={state.setButtonRef}
         type="button"
-        class={`inline-flex min-h-11 min-w-11 items-center justify-center rounded-full p-1 text-slate-400 transition-colors hover:text-blue-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 sm:min-h-8 sm:min-w-8 dark:hover:text-blue-400 ${props.class ?? ''}`}
+        class={`inline-flex min-h-11 min-w-11 items-center justify-center rounded-full p-1 text-slate-400 transition-colors hover:text-blue-500 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500 sm:min-h-8 sm:min-w-8 dark:hover:text-blue-400 ${props.class ?? ''}`}
         onClick={state.toggleOpen}
         aria-label={`Help: ${helpContent.title}`}
         aria-expanded={state.isOpen()}
@@ -41,7 +41,7 @@ export const HelpIcon: Component<HelpIconProps> = (props) => {
             id={popoverId}
             role="dialog"
             aria-labelledby={titleId}
-            class="fixed z-[9999] bg-surface rounded-md shadow-sm border border-border overflow-hidden animate-in fade-in-0 zoom-in-95 duration-150"
+            class="fixed z-9999 bg-surface rounded-md shadow-xs border border-border overflow-hidden animate-in fade-in-0 zoom-in-95 duration-150"
             style={{
               top: `${state.popoverPosition().top}px`,
               left: `${state.popoverPosition().left}px`,
@@ -57,7 +57,7 @@ export const HelpIcon: Component<HelpIconProps> = (props) => {
               <button
                 ref={state.setCloseButtonRef}
                 type="button"
-                class="inline-flex min-h-11 min-w-11 items-center justify-center rounded text-slate-400 transition-colors hover:text-muted sm:min-h-8 sm:min-w-8"
+                class="inline-flex min-h-11 min-w-11 items-center justify-center rounded-sm text-slate-400 transition-colors hover:text-muted sm:min-h-8 sm:min-w-8"
                 onClick={state.closeAndRestoreFocus}
                 aria-label="Close help"
               >
diff --git a/frontend-modern/src/components/shared/HistoryChart.tsx b/frontend-modern/src/components/shared/HistoryChart.tsx
index 47841fccb2..2d29824a33 100644
--- a/frontend-modern/src/components/shared/HistoryChart.tsx
+++ b/frontend-modern/src/components/shared/HistoryChart.tsx
@@ -44,7 +44,7 @@ export const HistoryChart: Component<HistoryChartProps> = (props) => {
 
   return (
     <div
-      class={`flex flex-col h-full ${props.compact ? '' : 'bg-surface rounded-md shadow-sm border border-border p-4'}`}
+      class={`flex flex-col h-full ${props.compact ? '' : 'bg-surface rounded-md shadow-xs border border-border p-4'}`}
     >
       <HistoryChartHeader
         chart={chart}
@@ -68,7 +68,7 @@ export const HistoryChart: Component<HistoryChartProps> = (props) => {
       >
         <canvas
           ref={canvasRef}
-          class="block w-full h-full cursor-crosshair rounded focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-500"
+          class="block w-full h-full cursor-crosshair rounded-sm focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-blue-500"
           tabIndex={0}
           onFocus={chart.handleFocus}
           onBlur={chart.handleBlur}
diff --git a/frontend-modern/src/components/shared/HistoryChartHeader.tsx b/frontend-modern/src/components/shared/HistoryChartHeader.tsx
index a5dcb45407..d6527f5049 100644
--- a/frontend-modern/src/components/shared/HistoryChartHeader.tsx
+++ b/frontend-modern/src/components/shared/HistoryChartHeader.tsx
@@ -22,8 +22,8 @@ export const HistoryChartHeader: Component<HistoryChartHeaderProps> = (props) =>
           <span
             class={`text-[10px] font-semibold px-2 py-0.5 rounded-full uppercase tracking-wide ${
               props.chart.source() === 'live'
-                ? 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300'
-                : 'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300'
+                ? 'bg-red-100 text-red-700 dark:bg-red-900/25 dark:text-red-300'
+                : 'bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300'
             }`}
             title={
               props.chart.source() === 'live'
@@ -60,7 +60,7 @@ export const HistoryChartHeader: Component<HistoryChartHeaderProps> = (props) =>
                 onClick={() => props.chart.updateRange(range)}
                 class={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
                   props.chart.range() === range
-                    ? 'bg-surface text-base-content shadow-sm'
+                    ? 'bg-surface text-base-content shadow-xs'
                     : 'text-muted hover:text-base-content'
                 }`}
               >
diff --git a/frontend-modern/src/components/shared/HistoryChartOverlay.tsx b/frontend-modern/src/components/shared/HistoryChartOverlay.tsx
index 2244e8d0db..9921a0404e 100644
--- a/frontend-modern/src/components/shared/HistoryChartOverlay.tsx
+++ b/frontend-modern/src/components/shared/HistoryChartOverlay.tsx
@@ -54,7 +54,7 @@ export const HistoryChartOverlay: Component<HistoryChartOverlayProps> = (props)
 
       <Show when={props.chart.isLocked() && !props.hideLock}>
         <div class="absolute inset-0 z-10 flex flex-col items-center justify-center bg-surface rounded-md">
-          <div class="bg-indigo-500 rounded-full p-3 shadow-sm mb-3">
+          <div class="bg-indigo-500 rounded-full p-3 shadow-xs mb-3">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="24"
diff --git a/frontend-modern/src/components/shared/HistoryChartTooltip.tsx b/frontend-modern/src/components/shared/HistoryChartTooltip.tsx
index a20bf653d2..b0c8d82fd8 100644
--- a/frontend-modern/src/components/shared/HistoryChartTooltip.tsx
+++ b/frontend-modern/src/components/shared/HistoryChartTooltip.tsx
@@ -39,7 +39,7 @@ export const HistoryChartTooltip: Component<HistoryChartTooltipProps> = (props)
             >
               <div
                 data-history-chart-tooltip="true"
-                class="h-full w-full rounded border border-border bg-surface px-2 py-1 text-xs text-base-content shadow-lg"
+                class="h-full w-full rounded-sm border border-border bg-surface px-2 py-1 text-xs text-base-content shadow-lg"
               >
                 <div class="mb-0.5 text-center font-medium">
                   {new Date(point().timestamp).toLocaleString()}
diff --git a/frontend-modern/src/components/shared/InfoCardFrame.test.tsx b/frontend-modern/src/components/shared/InfoCardFrame.test.tsx
index f87fbe1fa4..d4494759c9 100644
--- a/frontend-modern/src/components/shared/InfoCardFrame.test.tsx
+++ b/frontend-modern/src/components/shared/InfoCardFrame.test.tsx
@@ -21,12 +21,12 @@ describe('InfoCardFrame', () => {
 
     const card = screen.getByTestId('card');
 
-    expect(card).toHaveClass('rounded');
+    expect(card).toHaveClass('rounded-sm');
     expect(card).toHaveClass('border');
     expect(card).toHaveClass('border-border');
     expect(card).toHaveClass('bg-surface');
     expect(card).toHaveClass('p-3');
-    expect(card).toHaveClass('shadow-sm');
+    expect(card).toHaveClass('shadow-xs');
     expect(screen.getByText('Storage')).toBeInTheDocument();
   });
 
diff --git a/frontend-modern/src/components/shared/InfoCardFrame.tsx b/frontend-modern/src/components/shared/InfoCardFrame.tsx
index 6ff37c0edc..9d79ca2f52 100644
--- a/frontend-modern/src/components/shared/InfoCardFrame.tsx
+++ b/frontend-modern/src/components/shared/InfoCardFrame.tsx
@@ -18,7 +18,7 @@ export interface InfoCardKeyValueRowProps extends Omit<
   desktopAt?: 'sm' | 'lg';
 }
 
-export const INFO_CARD_FRAME_CLASS = 'rounded border border-border bg-surface p-3 shadow-sm';
+export const INFO_CARD_FRAME_CLASS = 'rounded-sm border border-border bg-surface p-3 shadow-xs';
 
 export const INFO_CARD_KEY_VALUE_ROW_CLASS = 'flex min-w-0 items-start justify-between gap-3';
 
diff --git a/frontend-modern/src/components/shared/KeyboardShortcutsModal.tsx b/frontend-modern/src/components/shared/KeyboardShortcutsModal.tsx
index 02728edd6e..2a8ba2e53a 100644
--- a/frontend-modern/src/components/shared/KeyboardShortcutsModal.tsx
+++ b/frontend-modern/src/components/shared/KeyboardShortcutsModal.tsx
@@ -103,7 +103,7 @@ export function KeyboardShortcutsModal(props: KeyboardShortcutsModalProps) {
                   {(item) => (
                     <div class="flex items-center justify-between text-sm text-base-content">
                       <span>{item.description}</span>
-                      <span class="rounded bg-surface-alt px-2 py-1 text-xs font-medium text-base-content">
+                      <span class="rounded-sm bg-surface-alt px-2 py-1 text-xs font-medium text-base-content">
                         {item.keys}
                       </span>
                     </div>
diff --git a/frontend-modern/src/components/shared/MetadataBadge.test.tsx b/frontend-modern/src/components/shared/MetadataBadge.test.tsx
index 171a1f0c8b..0d0e80b428 100644
--- a/frontend-modern/src/components/shared/MetadataBadge.test.tsx
+++ b/frontend-modern/src/components/shared/MetadataBadge.test.tsx
@@ -14,7 +14,7 @@ describe('MetadataBadge', () => {
 
     const badge = screen.getByText('pending');
     expect(badge).toHaveClass('inline-flex');
-    expect(badge).toHaveClass('rounded');
+    expect(badge).toHaveClass('rounded-sm');
     expect(badge).toHaveClass('text-[10px]');
     expect(badge).toHaveClass('uppercase');
     expect(badge).toHaveClass('bg-amber-100');
diff --git a/frontend-modern/src/components/shared/MetadataBadge.tsx b/frontend-modern/src/components/shared/MetadataBadge.tsx
index a6ac91a78d..00ca796e85 100644
--- a/frontend-modern/src/components/shared/MetadataBadge.tsx
+++ b/frontend-modern/src/components/shared/MetadataBadge.tsx
@@ -36,7 +36,7 @@ const METADATA_BADGE_SIZE_CLASSES: Record<MetadataBadgeSize, string> = {
 
 const METADATA_BADGE_SHAPE_CLASSES: Record<MetadataBadgeShape, string> = {
   pill: 'rounded-full',
-  rounded: 'rounded',
+  rounded: 'rounded-sm',
 };
 
 const METADATA_BADGE_TONE_CLASSES: Record<
@@ -46,31 +46,31 @@ const METADATA_BADGE_TONE_CLASSES: Record<
   filled: {
     neutral: 'bg-surface-alt text-base-content',
     muted: 'bg-surface-alt text-muted',
-    info: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
-    success: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-200',
-    warning: 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200',
-    danger: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
+    info: 'bg-blue-100 text-blue-800 dark:bg-blue-900/25 dark:text-blue-200',
+    success: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/25 dark:text-emerald-200',
+    warning: 'bg-amber-100 text-amber-800 dark:bg-amber-900/25 dark:text-amber-200',
+    danger: 'bg-red-100 text-red-800 dark:bg-red-900/25 dark:text-red-200',
     orange: 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200',
-    sky: 'bg-sky-100 text-sky-800 dark:bg-sky-900 dark:text-sky-200',
-    teal: 'bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-200',
-    indigo: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200',
+    sky: 'bg-sky-100 text-sky-800 dark:bg-sky-900/25 dark:text-sky-200',
+    teal: 'bg-teal-100 text-teal-800 dark:bg-teal-900/25 dark:text-teal-200',
+    indigo: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900/25 dark:text-indigo-200',
   },
   outline: {
     neutral: 'border border-border bg-surface text-base-content',
     muted: 'border border-border bg-surface-alt text-muted',
-    info: 'border border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-900 dark:text-blue-300',
+    info: 'border border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-900/25 dark:text-blue-300',
     success:
-      'border border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-900 dark:text-emerald-300',
+      'border border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-900/25 dark:text-emerald-300',
     warning:
-      'border border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-900 dark:text-amber-300',
+      'border border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-900/25 dark:text-amber-300',
     danger:
-      'border border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-900 dark:text-red-300',
+      'border border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-900/25 dark:text-red-300',
     orange:
       'border border-orange-200 bg-orange-50 text-orange-700 dark:border-orange-800 dark:bg-orange-900 dark:text-orange-300',
-    sky: 'border border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-800 dark:bg-sky-900 dark:text-sky-300',
-    teal: 'border border-teal-200 bg-teal-50 text-teal-700 dark:border-teal-800 dark:bg-teal-900 dark:text-teal-300',
+    sky: 'border border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-800 dark:bg-sky-900/25 dark:text-sky-300',
+    teal: 'border border-teal-200 bg-teal-50 text-teal-700 dark:border-teal-800 dark:bg-teal-900/25 dark:text-teal-300',
     indigo:
-      'border border-indigo-200 bg-indigo-50 text-indigo-700 dark:border-indigo-800 dark:bg-indigo-900 dark:text-indigo-300',
+      'border border-indigo-200 bg-indigo-50 text-indigo-700 dark:border-indigo-800 dark:bg-indigo-900/25 dark:text-indigo-300',
   },
 };
 
diff --git a/frontend-modern/src/components/shared/MobileNavBar.tsx b/frontend-modern/src/components/shared/MobileNavBar.tsx
index 1c139e5bd5..6e670833fd 100644
--- a/frontend-modern/src/components/shared/MobileNavBar.tsx
+++ b/frontend-modern/src/components/shared/MobileNavBar.tsx
@@ -75,7 +75,7 @@ function MobileNavDestinationContent(props: {
       </span>
       <span class="min-w-0 truncate">{tab().label}</span>
       <Show when={props.destination.kind === 'primary' && !props.destination.tab.enabled}>
-        <span class="rounded-full bg-amber-100 px-1.5 py-0.5 text-[9px] font-semibold text-amber-700 dark:bg-amber-900 dark:text-amber-200">
+        <span class="rounded-full bg-amber-100 px-1.5 py-0.5 text-[9px] font-semibold text-amber-700 dark:bg-amber-900/25 dark:text-amber-200">
           Setup
         </span>
       </Show>
@@ -88,7 +88,7 @@ function MobileNavDestinationContent(props: {
         <span aria-hidden="true" class="h-1.5 w-1.5 rounded-full bg-red-500"></span>
       </Show>
       <Show when={utilityTab()?.badge === 'pro'}>
-        <span class="rounded-full bg-blue-100 px-1.5 py-0.5 text-[9px] font-semibold text-blue-700 dark:bg-blue-900 dark:text-blue-300">
+        <span class="rounded-full bg-blue-100 px-1.5 py-0.5 text-[9px] font-semibold text-blue-700 dark:bg-blue-900/25 dark:text-blue-300">
           Pro
         </span>
       </Show>
@@ -191,7 +191,7 @@ export function MobileNavBar(props: MobileNavBarProps) {
                 title={destination.tab.tooltip}
                 class={`flex min-h-11 w-full items-center gap-3 rounded-md px-3 py-2 text-left text-sm transition-colors ${
                   active()
-                    ? 'bg-blue-50 font-semibold text-blue-700 dark:bg-blue-900 dark:text-blue-300'
+                    ? 'bg-blue-50 font-semibold text-blue-700 dark:bg-blue-900/25 dark:text-blue-300'
                     : 'text-base-content hover:bg-surface-hover'
                 } ${enabled() === false ? 'opacity-70' : ''}`.trim()}
               >
diff --git a/frontend-modern/src/components/shared/NodeGroupHeader.tsx b/frontend-modern/src/components/shared/NodeGroupHeader.tsx
index eca6f48345..0c3b9feb69 100644
--- a/frontend-modern/src/components/shared/NodeGroupHeader.tsx
+++ b/frontend-modern/src/components/shared/NodeGroupHeader.tsx
@@ -69,7 +69,7 @@ export const NodeGroupHeader: Component<NodeGroupHeaderProps> = (props) => {
           class={
             props.node.isClusterMember
               ? GROUPED_TABLE_ROW_BADGE_CLASS
-              : 'rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-surface-alt text-muted'
+              : 'rounded-sm px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-surface-alt text-muted'
           }
         >
           {props.node.isClusterMember ? props.node.clusterName : 'Standalone'}
@@ -78,7 +78,7 @@ export const NodeGroupHeader: Component<NodeGroupHeaderProps> = (props) => {
 
       <Show when={props.node.linkedAgentId}>
         <span
-          class="inline-flex items-center rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-400"
+          class="inline-flex items-center rounded-sm px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-emerald-100 text-emerald-700 dark:bg-emerald-900/25 dark:text-emerald-400"
           title="Pulse agent is installed on this node for enhanced metrics (temperatures, detailed disks, RAID status)"
         >
           Agent
diff --git a/frontend-modern/src/components/shared/ObjectDrawerHeader.tsx b/frontend-modern/src/components/shared/ObjectDrawerHeader.tsx
index 68d12d2ad9..210bbcbcf0 100644
--- a/frontend-modern/src/components/shared/ObjectDrawerHeader.tsx
+++ b/frontend-modern/src/components/shared/ObjectDrawerHeader.tsx
@@ -24,14 +24,14 @@ export function ObjectDrawerHeader(props: ObjectDrawerHeaderProps) {
     >
       <button
         type="button"
-        class="absolute inset-0 z-0 cursor-pointer rounded-md transition-colors hover:bg-surface-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+        class="absolute inset-0 z-0 cursor-pointer rounded-md transition-colors hover:bg-surface-hover focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500"
         onClick={local.onCollapse}
         aria-label={local.collapseLabel}
         title={local.collapseLabel}
       />
       <div class="pointer-events-none relative z-10 min-w-0 flex-1">{local.children}</div>
       <Show when={local.actions}>
-        <div class="pointer-events-none relative z-10 flex shrink-0 items-center gap-1.5 [&>*]:pointer-events-auto">
+        <div class="pointer-events-none relative z-10 flex shrink-0 items-center gap-1.5 *:pointer-events-auto">
           {local.actions}
         </div>
       </Show>
diff --git a/frontend-modern/src/components/shared/ProgressBar.tsx b/frontend-modern/src/components/shared/ProgressBar.tsx
index db2b72dc1b..3bb3cf0e86 100644
--- a/frontend-modern/src/components/shared/ProgressBar.tsx
+++ b/frontend-modern/src/components/shared/ProgressBar.tsx
@@ -21,7 +21,7 @@ export const ProgressBar: Component<ProgressBarProps> = (props) => {
 
   return (
     <div
-      class={`relative w-full overflow-hidden rounded bg-surface-hover ${props.class ?? ''}`}
+      class={`relative w-full overflow-hidden rounded-sm bg-surface-hover ${props.class ?? ''}`}
       role={props.ariaLabel ? 'progressbar' : undefined}
       aria-label={props.ariaLabel}
       aria-valuemin={props.ariaLabel ? 0 : undefined}
diff --git a/frontend-modern/src/components/shared/PulseDataGrid.tsx b/frontend-modern/src/components/shared/PulseDataGrid.tsx
index d0afa6befd..2b6e45bdc4 100644
--- a/frontend-modern/src/components/shared/PulseDataGrid.tsx
+++ b/frontend-modern/src/components/shared/PulseDataGrid.tsx
@@ -83,7 +83,7 @@ export function PulseDataGrid<T>(props: PulseDataGridProps<T>) {
                                                     group transition-colors duration-150 animate-enter
                                                     ${
                                                       local.onRowClick
-                                                        ? 'cursor-pointer hover:bg-blue-50 dark:hover:bg-blue-900'
+                                                        ? 'cursor-pointer hover:bg-blue-50 dark:hover:bg-blue-900/25'
                                                         : 'hover:bg-surface-hover'
                                                     }
                                                 `}
@@ -118,7 +118,7 @@ export function PulseDataGrid<T>(props: PulseDataGridProps<T>) {
                       <TableRow
                         class={
                           local.onRowClick
-                            ? 'bg-surface-alt hover:bg-blue-50 dark:hover:bg-blue-900'
+                            ? 'bg-surface-alt hover:bg-blue-50 dark:hover:bg-blue-900/25'
                             : 'bg-surface-alt hover:bg-surface-hover'
                         }
                       >
diff --git a/frontend-modern/src/components/shared/SearchField.tsx b/frontend-modern/src/components/shared/SearchField.tsx
index 6f4ebb1467..1adf83f23b 100644
--- a/frontend-modern/src/components/shared/SearchField.tsx
+++ b/frontend-modern/src/components/shared/SearchField.tsx
@@ -28,7 +28,7 @@ export const SearchField: Component<SearchFieldProps> = (props) => {
         aria-activedescendant={props.ariaActiveDescendant}
         class={`min-h-11 w-full pl-8 sm:min-h-10 sm:pl-9 ${search.inputPaddingRight()} py-1.5 sm:py-2 text-sm border border-border rounded-md
  bg-surface text-base-content placeholder-muted
- focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-400 outline-none transition-all disabled:opacity-60 disabled:cursor-not-allowed ${props.inputClass ?? ''}`}
+ focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-400 outline-hidden transition-all disabled:opacity-60 disabled:cursor-not-allowed ${props.inputClass ?? ''}`}
         title={props.title}
       />
       <Show when={props.completionSuffix}>
@@ -57,14 +57,14 @@ export const SearchField: Component<SearchFieldProps> = (props) => {
       </svg>
       <div class="absolute inset-y-0 right-2 flex items-center gap-1">
         <Show when={search.showShortcutHint()}>
-          <span class="pointer-events-none hidden items-center rounded border border-border bg-surface-alt px-1.5 py-0.5 text-[10px] font-semibold text-muted sm:inline-flex">
+          <span class="pointer-events-none hidden items-center rounded-sm border border-border bg-surface-alt px-1.5 py-0.5 text-[10px] font-semibold text-muted sm:inline-flex">
             {props.shortcutHint}
           </span>
         </Show>
         <Show when={search.showClearButton()}>
           <button
             type="button"
-            class="inline-flex h-11 w-11 items-center justify-center rounded-full bg-surface-hover text-muted transition-all duration-150 hover:bg-red-100 hover:text-red-600 active:scale-90 sm:h-6 sm:w-6 dark:hover:bg-red-900 dark:hover:text-red-400"
+            class="inline-flex h-11 w-11 items-center justify-center rounded-full bg-surface-hover text-muted transition-all duration-150 hover:bg-red-100 hover:text-red-600 active:scale-90 sm:h-6 sm:w-6 dark:hover:bg-red-900/25 dark:hover:text-red-400"
             onClick={() => props.onChange('')}
             onMouseDown={props.onClearMouseDown}
             aria-label="Clear search"
diff --git a/frontend-modern/src/components/shared/SearchTipsPopover.tsx b/frontend-modern/src/components/shared/SearchTipsPopover.tsx
index 1d967877d4..7e8ed51626 100644
--- a/frontend-modern/src/components/shared/SearchTipsPopover.tsx
+++ b/frontend-modern/src/components/shared/SearchTipsPopover.tsx
@@ -68,14 +68,14 @@ export const SearchTipsPopover: Component<SearchTipsPopoverProps> = (props) => {
           aria-label={title()}
           style={state.popoverStyle()}
           onFocusOut={state.handlePopoverBlur}
-          class={`!fixed ${positionClass()} z-50 w-auto overflow-y-auto rounded-md border bg-surface text-left shadow-sm xl:!absolute xl:mt-2 xl:w-72`}
+          class={`fixed! ${positionClass()} z-50 w-auto overflow-y-auto rounded-md border bg-surface text-left shadow-xs xl:absolute! xl:mt-2 xl:w-72`}
         >
           <div class="flex items-center justify-between border-b border-border-subtle px-3 py-2">
             <span class="text-sm font-semibold text-base-content">{title()}</span>
             <button
               ref={state.setCloseButtonRef}
               type="button"
-              class="inline-flex min-h-11 min-w-11 items-center justify-center rounded transition-colors hover:text-muted sm:min-h-8 sm:min-w-8"
+              class="inline-flex min-h-11 min-w-11 items-center justify-center rounded-sm transition-colors hover:text-muted sm:min-h-8 sm:min-w-8"
               onClick={state.closeAndRestoreFocus}
               aria-label="Close search tips"
             >
@@ -97,7 +97,7 @@ export const SearchTipsPopover: Component<SearchTipsPopoverProps> = (props) => {
               <For each={props.tips}>
                 {(tip) => (
                   <div class="flex items-start gap-2">
-                    <code class="whitespace-nowrap rounded bg-surface-alt px-2 py-0.5 font-mono text-[11px] text-base-content">
+                    <code class="whitespace-nowrap rounded-sm bg-surface-alt px-2 py-0.5 font-mono text-[11px] text-base-content">
                       {tip.code}
                     </code>
                     <span class="text-[12px] leading-snug text-muted">{tip.description}</span>
@@ -106,9 +106,9 @@ export const SearchTipsPopover: Component<SearchTipsPopoverProps> = (props) => {
               </For>
             </div>
             <Show when={props.footerText || props.footerHighlight}>
-              <div class="mt-3 rounded-md bg-blue-50 px-3 py-2 text-[11px] text-blue-700 dark:bg-blue-900 dark:text-blue-200">
+              <div class="mt-3 rounded-md bg-blue-50 px-3 py-2 text-[11px] text-blue-700 dark:bg-blue-900/25 dark:text-blue-200">
                 <Show when={props.footerHighlight}>
-                  <code class="mr-1 rounded bg-blue-100 px-1 py-0.5 font-mono text-[11px] text-blue-700 dark:bg-blue-800 dark:text-blue-100">
+                  <code class="mr-1 rounded-sm bg-blue-100 px-1 py-0.5 font-mono text-[11px] text-blue-700 dark:bg-blue-800 dark:text-blue-100">
                     {props.footerHighlight}
                   </code>
                 </Show>
diff --git a/frontend-modern/src/components/shared/SettingsLoadingSkeleton.tsx b/frontend-modern/src/components/shared/SettingsLoadingSkeleton.tsx
index efdc34c7f3..24232d3c31 100644
--- a/frontend-modern/src/components/shared/SettingsLoadingSkeleton.tsx
+++ b/frontend-modern/src/components/shared/SettingsLoadingSkeleton.tsx
@@ -62,7 +62,7 @@ const gapClassByGap: Record<SettingsSkeletonGap, string> = {
 
 const radiusClassByRadius: Record<SettingsSkeletonRadius, string> = {
   none: '',
-  md: 'rounded',
+  md: 'rounded-sm',
   full: 'rounded-full',
 };
 
diff --git a/frontend-modern/src/components/shared/SharedPrimitives.guardrails.test.ts b/frontend-modern/src/components/shared/SharedPrimitives.guardrails.test.ts
index 95c9485247..0048c986e0 100644
--- a/frontend-modern/src/components/shared/SharedPrimitives.guardrails.test.ts
+++ b/frontend-modern/src/components/shared/SharedPrimitives.guardrails.test.ts
@@ -406,7 +406,7 @@ describe('shared primitive guardrails', () => {
         patterns: [
           '<svg',
           'const icons = {',
-          'flex-shrink-0 text-muted hover:text-base-content hover:bg-surface rounded-md p-1.5 transition-all duration-200',
+          'shrink-0 text-muted hover:text-base-content hover:bg-surface rounded-md p-1.5 transition-all duration-200',
         ],
       },
     ]);
@@ -419,7 +419,7 @@ describe('shared primitive guardrails', () => {
     expect(toastSource).not.toContain('<svg');
     expect(toastSource).not.toContain('const icons = {');
     expect(toastSource).not.toContain(
-      'flex-shrink-0 text-muted hover:text-base-content hover:bg-surface rounded-md p-1.5 transition-all duration-200',
+      'shrink-0 text-muted hover:text-base-content hover:bg-surface rounded-md p-1.5 transition-all duration-200',
     );
   });
 
@@ -481,7 +481,7 @@ describe('shared primitive guardrails', () => {
           patterns: expect.arrayContaining([
             'const viewButtonClass',
             'inline-flex items-center gap-1 rounded-md border border-border bg-surface p-1',
-            'inline-flex min-h-8 items-center gap-1.5 rounded-sm px-3 text-xs font-medium transition-colors',
+            'inline-flex min-h-8 items-center gap-1.5 rounded-xs px-3 text-xs font-medium transition-colors',
           ]),
         }),
       ]),
@@ -504,7 +504,7 @@ describe('shared primitive guardrails', () => {
     expect(registeredFeatureGuard?.canonical?.export).toBe('getFilterButtonGroupButtonClass');
     expect(registeredFeatureGuard?.allPatterns).toEqual([
       'inline-flex items-center gap-1 rounded-md border border-border bg-surface p-1',
-      'inline-flex min-h-8 items-center gap-1.5 rounded-sm px-3 text-xs font-medium transition-colors',
+      'inline-flex min-h-8 items-center gap-1.5 rounded-xs px-3 text-xs font-medium transition-colors',
     ]);
     expect(registeredFeatureGuard?.allowedPaths ?? []).toHaveLength(0);
     expect(registeredFeatureGuard?.ignoredPaths).toEqual([
@@ -573,7 +573,7 @@ describe('shared primitive guardrails', () => {
       'inline-flex items-center gap-1 rounded-md border border-border bg-surface p-1',
     );
     expect(proxmoxBackupsTableSource).not.toContain(
-      'inline-flex min-h-8 items-center gap-1.5 rounded-sm px-3 text-xs font-medium transition-colors',
+      'inline-flex min-h-8 items-center gap-1.5 rounded-xs px-3 text-xs font-medium transition-colors',
     );
   });
 
@@ -612,7 +612,7 @@ describe('shared primitive guardrails', () => {
         patterns: [
           'inline-flex min-h-10 sm:min-h-10 items-center rounded-full border px-3 py-2 text-sm font-semibold transition',
           'min-h-10 sm:min-h-10 rounded-full border px-3 py-2 text-sm font-semibold transition',
-          'border-blue-500 bg-blue-600 text-white shadow-sm',
+          'border-blue-500 bg-blue-600 text-white shadow-xs',
           'hover:border-blue-400 hover:text-blue-600 dark:hover:border-blue-400 dark:hover:text-blue-200',
         ],
       },
@@ -621,7 +621,7 @@ describe('shared primitive guardrails', () => {
     expect(registeredGuard?.canonical?.export).toBe('getSelectablePillButtonClass');
     expect(registeredGuard?.allPatterns).toEqual([
       'rounded-full border px-3 py-2 text-sm font-semibold transition',
-      'border-blue-500 bg-blue-600 text-white shadow-sm',
+      'border-blue-500 bg-blue-600 text-white shadow-xs',
       'hover:border-blue-400 hover:text-blue-600',
     ]);
     expect(registeredGuard?.scopes).toEqual([
@@ -650,7 +650,7 @@ describe('shared primitive guardrails', () => {
     expect(apiTokenManagerSource).not.toContain(
       'min-h-10 sm:min-h-10 rounded-full border px-3 py-2 text-sm font-semibold transition',
     );
-    expect(apiTokenManagerSource).not.toContain('border-blue-500 bg-blue-600 text-white shadow-sm');
+    expect(apiTokenManagerSource).not.toContain('border-blue-500 bg-blue-600 text-white shadow-xs');
     expect(apiTokenManagerSource).not.toContain('hover:border-blue-400 hover:text-blue-600');
   });
 
@@ -1194,7 +1194,7 @@ describe('shared primitive guardrails', () => {
       'src/features/docker/DockerHostDrawerOverview.tsx',
       'src/features/storageBackups/detailPresentation.ts',
     ];
-    const retiredFrameClass = 'rounded border border-border bg-surface p-3 shadow-sm';
+    const retiredFrameClass = 'rounded-sm border border-border bg-surface p-3 shadow-xs';
     const registeredRule = registry.rules?.find(
       (rule) => rule.id === 'compact-info-card-frame-shell',
     );
@@ -1312,9 +1312,9 @@ describe('shared primitive guardrails', () => {
       expect(storageDetailSource).not.toContain('STORAGE_DETAIL_HEADER_SELECT_CLASS');
     }
 
-    expect(resourceDetailDrawerSource).not.toContain('listClass="!gap-2 sm:!gap-6"');
+    expect(resourceDetailDrawerSource).not.toContain('listClass="gap-2! sm:gap-6!"');
     expect(resourceDetailDrawerSource).not.toContain(
-      'tabClass="!px-0.5 !text-xs sm:!px-1 sm:!text-sm"',
+      'tabClass="px-0.5! text-xs! sm:px-1! sm:text-sm!"',
     );
   });
 
@@ -1523,7 +1523,7 @@ describe('shared primitive guardrails', () => {
     }
 
     expect(alertHistoryTableSectionSource).not.toContain(
-      'overflow-hidden rounded border border-border',
+      'overflow-hidden rounded-sm border border-border',
     );
     expect(storagePoolsTableSource).not.toContain('STORAGE_POOLS_SCROLL_WRAP_CLASS');
     expect(diskListSource).not.toContain("from '@/components/shared/Card'");
@@ -1813,7 +1813,7 @@ describe('shared primitive guardrails', () => {
         expect.objectContaining({
           path: 'src/components/Settings/ProLicensePlanSection.tsx',
           patterns: expect.arrayContaining([
-            'inline-flex items-center gap-1 mt-3 min-h-10 sm:min-h-9 rounded-md border border-current/20 px-3 py-2 text-xs font-medium hover:bg-black/5 dark:hover:bg-white/5',
+            'inline-flex items-center gap-1 mt-3 min-h-10 sm:min-h-9 rounded-md border px-3 py-2 text-xs font-medium hover:bg-black/5 dark:hover:bg-white/5',
           ]),
         }),
       ]),
@@ -1852,7 +1852,7 @@ describe('shared primitive guardrails', () => {
     }
     expect(proLicensePlanSectionSource).toContain('ButtonLink');
     expect(proLicensePlanSectionSource).not.toContain(
-      'inline-flex items-center gap-1 mt-3 min-h-10 sm:min-h-9 rounded-md border border-current/20 px-3 py-2 text-xs font-medium hover:bg-black/5 dark:hover:bg-white/5',
+      'inline-flex items-center gap-1 mt-3 min-h-10 sm:min-h-9 rounded-md border px-3 py-2 text-xs font-medium hover:bg-black/5 dark:hover:bg-white/5',
     );
     expect(proLicensePlanSectionSource).not.toContain(
       'inline-flex items-center gap-1 mt-4 min-h-10 sm:min-h-9 rounded-md border border-border px-3 py-2 text-xs font-medium text-base-content hover:bg-surface-hover',
@@ -2653,7 +2653,7 @@ describe('shared primitive guardrails', () => {
     );
     expect(patrolFindingMetadataGuard?.canonical?.export).toBe('MetadataBadge');
     expect(patrolFindingMetadataGuard?.allPatterns).toEqual([
-      'px-1.5 py-0.5 border text-[10px] font-medium rounded',
+      'px-1.5 py-0.5 border text-[10px] font-medium rounded-sm',
     ]);
     expect(patrolFindingMetadataGuard?.scopes).toEqual(['src/components/AI']);
     expect(patrolInvestigationMetadataGuard?.canonical?.path).toBe(
@@ -2661,7 +2661,7 @@ describe('shared primitive guardrails', () => {
     );
     expect(patrolInvestigationMetadataGuard?.canonical?.export).toBe('MetadataBadge');
     expect(patrolInvestigationMetadataGuard?.allPatterns).toEqual([
-      'px-1.5 py-0.5 border text-[10px] font-medium rounded',
+      'px-1.5 py-0.5 border text-[10px] font-medium rounded-sm',
     ]);
     expect(patrolInvestigationMetadataGuard?.scopes).toEqual(['src/components/patrol']);
     expect(patrolApprovalToolCallMetadataGuard?.canonical?.path).toBe(
@@ -2670,7 +2670,7 @@ describe('shared primitive guardrails', () => {
     expect(patrolApprovalToolCallMetadataGuard?.canonical?.export).toBe('MetadataBadge');
     expect(patrolApprovalToolCallMetadataGuard?.allPatterns).toEqual([
       'px-1.5 py-0.5',
-      'text-[10px] font-medium rounded',
+      'text-[10px] font-medium rounded-sm',
     ]);
     expect(patrolApprovalToolCallMetadataGuard?.scopes).toEqual(['src/components/patrol']);
     expect(proxmoxBackupMetadataGuard?.canonical?.path).toBe(
@@ -2678,7 +2678,7 @@ describe('shared primitive guardrails', () => {
     );
     expect(proxmoxBackupMetadataGuard?.canonical?.export).toBe('MetadataBadge');
     expect(proxmoxBackupMetadataGuard?.allPatterns).toEqual([
-      'rounded-sm px-1.5 py-0.5 text-[10px] font-semibold',
+      'rounded-xs px-1.5 py-0.5 text-[10px] font-semibold',
     ]);
     expect(proxmoxBackupMetadataGuard?.scopes).toEqual(['src/features/proxmox']);
 
@@ -2720,7 +2720,7 @@ describe('shared primitive guardrails', () => {
       'inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium',
     );
     expect(runHistoryEntrySource).not.toContain(
-      'inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-blue-50',
+      'inline-flex items-center gap-1 px-1.5 py-0.5 rounded-sm bg-blue-50',
     );
     expect(patrolIntelligenceWorkspaceSource).toContain('MetadataBadge');
     expect(patrolIntelligenceWorkspaceSource).toContain('tone={group.tone}');
@@ -2740,7 +2740,7 @@ describe('shared primitive guardrails', () => {
     expect(findingsPanelSource).toContain('MetadataBadge');
     expect(findingsPanelSource).toContain('FINDING_ROW_BADGE_PROPS');
     expect(findingsPanelSource).not.toContain(
-      'px-1.5 py-0.5 border text-[10px] font-medium rounded',
+      'px-1.5 py-0.5 border text-[10px] font-medium rounded-sm',
     );
     expect(findingsPanelSource).not.toContain('getFindingStatusBadgeClasses');
     expect(findingsPanelSource).not.toContain('getFindingSourceBadgeClasses');
@@ -2751,7 +2751,7 @@ describe('shared primitive guardrails', () => {
     expect(investigationSectionSource).toContain('MetadataBadge');
     expect(investigationSectionSource).toContain('INVESTIGATION_BADGE_PROPS');
     expect(investigationSectionSource).not.toContain(
-      'px-1.5 py-0.5 border text-[10px] font-medium rounded',
+      'px-1.5 py-0.5 border text-[10px] font-medium rounded-sm',
     );
     expect(investigationSectionSource).not.toContain('getInvestigationStatusBadgeClasses');
     expect(investigationSectionSource).not.toContain('getInvestigationOutcomeBadgeClasses');
@@ -2763,7 +2763,7 @@ describe('shared primitive guardrails', () => {
     expect(proxmoxBackupsTableSharedSource).toContain('presentation().badgeTone');
     expect(proxmoxBackupsTableSharedSource).not.toContain('presentation().badgeClassName');
     expect(proxmoxBackupsTableSharedSource).not.toContain(
-      'inline-flex items-center rounded-sm px-1.5 py-0.5 text-[10px] font-semibold',
+      'inline-flex items-center rounded-xs px-1.5 py-0.5 text-[10px] font-semibold',
     );
   });
 
@@ -3441,20 +3441,20 @@ describe('shared primitive guardrails', () => {
         expect.objectContaining({
           path: 'src/components/Settings/OrganizationAccessMembersSection.tsx',
           patterns: expect.arrayContaining([
-            'inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-red-600 hover:bg-red-50 dark:text-red-300 dark:hover:bg-red-900 disabled:cursor-not-allowed disabled:opacity-60',
+            'inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-red-600 hover:bg-red-50 dark:text-red-300 dark:hover:bg-red-900/25 disabled:cursor-not-allowed disabled:opacity-60',
           ]),
         }),
         expect.objectContaining({
           path: 'src/components/Settings/OrganizationIncomingSharesSection.tsx',
           patterns: expect.arrayContaining([
-            'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium text-emerald-700 hover:bg-emerald-50 dark:text-emerald-300 dark:hover:bg-emerald-900 disabled:cursor-not-allowed disabled:opacity-60',
-            'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium text-red-600 hover:bg-red-50 dark:text-red-300 dark:hover:bg-red-900 disabled:cursor-not-allowed disabled:opacity-60',
+            'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium text-emerald-700 hover:bg-emerald-50 dark:text-emerald-300 dark:hover:bg-emerald-900/25 disabled:cursor-not-allowed disabled:opacity-60',
+            'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium text-red-600 hover:bg-red-50 dark:text-red-300 dark:hover:bg-red-900/25 disabled:cursor-not-allowed disabled:opacity-60',
           ]),
         }),
         expect.objectContaining({
           path: 'src/components/Settings/OrganizationOutgoingSharesSection.tsx',
           patterns: expect.arrayContaining([
-            'inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-red-600 hover:bg-red-50 dark:text-red-300 dark:hover:bg-red-900 disabled:cursor-not-allowed disabled:opacity-60',
+            'inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-red-600 hover:bg-red-50 dark:text-red-300 dark:hover:bg-red-900/25 disabled:cursor-not-allowed disabled:opacity-60',
           ]),
         }),
         expect.objectContaining({
@@ -3501,7 +3501,7 @@ describe('shared primitive guardrails', () => {
         expect.objectContaining({
           path: 'src/components/Settings/SecurityAuthPanel.tsx',
           patterns: expect.arrayContaining([
-            'w-full sm:w-auto px-3 py-2 text-xs font-medium rounded-md border border-amber-300 text-amber-800 bg-amber-100 hover:bg-amber-200 transition-colors dark:border-amber-700 dark:text-amber-200 dark:bg-amber-900 dark:hover:bg-amber-800',
+            'w-full sm:w-auto px-3 py-2 text-xs font-medium rounded-md border border-amber-300 text-amber-800 bg-amber-100 hover:bg-amber-200 transition-colors dark:border-amber-700 dark:text-amber-200 dark:bg-amber-900/25 dark:hover:bg-amber-800',
             'w-full sm:w-auto min-h-10 sm:min-h-10 px-4 py-2.5 text-sm font-medium bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors',
             'w-full sm:w-auto min-h-10 sm:min-h-10 px-4 py-2.5 text-sm font-medium border border-border text-base-content rounded-md hover:bg-surface-hover transition-colors',
           ]),
@@ -3526,17 +3526,17 @@ describe('shared primitive guardrails', () => {
           path: 'src/components/Settings/InfrastructureInstallerSection.tsx',
           patterns: expect.arrayContaining([
             'inline-flex items-center justify-center rounded-md bg-emerald-600 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-emerald-700',
-            'inline-flex items-center justify-center rounded-md border border-emerald-300 bg-white px-3 py-2 text-sm font-medium text-emerald-900 transition-colors hover:bg-emerald-100',
-            'inline-flex items-center justify-center rounded-md border border-emerald-300 bg-white px-3 py-2 text-sm font-medium text-emerald-900 hover:bg-emerald-100',
-            'inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium text-emerald-900 hover:bg-emerald-100',
+            'inline-flex items-center justify-center rounded-md border border-emerald-300 bg-white px-3 py-2 text-sm font-medium text-emerald-900/25 transition-colors hover:bg-emerald-100',
+            'inline-flex items-center justify-center rounded-md border border-emerald-300 bg-white px-3 py-2 text-sm font-medium text-emerald-900/25 hover:bg-emerald-100',
+            'inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium text-emerald-900/25 hover:bg-emerald-100',
           ]),
         }),
         expect.objectContaining({
           path: 'src/components/ErrorBoundary.tsx',
           patterns: expect.arrayContaining([
-            'px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700',
-            'px-4 py-2 bg-slate-600 text-white rounded hover:bg-slate-700',
-            'text-xs px-2 py-1 bg-red-600 text-white rounded hover:bg-red-700',
+            'px-4 py-2 bg-blue-600 text-white rounded-sm hover:bg-blue-700',
+            'px-4 py-2 bg-slate-600 text-white rounded-sm hover:bg-slate-700',
+            'text-xs px-2 py-1 bg-red-600 text-white rounded-sm hover:bg-red-700',
           ]),
         }),
         expect.objectContaining({
@@ -3549,7 +3549,7 @@ describe('shared primitive guardrails', () => {
         expect.objectContaining({
           path: 'src/components/UpdateProgressModal.tsx',
           patterns: expect.arrayContaining([
-            'mt-2 px-3 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 rounded',
+            'mt-2 px-3 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-sm',
             'px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors',
           ]),
         }),
@@ -3557,13 +3557,13 @@ describe('shared primitive guardrails', () => {
     );
     expect(errorBoundarySource).toContain("import { Button } from '@/components/shared/Button';");
     expect(errorBoundarySource).not.toContain(
-      'px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700',
+      'px-4 py-2 bg-blue-600 text-white rounded-sm hover:bg-blue-700',
     );
     expect(errorBoundarySource).not.toContain(
-      'px-4 py-2 bg-slate-600 text-white rounded hover:bg-slate-700',
+      'px-4 py-2 bg-slate-600 text-white rounded-sm hover:bg-slate-700',
     );
     expect(errorBoundarySource).not.toContain(
-      'text-xs px-2 py-1 bg-red-600 text-white rounded hover:bg-red-700',
+      'text-xs px-2 py-1 bg-red-600 text-white rounded-sm hover:bg-red-700',
     );
     expect(updateConfirmationModalSource).toContain('ActionIconButton');
     expect(updateConfirmationModalSource).not.toContain(
@@ -3574,7 +3574,7 @@ describe('shared primitive guardrails', () => {
     );
     expect(updateProgressModalSource).toContain('ActionIconButton');
     expect(updateProgressModalSource).not.toContain(
-      'mt-2 px-3 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 rounded',
+      'mt-2 px-3 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-sm',
     );
     expect(updateProgressModalSource).not.toContain(
       'px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors',
@@ -3721,7 +3721,7 @@ describe('shared primitive guardrails', () => {
     expect(patrolSuccessApprovalActionGuard?.canonical?.export).toBe('getButtonClass');
     expect(patrolSuccessApprovalActionGuard?.allPatterns).toEqual([
       'px-3 py-1.5 bg-green-600 hover:bg-green-700',
-      'text-white text-xs font-medium rounded',
+      'text-white text-xs font-medium rounded-sm',
     ]);
     expect(patrolSuccessApprovalActionGuard?.scopes).toEqual([
       'src/components/patrol',
@@ -3737,7 +3737,7 @@ describe('shared primitive guardrails', () => {
     expect(patrolWarningApprovalActionGuard?.canonical?.export).toBe('getButtonClass');
     expect(patrolWarningApprovalActionGuard?.allPatterns).toEqual([
       'px-3 py-1.5 bg-amber-600 hover:bg-amber-700',
-      'text-white text-xs font-medium rounded',
+      'text-white text-xs font-medium rounded-sm',
     ]);
     expect(patrolWarningApprovalActionGuard?.scopes).toEqual([
       'src/components/patrol',
@@ -3753,7 +3753,7 @@ describe('shared primitive guardrails', () => {
     expect(patrolPrimaryApprovalActionGuard?.canonical?.export).toBe('getButtonClass');
     expect(patrolPrimaryApprovalActionGuard?.allPatterns).toEqual([
       'px-3 py-1.5 bg-blue-600 hover:bg-blue-700',
-      'text-white text-xs font-medium rounded',
+      'text-white text-xs font-medium rounded-sm',
     ]);
     expect(patrolPrimaryApprovalActionGuard?.scopes).toEqual([
       'src/components/patrol',
@@ -3784,7 +3784,7 @@ describe('shared primitive guardrails', () => {
     );
     expect(settingsSuccessOutlineActionGuard?.canonical?.export).toBe('getButtonClass');
     expect(settingsSuccessOutlineActionGuard?.allPatterns).toEqual([
-      'rounded-md border border-emerald-300 bg-white px-3 py-2 text-sm font-medium text-emerald-900',
+      'rounded-md border border-emerald-300 bg-white px-3 py-2 text-sm font-medium text-emerald-900/25',
     ]);
     expect(settingsSuccessOutlineActionGuard?.scopes).toEqual([
       'src/components/Settings',
@@ -3800,7 +3800,7 @@ describe('shared primitive guardrails', () => {
     );
     expect(settingsSuccessGhostActionGuard?.canonical?.export).toBe('getButtonClass');
     expect(settingsSuccessGhostActionGuard?.allPatterns).toEqual([
-      'rounded-md px-3 py-2 text-sm font-medium text-emerald-900',
+      'rounded-md px-3 py-2 text-sm font-medium text-emerald-900/25',
     ]);
     expect(settingsSuccessGhostActionGuard?.scopes).toEqual([
       'src/components/Settings',
@@ -3817,7 +3817,7 @@ describe('shared primitive guardrails', () => {
     expect(settingsSuccessGhostRowActionGuard?.canonical?.export).toBe('getButtonClass');
     expect(settingsSuccessGhostRowActionGuard?.allPatterns).toEqual([
       'rounded-md px-2 py-1 text-xs font-medium text-emerald-700',
-      'hover:bg-emerald-50 dark:text-emerald-300 dark:hover:bg-emerald-900',
+      'hover:bg-emerald-50 dark:text-emerald-300 dark:hover:bg-emerald-900/25',
     ]);
     expect(settingsSuccessGhostRowActionGuard?.scopes).toEqual([
       'src/components/Settings',
@@ -3878,7 +3878,7 @@ describe('shared primitive guardrails', () => {
     expect(settingsDangerGhostRowActionGuard?.canonical?.export).toBe('getButtonClass');
     expect(settingsDangerGhostRowActionGuard?.allPatterns).toEqual([
       'rounded-md px-2 py-1 text-xs font-medium text-red-600',
-      'hover:bg-red-50 dark:text-red-300 dark:hover:bg-red-900',
+      'hover:bg-red-50 dark:text-red-300 dark:hover:bg-red-900/25',
     ]);
     expect(settingsDangerGhostRowActionGuard?.scopes).toEqual([
       'src/components/Settings',
@@ -4016,7 +4016,7 @@ describe('shared primitive guardrails', () => {
     expect(drawerHeaderActionGuard?.canonical?.path).toBe('src/components/shared/Button.tsx');
     expect(drawerHeaderActionGuard?.canonical?.export).toBe('DrawerHeaderActionButton');
     expect(drawerHeaderActionGuard?.allPatterns).toEqual([
-      'inline-flex h-8 min-h-11 min-w-11 items-center gap-1.5 rounded border border-border bg-surface px-2 text-xs font-medium text-base-content transition-colors hover:bg-surface-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500',
+      'inline-flex h-8 min-h-11 min-w-11 items-center gap-1.5 rounded-sm border border-border bg-surface px-2 text-xs font-medium text-base-content transition-colors hover:bg-surface-hover focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500',
     ]);
     expect(drawerHeaderActionGuard?.scopes).toEqual([
       'src/components',
@@ -4030,7 +4030,7 @@ describe('shared primitive guardrails', () => {
     expect(drawerHeaderIconGuard?.canonical?.path).toBe('src/components/shared/Button.tsx');
     expect(drawerHeaderIconGuard?.canonical?.export).toBe('DrawerHeaderIconButton');
     expect(drawerHeaderIconGuard?.allPatterns).toEqual([
-      'inline-flex h-8 w-8 min-h-11 min-w-11 items-center justify-center rounded-md hover:bg-surface-hover hover:text-base-content focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500',
+      'inline-flex h-8 w-8 min-h-11 min-w-11 items-center justify-center rounded-md hover:bg-surface-hover hover:text-base-content focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500',
     ]);
     expect(drawerHeaderIconGuard?.scopes).toEqual(['src/components', 'src/features', 'src/pages']);
     expect(drawerHeaderIconGuard?.allowedPaths ?? []).toHaveLength(0);
@@ -4086,35 +4086,35 @@ describe('shared primitive guardrails', () => {
         expect.objectContaining({
           path: 'src/components/AI/Chat/index.tsx',
           patterns: expect.arrayContaining([
-            'flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md border border-border bg-surface text-muted transition-colors hover:border-border hover:bg-surface-hover hover:text-base-content disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-surface disabled:hover:text-muted',
-            'flex-shrink-0 p-2 hover:text-base-content rounded-md hover:bg-surface-hover transition-colors',
-            'inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-blue-700 transition-colors hover:bg-blue-100 hover:text-blue-950 disabled:cursor-wait disabled:opacity-70 dark:text-blue-200 dark:hover:bg-blue-900/60',
-            'rounded p-1 text-muted opacity-0 transition-opacity hover:bg-blue-100 hover:text-blue-600 focus:opacity-100 group-hover:opacity-100 group-focus-within:opacity-100 dark:hover:bg-blue-900 dark:hover:text-blue-300',
-            'order-2 flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-md hover:text-base-content hover:bg-surface-hover transition-colors sm:order-none',
-            'flex h-7 w-7 items-center justify-center rounded-md border border-amber-200 bg-surface text-amber-700 transition-colors hover:bg-amber-100 hover:text-amber-900 dark:border-amber-800 dark:bg-amber-950/60 dark:text-amber-200 dark:hover:bg-amber-900',
-            'flex h-7 w-7 items-center justify-center rounded-md text-amber-700 transition-colors hover:bg-amber-100 hover:text-amber-900 dark:text-amber-200 dark:hover:bg-amber-900',
-            'inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-blue-700 transition-colors hover:bg-blue-100 hover:text-blue-950 dark:text-blue-200 dark:hover:bg-blue-900/60',
-            'flex h-9 w-9 items-center justify-center rounded-md bg-blue-600 text-white shadow-sm transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-45',
-            'flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-border bg-surface text-muted transition-colors hover:border-border hover:bg-surface-hover hover:text-base-content focus:outline-none focus:ring-2 focus:ring-blue-500/30',
+            'flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-border bg-surface text-muted transition-colors hover:border-border hover:bg-surface-hover hover:text-base-content disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-surface disabled:hover:text-muted',
+            'shrink-0 p-2 hover:text-base-content rounded-md hover:bg-surface-hover transition-colors',
+            'inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-blue-700 transition-colors hover:bg-blue-100 hover:text-blue-950/25 disabled:cursor-wait disabled:opacity-70 dark:text-blue-200 dark:hover:bg-blue-900/60',
+            'rounded-sm p-1 text-muted opacity-0 transition-opacity hover:bg-blue-100 hover:text-blue-600 focus:opacity-100 group-hover:opacity-100 group-focus-within:opacity-100 dark:hover:bg-blue-900/25 dark:hover:text-blue-300',
+            'order-2 flex h-9 w-9 shrink-0 items-center justify-center rounded-md hover:text-base-content hover:bg-surface-hover transition-colors sm:order-0',
+            'flex h-7 w-7 items-center justify-center rounded-md border border-amber-200 bg-surface text-amber-700 transition-colors hover:bg-amber-100 hover:text-amber-900/25 dark:border-amber-800 dark:bg-amber-950/60 dark:text-amber-200 dark:hover:bg-amber-900/25',
+            'flex h-7 w-7 items-center justify-center rounded-md text-amber-700 transition-colors hover:bg-amber-100 hover:text-amber-900/25 dark:text-amber-200 dark:hover:bg-amber-900/25',
+            'inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-blue-700 transition-colors hover:bg-blue-100 hover:text-blue-950/25 dark:text-blue-200 dark:hover:bg-blue-900/60',
+            'flex h-9 w-9 items-center justify-center rounded-md bg-blue-600 text-white shadow-xs transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-45',
+            'flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-border bg-surface text-muted transition-colors hover:border-border hover:bg-surface-hover hover:text-base-content focus:outline-hidden focus:ring-2 focus:ring-blue-500/30',
           ]),
         }),
         expect.objectContaining({
           path: 'src/components/AI/Chat/MessageItem.tsx',
           patterns: expect.arrayContaining([
-            'inline-flex h-5 w-5 items-center justify-center rounded text-blue-700 transition-colors hover:bg-blue-100 hover:text-blue-950 focus:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500/30',
+            'inline-flex h-5 w-5 items-center justify-center rounded-sm text-blue-700 transition-colors hover:bg-blue-100 hover:text-blue-950/25 focus:bg-blue-100 focus:outline-hidden focus:ring-2 focus:ring-blue-500/30',
           ]),
         }),
         expect.objectContaining({
           path: 'src/features/standalone/AgentsMachinesTable.tsx',
           patterns: expect.arrayContaining([
-            'inline-flex h-7 w-7 items-center justify-center rounded-md text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60',
+            'inline-flex h-7 w-7 items-center justify-center rounded-md text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500/60',
           ]),
         }),
         expect.objectContaining({
           path: 'src/components/Settings/SSOProvidersPanel.tsx',
           patterns: expect.arrayContaining([
             'p-2 text-slate-500 hover:text-blue-600 hover:bg-surface-hover rounded-md transition-colors',
-            'p-2 text-slate-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900 rounded-md transition-colors',
+            'p-2 text-slate-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/25 rounded-md transition-colors',
             'class="text-slate-400 hover:text-base-content"',
           ]),
         }),
@@ -4122,7 +4122,7 @@ describe('shared primitive guardrails', () => {
           path: 'src/components/Settings/RolesPanel.tsx',
           patterns: expect.arrayContaining([
             'p-1.5 rounded-md text-slate-500 hover:text-blue-600 hover:bg-surface-hover dark:hover:text-blue-300',
-            'p-1.5 rounded-md text-slate-500 hover:text-red-600 hover:bg-red-50 dark:hover:text-red-400 dark:hover:bg-red-900',
+            'p-1.5 rounded-md text-slate-500 hover:text-red-600 hover:bg-red-50 dark:hover:text-red-400 dark:hover:bg-red-900/25',
           ]),
         }),
       ]),
@@ -4142,7 +4142,7 @@ describe('shared primitive guardrails', () => {
     );
     expect(standaloneAgentMachineActionGuard?.canonical?.export).toBe('ActionIconButton');
     expect(standaloneAgentMachineActionGuard?.allPatterns).toEqual([
-      'inline-flex h-7 w-7 items-center justify-center rounded-md text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60',
+      'inline-flex h-7 w-7 items-center justify-center rounded-md text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500/60',
     ]);
     expect(standaloneAgentMachineActionGuard?.scopes).toEqual([
       'src/features/standalone/AgentsMachinesTable.tsx',
@@ -4156,7 +4156,7 @@ describe('shared primitive guardrails', () => {
     );
     expect(aiChatMessageQueuedActionGuard?.canonical?.export).toBe('ActionIconButton');
     expect(aiChatMessageQueuedActionGuard?.allPatterns).toEqual([
-      'inline-flex h-5 w-5 items-center justify-center rounded text-blue-700 transition-colors hover:bg-blue-100 hover:text-blue-950 focus:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500/30',
+      'inline-flex h-5 w-5 items-center justify-center rounded-sm text-blue-700 transition-colors hover:bg-blue-100 hover:text-blue-950/25 focus:bg-blue-100 focus:outline-hidden focus:ring-2 focus:ring-blue-500/30',
     ]);
     expect(aiChatMessageQueuedActionGuard?.scopes).toEqual([
       'src/components/AI/Chat/MessageItem.tsx',
@@ -4182,13 +4182,13 @@ describe('shared primitive guardrails', () => {
       ]);
     }
     expect(aiChatActionIconHeaderGuard?.allPatterns).toEqual([
-      'flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md border border-border bg-surface text-muted transition-colors hover:border-border hover:bg-surface-hover hover:text-base-content',
+      'flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-border bg-surface text-muted transition-colors hover:border-border hover:bg-surface-hover hover:text-base-content',
     ]);
     expect(aiChatActionIconAccentGuard?.allPatterns).toEqual([
-      'inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-blue-700 transition-colors hover:bg-blue-100 hover:text-blue-950',
+      'inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-blue-700 transition-colors hover:bg-blue-100 hover:text-blue-950/25',
     ]);
     expect(aiChatActionIconPrimarySendGuard?.allPatterns).toEqual([
-      'flex h-9 w-9 items-center justify-center rounded-md bg-blue-600 text-white shadow-sm transition-colors hover:bg-blue-700',
+      'flex h-9 w-9 items-center justify-center rounded-md bg-blue-600 text-white shadow-xs transition-colors hover:bg-blue-700',
     ]);
     expect(aiChatActionIconWarningGuard?.allPatterns).toEqual([
       'flex h-7 w-7 items-center justify-center rounded-md border border-amber-200 bg-surface text-amber-700 transition-colors hover:bg-amber-100',
@@ -4212,8 +4212,8 @@ describe('shared primitive guardrails', () => {
           patterns: expect.arrayContaining([
             'lucide-solid/icons/copy',
             "lucide-solid/icons/check';",
-            'mt-1 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-border-subtle bg-surface text-muted opacity-0 shadow-sm transition-opacity hover:text-base-content',
-            'ml-auto inline-flex h-7 w-7 items-center justify-center rounded-md border border-border-subtle bg-surface text-muted opacity-0 shadow-sm transition-opacity hover:text-base-content',
+            'mt-1 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-border-subtle bg-surface text-muted opacity-0 shadow-xs transition-opacity hover:text-base-content',
+            'ml-auto inline-flex h-7 w-7 items-center justify-center rounded-md border border-border-subtle bg-surface text-muted opacity-0 shadow-xs transition-opacity hover:text-base-content',
           ]),
         }),
         expect.objectContaining({
@@ -4221,7 +4221,7 @@ describe('shared primitive guardrails', () => {
           patterns: expect.arrayContaining([
             'lucide-solid/icons/copy',
             "lucide-solid/icons/check';",
-            'inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border border-border-subtle bg-surface text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus:outline-none focus:ring-2 focus:ring-blue-500/30',
+            'inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-sm border border-border-subtle bg-surface text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus:outline-hidden focus:ring-2 focus:ring-blue-500/30',
           ]),
         }),
       ]),
@@ -4235,14 +4235,14 @@ describe('shared primitive guardrails', () => {
     expect(aiChatMessageCopyValueGuard?.scopes).toEqual(['src/components/AI/Chat/MessageItem.tsx']);
     expect(aiChatMessageCopyValueGuard?.allPatterns).toEqual([
       'inline-flex h-7 w-7',
-      'border border-border-subtle bg-surface text-muted opacity-0 shadow-sm transition-opacity hover:text-base-content',
+      'border border-border-subtle bg-surface text-muted opacity-0 shadow-xs transition-opacity hover:text-base-content',
       'CopyIcon class="h-3.5 w-3.5"',
     ]);
     expect(aiChatToolCopyValueGuard?.scopes).toEqual([
       'src/components/AI/Chat/ToolExecutionBlock.tsx',
     ]);
     expect(aiChatToolCopyValueGuard?.allPatterns).toEqual([
-      'inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border border-border-subtle bg-surface text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus:outline-none focus:ring-2 focus:ring-blue-500/30',
+      'inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-sm border border-border-subtle bg-surface text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus:outline-hidden focus:ring-2 focus:ring-blue-500/30',
       'CopyIcon class="h-3 w-3"',
     ]);
     expect(copyableCodeRowRule?.canonical?.path).toBe('src/components/shared/CopyableCodeRow.tsx');
@@ -4270,7 +4270,7 @@ describe('shared primitive guardrails', () => {
     expect(copyValueNeutralGuard?.canonical?.path).toBe('src/components/shared/Button.tsx');
     expect(copyValueNeutralGuard?.canonical?.export).toBe('CopyValueButton');
     expect(copyValueNeutralGuard?.allPatterns).toEqual([
-      'inline-flex min-h-7 min-w-7 shrink-0 items-center justify-center rounded border border-border bg-surface px-2 text-muted transition-colors hover:bg-surface-hover hover:text-base-content',
+      'inline-flex min-h-7 min-w-7 shrink-0 items-center justify-center rounded-sm border border-border bg-surface px-2 text-muted transition-colors hover:bg-surface-hover hover:text-base-content',
       'fallback={<CopyIcon class="h-3.5 w-3.5" />}',
     ]);
     expect(copyValueMutedGuard?.canonical?.path).toBe('src/components/shared/Button.tsx');
@@ -4282,13 +4282,13 @@ describe('shared primitive guardrails', () => {
     expect(copyValueAccentGuard?.canonical?.path).toBe('src/components/shared/Button.tsx');
     expect(copyValueAccentGuard?.canonical?.export).toBe('CopyValueButton');
     expect(copyValueAccentGuard?.allPatterns).toEqual([
-      'inline-flex min-h-7 min-w-7 shrink-0 items-center justify-center rounded text-blue-700 transition-colors hover:bg-blue-100 dark:text-blue-200 dark:hover:bg-blue-950',
+      'inline-flex min-h-7 min-w-7 shrink-0 items-center justify-center rounded-sm text-blue-700 transition-colors hover:bg-blue-100 dark:text-blue-200 dark:hover:bg-blue-950/25',
       'fallback={<CopyIcon class="h-3.5 w-3.5" />}',
     ]);
     expect(copyableCodeRowGuard?.canonical?.path).toBe('src/components/shared/CopyableCodeRow.tsx');
     expect(copyableCodeRowGuard?.canonical?.export).toBe('CopyableCodeRow');
     expect(copyableCodeRowGuard?.allPatterns).toEqual([
-      'flex items-start gap-2 rounded bg-surface-alt px-2 py-1.5',
+      'flex items-start gap-2 rounded-sm bg-surface-alt px-2 py-1.5',
       'break-all font-mono text-xs text-base-content',
     ]);
 
@@ -4354,10 +4354,10 @@ describe('shared primitive guardrails', () => {
       expect(drawerSource).toContain('ObjectDrawerHeader');
       expect(drawerSource).not.toContain('@/components/shared/Button');
       expect(drawerSource).not.toContain(
-        'inline-flex h-8 min-h-11 min-w-11 items-center gap-1.5 rounded border border-border bg-surface px-2 text-xs font-medium text-base-content transition-colors hover:bg-surface-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500',
+        'inline-flex h-8 min-h-11 min-w-11 items-center gap-1.5 rounded-sm border border-border bg-surface px-2 text-xs font-medium text-base-content transition-colors hover:bg-surface-hover focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500',
       );
       expect(drawerSource).not.toContain(
-        'inline-flex h-8 w-8 min-h-11 min-w-11 items-center justify-center rounded-md hover:bg-surface-hover hover:text-base-content focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500',
+        'inline-flex h-8 w-8 min-h-11 min-w-11 items-center justify-center rounded-md hover:bg-surface-hover hover:text-base-content focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500',
       );
     }
     expect(objectDrawerHeaderSource).toContain('absolute inset-0');
@@ -4371,23 +4371,23 @@ describe('shared primitive guardrails', () => {
     expect(aiChatSource).toContain('@/components/shared/Button');
     expect(aiChatSource).toContain('ActionIconButton');
     for (const retiredActionIconShell of [
-      'flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md border border-border bg-surface text-muted transition-colors hover:border-border hover:bg-surface-hover hover:text-base-content disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-surface disabled:hover:text-muted',
-      'flex-shrink-0 p-2 hover:text-base-content rounded-md hover:bg-surface-hover transition-colors',
-      'inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-blue-700 transition-colors hover:bg-blue-100 hover:text-blue-950 disabled:cursor-wait disabled:opacity-70 dark:text-blue-200 dark:hover:bg-blue-900/60',
-      'rounded p-1 text-muted opacity-0 transition-opacity hover:bg-blue-100 hover:text-blue-600 focus:opacity-100 group-hover:opacity-100 group-focus-within:opacity-100 dark:hover:bg-blue-900 dark:hover:text-blue-300',
-      'order-2 flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-md hover:text-base-content hover:bg-surface-hover transition-colors sm:order-none',
-      'flex h-7 w-7 items-center justify-center rounded-md border border-amber-200 bg-surface text-amber-700 transition-colors hover:bg-amber-100 hover:text-amber-900 dark:border-amber-800 dark:bg-amber-950/60 dark:text-amber-200 dark:hover:bg-amber-900',
-      'flex h-7 w-7 items-center justify-center rounded-md text-amber-700 transition-colors hover:bg-amber-100 hover:text-amber-900 dark:text-amber-200 dark:hover:bg-amber-900',
-      'inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-blue-700 transition-colors hover:bg-blue-100 hover:text-blue-950 dark:text-blue-200 dark:hover:bg-blue-900/60',
-      'flex h-9 w-9 items-center justify-center rounded-md bg-blue-600 text-white shadow-sm transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-45',
-      'flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-border bg-surface text-muted transition-colors hover:border-border hover:bg-surface-hover hover:text-base-content focus:outline-none focus:ring-2 focus:ring-blue-500/30',
+      'flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-border bg-surface text-muted transition-colors hover:border-border hover:bg-surface-hover hover:text-base-content disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-surface disabled:hover:text-muted',
+      'shrink-0 p-2 hover:text-base-content rounded-md hover:bg-surface-hover transition-colors',
+      'inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-blue-700 transition-colors hover:bg-blue-100 hover:text-blue-950/25 disabled:cursor-wait disabled:opacity-70 dark:text-blue-200 dark:hover:bg-blue-900/60',
+      'rounded-sm p-1 text-muted opacity-0 transition-opacity hover:bg-blue-100 hover:text-blue-600 focus:opacity-100 group-hover:opacity-100 group-focus-within:opacity-100 dark:hover:bg-blue-900/25 dark:hover:text-blue-300',
+      'order-2 flex h-9 w-9 shrink-0 items-center justify-center rounded-md hover:text-base-content hover:bg-surface-hover transition-colors sm:order-0',
+      'flex h-7 w-7 items-center justify-center rounded-md border border-amber-200 bg-surface text-amber-700 transition-colors hover:bg-amber-100 hover:text-amber-900/25 dark:border-amber-800 dark:bg-amber-950/60 dark:text-amber-200 dark:hover:bg-amber-900/25',
+      'flex h-7 w-7 items-center justify-center rounded-md text-amber-700 transition-colors hover:bg-amber-100 hover:text-amber-900/25 dark:text-amber-200 dark:hover:bg-amber-900/25',
+      'inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-blue-700 transition-colors hover:bg-blue-100 hover:text-blue-950/25 dark:text-blue-200 dark:hover:bg-blue-900/60',
+      'flex h-9 w-9 items-center justify-center rounded-md bg-blue-600 text-white shadow-xs transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-45',
+      'flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-border bg-surface text-muted transition-colors hover:border-border hover:bg-surface-hover hover:text-base-content focus:outline-hidden focus:ring-2 focus:ring-blue-500/30',
     ]) {
       expect(aiChatSource).not.toContain(retiredActionIconShell);
     }
     expect(agentsMachinesTableSource).toContain('@/components/shared/Button');
     expect(agentsMachinesTableSource).toContain('ActionIconButton');
     expect(agentsMachinesTableSource).not.toContain(
-      'inline-flex h-7 w-7 items-center justify-center rounded-md text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60',
+      'inline-flex h-7 w-7 items-center justify-center rounded-md text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500/60',
     );
     expect(messageItemSource).toContain('@/components/shared/Button');
     expect(messageItemSource).toContain('ActionIconButton');
@@ -4395,20 +4395,20 @@ describe('shared primitive guardrails', () => {
     expect(messageItemSource).not.toContain('lucide-solid/icons/copy');
     expect(messageItemSource).not.toContain("lucide-solid/icons/check';");
     expect(messageItemSource).not.toContain(
-      'mt-1 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-border-subtle bg-surface text-muted opacity-0 shadow-sm transition-opacity hover:text-base-content',
+      'mt-1 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-border-subtle bg-surface text-muted opacity-0 shadow-xs transition-opacity hover:text-base-content',
     );
     expect(messageItemSource).not.toContain(
-      'ml-auto inline-flex h-7 w-7 items-center justify-center rounded-md border border-border-subtle bg-surface text-muted opacity-0 shadow-sm transition-opacity hover:text-base-content',
+      'ml-auto inline-flex h-7 w-7 items-center justify-center rounded-md border border-border-subtle bg-surface text-muted opacity-0 shadow-xs transition-opacity hover:text-base-content',
     );
     expect(messageItemSource).not.toContain(
-      'inline-flex h-5 w-5 items-center justify-center rounded text-blue-700 transition-colors hover:bg-blue-100 hover:text-blue-950 focus:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500/30',
+      'inline-flex h-5 w-5 items-center justify-center rounded-sm text-blue-700 transition-colors hover:bg-blue-100 hover:text-blue-950/25 focus:bg-blue-100 focus:outline-hidden focus:ring-2 focus:ring-blue-500/30',
     );
     expect(toolExecutionBlockSource).toContain('@/components/shared/Button');
     expect(toolExecutionBlockSource).toContain('CopyValueButton');
     expect(toolExecutionBlockSource).not.toContain('lucide-solid/icons/copy');
     expect(toolExecutionBlockSource).not.toContain("lucide-solid/icons/check';");
     expect(toolExecutionBlockSource).not.toContain(
-      'inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border border-border-subtle bg-surface text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus:outline-none focus:ring-2 focus:ring-blue-500/30',
+      'inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-sm border border-border-subtle bg-surface text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus:outline-hidden focus:ring-2 focus:ring-blue-500/30',
     );
     expect(resourceDetailDrawerDebugTabSource).toContain('@/components/shared/Button');
     expect(resourceDetailDrawerDebugTabSource).not.toContain(
@@ -4510,13 +4510,13 @@ describe('shared primitive guardrails', () => {
       'inline-flex items-center justify-center rounded-md bg-emerald-600 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-emerald-700',
     );
     expect(infrastructureInstallerSectionSource).not.toContain(
-      'inline-flex items-center justify-center rounded-md border border-emerald-300 bg-white px-3 py-2 text-sm font-medium text-emerald-900 transition-colors hover:bg-emerald-100',
+      'inline-flex items-center justify-center rounded-md border border-emerald-300 bg-white px-3 py-2 text-sm font-medium text-emerald-900/25 transition-colors hover:bg-emerald-100',
     );
     expect(infrastructureInstallerSectionSource).not.toContain(
-      'inline-flex items-center justify-center rounded-md border border-emerald-300 bg-white px-3 py-2 text-sm font-medium text-emerald-900 hover:bg-emerald-100',
+      'inline-flex items-center justify-center rounded-md border border-emerald-300 bg-white px-3 py-2 text-sm font-medium text-emerald-900/25 hover:bg-emerald-100',
     );
     expect(infrastructureInstallerSectionSource).not.toContain(
-      'inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium text-emerald-900 hover:bg-emerald-100',
+      'inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium text-emerald-900/25 hover:bg-emerald-100',
     );
     expect(infrastructureInstallerSectionSource).not.toContain('absolute right-2 top-2');
     expect(infrastructureInstallerSectionSource).not.toContain('bg-surface-hover p-2');
@@ -4573,7 +4573,7 @@ describe('shared primitive guardrails', () => {
       'p-1.5 rounded-md text-slate-500 hover:text-blue-600 hover:bg-surface-hover dark:hover:text-blue-300',
     );
     expect(rolesPanelSource).not.toContain(
-      'p-1.5 rounded-md text-slate-500 hover:text-red-600 hover:bg-red-50 dark:hover:text-red-400 dark:hover:bg-red-900',
+      'p-1.5 rounded-md text-slate-500 hover:text-red-600 hover:bg-red-50 dark:hover:text-red-400 dark:hover:bg-red-900/25',
     );
     for (const organizationActionSource of [
       organizationAccessInvitationsSectionSource,
@@ -4610,9 +4610,9 @@ describe('shared primitive guardrails', () => {
       'inline-flex items-center justify-center rounded-md bg-blue-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60',
       'inline-flex items-center justify-center rounded-md border border-border bg-surface px-3 py-1.5 text-sm font-medium text-base-content transition-colors hover:border-red-300 hover:text-red-600 disabled:cursor-not-allowed disabled:opacity-60',
       'inline-flex w-full sm:w-auto items-center justify-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60',
-      'inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-red-600 hover:bg-red-50 dark:text-red-300 dark:hover:bg-red-900 disabled:cursor-not-allowed disabled:opacity-60',
-      'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium text-emerald-700 hover:bg-emerald-50 dark:text-emerald-300 dark:hover:bg-emerald-900 disabled:cursor-not-allowed disabled:opacity-60',
-      'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium text-red-600 hover:bg-red-50 dark:text-red-300 dark:hover:bg-red-900 disabled:cursor-not-allowed disabled:opacity-60',
+      'inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-red-600 hover:bg-red-50 dark:text-red-300 dark:hover:bg-red-900/25 disabled:cursor-not-allowed disabled:opacity-60',
+      'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium text-emerald-700 hover:bg-emerald-50 dark:text-emerald-300 dark:hover:bg-emerald-900/25 disabled:cursor-not-allowed disabled:opacity-60',
+      'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium text-red-600 hover:bg-red-50 dark:text-red-300 dark:hover:bg-red-900/25 disabled:cursor-not-allowed disabled:opacity-60',
       'text-xs font-medium text-blue-700 hover:text-blue-800 dark:text-blue-300 dark:hover:text-blue-200',
     ]) {
       for (const organizationActionSource of [
@@ -4669,7 +4669,7 @@ describe('shared primitive guardrails', () => {
       'min-h-10 sm:min-h-9 px-3 py-2.5 text-sm font-medium bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors flex items-center gap-1.5',
       'min-h-10 sm:min-h-9 px-3 py-2.5 text-sm font-medium border border-border text-base-content rounded-md hover:bg-surface-hover transition-colors flex items-center gap-1.5',
       'p-2 text-slate-500 hover:text-blue-600 hover:bg-surface-hover rounded-md transition-colors',
-      'p-2 text-slate-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900 rounded-md transition-colors',
+      'p-2 text-slate-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/25 rounded-md transition-colors',
       'text-blue-600 hover:underline flex items-center gap-1',
       'px-3 py-2 text-sm font-medium bg-surface-hover text-base-content rounded-md hover:bg-surface-hover disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap',
       'px-4 py-2 text-sm font-medium bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50',
@@ -4687,7 +4687,7 @@ describe('shared primitive guardrails', () => {
     expect(securityAuthPanelSource).toContain('size="settingsAction"');
     expect(securityAuthPanelSource).toContain('size="settingsActionXs"');
     expect(securityAuthPanelSource).not.toContain(
-      'w-full sm:w-auto px-3 py-2 text-xs font-medium rounded-md border border-amber-300 text-amber-800 bg-amber-100 hover:bg-amber-200 transition-colors dark:border-amber-700 dark:text-amber-200 dark:bg-amber-900 dark:hover:bg-amber-800',
+      'w-full sm:w-auto px-3 py-2 text-xs font-medium rounded-md border border-amber-300 text-amber-800 bg-amber-100 hover:bg-amber-200 transition-colors dark:border-amber-700 dark:text-amber-200 dark:bg-amber-900/25 dark:hover:bg-amber-800',
     );
     expect(securityAuthPanelSource).not.toContain(
       'w-full sm:w-auto min-h-10 sm:min-h-10 px-4 py-2.5 text-sm font-medium bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors',
@@ -4710,10 +4710,10 @@ describe('shared primitive guardrails', () => {
     expect(discoveryTabSource).not.toContain('const CopyValueButton');
     expect(discoveryTabSource).not.toContain('const CopyableCodeRow');
     expect(discoveryTabSource).not.toContain(
-      'inline-flex min-h-7 min-w-7 shrink-0 items-center justify-center rounded border border-border bg-surface px-2 text-muted transition-colors hover:bg-surface-hover hover:text-base-content',
+      'inline-flex min-h-7 min-w-7 shrink-0 items-center justify-center rounded-sm border border-border bg-surface px-2 text-muted transition-colors hover:bg-surface-hover hover:text-base-content',
     );
     expect(discoveryTabSource).not.toContain(
-      'flex items-start gap-2 rounded bg-surface-alt px-2 py-1.5',
+      'flex items-start gap-2 rounded-sm bg-surface-alt px-2 py-1.5',
     );
     expect(webInterfaceUrlFieldSource).toContain('CopyValueButton');
     expect(webInterfaceUrlFieldSource).not.toContain('CopyIcon class="h-3.5 w-3.5"');
@@ -4798,7 +4798,7 @@ describe('shared primitive guardrails', () => {
       expect.arrayContaining([
         expect.objectContaining({
           path: 'src/components/Settings/AIProviderConfigurationSection.tsx',
-          patterns: expect.arrayContaining(['rounded border border-red-200']),
+          patterns: expect.arrayContaining(['rounded-sm border border-red-200']),
         }),
         expect.objectContaining({
           path: 'src/components/Settings/ConnectionEditor/AddressProbeStep.tsx',
@@ -4869,7 +4869,7 @@ describe('shared primitive guardrails', () => {
       expect(source).toContain('scale="compact"');
       expect(source).toContain('padding="sm"');
     }
-    expect(aiProviderConfigurationSectionSource).not.toContain('rounded border border-red-200');
+    expect(aiProviderConfigurationSectionSource).not.toContain('rounded-sm border border-red-200');
     expect(addressProbeStepSource).not.toContain('rounded-md border border-red-300 bg-red-50');
     expect(addressProbeStepSource).not.toContain('rounded-md border border-amber-300 bg-amber-50');
     expect(availabilityTargetSlotSource).not.toContain('testToneClass');
@@ -4920,8 +4920,8 @@ describe('shared primitive guardrails', () => {
         path: 'src/components/ErrorBoundary.tsx',
         patterns: [
           '<svg',
-          'bg-red-50 dark:bg-red-900 border border-red-200',
-          'p-4 bg-red-50 dark:bg-red-900 border border-red-200',
+          'bg-red-50 dark:bg-red-900/25 border border-red-200',
+          'p-4 bg-red-50 dark:bg-red-900/25 border border-red-200',
         ],
       },
     ]);
@@ -4929,9 +4929,9 @@ describe('shared primitive guardrails', () => {
     expect(errorBoundarySource).toContain("import { Button } from '@/components/shared/Button';");
     expect(errorBoundarySource).toContain('lucide-solid/icons/alert-triangle');
     expect(errorBoundarySource).not.toContain('<svg');
-    expect(errorBoundarySource).not.toContain('bg-red-50 dark:bg-red-900 border border-red-200');
+    expect(errorBoundarySource).not.toContain('bg-red-50 dark:bg-red-900/25 border border-red-200');
     expect(errorBoundarySource).not.toContain(
-      'p-4 bg-red-50 dark:bg-red-900 border border-red-200',
+      'p-4 bg-red-50 dark:bg-red-900/25 border border-red-200',
     );
   });
 
@@ -4959,8 +4959,8 @@ describe('shared primitive guardrails', () => {
         path: 'src/components/UpdateConfirmationModal.tsx',
         patterns: [
           '<svg',
-          'bg-blue-50 dark:bg-blue-900 border border-blue-200',
-          'bg-yellow-50 dark:bg-yellow-900 border border-yellow-200',
+          'bg-blue-50 dark:bg-blue-900/25 border border-blue-200',
+          'bg-yellow-50 dark:bg-yellow-900/25 border border-yellow-200',
           'rounded-md p-4 border',
           'px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors',
         ],
@@ -4969,10 +4969,10 @@ describe('shared primitive guardrails', () => {
         path: 'src/components/UpdateProgressModal.tsx',
         patterns: [
           '<svg',
-          'bg-red-50 dark:bg-red-900 border border-red-200',
-          'bg-blue-50 dark:bg-blue-900 border border-blue-200',
-          'bg-yellow-50 dark:bg-yellow-900 border border-yellow-200',
-          'mt-2 px-3 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 rounded',
+          'bg-red-50 dark:bg-red-900/25 border border-red-200',
+          'bg-blue-50 dark:bg-blue-900/25 border border-blue-200',
+          'bg-yellow-50 dark:bg-yellow-900/25 border border-yellow-200',
+          'mt-2 px-3 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-sm',
         ],
       },
     ]);
@@ -4986,18 +4986,18 @@ describe('shared primitive guardrails', () => {
 
     for (const source of [updateConfirmationModalSource, updateProgressModalSource]) {
       expect(source).not.toContain('<svg');
-      expect(source).not.toContain('bg-blue-50 dark:bg-blue-900 border border-blue-200');
-      expect(source).not.toContain('bg-yellow-50 dark:bg-yellow-900 border border-yellow-200');
+      expect(source).not.toContain('bg-blue-50 dark:bg-blue-900/25 border border-blue-200');
+      expect(source).not.toContain('bg-yellow-50 dark:bg-yellow-900/25 border border-yellow-200');
       expect(source).not.toContain(
         'px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors',
       );
     }
     expect(updateConfirmationModalSource).not.toContain('rounded-md p-4 border');
     expect(updateProgressModalSource).not.toContain(
-      'bg-red-50 dark:bg-red-900 border border-red-200',
+      'bg-red-50 dark:bg-red-900/25 border border-red-200',
     );
     expect(updateProgressModalSource).not.toContain(
-      'mt-2 px-3 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 rounded',
+      'mt-2 px-3 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-sm',
     );
   });
 
@@ -5055,7 +5055,7 @@ describe('shared primitive guardrails', () => {
     ]) {
       expect(source).toContain('InlineNotice');
       expect(source).not.toContain('rounded-lg border border-amber-300 bg-amber-50');
-      expect(source).not.toContain('text-amber-900 underline-offset-2');
+      expect(source).not.toContain('text-amber-900/25 underline-offset-2');
     }
     expect(platformOutdatedAgentNoticeSource).toContain(
       "import { presentationPolicyIsReadOnly } from '@/stores/sessionPresentationPolicy';",
@@ -5087,8 +5087,8 @@ describe('shared primitive guardrails', () => {
         patterns: [
           '<svg',
           '<button',
-          'bg-blue-50 dark:bg-blue-900 border-b border-blue-200 dark:border-blue-800',
-          'p-1 hover:bg-blue-100 dark:hover:bg-blue-800 rounded text-blue-600',
+          'bg-blue-50 dark:bg-blue-900/25 border-b border-blue-200 dark:border-blue-800',
+          'p-1 hover:bg-blue-100 dark:hover:bg-blue-800 rounded-sm text-blue-600',
         ],
       },
     ]);
@@ -5100,10 +5100,10 @@ describe('shared primitive guardrails', () => {
     expect(demoBannerSource).not.toContain('<svg');
     expect(demoBannerSource).not.toContain('<button');
     expect(demoBannerSource).not.toContain(
-      'bg-blue-50 dark:bg-blue-900 border-b border-blue-200 dark:border-blue-800',
+      'bg-blue-50 dark:bg-blue-900/25 border-b border-blue-200 dark:border-blue-800',
     );
     expect(demoBannerSource).not.toContain(
-      'p-1 hover:bg-blue-100 dark:hover:bg-blue-800 rounded text-blue-600',
+      'p-1 hover:bg-blue-100 dark:hover:bg-blue-800 rounded-sm text-blue-600',
     );
   });
 
@@ -5133,9 +5133,9 @@ describe('shared primitive guardrails', () => {
           '<button',
           'toneClasses',
           'buttonClasses',
-          'bg-amber-50 dark:bg-amber-900 border-b border-amber-200',
-          'bg-red-50 dark:bg-red-900 border-b border-red-200',
-          'p-1 rounded transition-colors opacity-70 hover:opacity-100',
+          'bg-amber-50 dark:bg-amber-900/25 border-b border-amber-200',
+          'bg-red-50 dark:bg-red-900/25 border-b border-red-200',
+          'p-1 rounded-sm transition-colors opacity-70 hover:opacity-100',
         ],
       },
     ]);
@@ -5149,13 +5149,13 @@ describe('shared primitive guardrails', () => {
     expect(commercialMigrationBannerSource).not.toContain('toneClasses');
     expect(commercialMigrationBannerSource).not.toContain('buttonClasses');
     expect(commercialMigrationBannerSource).not.toContain(
-      'bg-amber-50 dark:bg-amber-900 border-b border-amber-200',
+      'bg-amber-50 dark:bg-amber-900/25 border-b border-amber-200',
     );
     expect(commercialMigrationBannerSource).not.toContain(
-      'bg-red-50 dark:bg-red-900 border-b border-red-200',
+      'bg-red-50 dark:bg-red-900/25 border-b border-red-200',
     );
     expect(commercialMigrationBannerSource).not.toContain(
-      'p-1 rounded transition-colors opacity-70 hover:opacity-100',
+      'p-1 rounded-sm transition-colors opacity-70 hover:opacity-100',
     );
   });
 
@@ -5456,7 +5456,7 @@ describe('shared primitive guardrails', () => {
     expect(sharedPlatformPageSource).toContain('class={`${PLATFORM_TABLE_HEADER_ROW_CLASS}');
     expect(sharedPlatformPageSource).toContain('class={`${PLATFORM_TABLE_BODY_CLASS}');
     expect(sharedPlatformPageSource).toContain(
-      "export const PLATFORM_TABLE_DEFAULT_RESPONSIVE_MIN_WIDTH_CLASS = 'min-w-[0px]'",
+      "export const PLATFORM_TABLE_DEFAULT_RESPONSIVE_MIN_WIDTH_CLASS = 'min-w-0'",
     );
     expect(sharedPlatformPageSource).toContain('export function getPlatformTableClass');
     expect(sharedPlatformPageSource).toContain("className !== 'min-w-full'");
@@ -8015,7 +8015,7 @@ describe('shared primitive guardrails', () => {
       "colspan={row.layout === 'stacked' ? 2 : undefined}",
     );
     expect(detailSectionTableSource).toContain('lg:grid-cols-[minmax(0,1fr)]');
-    expect(detailSectionTableSource).toContain('[overflow-wrap:anywhere]');
+    expect(detailSectionTableSource).toContain('wrap-anywhere');
 
     expect(detailSectionTableSource).toContain('lg:text-left');
     expect(detailSectionTableSource).toContain('lg:divide-y-0');
@@ -8533,10 +8533,10 @@ describe('shared primitive guardrails', () => {
       'class="flex flex-wrap items-center justify-between gap-x-3 gap-y-2"',
     );
     expect(filterBarSource).toContain(
-      'class="inline-flex max-w-full flex-shrink-0 flex-wrap items-center justify-start gap-2"',
+      'class="inline-flex max-w-full shrink-0 flex-wrap items-center justify-start gap-2"',
     );
     expect(filterBarSource).not.toContain(
-      'class="ml-auto inline-flex flex-shrink-0 flex-wrap items-center justify-end gap-2"',
+      'class="ml-auto inline-flex shrink-0 flex-wrap items-center justify-end gap-2"',
     );
     expect(filterBarSource).toContain('showAddFilterInMobileActionRow');
     expect(filterBarSource).toContain('showLabel={props.showAddFilterLabel === true}');
@@ -8580,14 +8580,14 @@ describe('shared primitive guardrails', () => {
     expect(addFilterMenuSource).toContain('option.value !== filter.defaultValue');
     expect(addFilterMenuSource).toContain('GROUP_ORDER');
     expect(addFilterMenuSource).toContain('filterGroupClass');
-    expect(addFilterMenuSource).toContain('selectClass="w-[7.5rem]"');
-    expect(addFilterMenuSource).not.toContain('min-w-[7.5rem]');
+    expect(addFilterMenuSource).toContain('selectClass="w-30"');
+    expect(addFilterMenuSource).not.toContain('min-w-30');
     expect(addFilterMenuSource).toContain('bg-surface-hover');
     expect(addFilterMenuSource).toContain('ring-border-subtle');
     expect(addFilterMenuSource).toContain('aria-label="Filter"');
     expect(addFilterMenuSource).toContain('filterToolbarControlClass');
     expect(addFilterMenuSource).toContain(
-      "props.showLabel === false ? 'flex-shrink-0' : `${filterGroupClass} flex-shrink-0`",
+      "props.showLabel === false ? 'shrink-0' : `${filterGroupClass} shrink-0`",
     );
     expect(addFilterMenuSource).not.toContain('LabeledFilterSelect');
     // Add-filter selection is intentionally direct: the shared primitive
diff --git a/frontend-modern/src/components/shared/SkipToContentLink.tsx b/frontend-modern/src/components/shared/SkipToContentLink.tsx
index c26099240c..c44928dbe9 100644
--- a/frontend-modern/src/components/shared/SkipToContentLink.tsx
+++ b/frontend-modern/src/components/shared/SkipToContentLink.tsx
@@ -21,7 +21,7 @@ export const SkipToContentLink: Component<{ targetId?: string }> = (props) => {
       onBlur={() => setFocused(false)}
       class={
         focused()
-          ? 'absolute left-2 top-2 z-[100] rounded bg-blue-600 px-3 py-2 text-sm font-medium text-white shadow-lg outline outline-2 outline-offset-2 outline-white'
+          ? 'absolute left-2 top-2 z-100 rounded-sm bg-blue-600 px-3 py-2 text-sm font-medium text-white shadow-lg outline-solid outline-2 outline-offset-2 outline-white'
           : 'sr-only'
       }
     >
diff --git a/frontend-modern/src/components/shared/StatusDot.tsx b/frontend-modern/src/components/shared/StatusDot.tsx
index 76bd3ec26e..8886e0acc7 100644
--- a/frontend-modern/src/components/shared/StatusDot.tsx
+++ b/frontend-modern/src/components/shared/StatusDot.tsx
@@ -35,7 +35,7 @@ export function StatusDot(props: StatusDotProps): JSX.Element {
 
   const className = () =>
     [
-      'inline-block rounded-full flex-shrink-0',
+      'inline-block rounded-full shrink-0',
       SIZE_CLASSES[size()],
       VARIANT_CLASSES[variant()],
       props.pulse ? 'animate-pulse' : '',
diff --git a/frontend-modern/src/components/shared/StatusIndicatorBadge.test.tsx b/frontend-modern/src/components/shared/StatusIndicatorBadge.test.tsx
index 4c32be1b54..e9ca17cd25 100644
--- a/frontend-modern/src/components/shared/StatusIndicatorBadge.test.tsx
+++ b/frontend-modern/src/components/shared/StatusIndicatorBadge.test.tsx
@@ -23,7 +23,7 @@ describe('StatusIndicatorBadge', () => {
     ));
 
     const badge = screen.getByText('Cooldown: Missing');
-    expect(badge).toHaveClass('rounded');
+    expect(badge).toHaveClass('rounded-sm');
     expect(badge).toHaveClass('py-1');
     expect(badge).toHaveClass('bg-amber-100');
     expect(badge.querySelector('[aria-hidden="true"]')).toBeNull();
@@ -36,7 +36,7 @@ describe('StatusIndicatorBadge', () => {
     ));
 
     const badge = screen.getByText('Run in progress');
-    expect(badge).toHaveClass('rounded');
+    expect(badge).toHaveClass('rounded-sm');
     expect(badge).toHaveClass('text-[10px]');
     expect(badge).toHaveClass('bg-blue-100');
     expect(badge).toHaveClass('text-blue-700');
diff --git a/frontend-modern/src/components/shared/StatusIndicatorBadge.tsx b/frontend-modern/src/components/shared/StatusIndicatorBadge.tsx
index ea8a7adb5e..f2272f7fab 100644
--- a/frontend-modern/src/components/shared/StatusIndicatorBadge.tsx
+++ b/frontend-modern/src/components/shared/StatusIndicatorBadge.tsx
@@ -29,7 +29,7 @@ const STATUS_INDICATOR_BADGE_SIZE_CLASSES: Record<StatusIndicatorBadgeSize, stri
 };
 const STATUS_INDICATOR_BADGE_SHAPE_CLASSES: Record<StatusIndicatorBadgeShape, string> = {
   pill: 'rounded-full',
-  rounded: 'rounded',
+  rounded: 'rounded-sm',
 };
 
 export function StatusIndicatorBadge(props: StatusIndicatorBadgeProps): JSX.Element {
diff --git a/frontend-modern/src/components/shared/Subtabs.tsx b/frontend-modern/src/components/shared/Subtabs.tsx
index bd4985031c..059782a057 100644
--- a/frontend-modern/src/components/shared/Subtabs.tsx
+++ b/frontend-modern/src/components/shared/Subtabs.tsx
@@ -41,7 +41,7 @@ export const subtabsListClass =
 export const subtabsRailClass = 'relative min-w-0 flex-1';
 export const subtabsTrailingRowClass = 'flex flex-wrap items-center justify-between gap-3';
 export const subtabButtonClass =
-  'inline-flex min-h-9 shrink-0 select-none items-center whitespace-nowrap border-b-2 px-1 py-1 text-xs font-medium transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-blue-500 sm:min-h-10 sm:py-2 sm:text-sm';
+  'inline-flex min-h-9 shrink-0 select-none items-center whitespace-nowrap border-b-2 px-1 py-1 text-xs font-medium transition-colors focus-visible:outline-solid focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-500 sm:min-h-10 sm:py-2 sm:text-sm';
 export const subtabButtonActiveClass = 'border-blue-600 text-base-content';
 export const subtabButtonInactiveClass = 'border-transparent text-muted hover:text-base-content';
 export const Subtabs: Component<SubtabsProps> = (props) => {
@@ -186,11 +186,11 @@ export const Subtabs: Component<SubtabsProps> = (props) => {
       <Show when={canScrollLeft()}>
         <button
           type="button"
-          class="absolute inset-y-0 left-0 z-10 flex w-10 items-center justify-start bg-gradient-to-r from-surface via-surface to-transparent pl-1 text-muted hover:text-base-content focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-blue-500 sm:hidden"
+          class="absolute inset-y-0 left-0 z-10 flex w-10 items-center justify-start bg-linear-to-r from-surface via-surface to-transparent pl-1 text-muted hover:text-base-content focus-visible:outline-solid focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-500 sm:hidden"
           onClick={() => scrollTabs(-1)}
           aria-label={`${local.ariaLabel}: scroll left`}
         >
-          <span class="flex h-7 w-7 items-center justify-center rounded-full border border-border bg-surface shadow-sm">
+          <span class="flex h-7 w-7 items-center justify-center rounded-full border border-border bg-surface shadow-xs">
             <ChevronLeftIcon class="h-4 w-4" aria-hidden="true" />
           </span>
         </button>
@@ -198,11 +198,11 @@ export const Subtabs: Component<SubtabsProps> = (props) => {
       <Show when={canScrollRight()}>
         <button
           type="button"
-          class="absolute inset-y-0 right-0 z-10 flex w-10 items-center justify-end bg-gradient-to-l from-surface via-surface to-transparent pr-1 text-muted hover:text-base-content focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-blue-500 sm:hidden"
+          class="absolute inset-y-0 right-0 z-10 flex w-10 items-center justify-end bg-linear-to-l from-surface via-surface to-transparent pr-1 text-muted hover:text-base-content focus-visible:outline-solid focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-500 sm:hidden"
           onClick={() => scrollTabs(1)}
           aria-label={`${local.ariaLabel}: scroll right`}
         >
-          <span class="flex h-7 w-7 items-center justify-center rounded-full border border-border bg-surface shadow-sm">
+          <span class="flex h-7 w-7 items-center justify-center rounded-full border border-border bg-surface shadow-xs">
             <ChevronRightIcon class="h-4 w-4" aria-hidden="true" />
           </span>
         </button>
diff --git a/frontend-modern/src/components/shared/TableCardHeader.tsx b/frontend-modern/src/components/shared/TableCardHeader.tsx
index 1fc22b807a..e730046c12 100644
--- a/frontend-modern/src/components/shared/TableCardHeader.tsx
+++ b/frontend-modern/src/components/shared/TableCardHeader.tsx
@@ -13,8 +13,8 @@ export const TABLE_CARD_HEADER_CLASS =
   'flex items-center gap-3 border-b border-border bg-surface-hover px-3 py-1 text-[11px] font-semibold uppercase tracking-wide text-muted';
 
 export const TABLE_CARD_HEADER_CLEAR_BUTTON_CLASS = [
-  'ml-auto inline-flex items-center rounded-sm text-[11px] font-medium normal-case tracking-normal text-muted transition-colors',
-  'hover:text-base-content focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-1',
+  'ml-auto inline-flex items-center rounded-xs text-[11px] font-medium normal-case tracking-normal text-muted transition-colors',
+  'hover:text-base-content focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-1',
 ].join(' ');
 
 const TABLE_CARD_HEADER_ACTIONS_CLEAR_BUTTON_CLASS = TABLE_CARD_HEADER_CLEAR_BUTTON_CLASS.replace(
diff --git a/frontend-modern/src/components/shared/TagBadges.tsx b/frontend-modern/src/components/shared/TagBadges.tsx
index 0bb93af75b..5a3abc12db 100644
--- a/frontend-modern/src/components/shared/TagBadges.tsx
+++ b/frontend-modern/src/components/shared/TagBadges.tsx
@@ -69,7 +69,7 @@ export const TagBadges: Component<TagBadgesProps> = (props) => {
     );
 
     const sharedClass =
-      'group/tag relative inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-1 focus-visible:ring-offset-surface';
+      'group/tag relative inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-1 focus-visible:ring-offset-surface';
 
     return (
       <Show
@@ -132,7 +132,7 @@ export const TagBadges: Component<TagBadgesProps> = (props) => {
         {/* Show +X more indicator if there are multiple hidden tags */}
         <Show when={hiddenTags().length > 1}>
           <span
-            class="relative inline-flex h-5 min-w-5 cursor-help items-center justify-center rounded px-1 text-[10px] leading-none text-muted transition-colors hover:text-base-content focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-1 focus-visible:ring-offset-surface"
+            class="relative inline-flex h-5 min-w-5 cursor-help items-center justify-center rounded-sm px-1 text-[10px] leading-none text-muted transition-colors hover:text-base-content focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-1 focus-visible:ring-offset-surface"
             role="img"
             aria-label={`${hiddenTags().length} more tags: ${hiddenTags().join(', ')}`}
             tabIndex={0}
diff --git a/frontend-modern/src/components/shared/TechnicalDetailsDisclosure.tsx b/frontend-modern/src/components/shared/TechnicalDetailsDisclosure.tsx
index c0e582cdc6..b6866064e0 100644
--- a/frontend-modern/src/components/shared/TechnicalDetailsDisclosure.tsx
+++ b/frontend-modern/src/components/shared/TechnicalDetailsDisclosure.tsx
@@ -26,7 +26,7 @@ const TechnicalDetailsContent: Component<
     {(sections) => (
       <DetailSectionTable
         sections={sections()}
-        class={props.contentClass ?? 'overflow-hidden rounded border border-border bg-surface'}
+        class={props.contentClass ?? 'overflow-hidden rounded-sm border border-border bg-surface'}
       />
     )}
   </Show>
@@ -48,7 +48,7 @@ export const TechnicalDetailsDisclosure: Component<TechnicalDetailsDisclosurePro
   return (
     <details
       data-testid={props.dataTestId}
-      class={props.class ?? 'rounded border border-border bg-surface px-2 py-1.5'}
+      class={props.class ?? 'rounded-sm border border-border bg-surface px-2 py-1.5'}
       onToggle={(event) => setExpanded(event.currentTarget.open)}
     >
       <summary class="cursor-pointer list-none text-[11px] font-medium text-base-content">
diff --git a/frontend-modern/src/components/shared/TlsVerificationWarningBanner.tsx b/frontend-modern/src/components/shared/TlsVerificationWarningBanner.tsx
index 44f06fb2b3..5b02a8388e 100644
--- a/frontend-modern/src/components/shared/TlsVerificationWarningBanner.tsx
+++ b/frontend-modern/src/components/shared/TlsVerificationWarningBanner.tsx
@@ -6,7 +6,7 @@ interface TlsVerificationWarningBannerProps extends JSX.HTMLAttributes<HTMLDivEl
 }
 
 const bannerClass =
-  'rounded-md border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900 dark:border-amber-700 dark:bg-amber-950/40 dark:text-amber-200';
+  'rounded-md border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900/25 dark:border-amber-700 dark:bg-amber-950/40 dark:text-amber-200';
 
 export function TlsVerificationWarningBanner(props: TlsVerificationWarningBannerProps) {
   const [local, rest] = splitProps(props, ['subject', 'remediation', 'class']);
diff --git a/frontend-modern/src/components/shared/Tooltip.tsx b/frontend-modern/src/components/shared/Tooltip.tsx
index 21e11bb9d6..ce8de5c656 100644
--- a/frontend-modern/src/components/shared/Tooltip.tsx
+++ b/frontend-modern/src/components/shared/Tooltip.tsx
@@ -20,7 +20,7 @@ export const Tooltip: Component<TooltipProps> = (props) => {
     <Show when={props.visible}>
       <Portal mount={document.body}>
         <svg
-          class="fixed inset-0 z-[9999] h-screen w-screen overflow-visible pointer-events-none"
+          class="fixed inset-0 z-9999 h-screen w-screen overflow-visible pointer-events-none"
           viewBox={`0 0 ${state.viewport().width} ${state.viewport().height}`}
           preserveAspectRatio="none"
           aria-hidden="true"
@@ -35,7 +35,7 @@ export const Tooltip: Component<TooltipProps> = (props) => {
             <div
               ref={state.setTooltipRef}
               data-tooltip="true"
-              class="inline-block max-w-full whitespace-pre-line rounded-md border border-border bg-surface px-3 py-2 text-xs leading-tight text-base-content shadow-sm"
+              class="inline-block max-w-full whitespace-pre-line rounded-md border border-border bg-surface px-3 py-2 text-xs leading-tight text-base-content shadow-xs"
             >
               {state.sanitizedContent()}
             </div>
diff --git a/frontend-modern/src/components/shared/TooltipPortal.tsx b/frontend-modern/src/components/shared/TooltipPortal.tsx
index 581c8d8e2c..37eae139bd 100644
--- a/frontend-modern/src/components/shared/TooltipPortal.tsx
+++ b/frontend-modern/src/components/shared/TooltipPortal.tsx
@@ -24,7 +24,7 @@ export function TooltipPortal(props: TooltipPortalProps) {
     <Show when={props.when && supportsHoverTooltips()}>
       <Portal mount={document.body}>
         <svg
-          class="fixed inset-0 z-[9999] h-screen w-screen overflow-visible pointer-events-none"
+          class="fixed inset-0 z-9999 h-screen w-screen overflow-visible pointer-events-none"
           viewBox={`0 0 ${state.viewport().width} ${state.viewport().height}`}
           preserveAspectRatio="none"
           aria-hidden="true"
diff --git a/frontend-modern/src/components/shared/WebInterfaceLink.tsx b/frontend-modern/src/components/shared/WebInterfaceLink.tsx
index f4a059e681..7883937a9f 100644
--- a/frontend-modern/src/components/shared/WebInterfaceLink.tsx
+++ b/frontend-modern/src/components/shared/WebInterfaceLink.tsx
@@ -50,7 +50,7 @@ export const WebInterfaceLink: Component<WebInterfaceLinkProps> = (props) => {
           role="img"
           class={
             props.invalidClass ??
-            'inline-flex min-h-6 min-w-6 shrink-0 items-center justify-center rounded text-amber-600 dark:text-amber-400'
+            'inline-flex min-h-6 min-w-6 shrink-0 items-center justify-center rounded-sm text-amber-600 dark:text-amber-400'
           }
           title={props.invalidTitle ?? 'Invalid web interface URL. Pulse will not open it.'}
           aria-label={props.invalidAriaLabel ?? 'Invalid web interface URL'}
@@ -89,7 +89,7 @@ export const ResourceNameWithWebInterfaceLink: Component<ResourceNameWithWebInte
       ariaLabel={props.ariaLabel ?? `Open web interface for ${props.name}`}
       title={props.title}
       invalidAriaLabel={`Web interface URL for ${props.name} is invalid`}
-      class={`-my-1 inline-flex min-h-6 min-w-6 shrink-0 items-center justify-center rounded transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 ${WEB_INTERFACE_LINK_COLOR_CLASS}`}
+      class={`-my-1 inline-flex min-h-6 min-w-6 shrink-0 items-center justify-center rounded-sm transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500 ${WEB_INTERFACE_LINK_COLOR_CLASS}`}
     >
       <ExternalLinkIcon class="h-3.5 w-3.5" aria-hidden="true" />
     </WebInterfaceLink>
diff --git a/frontend-modern/src/components/shared/WebInterfaceUrlField.tsx b/frontend-modern/src/components/shared/WebInterfaceUrlField.tsx
index a0f1c8a41d..5b8fa451be 100644
--- a/frontend-modern/src/components/shared/WebInterfaceUrlField.tsx
+++ b/frontend-modern/src/components/shared/WebInterfaceUrlField.tsx
@@ -47,7 +47,7 @@ export const WebInterfaceUrlField: Component<WebInterfaceUrlFieldProps> = (props
             <WebInterfaceLink
               url={state.normalizedCurrentUrl()}
               ariaLabel="Open saved web interface URL"
-              class="inline-flex min-h-8 min-w-8 items-center justify-center rounded-md text-blue-600 transition-colors hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-900"
+              class="inline-flex min-h-8 min-w-8 items-center justify-center rounded-md text-blue-600 transition-colors hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-900/25"
               title="Open saved web interface URL"
               invalidAriaLabel="Saved web interface URL is invalid"
             >
@@ -100,7 +100,7 @@ export const WebInterfaceUrlField: Component<WebInterfaceUrlFieldProps> = (props
           {(error) => (
             <div
               role="alert"
-              class="mt-2 rounded border border-amber-200 bg-amber-50 p-2 text-[11px] text-amber-800 dark:border-amber-800 dark:bg-amber-900 dark:text-amber-200"
+              class="mt-2 rounded-sm border border-amber-200 bg-amber-50 p-2 text-[11px] text-amber-800 dark:border-amber-800 dark:bg-amber-900/25 dark:text-amber-200"
             >
               <div class="font-medium">Suggested URL rejected</div>
               <p class="mt-0.5">{error()}</p>
@@ -109,7 +109,7 @@ export const WebInterfaceUrlField: Component<WebInterfaceUrlFieldProps> = (props
         </Show>
 
         <Show when={state.showSuggestedDiagnostic()}>
-          <div class="mt-2 rounded border border-amber-200 bg-amber-50 p-2 text-[11px] text-amber-800 dark:border-amber-800 dark:bg-amber-900 dark:text-amber-200">
+          <div class="mt-2 rounded-sm border border-amber-200 bg-amber-50 p-2 text-[11px] text-amber-800 dark:border-amber-800 dark:bg-amber-900/25 dark:text-amber-200">
             <div class="flex items-center gap-1.5 font-medium">
               <span>{state.suggestedUrlFallback().title}</span>
               <DiscoveryProvenanceMarker />
@@ -119,7 +119,7 @@ export const WebInterfaceUrlField: Component<WebInterfaceUrlFieldProps> = (props
         </Show>
 
         <Show when={state.showSuggestedUrl()}>
-          <div class="mt-2 p-2 rounded bg-blue-50 border border-blue-200 dark:bg-blue-900 dark:border-blue-800">
+          <div class="mt-2 p-2 rounded-sm bg-blue-50 border border-blue-200 dark:bg-blue-900/25 dark:border-blue-800">
             <div class="mb-1 flex items-center gap-1.5 text-[10px] font-medium text-blue-700 dark:text-blue-300">
               <span>{state.normalizedCurrentUrl() ? 'Discovered URL' : 'Suggested URL'}</span>
               <DiscoveryProvenanceMarker />
@@ -142,7 +142,7 @@ export const WebInterfaceUrlField: Component<WebInterfaceUrlFieldProps> = (props
               <WebInterfaceLink
                 url={state.normalizedSuggestedUrl()}
                 ariaLabel="Open suggested URL"
-                class="inline-flex min-h-7 min-w-7 shrink-0 items-center justify-center rounded text-blue-700 transition-colors hover:bg-blue-100 dark:text-blue-200 dark:hover:bg-blue-950"
+                class="inline-flex min-h-7 min-w-7 shrink-0 items-center justify-center rounded-sm text-blue-700 transition-colors hover:bg-blue-100 dark:text-blue-200 dark:hover:bg-blue-950/25"
                 title="Open suggested URL"
               >
                 <ExternalLinkIcon class="h-3.5 w-3.5" aria-hidden="true" />
@@ -158,7 +158,7 @@ export const WebInterfaceUrlField: Component<WebInterfaceUrlFieldProps> = (props
               <Button
                 variant="primaryFlat"
                 size="xs"
-                class="flex-shrink-0"
+                class="shrink-0"
                 onClick={() => state.setUrlValue(state.normalizedSuggestedUrl())}
                 disabled={state.urlSaving()}
               >
diff --git a/frontend-modern/src/components/shared/WorkloadTypeBadge.tsx b/frontend-modern/src/components/shared/WorkloadTypeBadge.tsx
index 7fa81fde0e..be95721357 100644
--- a/frontend-modern/src/components/shared/WorkloadTypeBadge.tsx
+++ b/frontend-modern/src/components/shared/WorkloadTypeBadge.tsx
@@ -3,7 +3,7 @@ import type { WorkloadType } from '@/types/workloads';
 import { getWorkloadTypeBadge } from '@/components/shared/workloadTypeBadges';
 
 export const WORKLOAD_TYPE_BADGE_CLASS =
-  'inline-flex items-center rounded px-1 py-0.5 text-[10px] font-medium whitespace-nowrap';
+  'inline-flex items-center rounded-sm px-1 py-0.5 text-[10px] font-medium whitespace-nowrap';
 
 export interface WorkloadTypeBadgeProps {
   type: string | WorkloadType | null | undefined;
diff --git a/frontend-modern/src/components/shared/__tests__/DetailSectionTable.test.tsx b/frontend-modern/src/components/shared/__tests__/DetailSectionTable.test.tsx
index 8e88074dac..75a7e80e38 100644
--- a/frontend-modern/src/components/shared/__tests__/DetailSectionTable.test.tsx
+++ b/frontend-modern/src/components/shared/__tests__/DetailSectionTable.test.tsx
@@ -89,7 +89,7 @@ describe('DetailSectionTable', () => {
       'lg:flex',
       'lg:flex-none',
       'lg:basis-[calc(50%-0.25rem)]',
-      'lg:rounded',
+      'lg:rounded-sm',
       'lg:border',
       'lg:p-3',
     );
@@ -202,7 +202,7 @@ describe('DetailSectionTable', () => {
     ));
 
     const label = screen.getByText(path);
-    expect(label).toHaveClass('whitespace-normal', '[overflow-wrap:anywhere]', 'text-left');
+    expect(label).toHaveClass('whitespace-normal', 'wrap-anywhere', 'text-left');
     expect(label.closest('td')).toHaveAttribute('colspan', '2');
     expect(label.closest('tr')?.querySelectorAll('td')).toHaveLength(1);
     expect(label.closest('tr')).toHaveClass('lg:grid-cols-[minmax(0,1fr)]');
diff --git a/frontend-modern/src/components/shared/__tests__/SearchTipsPopover.test.tsx b/frontend-modern/src/components/shared/__tests__/SearchTipsPopover.test.tsx
index c2ff82a12a..795009e0cb 100644
--- a/frontend-modern/src/components/shared/__tests__/SearchTipsPopover.test.tsx
+++ b/frontend-modern/src/components/shared/__tests__/SearchTipsPopover.test.tsx
@@ -32,8 +32,8 @@ describe('SearchTipsPopover', () => {
       "window.addEventListener('scroll', updatePopoverPosition, true)",
     );
     expect(searchTipsPopoverSource).toContain('style={state.popoverStyle()}');
-    expect(searchTipsPopoverSource).toContain('!fixed ${positionClass()}');
-    expect(searchTipsPopoverSource).toContain('xl:!absolute xl:mt-2 xl:w-72');
+    expect(searchTipsPopoverSource).toContain('fixed! ${positionClass()}');
+    expect(searchTipsPopoverSource).toContain('xl:absolute! xl:mt-2 xl:w-72');
 
     expect(searchTipsPopoverModelSource).toContain('getSearchTipsPopoverTriggerClass');
     expect(searchTipsPopoverModelSource).toContain('getSearchTipsPopoverPositionClass');
diff --git a/frontend-modern/src/components/shared/__tests__/StatusDot.test.tsx b/frontend-modern/src/components/shared/__tests__/StatusDot.test.tsx
index 409dede339..ac7a70489c 100644
--- a/frontend-modern/src/components/shared/__tests__/StatusDot.test.tsx
+++ b/frontend-modern/src/components/shared/__tests__/StatusDot.test.tsx
@@ -14,7 +14,7 @@ describe('StatusDot', () => {
 
     expect(dot).toHaveClass('inline-block');
     expect(dot).toHaveClass('rounded-full');
-    expect(dot).toHaveClass('flex-shrink-0');
+    expect(dot).toHaveClass('shrink-0');
     expect(dot).toHaveClass('h-2.5');
     expect(dot).toHaveClass('w-2.5');
     expect(dot).toHaveClass('bg-amber-500');
diff --git a/frontend-modern/src/components/shared/__tests__/Table.test.tsx b/frontend-modern/src/components/shared/__tests__/Table.test.tsx
index 42b54f4e87..989a6fd4de 100644
--- a/frontend-modern/src/components/shared/__tests__/Table.test.tsx
+++ b/frontend-modern/src/components/shared/__tests__/Table.test.tsx
@@ -266,7 +266,7 @@ describe('TableCell and TableHead padding ownership', () => {
         <TableBody>
           <TableRow>
             <TableCell class="px-1 sm:px-1.5 lg:px-2 py-1">tight cell</TableCell>
-            <TableCell class="!px-1">important cell</TableCell>
+            <TableCell class="px-1!">important cell</TableCell>
             <TableCell class="px-3 py-1.5">wide cell</TableCell>
           </TableRow>
         </TableBody>
diff --git a/frontend-modern/src/components/shared/__tests__/WebInterfaceUrlField.test.tsx b/frontend-modern/src/components/shared/__tests__/WebInterfaceUrlField.test.tsx
index 0768f67db0..8058be02d6 100644
--- a/frontend-modern/src/components/shared/__tests__/WebInterfaceUrlField.test.tsx
+++ b/frontend-modern/src/components/shared/__tests__/WebInterfaceUrlField.test.tsx
@@ -95,7 +95,7 @@ describe('WebInterfaceUrlField', () => {
     ));
 
     expect(await screen.findByText('Web interface')).toBeInTheDocument();
-    expect(container.querySelector('.shadow-sm')).toBeNull();
+    expect(container.querySelector('.shadow-xs')).toBeNull();
   });
 
   it('saves a host URL through metadata API', async () => {
diff --git a/frontend-modern/src/components/shared/__tests__/containerUpdateBadgeModel.branchcov0717.test.ts b/frontend-modern/src/components/shared/__tests__/containerUpdateBadgeModel.branchcov0717.test.ts
index 7a982d0049..da0eca77e4 100644
--- a/frontend-modern/src/components/shared/__tests__/containerUpdateBadgeModel.branchcov0717.test.ts
+++ b/frontend-modern/src/components/shared/__tests__/containerUpdateBadgeModel.branchcov0717.test.ts
@@ -224,22 +224,25 @@ describe('containerUpdateBadgeModel.branchcov', () => {
       expect(getUpdateButtonClass('updating')).toBe(
         [
           BASE_CLASS,
-          'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300 cursor-wait',
+          'bg-blue-100 text-blue-700 dark:bg-blue-900/25 dark:text-blue-300 cursor-wait',
         ].join(' '),
       );
     });
 
     it('returns the green "success" classes', () => {
       expect(getUpdateButtonClass('success')).toBe(
-        [BASE_CLASS, 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300'].join(' '),
+        [BASE_CLASS, 'bg-green-100 text-green-700 dark:bg-green-900/25 dark:text-green-300'].join(
+          ' ',
+        ),
       );
     });
 
     it('returns the red cursor-help "error" classes', () => {
       expect(getUpdateButtonClass('error')).toBe(
-        [BASE_CLASS, 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300 cursor-help'].join(
-          ' ',
-        ),
+        [
+          BASE_CLASS,
+          'bg-red-100 text-red-700 dark:bg-red-900/25 dark:text-red-300 cursor-help',
+        ].join(' '),
       );
     });
 
@@ -248,7 +251,7 @@ describe('containerUpdateBadgeModel.branchcov', () => {
       expect(getUpdateButtonClass('idle')).toBe(
         [
           BASE_CLASS,
-          'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300 cursor-pointer hover:bg-blue-200 dark:hover:bg-blue-900',
+          'bg-blue-100 text-blue-700 dark:bg-blue-900/25 dark:text-blue-300 cursor-pointer hover:bg-blue-200 dark:hover:bg-blue-900/25',
         ].join(' '),
       );
     });
@@ -259,7 +262,7 @@ describe('containerUpdateBadgeModel.branchcov', () => {
       expect(getUpdateButtonClass(bogus)).toBe(
         [
           BASE_CLASS,
-          'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300 cursor-pointer hover:bg-blue-200 dark:hover:bg-blue-900',
+          'bg-blue-100 text-blue-700 dark:bg-blue-900/25 dark:text-blue-300 cursor-pointer hover:bg-blue-200 dark:hover:bg-blue-900/25',
         ].join(' '),
       );
     });
diff --git a/frontend-modern/src/components/shared/__tests__/containerUpdateBadgeModel.branchcov2.test.ts b/frontend-modern/src/components/shared/__tests__/containerUpdateBadgeModel.branchcov2.test.ts
index 007801ec57..5663331452 100644
--- a/frontend-modern/src/components/shared/__tests__/containerUpdateBadgeModel.branchcov2.test.ts
+++ b/frontend-modern/src/components/shared/__tests__/containerUpdateBadgeModel.branchcov2.test.ts
@@ -250,25 +250,25 @@ describe('containerUpdateBadgeModel.branchcov2', () => {
   describe('getUpdateButtonClass', () => {
     it('returns the blue updating classes with cursor-wait', () => {
       expect(getUpdateButtonClass('updating')).toBe(
-        `${UPDATE_BUTTON_BASE_CLASS} bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300 cursor-wait`,
+        `${UPDATE_BUTTON_BASE_CLASS} bg-blue-100 text-blue-700 dark:bg-blue-900/25 dark:text-blue-300 cursor-wait`,
       );
     });
 
     it('returns the green success classes with no special cursor', () => {
       expect(getUpdateButtonClass('success')).toBe(
-        `${UPDATE_BUTTON_BASE_CLASS} bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300`,
+        `${UPDATE_BUTTON_BASE_CLASS} bg-green-100 text-green-700 dark:bg-green-900/25 dark:text-green-300`,
       );
     });
 
     it('returns the red error classes with cursor-help', () => {
       expect(getUpdateButtonClass('error')).toBe(
-        `${UPDATE_BUTTON_BASE_CLASS} bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300 cursor-help`,
+        `${UPDATE_BUTTON_BASE_CLASS} bg-red-100 text-red-700 dark:bg-red-900/25 dark:text-red-300 cursor-help`,
       );
     });
 
     it('returns the blue idle/default classes with pointer hover', () => {
       expect(getUpdateButtonClass('idle')).toBe(
-        `${UPDATE_BUTTON_BASE_CLASS} bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300 cursor-pointer hover:bg-blue-200 dark:hover:bg-blue-900`,
+        `${UPDATE_BUTTON_BASE_CLASS} bg-blue-100 text-blue-700 dark:bg-blue-900/25 dark:text-blue-300 cursor-pointer hover:bg-blue-200 dark:hover:bg-blue-900/25`,
       );
     });
   });
diff --git a/frontend-modern/src/components/shared/__tests__/dialogModel.branchcov0712.test.ts b/frontend-modern/src/components/shared/__tests__/dialogModel.branchcov0712.test.ts
index 29ded7b640..c2e74e1d4c 100644
--- a/frontend-modern/src/components/shared/__tests__/dialogModel.branchcov0712.test.ts
+++ b/frontend-modern/src/components/shared/__tests__/dialogModel.branchcov0712.test.ts
@@ -69,7 +69,7 @@ describe('getDialogPanelClass', () => {
   // The shared leading segment of every result, exactly as emitted by the
   // template literal before the layout branch and panelClass slot.
   const BASE =
-    'relative flex min-h-0 w-full flex-col overflow-hidden bg-surface border border-border outline-none pointer-events-auto';
+    'relative flex min-h-0 w-full flex-col overflow-hidden bg-surface border border-border outline-hidden pointer-events-auto';
   const DRAWER_BRANCH =
     'h-dvh max-w-[720px] rounded-none border-y-0 border-r-0 animate-slide-up sm:h-full sm:max-h-dvh sm:rounded-l-xl sm:border-y sm:border-r-0';
   const MODAL_BRANCH = 'max-h-[calc(100dvh-2rem)] rounded-md animate-slide-up';
@@ -121,8 +121,8 @@ describe('getDialogPanelClass', () => {
     });
 
     it('accepts a custom panel width', () => {
-      expect(getDialogPanelClass('mobile-sheet', 'max-w-[30rem]')).toBe(
-        `${BASE} ${MOBILE_SHEET_BRANCH} max-w-[30rem]`,
+      expect(getDialogPanelClass('mobile-sheet', 'max-w-120')).toBe(
+        `${BASE} ${MOBILE_SHEET_BRANCH} max-w-120`,
       );
     });
   });
diff --git a/frontend-modern/src/components/shared/__tests__/mobileNavBarModel.branchcov0712.test.ts b/frontend-modern/src/components/shared/__tests__/mobileNavBarModel.branchcov0712.test.ts
index 4b1132bd75..077366a950 100644
--- a/frontend-modern/src/components/shared/__tests__/mobileNavBarModel.branchcov0712.test.ts
+++ b/frontend-modern/src/components/shared/__tests__/mobileNavBarModel.branchcov0712.test.ts
@@ -302,7 +302,7 @@ describe('mobileNavBarModel.branchcov2', () => {
   describe('getMobileNavTabButtonClass', () => {
     const BASE =
       'relative flex min-h-10 min-w-0 flex-1 select-none flex-col items-center justify-center gap-0 rounded-md px-1 py-0.5 text-[9px] font-medium transition-colors';
-    const ACTIVE = 'bg-blue-50 text-blue-700 dark:bg-blue-900 dark:text-blue-300';
+    const ACTIVE = 'bg-blue-50 text-blue-700 dark:bg-blue-900/25 dark:text-blue-300';
     const MUTED = 'text-muted';
 
     it('emits the active palette when active, with no opacity when enabled is omitted', () => {
diff --git a/frontend-modern/src/components/shared/__tests__/searchTipsPopoverModel.branchcov0712c.test.ts b/frontend-modern/src/components/shared/__tests__/searchTipsPopoverModel.branchcov0712c.test.ts
index 8a0d6c46ee..0d214443d7 100644
--- a/frontend-modern/src/components/shared/__tests__/searchTipsPopoverModel.branchcov0712c.test.ts
+++ b/frontend-modern/src/components/shared/__tests__/searchTipsPopoverModel.branchcov0712c.test.ts
@@ -8,7 +8,7 @@ import {
 // mirror the literal here in order to assert the full, concrete composed string
 // for every branch of getSearchTipsPopoverTriggerClass.
 const TRIGGER_BASE_CLASSES =
-  'text-xs font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-white dark:focus:ring-blue-400';
+  'text-xs font-medium focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-white dark:focus:ring-blue-400';
 
 describe('searchTipsPopoverModel.branchcov0712c', () => {
   describe('getSearchTipsPopoverPositionClass', () => {
@@ -42,7 +42,7 @@ describe('searchTipsPopoverModel.branchcov0712c', () => {
 
     it("returns the link variant classes when triggerVariant === 'link' (first if false, second if arm)", () => {
       expect(getSearchTipsPopoverTriggerClass('link')).toBe(
-        `rounded px-1 py-0.5 underline decoration-dotted underline-offset-4 transition-colors hover:text-base-content ${TRIGGER_BASE_CLASSES}`,
+        `rounded-sm px-1 py-0.5 underline decoration-dotted underline-offset-4 transition-colors hover:text-base-content ${TRIGGER_BASE_CLASSES}`,
       );
     });
 
diff --git a/frontend-modern/src/components/shared/__tests__/selectionCardGroupModel.branchcov0720pm.test.ts b/frontend-modern/src/components/shared/__tests__/selectionCardGroupModel.branchcov0720pm.test.ts
index f60837f4fa..a7a9c44d70 100644
--- a/frontend-modern/src/components/shared/__tests__/selectionCardGroupModel.branchcov0720pm.test.ts
+++ b/frontend-modern/src/components/shared/__tests__/selectionCardGroupModel.branchcov0720pm.test.ts
@@ -25,8 +25,8 @@ const GROUP_CLASS_DETAIL = 'grid grid-cols-1 gap-3';
 const BUTTON_BASE_DETAIL = 'p-4 rounded-md border-2 transition-all text-left';
 const BUTTON_BASE_COMPACT = 'p-3 rounded-md border-2 transition-all text-center';
 
-const ACTIVE_SUCCESS = 'border-green-500 bg-green-50 dark:bg-green-900';
-const ACTIVE_ACCENT = 'border-blue-500 bg-blue-50 dark:bg-blue-900';
+const ACTIVE_SUCCESS = 'border-green-500 bg-green-50 dark:bg-green-900/25';
+const ACTIVE_ACCENT = 'border-blue-500 bg-blue-50 dark:bg-blue-900/25';
 
 const INACTIVE_COMPACT = 'border-border hover:border-blue-300';
 const INACTIVE_DETAIL = 'border-border hover:border-border';
@@ -188,13 +188,13 @@ describe('selectionCardGroupModel.branchcov0720pm', () => {
 
     it("returns the green title class for variant='detail', active=true, tone='success' (tone === 'success' arm)", () => {
       expect(getSelectionCardTitleClass('detail', 'success', true)).toBe(
-        'text-sm font-semibold text-green-900 dark:text-green-100',
+        'text-sm font-semibold text-green-900/25 dark:text-green-100',
       );
     });
 
     it("returns the blue title class for variant='detail', active=true, tone='accent' (else arm)", () => {
       expect(getSelectionCardTitleClass('detail', 'accent', true)).toBe(
-        'text-sm font-semibold text-blue-900 dark:text-blue-100',
+        'text-sm font-semibold text-blue-900/25 dark:text-blue-100',
       );
     });
   });
@@ -257,8 +257,8 @@ describe('selectionCardGroupModel.branchcov0720pm', () => {
         const result = getSelectionCardTitleClass('detail', tone, true);
         const titleToken =
           tone === 'success'
-            ? 'text-green-900 dark:text-green-100'
-            : 'text-blue-900 dark:text-blue-100';
+            ? 'text-green-900/25 dark:text-green-100'
+            : 'text-blue-900/25 dark:text-blue-100';
         expect(result).toContain(titleToken);
       }
     });
diff --git a/frontend-modern/src/components/shared/__tests__/statusBadgeModel.branchcov0713.test.ts b/frontend-modern/src/components/shared/__tests__/statusBadgeModel.branchcov0713.test.ts
index f3f47e67cf..4f6e07b1c4 100644
--- a/frontend-modern/src/components/shared/__tests__/statusBadgeModel.branchcov0713.test.ts
+++ b/frontend-modern/src/components/shared/__tests__/statusBadgeModel.branchcov0713.test.ts
@@ -18,7 +18,7 @@ import {
 // in sync with the source is the same pattern used by
 // containerUpdateBadgeModel.branchcov2.test.ts.
 const STATUS_BADGE_BASE_CLASS =
-  'inline-flex min-h-11 items-center justify-center rounded-md text-xs font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-blue-400 sm:min-h-0';
+  'inline-flex min-h-11 items-center justify-center rounded-md text-xs font-medium transition-colors focus:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-blue-400 sm:min-h-0';
 const STATUS_BADGE_PADDING_BY_SIZE: Record<StatusBadgeSize, string> = {
   sm: 'px-2 py-0.5',
   md: 'px-2.5 py-1',
diff --git a/frontend-modern/src/components/shared/buttonModel.ts b/frontend-modern/src/components/shared/buttonModel.ts
index 0a8142b93b..03aebb8b13 100644
--- a/frontend-modern/src/components/shared/buttonModel.ts
+++ b/frontend-modern/src/components/shared/buttonModel.ts
@@ -25,27 +25,27 @@ export type ButtonSize =
   | 'iconMd';
 
 export const BUTTON_BASE_CLASS =
-  'inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed';
+  'inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed';
 
 export const BUTTON_VARIANT_CLASSES: Record<ButtonVariant, string> = {
-  primary: 'border border-transparent bg-blue-600 text-white shadow-sm hover:bg-blue-700',
+  primary: 'border border-transparent bg-blue-600 text-white shadow-xs hover:bg-blue-700',
   primaryFlat: 'border border-transparent bg-blue-600 text-white hover:bg-blue-700',
   warning:
-    'border border-amber-300 bg-amber-100 text-amber-800 hover:bg-amber-200 dark:border-amber-700 dark:bg-amber-900 dark:text-amber-100 dark:hover:bg-amber-800',
+    'border border-amber-300 bg-amber-100 text-amber-800 hover:bg-amber-200 dark:border-amber-700 dark:bg-amber-900/25 dark:text-amber-100 dark:hover:bg-amber-800',
   warningSolid:
-    'border border-transparent bg-amber-600 text-white shadow-sm hover:bg-amber-700 dark:bg-amber-500 dark:hover:bg-amber-600',
-  info: 'border border-blue-200 bg-blue-50 text-blue-700 hover:bg-blue-100 dark:border-blue-700 dark:bg-blue-900 dark:text-blue-200',
-  success: 'border border-transparent bg-emerald-600 text-white shadow-sm hover:bg-emerald-700',
+    'border border-transparent bg-amber-600 text-white shadow-xs hover:bg-amber-700 dark:bg-amber-500 dark:hover:bg-amber-600',
+  info: 'border border-blue-200 bg-blue-50 text-blue-700 hover:bg-blue-100 dark:border-blue-700 dark:bg-blue-900/25 dark:text-blue-200',
+  success: 'border border-transparent bg-emerald-600 text-white shadow-xs hover:bg-emerald-700',
   successOutline:
-    'border border-emerald-300 bg-white text-emerald-900 hover:bg-emerald-100 dark:border-emerald-700 dark:bg-emerald-950 dark:text-emerald-100 dark:hover:bg-emerald-800',
+    'border border-emerald-300 bg-white text-emerald-900/25 hover:bg-emerald-100 dark:border-emerald-700 dark:bg-emerald-950/25 dark:text-emerald-100 dark:hover:bg-emerald-800',
   successGhost:
-    'border border-transparent bg-transparent text-emerald-900 hover:bg-emerald-100 dark:text-emerald-100 dark:hover:bg-emerald-800',
-  secondary: 'border border-border bg-surface text-base-content shadow-sm hover:bg-surface-hover',
-  danger: 'border border-transparent bg-rose-600 text-white shadow-sm hover:bg-rose-700',
+    'border border-transparent bg-transparent text-emerald-900/25 hover:bg-emerald-100 dark:text-emerald-100 dark:hover:bg-emerald-800',
+  secondary: 'border border-border bg-surface text-base-content shadow-xs hover:bg-surface-hover',
+  danger: 'border border-transparent bg-rose-600 text-white shadow-xs hover:bg-rose-700',
   dangerOutline:
-    'border border-rose-300 bg-transparent text-rose-700 hover:bg-rose-50 dark:border-rose-900 dark:text-rose-300 dark:hover:bg-rose-950',
+    'border border-rose-300 bg-transparent text-rose-700 hover:bg-rose-50 dark:border-rose-900/25 dark:text-rose-300 dark:hover:bg-rose-950/25',
   dangerGhost:
-    'border border-transparent bg-transparent text-red-600 hover:bg-red-50 dark:text-red-300 dark:hover:bg-red-900',
+    'border border-transparent bg-transparent text-red-600 hover:bg-red-50 dark:text-red-300 dark:hover:bg-red-900/25',
   ghost: 'border border-transparent bg-transparent text-base-content hover:bg-surface-hover',
   outline: 'border border-border bg-transparent text-base-content hover:bg-surface-hover',
 };
@@ -96,13 +96,13 @@ export type ActionIconButtonTone =
 export type ActionIconButtonSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg';
 
 export const COPY_VALUE_BUTTON_BASE_CLASS =
-  'inline-flex min-h-6 min-w-6 shrink-0 items-center justify-center rounded transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50';
+  'inline-flex min-h-6 min-w-6 shrink-0 items-center justify-center rounded-sm transition-colors focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50';
 
 export const COPY_VALUE_BUTTON_VARIANT_CLASSES: Record<CopyValueButtonVariant, string> = {
   neutral:
     'border border-border bg-surface text-muted hover:bg-surface-hover hover:text-base-content',
   ghost: 'text-muted hover:bg-surface-hover hover:text-base-content',
-  accent: 'text-blue-700 hover:bg-blue-100 dark:text-blue-200 dark:hover:bg-blue-950',
+  accent: 'text-blue-700 hover:bg-blue-100 dark:text-blue-200 dark:hover:bg-blue-950/25',
   chip: 'bg-surface-alt text-base-content hover:bg-surface-hover',
 };
 
@@ -131,29 +131,29 @@ export const getCopyValueButtonClass = (options: CopyValueButtonClassOptions = {
     .join(' ');
 
 export const ACTION_ICON_BUTTON_BASE_CLASS =
-  'inline-flex min-h-6 min-w-6 shrink-0 items-center justify-center rounded-md transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-50';
+  'inline-flex min-h-6 min-w-6 shrink-0 items-center justify-center rounded-md transition-colors focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-50';
 
 export const ACTION_ICON_BUTTON_TONE_CLASSES: Record<ActionIconButtonTone, string> = {
   neutral: 'text-base-content hover:bg-surface-hover hover:text-base-content',
   muted: 'text-muted hover:bg-surface-hover hover:text-base-content',
   outline:
-    'border border-border bg-surface text-muted shadow-sm hover:border-border hover:bg-surface-hover hover:text-base-content',
+    'border border-border bg-surface text-muted shadow-xs hover:border-border hover:bg-surface-hover hover:text-base-content',
   outlineSelected:
-    'border border-border bg-surface-alt text-base-content shadow-sm hover:border-border hover:bg-surface-hover hover:text-base-content',
-  primary: 'border border-transparent bg-blue-600 text-white shadow-sm hover:bg-blue-700',
+    'border border-border bg-surface-alt text-base-content shadow-xs hover:border-border hover:bg-surface-hover hover:text-base-content',
+  primary: 'border border-transparent bg-blue-600 text-white shadow-xs hover:bg-blue-700',
   accent:
-    'bg-blue-50 text-blue-600 hover:bg-blue-100 hover:text-blue-700 dark:bg-blue-900 dark:text-blue-400 dark:hover:bg-blue-950 dark:hover:text-blue-300',
+    'bg-blue-50 text-blue-600 hover:bg-blue-100 hover:text-blue-700 dark:bg-blue-900/25 dark:text-blue-400 dark:hover:bg-blue-950/25 dark:hover:text-blue-300',
   accentGhost:
-    'text-blue-700 hover:bg-blue-100 hover:text-blue-950 dark:text-blue-200 dark:hover:bg-blue-900/60',
+    'text-blue-700 hover:bg-blue-100 hover:text-blue-950/25 dark:text-blue-200 dark:hover:bg-blue-900/60',
   success:
-    'bg-green-50 text-green-600 hover:bg-green-100 hover:text-green-700 dark:bg-green-900 dark:text-green-400 dark:hover:bg-green-950 dark:hover:text-green-300',
+    'bg-green-50 text-green-600 hover:bg-green-100 hover:text-green-700 dark:bg-green-900/25 dark:text-green-400 dark:hover:bg-green-950/25 dark:hover:text-green-300',
   warningGhost:
-    'text-amber-700 hover:bg-amber-100 hover:text-amber-900 dark:text-amber-200 dark:hover:bg-amber-900',
+    'text-amber-700 hover:bg-amber-100 hover:text-amber-900/25 dark:text-amber-200 dark:hover:bg-amber-900/25',
   warningOutline:
-    'border border-amber-200 bg-surface text-amber-700 hover:bg-amber-100 hover:text-amber-900 dark:border-amber-800 dark:bg-amber-950/60 dark:text-amber-200 dark:hover:bg-amber-900',
+    'border border-amber-200 bg-surface text-amber-700 hover:bg-amber-100 hover:text-amber-900/25 dark:border-amber-800 dark:bg-amber-950/60 dark:text-amber-200 dark:hover:bg-amber-900/25',
   infoGhost: 'text-cyan-500 hover:bg-cyan-100 dark:text-cyan-400 dark:hover:bg-cyan-800',
   danger:
-    'text-red-600 hover:bg-red-50 hover:text-red-700 dark:text-red-400 dark:hover:bg-red-950 dark:hover:text-red-300',
+    'text-red-600 hover:bg-red-50 hover:text-red-700 dark:text-red-400 dark:hover:bg-red-950/25 dark:hover:text-red-300',
 };
 
 export const ACTION_ICON_BUTTON_SIZE_CLASSES: Record<ActionIconButtonSize, string> = {
@@ -183,10 +183,10 @@ export const getActionIconButtonClass = (options: ActionIconButtonClassOptions =
 export const DRAWER_HEADER_ACTION_GROUP_CLASS = 'flex shrink-0 items-center gap-1.5';
 
 export const DRAWER_HEADER_ACTION_BUTTON_CLASS =
-  'inline-flex h-8 min-h-11 min-w-11 items-center gap-1.5 rounded border border-border bg-surface px-2 text-xs font-medium text-base-content transition-colors hover:bg-surface-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 disabled:cursor-wait disabled:opacity-60 sm:min-h-0 sm:min-w-0';
+  'inline-flex h-8 min-h-11 min-w-11 items-center gap-1.5 rounded-sm border border-border bg-surface px-2 text-xs font-medium text-base-content transition-colors hover:bg-surface-hover focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500 disabled:cursor-wait disabled:opacity-60 sm:min-h-0 sm:min-w-0';
 
 export const DRAWER_HEADER_ICON_BUTTON_CLASS =
-  'inline-flex h-8 w-8 min-h-11 min-w-11 items-center justify-center rounded-md hover:bg-surface-hover hover:text-base-content focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 sm:min-h-0 sm:min-w-0';
+  'inline-flex h-8 w-8 min-h-11 min-w-11 items-center justify-center rounded-md hover:bg-surface-hover hover:text-base-content focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500 sm:min-h-0 sm:min-w-0';
 
 export const getDrawerHeaderActionGroupClass = (className?: string): string =>
   [DRAWER_HEADER_ACTION_GROUP_CLASS, className].filter(Boolean).join(' ');
diff --git a/frontend-modern/src/components/shared/cards/NetworkInterfacesCard.tsx b/frontend-modern/src/components/shared/cards/NetworkInterfacesCard.tsx
index 8c5b71dead..d435574786 100644
--- a/frontend-modern/src/components/shared/cards/NetworkInterfacesCard.tsx
+++ b/frontend-modern/src/components/shared/cards/NetworkInterfacesCard.tsx
@@ -17,7 +17,7 @@ export const NetworkInterfacesCard: Component<NetworkInterfacesCardProps> = (pro
       <div class="max-h-[140px] overflow-y-auto custom-scrollbar space-y-2">
         <For each={props.interfaces}>
           {(iface) => (
-            <div class="rounded border border-dashed border-border p-2 overflow-hidden">
+            <div class="rounded-sm border border-dashed border-border p-2 overflow-hidden">
               <div class="flex items-center gap-2 text-[11px] font-medium text-base-content min-w-0">
                 <span class="truncate min-w-0">{iface.name}</span>
                 <Show when={iface.mac}>
@@ -34,7 +34,7 @@ export const NetworkInterfacesCard: Component<NetworkInterfacesCardProps> = (pro
                   <For each={iface.addresses}>
                     {(ip) => (
                       <span
-                        class="inline-block rounded bg-blue-100 px-1.5 py-0.5 text-[10px] text-blue-700 dark:bg-blue-900 dark:text-blue-200 max-w-full truncate"
+                        class="inline-block rounded-sm bg-blue-100 px-1.5 py-0.5 text-[10px] text-blue-700 dark:bg-blue-900/25 dark:text-blue-200 max-w-full truncate"
                         title={ip}
                       >
                         {ip}
diff --git a/frontend-modern/src/components/shared/cards/RaidCard.tsx b/frontend-modern/src/components/shared/cards/RaidCard.tsx
index 726a1d92eb..3da1831773 100644
--- a/frontend-modern/src/components/shared/cards/RaidCard.tsx
+++ b/frontend-modern/src/components/shared/cards/RaidCard.tsx
@@ -35,7 +35,7 @@ export const RaidCard: Component<RaidCardProps> = (props) => {
               Number.isFinite(rebuildPercent()) && rebuildPercent() > 0 && rebuildPercent() < 100;
 
             return (
-              <div class="rounded border border-dashed border-border p-2 overflow-hidden">
+              <div class="rounded-sm border border-dashed border-border p-2 overflow-hidden">
                 <div class="flex items-start justify-between gap-2 min-w-0">
                   <div class="min-w-0">
                     <div
@@ -79,7 +79,7 @@ export const RaidCard: Component<RaidCardProps> = (props) => {
                     <For each={array.devices}>
                       {(device) => (
                         <span
-                          class={`inline-flex items-center rounded border px-1.5 py-0.5 text-[10px] font-medium ${getRaidDeviceBadgeClass(device)}`}
+                          class={`inline-flex items-center rounded-sm border px-1.5 py-0.5 text-[10px] font-medium ${getRaidDeviceBadgeClass(device)}`}
                           title={`slot ${device.slot} • ${device.state}`}
                         >
                           {device.device}
diff --git a/frontend-modern/src/components/shared/containerUpdateBadgeModel.ts b/frontend-modern/src/components/shared/containerUpdateBadgeModel.ts
index 2cd18b0cd0..31e1c4434e 100644
--- a/frontend-modern/src/components/shared/containerUpdateBadgeModel.ts
+++ b/frontend-modern/src/components/shared/containerUpdateBadgeModel.ts
@@ -102,16 +102,16 @@ export function getUpdateButtonClass(state: UpdateState, unavailable = false): s
   }
   switch (state) {
     case 'updating':
-      return `${UPDATE_BUTTON_BASE_CLASS} bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300 cursor-wait`;
+      return `${UPDATE_BUTTON_BASE_CLASS} bg-blue-100 text-blue-700 dark:bg-blue-900/25 dark:text-blue-300 cursor-wait`;
     case 'queued':
     case 'inconclusive':
-      return `${UPDATE_BUTTON_BASE_CLASS} bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200 cursor-pointer hover:bg-amber-200 dark:hover:bg-amber-800`;
+      return `${UPDATE_BUTTON_BASE_CLASS} bg-amber-100 text-amber-800 dark:bg-amber-900/25 dark:text-amber-200 cursor-pointer hover:bg-amber-200 dark:hover:bg-amber-800`;
     case 'success':
-      return `${UPDATE_BUTTON_BASE_CLASS} bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300`;
+      return `${UPDATE_BUTTON_BASE_CLASS} bg-green-100 text-green-700 dark:bg-green-900/25 dark:text-green-300`;
     case 'error':
-      return `${UPDATE_BUTTON_BASE_CLASS} bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300 cursor-help`;
+      return `${UPDATE_BUTTON_BASE_CLASS} bg-red-100 text-red-700 dark:bg-red-900/25 dark:text-red-300 cursor-help`;
     default:
-      return `${UPDATE_BUTTON_BASE_CLASS} bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300 cursor-pointer hover:bg-blue-200 dark:hover:bg-blue-900`;
+      return `${UPDATE_BUTTON_BASE_CLASS} bg-blue-100 text-blue-700 dark:bg-blue-900/25 dark:text-blue-300 cursor-pointer hover:bg-blue-200 dark:hover:bg-blue-900/25`;
   }
 }
 
diff --git a/frontend-modern/src/components/shared/dialogModel.ts b/frontend-modern/src/components/shared/dialogModel.ts
index 78a63ae364..12e76eb56e 100644
--- a/frontend-modern/src/components/shared/dialogModel.ts
+++ b/frontend-modern/src/components/shared/dialogModel.ts
@@ -37,7 +37,7 @@ export function getDialogPanelClass(layout: DialogLayout, panelClass?: string):
       : layout === 'mobile-sheet'
         ? 'max-h-[calc(100dvh-1.5rem)] rounded-md animate-slide-up'
         : 'max-h-[calc(100dvh-2rem)] rounded-md animate-slide-up';
-  return `relative flex min-h-0 w-full flex-col overflow-hidden bg-surface border border-border outline-none pointer-events-auto ${
+  return `relative flex min-h-0 w-full flex-col overflow-hidden bg-surface border border-border outline-hidden pointer-events-auto ${
     layoutClass
   } ${panelClass ?? (layout === 'drawer-right' ? '' : 'max-w-lg')}`.trim();
 }
diff --git a/frontend-modern/src/components/shared/filterButtonGroupModel.ts b/frontend-modern/src/components/shared/filterButtonGroupModel.ts
index 7df64490b0..c406f6fb7b 100644
--- a/frontend-modern/src/components/shared/filterButtonGroupModel.ts
+++ b/frontend-modern/src/components/shared/filterButtonGroupModel.ts
@@ -82,17 +82,17 @@ export function getFilterButtonGroupButtonClass(
 ): string {
   if (variant === 'settings') {
     return [
-      'flex min-h-11 items-center justify-center gap-1.5 px-3 py-2 text-sm rounded-md transition-all whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 sm:min-h-9',
-      active ? 'bg-surface text-base-content shadow-sm' : 'text-muted hover:text-base-content',
+      'flex min-h-11 items-center justify-center gap-1.5 px-3 py-2 text-sm rounded-md transition-all whitespace-nowrap outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 sm:min-h-9',
+      active ? 'bg-surface text-base-content shadow-xs' : 'text-muted hover:text-base-content',
       disabled ? 'opacity-60 cursor-not-allowed' : '',
     ].join(' ');
   }
 
   if (variant === 'prominent') {
     return [
-      'flex min-h-11 w-full items-center justify-center gap-2 rounded-md border px-4 py-2.5 text-sm font-medium transition-all whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 sm:min-h-10',
+      'flex min-h-11 w-full items-center justify-center gap-2 rounded-md border px-4 py-2.5 text-sm font-medium transition-all whitespace-nowrap outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 sm:min-h-10',
       active
-        ? 'bg-blue-50 border-blue-500 text-blue-700 dark:bg-blue-900 dark:text-blue-300 dark:border-blue-500'
+        ? 'bg-blue-50 border-blue-500 text-blue-700 dark:bg-blue-900/25 dark:text-blue-300 dark:border-blue-500'
         : 'border-border text-base-content hover:bg-surface-alt',
       disabled ? 'opacity-60 cursor-not-allowed' : '',
     ].join(' ');
@@ -100,9 +100,9 @@ export function getFilterButtonGroupButtonClass(
 
   if (variant === 'compact') {
     return [
-      'inline-flex min-h-11 min-w-11 items-center justify-center gap-1.5 rounded px-2.5 py-1 text-xs font-medium transition-all whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 sm:min-h-0 sm:min-w-0',
+      'inline-flex min-h-11 min-w-11 items-center justify-center gap-1.5 rounded-sm px-2.5 py-1 text-xs font-medium transition-all whitespace-nowrap outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 sm:min-h-0 sm:min-w-0',
       active
-        ? `bg-surface shadow-sm ring-1 ${activeToneClassByOptionTone[tone]}`
+        ? `bg-surface shadow-xs ring-1 ${activeToneClassByOptionTone[tone]}`
         : 'text-muted hover:bg-surface-hover hover:text-base-content',
       disabled ? 'opacity-60 cursor-not-allowed' : '',
     ].join(' ');
@@ -110,18 +110,18 @@ export function getFilterButtonGroupButtonClass(
 
   if (variant === 'segmented') {
     return [
-      'min-h-11 flex-1 rounded-md px-2 py-1.5 text-xs font-semibold transition-all whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 sm:min-h-8',
+      'min-h-11 flex-1 rounded-md px-2 py-1.5 text-xs font-semibold transition-all whitespace-nowrap outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 sm:min-h-8',
       active
-        ? 'bg-surface text-blue-600 shadow-sm dark:text-blue-400'
+        ? 'bg-surface text-blue-600 shadow-xs dark:text-blue-400'
         : 'text-muted hover:text-base-content hover:bg-surface-hover',
       disabled ? 'opacity-50 cursor-not-allowed' : '',
     ].join(' ');
   }
 
   return [
-    'flex min-h-11 flex-1 items-center justify-center gap-2 rounded-md px-3 py-2.5 text-sm font-medium transition-all whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 sm:min-h-0 sm:flex-none sm:justify-start sm:px-4 sm:py-2',
+    'flex min-h-11 flex-1 items-center justify-center gap-2 rounded-md px-3 py-2.5 text-sm font-medium transition-all whitespace-nowrap outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 sm:min-h-0 sm:flex-none sm:justify-start sm:px-4 sm:py-2',
     active
-      ? 'bg-surface border border-border text-blue-600 dark:text-blue-400 shadow-sm'
+      ? 'bg-surface border border-border text-blue-600 dark:text-blue-400 shadow-xs'
       : 'text-muted border border-transparent hover:text-base-content hover:bg-surface-hover',
     disabled ? 'opacity-60 cursor-not-allowed' : '',
   ].join(' ');
diff --git a/frontend-modern/src/components/shared/groupedTableRowPresentation.ts b/frontend-modern/src/components/shared/groupedTableRowPresentation.ts
index b8c5b99e17..d01b3f2307 100644
--- a/frontend-modern/src/components/shared/groupedTableRowPresentation.ts
+++ b/frontend-modern/src/components/shared/groupedTableRowPresentation.ts
@@ -2,10 +2,10 @@ export const GROUPED_TABLE_ROW_CLASS = 'grouped-table-row';
 export const GROUPED_TABLE_ROW_BASE_CLASS = `${GROUPED_TABLE_ROW_CLASS} transition-colors`;
 export const GROUPED_TABLE_ROW_INTERACTIVE_CLASS = `${GROUPED_TABLE_ROW_BASE_CLASS} cursor-pointer select-none duration-150`;
 export const GROUPED_TABLE_ROW_CELL_CLASS =
-  '!px-2 !py-1 align-middle text-[12px] sm:text-sm font-semibold text-base-content';
+  'px-2! py-1! align-middle text-[12px] sm:text-sm font-semibold text-base-content';
 export const GROUPED_TABLE_ROW_META_CLASS = 'text-[10px] font-medium text-muted';
 export const GROUPED_TABLE_ROW_BADGE_CLASS =
-  'inline-flex items-center rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300';
+  'inline-flex items-center rounded-sm px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-blue-100 text-blue-700 dark:bg-blue-900/25 dark:text-blue-300';
 
 export const getGroupedTableRowClass = (className = ''): string =>
   `${GROUPED_TABLE_ROW_BASE_CLASS} ${className}`.trim();
diff --git a/frontend-modern/src/components/shared/mobileNavBarModel.ts b/frontend-modern/src/components/shared/mobileNavBarModel.ts
index 1045a34a58..3dc40b3068 100644
--- a/frontend-modern/src/components/shared/mobileNavBarModel.ts
+++ b/frontend-modern/src/components/shared/mobileNavBarModel.ts
@@ -189,6 +189,8 @@ export function getMobileNavTabButtonClass(options: {
   enabled?: boolean;
 }): string {
   return `relative flex min-h-10 min-w-0 flex-1 select-none flex-col items-center justify-center gap-0 rounded-md px-1 py-0.5 text-[9px] font-medium transition-colors ${
-    options.active ? 'bg-blue-50 text-blue-700 dark:bg-blue-900 dark:text-blue-300' : 'text-muted'
+    options.active
+      ? 'bg-blue-50 text-blue-700 dark:bg-blue-900/25 dark:text-blue-300'
+      : 'text-muted'
   } ${options.enabled === false ? 'opacity-70' : ''}`.trim();
 }
diff --git a/frontend-modern/src/components/shared/searchInputEnhancementsModel.ts b/frontend-modern/src/components/shared/searchInputEnhancementsModel.ts
index 584ce2698d..8b138e1325 100644
--- a/frontend-modern/src/components/shared/searchInputEnhancementsModel.ts
+++ b/frontend-modern/src/components/shared/searchInputEnhancementsModel.ts
@@ -1,15 +1,15 @@
 export const SEARCH_HISTORY_MENU_CLASS =
-  'absolute left-0 top-full z-50 mt-2 w-full max-w-lg overflow-hidden rounded-md border border-border bg-surface text-sm shadow-sm';
+  'absolute left-0 top-full z-50 mt-2 w-full max-w-lg overflow-hidden rounded-md border border-border bg-surface text-sm shadow-xs';
 export const SEARCH_HISTORY_EMPTY_STATE_CLASS = 'px-3 py-2 text-xs text-muted';
 export const SEARCH_HISTORY_ROW_CLASS =
-  'flex items-center justify-between px-2 py-1.5 hover:bg-blue-50 dark:hover:bg-blue-900';
+  'flex items-center justify-between px-2 py-1.5 hover:bg-blue-50 dark:hover:bg-blue-900/25';
 export const SEARCH_HISTORY_ENTRY_BUTTON_CLASS =
-  'flex-1 truncate rounded pr-2 text-left text-sm text-base-content transition-colors hover:text-blue-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:hover:text-blue-300';
+  'flex-1 truncate rounded-sm pr-2 text-left text-sm text-base-content transition-colors hover:text-blue-600 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500 dark:hover:text-blue-300';
 export const SEARCH_HISTORY_CLEAR_LABEL = 'Clear history';
 export function getSearchHistoryToggleButtonClass(isOpen: boolean): string {
   return `flex h-11 w-11 items-center justify-center rounded-md transition-colors sm:h-7 sm:w-7 ${
     isOpen
-      ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400'
+      ? 'bg-blue-100 dark:bg-blue-900/25 text-blue-600 dark:text-blue-400'
       : 'text-muted hover:bg-surface-hover hover:text-base-content'
   }`;
 }
@@ -19,9 +19,9 @@ export function getSearchHistoryToggleTitle(historyCount: number): string {
 }
 
 export function getSearchHistoryDeleteButtonClass(): string {
-  return 'ml-1 flex h-6 w-6 items-center justify-center rounded text-slate-400 transition-colors hover:bg-surface-hover hover:text-base-content focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500';
+  return 'ml-1 flex h-6 w-6 items-center justify-center rounded-sm text-slate-400 transition-colors hover:bg-surface-hover hover:text-base-content focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500';
 }
 
 export function getSearchHistoryClearButtonClass(): string {
-  return 'flex w-full items-center justify-center gap-2 border-t border-border px-3 py-2 text-xs font-medium text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500';
+  return 'flex w-full items-center justify-center gap-2 border-t border-border px-3 py-2 text-xs font-medium text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500';
 }
diff --git a/frontend-modern/src/components/shared/searchTipsPopoverModel.ts b/frontend-modern/src/components/shared/searchTipsPopoverModel.ts
index f1149d3f82..090bac2ad1 100644
--- a/frontend-modern/src/components/shared/searchTipsPopoverModel.ts
+++ b/frontend-modern/src/components/shared/searchTipsPopoverModel.ts
@@ -47,14 +47,14 @@ export function getSearchTipsPopoverTriggerClass(
   triggerVariant: 'button' | 'link' | 'icon',
 ): string {
   const triggerBaseClasses =
-    'text-xs font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-white dark:focus:ring-blue-400';
+    'text-xs font-medium focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:ring-offset-white dark:focus:ring-blue-400';
 
   if (triggerVariant === 'button') {
     return `rounded-md border border-border px-2.5 py-1 text-muted transition-colors hover:bg-surface-hover ${triggerBaseClasses}`;
   }
 
   if (triggerVariant === 'link') {
-    return `rounded px-1 py-0.5 underline decoration-dotted underline-offset-4 transition-colors hover:text-base-content ${triggerBaseClasses}`;
+    return `rounded-sm px-1 py-0.5 underline decoration-dotted underline-offset-4 transition-colors hover:text-base-content ${triggerBaseClasses}`;
   }
 
   return `flex h-11 w-11 items-center justify-center rounded-full transition-colors hover:text-muted sm:h-5 sm:w-5 ${triggerBaseClasses}`;
diff --git a/frontend-modern/src/components/shared/selectablePillModel.ts b/frontend-modern/src/components/shared/selectablePillModel.ts
index 87cf780d75..acaa3f828a 100644
--- a/frontend-modern/src/components/shared/selectablePillModel.ts
+++ b/frontend-modern/src/components/shared/selectablePillModel.ts
@@ -1,14 +1,14 @@
 export type SelectablePillButtonSize = 'md';
 
 export const SELECTABLE_PILL_BUTTON_BASE_CLASS =
-  'inline-flex max-w-full items-center justify-center rounded-full border text-center font-semibold transition whitespace-normal outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60';
+  'inline-flex max-w-full items-center justify-center rounded-full border text-center font-semibold transition whitespace-normal outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60';
 
 export const SELECTABLE_PILL_BUTTON_SIZE_CLASSES: Record<SelectablePillButtonSize, string> = {
   md: 'min-h-10 px-3 py-2 text-sm sm:min-h-10',
 };
 
 export const SELECTABLE_PILL_BUTTON_ACTIVE_CLASS =
-  'border-blue-500 bg-blue-600 text-white shadow-sm';
+  'border-blue-500 bg-blue-600 text-white shadow-xs';
 
 export const SELECTABLE_PILL_BUTTON_INACTIVE_CLASS =
   'border-border bg-surface text-base-content hover:border-blue-400 hover:text-blue-600 dark:hover:border-blue-400 dark:hover:text-blue-200';
diff --git a/frontend-modern/src/components/shared/selectionCardGroupModel.ts b/frontend-modern/src/components/shared/selectionCardGroupModel.ts
index e63263657a..6f2c00eec0 100644
--- a/frontend-modern/src/components/shared/selectionCardGroupModel.ts
+++ b/frontend-modern/src/components/shared/selectionCardGroupModel.ts
@@ -45,9 +45,9 @@ export function getSelectionCardGroupClass(
 
 function getSelectionCardActiveClass(tone: SelectionCardTone): string {
   if (tone === 'success') {
-    return 'border-green-500 bg-green-50 dark:bg-green-900';
+    return 'border-green-500 bg-green-50 dark:bg-green-900/25';
   }
-  return 'border-blue-500 bg-blue-50 dark:bg-blue-900';
+  return 'border-blue-500 bg-blue-50 dark:bg-blue-900/25';
 }
 
 function getSelectionCardInactiveClass(variant: SelectionCardGroupVariant): string {
@@ -96,8 +96,8 @@ export function getSelectionCardTitleClass(
     return 'text-sm font-semibold text-base-content';
   }
   return tone === 'success'
-    ? 'text-sm font-semibold text-green-900 dark:text-green-100'
-    : 'text-sm font-semibold text-blue-900 dark:text-blue-100';
+    ? 'text-sm font-semibold text-green-900/25 dark:text-green-100'
+    : 'text-sm font-semibold text-blue-900/25 dark:text-blue-100';
 }
 
 export function getSelectionCardDescriptionClass(variant: SelectionCardGroupVariant): string {
diff --git a/frontend-modern/src/components/shared/sourcePlatformBadges.ts b/frontend-modern/src/components/shared/sourcePlatformBadges.ts
index 829036796f..528262927d 100644
--- a/frontend-modern/src/components/shared/sourcePlatformBadges.ts
+++ b/frontend-modern/src/components/shared/sourcePlatformBadges.ts
@@ -1,7 +1,7 @@
 import { getSourcePlatformLabel, getSourcePlatformPresentation } from '@/utils/sourcePlatforms';
 
 const BASE_BADGE =
-  'inline-flex items-center rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap';
+  'inline-flex items-center rounded-sm px-2 py-0.5 text-[10px] font-medium whitespace-nowrap';
 
 export interface SourcePlatformBadge {
   label: string;
diff --git a/frontend-modern/src/components/shared/statusBadgeModel.ts b/frontend-modern/src/components/shared/statusBadgeModel.ts
index 94a70ccdd9..e04b36fcac 100644
--- a/frontend-modern/src/components/shared/statusBadgeModel.ts
+++ b/frontend-modern/src/components/shared/statusBadgeModel.ts
@@ -13,7 +13,7 @@ export interface StatusBadgeProps {
 }
 
 const STATUS_BADGE_BASE_CLASS =
-  'inline-flex min-h-11 items-center justify-center rounded-md text-xs font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-blue-400 sm:min-h-0';
+  'inline-flex min-h-11 items-center justify-center rounded-md text-xs font-medium transition-colors focus:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-blue-400 sm:min-h-0';
 const STATUS_BADGE_PADDING_BY_SIZE: Record<StatusBadgeSize, string> = {
   sm: 'px-2 py-0.5',
   md: 'px-2.5 py-1',
diff --git a/frontend-modern/src/components/shared/summaryInteractionA11y.ts b/frontend-modern/src/components/shared/summaryInteractionA11y.ts
index dc9f549a50..e7b9c83a08 100644
--- a/frontend-modern/src/components/shared/summaryInteractionA11y.ts
+++ b/frontend-modern/src/components/shared/summaryInteractionA11y.ts
@@ -1,7 +1,7 @@
 import type { JSX } from 'solid-js';
 
 export const SUMMARY_ROW_ACTION_BUTTON_FOCUS_CLASS =
-  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-400/70';
+  'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-sky-400/70';
 
 const isFinePointerEvent = (event: PointerEvent): boolean => {
   const pointerType = typeof event.pointerType === 'string' ? event.pointerType : '';
diff --git a/frontend-modern/src/components/shared/tagInputModel.ts b/frontend-modern/src/components/shared/tagInputModel.ts
index c0b6b42ab5..3bdcbf1d5b 100644
--- a/frontend-modern/src/components/shared/tagInputModel.ts
+++ b/frontend-modern/src/components/shared/tagInputModel.ts
@@ -1,10 +1,10 @@
 export const TAG_INPUT_CONTAINER_CLASS =
   'min-h-[42px] flex flex-wrap items-center gap-2 rounded-md border border-border bg-surface p-2 text-sm text-base-content focus-within:border-sky-500 focus-within:ring-1 focus-within:ring-sky-500';
 export const TAG_INPUT_TAG_CLASS =
-  'inline-flex items-center gap-1 rounded bg-surface-alt px-2 py-1 text-xs font-medium text-base-content';
+  'inline-flex items-center gap-1 rounded-sm bg-surface-alt px-2 py-1 text-xs font-medium text-base-content';
 export const TAG_INPUT_REMOVE_BUTTON_CLASS =
-  'rounded-full p-0.5 text-slate-400 hover:bg-slate-300 hover:bg-surface-hover cursor-pointer focus:outline-none focus:ring-2 focus:ring-sky-500';
-export const TAG_INPUT_FIELD_CLASS = 'flex-1 bg-transparent min-w-[120px] focus:outline-none';
+  'rounded-full p-0.5 text-slate-400 hover:bg-slate-300 hover:bg-surface-hover cursor-pointer focus:outline-hidden focus:ring-2 focus:ring-sky-500';
+export const TAG_INPUT_FIELD_CLASS = 'flex-1 bg-transparent min-w-[120px] focus:outline-hidden';
 export const TAG_INPUT_DELIMITER_KEYS = ['Enter', ','] as const;
 
 export function isTagInputCommitKey(key: string): boolean {
diff --git a/frontend-modern/src/components/shared/toggleModel.ts b/frontend-modern/src/components/shared/toggleModel.ts
index d1bc88d414..3f2c495c68 100644
--- a/frontend-modern/src/components/shared/toggleModel.ts
+++ b/frontend-modern/src/components/shared/toggleModel.ts
@@ -49,7 +49,7 @@ export function getToggleTrackClass(
   className?: string,
 ): string {
   const config = toggleSizeConfig[size];
-  return `relative inline-flex ${config.track} shrink-0 items-center rounded-full p-0.5 transition-all duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)] after:absolute after:-inset-y-2.5 after:inset-x-0 after:content-[''] focus:outline-none focus:ring-0 ${
+  return `relative inline-flex ${config.track} shrink-0 items-center rounded-full p-0.5 transition-all duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)] after:absolute after:-inset-y-2.5 after:inset-x-0 after:content-[''] focus:outline-hidden focus:ring-0 ${
     disabled ? TOGGLE_DISABLED_CLASS : checked ? TOGGLE_CHECKED_CLASS : TOGGLE_UNCHECKED_CLASS
   } ${className ?? ''}`.trim();
 }
diff --git a/frontend-modern/src/features/actions/ActionDecisionPacket.tsx b/frontend-modern/src/features/actions/ActionDecisionPacket.tsx
index 141a584e72..28b3968d7a 100644
--- a/frontend-modern/src/features/actions/ActionDecisionPacket.tsx
+++ b/frontend-modern/src/features/actions/ActionDecisionPacket.tsx
@@ -159,7 +159,7 @@ export const ActionDecisionPacket: Component<{
           data-testid="action-policy-provenance"
           class="group rounded-lg border border-border bg-surface"
         >
-          <summary class="flex cursor-pointer list-none items-center justify-between gap-4 p-4 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-500">
+          <summary class="flex cursor-pointer list-none items-center justify-between gap-4 p-4 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-blue-500">
             <span>
               <span
                 id="action-policy-heading"
@@ -183,7 +183,7 @@ export const ActionDecisionPacket: Component<{
             <div class="mt-3 space-y-2">
               <For each={policy()?.authorities ?? []}>
                 {(authority) => (
-                  <div class="rounded border border-border-subtle bg-surface-hover p-3">
+                  <div class="rounded-sm border border-border-subtle bg-surface-hover p-3">
                     <div class="flex flex-wrap items-center justify-between gap-2 text-sm">
                       <span class="font-medium">{formatPolicyAuthority(authority)}</span>
                       <span class="text-muted">
@@ -288,7 +288,7 @@ export const ActionDecisionPacket: Component<{
                 <p class="mt-2 text-sm">{truth().verification.summary}</p>
               </Show>
               <Show when={(truth().verification.evidence ?? []).length > 0}>
-                <details class="mt-3 rounded border border-border-subtle p-3 text-xs">
+                <details class="mt-3 rounded-sm border border-border-subtle p-3 text-xs">
                   <summary class="cursor-pointer font-medium">Evidence details</summary>
                   <ul class="mt-2 space-y-2">
                     <For each={truth().verification.evidence}>
@@ -333,7 +333,7 @@ export const ActionDecisionPacket: Component<{
               {(presentation) => (
                 <div
                   data-testid="apt-action-next-step"
-                  class="rounded-lg border border-blue-200 bg-blue-50 p-4 text-sm text-blue-900 dark:border-blue-800 dark:bg-blue-950/40 dark:text-blue-200"
+                  class="rounded-lg border border-blue-200 bg-blue-50 p-4 text-sm text-blue-900/25 dark:border-blue-800 dark:bg-blue-950/40 dark:text-blue-200"
                 >
                   <div class="font-semibold">What to do next</div>
                   <p class="mt-1">{presentation().nextStep}</p>
@@ -380,7 +380,7 @@ export const ActionDecisionPacket: Component<{
               </div>
             </Show>
           </dl>
-          <details class="mt-3 rounded border border-border-subtle p-3 text-xs">
+          <details class="mt-3 rounded-sm border border-border-subtle p-3 text-xs">
             <summary class="cursor-pointer font-medium">Delivery identifiers</summary>
             <div class="mt-2 break-all text-muted">
               Action {props.audit.id}
diff --git a/frontend-modern/src/features/actions/ActionReviewDialog.tsx b/frontend-modern/src/features/actions/ActionReviewDialog.tsx
index 7b1a26319a..661cd35931 100644
--- a/frontend-modern/src/features/actions/ActionReviewDialog.tsx
+++ b/frontend-modern/src/features/actions/ActionReviewDialog.tsx
@@ -533,7 +533,7 @@ export const ActionReviewDialog: Component<{
                 <div
                   role="alert"
                   data-testid="action-review-invalid"
-                  class="mt-4 rounded border border-amber-300 bg-amber-50 p-3 text-sm text-amber-900 dark:bg-amber-950/40 dark:text-amber-200"
+                  class="mt-4 rounded-sm border border-amber-300 bg-amber-50 p-3 text-sm text-amber-900/25 dark:bg-amber-950/40 dark:text-amber-200"
                 >
                   {invalidActionMessage()}
                 </div>
@@ -541,7 +541,7 @@ export const ActionReviewDialog: Component<{
               <Show when={error()}>
                 <div
                   role="alert"
-                  class="mt-4 rounded border border-red-300 bg-red-50 p-3 text-sm text-red-800 dark:bg-red-950/40 dark:text-red-200"
+                  class="mt-4 rounded-sm border border-red-300 bg-red-50 p-3 text-sm text-red-800 dark:bg-red-950/40 dark:text-red-200"
                 >
                   {error()}
                 </div>
diff --git a/frontend-modern/src/features/alerts/AlertAppriseDestinationsSection.tsx b/frontend-modern/src/features/alerts/AlertAppriseDestinationsSection.tsx
index 5577eedcc2..e21c4d58df 100644
--- a/frontend-modern/src/features/alerts/AlertAppriseDestinationsSection.tsx
+++ b/frontend-modern/src/features/alerts/AlertAppriseDestinationsSection.tsx
@@ -87,7 +87,7 @@ export function AlertAppriseDestinationsSection(props: AlertAppriseDestinationsS
             }
           />
           <button
-            class="min-h-11 rounded border border-blue-500 px-3 py-1.5 text-xs font-medium text-blue-600 transition-colors hover:bg-blue-50 disabled:opacity-50 disabled:cursor-not-allowed sm:min-h-0 dark:border-blue-400 dark:text-blue-300 dark:hover:bg-blue-900"
+            class="min-h-11 rounded-sm border border-blue-500 px-3 py-1.5 text-xs font-medium text-blue-600 transition-colors hover:bg-blue-50 disabled:opacity-50 disabled:cursor-not-allowed sm:min-h-0 dark:border-blue-400 dark:text-blue-300 dark:hover:bg-blue-900/25"
             disabled={!props.config.enabled || props.testing}
             onClick={props.onTest}
           >
@@ -261,7 +261,7 @@ export function AlertAppriseDestinationsSection(props: AlertAppriseDestinationsS
                 <input
                   id={fieldIds.skipTlsVerify}
                   type="checkbox"
-                  class="h-4 w-4 rounded border border-border"
+                  class="h-4 w-4 rounded-sm border border-border"
                   checked={props.config.skipTlsVerify}
                   onChange={(event) => {
                     props.updateApprise({ skipTlsVerify: event.currentTarget.checked });
diff --git a/frontend-modern/src/features/alerts/AlertDeadManDestinationSection.tsx b/frontend-modern/src/features/alerts/AlertDeadManDestinationSection.tsx
index 25a9f6cd7e..493e722ec1 100644
--- a/frontend-modern/src/features/alerts/AlertDeadManDestinationSection.tsx
+++ b/frontend-modern/src/features/alerts/AlertDeadManDestinationSection.tsx
@@ -18,27 +18,27 @@ const statusPresentation: Record<DeadManStatus['state'], { label: string; class:
   disabled: { label: 'Not configured', class: 'bg-base text-muted' },
   starting: {
     label: 'Starting',
-    class: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-100',
+    class: 'bg-blue-100 text-blue-800 dark:bg-blue-900/25 dark:text-blue-100',
   },
   healthy: {
     label: 'Heartbeat healthy',
-    class: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-100',
+    class: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/25 dark:text-emerald-100',
   },
   delivery_failed: {
     label: 'Delivery failing',
-    class: 'bg-amber-100 text-amber-900 dark:bg-amber-900 dark:text-amber-100',
+    class: 'bg-amber-100 text-amber-900/25 dark:bg-amber-900/25 dark:text-amber-100',
   },
   monitor_stalled: {
     label: 'Monitoring stalled',
-    class: 'bg-red-100 text-red-900 dark:bg-red-900 dark:text-red-100',
+    class: 'bg-red-100 text-red-900/25 dark:bg-red-900/25 dark:text-red-100',
   },
   misconfigured: {
     label: 'Configuration invalid',
-    class: 'bg-red-100 text-red-900 dark:bg-red-900 dark:text-red-100',
+    class: 'bg-red-100 text-red-900/25 dark:bg-red-900/25 dark:text-red-100',
   },
   configuration_unavailable: {
     label: 'Configuration unavailable',
-    class: 'bg-red-100 text-red-900 dark:bg-red-900 dark:text-red-100',
+    class: 'bg-red-100 text-red-900/25 dark:bg-red-900/25 dark:text-red-100',
   },
 };
 
@@ -112,7 +112,7 @@ export function AlertDeadManDestinationSection(props: AlertDeadManDestinationSec
                 hasStoredUrl() ? 'Configured — enter a new URL to replace' : 'https://hc-ping.com/…'
               }
               aria-describedby={`${inputId}-help`}
-              class="min-w-0 flex-1 rounded-md border border-border bg-surface px-3 py-2 font-mono text-sm text-base-content shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
+              class="min-w-0 flex-1 rounded-md border border-border bg-surface px-3 py-2 font-mono text-sm text-base-content shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500/20"
               onInput={(event) => {
                 props.setPingUrl(event.currentTarget.value);
                 props.setHasUnsavedChanges(true);
@@ -123,7 +123,7 @@ export function AlertDeadManDestinationSection(props: AlertDeadManDestinationSec
               fallback={
                 <button
                   type="button"
-                  class="rounded-md border border-red-300 px-3 py-2 text-sm font-medium text-red-700 hover:bg-red-50 dark:border-red-800 dark:text-red-300 dark:hover:bg-red-950"
+                  class="rounded-md border border-red-300 px-3 py-2 text-sm font-medium text-red-700 hover:bg-red-50 dark:border-red-800 dark:text-red-300 dark:hover:bg-red-950/25"
                   onClick={() => {
                     props.setPingUrl('');
                     props.setHasUnsavedChanges(true);
@@ -187,7 +187,7 @@ export function AlertDeadManDestinationSection(props: AlertDeadManDestinationSec
         </Show>
 
         <Show when={status()?.lastError}>
-          <p class="rounded-md border border-amber-300 bg-amber-50 px-3 py-2 text-xs text-amber-900 dark:border-amber-700 dark:bg-amber-950 dark:text-amber-100">
+          <p class="rounded-md border border-amber-300 bg-amber-50 px-3 py-2 text-xs text-amber-900/25 dark:border-amber-700 dark:bg-amber-950/25 dark:text-amber-100">
             {status()!.lastError}
           </p>
         </Show>
diff --git a/frontend-modern/src/features/alerts/AlertDeliveryHealthCard.tsx b/frontend-modern/src/features/alerts/AlertDeliveryHealthCard.tsx
index 6839f5b831..9e2fe56466 100644
--- a/frontend-modern/src/features/alerts/AlertDeliveryHealthCard.tsx
+++ b/frontend-modern/src/features/alerts/AlertDeliveryHealthCard.tsx
@@ -55,7 +55,7 @@ export function AlertDeliveryHealthCard(props: AlertDeliveryHealthCardProps) {
       <div class="flex flex-wrap items-start justify-between gap-3">
         <div class="flex min-w-0 flex-1 basis-72 items-start gap-3">
           <AlertTriangleIcon
-            class="mt-0.5 h-4 w-4 flex-shrink-0 text-red-700 dark:text-red-300"
+            class="mt-0.5 h-4 w-4 shrink-0 text-red-700 dark:text-red-300"
             aria-hidden="true"
           />
           <div class="min-w-0">
diff --git a/frontend-modern/src/features/alerts/AlertDeliveryLogCard.tsx b/frontend-modern/src/features/alerts/AlertDeliveryLogCard.tsx
index c11b0f8c07..1b7bfb411b 100644
--- a/frontend-modern/src/features/alerts/AlertDeliveryLogCard.tsx
+++ b/frontend-modern/src/features/alerts/AlertDeliveryLogCard.tsx
@@ -140,7 +140,7 @@ export function AlertDeliveryLogCard(props: AlertDeliveryLogCardProps) {
           </div>
           <button
             type="button"
-            class="inline-flex flex-shrink-0 items-center justify-center gap-2 rounded-md border border-gray-300 bg-transparent px-3 py-1.5 text-sm font-medium text-gray-700 transition hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700/40"
+            class="inline-flex shrink-0 items-center justify-center gap-2 rounded-md border border-gray-300 bg-transparent px-3 py-1.5 text-sm font-medium text-gray-700 transition hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700/40"
             disabled={props.refreshing}
             onClick={props.onRefresh}
           >
@@ -172,7 +172,7 @@ export function AlertDeliveryLogCard(props: AlertDeliveryLogCardProps) {
                     <li class="flex flex-col gap-1 py-2">
                       <div class="flex flex-wrap items-center gap-x-3 gap-y-1">
                         <span
-                          class={`inline-flex flex-shrink-0 items-center rounded-full px-2 py-0.5 text-xs font-medium ${outcomeBadgeClasses[row.entry.outcome]}`}
+                          class={`inline-flex shrink-0 items-center rounded-full px-2 py-0.5 text-xs font-medium ${outcomeBadgeClasses[row.entry.outcome]}`}
                         >
                           {getAlertDeliveryLogOutcomeLabel(row.entry.outcome)}
                         </span>
@@ -186,7 +186,7 @@ export function AlertDeliveryLogCard(props: AlertDeliveryLogCardProps) {
                           {alertSummary(row.entry)}
                         </span>
                         <time
-                          class="ml-auto flex-shrink-0 text-xs text-gray-500 dark:text-gray-400"
+                          class="ml-auto shrink-0 text-xs text-gray-500 dark:text-gray-400"
                           dateTime={row.entry.timestamp}
                           title={formatRelativeTime(row.entry.timestamp)}
                         >
@@ -215,7 +215,7 @@ export function AlertDeliveryLogCard(props: AlertDeliveryLogCardProps) {
                     <li class="flex flex-col gap-1 py-2" title={row.event.message}>
                       <div class="flex flex-wrap items-center gap-x-3 gap-y-1">
                         <span
-                          class={`inline-flex flex-shrink-0 items-center rounded-full px-2 py-0.5 text-xs font-medium ${
+                          class={`inline-flex shrink-0 items-center rounded-full px-2 py-0.5 text-xs font-medium ${
                             row.event.type === 'notification_deferred'
                               ? 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300'
                               : 'bg-gray-100 text-gray-600 dark:bg-gray-700/60 dark:text-gray-300'
@@ -230,7 +230,7 @@ export function AlertDeliveryLogCard(props: AlertDeliveryLogCardProps) {
                           {describeAlertEventReason(row.event.reason)}
                         </span>
                         <time
-                          class="ml-auto flex-shrink-0 text-xs text-gray-500 dark:text-gray-400"
+                          class="ml-auto shrink-0 text-xs text-gray-500 dark:text-gray-400"
                           dateTime={row.event.occurredAt}
                           title={formatRelativeTime(row.event.occurredAt)}
                         >
diff --git a/frontend-modern/src/features/alerts/AlertDeliveryPausedCard.tsx b/frontend-modern/src/features/alerts/AlertDeliveryPausedCard.tsx
index da2330b6ad..697f91f258 100644
--- a/frontend-modern/src/features/alerts/AlertDeliveryPausedCard.tsx
+++ b/frontend-modern/src/features/alerts/AlertDeliveryPausedCard.tsx
@@ -27,9 +27,9 @@ export function AlertDeliveryPausedCard(props: AlertDeliveryPausedCardProps) {
     >
       <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
         <div class="flex min-w-0 items-start gap-3">
-          <BellOffIcon class="mt-0.5 h-4 w-4 flex-shrink-0 text-amber-700 dark:text-amber-300" />
+          <BellOffIcon class="mt-0.5 h-4 w-4 shrink-0 text-amber-700 dark:text-amber-300" />
           <div class="min-w-0">
-            <h3 class="text-sm font-semibold text-amber-900 dark:text-amber-100">
+            <h3 class="text-sm font-semibold text-amber-900/25 dark:text-amber-100">
               {getAlertDestinationsDeliveryPausedTitle()}
             </h3>
             <p class="mt-1 text-sm leading-6 text-amber-800 dark:text-amber-200">
@@ -39,7 +39,7 @@ export function AlertDeliveryPausedCard(props: AlertDeliveryPausedCardProps) {
         </div>
         <button
           type="button"
-          class="inline-flex flex-shrink-0 items-center justify-center gap-2 rounded-md border border-amber-300 bg-transparent px-3 py-1.5 text-sm font-medium text-amber-800 transition hover:bg-amber-100 disabled:cursor-not-allowed disabled:opacity-50 dark:border-amber-700 dark:text-amber-200 dark:hover:bg-amber-900/30"
+          class="inline-flex shrink-0 items-center justify-center gap-2 rounded-md border border-amber-300 bg-transparent px-3 py-1.5 text-sm font-medium text-amber-800 transition hover:bg-amber-100 disabled:cursor-not-allowed disabled:opacity-50 dark:border-amber-700 dark:text-amber-200 dark:hover:bg-amber-900/30"
           disabled={props.activating}
           onClick={props.onActivate}
         >
diff --git a/frontend-modern/src/features/alerts/AlertDestinationsLoadErrorCard.tsx b/frontend-modern/src/features/alerts/AlertDestinationsLoadErrorCard.tsx
index 72c9cfc36b..f94a7bba64 100644
--- a/frontend-modern/src/features/alerts/AlertDestinationsLoadErrorCard.tsx
+++ b/frontend-modern/src/features/alerts/AlertDestinationsLoadErrorCard.tsx
@@ -17,13 +17,13 @@ export function AlertDestinationsLoadErrorCard(props: AlertDestinationsLoadError
     <Card tone="danger" padding="sm" class="border-red-200 dark:border-red-800 sm:p-4">
       <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div class="flex items-center gap-2 text-red-800 dark:text-red-200">
-          <AlertTriangleIcon class="h-4 w-4 flex-shrink-0" />
+          <AlertTriangleIcon class="h-4 w-4 shrink-0" />
           <span class="text-sm font-medium">
             {getAlertDestinationsLoadErrorBanner(props.error)}
           </span>
         </div>
         <button
-          class="flex-shrink-0 rounded-md border border-red-300 bg-transparent px-3 py-1.5 text-sm font-medium text-red-800 transition hover:bg-red-100 disabled:cursor-not-allowed disabled:opacity-50 dark:border-red-700 dark:text-red-200 dark:hover:bg-red-900/30"
+          class="shrink-0 rounded-md border border-red-300 bg-transparent px-3 py-1.5 text-sm font-medium text-red-800 transition hover:bg-red-100 disabled:cursor-not-allowed disabled:opacity-50 dark:border-red-700 dark:text-red-200 dark:hover:bg-red-900/30"
           disabled={props.isRetrying}
           onClick={props.onRetry}
         >
diff --git a/frontend-modern/src/features/alerts/AlertDestinationsLoadingState.tsx b/frontend-modern/src/features/alerts/AlertDestinationsLoadingState.tsx
index 20ccca381b..0e09739544 100644
--- a/frontend-modern/src/features/alerts/AlertDestinationsLoadingState.tsx
+++ b/frontend-modern/src/features/alerts/AlertDestinationsLoadingState.tsx
@@ -6,40 +6,40 @@ export function AlertDestinationsLoadingState() {
       <Card padding="lg" class="space-y-4">
         <div class="flex items-center justify-between">
           <div class="space-y-2">
-            <div class="h-5 w-40 rounded bg-surface-hover" />
-            <div class="h-3 w-64 rounded bg-surface-hover" />
+            <div class="h-5 w-40 rounded-sm bg-surface-hover" />
+            <div class="h-3 w-64 rounded-sm bg-surface-hover" />
           </div>
           <div class="h-6 w-12 rounded-full bg-surface-hover" />
         </div>
         <div class="space-y-3">
-          <div class="h-4 w-24 rounded bg-surface-hover" />
-          <div class="h-10 w-full rounded bg-surface-hover" />
-          <div class="h-4 w-32 rounded bg-surface-hover" />
-          <div class="h-10 w-full rounded bg-surface-hover" />
+          <div class="h-4 w-24 rounded-sm bg-surface-hover" />
+          <div class="h-10 w-full rounded-sm bg-surface-hover" />
+          <div class="h-4 w-32 rounded-sm bg-surface-hover" />
+          <div class="h-10 w-full rounded-sm bg-surface-hover" />
         </div>
       </Card>
       <Card padding="lg" class="space-y-4">
         <div class="flex items-center justify-between">
           <div class="space-y-2">
-            <div class="h-5 w-44 rounded bg-surface-hover" />
-            <div class="h-3 w-72 rounded bg-surface-hover" />
+            <div class="h-5 w-44 rounded-sm bg-surface-hover" />
+            <div class="h-3 w-72 rounded-sm bg-surface-hover" />
           </div>
           <div class="h-6 w-12 rounded-full bg-surface-hover" />
         </div>
         <div class="space-y-3">
-          <div class="h-4 w-28 rounded bg-surface-hover" />
-          <div class="h-10 w-full rounded bg-surface-hover" />
+          <div class="h-4 w-28 rounded-sm bg-surface-hover" />
+          <div class="h-10 w-full rounded-sm bg-surface-hover" />
         </div>
       </Card>
       <Card padding="lg" class="space-y-4">
         <div class="flex items-center justify-between">
           <div class="space-y-2">
-            <div class="h-5 w-28 rounded bg-surface-hover" />
-            <div class="h-3 w-56 rounded bg-surface-hover" />
+            <div class="h-5 w-28 rounded-sm bg-surface-hover" />
+            <div class="h-3 w-56 rounded-sm bg-surface-hover" />
           </div>
-          <div class="h-4 w-20 rounded bg-surface-hover" />
+          <div class="h-4 w-20 rounded-sm bg-surface-hover" />
         </div>
-        <div class="h-10 w-full rounded bg-surface-hover" />
+        <div class="h-10 w-full rounded-sm bg-surface-hover" />
       </Card>
     </div>
   );
diff --git a/frontend-modern/src/features/alerts/AlertEscalationSection.tsx b/frontend-modern/src/features/alerts/AlertEscalationSection.tsx
index 2e319a43bd..9169bb021f 100644
--- a/frontend-modern/src/features/alerts/AlertEscalationSection.tsx
+++ b/frontend-modern/src/features/alerts/AlertEscalationSection.tsx
@@ -137,7 +137,7 @@ export function AlertEscalationSection(props: AlertEscalationSectionProps) {
                                         );
                                     props.setEscalationDestinationIds(index(), next);
                                   }}
-                                  class="h-4 w-4 rounded border-border"
+                                  class="h-4 w-4 rounded-sm border-border"
                                 />
                                 <span class="min-w-0 truncate">{destination.label}</span>
                                 <Show when={!destination.enabled}>
@@ -156,7 +156,7 @@ export function AlertEscalationSection(props: AlertEscalationSectionProps) {
                   <button
                     type="button"
                     onClick={() => props.removeEscalationLevel(index())}
-                    class="rounded-md p-1.5 text-red-600 transition-colors hover:bg-red-100 dark:hover:bg-red-900"
+                    class="rounded-md p-1.5 text-red-600 transition-colors hover:bg-red-100 dark:hover:bg-red-900/25"
                     title={ALERT_CONFIG_ESCALATION_REMOVE_TITLE}
                     aria-label={ALERT_CONFIG_ESCALATION_REMOVE_TITLE}
                   >
diff --git a/frontend-modern/src/features/alerts/AlertHistoryAdministrationCard.tsx b/frontend-modern/src/features/alerts/AlertHistoryAdministrationCard.tsx
index 1209698e8a..bc7d65da1f 100644
--- a/frontend-modern/src/features/alerts/AlertHistoryAdministrationCard.tsx
+++ b/frontend-modern/src/features/alerts/AlertHistoryAdministrationCard.tsx
@@ -29,7 +29,7 @@ export function AlertHistoryAdministrationCard(props: AlertHistoryAdministration
               onClick={() => {
                 void props.state.clearAlertHistory();
               }}
-              class="flex-shrink-0 rounded-md border border-red-300 px-3 py-2 text-xs text-red-600 transition-colors hover:bg-red-50 dark:border-red-600 dark:text-red-400 dark:hover:bg-red-900"
+              class="shrink-0 rounded-md border border-red-300 px-3 py-2 text-xs text-red-600 transition-colors hover:bg-red-50 dark:border-red-600 dark:text-red-400 dark:hover:bg-red-900/25"
             >
               {getAlertAdministrationClearHistoryLabel()}
             </button>
diff --git a/frontend-modern/src/features/alerts/AlertHistoryFrequencyCard.tsx b/frontend-modern/src/features/alerts/AlertHistoryFrequencyCard.tsx
index 650e77f7fa..b323272de2 100644
--- a/frontend-modern/src/features/alerts/AlertHistoryFrequencyCard.tsx
+++ b/frontend-modern/src/features/alerts/AlertHistoryFrequencyCard.tsx
@@ -108,7 +108,7 @@ export function AlertHistoryFrequencyCard(props: AlertHistoryFrequencyCardProps)
               dozens of pointer targets below the WCAG 2.2 minimum target size.
             */}
             <div class="w-max min-w-full">
-              <div class="rounded bg-surface-alt p-1">
+              <div class="rounded-sm bg-surface-alt p-1">
                 <div class="flex h-12 items-end gap-1">
                   {trends.buckets.map((value, index) => {
                     const scaledHeight =
@@ -133,7 +133,7 @@ export function AlertHistoryFrequencyCard(props: AlertHistoryFrequencyCardProps)
                       <button
                         type="button"
                         data-alert-frequency-bucket={index}
-                        class="relative flex h-12 min-w-6 flex-1 cursor-pointer items-end rounded-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-inset"
+                        class="relative flex h-12 min-w-6 flex-1 cursor-pointer items-end rounded-xs focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-inset"
                         aria-pressed={isSelected()}
                         aria-label={`${countLabel} between ${bucketRangeLabel}`}
                         onClick={() =>
@@ -144,7 +144,7 @@ export function AlertHistoryFrequencyCard(props: AlertHistoryFrequencyCardProps)
                       >
                         <span class="absolute bottom-0 h-1 w-full rounded-full bg-slate-300 opacity-30"></span>
                         <span
-                          class="relative w-full rounded-sm transition-all"
+                          class="relative w-full rounded-xs transition-all"
                           style={{
                             height: `${pixelHeight}px`,
                             'background-color':
diff --git a/frontend-modern/src/features/alerts/AlertIncidentSynthesisSummary.tsx b/frontend-modern/src/features/alerts/AlertIncidentSynthesisSummary.tsx
index 151b7057c3..350a3e5bfd 100644
--- a/frontend-modern/src/features/alerts/AlertIncidentSynthesisSummary.tsx
+++ b/frontend-modern/src/features/alerts/AlertIncidentSynthesisSummary.tsx
@@ -23,7 +23,7 @@ export function AlertIncidentSynthesisSummary(props: AlertIncidentSynthesisSumma
             <h3 class="text-sm font-semibold text-base-content">{value().title}</h3>
             <span class={value().badgeClass}>{value().badge}</span>
           </div>
-          <p class="mt-1 text-sm text-base-content/80">{correlation()!.reason}</p>
+          <p class="mt-1 text-sm">{correlation()!.reason}</p>
           <p class="mt-1 text-xs text-muted">{value().counts}</p>
           <details class="mt-2">
             <summary class="cursor-pointer text-xs font-medium text-blue-700 dark:text-blue-300">
@@ -32,7 +32,7 @@ export function AlertIncidentSynthesisSummary(props: AlertIncidentSynthesisSumma
             <div class="mt-2 space-y-2 border-l-2 border-border pl-3">
               <For each={correlation()!.observations ?? []}>
                 {(observation) => (
-                  <div class="text-xs text-base-content/80">
+                  <div class="text-xs">
                     <div class="font-medium text-base-content">
                       {observation.resourceName || observation.resourceId}
                     </div>
diff --git a/frontend-modern/src/features/alerts/AlertOverviewActiveAlertsSection.tsx b/frontend-modern/src/features/alerts/AlertOverviewActiveAlertsSection.tsx
index 7e3782d075..f61a8ee44e 100644
--- a/frontend-modern/src/features/alerts/AlertOverviewActiveAlertsSection.tsx
+++ b/frontend-modern/src/features/alerts/AlertOverviewActiveAlertsSection.tsx
@@ -102,7 +102,7 @@ export function AlertOverviewActiveAlertsSection(props: AlertOverviewActiveAlert
             <Show when={props.state.alertStats().active > 0}>
               <button
                 type="button"
-                class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium rounded-md border border-blue-200 dark:border-blue-700 bg-blue-50 dark:bg-blue-900 text-blue-700 dark:text-blue-200 transition-colors hover:bg-blue-100 dark:hover:bg-blue-900 disabled:opacity-60 disabled:cursor-not-allowed"
+                class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium rounded-md border border-blue-200 dark:border-blue-700 bg-blue-50 dark:bg-blue-900/25 text-blue-700 dark:text-blue-200 transition-colors hover:bg-blue-100 dark:hover:bg-blue-900/25 disabled:opacity-60 disabled:cursor-not-allowed"
                 disabled={props.state.bulkAckProcessing()}
                 onClick={() => {
                   void props.state.handleBulkAcknowledge();
diff --git a/frontend-modern/src/features/alerts/AlertOverviewAlertCard.tsx b/frontend-modern/src/features/alerts/AlertOverviewAlertCard.tsx
index cf273fd75b..2510d165ed 100644
--- a/frontend-modern/src/features/alerts/AlertOverviewAlertCard.tsx
+++ b/frontend-modern/src/features/alerts/AlertOverviewAlertCard.tsx
@@ -148,12 +148,12 @@ export function AlertOverviewAlertCard(props: AlertOverviewAlertCardProps) {
                 </span>
               </Show>
               <Show when={isAlertSnoozed(props.alert)}>
-                <span class="shrink-0 rounded bg-blue-100 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-blue-700 dark:bg-blue-900/50 dark:text-blue-300">
+                <span class="shrink-0 rounded-sm bg-blue-100 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-blue-700 dark:bg-blue-900/50 dark:text-blue-300">
                   {getAlertOverviewSnoozeLabel()}
                 </span>
               </Show>
             </div>
-            <p class="text-sm text-base-content mt-1 break-words">{props.alert.message}</p>
+            <p class="text-sm text-base-content mt-1 wrap-break-word">{props.alert.message}</p>
             <div class="flex flex-wrap items-center gap-x-3 gap-y-0.5 mt-1">
               <p class={getAlertOverviewStartedAtClass()}>
                 {getAlertOverviewStartedAtLabel(new Date(props.alert.startTime).toLocaleString())}
diff --git a/frontend-modern/src/features/alerts/AlertQueueActionFeedback.tsx b/frontend-modern/src/features/alerts/AlertQueueActionFeedback.tsx
index c356f4081a..62ec12dee1 100644
--- a/frontend-modern/src/features/alerts/AlertQueueActionFeedback.tsx
+++ b/frontend-modern/src/features/alerts/AlertQueueActionFeedback.tsx
@@ -12,7 +12,7 @@ export function AlertQueueActionFeedback(props: { message: string | null; onClea
         <Show when={props.message}>
           <Card tone="warning" padding="sm">
             <div class="flex flex-wrap items-start justify-between gap-3">
-              <p class="min-w-0 flex-1 basis-72 break-words text-sm text-base-content">
+              <p class="min-w-0 flex-1 basis-72 wrap-break-word text-sm text-base-content">
                 {props.message}
               </p>
               <Button
diff --git a/frontend-modern/src/features/alerts/AlertSnoozeAction.tsx b/frontend-modern/src/features/alerts/AlertSnoozeAction.tsx
index 94310136d3..5d5a9ee59e 100644
--- a/frontend-modern/src/features/alerts/AlertSnoozeAction.tsx
+++ b/frontend-modern/src/features/alerts/AlertSnoozeAction.tsx
@@ -92,7 +92,7 @@ export function AlertSnoozeAction(props: {
                 <Button
                   variant="outline"
                   size="md"
-                  class="w-full justify-start rounded-lg text-left hover:border-primary hover:bg-primary/5"
+                  class="w-full rounded-lg text-left hover:border-primary hover:bg-primary/5"
                   disabled={busy()}
                   onClick={async () => {
                     if (busy()) return;
diff --git a/frontend-modern/src/features/alerts/ResourceMonitoringPolicyAction.tsx b/frontend-modern/src/features/alerts/ResourceMonitoringPolicyAction.tsx
index c9556f0db0..07b9a2eb4e 100644
--- a/frontend-modern/src/features/alerts/ResourceMonitoringPolicyAction.tsx
+++ b/frontend-modern/src/features/alerts/ResourceMonitoringPolicyAction.tsx
@@ -175,7 +175,7 @@ export function ResourceMonitoringPolicyAction(props: ResourceMonitoringPolicyAc
             data-monitoring-policy-menu-root
             role="menu"
             aria-labelledby={menuButton.triggerId}
-            class="fixed z-[9999] w-72 rounded-md border border-border bg-surface p-1.5 shadow-lg"
+            class="fixed z-9999 w-72 rounded-md border border-border bg-surface p-1.5 shadow-lg"
             style={{ left: `${menuPosition().left}px`, top: `${menuPosition().top}px` }}
             onMouseDown={(event) => event.stopPropagation()}
             onClick={(event) => event.stopPropagation()}
@@ -194,7 +194,7 @@ export function ResourceMonitoringPolicyAction(props: ResourceMonitoringPolicyAc
                   role="menuitem"
                   tabindex="-1"
                   disabled={saving()}
-                  class="block w-full rounded px-2 py-2 text-left hover:bg-surface-hover disabled:opacity-50"
+                  class="block w-full rounded-sm px-2 py-2 text-left hover:bg-surface-hover disabled:opacity-50"
                   onClick={() => void applyChoice(choice)}
                 >
                   <span class="block text-xs font-medium text-base-content">{choice.label}</span>
diff --git a/frontend-modern/src/features/alerts/tabs/ScheduleTab.tsx b/frontend-modern/src/features/alerts/tabs/ScheduleTab.tsx
index 2609b0db85..146e88900a 100644
--- a/frontend-modern/src/features/alerts/tabs/ScheduleTab.tsx
+++ b/frontend-modern/src/features/alerts/tabs/ScheduleTab.tsx
@@ -55,7 +55,7 @@ export function ScheduleTab(props: ScheduleTabProps) {
         <button
           type="button"
           onClick={scheduleState.resetToDefaults}
-          class="inline-flex items-center gap-2 self-start rounded-md border border-border bg-surface px-3 py-2 text-sm font-medium shadow-sm transition-colors hover:bg-surface-hover"
+          class="inline-flex items-center gap-2 self-start rounded-md border border-border bg-surface px-3 py-2 text-sm font-medium shadow-xs transition-colors hover:bg-surface-hover"
           title={getAlertConfigResetDefaultsTitle()}
         >
           <svg
diff --git a/frontend-modern/src/features/docker/DockerConfigsTable.tsx b/frontend-modern/src/features/docker/DockerConfigsTable.tsx
index d02bee7681..3ff681edc6 100644
--- a/frontend-modern/src/features/docker/DockerConfigsTable.tsx
+++ b/frontend-modern/src/features/docker/DockerConfigsTable.tsx
@@ -194,7 +194,7 @@ export const DockerConfigsTable: Component<DockerNativeTableProps> = (props) =>
                             class={`${getPlatformTableCellClassForKind('text')} text-base-content`}
                           >
                             <span
-                              class="inline-block max-w-[14rem] truncate"
+                              class="inline-block max-w-56 truncate"
                               title={dockerTextValue(resource.docker?.objectCreatedAt)}
                             >
                               <PlatformTableRelativeTimeValue
@@ -206,7 +206,7 @@ export const DockerConfigsTable: Component<DockerNativeTableProps> = (props) =>
                             class={`${getPlatformTableCellClassForKind('text')} platform-table-phone-hidden text-base-content`}
                           >
                             <span
-                              class="inline-block max-w-[22rem] truncate"
+                              class="inline-block max-w-88 truncate"
                               title={dockerLabelsSummary(resource.docker?.labels)}
                             >
                               {dockerLabelsSummary(resource.docker?.labels)}
diff --git a/frontend-modern/src/features/docker/DockerContainerLifecycleControls.tsx b/frontend-modern/src/features/docker/DockerContainerLifecycleControls.tsx
index ebeddb8219..0625412003 100644
--- a/frontend-modern/src/features/docker/DockerContainerLifecycleControls.tsx
+++ b/frontend-modern/src/features/docker/DockerContainerLifecycleControls.tsx
@@ -43,7 +43,7 @@ export type DockerContainerLifecycleControlsProps = {
 };
 
 const buttonBaseClass =
-  'inline-flex h-10 w-10 shrink-0 items-center justify-center rounded border text-muted transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60 focus-visible:ring-offset-1 focus-visible:ring-offset-surface sm:h-7 sm:w-7';
+  'inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-sm border text-muted transition-colors focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500/60 focus-visible:ring-offset-1 focus-visible:ring-offset-surface sm:h-7 sm:w-7';
 const enabledButtonClass =
   'border-border-subtle bg-surface hover:border-blue-400 hover:bg-blue-50 hover:text-blue-700 dark:hover:bg-blue-950/40 dark:hover:text-blue-300';
 const disabledButtonClass = 'cursor-not-allowed border-border-subtle bg-surface-alt opacity-55';
@@ -210,7 +210,7 @@ export const DockerContainerLifecycleControls: Component<DockerContainerLifecycl
           ref={menuTriggerRef}
           type="button"
           id={menuButton.triggerId}
-          class={`inline-flex h-7 w-7 shrink-0 items-center justify-center rounded border ${enabledButtonClass}`}
+          class={`inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-sm border ${enabledButtonClass}`}
           title={`Container actions for ${dockerContainerLifecycleName(props.resource)}`}
           aria-label={`Container actions for ${dockerContainerLifecycleName(props.resource)}`}
           aria-haspopup="menu"
@@ -239,7 +239,7 @@ export const DockerContainerLifecycleControls: Component<DockerContainerLifecycl
               data-docker-lifecycle-menu-root
               role="menu"
               aria-labelledby={menuButton.triggerId}
-              class="fixed z-[9999] w-52 rounded-md border border-border bg-surface p-1 text-left shadow-lg"
+              class="fixed z-9999 w-52 rounded-md border border-border bg-surface p-1 text-left shadow-lg"
               style={{ left: `${menuPosition().left}px`, top: `${menuPosition().top}px` }}
               onMouseDown={(event) => event.stopPropagation()}
               onClick={(event) => event.stopPropagation()}
@@ -261,7 +261,7 @@ export const DockerContainerLifecycleControls: Component<DockerContainerLifecycl
                       type="button"
                       role="menuitem"
                       tabindex="-1"
-                      class="flex w-full items-center gap-2 rounded px-2 py-2 text-left text-xs font-medium text-base-content transition-colors hover:bg-surface-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60 disabled:cursor-not-allowed disabled:opacity-50"
+                      class="flex w-full items-center gap-2 rounded-sm px-2 py-2 text-left text-xs font-medium text-base-content transition-colors hover:bg-surface-hover focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500/60 disabled:cursor-not-allowed disabled:opacity-50"
                       disabled={disabled()}
                       title={titleForAction(spec.action, spec.label)}
                       aria-label={titleForAction(spec.action, spec.label)}
diff --git a/frontend-modern/src/features/docker/DockerHostDrawerOverview.tsx b/frontend-modern/src/features/docker/DockerHostDrawerOverview.tsx
index f3cce4702c..9469c224f3 100644
--- a/frontend-modern/src/features/docker/DockerHostDrawerOverview.tsx
+++ b/frontend-modern/src/features/docker/DockerHostDrawerOverview.tsx
@@ -123,12 +123,12 @@ export function DockerHostDrawerManagement(props: DockerHostDrawerOverviewProps)
             />
           </Show>
           <Show when={updateActions.dockerActionError()}>
-            <div class="rounded border border-red-200 bg-red-50 px-2 py-1.5 text-[10px] text-red-700 dark:border-red-700 dark:bg-red-900 dark:text-red-200">
+            <div class="rounded-sm border border-red-200 bg-red-50 px-2 py-1.5 text-[10px] text-red-700 dark:border-red-700 dark:bg-red-900/25 dark:text-red-200">
               {updateActions.dockerActionError()}
             </div>
           </Show>
           <Show when={updateActions.dockerActionNote()}>
-            <div class="rounded border border-border bg-surface-hover px-2 py-1.5 text-[10px] text-base-content">
+            <div class="rounded-sm border border-border bg-surface-hover px-2 py-1.5 text-[10px] text-base-content">
               {updateActions.dockerActionNote()}
             </div>
           </Show>
diff --git a/frontend-modern/src/features/docker/DockerHostsTable.tsx b/frontend-modern/src/features/docker/DockerHostsTable.tsx
index 5bcd8add79..3f472d25fa 100644
--- a/frontend-modern/src/features/docker/DockerHostsTable.tsx
+++ b/frontend-modern/src/features/docker/DockerHostsTable.tsx
@@ -379,8 +379,8 @@ export const DockerHostsTable: Component<{
                       const s = hostAlertStyles();
                       if (!s.hasUnacknowledgedAlert) return '';
                       return s.severity === 'critical'
-                        ? 'bg-red-50 dark:bg-red-950'
-                        : 'bg-yellow-50 dark:bg-yellow-950';
+                        ? 'bg-red-50 dark:bg-red-950/25'
+                        : 'bg-yellow-50 dark:bg-yellow-950/25';
                     };
                     return (
                       <>
diff --git a/frontend-modern/src/features/docker/DockerNativeTableShared.tsx b/frontend-modern/src/features/docker/DockerNativeTableShared.tsx
index ec7e29a22b..706a625af1 100644
--- a/frontend-modern/src/features/docker/DockerNativeTableShared.tsx
+++ b/frontend-modern/src/features/docker/DockerNativeTableShared.tsx
@@ -105,7 +105,7 @@ export const DockerNativeDetailPanel: Component<{
       {(field) => (
         <div class="min-w-0">
           <dt class="text-[10px] font-medium uppercase tracking-wide text-muted">{field[0]}</dt>
-          <dd class="break-words font-mono text-base-content">{field[1] || '—'}</dd>
+          <dd class="wrap-break-word font-mono text-base-content">{field[1] || '—'}</dd>
         </div>
       )}
     </For>
diff --git a/frontend-modern/src/features/docker/DockerNetworksTable.tsx b/frontend-modern/src/features/docker/DockerNetworksTable.tsx
index 4142591e9a..db79aef671 100644
--- a/frontend-modern/src/features/docker/DockerNetworksTable.tsx
+++ b/frontend-modern/src/features/docker/DockerNetworksTable.tsx
@@ -221,7 +221,7 @@ const filterAttachmentRows = (
 };
 
 const AttachmentRowCard: Component<{ row: DockerNetworkAttachmentRow }> = (props) => (
-  <div class="rounded border border-border bg-surface px-3 py-2">
+  <div class="rounded-sm border border-border bg-surface px-3 py-2">
     <div class="grid gap-2 text-[11px] md:grid-cols-[minmax(0,1.2fr)_7rem_9rem_minmax(0,1fr)] md:items-center">
       <div class="flex min-w-0 items-center gap-2">
         <StatusDot size="sm" variant={props.row.status.variant} title={props.row.status.label} />
@@ -289,7 +289,7 @@ const AttachmentDetail: Component<{ rows: readonly DockerNetworkAttachmentRow[]
       <Show
         when={props.rows.length > 0}
         fallback={
-          <div class="rounded border border-border bg-surface px-3 py-2 text-[11px] text-muted">
+          <div class="rounded-sm border border-border bg-surface px-3 py-2 text-[11px] text-muted">
             No attached Docker containers reported on this network.
           </div>
         }
@@ -320,7 +320,7 @@ const AttachmentDetail: Component<{ rows: readonly DockerNetworkAttachmentRow[]
         <Show
           when={tableState.filtered().length > 0}
           fallback={
-            <div class="rounded border border-border bg-surface px-3 py-2 text-[11px] text-muted">
+            <div class="rounded-sm border border-border bg-surface px-3 py-2 text-[11px] text-muted">
               No attached containers match current filters.
             </div>
           }
@@ -345,7 +345,7 @@ const AttachmentDetail: Component<{ rows: readonly DockerNetworkAttachmentRow[]
             <Show when={hiddenRowCount() > 0}>
               <button
                 type="button"
-                class="w-full rounded border border-border bg-surface px-3 py-2 text-xs font-medium text-base-content hover:bg-surface-hover"
+                class="w-full rounded-sm border border-border bg-surface px-3 py-2 text-xs font-medium text-base-content hover:bg-surface-hover"
                 onClick={() => setShowAll(true)}
               >
                 Show all {attachmentPlainCountLabel(tableState.filtered().length)}
@@ -354,7 +354,7 @@ const AttachmentDetail: Component<{ rows: readonly DockerNetworkAttachmentRow[]
             <Show when={showAll() && tableState.filtered().length > ATTACHMENT_DETAIL_ROW_LIMIT}>
               <button
                 type="button"
-                class="w-full rounded border border-border bg-surface px-3 py-2 text-xs font-medium text-base-content hover:bg-surface-hover"
+                class="w-full rounded-sm border border-border bg-surface px-3 py-2 text-xs font-medium text-base-content hover:bg-surface-hover"
                 onClick={() => setShowAll(false)}
               >
                 Show first {ATTACHMENT_DETAIL_ROW_LIMIT}
@@ -370,7 +370,7 @@ const AttachmentDetail: Component<{ rows: readonly DockerNetworkAttachmentRow[]
 const NetworkConfigDetail: Component<{ resource: Resource }> = (props) => (
   <section class="min-w-0">
     <h3 class="mb-2 text-xs font-semibold text-base-content">Network details</h3>
-    <div class="rounded border border-border bg-surface px-3 py-2">
+    <div class="rounded-sm border border-border bg-surface px-3 py-2">
       <For each={networkDetailRows(props.resource)}>
         {([label, value]) => (
           <div class="grid grid-cols-[6rem_minmax(0,1fr)] gap-3 py-1 text-[11px]">
@@ -471,7 +471,7 @@ export const DockerNetworksTable: Component<DockerNetworksTableProps> = (props)
         >
           <PlatformTableShell
             title={props.title ?? 'Networks'}
-            tableClass="min-w-[0px] table-fixed text-xs"
+            tableClass="min-w-0 table-fixed text-xs"
             header={
               <>
                 <TableHead
diff --git a/frontend-modern/src/features/docker/DockerSecretsTable.tsx b/frontend-modern/src/features/docker/DockerSecretsTable.tsx
index ea9054928e..4e6c69465d 100644
--- a/frontend-modern/src/features/docker/DockerSecretsTable.tsx
+++ b/frontend-modern/src/features/docker/DockerSecretsTable.tsx
@@ -209,7 +209,7 @@ export const DockerSecretsTable: Component<DockerNativeTableProps> = (props) =>
                             class={`${getPlatformTableCellClassForKind('text')} text-base-content`}
                           >
                             <span
-                              class="inline-block max-w-[12rem] truncate"
+                              class="inline-block max-w-48 truncate"
                               title={dockerTextValue(resource.docker?.objectCreatedAt)}
                             >
                               <PlatformTableRelativeTimeValue
diff --git a/frontend-modern/src/features/docker/DockerServicesTable.tsx b/frontend-modern/src/features/docker/DockerServicesTable.tsx
index e86b6b98c2..08acecf103 100644
--- a/frontend-modern/src/features/docker/DockerServicesTable.tsx
+++ b/frontend-modern/src/features/docker/DockerServicesTable.tsx
@@ -325,7 +325,7 @@ export const DockerServicesTable: Component<{
                           <TableCell
                             class={`${getPlatformTableCellClassForKind('text')} platform-table-narrow-hidden hidden text-base-content md:table-cell`}
                           >
-                            <span class="truncate inline-block max-w-[8rem]" title={stack()}>
+                            <span class="truncate inline-block max-w-32" title={stack()}>
                               {stack()}
                             </span>
                           </TableCell>
@@ -354,10 +354,7 @@ export const DockerServicesTable: Component<{
                           <TableCell
                             class={`${getPlatformTableCellClassForKind('text')} text-base-content`}
                           >
-                            <span
-                              class="truncate inline-block max-w-[10rem]"
-                              title={update().title}
-                            >
+                            <span class="truncate inline-block max-w-40" title={update().title}>
                               {update().label}
                             </span>
                           </TableCell>
diff --git a/frontend-modern/src/features/docker/DockerStorageUsageTable.tsx b/frontend-modern/src/features/docker/DockerStorageUsageTable.tsx
index b76c7553f0..b05949b367 100644
--- a/frontend-modern/src/features/docker/DockerStorageUsageTable.tsx
+++ b/frontend-modern/src/features/docker/DockerStorageUsageTable.tsx
@@ -217,25 +217,25 @@ export const DockerStorageUsageTable: Component<{
                               </div>
                               <div>
                                 <span class="text-muted">Images</span>
-                                <div class="break-words font-mono text-base-content">
+                                <div class="wrap-break-word font-mono text-base-content">
                                   {bucketDetail(host.docker?.imagesUsage)}
                                 </div>
                               </div>
                               <div>
                                 <span class="text-muted">Containers</span>
-                                <div class="break-words font-mono text-base-content">
+                                <div class="wrap-break-word font-mono text-base-content">
                                   {bucketDetail(host.docker?.containersUsage)}
                                 </div>
                               </div>
                               <div>
                                 <span class="text-muted">Volumes</span>
-                                <div class="break-words font-mono text-base-content">
+                                <div class="wrap-break-word font-mono text-base-content">
                                   {bucketDetail(host.docker?.volumesUsage)}
                                 </div>
                               </div>
                               <div>
                                 <span class="text-muted">Build cache</span>
-                                <div class="break-words font-mono text-base-content">
+                                <div class="wrap-break-word font-mono text-base-content">
                                   {bucketDetail(host.docker?.buildCacheUsage)}
                                 </div>
                               </div>
diff --git a/frontend-modern/src/features/docker/DockerTasksTable.tsx b/frontend-modern/src/features/docker/DockerTasksTable.tsx
index d5f01c409a..e8fabdeaa0 100644
--- a/frontend-modern/src/features/docker/DockerTasksTable.tsx
+++ b/frontend-modern/src/features/docker/DockerTasksTable.tsx
@@ -237,7 +237,7 @@ export const DockerTasksTable: Component<DockerNativeTableProps> = (props) => {
                             class={`${getPlatformTableCellClassForKind('text')} text-base-content`}
                           >
                             <span
-                              class="inline-block max-w-[14rem] truncate"
+                              class="inline-block max-w-56 truncate"
                               title={dockerTextValue(
                                 resource.docker?.error ||
                                   resource.docker?.message ||
@@ -256,7 +256,7 @@ export const DockerTasksTable: Component<DockerNativeTableProps> = (props) => {
                             class={`${getPlatformTableCellClassForKind('text')} platform-table-narrow-hidden hidden text-base-content md:table-cell`}
                           >
                             <span
-                              class="inline-block max-w-[12rem] truncate"
+                              class="inline-block max-w-48 truncate"
                               title={dockerTextValue(resource.docker?.startedAt)}
                             >
                               {dockerTextValue(resource.docker?.startedAt)}
diff --git a/frontend-modern/src/features/docker/DockerVolumesTable.tsx b/frontend-modern/src/features/docker/DockerVolumesTable.tsx
index fcdccfe90c..3a20f3a779 100644
--- a/frontend-modern/src/features/docker/DockerVolumesTable.tsx
+++ b/frontend-modern/src/features/docker/DockerVolumesTable.tsx
@@ -246,7 +246,7 @@ export const DockerVolumesTable: Component<DockerNativeTableProps> = (props) =>
                             class={`${getPlatformTableCellClassForKind('text')} text-base-content`}
                           >
                             <span
-                              class="inline-block max-w-[12rem] truncate"
+                              class="inline-block max-w-48 truncate"
                               title={formatPlatformTableDateTimeValue(resource.docker?.createdAt)}
                             >
                               <PlatformTableRelativeTimeValue
@@ -259,7 +259,7 @@ export const DockerVolumesTable: Component<DockerNativeTableProps> = (props) =>
                             class={`${getPlatformTableCellClassForKind('text')} hidden text-base-content md:table-cell`}
                           >
                             <span
-                              class="inline-block max-w-[22rem] truncate"
+                              class="inline-block max-w-88 truncate"
                               title={dockerTextValue(resource.docker?.mountpoint)}
                             >
                               {dockerTextValue(resource.docker?.mountpoint)}
diff --git a/frontend-modern/src/features/kubernetes/KubernetesAutoscalingTable.tsx b/frontend-modern/src/features/kubernetes/KubernetesAutoscalingTable.tsx
index 93134c71e7..9f92539052 100644
--- a/frontend-modern/src/features/kubernetes/KubernetesAutoscalingTable.tsx
+++ b/frontend-modern/src/features/kubernetes/KubernetesAutoscalingTable.tsx
@@ -273,14 +273,14 @@ export const KubernetesAutoscalingTable: Component<{
                           <TableCell
                             class={`${getPlatformTableCellClassForKind('text')} hidden text-base-content lg:table-cell`}
                           >
-                            <span class="inline-block max-w-[12rem] truncate" title={scope()}>
+                            <span class="inline-block max-w-48 truncate" title={scope()}>
                               {scope()}
                             </span>
                           </TableCell>
                           <TableCell
                             class={`${getPlatformTableCellClassForKind('text')} text-base-content`}
                           >
-                            <span class="inline-block max-w-[14rem] truncate" title={target()}>
+                            <span class="inline-block max-w-56 truncate" title={target()}>
                               {target()}
                             </span>
                           </TableCell>
@@ -306,17 +306,14 @@ export const KubernetesAutoscalingTable: Component<{
                           <TableCell
                             class={`${getPlatformTableCellClassForKind('text')} hidden text-base-content sm:table-cell`}
                           >
-                            <span
-                              class="inline-block max-w-[10rem] truncate"
-                              title={metrics().title}
-                            >
+                            <span class="inline-block max-w-40 truncate" title={metrics().title}>
                               {metrics().label}
                             </span>
                           </TableCell>
                           <TableCell
                             class={`${getPlatformTableCellClassForKind('text')} hidden text-base-content lg:table-cell`}
                           >
-                            <span class="inline-block max-w-[8rem] truncate" title={labels().title}>
+                            <span class="inline-block max-w-32 truncate" title={labels().title}>
                               {labels().label}
                             </span>
                           </TableCell>
diff --git a/frontend-modern/src/features/kubernetes/KubernetesClustersTable.tsx b/frontend-modern/src/features/kubernetes/KubernetesClustersTable.tsx
index 173d61cd40..357f041589 100644
--- a/frontend-modern/src/features/kubernetes/KubernetesClustersTable.tsx
+++ b/frontend-modern/src/features/kubernetes/KubernetesClustersTable.tsx
@@ -318,7 +318,7 @@ export const KubernetesClustersTable: Component<{
                                 <Show when={props.onSelectCluster} fallback={name()}>
                                   <button
                                     type="button"
-                                    class={`-my-3 inline-flex min-h-11 items-center truncate rounded-sm py-3 text-left font-semibold underline-offset-2 hover:text-blue-600 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 sm:my-0 sm:min-h-0 sm:py-0 dark:hover:text-blue-400 ${
+                                    class={`-my-3 inline-flex min-h-11 items-center truncate rounded-xs py-3 text-left font-semibold underline-offset-2 hover:text-blue-600 hover:underline focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500 sm:my-0 sm:min-h-0 sm:py-0 dark:hover:text-blue-400 ${
                                       props.selectedClusterId === clusterScopeId()
                                         ? 'text-blue-600 dark:text-blue-400'
                                         : 'text-base-content'
@@ -354,7 +354,7 @@ export const KubernetesClustersTable: Component<{
                           <TableCell
                             class={`${getPlatformTableCellClassForKind('text')} platform-table-phone-hidden font-mono text-[11px] text-base-content`}
                           >
-                            <span class="inline-flex items-center rounded bg-surface-alt px-1.5 py-0.5 font-mono text-[10px] text-base-content">
+                            <span class="inline-flex items-center rounded-sm bg-surface-alt px-1.5 py-0.5 font-mono text-[10px] text-base-content">
                               {version()}
                             </span>
                           </TableCell>
diff --git a/frontend-modern/src/features/kubernetes/KubernetesConfigTable.tsx b/frontend-modern/src/features/kubernetes/KubernetesConfigTable.tsx
index 5a9b08ba91..0f916f8de9 100644
--- a/frontend-modern/src/features/kubernetes/KubernetesConfigTable.tsx
+++ b/frontend-modern/src/features/kubernetes/KubernetesConfigTable.tsx
@@ -364,7 +364,7 @@ export const KubernetesConfigTable: Component<{
                           <TableCell
                             class={`${getPlatformTableCellClassForKind('text')} text-base-content`}
                           >
-                            <span class="inline-block max-w-[13rem] truncate" title={scope()}>
+                            <span class="inline-block max-w-52 truncate" title={scope()}>
                               {scope()}
                             </span>
                           </TableCell>
@@ -376,21 +376,21 @@ export const KubernetesConfigTable: Component<{
                           <TableCell
                             class={`${getPlatformTableCellClassForKind('text')} text-base-content`}
                           >
-                            <span class="inline-block max-w-[13rem] truncate" title={data().title}>
+                            <span class="inline-block max-w-52 truncate" title={data().title}>
                               {data().label}
                             </span>
                           </TableCell>
                           <TableCell
                             class={`${getPlatformTableCellClassForKind('text')} hidden text-base-content md:table-cell`}
                           >
-                            <span class="inline-block max-w-[13rem] truncate" title={refs().title}>
+                            <span class="inline-block max-w-52 truncate" title={refs().title}>
                               {refs().label}
                             </span>
                           </TableCell>
                           <TableCell
                             class={`${getPlatformTableCellClassForKind('text')} hidden text-base-content md:table-cell`}
                           >
-                            <span class="inline-block max-w-[9rem] truncate" title={labels().title}>
+                            <span class="inline-block max-w-36 truncate" title={labels().title}>
                               {labels().label}
                             </span>
                           </TableCell>
diff --git a/frontend-modern/src/features/kubernetes/KubernetesControllersTable.tsx b/frontend-modern/src/features/kubernetes/KubernetesControllersTable.tsx
index 8d7c18e9d3..189041e54d 100644
--- a/frontend-modern/src/features/kubernetes/KubernetesControllersTable.tsx
+++ b/frontend-modern/src/features/kubernetes/KubernetesControllersTable.tsx
@@ -426,14 +426,14 @@ export const KubernetesControllersTable: Component<{
                           <TableCell
                             class={`${getPlatformTableCellClassForKind('text')} hidden text-base-content lg:table-cell`}
                           >
-                            <span class="inline-block max-w-[12rem] truncate" title={scope()}>
+                            <span class="inline-block max-w-48 truncate" title={scope()}>
                               {scope()}
                             </span>
                           </TableCell>
                           <TableCell
                             class={`${getPlatformTableCellClassForKind('text')} text-base-content`}
                           >
-                            <span class="inline-block max-w-[12rem] truncate" title={target()}>
+                            <span class="inline-block max-w-48 truncate" title={target()}>
                               {target()}
                             </span>
                           </TableCell>
@@ -455,7 +455,7 @@ export const KubernetesControllersTable: Component<{
                           <TableCell
                             class={`${getPlatformTableCellClassForKind('text')} text-base-content`}
                           >
-                            <span class="inline-block max-w-[13rem] truncate" title={exceptions()}>
+                            <span class="inline-block max-w-52 truncate" title={exceptions()}>
                               {exceptions()}
                             </span>
                           </TableCell>
diff --git a/frontend-modern/src/features/kubernetes/KubernetesEventsTable.tsx b/frontend-modern/src/features/kubernetes/KubernetesEventsTable.tsx
index 7803fb73c5..7e0c1c13cb 100644
--- a/frontend-modern/src/features/kubernetes/KubernetesEventsTable.tsx
+++ b/frontend-modern/src/features/kubernetes/KubernetesEventsTable.tsx
@@ -197,7 +197,7 @@ export const KubernetesEventsTable: Component<{
                           <TableCell
                             class={`${getPlatformTableCellClassForKind('text')} hidden text-base-content lg:table-cell`}
                           >
-                            <span class="inline-block max-w-[12rem] truncate" title={scope()}>
+                            <span class="inline-block max-w-48 truncate" title={scope()}>
                               {scope()}
                             </span>
                           </TableCell>
@@ -210,7 +210,7 @@ export const KubernetesEventsTable: Component<{
                             class={`${getPlatformTableCellClassForKind('text')} text-base-content`}
                           >
                             <span
-                              class="inline-block max-w-[12rem] truncate"
+                              class="inline-block max-w-48 truncate"
                               title={formatPlatformTableTextValue(resource.kubernetes?.reason)}
                             >
                               {formatPlatformTableTextValue(resource.kubernetes?.reason)}
@@ -220,7 +220,7 @@ export const KubernetesEventsTable: Component<{
                             class={`${getPlatformTableCellClassForKind('text')} text-base-content`}
                           >
                             <span
-                              class="inline-block max-w-[13rem] truncate"
+                              class="inline-block max-w-52 truncate"
                               title={involvedObject(resource)}
                             >
                               {involvedObject(resource)}
@@ -234,10 +234,7 @@ export const KubernetesEventsTable: Component<{
                           <TableCell
                             class={`${getPlatformTableCellClassForKind('numeric-value')} text-base-content`}
                           >
-                            <span
-                              class="inline-block max-w-[12rem] truncate"
-                              title={observed() || '—'}
-                            >
+                            <span class="inline-block max-w-48 truncate" title={observed() || '—'}>
                               <PlatformTableRelativeTimeValue value={observed()} />
                             </span>
                           </TableCell>
diff --git a/frontend-modern/src/features/kubernetes/KubernetesNetworkingTable.tsx b/frontend-modern/src/features/kubernetes/KubernetesNetworkingTable.tsx
index 32f0e94bc7..547eae2e74 100644
--- a/frontend-modern/src/features/kubernetes/KubernetesNetworkingTable.tsx
+++ b/frontend-modern/src/features/kubernetes/KubernetesNetworkingTable.tsx
@@ -309,7 +309,7 @@ export const KubernetesNetworkingTable: Component<{
                           <TableCell
                             class={`${getPlatformTableCellClassForKind('text')} text-base-content`}
                           >
-                            <span class="inline-block max-w-[12rem] truncate" title={scope()}>
+                            <span class="inline-block max-w-48 truncate" title={scope()}>
                               {scope()}
                             </span>
                           </TableCell>
@@ -331,17 +331,14 @@ export const KubernetesNetworkingTable: Component<{
                           <TableCell
                             class={`${getPlatformTableCellClassForKind('text')} text-base-content`}
                           >
-                            <span class="inline-block max-w-[12rem] truncate" title={ports().title}>
+                            <span class="inline-block max-w-48 truncate" title={ports().title}>
                               {ports().label}
                             </span>
                           </TableCell>
                           <TableCell
                             class={`${getPlatformTableCellClassForKind('text')} hidden text-base-content md:table-cell`}
                           >
-                            <span
-                              class="inline-block max-w-[13rem] truncate"
-                              title={targets().title}
-                            >
+                            <span class="inline-block max-w-52 truncate" title={targets().title}>
                               {targets().label}
                             </span>
                           </TableCell>
diff --git a/frontend-modern/src/features/kubernetes/KubernetesNodesTable.tsx b/frontend-modern/src/features/kubernetes/KubernetesNodesTable.tsx
index 1964daa056..89cc81def2 100644
--- a/frontend-modern/src/features/kubernetes/KubernetesNodesTable.tsx
+++ b/frontend-modern/src/features/kubernetes/KubernetesNodesTable.tsx
@@ -336,8 +336,8 @@ export const KubernetesNodesTable: Component<{
                       const s = nodeAlertStyles();
                       if (!s.hasUnacknowledgedAlert) return '';
                       return s.severity === 'critical'
-                        ? 'bg-red-50 dark:bg-red-950'
-                        : 'bg-yellow-50 dark:bg-yellow-950';
+                        ? 'bg-red-50 dark:bg-red-950/25'
+                        : 'bg-yellow-50 dark:bg-yellow-950/25';
                     };
                     return (
                       <>
@@ -386,7 +386,7 @@ export const KubernetesNodesTable: Component<{
                           <TableCell
                             class={`${getPlatformTableCellClassForKind('text')} hidden font-mono text-[11px] text-base-content md:table-cell`}
                           >
-                            <span class="truncate inline-block max-w-[10rem]" title={runtime()}>
+                            <span class="truncate inline-block max-w-40" title={runtime()}>
                               {runtime()}
                             </span>
                           </TableCell>
diff --git a/frontend-modern/src/features/kubernetes/KubernetesPolicyTable.tsx b/frontend-modern/src/features/kubernetes/KubernetesPolicyTable.tsx
index 96b15c612f..5402de77c6 100644
--- a/frontend-modern/src/features/kubernetes/KubernetesPolicyTable.tsx
+++ b/frontend-modern/src/features/kubernetes/KubernetesPolicyTable.tsx
@@ -330,14 +330,14 @@ export const KubernetesPolicyTable: Component<{
                           <TableCell
                             class={`${getPlatformTableCellClassForKind('text')} text-base-content`}
                           >
-                            <span class="inline-block max-w-[13rem] truncate" title={scope()}>
+                            <span class="inline-block max-w-52 truncate" title={scope()}>
                               {scope()}
                             </span>
                           </TableCell>
                           <TableCell
                             class={`${getPlatformTableCellClassForKind('text')} text-base-content`}
                           >
-                            <span class="inline-block max-w-[13rem] truncate" title={shape().title}>
+                            <span class="inline-block max-w-52 truncate" title={shape().title}>
                               {shape().label}
                             </span>
                           </TableCell>
@@ -351,14 +351,14 @@ export const KubernetesPolicyTable: Component<{
                           <TableCell
                             class={`${getPlatformTableCellClassForKind('text')} hidden text-base-content md:table-cell`}
                           >
-                            <span class="inline-block max-w-[14rem] truncate" title={state().title}>
+                            <span class="inline-block max-w-56 truncate" title={state().title}>
                               {state().label}
                             </span>
                           </TableCell>
                           <TableCell
                             class={`${getPlatformTableCellClassForKind('text')} hidden text-base-content md:table-cell`}
                           >
-                            <span class="inline-block max-w-[8rem] truncate" title={labels().title}>
+                            <span class="inline-block max-w-32 truncate" title={labels().title}>
                               {labels().label}
                             </span>
                           </TableCell>
diff --git a/frontend-modern/src/features/kubernetes/KubernetesServicesTable.tsx b/frontend-modern/src/features/kubernetes/KubernetesServicesTable.tsx
index f5435d2627..a57e88bfa5 100644
--- a/frontend-modern/src/features/kubernetes/KubernetesServicesTable.tsx
+++ b/frontend-modern/src/features/kubernetes/KubernetesServicesTable.tsx
@@ -266,7 +266,7 @@ export const KubernetesServicesTable: Component<{
                           <TableCell
                             class={`${getPlatformTableCellClassForKind('text')} text-base-content`}
                           >
-                            <span class="inline-block max-w-[12rem] truncate" title={scope()}>
+                            <span class="inline-block max-w-48 truncate" title={scope()}>
                               {scope()}
                             </span>
                           </TableCell>
@@ -284,7 +284,7 @@ export const KubernetesServicesTable: Component<{
                             class={`${getPlatformTableCellClassForKind('text')} platform-table-phone-hidden text-base-content`}
                           >
                             <span
-                              class="inline-block max-w-[12rem] truncate"
+                              class="inline-block max-w-48 truncate"
                               title={externalIps().title}
                             >
                               {externalIps().label}
@@ -293,17 +293,14 @@ export const KubernetesServicesTable: Component<{
                           <TableCell
                             class={`${getPlatformTableCellClassForKind('text')} text-base-content`}
                           >
-                            <span class="inline-block max-w-[15rem] truncate" title={ports().title}>
+                            <span class="inline-block max-w-60 truncate" title={ports().title}>
                               {ports().label}
                             </span>
                           </TableCell>
                           <TableCell
                             class={`${getPlatformTableCellClassForKind('text')} hidden text-base-content md:table-cell`}
                           >
-                            <span
-                              class="inline-block max-w-[13rem] truncate"
-                              title={selector().title}
-                            >
+                            <span class="inline-block max-w-52 truncate" title={selector().title}>
                               {selector().label}
                             </span>
                           </TableCell>
diff --git a/frontend-modern/src/features/kubernetes/KubernetesStorageTable.tsx b/frontend-modern/src/features/kubernetes/KubernetesStorageTable.tsx
index 9f3a634d99..50cd95072e 100644
--- a/frontend-modern/src/features/kubernetes/KubernetesStorageTable.tsx
+++ b/frontend-modern/src/features/kubernetes/KubernetesStorageTable.tsx
@@ -386,7 +386,7 @@ export const KubernetesStorageTable: Component<{
                           <TableCell
                             class={`${getPlatformTableCellClassForKind('text')} hidden text-base-content sm:table-cell`}
                           >
-                            <span class="inline-block max-w-[12rem] truncate" title={scope()}>
+                            <span class="inline-block max-w-48 truncate" title={scope()}>
                               {scope()}
                             </span>
                           </TableCell>
@@ -408,10 +408,7 @@ export const KubernetesStorageTable: Component<{
                           <TableCell
                             class={`${getPlatformTableCellClassForKind('text')} hidden text-base-content md:table-cell`}
                           >
-                            <span
-                              class="inline-block max-w-[12rem] truncate"
-                              title={policy().title}
-                            >
+                            <span class="inline-block max-w-48 truncate" title={policy().title}>
                               {policy().label}
                             </span>
                           </TableCell>
diff --git a/frontend-modern/src/features/patrol/PatrolAttentionWorkbench.tsx b/frontend-modern/src/features/patrol/PatrolAttentionWorkbench.tsx
index 76ec20d970..225745a77f 100644
--- a/frontend-modern/src/features/patrol/PatrolAttentionWorkbench.tsx
+++ b/frontend-modern/src/features/patrol/PatrolAttentionWorkbench.tsx
@@ -384,7 +384,7 @@ export function PatrolAttentionWorkbench(
   return (
     <section
       aria-label="Patrol decision inbox"
-      class="overflow-hidden rounded-xl border border-border bg-surface shadow-sm"
+      class="overflow-hidden rounded-xl border border-border bg-surface shadow-xs"
     >
       <div class="border-b border-border px-4 py-4 sm:px-6">
         <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
@@ -472,14 +472,14 @@ export function PatrolAttentionWorkbench(
         {(notice) => (
           <div
             role="status"
-            class="flex items-center gap-2 border-b border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-medium text-emerald-800 dark:border-emerald-900 dark:bg-emerald-950/30 dark:text-emerald-200 sm:px-6"
+            class="flex items-center gap-2 border-b border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-medium text-emerald-800 dark:border-emerald-900/25 dark:bg-emerald-950/30 dark:text-emerald-200 sm:px-6"
           >
             <CheckCircleIcon class="h-4 w-4 shrink-0" aria-hidden="true" />
             <span>{notice()}</span>
             <Show when={attentionView() === 'inbox' && handledCount() > 0}>
               <button
                 type="button"
-                class="ml-auto shrink-0 underline underline-offset-2 hover:no-underline focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-600"
+                class="ml-auto shrink-0 underline underline-offset-2 hover:no-underline focus:outline-hidden focus-visible:ring-2 focus-visible:ring-emerald-600"
                 onClick={() => switchAttentionView('handled')}
               >
                 Review handled issues
@@ -493,7 +493,7 @@ export function PatrolAttentionWorkbench(
         class={`grid min-w-0 ${selectedItemId() ? 'lg:grid-cols-[minmax(20rem,0.78fr)_minmax(0,1.22fr)]' : ''}`}
       >
         <div
-          class={`min-w-0 ${selectedItemId() ? 'hidden lg:block lg:max-h-[52rem] lg:overflow-y-auto lg:border-r lg:border-border' : ''}`}
+          class={`min-w-0 ${selectedItemId() ? 'hidden lg:block lg:max-h-208 lg:overflow-y-auto lg:border-r lg:border-border' : ''}`}
         >
           <AttentionList
             decisions={visibleDecisions()}
@@ -520,7 +520,7 @@ export function PatrolAttentionWorkbench(
           <div
             ref={detailPanel}
             tabindex="-1"
-            class="order-first min-w-0 scroll-mt-4 lg:order-none lg:max-h-[52rem] lg:overflow-y-auto"
+            class="order-first min-w-0 scroll-mt-4 lg:order-0 lg:max-h-208 lg:overflow-y-auto"
           >
             <AttentionDetail
               detail={selectedDetail()}
@@ -610,7 +610,7 @@ function AttentionList(props: {
         {(message) => (
           <div
             role="alert"
-            class="m-4 flex items-start gap-3 rounded-md border border-red-200 bg-red-50 p-4 text-red-800 dark:border-red-900 dark:bg-red-950/30 dark:text-red-200"
+            class="m-4 flex items-start gap-3 rounded-md border border-red-200 bg-red-50 p-4 text-red-800 dark:border-red-900/25 dark:bg-red-950/30 dark:text-red-200"
           >
             <AlertTriangleIcon class="mt-0.5 h-5 w-5 shrink-0" aria-hidden="true" />
             <div>
@@ -676,7 +676,7 @@ function AttentionList(props: {
                     <button
                       ref={(element) => props.itemButtons.set(item.id, element)}
                       type="button"
-                      class={`w-full px-4 py-3 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500 sm:px-5 ${
+                      class={`w-full px-4 py-3 text-left focus:outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500 sm:px-5 ${
                         props.selectedItemId === item.id
                           ? 'bg-blue-50/80 dark:bg-blue-950/30'
                           : 'hover:bg-surface-hover'
@@ -877,11 +877,11 @@ function AttentionDetail(props: {
       aria-labelledby="attention-detail-title"
       aria-busy={props.loading}
     >
-      <div class="sticky top-0 z-20 border-b border-border bg-surface/95 px-4 py-3 backdrop-blur sm:px-5">
+      <div class="sticky top-0 z-20 border-b border-border px-4 py-3 backdrop-blur-sm sm:px-5">
         <div class="flex items-center justify-between gap-3">
           <button
             type="button"
-            class="inline-flex min-h-11 shrink-0 items-center justify-center gap-2 rounded px-2 text-sm font-medium text-muted hover:bg-surface-hover hover:text-base-content focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 lg:hidden"
+            class="inline-flex min-h-11 shrink-0 items-center justify-center gap-2 rounded-sm px-2 text-sm font-medium text-muted hover:bg-surface-hover hover:text-base-content focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500 lg:hidden"
             aria-label={
               props.queueLabel === 'Handled issue'
                 ? 'Back to handled issues'
@@ -900,7 +900,7 @@ function AttentionDetail(props: {
           <div class="hidden items-center gap-1 lg:flex">
             <button
               type="button"
-              class="inline-flex h-8 w-8 items-center justify-center rounded text-muted hover:bg-surface-hover hover:text-base-content focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-35"
+              class="inline-flex h-8 w-8 items-center justify-center rounded-sm text-muted hover:bg-surface-hover hover:text-base-content focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-35"
               aria-label={`Previous ${props.queueLabel.toLocaleLowerCase()}`}
               title={`Previous ${props.queueLabel.toLocaleLowerCase()}`}
               disabled={!props.canPrevious()}
@@ -910,7 +910,7 @@ function AttentionDetail(props: {
             </button>
             <button
               type="button"
-              class="inline-flex h-8 w-8 items-center justify-center rounded text-muted hover:bg-surface-hover hover:text-base-content focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-35"
+              class="inline-flex h-8 w-8 items-center justify-center rounded-sm text-muted hover:bg-surface-hover hover:text-base-content focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500 disabled:cursor-not-allowed disabled:opacity-35"
               aria-label={`Next ${props.queueLabel.toLocaleLowerCase()}`}
               title={`Next ${props.queueLabel.toLocaleLowerCase()}`}
               disabled={!props.canNext()}
@@ -921,7 +921,7 @@ function AttentionDetail(props: {
             <span class="mx-1 h-4 w-px bg-border" aria-hidden="true" />
             <button
               type="button"
-              class="inline-flex h-8 w-8 items-center justify-center rounded text-muted hover:bg-surface-hover hover:text-base-content focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+              class="inline-flex h-8 w-8 items-center justify-center rounded-sm text-muted hover:bg-surface-hover hover:text-base-content focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500"
               aria-label="Close attention detail"
               onClick={props.onClose}
             >
@@ -986,7 +986,7 @@ function AttentionDetail(props: {
               </p>
               <Show when={getAttentionFlappingPresentation(loaded().item.flapping)}>
                 {(flapping) => (
-                  <p class="mt-2 flex items-start gap-2 rounded-md border border-amber-200 bg-amber-50/70 px-3 py-2 text-xs leading-5 text-amber-900 dark:border-amber-900 dark:bg-amber-950/30 dark:text-amber-200">
+                  <p class="mt-2 flex items-start gap-2 rounded-md border border-amber-200 bg-amber-50/70 px-3 py-2 text-xs leading-5 text-amber-900/25 dark:border-amber-900/25 dark:bg-amber-950/30 dark:text-amber-200">
                     <RepeatIcon class="mt-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
                     <span>{flapping().detail}</span>
                   </p>
@@ -1058,7 +1058,7 @@ function AttentionDetail(props: {
             <Show when={loaded().item.availableActions[0]}>
               {(offer) => (
                 <DetailSection title="Safe action">
-                  <div class="rounded-md border border-blue-200 bg-blue-50/70 p-3 dark:border-blue-900 dark:bg-blue-950/30">
+                  <div class="rounded-md border border-blue-200 bg-blue-50/70 p-3 dark:border-blue-900/25 dark:bg-blue-950/30">
                     <div class="flex items-start gap-2">
                       <RotateCwIcon
                         class="mt-0.5 h-4 w-4 shrink-0 text-blue-600 dark:text-blue-300"
@@ -1115,8 +1115,8 @@ function AttentionDetail(props: {
               onOpenFindings={props.onOpenFindings}
             />
 
-            <details class="rounded-lg border border-border-subtle bg-surface-alt/20">
-              <summary class="flex min-h-11 cursor-pointer items-center justify-between gap-3 px-3 py-2 text-sm font-medium text-base-content focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500">
+            <details class="rounded-lg border border-border-subtle">
+              <summary class="flex min-h-11 cursor-pointer items-center justify-between gap-3 px-3 py-2 text-sm font-medium text-base-content focus:outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500">
                 <span>Evidence and history</span>
                 <span class="text-xs font-normal text-muted">
                   {orderedEvidence().length}{' '}
@@ -1139,8 +1139,8 @@ function AttentionDetail(props: {
                       </For>
                     </ul>
                     <Show when={olderEvidence().length > 0}>
-                      <details class="mt-2 rounded-md border border-border-subtle bg-surface-alt/30">
-                        <summary class="flex min-h-11 cursor-pointer items-center px-3 py-2 text-xs font-medium text-base-content focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500 sm:min-h-0">
+                      <details class="mt-2 rounded-md border border-border-subtle">
+                        <summary class="flex min-h-11 cursor-pointer items-center px-3 py-2 text-xs font-medium text-base-content focus:outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500 sm:min-h-0">
                           Show {olderEvidence().length} older{' '}
                           {olderEvidence().length === 1 ? 'observation' : 'observations'}
                         </summary>
@@ -1212,8 +1212,8 @@ function AttentionDetail(props: {
                             The transitions are collapsed here so one noisy issue reads as one
                             issue.
                           </p>
-                          <details class="mt-2 rounded-md border border-border-subtle bg-surface-alt/30">
-                            <summary class="flex min-h-11 cursor-pointer items-center px-3 py-2 text-xs font-medium text-base-content focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500 sm:min-h-0">
+                          <details class="mt-2 rounded-md border border-border-subtle">
+                            <summary class="flex min-h-11 cursor-pointer items-center px-3 py-2 text-xs font-medium text-base-content focus:outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500 sm:min-h-0">
                               Show all {loaded().timeline.length} transitions
                             </summary>
                             <div class="border-t border-border-subtle p-3">
@@ -1271,7 +1271,7 @@ function AttentionLifecycleControls(props: {
 
   return (
     <DetailSection title="Lifecycle">
-      <div class="rounded-md border border-border-subtle bg-surface-alt/40 p-3">
+      <div class="rounded-md border border-border-subtle p-3">
         <Show when={props.detail.operationalRecord.acknowledgement}>
           {(acknowledgement) => (
             <p class="mb-2 text-xs leading-5 text-muted">
@@ -1526,7 +1526,7 @@ function AttentionLastingDecisions(props: {
 
   return (
     <DetailSection title="Lasting decisions">
-      <div class="rounded-md border border-border-subtle bg-surface-alt/40 p-3">
+      <div class="rounded-md border border-border-subtle p-3">
         <Show when={notice()}>
           {(message) => (
             <p
@@ -1592,7 +1592,7 @@ function AttentionLastingDecisions(props: {
                       <Button
                         variant={decision.kind === 'expected_behavior' ? 'primary' : 'secondary'}
                         size="sm"
-                        class="min-h-11 shrink-0 justify-start sm:min-h-0 sm:w-48"
+                        class="min-h-11 shrink-0 sm:min-h-0 sm:w-48"
                         disabled={busy()}
                         aria-pressed={pending()?.kind === decision.kind}
                         onClick={() => choose(decision)}
@@ -1749,7 +1749,7 @@ function DetailSection(props: { title: string; children: import('solid-js').JSX.
 
 function EvidenceObservation(props: { evidence: EvidenceEnvelope }) {
   return (
-    <li class="rounded-md border border-border-subtle bg-surface-alt/60 p-3">
+    <li class="rounded-md border border-border-subtle p-3">
       <div class="flex flex-wrap items-center gap-2">
         <span class="text-xs font-semibold text-base-content">
           {formatProvider(props.evidence.source.provider)}
diff --git a/frontend-modern/src/features/patrol/PatrolAutopilotAcknowledgementDialog.tsx b/frontend-modern/src/features/patrol/PatrolAutopilotAcknowledgementDialog.tsx
index fa60dae9e9..85fc4d089d 100644
--- a/frontend-modern/src/features/patrol/PatrolAutopilotAcknowledgementDialog.tsx
+++ b/frontend-modern/src/features/patrol/PatrolAutopilotAcknowledgementDialog.tsx
@@ -62,7 +62,7 @@ export const PatrolAutopilotAcknowledgementDialog: Component<{ state: PatrolInte
           </Button>
         </header>
         <div class="overflow-y-auto px-5 py-4">
-          <div class="rounded-lg border border-amber-300 bg-amber-50 p-4 text-sm text-amber-950 dark:border-amber-800 dark:bg-amber-950/30 dark:text-amber-100">
+          <div class="rounded-lg border border-amber-300 bg-amber-50 p-4 text-sm text-amber-950/25 dark:border-amber-800 dark:bg-amber-950/30 dark:text-amber-100">
             <p class="font-semibold">
               Autopilot may execute eligible infrastructure actions without asking each time.
             </p>
diff --git a/frontend-modern/src/features/patrol/PatrolIntelligenceBanners.tsx b/frontend-modern/src/features/patrol/PatrolIntelligenceBanners.tsx
index 0a6c19ff17..c32b9628c2 100644
--- a/frontend-modern/src/features/patrol/PatrolIntelligenceBanners.tsx
+++ b/frontend-modern/src/features/patrol/PatrolIntelligenceBanners.tsx
@@ -47,7 +47,7 @@ export function PatrolIntelligenceBanners(props: { state: PatrolIntelligenceStat
   return (
     <>
       <Show when={state.patrolStream.isStreaming()}>
-        <div class="flex-shrink-0 bg-blue-50 dark:bg-blue-900 border-b border-blue-200 dark:border-blue-800 px-4 py-2">
+        <div class="shrink-0 bg-blue-50 dark:bg-blue-900/25 border-b border-blue-200 dark:border-blue-800 px-4 py-2">
           <div class="flex items-center gap-3 text-sm">
             <div class="flex items-center gap-2">
               <div class="w-2 h-2 rounded-full bg-blue-500 animate-pulse" />
@@ -57,7 +57,7 @@ export function PatrolIntelligenceBanners(props: { state: PatrolIntelligenceStat
               <span class="text-blue-700 dark:text-blue-300">{state.patrolStream.phase()}</span>
             </Show>
             <Show when={state.patrolStream.currentTool()}>
-              <span class="text-blue-600 dark:text-blue-400 font-mono text-xs bg-blue-100 dark:bg-blue-900 px-1.5 py-0.5 rounded">
+              <span class="text-blue-600 dark:text-blue-400 font-mono text-xs bg-blue-100 dark:bg-blue-900/25 px-1.5 py-0.5 rounded-sm">
                 {state.patrolStream.currentTool()}
               </span>
             </Show>
@@ -75,10 +75,10 @@ export function PatrolIntelligenceBanners(props: { state: PatrolIntelligenceStat
       </Show>
 
       <Show when={state.patrolLoadError()}>
-        <div class="flex-shrink-0 border-b border-amber-200 bg-amber-50 px-4 py-3 dark:border-amber-800 dark:bg-amber-900">
+        <div class="shrink-0 border-b border-amber-200 bg-amber-50 px-4 py-3 dark:border-amber-800 dark:bg-amber-900/25">
           <div class="flex flex-wrap items-center justify-between gap-3">
             <div>
-              <p class="text-sm font-semibold text-amber-900 dark:text-amber-100">
+              <p class="text-sm font-semibold text-amber-900/25 dark:text-amber-100">
                 Patrol could not refresh
               </p>
               <p class="text-xs text-amber-700 dark:text-amber-300">
@@ -89,7 +89,7 @@ export function PatrolIntelligenceBanners(props: { state: PatrolIntelligenceStat
               type="button"
               onClick={() => void state.handleRefreshPatrol()}
               disabled={state.isManualRefreshRunning()}
-              class="inline-flex items-center justify-center gap-2 rounded-md border border-amber-200 bg-amber-100 px-3 py-1.5 text-xs font-semibold text-amber-900 transition-colors hover:bg-amber-200 disabled:cursor-wait disabled:opacity-60 dark:border-amber-700 dark:bg-amber-900 dark:text-amber-100 dark:hover:bg-amber-900"
+              class="inline-flex items-center justify-center gap-2 rounded-md border border-amber-200 bg-amber-100 px-3 py-1.5 text-xs font-semibold text-amber-900/25 transition-colors hover:bg-amber-200 disabled:cursor-wait disabled:opacity-60 dark:border-amber-700 dark:bg-amber-900/25 dark:text-amber-100 dark:hover:bg-amber-900/25"
             >
               <RefreshCwIcon
                 class={`h-3.5 w-3.5 ${state.isManualRefreshRunning() ? 'animate-spin' : ''}`}
@@ -109,10 +109,10 @@ export function PatrolIntelligenceBanners(props: { state: PatrolIntelligenceStat
           !state.showBlockedBanner()
         }
       >
-        <div class="flex-shrink-0 bg-blue-50 dark:bg-blue-900 border-b border-blue-200 dark:border-blue-800 px-3 py-2">
+        <div class="shrink-0 bg-blue-50 dark:bg-blue-900/25 border-b border-blue-200 dark:border-blue-800 px-3 py-2">
           <div class="flex flex-wrap items-center justify-between gap-2">
             <p class="text-xs text-blue-700 dark:text-blue-300">
-              <span class="font-semibold text-blue-900 dark:text-blue-100">
+              <span class="font-semibold text-blue-900/25 dark:text-blue-100">
                 {autonomyAvailability().title}.
               </span>{' '}
               {autonomyAvailability().body}
@@ -140,19 +140,19 @@ export function PatrolIntelligenceBanners(props: { state: PatrolIntelligenceStat
         }
       >
         <div
-          class={`flex-shrink-0 border-b px-4 py-3 ${
+          class={`shrink-0 border-b px-4 py-3 ${
             state.patrolReadiness()?.status === 'not_ready'
-              ? 'bg-red-50 dark:bg-red-950 border-red-200 dark:border-red-900'
-              : 'bg-amber-50 dark:bg-amber-900 border-amber-200 dark:border-amber-800'
+              ? 'bg-red-50 dark:bg-red-950/25 border-red-200 dark:border-red-900/25'
+              : 'bg-amber-50 dark:bg-amber-900/25 border-amber-200 dark:border-amber-800'
           }`}
         >
           <div class="flex flex-wrap items-center justify-between gap-3">
             <div class="flex items-start gap-3">
               <div
-                class={`flex-shrink-0 p-1.5 rounded-md ${
+                class={`shrink-0 p-1.5 rounded-md ${
                   state.patrolReadiness()?.status === 'not_ready'
-                    ? 'bg-red-100 dark:bg-red-900'
-                    : 'bg-amber-100 dark:bg-amber-900'
+                    ? 'bg-red-100 dark:bg-red-900/25'
+                    : 'bg-amber-100 dark:bg-amber-900/25'
                 }`}
               >
                 <ShieldAlertIcon
@@ -167,8 +167,8 @@ export function PatrolIntelligenceBanners(props: { state: PatrolIntelligenceStat
                 <p
                   class={`text-sm font-semibold ${
                     state.patrolReadiness()?.status === 'not_ready'
-                      ? 'text-red-900 dark:text-red-100'
-                      : 'text-amber-900 dark:text-amber-100'
+                      ? 'text-red-900/25 dark:text-red-100'
+                      : 'text-amber-900/25 dark:text-amber-100'
                   }`}
                 >
                   {state.patrolReadiness()?.status === 'not_ready'
@@ -238,7 +238,7 @@ export function PatrolIntelligenceBanners(props: { state: PatrolIntelligenceStat
             <Show when={shouldShowReadinessAction()}>
               <a
                 href={setupAction().href}
-                class="inline-flex items-center justify-center gap-2 px-3 py-1.5 text-xs font-semibold rounded-md border border-amber-200 bg-amber-100 text-amber-900 transition-colors hover:bg-amber-200 dark:border-amber-700 dark:bg-amber-900 dark:text-amber-100 dark:hover:bg-amber-900"
+                class="inline-flex items-center justify-center gap-2 px-3 py-1.5 text-xs font-semibold rounded-md border border-amber-200 bg-amber-100 text-amber-900/25 transition-colors hover:bg-amber-200 dark:border-amber-700 dark:bg-amber-900/25 dark:text-amber-100 dark:hover:bg-amber-900/25"
               >
                 <SettingsIcon class="w-3.5 h-3.5" />
                 {setupAction().label}
@@ -249,14 +249,14 @@ export function PatrolIntelligenceBanners(props: { state: PatrolIntelligenceStat
       </Show>
 
       <Show when={state.showBlockedBanner()}>
-        <div class="flex-shrink-0 bg-amber-50 dark:bg-amber-900 border-b border-amber-200 dark:border-amber-800 px-4 py-3">
+        <div class="shrink-0 bg-amber-50 dark:bg-amber-900/25 border-b border-amber-200 dark:border-amber-800 px-4 py-3">
           <div class="flex flex-wrap items-center justify-between gap-3">
             <div class="flex items-start gap-3">
-              <div class="flex-shrink-0 p-1.5 bg-amber-100 dark:bg-amber-900 rounded-md">
+              <div class="shrink-0 p-1.5 bg-amber-100 dark:bg-amber-900/25 rounded-md">
                 <ShieldAlertIcon class="w-4 h-4 text-amber-600 dark:text-amber-400" />
               </div>
               <div>
-                <p class="text-sm font-semibold text-amber-900 dark:text-amber-100">
+                <p class="text-sm font-semibold text-amber-900/25 dark:text-amber-100">
                   Patrol paused
                 </p>
                 <p class="text-xs text-amber-700 dark:text-amber-300">{state.blockedReason()}</p>
@@ -270,7 +270,7 @@ export function PatrolIntelligenceBanners(props: { state: PatrolIntelligenceStat
             <div class="flex items-center gap-2">
               <a
                 href={setupAction().href}
-                class="inline-flex items-center justify-center gap-2 px-3 py-1.5 text-xs font-semibold text-amber-900 dark:text-amber-100 bg-amber-100 dark:bg-amber-900 border border-amber-200 dark:border-amber-700 rounded-md hover:bg-amber-200 dark:hover:bg-amber-900 transition-colors"
+                class="inline-flex items-center justify-center gap-2 px-3 py-1.5 text-xs font-semibold text-amber-900/25 dark:text-amber-100 bg-amber-100 dark:bg-amber-900/25 border border-amber-200 dark:border-amber-700 rounded-md hover:bg-amber-200 dark:hover:bg-amber-900/25 transition-colors"
               >
                 <SettingsIcon class="w-3.5 h-3.5" />
                 {setupAction().label}
diff --git a/frontend-modern/src/features/patrol/PatrolIntelligenceHeader.tsx b/frontend-modern/src/features/patrol/PatrolIntelligenceHeader.tsx
index 0d2721d7df..bee89d50b7 100644
--- a/frontend-modern/src/features/patrol/PatrolIntelligenceHeader.tsx
+++ b/frontend-modern/src/features/patrol/PatrolIntelligenceHeader.tsx
@@ -200,7 +200,7 @@ export function PatrolIntelligenceHeader(props: { state: PatrolIntelligenceState
             <span class="text-xs font-semibold uppercase tracking-wider text-muted">
               Patrol mode
             </span>
-            <span class="rounded border border-border-subtle bg-surface px-2 py-0.5 text-xs font-medium text-base-content">
+            <span class="rounded-sm border border-border-subtle bg-surface px-2 py-0.5 text-xs font-medium text-base-content">
               {selectedAutonomyPolicy().label}
             </span>
           </div>
@@ -230,7 +230,7 @@ export function PatrolIntelligenceHeader(props: { state: PatrolIntelligenceState
       <Show when={showAutonomyAvailabilityPrompt()}>
         <div class="mt-3 flex flex-col gap-3 rounded-md border border-blue-200 bg-blue-50 px-3 py-3 dark:border-blue-800 dark:bg-blue-950/40 sm:flex-row sm:items-center sm:justify-between">
           <div class="min-w-0">
-            <p class="text-sm font-semibold text-blue-950 dark:text-blue-100">
+            <p class="text-sm font-semibold text-blue-950/25 dark:text-blue-100">
               {autonomyAvailability().title}
             </p>
             <p class="mt-1 text-xs leading-5 text-blue-800 dark:text-blue-200">
@@ -258,7 +258,7 @@ export function PatrolIntelligenceHeader(props: { state: PatrolIntelligenceState
       <Show when={state.requestedAutonomyLevel() !== state.autonomyLevel()}>
         <div
           role="status"
-          class="mt-3 rounded-md border border-amber-300 bg-amber-50 px-3 py-2 text-xs text-amber-900 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-200"
+          class="mt-3 rounded-md border border-amber-300 bg-amber-50 px-3 py-2 text-xs text-amber-900/25 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-200"
         >
           Requested {PATROL_AUTONOMY_POLICY_PRESENTATION[state.requestedAutonomyLevel()].label}.
           Effective mode is {selectedAutonomyPolicy().label}. Server status:{' '}
@@ -304,7 +304,7 @@ export function PatrolIntelligenceHeader(props: { state: PatrolIntelligenceState
             <span>{headerMeta().title}</span>
           </span>
         }
-        class="relative z-[200] mb-3"
+        class="relative z-200 mb-3"
       />
 
       <section id={PATROL_CONTROL_ANCHOR} class="border-y border-border">
@@ -391,14 +391,14 @@ export function PatrolIntelligenceHeader(props: { state: PatrolIntelligenceState
         <span id={PATROL_OPERATIONS_LOOP_ANCHOR} class="sr-only" aria-hidden="true" />
         <Show when={shouldShowAutonomyActionColumn()}>
           <details class="border-t border-border-subtle px-1 py-1 sm:px-2">
-            <summary class="min-h-11 cursor-pointer text-xs font-medium text-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 sm:min-h-0">
+            <summary class="min-h-11 cursor-pointer text-xs font-medium text-muted focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500 sm:min-h-0">
               Mode and automation
             </summary>
             <div class="pt-3">
               {renderAutonomyPolicyControl({
                 ariaLabel: 'Patrol mode',
                 layoutClass: 'flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between',
-                controlClass: 'w-full lg:w-[34rem]',
+                controlClass: 'w-full lg:w-136',
               })}
             </div>
           </details>
diff --git a/frontend-modern/src/features/patrol/PatrolIntelligenceSurface.tsx b/frontend-modern/src/features/patrol/PatrolIntelligenceSurface.tsx
index c6c902b937..07909ea780 100644
--- a/frontend-modern/src/features/patrol/PatrolIntelligenceSurface.tsx
+++ b/frontend-modern/src/features/patrol/PatrolIntelligenceSurface.tsx
@@ -83,7 +83,7 @@ export function PatrolIntelligenceSurface() {
             aria-selected={activeView() === view}
             aria-controls={`patrol-${view}-panel`}
             tabindex={activeView() === view ? 0 : -1}
-            class={`relative min-h-11 rounded-t-md px-4 py-2 text-sm font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500 ${
+            class={`relative min-h-11 rounded-t-md px-4 py-2 text-sm font-medium focus:outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500 ${
               activeView() === view
                 ? 'bg-surface text-base-content after:absolute after:inset-x-2 after:-bottom-px after:h-0.5 after:bg-blue-600'
                 : 'text-muted hover:bg-surface-hover hover:text-base-content'
@@ -154,7 +154,7 @@ export function PatrolIntelligenceSurface() {
                 href="/actions"
                 variant="ghost"
                 size="md"
-                class="group h-auto min-h-20 w-full justify-between rounded-none px-4 py-3 text-left sm:px-5"
+                class="group h-auto min-h-20 w-full justify-between! rounded-none px-4 py-3 text-left sm:px-5"
               >
                 <span class="flex min-w-0 items-start gap-3">
                   <span class="mt-0.5 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-surface-alt text-muted">
@@ -187,7 +187,7 @@ export function PatrolIntelligenceSurface() {
 
               <button
                 type="button"
-                class="group flex min-h-20 w-full items-center justify-between gap-3 px-4 py-3 text-left hover:bg-surface-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500 sm:px-5"
+                class="group flex min-h-20 w-full items-center justify-between gap-3 px-4 py-3 text-left hover:bg-surface-hover focus:outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-500 sm:px-5"
                 aria-expanded={findingsOpen()}
                 aria-controls="patrol-operational-records"
                 onClick={() => {
@@ -251,7 +251,7 @@ export function PatrolIntelligenceSurface() {
                 <Show when={findingResourceScope()}>
                   <button
                     type="button"
-                    class="min-h-11 shrink-0 self-start text-xs font-medium text-blue-700 hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:text-blue-300 sm:min-h-0 sm:self-auto"
+                    class="min-h-11 shrink-0 self-start text-xs font-medium text-blue-700 hover:underline focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500 dark:text-blue-300 sm:min-h-0 sm:self-auto"
                     onClick={() => setFindingResourceScope(undefined)}
                   >
                     Show all finding options
diff --git a/frontend-modern/src/features/patrol/PatrolIntelligenceWorkspace.tsx b/frontend-modern/src/features/patrol/PatrolIntelligenceWorkspace.tsx
index 1c2846e356..f28fdf2de5 100644
--- a/frontend-modern/src/features/patrol/PatrolIntelligenceWorkspace.tsx
+++ b/frontend-modern/src/features/patrol/PatrolIntelligenceWorkspace.tsx
@@ -187,10 +187,7 @@ export function PatrolIntelligenceWorkspace(props: {
         >
           <For each={workGroupSummaries()}>
             {(group) => (
-              <div
-                role="listitem"
-                class="rounded-md border border-border-subtle bg-surface-alt/60 px-3 py-2"
-              >
+              <div role="listitem" class="rounded-md border border-border-subtle px-3 py-2">
                 <div class="flex min-w-0 flex-wrap items-center gap-2">
                   <MetadataBadge tone={group.tone} size="xs" shape="rounded">
                     {group.label}
@@ -209,7 +206,7 @@ export function PatrolIntelligenceWorkspace(props: {
             <div class="flex flex-col gap-3 rounded-md border border-blue-200 bg-blue-50 px-3 py-3 text-blue-800 dark:border-blue-800 dark:bg-blue-950/40 dark:text-blue-200 sm:flex-row sm:items-start sm:justify-between">
               <div class="min-w-0 space-y-1">
                 <div class="flex flex-wrap items-center gap-2 text-xs">
-                  <span class="font-semibold text-blue-950 dark:text-blue-100">
+                  <span class="font-semibold text-blue-950/25 dark:text-blue-100">
                     Patrol run {formatRelativeTime(run().started_at, { compact: true })}
                   </span>
                   <span>{formatTriggerReason(run().trigger_reason)}</span>
@@ -326,7 +323,7 @@ export function PatrolIntelligenceWorkspace(props: {
                   {setupAction().label}
                 </ButtonLink>
               </div>
-              <div class="rounded-md border border-amber-200 bg-surface/80 p-3 dark:border-amber-900">
+              <div class="rounded-md border border-amber-200 p-3 dark:border-amber-900/25">
                 <div class="flex items-center gap-2">
                   <ListChecksIcon class="h-4 w-4 text-muted" aria-hidden="true" />
                   <p class="text-xs font-semibold uppercase tracking-wider text-muted">
diff --git a/frontend-modern/src/features/patrol/PatrolObjectivesPanel.tsx b/frontend-modern/src/features/patrol/PatrolObjectivesPanel.tsx
index a5d2df82d3..724dbd9b7c 100644
--- a/frontend-modern/src/features/patrol/PatrolObjectivesPanel.tsx
+++ b/frontend-modern/src/features/patrol/PatrolObjectivesPanel.tsx
@@ -229,7 +229,7 @@ export const PatrolObjectivesPanel: Component = () => {
           <Show
             when={!loadError()}
             fallback={
-              <div class="rounded-lg border border-red-300 bg-red-50 p-4 text-sm text-red-900 dark:border-red-900 dark:bg-red-950/30 dark:text-red-100">
+              <div class="rounded-lg border border-red-300 bg-red-50 p-4 text-sm text-red-900/25 dark:border-red-900/25 dark:bg-red-950/30 dark:text-red-100">
                 <p>Patrol objectives could not be loaded.</p>
                 <Button class="mt-3" size="sm" onClick={() => void loadObjectives()}>
                   Try again
@@ -267,10 +267,10 @@ export const PatrolObjectivesPanel: Component = () => {
                 <div
                   class={`mb-4 rounded-lg border px-4 py-3 ${
                     protectionSummary().tone === 'success'
-                      ? 'border-emerald-200 bg-emerald-50/70 dark:border-emerald-900 dark:bg-emerald-950/20'
+                      ? 'border-emerald-200 bg-emerald-50/70 dark:border-emerald-900/25 dark:bg-emerald-950/20'
                       : protectionSummary().tone === 'warning'
-                        ? 'border-amber-200 bg-amber-50/70 dark:border-amber-900 dark:bg-amber-950/20'
-                        : 'border-border-subtle bg-surface-alt/40'
+                        ? 'border-amber-200 bg-amber-50/70 dark:border-amber-900/25 dark:bg-amber-950/20'
+                        : 'border-border-subtle '
                   }`}
                   aria-live="polite"
                 >
@@ -298,7 +298,7 @@ export const PatrolObjectivesPanel: Component = () => {
                         <article class="flex flex-col gap-3 p-4 lg:flex-row lg:items-start lg:justify-between">
                           <div class="min-w-0 flex-1">
                             <div class="flex flex-wrap items-center gap-2">
-                              <h3 class="break-words text-sm font-semibold text-base-content">
+                              <h3 class="wrap-break-word text-sm font-semibold text-base-content">
                                 {objective.brief}
                               </h3>
                               <Show when={objective.status === 'paused'}>
diff --git a/frontend-modern/src/features/patrol/PatrolRecentWorkPanel.tsx b/frontend-modern/src/features/patrol/PatrolRecentWorkPanel.tsx
index 9968a91670..638a8fbde4 100644
--- a/frontend-modern/src/features/patrol/PatrolRecentWorkPanel.tsx
+++ b/frontend-modern/src/features/patrol/PatrolRecentWorkPanel.tsx
@@ -82,7 +82,7 @@ export function PatrolRecentWorkPanel() {
       <div aria-live="polite">
         <Show when={error()}>
           {(message) => (
-            <div class="m-4 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800 dark:border-red-900 dark:bg-red-950/30 dark:text-red-200">
+            <div class="m-4 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800 dark:border-red-900/25 dark:bg-red-950/30 dark:text-red-200">
               <p class="font-semibold">Verified work is unavailable</p>
               <p class="mt-1 text-xs leading-5">{message()}</p>
             </div>
diff --git a/frontend-modern/src/features/patrol/PatrolWeeklyDigestCard.tsx b/frontend-modern/src/features/patrol/PatrolWeeklyDigestCard.tsx
index 9985bfaf10..c2d74b697e 100644
--- a/frontend-modern/src/features/patrol/PatrolWeeklyDigestCard.tsx
+++ b/frontend-modern/src/features/patrol/PatrolWeeklyDigestCard.tsx
@@ -257,7 +257,7 @@ export function PatrolWeeklyDigestCard() {
       <div aria-live="polite">
         <Show when={error()}>
           {(message) => (
-            <div class="m-4 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800 dark:border-red-900 dark:bg-red-950/30 dark:text-red-200">
+            <div class="m-4 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800 dark:border-red-900/25 dark:bg-red-950/30 dark:text-red-200">
               <p class="font-semibold">This week's summary is unavailable</p>
               <p class="mt-1 text-xs leading-5">{message()}</p>
             </div>
diff --git a/frontend-modern/src/features/patrol/__tests__/patrolCommercialBoundary.test.ts b/frontend-modern/src/features/patrol/__tests__/patrolCommercialBoundary.test.ts
index 4cca3bc5c3..7e56c8fcd9 100644
--- a/frontend-modern/src/features/patrol/__tests__/patrolCommercialBoundary.test.ts
+++ b/frontend-modern/src/features/patrol/__tests__/patrolCommercialBoundary.test.ts
@@ -59,10 +59,10 @@ describe('patrol commercial boundary', () => {
   });
 
   it('does not carry the removed patrol configuration panel chrome', () => {
-    expect(patrolIntelligenceHeaderSource).not.toContain('fixed right-4 top-32 z-[9999] isolate');
+    expect(patrolIntelligenceHeaderSource).not.toContain('fixed right-4 top-32 z-9999 isolate');
     expect(patrolIntelligenceHeaderSource).not.toContain('max-h-[calc(100vh-10rem)]');
     expect(patrolIntelligenceHeaderSource).not.toContain('sm:max-h-[calc(100vh-14rem)]');
-    expect(patrolIntelligenceHeaderSource).not.toContain('sm:top-[13rem]');
+    expect(patrolIntelligenceHeaderSource).not.toContain('sm:top-52');
     expect(patrolIntelligenceHeaderSource).not.toContain('bg-white p-5 shadow-xl');
     expect(patrolIntelligenceHeaderSource).not.toContain('invisible pointer-events-none');
   });
diff --git a/frontend-modern/src/features/platformPage/PlatformOutdatedAgentNotice.tsx b/frontend-modern/src/features/platformPage/PlatformOutdatedAgentNotice.tsx
index 58e00e04b0..dd2c53ad4d 100644
--- a/frontend-modern/src/features/platformPage/PlatformOutdatedAgentNotice.tsx
+++ b/frontend-modern/src/features/platformPage/PlatformOutdatedAgentNotice.tsx
@@ -74,14 +74,14 @@ export function PlatformOutdatedAgentNotice(props: PlatformOutdatedAgentNoticePr
         <Show when={count() > 3}>
           <button
             type="button"
-            class="ml-1 font-medium underline underline-offset-2 hover:no-underline focus-visible:rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+            class="ml-1 font-medium underline underline-offset-2 hover:no-underline focus-visible:rounded-xs focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2"
             aria-expanded={showAllHosts()}
             onClick={() => setShowAllHosts((current) => !current)}
           >
             {showAllHosts() ? 'Hide affected names' : `Show all ${count()} ${subjectPlural()}`}
           </button>
           <Show when={showAllHosts()}>
-            <p class="mt-1 break-words">Affected: {names()}.</p>
+            <p class="mt-1 wrap-break-word">Affected: {names()}.</p>
           </Show>
         </Show>
       </InlineNotice>
diff --git a/frontend-modern/src/features/platformPage/PlatformWindowedRows.tsx b/frontend-modern/src/features/platformPage/PlatformWindowedRows.tsx
index b390b29253..81dc870280 100644
--- a/frontend-modern/src/features/platformPage/PlatformWindowedRows.tsx
+++ b/frontend-modern/src/features/platformPage/PlatformWindowedRows.tsx
@@ -155,7 +155,7 @@ export function PlatformWindowedRows<Row>(props: PlatformWindowedRowsProps<Row>)
       >
         <td
           colspan={props.colSpan ?? 100}
-          class="!p-0"
+          class="p-0!"
           style={{ height: `${windowing.topSpacerHeight()}px` }}
         />
       </tr>
@@ -167,7 +167,7 @@ export function PlatformWindowedRows<Row>(props: PlatformWindowedRowsProps<Row>)
       >
         <td
           colspan={props.colSpan ?? 100}
-          class="!p-0"
+          class="p-0!"
           style={{ height: `${windowing.bottomSpacerHeight()}px` }}
         />
       </tr>
diff --git a/frontend-modern/src/features/platformPage/__tests__/PlatformDetailTable.test.tsx b/frontend-modern/src/features/platformPage/__tests__/PlatformDetailTable.test.tsx
index 19b6ab1364..2a457402dd 100644
--- a/frontend-modern/src/features/platformPage/__tests__/PlatformDetailTable.test.tsx
+++ b/frontend-modern/src/features/platformPage/__tests__/PlatformDetailTable.test.tsx
@@ -25,7 +25,7 @@ describe('PlatformDetailTable', () => {
     ));
 
     const table = screen.getByRole('table');
-    expect(table).toHaveClass('platform-table', 'min-w-[0px]', 'table-fixed', 'text-xs');
+    expect(table).toHaveClass('platform-table', 'min-w-0', 'table-fixed', 'text-xs');
     expect(table.parentElement).toHaveClass('table-scroll-shell-phone-page');
     expect(table.querySelector('thead tr')).toHaveClass('bg-surface-alt', 'border-border');
     expect(table.querySelector('tbody')).toHaveClass('divide-y', 'divide-border');
diff --git a/frontend-modern/src/features/platformPage/__tests__/platformOverviewLayout.guardrails.test.ts b/frontend-modern/src/features/platformPage/__tests__/platformOverviewLayout.guardrails.test.ts
index 2d6a7f9cf7..b811259023 100644
--- a/frontend-modern/src/features/platformPage/__tests__/platformOverviewLayout.guardrails.test.ts
+++ b/frontend-modern/src/features/platformPage/__tests__/platformOverviewLayout.guardrails.test.ts
@@ -427,11 +427,15 @@ describe('platform overview layout guardrails', () => {
     expect(vsphereNetworksTableSource).toMatch(
       /sortKey="type"[\s\S]{0,120}?class="platform-table-mobile-w-15 md:w-\[13%\]"/,
     );
-    expect(agentsMachinesTableSource).toContain('class="min-h-11 min-w-11 sm:min-h-0 sm:min-w-0"');
+    expect(agentsMachinesTableSource).toContain(
+      'class="-my-2 min-h-11 min-w-11 sm:my-0 sm:min-h-0 sm:min-w-0"',
+    );
     expect(agentsMachinesTableSource).toContain(
       '-my-3 inline-flex min-h-11 max-w-full items-center',
     );
-    expect(agentsMachinesTableSource).toContain('flex min-h-11 w-full items-center gap-2 rounded');
+    expect(agentsMachinesTableSource).toContain(
+      'flex min-h-11 w-full items-center gap-2 rounded-sm',
+    );
   });
 
   it('keeps provider overview pages in the parent-table plus child-inventory stack', () => {
diff --git a/frontend-modern/src/features/platformPage/__tests__/sharedPlatformPage.test.ts b/frontend-modern/src/features/platformPage/__tests__/sharedPlatformPage.test.ts
index bb6cc2dc8c..dff413c449 100644
--- a/frontend-modern/src/features/platformPage/__tests__/sharedPlatformPage.test.ts
+++ b/frontend-modern/src/features/platformPage/__tests__/sharedPlatformPage.test.ts
@@ -97,10 +97,10 @@ describe('getPlatformResourceCountNoun', () => {
 
 describe('getPlatformTableResponsiveMinWidthClass', () => {
   it('lets responsive columns fit their real container unless a table opts into a floor', () => {
-    expect(getPlatformTableResponsiveMinWidthClass()).toBe('min-w-[0px]');
+    expect(getPlatformTableResponsiveMinWidthClass()).toBe('min-w-0');
     expect(
       getPlatformTableResponsiveMinWidthClass('min-w-full table-fixed text-xs md:min-w-[1120px]'),
-    ).toBe('min-w-[0px]');
+    ).toBe('min-w-0');
     expect(
       getPlatformTableResponsiveMinWidthClass(
         'min-w-[850px] table-fixed text-xs md:min-w-[1320px]',
@@ -109,9 +109,9 @@ describe('getPlatformTableResponsiveMinWidthClass', () => {
   });
 
   it('removes the conflicting full-width minimum when composing table classes', () => {
-    expect(getPlatformTableClass()).toBe('platform-table min-w-[0px]');
+    expect(getPlatformTableClass()).toBe('platform-table min-w-0');
     expect(getPlatformTableClass('min-w-full table-fixed text-xs md:min-w-[1120px]')).toBe(
-      'platform-table min-w-[0px] table-fixed text-xs',
+      'platform-table min-w-0 table-fixed text-xs',
     );
     expect(getPlatformTableClass('min-w-full min-w-[850px] table-fixed md:min-w-[1320px]')).toBe(
       'platform-table min-w-[850px] table-fixed',
diff --git a/frontend-modern/src/features/platformPage/sharedPlatformPage.tsx b/frontend-modern/src/features/platformPage/sharedPlatformPage.tsx
index f36aa0a2e0..d7dc45c1ff 100644
--- a/frontend-modern/src/features/platformPage/sharedPlatformPage.tsx
+++ b/frontend-modern/src/features/platformPage/sharedPlatformPage.tsx
@@ -182,11 +182,11 @@ export function PlatformSectionTabs<TabId extends string>(props: {
         <Show when={canScrollLeft()}>
           <button
             type="button"
-            class="absolute inset-y-0 left-0 z-10 flex w-10 items-center justify-start bg-gradient-to-r from-surface via-surface to-transparent pl-1 text-muted hover:text-base-content focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-blue-500 sm:hidden"
+            class="absolute inset-y-0 left-0 z-10 flex w-10 items-center justify-start bg-linear-to-r from-surface via-surface to-transparent pl-1 text-muted hover:text-base-content focus-visible:outline-solid focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-500 sm:hidden"
             onClick={() => scrollSections(-1)}
             aria-label={`${props.ariaLabel}: scroll left`}
           >
-            <span class="flex h-8 w-8 items-center justify-center rounded-full border border-border bg-surface shadow-sm">
+            <span class="flex h-8 w-8 items-center justify-center rounded-full border border-border bg-surface shadow-xs">
               <ChevronLeftIcon class="h-4 w-4" aria-hidden="true" />
             </span>
           </button>
@@ -194,11 +194,11 @@ export function PlatformSectionTabs<TabId extends string>(props: {
         <Show when={canScrollRight()}>
           <button
             type="button"
-            class="absolute inset-y-0 right-0 z-10 flex w-10 items-center justify-end bg-gradient-to-l from-surface via-surface to-transparent pr-1 text-muted hover:text-base-content focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-blue-500 sm:hidden"
+            class="absolute inset-y-0 right-0 z-10 flex w-10 items-center justify-end bg-linear-to-l from-surface via-surface to-transparent pr-1 text-muted hover:text-base-content focus-visible:outline-solid focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-500 sm:hidden"
             onClick={() => scrollSections(1)}
             aria-label={`${props.ariaLabel}: scroll right`}
           >
-            <span class="flex h-8 w-8 items-center justify-center rounded-full border border-border bg-surface shadow-sm">
+            <span class="flex h-8 w-8 items-center justify-center rounded-full border border-border bg-surface shadow-xs">
               <ChevronRightIcon class="h-4 w-4" aria-hidden="true" />
             </span>
           </button>
@@ -266,7 +266,7 @@ export const PLATFORM_TABLE_NARROW_IDENTITY_WIDTH_PERCENT = 40;
 // horizontal rail even when the visible columns could fit the real container.
 // Dense tables that genuinely need a larger canvas must opt into an explicit
 // base min-width; the default should use the space it actually receives.
-export const PLATFORM_TABLE_DEFAULT_RESPONSIVE_MIN_WIDTH_CLASS = 'min-w-[0px]';
+export const PLATFORM_TABLE_DEFAULT_RESPONSIVE_MIN_WIDTH_CLASS = 'min-w-0';
 
 export function getPlatformTableResponsiveMinWidthClass(tableClass?: string): string {
   const hasExplicitBaseFloor = /(?:^|\s)min-w-\[[^\]]+\]/.test(tableClass ?? '');
@@ -397,13 +397,13 @@ export function PlatformTablePreviewFooter(props: {
       >
         <Show when={!props.expanded}>
           <div
-            class="pointer-events-none absolute inset-x-0 bottom-full h-9 bg-gradient-to-t from-surface via-surface/80 to-transparent"
+            class="pointer-events-none absolute inset-x-0 bottom-full h-9 bg-linear-to-t from-surface to-transparent"
             aria-hidden="true"
           />
         </Show>
         <button
           type="button"
-          class="group inline-flex min-h-11 w-full items-center justify-center gap-2 px-3 py-2 text-[11px] font-semibold text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-blue-500"
+          class="group inline-flex min-h-11 w-full items-center justify-center gap-2 px-3 py-2 text-[11px] font-semibold text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus-visible:outline-solid focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-500"
           aria-expanded={props.expanded}
           aria-label={label()}
           onClick={props.onToggle}
@@ -1256,7 +1256,7 @@ export const PlatformTableResetFiltersButton: Component<{
   <button
     type="button"
     onClick={props.onReset}
-    class="inline-flex min-h-8 items-center justify-center gap-1.5 rounded-md border border-border bg-surface px-2.5 py-1 text-xs font-medium text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60"
+    class="inline-flex min-h-8 items-center justify-center gap-1.5 rounded-md border border-border bg-surface px-2.5 py-1 text-xs font-medium text-muted transition-colors hover:bg-surface-hover hover:text-base-content focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500/60"
     title={props.label ?? 'Reset filters'}
     aria-label={props.label ?? 'Reset filters'}
   >
diff --git a/frontend-modern/src/features/proxmox/BackupActivityChart.tsx b/frontend-modern/src/features/proxmox/BackupActivityChart.tsx
index b59d10a3a9..26df986c89 100644
--- a/frontend-modern/src/features/proxmox/BackupActivityChart.tsx
+++ b/frontend-modern/src/features/proxmox/BackupActivityChart.tsx
@@ -95,7 +95,7 @@ export const BackupActivityChart: Component<BackupActivityChartProps> = (props)
   const hideTooltip = () => setTooltip(null);
 
   return (
-    <div class="rounded-lg border border-border-subtle bg-surface-alt/25 px-2 py-2">
+    <div class="rounded-lg border border-border-subtle px-2 py-2">
       <div class="mb-2 flex flex-col gap-1.5 lg:flex-row lg:items-center lg:justify-between">
         <div class="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-muted">
           <div class="font-semibold uppercase tracking-[0.18em] text-muted">{props.title}</div>
@@ -105,7 +105,7 @@ export const BackupActivityChart: Component<BackupActivityChartProps> = (props)
                 const presentation = getBackupActivitySegmentPresentation(kind);
                 return (
                   <span class={RECOVERY_TIMELINE_LEGEND_ITEM_CLASS}>
-                    <span class={`h-2.5 w-2.5 rounded ${presentation.swatchClassName}`} />
+                    <span class={`h-2.5 w-2.5 rounded-sm ${presentation.swatchClassName}`} />
                     {presentation.label}
                   </span>
                 );
@@ -118,7 +118,7 @@ export const BackupActivityChart: Component<BackupActivityChartProps> = (props)
             <div
               role="group"
               aria-label="Activity metric"
-              class="inline-flex shrink-0 rounded border border-border bg-surface p-0.5"
+              class="inline-flex shrink-0 rounded-sm border border-border bg-surface p-0.5"
             >
               <For each={['count', 'volume'] as const}>
                 {(mode) => {
@@ -144,7 +144,7 @@ export const BackupActivityChart: Component<BackupActivityChartProps> = (props)
           <div
             role="group"
             aria-label="Activity range"
-            class="inline-flex shrink-0 rounded border border-border bg-surface p-0.5"
+            class="inline-flex shrink-0 rounded-sm border border-border bg-surface p-0.5"
           >
             <For each={BACKUP_ACTIVITY_RANGE_DAYS}>
               {(days) => {
@@ -231,7 +231,7 @@ export const BackupActivityChart: Component<BackupActivityChartProps> = (props)
                             onFocus={(event) => showTooltip(event.currentTarget, point, dateLabel)}
                             onBlur={hideTooltip}
                           >
-                            <div class="relative h-full w-full overflow-hidden rounded-sm">
+                            <div class="relative h-full w-full overflow-hidden rounded-xs">
                               <Show
                                 when={total() > 0}
                                 fallback={
@@ -328,7 +328,7 @@ export const BackupActivityChart: Component<BackupActivityChartProps> = (props)
                         )}
                       </div>
                     </div>
-                    <div class="shrink-0 rounded border border-border bg-surface-alt px-1.5 py-0.5 text-[9px] font-medium text-muted">
+                    <div class="shrink-0 rounded-sm border border-border bg-surface-alt px-1.5 py-0.5 text-[9px] font-medium text-muted">
                       {getBackupActivityDayFilterStateLabel(
                         props.selectedDateKey() === t().point.key,
                         hasSelection(),
@@ -346,11 +346,11 @@ export const BackupActivityChart: Component<BackupActivityChartProps> = (props)
                       {(row) => (
                         <li
                           class={`flex items-center justify-between gap-4 ${
-                            row.muted ? 'text-muted/70' : 'text-base-content'
+                            row.muted ? '' : 'text-base-content'
                           }`}
                         >
                           <span class="flex min-w-0 items-center gap-1.5">
-                            <span class={`h-2 w-2 shrink-0 rounded-sm ${row.segmentClassName}`} />
+                            <span class={`h-2 w-2 shrink-0 rounded-xs ${row.segmentClassName}`} />
                             <span class="truncate">{row.label}</span>
                           </span>
                           <span class="shrink-0 font-mono tabular-nums">{row.value}</span>
diff --git a/frontend-modern/src/features/proxmox/ProxmoxBackupServersTable.tsx b/frontend-modern/src/features/proxmox/ProxmoxBackupServersTable.tsx
index 313270eca0..0ed2264d9a 100644
--- a/frontend-modern/src/features/proxmox/ProxmoxBackupServersTable.tsx
+++ b/frontend-modern/src/features/proxmox/ProxmoxBackupServersTable.tsx
@@ -407,7 +407,7 @@ export function ProxmoxBackupServersTable(props: {
         data-proxmox-backups-layout={layoutMode()}
       >
         <PlatformTableShell
-          tableClass="min-w-[0px] table-fixed text-xs"
+          tableClass="min-w-0 table-fixed text-xs"
           colgroup={
             <colgroup>
               <For each={visibleColumns()}>
diff --git a/frontend-modern/src/features/proxmox/ProxmoxBackupsCoverageStrip.tsx b/frontend-modern/src/features/proxmox/ProxmoxBackupsCoverageStrip.tsx
index 5d3e69bcdb..e8f2ecf8df 100644
--- a/frontend-modern/src/features/proxmox/ProxmoxBackupsCoverageStrip.tsx
+++ b/frontend-modern/src/features/proxmox/ProxmoxBackupsCoverageStrip.tsx
@@ -34,7 +34,7 @@ export const ProxmoxBackupsCoverageStrip: Component<CoverageStripProps> = (props
     );
 
   return (
-    <div class="rounded-lg border border-border-subtle bg-surface-alt/25 px-3 py-2">
+    <div class="rounded-lg border border-border-subtle px-3 py-2">
       <div class="flex flex-wrap items-baseline gap-x-3 gap-y-1">
         <div class="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted">
           {props.title}
@@ -69,9 +69,9 @@ export const ProxmoxBackupsCoverageStrip: Component<CoverageStripProps> = (props
         <For each={props.segments}>
           {(segment) => (
             <li
-              class={`inline-flex items-center gap-1.5 ${segment.muted ? 'text-muted/70' : 'text-base-content'}`}
+              class={`inline-flex items-center gap-1.5 ${segment.muted ? '' : 'text-base-content'}`}
             >
-              <span class={`h-2 w-2 shrink-0 rounded-sm ${segment.toneClass}`} aria-hidden="true" />
+              <span class={`h-2 w-2 shrink-0 rounded-xs ${segment.toneClass}`} aria-hidden="true" />
               <span class="tabular-nums">
                 {segment.display ?? String(Math.max(0, Math.round(segment.value)))}
               </span>
diff --git a/frontend-modern/src/features/proxmox/ProxmoxBackupsTable.tsx b/frontend-modern/src/features/proxmox/ProxmoxBackupsTable.tsx
index dfdf028f97..ef84f0d194 100644
--- a/frontend-modern/src/features/proxmox/ProxmoxBackupsTable.tsx
+++ b/frontend-modern/src/features/proxmox/ProxmoxBackupsTable.tsx
@@ -647,7 +647,7 @@ export const ProxmoxBackupsTable: Component<{
           <Show when={protectionPostures.response.error}>
             <div
               role="status"
-              class="rounded-md border border-amber-300 bg-amber-50 px-3 py-2 text-xs text-amber-900 dark:border-amber-700 dark:bg-amber-950/40 dark:text-amber-100"
+              class="rounded-md border border-amber-300 bg-amber-50 px-3 py-2 text-xs text-amber-900/25 dark:border-amber-700 dark:bg-amber-950/40 dark:text-amber-100"
             >
               Protection posture is unavailable. Pulse is showing restore evidence without guessing
               whether workloads are protected.
@@ -724,7 +724,7 @@ export const ProxmoxBackupsTable: Component<{
             <Show
               when={hasRecoverableActivityInRange()}
               fallback={
-                <div class="flex flex-col gap-2 rounded-md border border-border-subtle bg-surface-alt/25 px-3 py-3 text-xs text-muted sm:flex-row sm:items-center sm:justify-between">
+                <div class="flex flex-col gap-2 rounded-md border border-border-subtle px-3 py-3 text-xs text-muted sm:flex-row sm:items-center sm:justify-between">
                   <span>No backup activity in the selected {chartRange()}-day window.</span>
                   <div class="flex items-center gap-2">
                     <button
@@ -835,7 +835,7 @@ export const ProxmoxBackupsTable: Component<{
             />
 
             <Show when={orphanedTotalCount() > 0}>
-              <div class="rounded-lg border border-border-subtle bg-surface-alt/25">
+              <div class="rounded-lg border border-border-subtle">
                 <button
                   type="button"
                   onClick={() => setShowOrphaned((v) => !v)}
diff --git a/frontend-modern/src/features/proxmox/ProxmoxCephClusterDrawer.tsx b/frontend-modern/src/features/proxmox/ProxmoxCephClusterDrawer.tsx
index 7cb4bb1846..9d04abd7bb 100644
--- a/frontend-modern/src/features/proxmox/ProxmoxCephClusterDrawer.tsx
+++ b/frontend-modern/src/features/proxmox/ProxmoxCephClusterDrawer.tsx
@@ -85,7 +85,7 @@ function PoolUsageBar(props: { percent: number }) {
   return (
     <ProgressBar
       value={clamped}
-      class="h-4 w-full min-w-0 max-w-32 md:min-w-[3.5rem]"
+      class="h-4 w-full min-w-0 max-w-32 md:min-w-14"
       fillClass={capacityToneFor(clamped)}
       label={
         <span class="absolute inset-0 flex items-center justify-center text-[10px] font-semibold text-base-content leading-none tabular-nums">
@@ -360,7 +360,7 @@ export const ProxmoxCephClusterDrawer: Component<{
           <span class="text-[10px] uppercase tracking-wide text-muted">Tags</span>
           <For each={props.cluster.tags ?? []}>
             {(tag) => (
-              <span class="inline-flex items-center rounded-sm bg-surface-alt px-1.5 py-0.5 text-[10px] font-mono text-base-content">
+              <span class="inline-flex items-center rounded-xs bg-surface-alt px-1.5 py-0.5 text-[10px] font-mono text-base-content">
                 {tag}
               </span>
             )}
diff --git a/frontend-modern/src/features/proxmox/ProxmoxCephTable.tsx b/frontend-modern/src/features/proxmox/ProxmoxCephTable.tsx
index 5838d55536..7cce039f70 100644
--- a/frontend-modern/src/features/proxmox/ProxmoxCephTable.tsx
+++ b/frontend-modern/src/features/proxmox/ProxmoxCephTable.tsx
@@ -354,7 +354,7 @@ export const ProxmoxCephTable: Component<{
           }
         >
           <PlatformTableShell
-            tableClass="min-w-[0px] table-fixed text-xs"
+            tableClass="min-w-0 table-fixed text-xs"
             colgroup={
               <colgroup>
                 <For each={visibleColumns()}>
diff --git a/frontend-modern/src/features/proxmox/ProxmoxCoverageTable.tsx b/frontend-modern/src/features/proxmox/ProxmoxCoverageTable.tsx
index c963a6e98d..dcafa1e9ae 100644
--- a/frontend-modern/src/features/proxmox/ProxmoxCoverageTable.tsx
+++ b/frontend-modern/src/features/proxmox/ProxmoxCoverageTable.tsx
@@ -195,7 +195,7 @@ export function ProxmoxCoverageTable(props: {
         data-proxmox-backups-windowed={tableWindow.isWindowed()}
       >
         <PlatformTableShell
-          tableClass="min-w-[0px] table-fixed text-xs"
+          tableClass="min-w-0 table-fixed text-xs"
           colgroup={
             <colgroup>
               <For each={visibleColumns()}>
@@ -527,7 +527,7 @@ export function ProxmoxCoverageTable(props: {
                       <Show when={isExpanded()}>
                         <InlineDetailTableRow
                           cellId={detailRowId()}
-                          class="bg-surface-alt/40"
+                          class=""
                           cellClass="px-3 py-2 whitespace-normal"
                           contentClass="min-w-0 whitespace-normal"
                           colspan={columnCount()}
diff --git a/frontend-modern/src/features/proxmox/ProxmoxMailGatewayDrawer.tsx b/frontend-modern/src/features/proxmox/ProxmoxMailGatewayDrawer.tsx
index 378691f1ed..540bf20f42 100644
--- a/frontend-modern/src/features/proxmox/ProxmoxMailGatewayDrawer.tsx
+++ b/frontend-modern/src/features/proxmox/ProxmoxMailGatewayDrawer.tsx
@@ -126,7 +126,7 @@ function StackedBar(props: { segments: StackedSegment[]; ariaLabel: string }) {
             const share = total() > 0 ? (seg.value / total()) * 100 : 0;
             return (
               <div class="flex items-center gap-1.5">
-                <span class={`inline-block h-2 w-2 rounded-sm ${seg.tone}`} aria-hidden="true" />
+                <span class={`inline-block h-2 w-2 rounded-xs ${seg.tone}`} aria-hidden="true" />
                 <span class="text-muted">{seg.label}</span>
                 <span class="text-base-content font-semibold tabular-nums">
                   {formatPlatformTableIntegerValue(seg.value)}
@@ -168,7 +168,7 @@ function SpamHistogram(props: { buckets: PMGSpamBucket[] }) {
           return (
             <div class="flex flex-1 min-w-[20px] flex-col items-center gap-1">
               <div
-                class={`w-full rounded-sm ${tone}`}
+                class={`w-full rounded-xs ${tone}`}
                 style={{ height: `${Math.max(heightPct, 2)}%` }}
                 title={`Score ${bucket.score}: ${formatPlatformTableIntegerValue(bucket.count)}`}
               />
@@ -199,7 +199,7 @@ function InOutBar(props: {
     <div class="space-y-1">
       <div class="text-[11px] text-muted">{props.label}</div>
       <div
-        class="relative flex h-4 w-full overflow-hidden rounded bg-surface-hover"
+        class="relative flex h-4 w-full overflow-hidden rounded-sm bg-surface-hover"
         title={`In ${format(props.inValue)} · Out ${format(props.outValue)}`}
       >
         <div class="relative bg-blue-500/60" style={{ width: `${inWidth}%` }} />
@@ -620,7 +620,7 @@ export const ProxmoxMailGatewayDrawer: Component<{
                           <TableCell
                             class={`${getPlatformTableCellClassForKind('name')} font-mono text-[11px] text-base-content`}
                           >
-                            <span class="inline-block max-w-[14rem] truncate" title={domain.domain}>
+                            <span class="inline-block max-w-56 truncate" title={domain.domain}>
                               {domain.domain || '—'}
                             </span>
                           </TableCell>
@@ -667,7 +667,7 @@ export const ProxmoxMailGatewayDrawer: Component<{
                 <For each={relayDomains()}>
                   {(rd) => (
                     <span
-                      class="inline-flex items-center rounded-sm bg-surface-alt px-1.5 py-0.5 text-[10px] font-mono text-base-content"
+                      class="inline-flex items-center rounded-xs bg-surface-alt px-1.5 py-0.5 text-[10px] font-mono text-base-content"
                       title={rd.comment || rd.domain}
                     >
                       {rd.domain}
diff --git a/frontend-modern/src/features/proxmox/ProxmoxMailGatewayTable.tsx b/frontend-modern/src/features/proxmox/ProxmoxMailGatewayTable.tsx
index ec53c5a534..3d52087b92 100644
--- a/frontend-modern/src/features/proxmox/ProxmoxMailGatewayTable.tsx
+++ b/frontend-modern/src/features/proxmox/ProxmoxMailGatewayTable.tsx
@@ -189,7 +189,7 @@ export const ProxmoxMailGatewayTable: Component<{
           }
         >
           <PlatformTableShell
-            tableClass="min-w-[0px] table-fixed text-xs"
+            tableClass="min-w-0 table-fixed text-xs"
             colgroup={
               <colgroup>
                 <For each={visibleColumns()}>
diff --git a/frontend-modern/src/features/proxmox/ProxmoxNodesTable.tsx b/frontend-modern/src/features/proxmox/ProxmoxNodesTable.tsx
index 05796330cb..a8c4ea1ca7 100644
--- a/frontend-modern/src/features/proxmox/ProxmoxNodesTable.tsx
+++ b/frontend-modern/src/features/proxmox/ProxmoxNodesTable.tsx
@@ -113,11 +113,11 @@ const countGuestsForNode = (guests: Resource[], node: Resource): GuestCounts =>
 };
 
 const VMS_BADGE =
-  'inline-flex min-w-[2rem] justify-center items-center rounded-md bg-sky-100 px-1.5 py-0.5 text-[11px] font-semibold tabular-nums text-sky-700 dark:bg-sky-900/40 dark:text-sky-300';
+  'inline-flex min-w-8 justify-center items-center rounded-md bg-sky-100 px-1.5 py-0.5 text-[11px] font-semibold tabular-nums text-sky-700 dark:bg-sky-900/40 dark:text-sky-300';
 const CTS_BADGE =
-  'inline-flex min-w-[2rem] justify-center items-center rounded-md bg-violet-100 px-1.5 py-0.5 text-[11px] font-semibold tabular-nums text-violet-700 dark:bg-violet-900/40 dark:text-violet-300';
+  'inline-flex min-w-8 justify-center items-center rounded-md bg-violet-100 px-1.5 py-0.5 text-[11px] font-semibold tabular-nums text-violet-700 dark:bg-violet-900/40 dark:text-violet-300';
 const ZERO_BADGE =
-  'inline-flex min-w-[2rem] justify-center items-center rounded-md bg-surface-alt px-1.5 py-0.5 text-[11px] font-medium tabular-nums text-muted';
+  'inline-flex min-w-8 justify-center items-center rounded-md bg-surface-alt px-1.5 py-0.5 text-[11px] font-medium tabular-nums text-muted';
 
 // Shim a canonical Resource into the legacy Node shape that
 // `useWorkloadTableMetricHistory.getNodeMetricSeries` uses for its chart-key
@@ -477,8 +477,8 @@ export const ProxmoxNodesTable: Component<{
                   const styles = alertStyles();
                   if (!styles.hasUnacknowledgedAlert) return '';
                   return styles.severity === 'critical'
-                    ? 'bg-red-50 dark:bg-red-950'
-                    : 'bg-yellow-50 dark:bg-yellow-950';
+                    ? 'bg-red-50 dark:bg-red-950/25'
+                    : 'bg-yellow-50 dark:bg-yellow-950/25';
                 };
                 const cpuSeries = () => metricHistory.getNodeMetricSeries(legacyNode(), 'cpu');
                 const memorySeries = () =>
@@ -519,7 +519,7 @@ export const ProxmoxNodesTable: Component<{
                               >
                                 <button
                                   type="button"
-                                  class={`block max-w-full truncate rounded-sm text-left ${SUMMARY_ROW_ACTION_BUTTON_FOCUS_CLASS}`}
+                                  class={`block max-w-full truncate rounded-xs text-left ${SUMMARY_ROW_ACTION_BUTTON_FOCUS_CLASS}`}
                                   aria-label={`Show guests on ${name()}`}
                                   aria-controls="proxmox-guests-section"
                                   aria-pressed={isGuestFilterSelected()}
@@ -538,7 +538,7 @@ export const ProxmoxNodesTable: Component<{
                               </ResourceNameWithWebInterfaceLink>
                             </div>
                             <Show when={!isOnline()}>
-                              <span class="hidden rounded bg-surface-alt px-1.5 py-0.5 text-[10px] font-medium text-muted sm:inline-flex">
+                              <span class="hidden rounded-sm bg-surface-alt px-1.5 py-0.5 text-[10px] font-medium text-muted sm:inline-flex">
                                 {availabilityLabel()}
                               </span>
                             </Show>
@@ -551,7 +551,7 @@ export const ProxmoxNodesTable: Component<{
                                 class={`hidden rounded px-1 py-0 text-[9px] font-medium whitespace-nowrap sm:inline-flex ${
                                   pendingUpdates() >= 10
                                     ? 'bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-400'
-                                    : 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-400'
+                                    : 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/25 dark:text-yellow-400'
                                 }`}
                                 title={`${pendingUpdates()} pending apt update${pendingUpdates() !== 1 ? 's' : ''}`}
                               >
@@ -565,7 +565,7 @@ export const ProxmoxNodesTable: Component<{
                       return (
                         <TableCell class={getPlatformTableCellClassForKind(column.kind)}>
                           <Show when={version()} fallback={<span class="text-muted">—</span>}>
-                            <span class="inline-flex items-center rounded bg-surface-alt px-1.5 py-0.5 font-mono text-[10px] text-base-content">
+                            <span class="inline-flex items-center rounded-sm bg-surface-alt px-1.5 py-0.5 font-mono text-[10px] text-base-content">
                               {version()}
                             </span>
                           </Show>
diff --git a/frontend-modern/src/features/proxmox/ProxmoxPageSurface.tsx b/frontend-modern/src/features/proxmox/ProxmoxPageSurface.tsx
index 2b54c5336b..d40ce5bf2c 100644
--- a/frontend-modern/src/features/proxmox/ProxmoxPageSurface.tsx
+++ b/frontend-modern/src/features/proxmox/ProxmoxPageSurface.tsx
@@ -633,7 +633,7 @@ function ProxmoxOverview(props: ProxmoxOverviewProps) {
                 ref={guestsHeading}
                 id="proxmox-guests-heading"
                 tabIndex={-1}
-                class="inline-flex flex-wrap items-center gap-1.5 rounded-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
+                class="inline-flex flex-wrap items-center gap-1.5 rounded-xs focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary/40"
               >
                 {selectedNodeLabel() ? `Guests on ${selectedNodeLabel()}` : 'Guests'}
                 <Show when={showSharedFilterToolbar()}>
diff --git a/frontend-modern/src/features/proxmox/ProxmoxRecoverableTable.tsx b/frontend-modern/src/features/proxmox/ProxmoxRecoverableTable.tsx
index 6da1dd7948..367d630696 100644
--- a/frontend-modern/src/features/proxmox/ProxmoxRecoverableTable.tsx
+++ b/frontend-modern/src/features/proxmox/ProxmoxRecoverableTable.tsx
@@ -226,7 +226,7 @@ export function ProxmoxRecoverableTable(props: {
         data-proxmox-backups-windowed={tableWindow.isWindowed()}
       >
         <PlatformTableShell
-          tableClass="min-w-[0px] table-fixed text-xs"
+          tableClass="min-w-0 table-fixed text-xs"
           colgroup={
             <colgroup>
               <For each={visibleColumns()}>
diff --git a/frontend-modern/src/features/proxmox/ProxmoxReplicationTable.tsx b/frontend-modern/src/features/proxmox/ProxmoxReplicationTable.tsx
index 38f0d8e9c8..2f635487d1 100644
--- a/frontend-modern/src/features/proxmox/ProxmoxReplicationTable.tsx
+++ b/frontend-modern/src/features/proxmox/ProxmoxReplicationTable.tsx
@@ -339,9 +339,9 @@ export const ProxmoxReplicationTable: Component<{
     getPlatformTableContainerLayout(observedWidth.width() ?? 1920, [520, 720, 960, 1200]),
   );
   const isCompact = createMemo(() => layout() === 'compact');
-  const mobilePaddingClass = () => (isCompact() ? '!px-1' : '');
-  const mobileHeadClass = () => (isCompact() ? '!px-1 !text-[9px]' : '');
-  const mobileLastSyncClass = () => (isCompact() ? '![padding-inline:2px] !tracking-normal' : '');
+  const mobilePaddingClass = () => (isCompact() ? 'px-1!' : '');
+  const mobileHeadClass = () => (isCompact() ? 'px-1! text-[9px]!' : '');
+  const mobileLastSyncClass = () => (isCompact() ? 'px-[2px]! tracking-normal!' : '');
   const showJob = createMemo(() => !isCompact());
   const showNext = createMemo(() => true);
   const showOperational = createMemo(() => ['operational', 'expanded', 'full'].includes(layout()));
@@ -416,7 +416,7 @@ export const ProxmoxReplicationTable: Component<{
               }
             >
               <PlatformTableShell
-                tableClass="min-w-[0px] table-fixed text-xs"
+                tableClass="min-w-0 table-fixed text-xs"
                 colgroup={
                   <Show when={layout() === 'compact'}>
                     <colgroup>
@@ -670,8 +670,8 @@ export const ProxmoxReplicationTable: Component<{
                               <InlineDetailTableRow
                                 cellId={detailRowId}
                                 colspan={visibleColumnCount()}
-                                class="bg-surface-alt/60 hover:bg-surface-alt/60"
-                                cellClass="!whitespace-normal"
+                                class=""
+                                cellClass="whitespace-normal!"
                                 contentClass="px-2 py-2 sm:px-4 sm:py-3"
                               >
                                 {/* The row truncates and narrower layouts drop columns, so
@@ -681,7 +681,7 @@ export const ProxmoxReplicationTable: Component<{
                                   <Show when={errorText}>
                                     <dt class="font-semibold text-muted">Error</dt>
                                     <dd
-                                      class="break-words text-red-600 dark:text-red-300"
+                                      class="wrap-break-word text-red-600 dark:text-red-300"
                                       data-replication-job-error
                                     >
                                       {errorText}
@@ -722,7 +722,7 @@ export const ProxmoxReplicationTable: Component<{
                                   </dd>
                                   <Show when={comment}>
                                     <dt class="font-semibold text-muted">Comment</dt>
-                                    <dd class="break-words text-base-content">{comment}</dd>
+                                    <dd class="wrap-break-word text-base-content">{comment}</dd>
                                   </Show>
                                 </dl>
                               </InlineDetailTableRow>
diff --git a/frontend-modern/src/features/proxmox/__tests__/ProxmoxReplicationTable.test.tsx b/frontend-modern/src/features/proxmox/__tests__/ProxmoxReplicationTable.test.tsx
index 8c37a8c681..b302446ed7 100644
--- a/frontend-modern/src/features/proxmox/__tests__/ProxmoxReplicationTable.test.tsx
+++ b/frontend-modern/src/features/proxmox/__tests__/ProxmoxReplicationTable.test.tsx
@@ -54,7 +54,7 @@ describe('ProxmoxReplicationTable', () => {
   });
 
   it('removes phone tracking and excess padding from the tight last-sync column', () => {
-    expect(replicationTableSource).toContain('![padding-inline:2px] !tracking-normal');
+    expect(replicationTableSource).toContain('px-[2px]! tracking-normal!');
   });
 
   it('renders replication duration cells through the shared duration format', () => {
@@ -118,7 +118,7 @@ describe('ProxmoxReplicationTable', () => {
     const detail = document.querySelector('[data-replication-job-error]');
     expect(detail).toHaveTextContent(error);
     // The expansion wraps; only the one-line row cell truncates.
-    expect(detail?.className).toContain('break-words');
+    expect(detail?.className).toContain('wrap-break-word');
     expect(detail?.className).not.toContain('truncate');
   });
 
diff --git a/frontend-modern/src/features/proxmox/__tests__/proxmoxBackupsTableShared.test.tsx b/frontend-modern/src/features/proxmox/__tests__/proxmoxBackupsTableShared.test.tsx
index cb34f14569..64f5895ce9 100644
--- a/frontend-modern/src/features/proxmox/__tests__/proxmoxBackupsTableShared.test.tsx
+++ b/frontend-modern/src/features/proxmox/__tests__/proxmoxBackupsTableShared.test.tsx
@@ -69,7 +69,7 @@ describe('proxmoxBackupsTableShared', () => {
     expect(proxmoxBackupsTableSharedSource).toContain('presentation().badgeTone');
     expect(proxmoxBackupsTableSharedSource).not.toContain('presentation().badgeClassName');
     expect(proxmoxBackupsTableSharedSource).not.toMatch(
-      /inline-flex items-center rounded-sm px-1\.5 py-0\.5 text-\[10px\] font-semibold/,
+      /inline-flex items-center rounded-xs px-1\.5 py-0\.5 text-\[10px\] font-semibold/,
     );
   });
 
diff --git a/frontend-modern/src/features/proxmox/__tests__/proxmoxHostTableModel.test.ts b/frontend-modern/src/features/proxmox/__tests__/proxmoxHostTableModel.test.ts
index 1e23674fb7..66ee4d61d0 100644
--- a/frontend-modern/src/features/proxmox/__tests__/proxmoxHostTableModel.test.ts
+++ b/frontend-modern/src/features/proxmox/__tests__/proxmoxHostTableModel.test.ts
@@ -13,7 +13,7 @@ describe('proxmoxHostTableModel', () => {
     const ids = columns.map((column) => column.id);
 
     expect(ids).toEqual(['node', 'cpu', 'memory', 'disk', 'uptime']);
-    expect(getProxmoxHostTableMinWidthClass('narrow')).toBe('min-w-[0px]');
+    expect(getProxmoxHostTableMinWidthClass('narrow')).toBe('min-w-0');
     expect(getProxmoxHostColumnWidthStyle('node', 'narrow', ids)).toEqual({ width: '40%' });
     expect(getProxmoxHostColumnWidthStyle('cpu', 'narrow', ids)).toEqual({ width: '15%' });
     expect(getProxmoxHostColumnWidthStyle('uptime', 'narrow', ids)).toEqual({ width: '15%' });
@@ -24,7 +24,7 @@ describe('proxmoxHostTableModel', () => {
     const ids = columns.map((column) => column.id);
 
     expect(ids).toEqual(['node', 'cpu', 'memory', 'disk', 'temp', 'uptime']);
-    expect(getProxmoxHostTableMinWidthClass('phone')).toBe('min-w-[0px]');
+    expect(getProxmoxHostTableMinWidthClass('phone')).toBe('min-w-0');
     expect(getProxmoxHostColumnWidthStyle('node', 'phone', ids)).toEqual({ width: '30%' });
     expect(getProxmoxHostColumnWidthStyle('disk', 'phone', ids)).toEqual({ width: '13.3824%' });
     expect(getProxmoxHostColumnWidthStyle('temp', 'phone', ids)).toEqual({ width: '15.4412%' });
@@ -36,7 +36,7 @@ describe('proxmoxHostTableModel', () => {
     const ids = columns.map((column) => column.id);
 
     expect(ids).toEqual(['node', 'cpu', 'memory', 'disk', 'temp', 'uptime']);
-    expect(getProxmoxHostTableMinWidthClass('mobile')).toBe('min-w-[0px]');
+    expect(getProxmoxHostTableMinWidthClass('mobile')).toBe('min-w-0');
     expect(getProxmoxHostColumnWidthStyle('node', 'mobile', ids)).toEqual({ width: '30%' });
     expect(getProxmoxHostColumnWidthStyle('cpu', 'mobile', ids)).toEqual({ width: '13.3824%' });
     expect(getProxmoxHostColumnWidthStyle('memory', 'mobile', ids)).toEqual({
@@ -59,7 +59,7 @@ describe('proxmoxHostTableModel', () => {
       'uptime',
       'cluster',
     ]);
-    expect(getProxmoxHostTableMinWidthClass('tablet')).toBe('min-w-[50rem]');
+    expect(getProxmoxHostTableMinWidthClass('tablet')).toBe('min-w-200');
   });
 
   it('adds guest counts on compact and reserves version for wide layouts', () => {
@@ -110,7 +110,7 @@ describe('proxmoxHostTableModel', () => {
     // The compact band covers most laptops. Forcing a 1240px floor
     // there pushed the rightmost column behind a horizontal scroll, so compact
     // now fits its container; only wide keeps the fixed-width floor.
-    expect(getProxmoxHostTableMinWidthClass('compact')).toBe('min-w-[64rem]');
+    expect(getProxmoxHostTableMinWidthClass('compact')).toBe('min-w-5xl');
     expect(getProxmoxHostTableMinWidthClass('wide')).toBe('min-w-[1240px]');
   });
 });
diff --git a/frontend-modern/src/features/proxmox/proxmoxBackupsTableShared.tsx b/frontend-modern/src/features/proxmox/proxmoxBackupsTableShared.tsx
index 26e89ef9b5..4534c53816 100644
--- a/frontend-modern/src/features/proxmox/proxmoxBackupsTableShared.tsx
+++ b/frontend-modern/src/features/proxmox/proxmoxBackupsTableShared.tsx
@@ -128,7 +128,7 @@ export const COVERAGE_FILTERS: FilterOption<CoverageFilterValue>[] = [
   {
     value: 'unknown',
     label: 'Unknown',
-    leading: filterChipStatusDot('bg-base-content/40'),
+    leading: filterChipStatusDot(''),
   },
 ];
 
@@ -202,7 +202,7 @@ export function RowMetricBar(props: {
 }) {
   return (
     <div
-      class="metric-text relative h-4 w-full min-w-[5rem] overflow-hidden"
+      class="metric-text relative h-4 w-full min-w-20 overflow-hidden"
       title={props.tooltip ?? props.label}
     >
       <ProgressBar
@@ -346,7 +346,7 @@ export function ProxmoxBackupWorkloadTypeBadge(props: {
 // restate the header casing or it renders in sentence case beside its
 // uppercase non-sortable neighbours.
 const SORT_BUTTON_CLASS =
-  'inline-flex min-w-0 max-w-full items-center gap-1 rounded-sm uppercase tracking-[inherit] outline-none transition-colors hover:text-base-content focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1 focus-visible:ring-offset-surface';
+  'inline-flex min-w-0 max-w-full items-center gap-1 rounded-xs uppercase tracking-[inherit] outline-hidden transition-colors hover:text-base-content focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1 focus-visible:ring-offset-surface';
 
 export function SortableHead<K extends string>(props: {
   label: string;
diff --git a/frontend-modern/src/features/proxmox/proxmoxHostTableModel.ts b/frontend-modern/src/features/proxmox/proxmoxHostTableModel.ts
index b053bdb00f..76ce153aa8 100644
--- a/frontend-modern/src/features/proxmox/proxmoxHostTableModel.ts
+++ b/frontend-modern/src/features/proxmox/proxmoxHostTableModel.ts
@@ -171,11 +171,11 @@ export const getProxmoxHostColumnWidthStyle = (
 // does not collapse into unreadable labels.
 export const getProxmoxHostTableMinWidthClass = (
   layoutMode: WorkloadTableLayoutMode,
-): 'min-w-[0px]' | 'min-w-[50rem]' | 'min-w-[64rem]' | 'min-w-[1240px]' => {
+): 'min-w-0' | 'min-w-200' | 'min-w-5xl' | 'min-w-[1240px]' => {
   if (layoutMode === 'narrow' || layoutMode === 'phone' || layoutMode === 'mobile') {
-    return 'min-w-[0px]';
+    return 'min-w-0';
   }
-  if (layoutMode === 'tablet') return 'min-w-[50rem]';
-  if (layoutMode === 'compact') return 'min-w-[64rem]';
+  if (layoutMode === 'tablet') return 'min-w-200';
+  if (layoutMode === 'compact') return 'min-w-5xl';
   return 'min-w-[1240px]';
 };
diff --git a/frontend-modern/src/features/standalone/AgentsMachinesTable.tsx b/frontend-modern/src/features/standalone/AgentsMachinesTable.tsx
index 9aad830f5d..4b99ca84a0 100644
--- a/frontend-modern/src/features/standalone/AgentsMachinesTable.tsx
+++ b/frontend-modern/src/features/standalone/AgentsMachinesTable.tsx
@@ -199,7 +199,7 @@ const AgentMachineTemperatureCell: Component<{
     <AgentMachineMetricTooltip
       triggerDataAttribute="data-agent-machine-temperature-trigger"
       tooltipDataAttribute="data-agent-machine-temperature-tooltip"
-      triggerClass="inline-flex min-w-[2.25rem] justify-end text-xs tabular-nums"
+      triggerClass="inline-flex min-w-9 justify-end text-xs tabular-nums"
       tooltipClass="min-w-[190px] max-w-[300px] space-y-2"
       enabled={hasDetails()}
       ariaLabel={fallbackTitle() || undefined}
@@ -300,7 +300,7 @@ const AgentMachineNetworkInterfacesList: Component<{
                 <For each={iface.addresses.slice(0, maxAddressesPerInterface())}>
                   {(address) => (
                     <span
-                      class="max-w-full truncate rounded border border-border bg-surface-alt px-1.5 py-0.5 font-mono text-[9px] text-base-content"
+                      class="max-w-full truncate rounded-sm border border-border bg-surface-alt px-1.5 py-0.5 font-mono text-[9px] text-base-content"
                       title={address}
                     >
                       {address}
@@ -308,7 +308,7 @@ const AgentMachineNetworkInterfacesList: Component<{
                   )}
                 </For>
                 <Show when={iface.addresses.length > maxAddressesPerInterface()}>
-                  <span class="rounded border border-border px-1.5 py-0.5 text-[9px] text-muted">
+                  <span class="rounded-sm border border-border px-1.5 py-0.5 text-[9px] text-muted">
                     +{iface.addresses.length - maxAddressesPerInterface()}
                   </span>
                 </Show>
@@ -422,7 +422,7 @@ const AgentMachineIpCell: Component<{
             {props.primaryIp || '—'}
           </span>
           <Show when={additionalIpCount() > 0}>
-            <span class="shrink-0 rounded border border-border px-1 py-0.5 text-[9px] text-muted">
+            <span class="shrink-0 rounded-sm border border-border px-1 py-0.5 text-[9px] text-muted">
               +{additionalIpCount()}
             </span>
           </Show>
@@ -439,7 +439,7 @@ const AgentMachineIpCell: Component<{
             <For each={shownIps()}>
               {(address) => (
                 <span
-                  class="max-w-full truncate rounded border border-border bg-surface-alt px-1.5 py-0.5 font-mono text-[9px] text-base-content"
+                  class="max-w-full truncate rounded-sm border border-border bg-surface-alt px-1.5 py-0.5 font-mono text-[9px] text-base-content"
                   title={address}
                 >
                   {address}
@@ -447,7 +447,7 @@ const AgentMachineIpCell: Component<{
               )}
             </For>
             <Show when={hiddenIpCount() > 0}>
-              <span class="rounded border border-border px-1.5 py-0.5 text-[9px] text-muted">
+              <span class="rounded-sm border border-border px-1.5 py-0.5 text-[9px] text-muted">
                 +{hiddenIpCount()}
               </span>
             </Show>
@@ -681,7 +681,7 @@ const AgentMachineRaidCell: Component<{
                       <For each={devices().slice(0, 12)}>
                         {(device) => (
                           <span
-                            class={`inline-flex max-w-full items-center truncate rounded border px-1.5 py-0.5 text-[9px] font-medium ${getRaidDeviceBadgeClass(device)}`}
+                            class={`inline-flex max-w-full items-center truncate rounded-sm border px-1.5 py-0.5 text-[9px] font-medium ${getRaidDeviceBadgeClass(device)}`}
                             title={`slot ${device.slot} - ${device.state}`}
                           >
                             {device.device}
@@ -689,7 +689,7 @@ const AgentMachineRaidCell: Component<{
                         )}
                       </For>
                       <Show when={devices().length > 12}>
-                        <span class="rounded border border-border px-1.5 py-0.5 text-[9px] text-muted">
+                        <span class="rounded-sm border border-border px-1.5 py-0.5 text-[9px] text-muted">
                           +{devices().length - 12}
                         </span>
                       </Show>
@@ -759,7 +759,7 @@ const AgentMachineActionsCell: Component<{
         label={`Machine actions for ${props.name}`}
         tone="muted"
         size="sm"
-        class="min-h-11 min-w-11 sm:min-h-0 sm:min-w-0"
+        class="-my-2 min-h-11 min-w-11 sm:my-0 sm:min-h-0 sm:min-w-0"
         aria-haspopup="menu"
         aria-expanded={props.menuOpen ? 'true' : 'false'}
         onClick={(event) => {
@@ -777,7 +777,7 @@ const AgentMachineActionsCell: Component<{
             data-agent-machine-actions-root
             data-agent-machine-actions-menu
             role="menu"
-            class="fixed z-[9999] w-60 rounded-md border border-border bg-surface p-1 text-left shadow-lg"
+            class="fixed z-9999 w-60 rounded-md border border-border bg-surface p-1 text-left shadow-lg"
             style={{
               left: `${menuPosition().left}px`,
               top: `${menuPosition().top}px`,
@@ -792,7 +792,7 @@ const AgentMachineActionsCell: Component<{
             <button
               type="button"
               role="menuitem"
-              class="flex min-h-11 w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs font-medium text-red-600 transition-colors hover:bg-red-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500/60 disabled:cursor-not-allowed disabled:opacity-50 sm:min-h-0 dark:text-red-400 dark:hover:bg-red-950"
+              class="flex min-h-11 w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-xs font-medium text-red-600 transition-colors hover:bg-red-50 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-red-500/60 disabled:cursor-not-allowed disabled:opacity-50 sm:min-h-0 dark:text-red-400 dark:hover:bg-red-950/25"
               aria-label={props.confirmingRemoval ? confirmLabel() : removeLabel()}
               disabled={props.removing || !props.agentId}
               onClick={(event) => {
@@ -1139,7 +1139,7 @@ const AgentMachineSortableHead: Component<{
         {(sortKey) => (
           <button
             type="button"
-            class="-my-3 inline-flex min-h-11 max-w-full items-center gap-1 truncate py-3 hover:text-base-content focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60 sm:my-0 sm:min-h-0 sm:py-0"
+            class="-my-3 inline-flex min-h-11 max-w-full items-center gap-1 truncate py-3 hover:text-base-content focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500/60 sm:my-0 sm:min-h-0 sm:py-0"
             onClick={() => props.onSort(sortKey())}
             aria-label={`Sort by ${props.column.label}`}
           >
diff --git a/frontend-modern/src/features/standalone/AvailabilityFleetView.tsx b/frontend-modern/src/features/standalone/AvailabilityFleetView.tsx
index 8315ea08f8..8d84173d13 100644
--- a/frontend-modern/src/features/standalone/AvailabilityFleetView.tsx
+++ b/frontend-modern/src/features/standalone/AvailabilityFleetView.tsx
@@ -106,7 +106,7 @@ const AvailabilityStateStrip: Component<{ buckets: readonly AvailabilityHistoryB
   });
   return (
     <div
-      class="flex h-3 w-full overflow-hidden rounded-sm bg-slate-200 dark:bg-slate-700"
+      class="flex h-3 w-full overflow-hidden rounded-xs bg-slate-200 dark:bg-slate-700"
       role="img"
       aria-label={`24-hour state history: ${description() || 'no observations'}`}
       data-testid="availability-state-strip"
@@ -173,13 +173,13 @@ export const AvailabilityFleetView: Component<{
 
   return (
     <section aria-label="Availability fleet" class="space-y-3">
-      <div class="flex flex-wrap items-center justify-between gap-2 rounded-md border border-border bg-surface-alt/40 px-3 py-2 text-xs text-muted">
+      <div class="flex flex-wrap items-center justify-between gap-2 rounded-md border border-border px-3 py-2 text-xs text-muted">
         <div class="flex flex-wrap items-center gap-x-3 gap-y-1" aria-label="State history legend">
           <For each={Object.values(statePresentation)}>
             {(presentation) => (
               <span class="inline-flex items-center gap-1.5">
                 <span
-                  class={`h-2.5 w-2.5 rounded-sm ${presentation.className}`}
+                  class={`h-2.5 w-2.5 rounded-xs ${presentation.className}`}
                   aria-hidden="true"
                 />
                 {presentation.label}
@@ -239,7 +239,7 @@ export const AvailabilityFleetView: Component<{
             return (
               <button
                 type="button"
-                class="group min-w-0 rounded-md border border-border bg-surface p-3 text-left shadow-sm transition hover:border-blue-400/60 hover:bg-surface-hover focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500"
+                class="group min-w-0 rounded-md border border-border bg-surface p-3 text-left shadow-xs transition hover:border-blue-400/60 hover:bg-surface-hover focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500"
                 aria-label={`Open details for ${resource.name}`}
                 data-availability-fleet-tile={resource.id}
                 onClick={() => setSelectedResource(resource)}
@@ -285,7 +285,7 @@ export const AvailabilityFleetView: Component<{
                     when={!props.historyLoading}
                     fallback={
                       <div
-                        class="h-3 animate-pulse rounded-sm bg-surface-hover"
+                        class="h-3 animate-pulse rounded-xs bg-surface-hover"
                         aria-label="Loading history"
                       />
                     }
diff --git a/frontend-modern/src/features/standalone/StandalonePageSurface.tsx b/frontend-modern/src/features/standalone/StandalonePageSurface.tsx
index 32acabab08..806407c6d2 100644
--- a/frontend-modern/src/features/standalone/StandalonePageSurface.tsx
+++ b/frontend-modern/src/features/standalone/StandalonePageSurface.tsx
@@ -96,7 +96,7 @@ const StandalonePostureCard: Component<{
     <section
       aria-label={`${props.label} status`}
       data-testid="standalone-posture-summary"
-      class="flex flex-col gap-3 rounded-md border border-border bg-surface-alt/50 px-3 py-3 sm:flex-row sm:items-center sm:justify-between"
+      class="flex flex-col gap-3 rounded-md border border-border px-3 py-3 sm:flex-row sm:items-center sm:justify-between"
     >
       <div class="min-w-0">
         <div class="flex flex-wrap items-center gap-2">
diff --git a/frontend-modern/src/features/storageBackups/__tests__/storageDomain.test.ts b/frontend-modern/src/features/storageBackups/__tests__/storageDomain.test.ts
index e4c9eac62f..e2c00e8b7b 100644
--- a/frontend-modern/src/features/storageBackups/__tests__/storageDomain.test.ts
+++ b/frontend-modern/src/features/storageBackups/__tests__/storageDomain.test.ts
@@ -12,13 +12,13 @@ import {
 } from '@/features/storageBackups/storageDomain';
 
 const CEPH_HEALTH_OK_STYLES =
-  'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300 border border-green-200 dark:border-green-800';
+  'bg-green-100 text-green-700 dark:bg-green-900/25 dark:text-green-300 border border-green-200 dark:border-green-800';
 const CEPH_HEALTH_WARNING_STYLES =
-  'bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-200 border border-yellow-300 dark:border-yellow-800';
+  'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/25 dark:text-yellow-200 border border-yellow-300 dark:border-yellow-800';
 const CEPH_HEALTH_CRITICAL_STYLES =
-  'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-200 border border-red-300 dark:border-red-800';
+  'bg-red-100 text-red-700 dark:bg-red-900/25 dark:text-red-200 border border-red-300 dark:border-red-800';
 const CEPH_HEALTH_DEFAULT_STYLES =
-  'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-200 border border-blue-200 dark:border-blue-700';
+  'bg-blue-100 text-blue-700 dark:bg-blue-900/25 dark:text-blue-200 border border-blue-200 dark:border-blue-700';
 const CEPH_SERVICE_OK_TEXT = 'text-green-600 dark:text-green-400';
 const CEPH_SERVICE_WARNING_TEXT = 'text-yellow-600 dark:text-yellow-400';
 const CEPH_SERVICE_CRITICAL_TEXT = 'text-red-600 dark:text-red-400';
diff --git a/frontend-modern/src/features/storageBackups/__tests__/storageFilterPresentation.test.ts b/frontend-modern/src/features/storageBackups/__tests__/storageFilterPresentation.test.ts
index 42ca760177..8e67665437 100644
--- a/frontend-modern/src/features/storageBackups/__tests__/storageFilterPresentation.test.ts
+++ b/frontend-modern/src/features/storageBackups/__tests__/storageFilterPresentation.test.ts
@@ -16,7 +16,7 @@ describe('storage filter presentation', () => {
   it('centralizes storage sort-direction semantics', () => {
     expect(STORAGE_FILTER_SORT_SELECT_CLASS).toContain('focus:ring-blue-500');
     expect(STORAGE_FILTER_SORT_DIRECTION_BUTTON_CLASS).toContain('hover:bg-surface-hover');
-    expect(STORAGE_FILTER_COMPACT_SELECT_CLASS).toBe('min-w-[8rem]');
+    expect(STORAGE_FILTER_COMPACT_SELECT_CLASS).toBe('min-w-32');
     expect(STORAGE_FILTER_SEGMENTED_WRAP_CLASS).toContain('overflow-x-auto');
     expect(STORAGE_FILTER_SORT_WRAP_CLASS).toContain('gap-1.5');
     expect(STORAGE_FILTER_SORT_ICON_CLASS).toContain('transition-transform');
diff --git a/frontend-modern/src/features/storageBackups/__tests__/storageRowAlertPresentation.branchcov0713.test.ts b/frontend-modern/src/features/storageBackups/__tests__/storageRowAlertPresentation.branchcov0713.test.ts
index 1f8edace56..2dd55df24f 100644
--- a/frontend-modern/src/features/storageBackups/__tests__/storageRowAlertPresentation.branchcov0713.test.ts
+++ b/frontend-modern/src/features/storageBackups/__tests__/storageRowAlertPresentation.branchcov0713.test.ts
@@ -64,7 +64,7 @@ describe('getStorageRowAlertPresentation branch coverage', () => {
     );
 
     expect(result.rowClass).toContain('bg-yellow-50');
-    expect(result.rowClass).toContain('dark:bg-yellow-950');
+    expect(result.rowClass).toContain('dark:bg-yellow-950/25');
     expect(result.rowClass).toContain('shadow-[inset_4px_0_0_0_#eab308]');
     // The critical classes must NOT appear on the warning arm.
     expect(result.rowClass).not.toContain('bg-red-50');
@@ -133,7 +133,7 @@ describe('getStorageRowAlertPresentation branch coverage', () => {
     );
 
     expect(result.rowClass).toContain('bg-blue-50');
-    expect(result.rowClass).toContain('dark:bg-blue-900');
+    expect(result.rowClass).toContain('dark:bg-blue-900/25');
     expect(result.rowClass).toContain('ring-1');
     expect(result.rowClass).toContain('ring-blue-300');
     expect(result.rowClass).toContain('dark:ring-blue-600');
diff --git a/frontend-modern/src/features/storageBackups/detailPresentation.ts b/frontend-modern/src/features/storageBackups/detailPresentation.ts
index 2aa6c2d141..1f0337a463 100644
--- a/frontend-modern/src/features/storageBackups/detailPresentation.ts
+++ b/frontend-modern/src/features/storageBackups/detailPresentation.ts
@@ -1,6 +1,6 @@
 import { INFO_CARD_FRAME_CLASS } from '@/components/shared/InfoCardFrame';
 
-export const STORAGE_DETAIL_CARD_CLASS = 'rounded-md border border-border bg-surface p-3 shadow-sm';
+export const STORAGE_DETAIL_CARD_CLASS = 'rounded-md border border-border bg-surface p-3 shadow-xs';
 
 export const STORAGE_DETAIL_SECTION_TITLE_CLASS = 'text-xs font-semibold text-base-content';
 
@@ -11,13 +11,13 @@ export const STORAGE_DETAIL_INLINE_LABEL_CLASS =
   'text-[10px] font-medium text-muted uppercase tracking-wide';
 
 export const STORAGE_DETAIL_BADGE_CLASS =
-  'text-[10px] font-normal text-slate-400 bg-surface-alt px-1.5 py-0.5 rounded';
+  'text-[10px] font-normal text-slate-400 bg-surface-alt px-1.5 py-0.5 rounded-sm';
 
 export const STORAGE_DETAIL_META_ROW_CLASS =
   'flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px]';
 
 export const STORAGE_DETAIL_MONO_CHIP_CLASS =
-  'text-muted font-mono bg-surface-alt px-1.5 py-0.5 rounded border border-border';
+  'text-muted font-mono bg-surface-alt px-1.5 py-0.5 rounded-sm border border-border';
 
 export const STORAGE_DETAIL_CONFIG_GRID_CLASS = 'grid grid-cols-2 gap-x-4 gap-y-1.5 text-[11px]';
 export const STORAGE_DETAIL_ROW_CLASS = 'border-t border-border';
@@ -31,9 +31,8 @@ export const STORAGE_DETAIL_VALUE_CLASS = 'text-base-content font-medium';
 
 export const STORAGE_DETAIL_LINKED_DISK_ROW_CLASS =
   'flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px] py-0.5';
-export const STORAGE_DETAIL_LINKED_DISK_PATH_CLASS = 'font-mono text-muted min-w-[4rem] truncate';
-export const STORAGE_DETAIL_LINKED_DISK_MODEL_CLASS =
-  'text-base-content min-w-[8rem] flex-1 truncate';
+export const STORAGE_DETAIL_LINKED_DISK_PATH_CLASS = 'font-mono text-muted min-w-16 truncate';
+export const STORAGE_DETAIL_LINKED_DISK_MODEL_CLASS = 'text-base-content min-w-32 flex-1 truncate';
 export const STORAGE_DETAIL_SPACED_STACK_CLASS = 'space-y-3';
 export const STORAGE_DETAIL_FULL_WIDTH_ROW_CLASS = 'col-span-2';
 export const STORAGE_DETAIL_MUTED_TEXT_CLASS = 'text-muted';
@@ -47,9 +46,9 @@ export const STORAGE_DISK_DETAIL_MODEL_CLASS = 'font-semibold text-base-content
 export const STORAGE_DISK_DETAIL_SERIAL_CLASS = 'font-mono';
 export const STORAGE_DISK_DETAIL_NODE_CLASS = 'text-muted';
 export const STORAGE_DISK_DETAIL_ATTRIBUTE_GRID_CLASS =
-  'flex flex-wrap gap-3 [&>*]:flex-1 [&>*]:basis-[calc(16.666%-0.5rem)] [&>*]:min-w-[120px]';
+  'flex flex-wrap gap-3 *:flex-1 *:basis-[calc(16.666%-0.5rem)] *:min-w-[120px]';
 export const STORAGE_DISK_DETAIL_SECTION_CLASS = 'space-y-2';
 export const STORAGE_DISK_DETAIL_LIVE_GRID_CLASS = 'grid grid-cols-1 sm:grid-cols-3 gap-3';
 export const STORAGE_DISK_DETAIL_HISTORY_GRID_CLASS =
-  'flex flex-wrap gap-3 [&>*]:flex-1 [&>*]:basis-[calc(33.333%-0.5rem)] [&>*]:min-w-[250px]';
+  'flex flex-wrap gap-3 *:flex-1 *:basis-[calc(33.333%-0.5rem)] *:min-w-[250px]';
 export const STORAGE_DISK_DETAIL_SECTION_HEADING_CLASS = 'flex items-center gap-2';
diff --git a/frontend-modern/src/features/storageBackups/diskPresentation.ts b/frontend-modern/src/features/storageBackups/diskPresentation.ts
index 9cf9707e53..38d3516395 100644
--- a/frontend-modern/src/features/storageBackups/diskPresentation.ts
+++ b/frontend-modern/src/features/storageBackups/diskPresentation.ts
@@ -86,23 +86,23 @@ export const PHYSICAL_DISK_EMPTY_FALLBACK_CLASS =
   'mt-4 rounded-md border border-border bg-surface-alt p-4 text-left';
 export const PHYSICAL_DISK_EMPTY_FALLBACK_TEXT_CLASS = 'text-sm text-muted';
 export const PHYSICAL_DISK_EMPTY_REQUIREMENTS_CLASS =
-  'mt-4 rounded-md border border-blue-200 bg-blue-50 p-4 text-left dark:border-blue-800 dark:bg-blue-900';
+  'mt-4 rounded-md border border-blue-200 bg-blue-50 p-4 text-left dark:border-blue-800 dark:bg-blue-900/25';
 export const PHYSICAL_DISK_EMPTY_REQUIREMENTS_TITLE_CLASS =
-  'mb-2 text-sm font-medium text-blue-900 dark:text-blue-100';
+  'mb-2 text-sm font-medium text-blue-900/25 dark:text-blue-100';
 export const PHYSICAL_DISK_EMPTY_REQUIREMENTS_LIST_CLASS =
   'ml-4 list-decimal space-y-1.5 text-xs text-blue-800 dark:text-blue-200';
 export const PHYSICAL_DISK_EMPTY_REQUIREMENTS_NOTE_CLASS =
   'mt-3 text-xs italic text-blue-700 dark:text-blue-300';
 
 const PHYSICAL_DISK_TABLE_HEADER_CLASS =
-  'overflow-hidden text-ellipsis whitespace-nowrap px-1 sm:px-1.5 lg:px-2 py-0.5 text-left text-[10px] sm:text-[11px] lg:text-xs font-medium uppercase tracking-wider';
+  'overflow-hidden text-ellipsis whitespace-nowrap px-1 sm:px-1.5 lg:px-2 py-0.5 text-left text-[10px] lg:text-xs font-medium uppercase tracking-wider';
 
 export const PHYSICAL_DISK_TABLE_CLASS = 'platform-table w-full table-fixed text-xs';
 export const PHYSICAL_DISK_TABLE_HEADER_ROW_CLASS =
   'border-b border-border bg-surface-alt text-muted';
 export const PHYSICAL_DISK_TABLE_BODY_CLASS = 'divide-y divide-border';
 export const PHYSICAL_DISK_TABLE_ROW_CLASS = 'cursor-pointer transition-colors';
-export const PHYSICAL_DISK_TABLE_ROW_SELECTED_CLASS = 'bg-blue-50 dark:bg-blue-900';
+export const PHYSICAL_DISK_TABLE_ROW_SELECTED_CLASS = 'bg-blue-50 dark:bg-blue-900/25';
 export const PHYSICAL_DISK_TABLE_ROW_HOVER_CLASS = 'hover:bg-surface-hover';
 export const PHYSICAL_DISK_TABLE_ROW_STYLE = { height: '32px' } as const;
 export const PHYSICAL_DISK_DETAIL_ROW_CELL_CLASS =
diff --git a/frontend-modern/src/features/storageBackups/groupPresentation.ts b/frontend-modern/src/features/storageBackups/groupPresentation.ts
index 638ef04dc5..5e05d49cf6 100644
--- a/frontend-modern/src/features/storageBackups/groupPresentation.ts
+++ b/frontend-modern/src/features/storageBackups/groupPresentation.ts
@@ -27,8 +27,8 @@ export const STORAGE_GROUP_ROW_CLASS = getInteractiveGroupedTableRowClass('borde
 export const STORAGE_GROUP_ROW_CELL_CLASS = getGroupedTableRowCellClass();
 export const STORAGE_GROUP_ROW_CONTENT_CLASS = 'flex items-center gap-3';
 export const STORAGE_GROUP_ROW_LABEL_CLASS =
-  'text-[11px] font-semibold text-base-content w-[140px] flex-shrink-0 truncate';
-export const STORAGE_GROUP_ROW_USAGE_WRAP_CLASS = 'w-48 flex-shrink-0 hidden sm:block';
+  'text-[11px] font-semibold text-base-content w-[140px] shrink-0 truncate';
+export const STORAGE_GROUP_ROW_USAGE_WRAP_CLASS = 'w-48 shrink-0 hidden sm:block';
 export const STORAGE_GROUP_ROW_USAGE_LABEL_CLASS =
   'text-xs font-medium text-muted hidden sm:inline';
 export const STORAGE_GROUP_ROW_POOL_COUNT_CLASS = 'text-xs text-muted whitespace-nowrap';
@@ -36,7 +36,7 @@ export const STORAGE_GROUP_ROW_HEALTH_WRAP_CLASS = 'flex items-center gap-1.5 ml
 export const STORAGE_GROUP_ROW_HEALTH_ITEM_CLASS = 'flex items-center gap-0.5';
 export const STORAGE_GROUP_ROW_HEALTH_COUNT_CLASS = 'text-[10px]';
 export const STORAGE_GROUP_ROW_CHEVRON_BASE_CLASS =
-  'w-3.5 h-3.5 text-muted transition-transform duration-150 flex-shrink-0';
+  'w-3.5 h-3.5 text-muted transition-transform duration-150 shrink-0';
 export const STORAGE_GROUP_ROW_HEALTH_DOT_CLASS = 'w-2 h-2 rounded-full';
 
 const STORAGE_GROUP_HEALTH_ORDER: NormalizedHealth[] = [
diff --git a/frontend-modern/src/features/storageBackups/storageDomain.ts b/frontend-modern/src/features/storageBackups/storageDomain.ts
index 92e1660807..d783f6ca64 100644
--- a/frontend-modern/src/features/storageBackups/storageDomain.ts
+++ b/frontend-modern/src/features/storageBackups/storageDomain.ts
@@ -1,13 +1,13 @@
 const CEPH_TYPE_SET = new Set(['rbd', 'cephfs', 'ceph']);
 
 const CEPH_HEALTH_OK_STYLES =
-  'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300 border border-green-200 dark:border-green-800';
+  'bg-green-100 text-green-700 dark:bg-green-900/25 dark:text-green-300 border border-green-200 dark:border-green-800';
 const CEPH_HEALTH_WARNING_STYLES =
-  'bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-200 border border-yellow-300 dark:border-yellow-800';
+  'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/25 dark:text-yellow-200 border border-yellow-300 dark:border-yellow-800';
 const CEPH_HEALTH_CRITICAL_STYLES =
-  'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-200 border border-red-300 dark:border-red-800';
+  'bg-red-100 text-red-700 dark:bg-red-900/25 dark:text-red-200 border border-red-300 dark:border-red-800';
 const CEPH_HEALTH_DEFAULT_STYLES =
-  'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-200 border border-blue-200 dark:border-blue-700';
+  'bg-blue-100 text-blue-700 dark:bg-blue-900/25 dark:text-blue-200 border border-blue-200 dark:border-blue-700';
 const CEPH_SERVICE_OK_TEXT = 'text-green-600 dark:text-green-400';
 const CEPH_SERVICE_WARNING_TEXT = 'text-yellow-600 dark:text-yellow-400';
 const CEPH_SERVICE_CRITICAL_TEXT = 'text-red-600 dark:text-red-400';
diff --git a/frontend-modern/src/features/storageBackups/storageFilterPresentation.ts b/frontend-modern/src/features/storageBackups/storageFilterPresentation.ts
index 3be5ad9135..0630fbab73 100644
--- a/frontend-modern/src/features/storageBackups/storageFilterPresentation.ts
+++ b/frontend-modern/src/features/storageBackups/storageFilterPresentation.ts
@@ -14,7 +14,7 @@ export const STORAGE_FILTER_SORT_DIRECTION_BUTTON_CLASS =
   'inline-flex items-center justify-center h-7 w-7 rounded-md border border-border text-muted hover:bg-surface-hover transition-colors';
 
 export const STORAGE_FILTER_SEGMENTED_WRAP_CLASS = 'max-w-full overflow-x-auto scrollbar-hide';
-export const STORAGE_FILTER_COMPACT_SELECT_CLASS = 'min-w-[8rem]';
+export const STORAGE_FILTER_COMPACT_SELECT_CLASS = 'min-w-32';
 export const STORAGE_FILTER_SORT_WRAP_CLASS = 'flex items-center gap-1.5';
 export const STORAGE_FILTER_SORT_ICON_CLASS = 'h-4 w-4 transition-transform';
 export const STORAGE_FILTER_RESET_ACTION_CLASS = 'text-base-content';
diff --git a/frontend-modern/src/features/storageBackups/storagePagePresentation.ts b/frontend-modern/src/features/storageBackups/storagePagePresentation.ts
index 6d1d641452..87652660c1 100644
--- a/frontend-modern/src/features/storageBackups/storagePagePresentation.ts
+++ b/frontend-modern/src/features/storageBackups/storagePagePresentation.ts
@@ -64,7 +64,7 @@ export const getStoragePoolColumnWidthPercent = (
 ): number => STORAGE_POOL_COLUMN_WIDTHS[layout][columnId] ?? 0;
 
 const STORAGE_POOL_TABLE_HEADER_CLASS =
-  'overflow-hidden text-ellipsis whitespace-nowrap text-[10px] sm:text-[11px] lg:text-xs uppercase tracking-wider';
+  'overflow-hidden text-ellipsis whitespace-nowrap text-[10px] lg:text-xs uppercase tracking-wider';
 
 export const STORAGE_VIEW_OPTIONS: readonly StorageViewOption[] = [
   { value: 'pools', label: 'Storage' },
diff --git a/frontend-modern/src/features/storageBackups/storageRowAlertPresentation.ts b/frontend-modern/src/features/storageBackups/storageRowAlertPresentation.ts
index 3ec31127fd..0fbbf91e97 100644
--- a/frontend-modern/src/features/storageBackups/storageRowAlertPresentation.ts
+++ b/frontend-modern/src/features/storageBackups/storageRowAlertPresentation.ts
@@ -27,8 +27,8 @@ export const getStorageRowAlertPresentation = (options: {
   if (showAlertHighlight) {
     classes.push(
       options.alertState.severity === 'critical'
-        ? 'bg-red-50 dark:bg-red-950'
-        : 'bg-yellow-50 dark:bg-yellow-950',
+        ? 'bg-red-50 dark:bg-red-950/25'
+        : 'bg-yellow-50 dark:bg-yellow-950/25',
     );
     classes.push(
       options.alertState.severity === 'critical'
@@ -36,7 +36,7 @@ export const getStorageRowAlertPresentation = (options: {
         : STORAGE_ROW_WARNING_ALERT_ACCENT_CLASS,
     );
   } else if (options.isResourceHighlighted) {
-    classes.push('bg-blue-50 dark:bg-blue-900 ring-1 ring-blue-300 dark:ring-blue-600');
+    classes.push('bg-blue-50 dark:bg-blue-900/25 ring-1 ring-blue-300 dark:ring-blue-600');
   } else if (hasAcknowledgedOnlyAlert) {
     classes.push('bg-surface-alt', STORAGE_ROW_ACKNOWLEDGED_ALERT_ACCENT_CLASS);
   }
diff --git a/frontend-modern/src/features/storageBackups/zfsPresentation.ts b/frontend-modern/src/features/storageBackups/zfsPresentation.ts
index 93a1436fd5..78cd344827 100644
--- a/frontend-modern/src/features/storageBackups/zfsPresentation.ts
+++ b/frontend-modern/src/features/storageBackups/zfsPresentation.ts
@@ -24,4 +24,4 @@ export const getZfsPoolStateTextClass = (hasErrors: boolean): string =>
   hasErrors ? 'text-red-400 font-bold' : 'text-green-400';
 
 export const getZfsPoolErrorOverlayClass = (hasErrors: boolean): string =>
-  hasErrors ? 'absolute inset-0 rounded border-2 border-red-500 animate-pulse' : '';
+  hasErrors ? 'absolute inset-0 rounded-sm border-2 border-red-500 animate-pulse' : '';
diff --git a/frontend-modern/src/features/truenas/TrueNASAppsTable.tsx b/frontend-modern/src/features/truenas/TrueNASAppsTable.tsx
index d2d1cec0c7..83da658544 100644
--- a/frontend-modern/src/features/truenas/TrueNASAppsTable.tsx
+++ b/frontend-modern/src/features/truenas/TrueNASAppsTable.tsx
@@ -108,14 +108,14 @@ const UpdatePills: Component<{ app: ResourceTrueNASAppMeta | undefined }> = (pro
       <Show
         when={hasAppUpdate() || hasImageUpdate()}
         fallback={
-          <span class="rounded border border-border px-1.5 py-0.5 text-[10px] font-medium text-muted">
+          <span class="rounded-sm border border-border px-1.5 py-0.5 text-[10px] font-medium text-muted">
             Current
           </span>
         }
       >
         <Show when={hasAppUpdate()}>
           <span
-            class="rounded border border-amber-300/50 bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-medium text-amber-700 dark:text-amber-300"
+            class="rounded-sm border border-amber-300/50 bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-medium text-amber-700 dark:text-amber-300"
             title="App update available"
           >
             <PlatformResponsiveTableLabel compact="A" full="App" />
@@ -123,7 +123,7 @@ const UpdatePills: Component<{ app: ResourceTrueNASAppMeta | undefined }> = (pro
         </Show>
         <Show when={hasImageUpdate()}>
           <span
-            class="rounded border border-blue-300/50 bg-blue-500/10 px-1.5 py-0.5 text-[10px] font-medium text-blue-700 dark:text-blue-300"
+            class="rounded-sm border border-blue-300/50 bg-blue-500/10 px-1.5 py-0.5 text-[10px] font-medium text-blue-700 dark:text-blue-300"
             title="Image update available"
           >
             <PlatformResponsiveTableLabel compact="I" full="Image" />
diff --git a/frontend-modern/src/features/truenas/TrueNASServicesTable.tsx b/frontend-modern/src/features/truenas/TrueNASServicesTable.tsx
index d83c25202a..fe138fd4f4 100644
--- a/frontend-modern/src/features/truenas/TrueNASServicesTable.tsx
+++ b/frontend-modern/src/features/truenas/TrueNASServicesTable.tsx
@@ -340,7 +340,7 @@ export const TrueNASServicesTable: Component<{
                             <span
                               class={`inline-flex rounded-full border px-2 py-0.5 text-[11px] font-medium ${
                                 row.service.enabled
-                                  ? 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-300'
+                                  ? 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950/25 dark:text-emerald-300'
                                   : 'border-border bg-surface-alt text-muted'
                               }`}
                             >
diff --git a/frontend-modern/src/features/truenas/TrueNASSystemsTable.tsx b/frontend-modern/src/features/truenas/TrueNASSystemsTable.tsx
index 91cf61cea2..c0e18d4780 100644
--- a/frontend-modern/src/features/truenas/TrueNASSystemsTable.tsx
+++ b/frontend-modern/src/features/truenas/TrueNASSystemsTable.tsx
@@ -349,8 +349,8 @@ export const TrueNASSystemsTable: Component<{
                       const s = sysAlertStyles();
                       if (!s.hasUnacknowledgedAlert) return '';
                       return s.severity === 'critical'
-                        ? 'bg-red-50 dark:bg-red-950'
-                        : 'bg-yellow-50 dark:bg-yellow-950';
+                        ? 'bg-red-50 dark:bg-red-950/25'
+                        : 'bg-yellow-50 dark:bg-yellow-950/25';
                     };
                     return (
                       <>
diff --git a/frontend-modern/src/features/vmware/VmwarePageSurface.tsx b/frontend-modern/src/features/vmware/VmwarePageSurface.tsx
index aaf03ed15e..704ad5107e 100644
--- a/frontend-modern/src/features/vmware/VmwarePageSurface.tsx
+++ b/frontend-modern/src/features/vmware/VmwarePageSurface.tsx
@@ -120,7 +120,7 @@ function VmwareInventoryCompletenessNotice(props: {
   return (
     <Show when={props.error || degradedSources().length > 0}>
       <div
-        class="rounded-sm border border-amber-300 bg-amber-50/70 px-3 py-2.5 text-sm text-amber-950 dark:border-amber-900/70 dark:bg-amber-950/20 dark:text-amber-100"
+        class="rounded-xs border border-amber-300 bg-amber-50/70 px-3 py-2.5 text-sm text-amber-950/25 dark:border-amber-900/70 dark:bg-amber-950/20 dark:text-amber-100"
         data-testid="vmware-inventory-completeness-notice"
       >
         <div class="flex items-start gap-2">
diff --git a/frontend-modern/src/features/vmware/VsphereHostsTable.tsx b/frontend-modern/src/features/vmware/VsphereHostsTable.tsx
index 268cb4cc1c..aadbe5d836 100644
--- a/frontend-modern/src/features/vmware/VsphereHostsTable.tsx
+++ b/frontend-modern/src/features/vmware/VsphereHostsTable.tsx
@@ -378,8 +378,8 @@ export const VsphereHostsTable: Component<{
                       const s = hostAlertStyles();
                       if (!s.hasUnacknowledgedAlert) return '';
                       return s.severity === 'critical'
-                        ? 'bg-red-50 dark:bg-red-950'
-                        : 'bg-yellow-50 dark:bg-yellow-950';
+                        ? 'bg-red-50 dark:bg-red-950/25'
+                        : 'bg-yellow-50 dark:bg-yellow-950/25';
                     };
                     return (
                       <>
@@ -503,7 +503,7 @@ export const VsphereHostsTable: Component<{
                           <TableCell
                             class={`${getPlatformTableCellClassForKind('text')} hidden font-mono text-[11px] text-base-content md:table-cell`}
                           >
-                            <span class="inline-block max-w-[12rem] truncate" title={vcenter()}>
+                            <span class="inline-block max-w-48 truncate" title={vcenter()}>
                               {vcenter()}
                             </span>
                           </TableCell>
diff --git a/frontend-modern/src/index.css b/frontend-modern/src/index.css
index bb3365a7dc..e241a60808 100644
--- a/frontend-modern/src/index.css
+++ b/frontend-modern/src/index.css
@@ -1,114 +1,231 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/*
+ * Tailwind CSS v4 entry point.
+ *
+ * The cascade is arranged to render exactly as the Tailwind v3 build did.
+ * v3 emitted one flat stylesheet, so a component rule with a more specific
+ * selector (for example the container-aware table-cell rules below) beat a
+ * plain utility. v4 uses native cascade layers, where any utility beats any
+ * rule in an earlier layer regardless of specificity. To keep the v3 contract
+ * the former `@layer components` rules and the former unlayered rules live in
+ * the utilities layer, before and after the generated utilities respectively.
+ */
+@layer theme, base, components, utilities;
+
+@import 'tailwindcss/theme.css' layer(theme);
+@import './tailwind-palette.css';
+@import 'tailwindcss/preflight.css' layer(base);
+
+@plugin '@tailwindcss/typography';
+
+@source '../index.html';
+@source './**/*.{js,ts,jsx,tsx}';
+
+/* v3 class-strategy dark mode, including its selector specificity. */
+@custom-variant dark (&:is(.dark *));
+
+/* v3 applied hover styles on touch devices too; v4 limits them to
+   hover-capable pointers unless the variant is redefined. */
+@custom-variant hover (&:hover);
 
 /*
- * Respect the operating-system motion preference across the whole product.
- * Keep animations technically present for components that depend on their
- * completion state, but finish them immediately and prevent repeated motion.
- * This also covers Tailwind animation/transition utilities and future shared
- * primitives instead of requiring every call site to remember an override.
+ * v3 spacing between children: the margin goes on every visible child after
+ * the first and overrides that child's own margin utilities. v4 instead puts
+ * a zero-specificity margin on every child but the last, which lets a child's
+ * own margin win and moves the gap when the last child is not rendered. The
+ * v4 rules are neutralised after the generated utilities below.
  */
-@media (prefers-reduced-motion: reduce) {
-  html:focus-within {
-    scroll-behavior: auto;
-  }
-
-  *,
-  *::before,
-  *::after {
-    scroll-behavior: auto !important;
-    animation-duration: 0.01ms !important;
-    animation-delay: 0ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    transition-delay: 0ms !important;
+@utility space-y-* {
+  & > :not([hidden]) ~ :not([hidden]) {
+    margin-top: --spacing(--value(number));
+    margin-bottom: 0;
   }
 }
 
-/*
- * Neutralize a Tailwind color/font-size collision: the dead `base` alias in
- * the color palette was making Tailwind emit `color: var(--color-bg-base)` on
- * `.text-base` / `.sm\:text-base`, painting text the same color as the
- * background. The alias has been removed from tailwind.config.js; this rule
- * keeps things visible until the next dev-server restart picks up that change.
- */
-@layer utilities {
-  .text-base,
-  .sm\:text-base,
-  .md\:text-base,
-  .lg\:text-base,
-  .xl\:text-base,
-  .\32xl\:text-base {
-    color: inherit;
-  }
-
-  .view-options-grid > * [role='group'] > button {
-    box-sizing: border-box;
-    height: 1.75rem;
-    min-height: 1.75rem;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-
-  .view-options-grid > * > :last-child:not([role='group']) > button {
-    box-sizing: border-box;
-    width: 100%;
-    height: 2rem;
-    min-height: 2rem;
-  }
-
-  @media (max-width: 640px) {
-    .view-options-grid > * [role='group'] > button {
-      height: 2.5rem;
-      min-height: 2.5rem;
-    }
-
-    .view-options-grid > * > :last-child:not([role='group']) > button {
-      height: 2.75rem;
-      min-height: 2.75rem;
-    }
+@utility space-x-* {
+  & > :not([hidden]) ~ :not([hidden]) {
+    margin-right: 0;
+    margin-left: --spacing(--value(number));
   }
 }
 
-/* Update banner animation */
-@keyframes slideDown {
-  from {
-    transform: translateY(-100%);
-    opacity: 0;
-  }
-
-  to {
-    transform: translateY(0);
-    opacity: 1;
+/* v3 dividers follow the same rule: the border sits on every visible child
+   after the first and overrides that child's own border width and color. */
+@utility divide-y {
+  & > :not([hidden]) ~ :not([hidden]) {
+    border-top-width: 1px;
+    border-bottom-width: 0;
   }
 }
 
-.animate-slideDown {
+@utility divide-y-0 {
+  & > :not([hidden]) ~ :not([hidden]) {
+    border-top-width: 0;
+    border-bottom-width: 0;
+  }
+}
+
+@utility divide-x {
+  & > :not([hidden]) ~ :not([hidden]) {
+    border-right-width: 0;
+    border-left-width: 1px;
+  }
+}
+
+@utility divide-* {
+  & > :not([hidden]) ~ :not([hidden]) {
+    border-color: --value(--color-*);
+    border-color: --alpha(--value(--color-*) / calc(--modifier(integer) * 1%));
+  }
+}
+
+/* Pulse helpers, declared as utilities so responsive and state variants
+   (for example xl:pb-0 next to pb-safe-or-14) override them as in v3. */
+@utility pb-safe {
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+}
+
+@utility pb-safe-or-14 {
+  padding-bottom: max(3.5rem, env(safe-area-inset-bottom, 3.5rem));
+}
+
+@utility scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@utility animate-slideDown {
   animation: slideDown 0.3s ease-out;
 }
 
-/* Notification animations */
-@keyframes slide-in-card {
-  from {
-    opacity: 0;
-    transform: translateX(100%) scale(0.95);
-    filter: blur(4px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateX(0) scale(1);
-    filter: blur(0);
-  }
-}
-
-.animate-slide-in-card {
+@utility animate-slide-in-card {
   animation: slide-in-card 0.5s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-/* Custom styles */
+@utility animate-fade-in {
+  animation: fade-in 0.6s ease-out forwards;
+}
+
+@utility animate-slide-up {
+  animation: slide-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
+}
+
+@utility animate-enter {
+  animation: enter 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
+}
+
+@theme {
+  --breakpoint-*: initial;
+  --breakpoint-xs: 400px;
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
+
+  /* v3 font stacks; v4.3 swapped system-ui for a named-font stack. */
+  --font-sans:
+    ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+    monospace;
+
+  /* v3 line heights are absolute, so text that only changes font-size (for
+     example text-[11px]) inherits the parent's line box unchanged. v4's
+     defaults are ratios, which would rescale it. */
+  --text-xs--line-height: 1rem;
+  --text-sm--line-height: 1.25rem;
+  --text-base--line-height: 1.5rem;
+  --text-lg--line-height: 1.75rem;
+  --text-xl--line-height: 1.75rem;
+  --text-2xl--line-height: 2rem;
+  --text-3xl--line-height: 2.25rem;
+  --text-4xl--line-height: 2.5rem;
+
+  /* v3 defaults: a bare ring is 3px and a ring without an explicit color
+     is translucent blue-500. */
+  --default-ring-width: 3px;
+  --default-ring-color: rgb(59 130 246 / 0.5);
+
+  --animate-spin-slow: spin 2s linear infinite;
+  --animate-fadeIn: fadeIn 0.2s ease-in;
+  --animate-slideInRight: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes slideInRight {
+    0% {
+      transform: translateX(100%);
+    }
+    100% {
+      transform: translateX(0);
+    }
+  }
+}
+
+/* Semantic design system colors, resolved at runtime from the CSS variables
+   defined in the base layer below. */
+@theme inline {
+  --color-surface: var(--color-bg-surface);
+  --color-surface-hover: var(--color-bg-surface-hover);
+  --color-surface-alt: var(--color-bg-surface-alt);
+  --color-border: var(--color-border-base);
+  --color-border-subtle: var(--color-border-subtle);
+  --color-base-content: var(--color-text-base);
+  --color-muted: var(--color-text-muted);
+}
+
 @layer base {
+  /*
+   * Tailwind v3 preflight behaviour that v4 changed: borders default to
+   * gray-200 rather than currentcolor, placeholders use gray-400, and buttons
+   * show the pointer cursor.
+   */
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+
+  input::placeholder,
+  textarea::placeholder {
+    color: var(--color-gray-400);
+  }
+
+  button,
+  [role='button'] {
+    cursor: pointer;
+  }
+
+  :disabled {
+    cursor: default;
+  }
+
+  /* v3 preflight reset margins and padding element by element and left table
+     cells and options with their browser padding; v4 zeroes every element. */
+  th,
+  td {
+    padding: 1px;
+  }
+
+  option,
+  optgroup {
+    padding: revert;
+  }
+
   :root {
     color-scheme: light;
 
@@ -121,14 +238,14 @@
     --pulse-panel-padding: clamp(0.75rem, 1.4vw, 1.25rem);
 
     /* Semantic Colors - Light Mode */
-    --color-bg-base: theme('colors.slate.100');
-    --color-bg-surface: theme('colors.white');
-    --color-bg-surface-hover: theme('colors.slate.50');
-    --color-bg-surface-alt: theme('colors.slate.100');
-    --color-border-subtle: theme('colors.slate.100');
-    --color-border-base: theme('colors.slate.200');
-    --color-text-base: theme('colors.slate.900');
-    --color-text-muted: theme('colors.slate.600');
+    --color-bg-base: var(--color-slate-100);
+    --color-bg-surface: var(--color-white);
+    --color-bg-surface-hover: var(--color-slate-50);
+    --color-bg-surface-alt: var(--color-slate-100);
+    --color-border-subtle: var(--color-slate-100);
+    --color-border-base: var(--color-slate-200);
+    --color-text-base: var(--color-slate-900);
+    --color-text-muted: var(--color-slate-600);
     --color-summary-row-bg: rgba(14, 165, 233, 0.05);
     --color-summary-row-bg-hover: rgba(14, 165, 233, 0.08);
     --color-summary-row-border: rgba(14, 165, 233, 0.16);
@@ -148,15 +265,15 @@
     color-scheme: dark;
 
     /* Semantic Colors - Dark Mode */
-    --color-bg-base: theme('colors.slate.900');
-    --color-bg-surface: theme('colors.slate.800');
-    --color-bg-surface-hover: theme('colors.slate.700');
-    --color-bg-surface-alt: theme('colors.slate.800');
+    --color-bg-base: var(--color-slate-900);
+    --color-bg-surface: var(--color-slate-800);
+    --color-bg-surface-hover: var(--color-slate-700);
+    --color-bg-surface-alt: var(--color-slate-800);
     /* Fallback */
-    --color-border-subtle: theme('colors.slate.800');
-    --color-border-base: theme('colors.slate.700');
-    --color-text-base: theme('colors.slate.100');
-    --color-text-muted: theme('colors.slate.400');
+    --color-border-subtle: var(--color-slate-800);
+    --color-border-base: var(--color-slate-700);
+    --color-text-base: var(--color-slate-100);
+    --color-text-muted: var(--color-slate-400);
     --color-summary-row-bg: rgba(56, 189, 248, 0.08);
     --color-summary-row-bg-hover: rgba(56, 189, 248, 0.12);
     --color-summary-row-border: rgba(56, 189, 248, 0.18);
@@ -220,46 +337,47 @@
      (e.g. the Assistant launcher tab) off the true screen edge. */
 }
 
-@layer components {
+@layer utilities {
+  /* Former v3 component rules: emitted before the generated utilities. */
   /* Assistant code-block syntax highlighting (highlight.js tokens).
      Chat code blocks always render on the dark prose-pre slate background,
      so a single readable-on-dark palette serves both app themes. */
   .prose pre code.hljs-highlighted .hljs-comment,
   .prose pre code.hljs-highlighted .hljs-quote {
-    color: theme('colors.slate.400');
+    color: var(--color-slate-400);
     font-style: italic;
   }
   .prose pre code.hljs-highlighted .hljs-keyword,
   .prose pre code.hljs-highlighted .hljs-selector-tag,
   .prose pre code.hljs-highlighted .hljs-literal,
   .prose pre code.hljs-highlighted .hljs-built_in {
-    color: theme('colors.violet.300');
+    color: var(--color-violet-300);
   }
   .prose pre code.hljs-highlighted .hljs-string,
   .prose pre code.hljs-highlighted .hljs-regexp,
   .prose pre code.hljs-highlighted .hljs-addition {
-    color: theme('colors.emerald.300');
+    color: var(--color-emerald-300);
   }
   .prose pre code.hljs-highlighted .hljs-number,
   .prose pre code.hljs-highlighted .hljs-symbol,
   .prose pre code.hljs-highlighted .hljs-bullet {
-    color: theme('colors.amber.300');
+    color: var(--color-amber-300);
   }
   .prose pre code.hljs-highlighted .hljs-title,
   .prose pre code.hljs-highlighted .hljs-section,
   .prose pre code.hljs-highlighted .hljs-name,
   .prose pre code.hljs-highlighted .hljs-function {
-    color: theme('colors.sky.300');
+    color: var(--color-sky-300);
   }
   .prose pre code.hljs-highlighted .hljs-attr,
   .prose pre code.hljs-highlighted .hljs-attribute,
   .prose pre code.hljs-highlighted .hljs-variable,
   .prose pre code.hljs-highlighted .hljs-template-variable {
-    color: theme('colors.cyan.300');
+    color: var(--color-cyan-300);
   }
   .prose pre code.hljs-highlighted .hljs-meta,
   .prose pre code.hljs-highlighted .hljs-deletion {
-    color: theme('colors.rose.300');
+    color: var(--color-rose-300);
   }
 
   .touch-scroll {
@@ -661,7 +779,7 @@
 
   /* Card styles */
   .card {
-    @apply bg-surface border border-border shadow-sm rounded-md;
+    @apply bg-surface border border-border shadow-xs rounded-md;
   }
 
   .table-row {
@@ -764,12 +882,13 @@
   }
 
   /* Form input — reusable base for text inputs, textareas, selects */
-  .form-input {
-    @apply w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-base-content focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
+  .form-input,
+  .form-select {
+    @apply w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-base-content focus:outline-hidden focus:border-blue-500 focus:ring-2 focus:ring-blue-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
   }
 
   .form-select {
-    @apply form-input pr-8 appearance-none;
+    @apply pr-8 appearance-none;
   }
 
   /* Progress bars */
@@ -817,11 +936,11 @@
   /* Custom scrollbar - subtle styling */
   .custom-scrollbar {
     scrollbar-width: thin;
-    scrollbar-color: theme('colors.gray.300') theme('colors.gray.100');
+    scrollbar-color: var(--color-gray-300) var(--color-gray-100);
   }
 
   .dark .custom-scrollbar {
-    scrollbar-color: theme('colors.gray.700') theme('colors.gray.800');
+    scrollbar-color: var(--color-gray-700) var(--color-gray-800);
   }
 
   .custom-scrollbar::-webkit-scrollbar {
@@ -830,635 +949,719 @@
   }
 
   .custom-scrollbar::-webkit-scrollbar-track {
-    @apply bg-slate-100 dark:bg-slate-800;
+    background-color: var(--color-slate-100);
+  }
+
+  .dark .custom-scrollbar::-webkit-scrollbar-track {
+    background-color: var(--color-slate-800);
   }
 
   .custom-scrollbar::-webkit-scrollbar-thumb {
-    @apply bg-slate-300 dark:bg-slate-700 rounded-full;
+    border-radius: 9999px;
+    background-color: var(--color-slate-300);
+  }
+
+  .dark .custom-scrollbar::-webkit-scrollbar-thumb {
+    background-color: var(--color-slate-700);
   }
 
   .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-    @apply bg-slate-400 dark:bg-slate-600;
-  }
-}
-
-/* Global scrollbar styling */
-* {
-  scrollbar-width: thin;
-  scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
-  /* gray-400 with transparency */
-}
-
-.dark * {
-  scrollbar-color: rgba(55, 65, 81, 0.5) transparent;
-  /* gray-700 with transparency */
-}
-
-/* Make scrollbars even more subtle on hover */
-*:hover {
-  scrollbar-color: rgba(156, 163, 175, 0.7) rgba(243, 244, 246, 0.5);
-  /* Slightly more visible on hover */
-}
-
-.dark *:hover {
-  scrollbar-color: rgba(75, 85, 99, 0.7) rgba(31, 41, 55, 0.3);
-  /* dark mode hover */
-}
-
-*::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-*::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-*::-webkit-scrollbar-thumb {
-  background-color: rgba(156, 163, 175, 0.5);
-  border-radius: 10px;
-}
-
-.dark *::-webkit-scrollbar-thumb {
-  background-color: rgba(55, 65, 81, 0.5);
-}
-
-*::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(156, 163, 175, 0.8);
-}
-
-.dark *::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(75, 85, 99, 0.8);
-}
-
-/* Dark mode transitions - Only apply to elements that actually change colors */
-body,
-.card,
-.table-row,
-.bg-white,
-.bg-slate-50,
-.bg-slate-100,
-.bg-slate-200,
-.bg-slate-300,
-.bg-slate-700,
-.bg-slate-800,
-.bg-slate-900,
-.text-slate-500,
-.text-slate-600,
-.text-slate-700,
-.text-slate-800,
-.text-slate-900,
-.border-slate-200,
-.border-slate-300,
-.border-slate-600,
-.border-slate-700,
-.dark\:bg-slate-700,
-.dark\:bg-slate-800,
-.dark\:bg-slate-900,
-.dark\:text-slate-100,
-.dark\:text-slate-200,
-.dark\:text-slate-300,
-.dark\:text-slate-400,
-.dark\:border-slate-600,
-.dark\:border-slate-700 {
-  transition:
-    background-color 150ms ease-in-out,
-    color 150ms ease-in-out,
-    border-color 150ms ease-in-out;
-}
-
-/* Pulse brand motion - visible, calm live-state rhythm. */
-@keyframes pulse-brand-logo {
-  0%,
-  100% {
-    transform: scale(1);
+    background-color: var(--color-slate-400);
   }
 
-  46% {
-    transform: scale(1.035);
+  .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-slate-600);
   }
 
-  66% {
-    transform: scale(1.012);
+  .view-options-grid > * [role='group'] > button {
+    box-sizing: border-box;
+    height: 1.75rem;
+    min-height: 1.75rem;
+    padding-top: 0;
+    padding-bottom: 0;
   }
-}
 
-@keyframes pulse-brand-wave {
-  0% {
-    opacity: 0.34;
+  .view-options-grid > * > :last-child:not([role='group']) > button {
+    box-sizing: border-box;
+    width: 100%;
+    height: 2rem;
+    min-height: 2rem;
+  }
+
+  @media (max-width: 640px) {
+    .view-options-grid > * [role='group'] > button {
+      height: 2.5rem;
+      min-height: 2.5rem;
+    }
+
+    .view-options-grid > * > :last-child:not([role='group']) > button {
+      height: 2.75rem;
+      min-height: 2.75rem;
+    }
+  }
+
+  @tailwind utilities source(none);
+
+  /* Neutralise v4's own zero-specificity space-x, space-y and divide rules;
+     the v3 forms are declared with @utility at the top of this file. These
+     reset to the preflight values, and any utility on the child still wins. */
+  :where([class*='space-y-'] > :not(:last-child)) {
+    margin-block: 0;
+  }
+
+  :where([class*='space-x-'] > :not(:last-child)) {
+    margin-inline: 0;
+  }
+
+  :where([class*='divide-'] > :not(:last-child)) {
+    border-width: 0;
+    border-style: solid;
+    border-color: var(--color-gray-200);
+  }
+
+  /* Former unlayered rules: emitted after the generated utilities. */
+  /*
+   * Respect the operating-system motion preference across the whole product.
+   * Keep animations technically present for components that depend on their
+   * completion state, but finish them immediately and prevent repeated motion.
+   * This also covers Tailwind animation/transition utilities and future shared
+   * primitives instead of requiring every call site to remember an override.
+   */
+  @media (prefers-reduced-motion: reduce) {
+    html:focus-within {
+      scroll-behavior: auto;
+    }
+
+    *,
+    *::before,
+    *::after {
+      scroll-behavior: auto !important;
+      animation-duration: 0.01ms !important;
+      animation-delay: 0ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      transition-delay: 0ms !important;
+    }
+  }
+
+  /* Update banner animation */
+  @keyframes slideDown {
+    from {
+      transform: translateY(-100%);
+      opacity: 0;
+    }
+
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  /* Notification animations */
+  @keyframes slide-in-card {
+    from {
+      opacity: 0;
+      transform: translateX(100%) scale(0.95);
+      filter: blur(4px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0) scale(1);
+      filter: blur(0);
+    }
+  }
+
+  /* Global scrollbar styling */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
+    /* gray-400 with transparency */
+  }
+
+  .dark * {
+    scrollbar-color: rgba(55, 65, 81, 0.5) transparent;
+    /* gray-700 with transparency */
+  }
+
+  /* Make scrollbars even more subtle on hover */
+  *:hover {
+    scrollbar-color: rgba(156, 163, 175, 0.7) rgba(243, 244, 246, 0.5);
+    /* Slightly more visible on hover */
+  }
+
+  .dark *:hover {
+    scrollbar-color: rgba(75, 85, 99, 0.7) rgba(31, 41, 55, 0.3);
+    /* dark mode hover */
+  }
+
+  *::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background-color: rgba(156, 163, 175, 0.5);
+    border-radius: 10px;
+  }
+
+  .dark *::-webkit-scrollbar-thumb {
+    background-color: rgba(55, 65, 81, 0.5);
+  }
+
+  *::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(156, 163, 175, 0.8);
+  }
+
+  .dark *::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(75, 85, 99, 0.8);
+  }
+
+  /* Dark mode transitions - Only apply to elements that actually change colors */
+  body,
+  .card,
+  .table-row,
+  .bg-white,
+  .bg-slate-50,
+  .bg-slate-100,
+  .bg-slate-200,
+  .bg-slate-300,
+  .bg-slate-700,
+  .bg-slate-800,
+  .bg-slate-900,
+  .text-slate-500,
+  .text-slate-600,
+  .text-slate-700,
+  .text-slate-800,
+  .text-slate-900,
+  .border-slate-200,
+  .border-slate-300,
+  .border-slate-600,
+  .border-slate-700,
+  .dark\:bg-slate-700,
+  .dark\:bg-slate-800,
+  .dark\:bg-slate-900,
+  .dark\:text-slate-100,
+  .dark\:text-slate-200,
+  .dark\:text-slate-300,
+  .dark\:text-slate-400,
+  .dark\:border-slate-600,
+  .dark\:border-slate-700 {
+    transition:
+      background-color 150ms ease-in-out,
+      color 150ms ease-in-out,
+      border-color 150ms ease-in-out;
+  }
+
+  /* Pulse brand motion - visible, calm live-state rhythm. */
+  @keyframes pulse-brand-logo {
+    0%,
+    100% {
+      transform: scale(1);
+    }
+
+    46% {
+      transform: scale(1.035);
+    }
+
+    66% {
+      transform: scale(1.012);
+    }
+  }
+
+  @keyframes pulse-brand-wave {
+    0% {
+      opacity: 0.34;
+      transform: translateY(-50%) scale(0.9);
+    }
+
+    68%,
+    100% {
+      opacity: 0;
+      transform: translateY(-50%) scale(2);
+    }
+  }
+
+  @keyframes pulse-brand-bg {
+    0%,
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    46% {
+      opacity: 0.96;
+      transform: scale(1.025);
+    }
+  }
+
+  @keyframes pulse-brand-ring {
+    0% {
+      opacity: 0.9;
+      transform: scale(0.96);
+      stroke-width: 14;
+    }
+
+    56% {
+      opacity: 0.22;
+      transform: scale(1.32);
+      stroke-width: 5;
+    }
+
+    74% {
+      opacity: 0;
+      transform: scale(1.36);
+      stroke-width: 4;
+    }
+
+    75% {
+      opacity: 0;
+      transform: scale(0.96);
+      stroke-width: 14;
+    }
+
+    100% {
+      opacity: 0.9;
+      transform: scale(0.96);
+      stroke-width: 14;
+    }
+  }
+
+  @keyframes pulse-brand-center {
+    0%,
+    100% {
+      transform: scale(1);
+    }
+
+    46% {
+      transform: scale(0.86);
+    }
+
+    64% {
+      transform: scale(1.05);
+    }
+  }
+
+  .pulse-brand-lockup {
+    --pulse-brand-wave-color: rgba(37, 99, 235, 0.34);
+    position: relative;
+  }
+
+  .dark .pulse-brand-lockup {
+    --pulse-brand-wave-color: rgba(96, 165, 250, 0.4);
+  }
+
+  .pulse-brand-lockup::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 20px;
+    height: 20px;
+    border: 1px solid var(--pulse-brand-wave-color);
+    border-radius: 9999px;
+    opacity: 0;
+    pointer-events: none;
     transform: translateY(-50%) scale(0.9);
   }
 
-  68%,
-  100% {
-    opacity: 0;
-    transform: translateY(-50%) scale(2);
-  }
-}
-
-@keyframes pulse-brand-bg {
-  0%,
-  100% {
-    opacity: 1;
-    transform: scale(1);
+  .pulse-brand-logo,
+  .pulse-brand-logo .pulse-bg,
+  .pulse-brand-logo .pulse-ring,
+  .pulse-brand-logo .pulse-center {
+    transform-origin: center;
+    transform-box: fill-box;
   }
 
-  46% {
-    opacity: 0.96;
-    transform: scale(1.025);
-  }
-}
-
-@keyframes pulse-brand-ring {
-  0% {
-    opacity: 0.9;
-    transform: scale(0.96);
-    stroke-width: 14;
+  .animate-pulse-brand {
+    --pulse-brand-cycle: 3.4s;
   }
 
-  56% {
-    opacity: 0.22;
-    transform: scale(1.32);
-    stroke-width: 5;
+  .animate-pulse-brand::before {
+    animation: pulse-brand-wave var(--pulse-brand-cycle) ease-in-out infinite;
   }
 
-  74% {
-    opacity: 0;
-    transform: scale(1.36);
-    stroke-width: 4;
+  .animate-pulse-brand .pulse-brand-logo {
+    animation: pulse-brand-logo var(--pulse-brand-cycle) ease-in-out infinite;
+    will-change: transform;
   }
 
-  75% {
-    opacity: 0;
-    transform: scale(0.96);
-    stroke-width: 14;
+  .animate-pulse-brand .pulse-bg {
+    animation: pulse-brand-bg var(--pulse-brand-cycle) ease-in-out infinite;
+    will-change: opacity, transform;
   }
 
-  100% {
-    opacity: 0.9;
-    transform: scale(0.96);
-    stroke-width: 14;
-  }
-}
-
-@keyframes pulse-brand-center {
-  0%,
-  100% {
-    transform: scale(1);
+  .animate-pulse-brand .pulse-ring {
+    animation: pulse-brand-ring var(--pulse-brand-cycle) ease-in-out infinite;
+    will-change: opacity, stroke-width, transform;
   }
 
-  46% {
-    transform: scale(0.86);
-  }
-
-  64% {
-    transform: scale(1.05);
-  }
-}
-
-.pulse-brand-lockup {
-  --pulse-brand-wave-color: rgba(37, 99, 235, 0.34);
-  position: relative;
-}
-
-.dark .pulse-brand-lockup {
-  --pulse-brand-wave-color: rgba(96, 165, 250, 0.4);
-}
-
-.pulse-brand-lockup::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 0;
-  width: 20px;
-  height: 20px;
-  border: 1px solid var(--pulse-brand-wave-color);
-  border-radius: 9999px;
-  opacity: 0;
-  pointer-events: none;
-  transform: translateY(-50%) scale(0.9);
-}
-
-.pulse-brand-logo,
-.pulse-brand-logo .pulse-bg,
-.pulse-brand-logo .pulse-ring,
-.pulse-brand-logo .pulse-center {
-  transform-origin: center;
-  transform-box: fill-box;
-}
-
-.animate-pulse-brand {
-  --pulse-brand-cycle: 3.4s;
-}
-
-.animate-pulse-brand::before {
-  animation: pulse-brand-wave var(--pulse-brand-cycle) ease-in-out infinite;
-}
-
-.animate-pulse-brand .pulse-brand-logo {
-  animation: pulse-brand-logo var(--pulse-brand-cycle) ease-in-out infinite;
-  will-change: transform;
-}
-
-.animate-pulse-brand .pulse-bg {
-  animation: pulse-brand-bg var(--pulse-brand-cycle) ease-in-out infinite;
-  will-change: opacity, transform;
-}
-
-.animate-pulse-brand .pulse-ring {
-  animation: pulse-brand-ring var(--pulse-brand-cycle) ease-in-out infinite;
-  will-change: opacity, stroke-width, transform;
-}
-
-.animate-pulse-brand .pulse-center {
-  animation: pulse-brand-center var(--pulse-brand-cycle) ease-in-out infinite;
-  will-change: transform;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .animate-pulse-brand,
-  .animate-pulse-brand::before,
-  .animate-pulse-brand .pulse-brand-logo,
-  .animate-pulse-brand .pulse-bg,
-  .animate-pulse-brand .pulse-ring,
   .animate-pulse-brand .pulse-center {
-    animation: none;
-  }
-}
-
-/* Stable table layout */
-.table-fixed {
-  table-layout: fixed;
-}
-
-/* Prevent text from affecting column widths */
-.table-fixed td,
-.table-fixed th {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/*
- * Dense platform tables should spend their width on operational values, not
- * oversized heading chrome. Keep headings readable without making every row
- * taller, then let unusually long labels provide a container-aware compact
- * form below the first table-column reveal breakpoint.
- */
-.table-scroll-shell > .table-fixed.platform-table th {
-  padding-right: 0.375rem;
-  padding-left: 0.375rem;
-  font-size: 11px;
-  letter-spacing: 0.025em;
-}
-
-/*
- * Docker's single-line rows are the canonical operator density. Every
- * platform summary row uses the same 32px scan rhythm; inline drawers remain
- * content-sized. Secondary context belongs in another column, a tooltip, or
- * the expanded detail row rather than making the overview row taller.
- */
-.table-scroll-shell > .table-fixed.platform-table > tbody > tr:not([data-inline-detail-for]) {
-  height: 2rem;
-}
-
-.platform-table-label-compact {
-  display: inline;
-}
-
-.platform-table-label-full {
-  display: none;
-}
-
-/*
- * Table columns and inline status labels can opt into the same container-led
- * phone priority contract. Keeping these rules beside the canonical mobile
- * widths means a header can never disappear at a different breakpoint from
- * its body cells, and nested panels respond to their own usable width rather
- * than the browser viewport.
- */
-.platform-table-phone-only,
-.platform-table-phone-only-inline {
-  display: none;
-}
-
-@container (min-width: 34rem) {
-  .platform-table-label-compact {
-    display: none;
+    animation: pulse-brand-center var(--pulse-brand-cycle) ease-in-out infinite;
+    will-change: transform;
   }
 
-  .platform-table-label-full {
-    display: inline;
+  @media (prefers-reduced-motion: reduce) {
+    .animate-pulse-brand,
+    .animate-pulse-brand::before,
+    .animate-pulse-brand .pulse-brand-logo,
+    .animate-pulse-brand .pulse-bg,
+    .animate-pulse-brand .pulse-ring,
+    .animate-pulse-brand .pulse-center {
+      animation: none;
+    }
   }
-}
 
-@container (max-width: 33.999rem) {
-  .table-scroll-shell > .table-fixed.platform-table th {
-    padding-right: 0.25rem;
-    padding-left: 0.25rem;
-    font-size: 10px;
-    letter-spacing: 0;
+  /* Stable table layout */
+  .table-fixed {
+    table-layout: fixed;
+  }
+
+  /* Prevent text from affecting column widths */
+  .table-fixed td,
+  .table-fixed th {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   /*
-   * Proxmox Overview is the phone-density reference: identity receives a
-   * stable 30% anchor and the remaining operational tracks share the rest.
-   * Keeping that anchor at the shared table boundary prevents each provider
-   * from silently choosing a different mobile table geometry.
+   * Dense platform tables should spend their width on operational values, not
+   * oversized heading chrome. Keep headings readable without making every row
+   * taller, then let unusually long labels provide a container-aware compact
+   * form below the first table-column reveal breakpoint.
    */
-  .table-scroll-shell > .table-fixed.platform-table th.platform-table-name-column {
-    width: 30%;
+  .table-scroll-shell > .table-fixed.platform-table th {
+    padding-right: 0.375rem;
+    padding-left: 0.375rem;
+    font-size: 11px;
+    letter-spacing: 0.025em;
   }
 
-  .table-scroll-shell > .table-fixed.platform-table th.platform-table-mobile-w-30 {
-    width: 30%;
+  /*
+   * Docker's single-line rows are the canonical operator density. Every
+   * platform summary row uses the same 32px scan rhythm; inline drawers remain
+   * content-sized. Secondary context belongs in another column, a tooltip, or
+   * the expanded detail row rather than making the overview row taller.
+   */
+  .table-scroll-shell > .table-fixed.platform-table > tbody > tr:not([data-inline-detail-for]) {
+    height: 2rem;
   }
 
-  .table-scroll-shell > .table-fixed.platform-table th.platform-table-mobile-w-25 {
-    width: 25%;
+  .platform-table-label-compact {
+    display: inline;
   }
 
-  .table-scroll-shell > .table-fixed.platform-table th.platform-table-mobile-w-20 {
-    width: 20%;
-  }
-
-  .table-scroll-shell > .table-fixed.platform-table th.platform-table-mobile-w-15 {
-    width: 15%;
-  }
-
-  .table-scroll-shell > .table-fixed.platform-table th.platform-table-mobile-w-10 {
-    width: 10%;
-  }
-
-  .table-scroll-shell > .table-fixed.platform-table :is(th, td).platform-table-phone-hidden,
-  .platform-table-phone-hidden-inline {
+  .platform-table-label-full {
     display: none;
   }
 
-  .table-scroll-shell > .table-fixed.platform-table :is(th, td).platform-table-phone-only {
-    display: table-cell;
-  }
-
+  /*
+   * Table columns and inline status labels can opt into the same container-led
+   * phone priority contract. Keeping these rules beside the canonical mobile
+   * widths means a header can never disappear at a different breakpoint from
+   * its body cells, and nested panels respond to their own usable width rather
+   * than the browser viewport.
+   */
+  .platform-table-phone-only,
   .platform-table-phone-only-inline {
-    display: inline-flex;
-  }
-}
-
-/* At the narrowest supported phone width, spend the extra identity space once
-   at the shared boundary. Source tables still choose which lower-priority
-   field disappears; the shell only guarantees that the surviving identity
-   remains a single readable scan target. */
-@container (max-width: 22.499rem) {
-  .table-scroll-shell > .table-fixed.platform-table th.platform-table-name-column {
-    width: 40%;
-  }
-
-  .table-scroll-shell > .table-fixed.platform-table :is(th, td).platform-table-narrow-hidden {
     display: none;
   }
-}
 
-/* Rebalance the TrueNAS app inventory whenever another priority tier appears.
-   Hidden fixed-table tracks otherwise keep their desktop percentage and leave
-   a large unused strip while visible operational columns become unreadable. */
-@container (min-width: 34rem) and (max-width: 63.999rem) {
-  .table-scroll-shell > .table-fixed th.truenas-app-name-column {
-    width: 28%;
+  @container (min-width: 34rem) {
+    .platform-table-label-compact {
+      display: none;
+    }
+
+    .platform-table-label-full {
+      display: inline;
+    }
   }
 
-  .table-scroll-shell > .table-fixed th.truenas-app-cpu-column {
-    width: 15%;
+  @container (max-width: 33.999rem) {
+    .table-scroll-shell > .table-fixed.platform-table th {
+      padding-right: 0.25rem;
+      padding-left: 0.25rem;
+      font-size: 10px;
+      letter-spacing: 0;
+    }
+
+    /*
+     * Proxmox Overview is the phone-density reference: identity receives a
+     * stable 30% anchor and the remaining operational tracks share the rest.
+     * Keeping that anchor at the shared table boundary prevents each provider
+     * from silently choosing a different mobile table geometry.
+     */
+    .table-scroll-shell > .table-fixed.platform-table th.platform-table-name-column {
+      width: 30%;
+    }
+
+    .table-scroll-shell > .table-fixed.platform-table th.platform-table-mobile-w-30 {
+      width: 30%;
+    }
+
+    .table-scroll-shell > .table-fixed.platform-table th.platform-table-mobile-w-25 {
+      width: 25%;
+    }
+
+    .table-scroll-shell > .table-fixed.platform-table th.platform-table-mobile-w-20 {
+      width: 20%;
+    }
+
+    .table-scroll-shell > .table-fixed.platform-table th.platform-table-mobile-w-15 {
+      width: 15%;
+    }
+
+    .table-scroll-shell > .table-fixed.platform-table th.platform-table-mobile-w-10 {
+      width: 10%;
+    }
+
+    .table-scroll-shell > .table-fixed.platform-table :is(th, td).platform-table-phone-hidden,
+    .platform-table-phone-hidden-inline {
+      display: none;
+    }
+
+    .table-scroll-shell > .table-fixed.platform-table :is(th, td).platform-table-phone-only {
+      display: table-cell;
+    }
+
+    .platform-table-phone-only-inline {
+      display: inline-flex;
+    }
   }
 
-  .table-scroll-shell > .table-fixed th.truenas-app-memory-column,
-  .table-scroll-shell > .table-fixed th.truenas-app-containers-column {
-    width: 20%;
+  /* At the narrowest supported phone width, spend the extra identity space once
+     at the shared boundary. Source tables still choose which lower-priority
+     field disappears; the shell only guarantees that the surviving identity
+     remains a single readable scan target. */
+  @container (max-width: 22.499rem) {
+    .table-scroll-shell > .table-fixed.platform-table th.platform-table-name-column {
+      width: 40%;
+    }
+
+    .table-scroll-shell > .table-fixed.platform-table :is(th, td).platform-table-narrow-hidden {
+      display: none;
+    }
   }
 
-  .table-scroll-shell > .table-fixed th.truenas-app-updates-column {
-    width: 17%;
-  }
-}
+  /* Rebalance the TrueNAS app inventory whenever another priority tier appears.
+     Hidden fixed-table tracks otherwise keep their desktop percentage and leave
+     a large unused strip while visible operational columns become unreadable. */
+  @container (min-width: 34rem) and (max-width: 63.999rem) {
+    .table-scroll-shell > .table-fixed th.truenas-app-name-column {
+      width: 28%;
+    }
 
-@container (min-width: 64rem) and (max-width: 75.999rem) {
-  .table-scroll-shell > .table-fixed th.truenas-app-name-column {
-    width: 19%;
+    .table-scroll-shell > .table-fixed th.truenas-app-cpu-column {
+      width: 15%;
+    }
+
+    .table-scroll-shell > .table-fixed th.truenas-app-memory-column,
+    .table-scroll-shell > .table-fixed th.truenas-app-containers-column {
+      width: 20%;
+    }
+
+    .table-scroll-shell > .table-fixed th.truenas-app-updates-column {
+      width: 17%;
+    }
   }
 
-  .table-scroll-shell > .table-fixed th.truenas-app-version-column,
-  .table-scroll-shell > .table-fixed th.truenas-app-updates-column {
-    width: 11%;
+  @container (min-width: 64rem) and (max-width: 75.999rem) {
+    .table-scroll-shell > .table-fixed th.truenas-app-name-column {
+      width: 19%;
+    }
+
+    .table-scroll-shell > .table-fixed th.truenas-app-version-column,
+    .table-scroll-shell > .table-fixed th.truenas-app-updates-column {
+      width: 11%;
+    }
+
+    .table-scroll-shell > .table-fixed th.truenas-app-cpu-column {
+      width: 10%;
+    }
+
+    .table-scroll-shell > .table-fixed th.truenas-app-memory-column,
+    .table-scroll-shell > .table-fixed th.truenas-app-containers-column {
+      width: 14%;
+    }
+
+    .table-scroll-shell > .table-fixed th.truenas-app-ports-column {
+      width: 21%;
+    }
   }
 
-  .table-scroll-shell > .table-fixed th.truenas-app-cpu-column {
-    width: 10%;
+  /* Keep name column single line to avoid wrapping while giving it more space */
+  .table-fixed td:first-child {
+    white-space: nowrap;
   }
 
-  .table-scroll-shell > .table-fixed th.truenas-app-memory-column,
-  .table-scroll-shell > .table-fixed th.truenas-app-containers-column {
-    width: 14%;
+  /* Hide scrollbars but keep functionality */
+
+  /*
+    Height of the mobile bottom navigation bar. MobileNavBar overwrites this at
+    runtime with its measured height, which already includes the safe-area inset
+    via pb-safe - consumers must NOT add env(safe-area-inset-bottom) on top.
+
+    The declared value is only a pre-measurement fallback, and it deliberately
+    UNDER-estimates. Reserving more than the bar's real height leaves a band
+    between an overlay's backdrop and the bar that is neither dimmed nor
+    click-blocked, which is the defect this variable exists to prevent; reserving
+    slightly less is harmless because the opaque bar paints over it.
+  */
+  :root {
+    --pulse-mobile-nav-height: calc(2.5rem + env(safe-area-inset-bottom, 0px));
   }
 
-  .table-scroll-shell > .table-fixed th.truenas-app-ports-column {
-    width: 21%;
-  }
-}
+  /* Login page animations */
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
 
-/* Keep name column single line to avoid wrapping while giving it more space */
-.table-fixed td:first-child {
-  white-space: nowrap;
-}
-
-/* Hide scrollbars but keep functionality */
-.scrollbar-hide {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-.scrollbar-hide::-webkit-scrollbar {
-  display: none;
-}
-
-/*
-  Height of the mobile bottom navigation bar. MobileNavBar overwrites this at
-  runtime with its measured height, which already includes the safe-area inset
-  via pb-safe - consumers must NOT add env(safe-area-inset-bottom) on top.
-
-  The declared value is only a pre-measurement fallback, and it deliberately
-  UNDER-estimates. Reserving more than the bar's real height leaves a band
-  between an overlay's backdrop and the bar that is neither dimmed nor
-  click-blocked, which is the defect this variable exists to prevent; reserving
-  slightly less is harmless because the opaque bar paints over it.
-*/
-:root {
-  --pulse-mobile-nav-height: calc(2.5rem + env(safe-area-inset-bottom, 0px));
-}
-
-.pb-safe {
-  padding-bottom: env(safe-area-inset-bottom, 0px);
-}
-
-.pb-safe-or-14 {
-  padding-bottom: max(3.5rem, env(safe-area-inset-bottom, 3.5rem));
-}
-
-/* Login page animations */
-@keyframes fade-in {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
 
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
+  @keyframes slide-up {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
 
-@keyframes slide-up {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
 
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
+  @keyframes pulse-slow {
+    0%,
+    100% {
+      opacity: 0.25;
+    }
 
-@keyframes pulse-slow {
-  0%,
-  100% {
-    opacity: 0.25;
+    50% {
+      opacity: 0.75;
+    }
   }
 
-  50% {
-    opacity: 0.75;
-  }
-}
-
-.animate-fade-in {
-  animation: fade-in 0.6s ease-out forwards;
-}
-
-.animate-slide-up {
-  animation: slide-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .animate-fade-in,
-  .animate-slide-up {
-    animation: none;
-  }
-}
-
-.delay-100 {
-  animation-delay: 100ms;
-}
-
-.delay-200 {
-  animation-delay: 200ms;
-}
-
-.delay-300 {
-  animation-delay: 300ms;
-}
-
-/* Staggered Entry Animation */
-@keyframes enter {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
+  @media (prefers-reduced-motion: reduce) {
+    .animate-fade-in,
+    .animate-slide-up {
+      animation: none;
+    }
   }
 
-  to {
-    opacity: 1;
-    transform: translateY(0);
+  .delay-100 {
+    animation-delay: 100ms;
   }
-}
 
-.animate-enter {
-  animation: enter 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
-}
+  .delay-200 {
+    animation-delay: 200ms;
+  }
 
-/* ---------------------------------------------------------------------------
-   Workload table manual column sizing
+  .delay-300 {
+    animation-delay: 300ms;
+  }
 
-   Default (no pinned widths): none of this applies and the responsive weights
-   keep the table inside its container, as they always have. Once an operator
-   drags a column edge the table opts into its pinned pixel widths, which means
-   it may exceed the shell — `.table-scroll-shell` already scrolls, so the
-   trade the operator asked for is simply allowed to happen.
-   --------------------------------------------------------------------------- */
-/* The table publishes an explicit pixel width while manual sizing is on (see
-   `sumWorkloadColumnWidths`). `width: auto` would drop the table out of
-   `table-layout: fixed` and let a narrow column snap back to its content
-   minimum, so only the floor is expressed here. */
-.table-scroll-shell > table.workload-table--manual-widths {
-  min-width: 100%;
-}
+  /* Staggered Entry Animation */
+  @keyframes enter {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
 
-.workload-col-resizer {
-  position: absolute;
-  top: 0;
-  right: -3px;
-  z-index: 1;
-  display: block;
-  width: 7px;
-  height: 100%;
-  cursor: col-resize;
-  /* Keeps the hit target from selecting header text mid-drag. */
-  user-select: none;
-  touch-action: none;
-  background-clip: content-box;
-  background-color: transparent;
-  border-right: 2px solid transparent;
-  transition: border-color 0.12s ease-in-out;
-}
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
 
-.workload-col-resizer:hover,
-.workload-col-resizer:focus-visible {
-  border-right-color: var(--color-border-strong, currentColor);
-  outline: none;
-}
+  /* ---------------------------------------------------------------------------
+     Workload table manual column sizing
 
-.workload-col-resizer:focus-visible {
-  border-right-width: 3px;
-}
+     Default (no pinned widths): none of this applies and the responsive weights
+     keep the table inside its container, as they always have. Once an operator
+     drags a column edge the table opts into its pinned pixel widths, which means
+     it may exceed the shell — `.table-scroll-shell` already scrolls, so the
+     trade the operator asked for is simply allowed to happen.
+     --------------------------------------------------------------------------- */
+  /* The table publishes an explicit pixel width while manual sizing is on (see
+     `sumWorkloadColumnWidths`). `width: auto` would drop the table out of
+     `table-layout: fixed` and let a narrow column snap back to its content
+     minimum, so only the floor is expressed here. */
+  .table-scroll-shell > table.workload-table--manual-widths {
+    min-width: 100%;
+  }
 
-@media (prefers-reduced-motion: reduce) {
   .workload-col-resizer {
-    transition: none;
-  }
-}
-
-/* Phone update states must remain readable inside the existing, non-scrolling
- * Docker table. Wrap the badge rather than clipping it or hiding its label. */
-@container (max-width: 33.999rem) {
-  .docker-container-update-cell {
-    padding-inline: 0.125rem;
-  }
-
-  .docker-container-update-cell > :is(span, div),
-  .docker-container-update-cell button {
-    max-width: 100%;
-    white-space: normal;
-    overflow-wrap: anywhere;
-    overflow: visible;
-    text-overflow: clip;
-  }
-
-  .docker-container-update-cell > span,
-  .docker-container-update-cell button {
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 0.125rem;
-    padding-inline: 0.125rem;
-    font-size: 10px;
-  }
-
-  .docker-container-update-cell svg {
-    flex-shrink: 0;
+    position: absolute;
+    top: 0;
+    right: -3px;
+    z-index: 1;
+    display: block;
+    width: 7px;
+    height: 100%;
+    cursor: col-resize;
+    /* Keeps the hit target from selecting header text mid-drag. */
+    user-select: none;
+    touch-action: none;
+    background-clip: content-box;
+    background-color: transparent;
+    border-right: 2px solid transparent;
+    transition: border-color 0.12s ease-in-out;
+  }
+
+  .workload-col-resizer:hover,
+  .workload-col-resizer:focus-visible {
+    border-right-color: var(--color-border-strong, currentColor);
+    outline: none;
+  }
+
+  .workload-col-resizer:focus-visible {
+    border-right-width: 3px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .workload-col-resizer {
+      transition: none;
+    }
+  }
+
+  /* Phone update states must remain readable inside the existing, non-scrolling
+   * Docker table. Wrap the badge rather than clipping it or hiding its label. */
+  @container (max-width: 33.999rem) {
+    .docker-container-update-cell {
+      padding-inline: 0.125rem;
+    }
+
+    .docker-container-update-cell > :is(span, div),
+    .docker-container-update-cell button {
+      max-width: 100%;
+      white-space: normal;
+      overflow-wrap: anywhere;
+      overflow: visible;
+      text-overflow: clip;
+    }
+
+    .docker-container-update-cell > span,
+    .docker-container-update-cell button {
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 0.125rem;
+      padding-inline: 0.125rem;
+      font-size: 10px;
+    }
+
+    .docker-container-update-cell svg {
+      flex-shrink: 0;
+    }
   }
 }
diff --git a/frontend-modern/src/pages/Actions.tsx b/frontend-modern/src/pages/Actions.tsx
index 068481a22a..c9775c9ecc 100644
--- a/frontend-modern/src/pages/Actions.tsx
+++ b/frontend-modern/src/pages/Actions.tsx
@@ -196,7 +196,7 @@ export function Actions() {
       />
 
       <Show when={readOnly()}>
-        <div class="flex items-center gap-2 rounded-md border border-border-subtle bg-surface-alt/50 px-3 py-2 text-xs text-muted">
+        <div class="flex items-center gap-2 rounded-md border border-border-subtle px-3 py-2 text-xs text-muted">
           <EyeIcon class="h-4 w-4 shrink-0" aria-hidden="true" />
           <span>
             <strong class="font-medium text-base-content">Read-only demo data.</strong> You can
@@ -208,7 +208,7 @@ export function Actions() {
       <Show when={detailError()}>
         <div
           role="alert"
-          class="rounded border border-amber-300 bg-amber-50 p-3 text-sm text-amber-800 dark:bg-amber-950/40 dark:text-amber-200"
+          class="rounded-sm border border-amber-300 bg-amber-50 p-3 text-sm text-amber-800 dark:bg-amber-950/40 dark:text-amber-200"
         >
           {detailError()}
         </div>
@@ -294,7 +294,7 @@ export function Actions() {
                     <button
                       type="button"
                       aria-label={`Review ${title()} on ${action.request.resourceId}, ${state().label}`}
-                      class={`group w-full border-l-2 px-3 py-3 text-left transition-colors hover:bg-surface-hover/70 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-500 sm:px-4 ${state().accentClass}`}
+                      class={`group w-full border-l-2 px-3 py-3 text-left transition-colors focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-blue-500 sm:px-4 ${state().accentClass}`}
                       onClick={() => openAction(action)}
                     >
                       <div class="flex items-center gap-3">
@@ -335,7 +335,7 @@ export function Actions() {
                           </div>
                           <p class="mt-1.5 truncate text-sm text-muted">{action.request.reason}</p>
                         </div>
-                        <span class="inline-flex shrink-0 items-center gap-1 rounded border border-border px-2 py-1 text-xs font-medium text-muted transition-colors group-hover:bg-surface group-hover:text-base-content">
+                        <span class="inline-flex shrink-0 items-center gap-1 rounded-sm border border-border px-2 py-1 text-xs font-medium text-muted transition-colors group-hover:bg-surface group-hover:text-base-content">
                           Review
                           <ChevronRightIcon class="h-3.5 w-3.5" aria-hidden="true" />
                         </span>
diff --git a/frontend-modern/src/pages/Alerts.tsx b/frontend-modern/src/pages/Alerts.tsx
index 0997e7a55f..320d8f175d 100644
--- a/frontend-modern/src/pages/Alerts.tsx
+++ b/frontend-modern/src/pages/Alerts.tsx
@@ -264,7 +264,7 @@ export function Alerts() {
 
       <Card padding="none" class="relative lg:flex overflow-hidden">
         <nav
-          class={`hidden lg:flex lg:flex-col ${sidebarCollapsed() ? 'w-16' : 'w-72'} ${sidebarCollapsed() ? 'lg:min-w-[4rem] lg:max-w-[4rem] lg:basis-[4rem]' : 'lg:min-w-[18rem] lg:max-w-[18rem] lg:basis-[18rem]'} relative border-b border-border lg:border-b-0 lg:border-r lg:align-top flex-shrink-0 transition-all duration-200`}
+          class={`hidden lg:flex lg:flex-col ${sidebarCollapsed() ? 'w-16' : 'w-72'} ${sidebarCollapsed() ? 'lg:min-w-16 lg:max-w-16 lg:basis-16' : 'lg:min-w-[18rem] lg:max-w-[18rem] lg:basis-[18rem]'} relative border-b border-border lg:border-b-0 lg:border-r lg:align-top shrink-0 transition-all duration-200`}
           aria-label={t('alerts.nav.ariaLabel')}
         >
           <div
diff --git a/frontend-modern/src/pages/Docs.tsx b/frontend-modern/src/pages/Docs.tsx
index 1acd289ebc..6402dd73ac 100644
--- a/frontend-modern/src/pages/Docs.tsx
+++ b/frontend-modern/src/pages/Docs.tsx
@@ -135,7 +135,7 @@ export default function Docs() {
             // Inline code must be able to break, because a long unbreakable
             // URL in one otherwise pushes the whole page into horizontal
             // scrolling on a phone; code inside pre keeps its own scrollbar.
-            class="prose prose-sm max-w-none dark:prose-invert prose-headings:scroll-mt-20 prose-pre:overflow-x-auto prose-code:before:content-none prose-code:after:content-none [&_:not(pre)>code]:break-words"
+            class="prose prose-sm max-w-none dark:prose-invert prose-headings:scroll-mt-20 prose-pre:overflow-x-auto prose-code:before:content-none prose-code:after:content-none [&_:not(pre)>code]:wrap-break-word"
             onClick={handleClick}
             // eslint-disable-next-line solid/no-innerhtml -- renderDocMarkdown sanitises with DOMPurify
             innerHTML={html()}
diff --git a/frontend-modern/src/pages/PricingHandoff.tsx b/frontend-modern/src/pages/PricingHandoff.tsx
index a2ab03af1f..84b3b288df 100644
--- a/frontend-modern/src/pages/PricingHandoff.tsx
+++ b/frontend-modern/src/pages/PricingHandoff.tsx
@@ -54,9 +54,9 @@ export default function PricingHandoff() {
             }
             descriptionVisibility="always"
             updateDocumentTitle={false}
-            class="!items-center !justify-center text-center sm:!flex-col"
-            titleClass="!text-lg !font-semibold"
-            descriptionClass="!font-normal"
+            class="items-center! justify-center! text-center sm:flex-col!"
+            titleClass="text-lg! font-semibold!"
+            descriptionClass="font-normal!"
           />
         </div>
       </div>
diff --git a/frontend-modern/src/pages/__tests__/Alerts.helpers.test.ts b/frontend-modern/src/pages/__tests__/Alerts.helpers.test.ts
index 0a5428ac76..d72c5ada97 100644
--- a/frontend-modern/src/pages/__tests__/Alerts.helpers.test.ts
+++ b/frontend-modern/src/pages/__tests__/Alerts.helpers.test.ts
@@ -526,7 +526,7 @@ describe('tab path helpers', () => {
     expect(alertHistoryTableSectionSource).toContain('alert-history-full-detail-column');
     expect(alertHistoryTableAlertRowSource).toContain('alert-history-timestamp-column');
     expect(alertHistoryTableSectionSource).not.toContain(
-      'overflow-hidden rounded border border-border',
+      'overflow-hidden rounded-sm border border-border',
     );
     expect(alertHistoryTableSectionSource).not.toContain('<div class="overflow-x-auto">');
     expect(alertHistoryTableSectionSource).not.toContain(
@@ -872,7 +872,7 @@ describe('quiet suppress presentation helpers', () => {
 
   it('returns the selected quiet suppress checkbox presentation', () => {
     expect(getAlertQuietSuppressCheckboxClass(true)).toBe(
-      'mt-1 flex h-4 w-4 items-center justify-center rounded border-2 border-blue-500 bg-blue-500',
+      'mt-1 flex h-4 w-4 items-center justify-center rounded-sm border-2 border-blue-500 bg-blue-500',
     );
   });
 });
@@ -886,13 +886,13 @@ describe('incident event filter presentation helpers', () => {
 
   it('returns the shared action button presentation', () => {
     expect(getAlertIncidentEventFilterActionButtonClass()).toBe(
-      'px-2 py-0.5 rounded border border-border text-muted hover:bg-surface-hover',
+      'px-2 py-0.5 rounded-sm border border-border text-muted hover:bg-surface-hover',
     );
   });
 
   it('returns the selected compact chip presentation', () => {
     expect(getAlertIncidentEventFilterChipClass(true, 'compact')).toBe(
-      'px-2 py-0.5 rounded border text-[10px] transition-colors border-blue-300 bg-blue-100 text-blue-700 dark:border-blue-800 dark:bg-blue-900 dark:text-blue-300',
+      'px-2 py-0.5 rounded-sm border text-[10px] transition-colors border-blue-300 bg-blue-100 text-blue-700 dark:border-blue-800 dark:bg-blue-900/25 dark:text-blue-300',
     );
   });
 });
@@ -900,19 +900,19 @@ describe('incident event filter presentation helpers', () => {
 describe('incident timeline presentation helpers', () => {
   it('returns the acknowledged badge presentation', () => {
     expect(getAlertIncidentAcknowledgedBadgeClass()).toBe(
-      'px-2 py-0.5 rounded bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300',
+      'px-2 py-0.5 rounded-sm bg-emerald-100 text-emerald-700 dark:bg-emerald-900/25 dark:text-emerald-300',
     );
   });
 
   it('returns the surface event-card presentation', () => {
     expect(getAlertIncidentTimelineEventCardClass('surface')).toBe(
-      'rounded border border-border bg-surface p-2 whitespace-normal break-words',
+      'rounded-sm border border-border bg-surface p-2 whitespace-normal wrap-break-word',
     );
   });
 
   it('returns the note editor presentation', () => {
     expect(getAlertIncidentNoteTextareaClass()).toBe(
-      'w-full rounded border border-border bg-surface p-2 text-xs text-base-content',
+      'w-full rounded-sm border border-border bg-surface p-2 text-xs text-base-content',
     );
     expect(getAlertIncidentNoteSaveButtonClass()).toBe(
       'px-3 py-1.5 text-xs font-medium border rounded-md transition-all bg-surface text-base-content border-border hover:bg-surface-hover disabled:opacity-50 disabled:cursor-not-allowed',
@@ -932,7 +932,9 @@ describe('incident timeline presentation helpers', () => {
   });
 
   it('returns the resource incident panel presentation', () => {
-    expect(getAlertResourceIncidentCardClass()).toBe('rounded border border-border bg-surface p-3');
+    expect(getAlertResourceIncidentCardClass()).toBe(
+      'rounded-sm border border-border bg-surface p-3',
+    );
     expect(getAlertResourceIncidentSummaryRowClass()).toBe(
       'mt-2 flex flex-wrap items-center justify-between gap-2 text-xs text-muted',
     );
@@ -940,7 +942,7 @@ describe('incident timeline presentation helpers', () => {
       'flex flex-wrap items-center gap-1.5',
     );
     expect(getAlertResourceIncidentActivityChipClass()).toBe(
-      'rounded bg-surface-alt px-2 py-0.5 text-[10px] font-medium text-base-content',
+      'rounded-sm bg-surface-alt px-2 py-0.5 text-[10px] font-medium text-base-content',
     );
     expect(getAlertResourceIncidentToggleButtonClass()).toBe(
       'px-2 py-1 text-[10px] border rounded-md border-border text-muted hover:bg-surface-hover',
diff --git a/frontend-modern/src/security/__tests__/dependencySecurity.test.ts b/frontend-modern/src/security/__tests__/dependencySecurity.test.ts
index 34c97754e5..1ee2b2de4b 100644
--- a/frontend-modern/src/security/__tests__/dependencySecurity.test.ts
+++ b/frontend-modern/src/security/__tests__/dependencySecurity.test.ts
@@ -132,6 +132,14 @@ describe('frontend dependency security floors', () => {
     }
   });
 
+  it('keeps braces out of the dependency graph', () => {
+    // GHSA-vfj7-8cjw-p6xm affects every braces release (<= 3.0.3) and has no
+    // patched version, so no override can fix it. Tailwind CSS 3 (via chokidar,
+    // fast-glob and micromatch) and jscpd 4 pulled it in; Tailwind CSS 4 and
+    // jscpd 5 do not. Keep it out rather than allowlisting the advisory.
+    expect(lockedVersions('braces')).toEqual([]);
+  });
+
   it('keeps nanoid custom generators above the zero-size loop floor', () => {
     const versions = lockedVersions('nanoid');
     expect(versions).not.toHaveLength(0);
@@ -187,7 +195,6 @@ describe('frontend dependency security floors', () => {
       ['typescript-eslint', [8, 70, 0]],
       ['@typescript-eslint/eslint-plugin', [8, 70, 0]],
       ['@typescript-eslint/parser', [8, 70, 0]],
-      ['autoprefixer', [10, 6, 1]],
       ['eslint-plugin-solid', [0, 18, 0]],
       ['postcss', [8, 5, 28]],
       ['vite-plugin-solid', [2, 11, 14]],
diff --git a/frontend-modern/src/tailwind-palette.css b/frontend-modern/src/tailwind-palette.css
new file mode 100644
index 0000000000..4005e90c28
--- /dev/null
+++ b/frontend-modern/src/tailwind-palette.css
@@ -0,0 +1,291 @@
+/*
+ * Tailwind v3 color palette, pinned so the v4 build renders the same sRGB
+ * values the v3 build did (v4's default palette is defined in OKLCH and
+ * shifts most shades slightly). It is inlined so opacity modifiers such as
+ * bg-red-900/25 compile to static colors instead of runtime color-mix().
+ *
+ * The 900 and 950 shades of the tinted families are the values Pulse used to
+ * override with 25% alpha. They are opaque here; class names that relied on
+ * the old implicit alpha spell it out with an opacity modifier (for example
+ * dark:bg-red-900/25), because v4 multiplies a modifier into a translucent
+ * color instead of replacing its alpha the way v3 did.
+ */
+@theme inline {
+  --color-*: initial;
+
+  --color-black: #000;
+  --color-white: #fff;
+
+  --color-slate-50: #f8fafc;
+  --color-slate-100: #f1f5f9;
+  --color-slate-200: #e2e8f0;
+  --color-slate-300: #cbd5e1;
+  --color-slate-400: #94a3b8;
+  --color-slate-500: #64748b;
+  --color-slate-600: #475569;
+  --color-slate-700: #334155;
+  --color-slate-800: #1e293b;
+  --color-slate-900: #0f172a;
+  --color-slate-950: #020617;
+
+  --color-gray-50: #f9fafb;
+  --color-gray-100: #f3f4f6;
+  --color-gray-200: #e5e7eb;
+  --color-gray-300: #d1d5db;
+  --color-gray-400: #9ca3af;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #4b5563;
+  --color-gray-700: #374151;
+  --color-gray-800: #1f2937;
+  --color-gray-900: #111827;
+  --color-gray-950: #030712;
+
+  --color-zinc-50: #fafafa;
+  --color-zinc-100: #f4f4f5;
+  --color-zinc-200: #e4e4e7;
+  --color-zinc-300: #d4d4d8;
+  --color-zinc-400: #a1a1aa;
+  --color-zinc-500: #71717a;
+  --color-zinc-600: #52525b;
+  --color-zinc-700: #3f3f46;
+  --color-zinc-800: #27272a;
+  --color-zinc-900: #18181b;
+  --color-zinc-950: #09090b;
+
+  --color-neutral-50: #fafafa;
+  --color-neutral-100: #f5f5f5;
+  --color-neutral-200: #e5e5e5;
+  --color-neutral-300: #d4d4d4;
+  --color-neutral-400: #a3a3a3;
+  --color-neutral-500: #737373;
+  --color-neutral-600: #525252;
+  --color-neutral-700: #404040;
+  --color-neutral-800: #262626;
+  --color-neutral-900: #171717;
+  --color-neutral-950: #0a0a0a;
+
+  --color-stone-50: #fafaf9;
+  --color-stone-100: #f5f5f4;
+  --color-stone-200: #e7e5e4;
+  --color-stone-300: #d6d3d1;
+  --color-stone-400: #a8a29e;
+  --color-stone-500: #78716c;
+  --color-stone-600: #57534e;
+  --color-stone-700: #44403c;
+  --color-stone-800: #292524;
+  --color-stone-900: #1c1917;
+  --color-stone-950: #0c0a09;
+
+  --color-red-50: #fef2f2;
+  --color-red-100: #fee2e2;
+  --color-red-200: #fecaca;
+  --color-red-300: #fca5a5;
+  --color-red-400: #f87171;
+  --color-red-500: #ef4444;
+  --color-red-600: #dc2626;
+  --color-red-700: #b91c1c;
+  --color-red-800: #991b1b;
+  --color-red-900: #7f1d1d;
+  --color-red-950: #450a0a;
+
+  --color-orange-50: #fff7ed;
+  --color-orange-100: #ffedd5;
+  --color-orange-200: #fed7aa;
+  --color-orange-300: #fdba74;
+  --color-orange-400: #fb923c;
+  --color-orange-500: #f97316;
+  --color-orange-600: #ea580c;
+  --color-orange-700: #c2410c;
+  --color-orange-800: #9a3412;
+  --color-orange-900: #7c2d12;
+  --color-orange-950: #431407;
+
+  --color-amber-50: #fffbeb;
+  --color-amber-100: #fef3c7;
+  --color-amber-200: #fde68a;
+  --color-amber-300: #fcd34d;
+  --color-amber-400: #fbbf24;
+  --color-amber-500: #f59e0b;
+  --color-amber-600: #d97706;
+  --color-amber-700: #b45309;
+  --color-amber-800: #92400e;
+  --color-amber-900: #78350f;
+  --color-amber-950: #431407;
+
+  --color-yellow-50: #fefce8;
+  --color-yellow-100: #fef9c3;
+  --color-yellow-200: #fef08a;
+  --color-yellow-300: #fde047;
+  --color-yellow-400: #facc15;
+  --color-yellow-500: #eab308;
+  --color-yellow-600: #ca8a04;
+  --color-yellow-700: #a16207;
+  --color-yellow-800: #854d0e;
+  --color-yellow-900: #713f12;
+  --color-yellow-950: #422006;
+
+  --color-lime-50: #f7fee7;
+  --color-lime-100: #ecfccb;
+  --color-lime-200: #d9f99d;
+  --color-lime-300: #bef264;
+  --color-lime-400: #a3e635;
+  --color-lime-500: #84cc16;
+  --color-lime-600: #65a30d;
+  --color-lime-700: #4d7c0f;
+  --color-lime-800: #3f6212;
+  --color-lime-900: #365314;
+  --color-lime-950: #1a2e05;
+
+  --color-green-50: #f0fdf4;
+  --color-green-100: #dcfce7;
+  --color-green-200: #bbf7d0;
+  --color-green-300: #86efac;
+  --color-green-400: #4ade80;
+  --color-green-500: #22c55e;
+  --color-green-600: #16a34a;
+  --color-green-700: #15803d;
+  --color-green-800: #166534;
+  --color-green-900: #14532d;
+  --color-green-950: #052e16;
+
+  --color-emerald-50: #ecfdf5;
+  --color-emerald-100: #d1fae5;
+  --color-emerald-200: #a7f3d0;
+  --color-emerald-300: #6ee7b7;
+  --color-emerald-400: #34d399;
+  --color-emerald-500: #10b981;
+  --color-emerald-600: #059669;
+  --color-emerald-700: #047857;
+  --color-emerald-800: #065f46;
+  --color-emerald-900: #064e3b;
+  --color-emerald-950: #022c22;
+
+  --color-teal-50: #f0fdfa;
+  --color-teal-100: #ccfbf1;
+  --color-teal-200: #99f6e4;
+  --color-teal-300: #5eead4;
+  --color-teal-400: #2dd4bf;
+  --color-teal-500: #14b8a6;
+  --color-teal-600: #0d9488;
+  --color-teal-700: #0f766e;
+  --color-teal-800: #115e59;
+  --color-teal-900: #134e4a;
+  --color-teal-950: #042f2e;
+
+  --color-cyan-50: #ecfeff;
+  --color-cyan-100: #cffafe;
+  --color-cyan-200: #a5f3fc;
+  --color-cyan-300: #67e8f9;
+  --color-cyan-400: #22d3ee;
+  --color-cyan-500: #06b6d4;
+  --color-cyan-600: #0891b2;
+  --color-cyan-700: #0e7490;
+  --color-cyan-800: #155e75;
+  --color-cyan-900: #164e63;
+  --color-cyan-950: #083344;
+
+  --color-sky-50: #f0f9ff;
+  --color-sky-100: #e0f2fe;
+  --color-sky-200: #bae6fd;
+  --color-sky-300: #7dd3fc;
+  --color-sky-400: #38bdf8;
+  --color-sky-500: #0ea5e9;
+  --color-sky-600: #0284c7;
+  --color-sky-700: #0369a1;
+  --color-sky-800: #075985;
+  --color-sky-900: #0c4a6e;
+  --color-sky-950: #082f49;
+
+  --color-blue-50: #eff6ff;
+  --color-blue-100: #dbeafe;
+  --color-blue-200: #bfdbfe;
+  --color-blue-300: #93c5fd;
+  --color-blue-400: #60a5fa;
+  --color-blue-500: #3b82f6;
+  --color-blue-600: #2563eb;
+  --color-blue-700: #1d4ed8;
+  --color-blue-800: #1e40af;
+  --color-blue-900: #1e3a8a;
+  --color-blue-950: #172554;
+
+  --color-indigo-50: #eef2ff;
+  --color-indigo-100: #e0e7ff;
+  --color-indigo-200: #c7d2fe;
+  --color-indigo-300: #a5b4fc;
+  --color-indigo-400: #818cf8;
+  --color-indigo-500: #6366f1;
+  --color-indigo-600: #4f46e5;
+  --color-indigo-700: #4338ca;
+  --color-indigo-800: #3730a3;
+  --color-indigo-900: #312e81;
+  --color-indigo-950: #1e1b4b;
+
+  --color-violet-50: #f5f3ff;
+  --color-violet-100: #ede9fe;
+  --color-violet-200: #ddd6fe;
+  --color-violet-300: #c4b5fd;
+  --color-violet-400: #a78bfa;
+  --color-violet-500: #8b5cf6;
+  --color-violet-600: #7c3aed;
+  --color-violet-700: #6d28d9;
+  --color-violet-800: #5b21b6;
+  --color-violet-900: #4c1d95;
+  --color-violet-950: #2e1065;
+
+  --color-purple-50: #faf5ff;
+  --color-purple-100: #f3e8ff;
+  --color-purple-200: #e9d5ff;
+  --color-purple-300: #d8b4fe;
+  --color-purple-400: #c084fc;
+  --color-purple-500: #a855f7;
+  --color-purple-600: #9333ea;
+  --color-purple-700: #7e22ce;
+  --color-purple-800: #6b21a8;
+  --color-purple-900: #581c87;
+  --color-purple-950: #3b0764;
+
+  --color-fuchsia-50: #fdf4ff;
+  --color-fuchsia-100: #fae8ff;
+  --color-fuchsia-200: #f5d0fe;
+  --color-fuchsia-300: #f0abfc;
+  --color-fuchsia-400: #e879f9;
+  --color-fuchsia-500: #d946ef;
+  --color-fuchsia-600: #c026d3;
+  --color-fuchsia-700: #a21caf;
+  --color-fuchsia-800: #86198f;
+  --color-fuchsia-900: #701a75;
+  --color-fuchsia-950: #4a044e;
+
+  --color-pink-50: #fdf2f8;
+  --color-pink-100: #fce7f3;
+  --color-pink-200: #fbcfe8;
+  --color-pink-300: #f9a8d4;
+  --color-pink-400: #f472b6;
+  --color-pink-500: #ec4899;
+  --color-pink-600: #db2777;
+  --color-pink-700: #be185d;
+  --color-pink-800: #9d174d;
+  --color-pink-900: #831843;
+  --color-pink-950: #500724;
+
+  --color-rose-50: #fff1f2;
+  --color-rose-100: #ffe4e6;
+  --color-rose-200: #fecdd3;
+  --color-rose-300: #fda4af;
+  --color-rose-400: #fb7185;
+  --color-rose-500: #f43f5e;
+  --color-rose-600: #e11d48;
+  --color-rose-700: #be123c;
+  --color-rose-800: #9f1239;
+  --color-rose-900: #881337;
+  --color-rose-950: #4c0519;
+
+  --color-gray-750: #2d3748;
+
+  --color-metric-critical: #ef4444;
+  --color-metric-critical-bg: rgba(239, 68, 68, 0.6);
+  --color-metric-warning: #eab308;
+  --color-metric-warning-bg: rgba(234, 179, 8, 0.6);
+  --color-metric-normal: #22c55e;
+  --color-metric-normal-bg: rgba(34, 197, 94, 0.6);
+}
diff --git a/frontend-modern/src/utils/__tests__/actionAuditPresentation.branchcov0712.test.ts b/frontend-modern/src/utils/__tests__/actionAuditPresentation.branchcov0712.test.ts
index efb7833b93..e8044364b9 100644
--- a/frontend-modern/src/utils/__tests__/actionAuditPresentation.branchcov0712.test.ts
+++ b/frontend-modern/src/utils/__tests__/actionAuditPresentation.branchcov0712.test.ts
@@ -26,17 +26,17 @@ describe('actionAuditPresentation branch coverage (supplemental)', () => {
       expect(getActionAuditStatePresentation('approved')).toStrictEqual({
         label: 'Approved',
         className:
-          'bg-blue-100 text-blue-800 border-blue-200 dark:bg-blue-900 dark:text-blue-200 dark:border-blue-700',
+          'bg-blue-100 text-blue-800 border-blue-200 dark:bg-blue-900/25 dark:text-blue-200 dark:border-blue-700',
       });
       expect(getActionAuditStatePresentation('rejected')).toStrictEqual({
         label: 'Rejected',
         className:
-          'bg-red-100 text-red-800 border-red-200 dark:bg-red-900 dark:text-red-200 dark:border-red-700',
+          'bg-red-100 text-red-800 border-red-200 dark:bg-red-900/25 dark:text-red-200 dark:border-red-700',
       });
       expect(getActionAuditStatePresentation('executing')).toStrictEqual({
         label: 'Executing',
         className:
-          'bg-sky-100 text-sky-800 border-sky-200 dark:bg-sky-900 dark:text-sky-200 dark:border-sky-700',
+          'bg-sky-100 text-sky-800 border-sky-200 dark:bg-sky-900/25 dark:text-sky-200 dark:border-sky-700',
       });
     });
 
@@ -187,7 +187,7 @@ describe('actionAuditPresentation branch coverage (supplemental)', () => {
       ).toStrictEqual({
         label: 'Failed',
         className:
-          'bg-red-100 text-red-800 border-red-200 dark:bg-red-900 dark:text-red-200 dark:border-red-700',
+          'bg-red-100 text-red-800 border-red-200 dark:bg-red-900/25 dark:text-red-200 dark:border-red-700',
       });
     });
 
@@ -196,7 +196,7 @@ describe('actionAuditPresentation branch coverage (supplemental)', () => {
       expect(getActionAuditRecordStatePresentation({ state: 'executing' })).toStrictEqual({
         label: 'Executing',
         className:
-          'bg-sky-100 text-sky-800 border-sky-200 dark:bg-sky-900 dark:text-sky-200 dark:border-sky-700',
+          'bg-sky-100 text-sky-800 border-sky-200 dark:bg-sky-900/25 dark:text-sky-200 dark:border-sky-700',
       });
     });
   });
diff --git a/frontend-modern/src/utils/__tests__/actionAuditPresentation.branchcov2.test.ts b/frontend-modern/src/utils/__tests__/actionAuditPresentation.branchcov2.test.ts
index e17e6c0366..520ae2874c 100644
--- a/frontend-modern/src/utils/__tests__/actionAuditPresentation.branchcov2.test.ts
+++ b/frontend-modern/src/utils/__tests__/actionAuditPresentation.branchcov2.test.ts
@@ -26,17 +26,17 @@ describe('actionAuditPresentation branch coverage (supplemental)', () => {
       expect(getActionAuditStatePresentation('approved')).toStrictEqual({
         label: 'Approved',
         className:
-          'bg-blue-100 text-blue-800 border-blue-200 dark:bg-blue-900 dark:text-blue-200 dark:border-blue-700',
+          'bg-blue-100 text-blue-800 border-blue-200 dark:bg-blue-900/25 dark:text-blue-200 dark:border-blue-700',
       });
       expect(getActionAuditStatePresentation('rejected')).toStrictEqual({
         label: 'Rejected',
         className:
-          'bg-red-100 text-red-800 border-red-200 dark:bg-red-900 dark:text-red-200 dark:border-red-700',
+          'bg-red-100 text-red-800 border-red-200 dark:bg-red-900/25 dark:text-red-200 dark:border-red-700',
       });
       expect(getActionAuditStatePresentation('executing')).toStrictEqual({
         label: 'Executing',
         className:
-          'bg-sky-100 text-sky-800 border-sky-200 dark:bg-sky-900 dark:text-sky-200 dark:border-sky-700',
+          'bg-sky-100 text-sky-800 border-sky-200 dark:bg-sky-900/25 dark:text-sky-200 dark:border-sky-700',
       });
     });
 
@@ -187,7 +187,7 @@ describe('actionAuditPresentation branch coverage (supplemental)', () => {
       ).toStrictEqual({
         label: 'Failed',
         className:
-          'bg-red-100 text-red-800 border-red-200 dark:bg-red-900 dark:text-red-200 dark:border-red-700',
+          'bg-red-100 text-red-800 border-red-200 dark:bg-red-900/25 dark:text-red-200 dark:border-red-700',
       });
     });
 
@@ -196,7 +196,7 @@ describe('actionAuditPresentation branch coverage (supplemental)', () => {
       expect(getActionAuditRecordStatePresentation({ state: 'executing' })).toStrictEqual({
         label: 'Executing',
         className:
-          'bg-sky-100 text-sky-800 border-sky-200 dark:bg-sky-900 dark:text-sky-200 dark:border-sky-700',
+          'bg-sky-100 text-sky-800 border-sky-200 dark:bg-sky-900/25 dark:text-sky-200 dark:border-sky-700',
       });
     });
   });
diff --git a/frontend-modern/src/utils/__tests__/agentCapabilityPresentation.branchcov0713.test.ts b/frontend-modern/src/utils/__tests__/agentCapabilityPresentation.branchcov0713.test.ts
index de813ef227..324f018aea 100644
--- a/frontend-modern/src/utils/__tests__/agentCapabilityPresentation.branchcov0713.test.ts
+++ b/frontend-modern/src/utils/__tests__/agentCapabilityPresentation.branchcov0713.test.ts
@@ -9,14 +9,14 @@ import type { AgentCapability } from '@/utils/agentCapabilityPresentation';
 // Full badge class strings are mirrored from the source module so assertions
 // describe the documented Tailwind badge composition rather than echoing the
 // function under test. These are the building blocks the module returns.
-const PROXMOX_BADGE = 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-300';
+const PROXMOX_BADGE = 'bg-amber-100 text-amber-800 dark:bg-amber-900/25 dark:text-amber-300';
 const PBS_BADGE = 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300';
-const PMG_BADGE = 'bg-rose-100 text-rose-800 dark:bg-rose-900 dark:text-rose-300';
-const TRUENAS_BADGE = 'bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-300';
-const AVAILABILITY_BADGE = 'bg-sky-100 text-sky-800 dark:bg-sky-900 dark:text-sky-300';
+const PMG_BADGE = 'bg-rose-100 text-rose-800 dark:bg-rose-900/25 dark:text-rose-300';
+const TRUENAS_BADGE = 'bg-cyan-100 text-cyan-800 dark:bg-cyan-900/25 dark:text-cyan-300';
+const AVAILABILITY_BADGE = 'bg-sky-100 text-sky-800 dark:bg-sky-900/25 dark:text-sky-300';
 const KUBERNETES_BADGE =
-  'bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-300';
-const DEFAULT_BADGE = 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300';
+  'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/25 dark:text-emerald-300';
+const DEFAULT_BADGE = 'bg-blue-100 text-blue-800 dark:bg-blue-900/25 dark:text-blue-300';
 
 describe('agentCapabilityPresentation branch coverage', () => {
   describe('getAgentCapabilityLabel', () => {
diff --git a/frontend-modern/src/utils/__tests__/aiFindingPresentation.branchcov0717.test.ts b/frontend-modern/src/utils/__tests__/aiFindingPresentation.branchcov0717.test.ts
index 8c74938dcc..963a08616f 100644
--- a/frontend-modern/src/utils/__tests__/aiFindingPresentation.branchcov0717.test.ts
+++ b/frontend-modern/src/utils/__tests__/aiFindingPresentation.branchcov0717.test.ts
@@ -44,19 +44,19 @@ import {
 const DEFAULT_BADGE_CLASSES = 'border-border bg-surface-alt text-muted';
 const DEFAULT_LOOP_STATE_CLASSES = 'border-border bg-surface-alt text-muted';
 const SKY_RUNTIME_CLASSES =
-  'border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-800 dark:bg-sky-900 dark:text-sky-300';
+  'border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-800 dark:bg-sky-900/25 dark:text-sky-300';
 const BLUE_CLASSES =
-  'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-900 dark:text-blue-300';
+  'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-900/25 dark:text-blue-300';
 const GREEN_CLASSES =
-  'border-green-200 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-900 dark:text-green-300';
+  'border-green-200 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-900/25 dark:text-green-300';
 const INDIGO_CLASSES =
-  'border-indigo-200 bg-indigo-50 text-indigo-700 dark:border-indigo-800 dark:bg-indigo-900 dark:text-indigo-300';
+  'border-indigo-200 bg-indigo-50 text-indigo-700 dark:border-indigo-800 dark:bg-indigo-900/25 dark:text-indigo-300';
 const AMBER_CLASSES =
-  'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-900 dark:text-amber-300';
+  'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-900/25 dark:text-amber-300';
 const RED_CLASSES =
-  'border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-900 dark:text-red-300';
+  'border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-900/25 dark:text-red-300';
 const EMERALD_CLASSES =
-  'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-900 dark:text-emerald-300';
+  'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-900/25 dark:text-emerald-300';
 
 // A finding whose resourceId marks it as a Patrol runtime finding.
 const RUNTIME_SUBJECT = { resourceId: 'ai-service', resourceName: 'other', title: 'other' };
diff --git a/frontend-modern/src/utils/__tests__/aiFindingPresentation.coverage2.test.ts b/frontend-modern/src/utils/__tests__/aiFindingPresentation.coverage2.test.ts
index d9663ce542..0964bab0e1 100644
--- a/frontend-modern/src/utils/__tests__/aiFindingPresentation.coverage2.test.ts
+++ b/frontend-modern/src/utils/__tests__/aiFindingPresentation.coverage2.test.ts
@@ -164,19 +164,19 @@ describe('getFindingSeverityBadgeClasses', () => {
 describe('getFindingSeverityToneClasses', () => {
   it('returns the critical tone classes', () => {
     expect(getFindingSeverityToneClasses('critical')).toBe(
-      'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300',
+      'bg-red-100 text-red-700 dark:bg-red-900/25 dark:text-red-300',
     );
   });
 
   it('returns the warning tone classes', () => {
     expect(getFindingSeverityToneClasses('warning')).toBe(
-      'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300',
+      'bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300',
     );
   });
 
   it('returns the info tone classes', () => {
     expect(getFindingSeverityToneClasses('info')).toBe(
-      'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300',
+      'bg-blue-100 text-blue-700 dark:bg-blue-900/25 dark:text-blue-300',
     );
   });
 
diff --git a/frontend-modern/src/utils/__tests__/aiProviderHealthPresentation.test.ts b/frontend-modern/src/utils/__tests__/aiProviderHealthPresentation.test.ts
index f92c0455cc..0bd6d035dc 100644
--- a/frontend-modern/src/utils/__tests__/aiProviderHealthPresentation.test.ts
+++ b/frontend-modern/src/utils/__tests__/aiProviderHealthPresentation.test.ts
@@ -5,17 +5,17 @@ describe('getAIProviderHealthPresentation', () => {
   it('returns canonical provider-health presentation for each status', () => {
     expect(getAIProviderHealthPresentation('ok')).toEqual({
       label: 'Healthy',
-      badgeClass: 'bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300',
+      badgeClass: 'bg-green-100 dark:bg-green-900/25 text-green-700 dark:text-green-300',
     });
 
     expect(getAIProviderHealthPresentation('error')).toEqual({
       label: 'Issue',
-      badgeClass: 'bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300',
+      badgeClass: 'bg-red-100 dark:bg-red-900/25 text-red-700 dark:text-red-300',
     });
 
     expect(getAIProviderHealthPresentation('checking')).toEqual({
       label: 'Checking...',
-      badgeClass: 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300',
+      badgeClass: 'bg-blue-100 dark:bg-blue-900/25 text-blue-700 dark:text-blue-300',
     });
 
     expect(getAIProviderHealthPresentation('not_configured')).toEqual({
diff --git a/frontend-modern/src/utils/__tests__/aiSettingsPresentation.branchcov0718.test.ts b/frontend-modern/src/utils/__tests__/aiSettingsPresentation.branchcov0718.test.ts
index 5b3a175fc6..ace4a7f32e 100644
--- a/frontend-modern/src/utils/__tests__/aiSettingsPresentation.branchcov0718.test.ts
+++ b/frontend-modern/src/utils/__tests__/aiSettingsPresentation.branchcov0718.test.ts
@@ -33,7 +33,7 @@ describe('getAISettingsReadinessPresentation — branch coverage', () => {
         modelCount: 5,
       }),
     ).toEqual({
-      containerClassName: 'bg-green-50 dark:bg-green-900 text-green-800 dark:text-green-200',
+      containerClassName: 'bg-green-50 dark:bg-green-900/25 text-green-800 dark:text-green-200',
       dotClassName: 'bg-emerald-400',
       summary: 'Ready • 1 provider • 5 models',
     });
@@ -47,7 +47,7 @@ describe('getAISettingsReadinessPresentation — branch coverage', () => {
         modelCount: 0,
       }),
     ).toEqual({
-      containerClassName: 'bg-green-50 dark:bg-green-900 text-green-800 dark:text-green-200',
+      containerClassName: 'bg-green-50 dark:bg-green-900/25 text-green-800 dark:text-green-200',
       dotClassName: 'bg-emerald-400',
       summary: 'Ready • 1 provider • 0 models',
     });
@@ -63,7 +63,7 @@ describe('getAISettingsReadinessPresentation — branch coverage', () => {
         modelCount: 3,
       }),
     ).toEqual({
-      containerClassName: 'bg-green-50 dark:bg-green-900 text-green-800 dark:text-green-200',
+      containerClassName: 'bg-green-50 dark:bg-green-900/25 text-green-800 dark:text-green-200',
       dotClassName: 'bg-emerald-400',
       summary: 'Ready • 0 providers • 3 models',
     });
@@ -79,7 +79,7 @@ describe('getAISettingsReadinessPresentation — branch coverage', () => {
         modelCount: 1,
       }),
     ).toEqual({
-      containerClassName: 'bg-green-50 dark:bg-green-900 text-green-800 dark:text-green-200',
+      containerClassName: 'bg-green-50 dark:bg-green-900/25 text-green-800 dark:text-green-200',
       dotClassName: 'bg-emerald-400',
       summary: 'Ready • 3 providers • 1 models',
     });
@@ -96,7 +96,7 @@ describe('getAISettingsReadinessPresentation — branch coverage', () => {
         modelCount: 9,
       }),
     ).toEqual({
-      containerClassName: 'bg-amber-50 dark:bg-amber-900 text-amber-800 dark:text-amber-200',
+      containerClassName: 'bg-amber-50 dark:bg-amber-900/25 text-amber-800 dark:text-amber-200',
       dotClassName: 'bg-amber-400',
       summary: 'Configure at least one provider above to enable Pulse Assistant and Patrol.',
     });
diff --git a/frontend-modern/src/utils/__tests__/aiSettingsPresentation.test.ts b/frontend-modern/src/utils/__tests__/aiSettingsPresentation.test.ts
index fe6e53899f..2c6dc5789d 100644
--- a/frontend-modern/src/utils/__tests__/aiSettingsPresentation.test.ts
+++ b/frontend-modern/src/utils/__tests__/aiSettingsPresentation.test.ts
@@ -57,7 +57,7 @@ describe('aiSettingsPresentation', () => {
         modelCount: 5,
       }),
     ).toEqual({
-      containerClassName: 'bg-green-50 dark:bg-green-900 text-green-800 dark:text-green-200',
+      containerClassName: 'bg-green-50 dark:bg-green-900/25 text-green-800 dark:text-green-200',
       dotClassName: 'bg-emerald-400',
       summary: 'Ready • 2 providers • 5 models',
     });
@@ -71,7 +71,7 @@ describe('aiSettingsPresentation', () => {
         modelCount: 0,
       }),
     ).toEqual({
-      containerClassName: 'bg-amber-50 dark:bg-amber-900 text-amber-800 dark:text-amber-200',
+      containerClassName: 'bg-amber-50 dark:bg-amber-900/25 text-amber-800 dark:text-amber-200',
       dotClassName: 'bg-amber-400',
       summary: 'Configure at least one provider above to enable Pulse Assistant and Patrol.',
     });
diff --git a/frontend-modern/src/utils/__tests__/alertActivationPresentation.test.ts b/frontend-modern/src/utils/__tests__/alertActivationPresentation.test.ts
index 6b0fdc5cb4..bfdd18eb18 100644
--- a/frontend-modern/src/utils/__tests__/alertActivationPresentation.test.ts
+++ b/frontend-modern/src/utils/__tests__/alertActivationPresentation.test.ts
@@ -27,7 +27,7 @@ describe('getAlertActivationPresentation', () => {
       labelClass: 'text-green-600 dark:text-green-400',
       trackClass: 'relative h-6 w-11 rounded-full transition bg-blue-600',
       thumbClass:
-        'absolute top-[2px] left-[2px] h-5 w-5 rounded-full bg-white shadow transition-all translate-x-5',
+        'absolute top-[2px] left-[2px] h-5 w-5 rounded-full bg-white shadow-sm transition-all translate-x-5',
     });
   });
 
@@ -37,7 +37,7 @@ describe('getAlertActivationPresentation', () => {
       labelClass: 'text-muted',
       trackClass: 'relative h-6 w-11 rounded-full transition bg-surface-hover opacity-50',
       thumbClass:
-        'absolute top-[2px] left-[2px] h-5 w-5 rounded-full bg-white shadow transition-all translate-x-0',
+        'absolute top-[2px] left-[2px] h-5 w-5 rounded-full bg-white shadow-sm transition-all translate-x-0',
     });
   });
 
diff --git a/frontend-modern/src/utils/__tests__/alertFrequencyPresentation.test.ts b/frontend-modern/src/utils/__tests__/alertFrequencyPresentation.test.ts
index 4c5daf6900..d01022abaa 100644
--- a/frontend-modern/src/utils/__tests__/alertFrequencyPresentation.test.ts
+++ b/frontend-modern/src/utils/__tests__/alertFrequencyPresentation.test.ts
@@ -8,7 +8,7 @@ describe('alertFrequencyPresentation', () => {
   it('returns the canonical filtered-range chip presentation', () => {
     expect(getAlertFrequencySelectionPresentation()).toEqual({
       containerClass:
-        'inline-flex items-center gap-2 rounded-full border border-blue-200 bg-blue-50 px-3 py-1 text-xs text-blue-700 dark:border-blue-700 dark:bg-blue-900 dark:text-blue-200',
+        'inline-flex items-center gap-2 rounded-full border border-blue-200 bg-blue-50 px-3 py-1 text-xs text-blue-700 dark:border-blue-700 dark:bg-blue-900/25 dark:text-blue-200',
       labelClass:
         'font-medium uppercase tracking-wide text-[10px] text-blue-600 dark:text-blue-300',
     });
@@ -16,7 +16,7 @@ describe('alertFrequencyPresentation', () => {
 
   it('returns the canonical clear-filter button presentation', () => {
     expect(getAlertFrequencyClearFilterButtonClass()).toBe(
-      'rounded bg-blue-100 px-2 py-0.5 text-xs text-blue-700 transition-colors hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-300 dark:hover:bg-blue-800',
+      'rounded-sm bg-blue-100 px-2 py-0.5 text-xs text-blue-700 transition-colors hover:bg-blue-200 dark:bg-blue-900/25 dark:text-blue-300 dark:hover:bg-blue-800',
     );
   });
 });
diff --git a/frontend-modern/src/utils/__tests__/alertGroupingPresentation.coverage.test.ts b/frontend-modern/src/utils/__tests__/alertGroupingPresentation.coverage.test.ts
index 76a16fd326..e8a915f752 100644
--- a/frontend-modern/src/utils/__tests__/alertGroupingPresentation.coverage.test.ts
+++ b/frontend-modern/src/utils/__tests__/alertGroupingPresentation.coverage.test.ts
@@ -7,7 +7,7 @@ import {
 describe('getAlertGroupingCardClass', () => {
   it('emits the active presentation when selected', () => {
     expect(getAlertGroupingCardClass(true)).toBe(
-      'relative flex items-center gap-2 rounded-md border-2 p-3 transition-all border-blue-500 bg-blue-50 shadow-sm dark:bg-blue-900',
+      'relative flex items-center gap-2 rounded-md border-2 p-3 transition-all border-blue-500 bg-blue-50 shadow-xs dark:bg-blue-900/25',
     );
   });
 
@@ -33,13 +33,13 @@ describe('getAlertGroupingCardClass', () => {
 describe('getAlertGroupingCheckboxClass', () => {
   it('emits the checked presentation when selected', () => {
     expect(getAlertGroupingCheckboxClass(true)).toBe(
-      'flex h-4 w-4 items-center justify-center rounded border-2 border-blue-500 bg-blue-500',
+      'flex h-4 w-4 items-center justify-center rounded-sm border-2 border-blue-500 bg-blue-500',
     );
   });
 
   it('emits the unchecked presentation when not selected', () => {
     expect(getAlertGroupingCheckboxClass(false)).toBe(
-      'flex h-4 w-4 items-center justify-center rounded border-2 border-border',
+      'flex h-4 w-4 items-center justify-center rounded-sm border-2 border-border',
     );
   });
 
diff --git a/frontend-modern/src/utils/__tests__/alertGroupingPresentation.test.ts b/frontend-modern/src/utils/__tests__/alertGroupingPresentation.test.ts
index 3316be3745..164237343b 100644
--- a/frontend-modern/src/utils/__tests__/alertGroupingPresentation.test.ts
+++ b/frontend-modern/src/utils/__tests__/alertGroupingPresentation.test.ts
@@ -7,13 +7,13 @@ import {
 describe('alertGroupingPresentation', () => {
   it('returns the selected grouping card presentation', () => {
     expect(getAlertGroupingCardClass(true)).toBe(
-      'relative flex items-center gap-2 rounded-md border-2 p-3 transition-all border-blue-500 bg-blue-50 shadow-sm dark:bg-blue-900',
+      'relative flex items-center gap-2 rounded-md border-2 p-3 transition-all border-blue-500 bg-blue-50 shadow-xs dark:bg-blue-900/25',
     );
   });
 
   it('returns the unselected grouping checkbox presentation', () => {
     expect(getAlertGroupingCheckboxClass(false)).toBe(
-      'flex h-4 w-4 items-center justify-center rounded border-2 border-border',
+      'flex h-4 w-4 items-center justify-center rounded-sm border-2 border-border',
     );
   });
 });
diff --git a/frontend-modern/src/utils/__tests__/alertHistoryPresentation.branchcov0712c.test.ts b/frontend-modern/src/utils/__tests__/alertHistoryPresentation.branchcov0712c.test.ts
index e183685169..908e3481e8 100644
--- a/frontend-modern/src/utils/__tests__/alertHistoryPresentation.branchcov0712c.test.ts
+++ b/frontend-modern/src/utils/__tests__/alertHistoryPresentation.branchcov0712c.test.ts
@@ -15,12 +15,12 @@ import { getAlertHistoryResourceTypeBadgeClass } from '@/utils/alertHistoryPrese
 // variants the sibling suite never checked) rather than echoing a partial
 // substring.
 const VM_NODE_BADGE =
-  'text-xs px-1 py-0.5 rounded bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300';
+  'text-xs px-1 py-0.5 rounded-sm bg-blue-100 dark:bg-blue-900/25 text-blue-700 dark:text-blue-300';
 const CONTAINER_BADGE =
-  'text-xs px-1 py-0.5 rounded bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300';
+  'text-xs px-1 py-0.5 rounded-sm bg-green-100 dark:bg-green-900/25 text-green-700 dark:text-green-300';
 const STORAGE_BADGE =
-  'text-xs px-1 py-0.5 rounded bg-orange-100 dark:bg-orange-900 text-orange-700 dark:text-orange-300';
-const DEFAULT_BADGE = 'text-xs px-1 py-0.5 rounded bg-surface-hover text-base-content';
+  'text-xs px-1 py-0.5 rounded-sm bg-orange-100 dark:bg-orange-900 text-orange-700 dark:text-orange-300';
+const DEFAULT_BADGE = 'text-xs px-1 py-0.5 rounded-sm bg-surface-hover text-base-content';
 
 describe('getAlertHistoryResourceTypeBadgeClass — vm/node arm (first if)', () => {
   it('returns the exact blue badge for lowercase "vm" (full dark: variants)', () => {
diff --git a/frontend-modern/src/utils/__tests__/alertIncidentPresentation.branchcov0712b.test.ts b/frontend-modern/src/utils/__tests__/alertIncidentPresentation.branchcov0712b.test.ts
index 093420ab23..6783424add 100644
--- a/frontend-modern/src/utils/__tests__/alertIncidentPresentation.branchcov0712b.test.ts
+++ b/frontend-modern/src/utils/__tests__/alertIncidentPresentation.branchcov0712b.test.ts
@@ -24,8 +24,8 @@ describe('getAlertHistoryStatusPresentation — branch coverage', () => {
     expect(getAlertHistoryStatusPresentation('  ACTIVE  ')).toStrictEqual({
       label: 'active',
       className:
-        'text-xs px-2 py-0.5 rounded bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300 font-medium',
-      rowClassName: 'bg-red-50 dark:bg-red-900',
+        'text-xs px-2 py-0.5 rounded-sm bg-red-100 dark:bg-red-900/25 text-red-700 dark:text-red-300 font-medium',
+      rowClassName: 'bg-red-50 dark:bg-red-900/25',
     });
   });
 
@@ -33,7 +33,7 @@ describe('getAlertHistoryStatusPresentation — branch coverage', () => {
     expect(getAlertHistoryStatusPresentation('Acknowledged')).toStrictEqual({
       label: 'acknowledged',
       className:
-        'text-xs px-2 py-0.5 rounded bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-300',
+        'text-xs px-2 py-0.5 rounded-sm bg-yellow-100 dark:bg-yellow-900/25 text-yellow-700 dark:text-yellow-300',
       rowClassName: '',
     });
   });
@@ -43,7 +43,7 @@ describe('getAlertHistoryStatusPresentation — branch coverage', () => {
     // keeps the left operand verbatim.
     expect(getAlertHistoryStatusPresentation('pending')).toStrictEqual({
       label: 'pending',
-      className: 'text-xs px-2 py-0.5 rounded bg-surface-hover text-base-content',
+      className: 'text-xs px-2 py-0.5 rounded-sm bg-surface-hover text-base-content',
       rowClassName: '',
     });
   });
@@ -51,7 +51,7 @@ describe('getAlertHistoryStatusPresentation — branch coverage', () => {
   it('lowercases an unrecognized status used as the label', () => {
     expect(getAlertHistoryStatusPresentation('PENDING')).toStrictEqual({
       label: 'pending',
-      className: 'text-xs px-2 py-0.5 rounded bg-surface-hover text-base-content',
+      className: 'text-xs px-2 py-0.5 rounded-sm bg-surface-hover text-base-content',
       rowClassName: '',
     });
   });
@@ -59,7 +59,7 @@ describe('getAlertHistoryStatusPresentation — branch coverage', () => {
   it('falls back to "resolved" when status is null (?? right operand)', () => {
     expect(getAlertHistoryStatusPresentation(null)).toStrictEqual({
       label: 'resolved',
-      className: 'text-xs px-2 py-0.5 rounded bg-surface-hover text-base-content',
+      className: 'text-xs px-2 py-0.5 rounded-sm bg-surface-hover text-base-content',
       rowClassName: '',
     });
   });
@@ -67,7 +67,7 @@ describe('getAlertHistoryStatusPresentation — branch coverage', () => {
   it('falls back to "resolved" when status is undefined (?? right operand)', () => {
     expect(getAlertHistoryStatusPresentation(undefined)).toStrictEqual({
       label: 'resolved',
-      className: 'text-xs px-2 py-0.5 rounded bg-surface-hover text-base-content',
+      className: 'text-xs px-2 py-0.5 rounded-sm bg-surface-hover text-base-content',
       rowClassName: '',
     });
   });
@@ -75,7 +75,7 @@ describe('getAlertHistoryStatusPresentation — branch coverage', () => {
   it('falls back to "resolved" for a whitespace-only status (|| right operand)', () => {
     expect(getAlertHistoryStatusPresentation('   ')).toStrictEqual({
       label: 'resolved',
-      className: 'text-xs px-2 py-0.5 rounded bg-surface-hover text-base-content',
+      className: 'text-xs px-2 py-0.5 rounded-sm bg-surface-hover text-base-content',
       rowClassName: '',
     });
   });
@@ -83,7 +83,7 @@ describe('getAlertHistoryStatusPresentation — branch coverage', () => {
   it('falls back to "resolved" for an empty-string status (?? passes "" through, || right operand)', () => {
     expect(getAlertHistoryStatusPresentation('')).toStrictEqual({
       label: 'resolved',
-      className: 'text-xs px-2 py-0.5 rounded bg-surface-hover text-base-content',
+      className: 'text-xs px-2 py-0.5 rounded-sm bg-surface-hover text-base-content',
       rowClassName: '',
     });
   });
diff --git a/frontend-modern/src/utils/__tests__/alertIncidentPresentation.branchcov0717.test.ts b/frontend-modern/src/utils/__tests__/alertIncidentPresentation.branchcov0717.test.ts
index 4d4ddda3a7..fc890d063b 100644
--- a/frontend-modern/src/utils/__tests__/alertIncidentPresentation.branchcov0717.test.ts
+++ b/frontend-modern/src/utils/__tests__/alertIncidentPresentation.branchcov0717.test.ts
@@ -101,7 +101,7 @@ describe('getAlertIncidentStatusPresentation — switch branch coverage', () =>
     const expected = {
       label: 'acknowledged',
       className:
-        'px-2 py-0.5 rounded bg-emerald-100 dark:bg-emerald-900 text-emerald-700 dark:text-emerald-300',
+        'px-2 py-0.5 rounded-sm bg-emerald-100 dark:bg-emerald-900/25 text-emerald-700 dark:text-emerald-300',
     };
     expect(getAlertIncidentStatusPresentation('acknowledged')).toStrictEqual(expected);
     // open + acknowledged flag normalises to 'acknowledged' label -> same case.
@@ -111,28 +111,29 @@ describe('getAlertIncidentStatusPresentation — switch branch coverage', () =>
   it('hits the "open" case', () => {
     expect(getAlertIncidentStatusPresentation('open')).toStrictEqual({
       label: 'open',
-      className: 'px-2 py-0.5 rounded bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300',
+      className:
+        'px-2 py-0.5 rounded-sm bg-red-100 dark:bg-red-900/25 text-red-700 dark:text-red-300',
     });
   });
 
   it('routes "resolved" through the default case', () => {
     expect(getAlertIncidentStatusPresentation('resolved')).toStrictEqual({
       label: 'resolved',
-      className: 'px-2 py-0.5 rounded bg-surface-hover text-base-content',
+      className: 'px-2 py-0.5 rounded-sm bg-surface-hover text-base-content',
     });
   });
 
   it('routes a nullish status onto the default case with the "unknown" label', () => {
     expect(getAlertIncidentStatusPresentation(undefined)).toStrictEqual({
       label: 'unknown',
-      className: 'px-2 py-0.5 rounded bg-surface-hover text-base-content',
+      className: 'px-2 py-0.5 rounded-sm bg-surface-hover text-base-content',
     });
   });
 
   it('routes an unrecognised status onto the default case, echoing the normalised label', () => {
     expect(getAlertIncidentStatusPresentation('fizzing')).toStrictEqual({
       label: 'fizzing',
-      className: 'px-2 py-0.5 rounded bg-surface-hover text-base-content',
+      className: 'px-2 py-0.5 rounded-sm bg-surface-hover text-base-content',
     });
   });
 });
@@ -140,31 +141,31 @@ describe('getAlertIncidentStatusPresentation — switch branch coverage', () =>
 describe('getAlertIncidentLevelBadgeClass — branch coverage', () => {
   it('returns the critical palette for level === "critical"', () => {
     expect(getAlertIncidentLevelBadgeClass('critical')).toBe(
-      'inline-flex shrink-0 items-center rounded px-1.5 py-0.5 text-[10px] font-semibold uppercase bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300',
+      'inline-flex shrink-0 items-center rounded-sm px-1.5 py-0.5 text-[10px] font-semibold uppercase bg-red-100 text-red-700 dark:bg-red-900/25 dark:text-red-300',
     );
   });
 
   it('returns the warning palette for the canonical "warning" level', () => {
     expect(getAlertIncidentLevelBadgeClass('warning')).toBe(
-      'inline-flex shrink-0 items-center rounded px-1.5 py-0.5 text-[10px] font-semibold uppercase bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300',
+      'inline-flex shrink-0 items-center rounded-sm px-1.5 py-0.5 text-[10px] font-semibold uppercase bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300',
     );
   });
 
   it('falls back to the warning palette for a null level', () => {
     expect(getAlertIncidentLevelBadgeClass(null)).toBe(
-      'inline-flex shrink-0 items-center rounded px-1.5 py-0.5 text-[10px] font-semibold uppercase bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300',
+      'inline-flex shrink-0 items-center rounded-sm px-1.5 py-0.5 text-[10px] font-semibold uppercase bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300',
     );
   });
 
   it('falls back to the warning palette for an undefined level', () => {
     expect(getAlertIncidentLevelBadgeClass(undefined)).toBe(
-      'inline-flex shrink-0 items-center rounded px-1.5 py-0.5 text-[10px] font-semibold uppercase bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300',
+      'inline-flex shrink-0 items-center rounded-sm px-1.5 py-0.5 text-[10px] font-semibold uppercase bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300',
     );
   });
 
   it('returns the informational palette for info', () => {
     expect(getAlertIncidentLevelBadgeClass('info')).toBe(
-      'inline-flex shrink-0 items-center rounded px-1.5 py-0.5 text-[10px] font-semibold uppercase bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300',
+      'inline-flex shrink-0 items-center rounded-sm px-1.5 py-0.5 text-[10px] font-semibold uppercase bg-blue-100 text-blue-700 dark:bg-blue-900/25 dark:text-blue-300',
     );
   });
 });
@@ -174,8 +175,8 @@ describe('getAlertHistoryStatusPresentation — branch coverage', () => {
     expect(getAlertHistoryStatusPresentation('active')).toStrictEqual({
       label: 'active',
       className:
-        'text-xs px-2 py-0.5 rounded bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300 font-medium',
-      rowClassName: 'bg-red-50 dark:bg-red-900',
+        'text-xs px-2 py-0.5 rounded-sm bg-red-100 dark:bg-red-900/25 text-red-700 dark:text-red-300 font-medium',
+      rowClassName: 'bg-red-50 dark:bg-red-900/25',
     });
   });
 
@@ -189,7 +190,7 @@ describe('getAlertHistoryStatusPresentation — branch coverage', () => {
     expect(getAlertHistoryStatusPresentation('acknowledged')).toStrictEqual({
       label: 'acknowledged',
       className:
-        'text-xs px-2 py-0.5 rounded bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-300',
+        'text-xs px-2 py-0.5 rounded-sm bg-yellow-100 dark:bg-yellow-900/25 text-yellow-700 dark:text-yellow-300',
       rowClassName: '',
     });
   });
@@ -197,7 +198,7 @@ describe('getAlertHistoryStatusPresentation — branch coverage', () => {
   it('returns the resolved presentation for "resolved" (falls through both guards)', () => {
     expect(getAlertHistoryStatusPresentation('resolved')).toStrictEqual({
       label: 'resolved',
-      className: 'text-xs px-2 py-0.5 rounded bg-surface-hover text-base-content',
+      className: 'text-xs px-2 py-0.5 rounded-sm bg-surface-hover text-base-content',
       rowClassName: '',
     });
   });
@@ -205,7 +206,7 @@ describe('getAlertHistoryStatusPresentation — branch coverage', () => {
   it('uses the truthy `||` left operand for an unrecognised non-empty status', () => {
     expect(getAlertHistoryStatusPresentation('suppressed')).toStrictEqual({
       label: 'suppressed',
-      className: 'text-xs px-2 py-0.5 rounded bg-surface-hover text-base-content',
+      className: 'text-xs px-2 py-0.5 rounded-sm bg-surface-hover text-base-content',
       rowClassName: '',
     });
   });
@@ -214,7 +215,7 @@ describe('getAlertHistoryStatusPresentation — branch coverage', () => {
     // undefined -> '' -> '' || 'resolved'.
     expect(getAlertHistoryStatusPresentation(undefined)).toStrictEqual({
       label: 'resolved',
-      className: 'text-xs px-2 py-0.5 rounded bg-surface-hover text-base-content',
+      className: 'text-xs px-2 py-0.5 rounded-sm bg-surface-hover text-base-content',
       rowClassName: '',
     });
   });
@@ -222,7 +223,7 @@ describe('getAlertHistoryStatusPresentation — branch coverage', () => {
   it('substitutes "resolved" for a null status via the ??-coalesce arm then || fallback', () => {
     expect(getAlertHistoryStatusPresentation(null)).toStrictEqual({
       label: 'resolved',
-      className: 'text-xs px-2 py-0.5 rounded bg-surface-hover text-base-content',
+      className: 'text-xs px-2 py-0.5 rounded-sm bg-surface-hover text-base-content',
       rowClassName: '',
     });
   });
@@ -230,7 +231,7 @@ describe('getAlertHistoryStatusPresentation — branch coverage', () => {
   it('substitutes "resolved" for a whitespace-only status (trim -> "" -> || fallback)', () => {
     expect(getAlertHistoryStatusPresentation('   ')).toStrictEqual({
       label: 'resolved',
-      className: 'text-xs px-2 py-0.5 rounded bg-surface-hover text-base-content',
+      className: 'text-xs px-2 py-0.5 rounded-sm bg-surface-hover text-base-content',
       rowClassName: '',
     });
   });
@@ -318,7 +319,7 @@ describe('non-branching label/state helpers — concrete value pins', () => {
 describe('event-filter class helpers — variant + selected branch coverage', () => {
   it('getAlertIncidentEventFilterContainerClass returns the panel layout for variant "panel"', () => {
     expect(getAlertIncidentEventFilterContainerClass('panel')).toBe(
-      'flex flex-wrap items-center gap-1.5 rounded border border-border bg-surface-alt/50 p-2',
+      'flex flex-wrap items-center gap-1.5 rounded-sm border border-border p-2',
     );
   });
 
@@ -342,13 +343,13 @@ describe('event-filter class helpers — variant + selected branch coverage', ()
 
   it('getAlertIncidentEventFilterActionButtonClass returns the constant action class', () => {
     expect(getAlertIncidentEventFilterActionButtonClass()).toBe(
-      'px-2 py-0.5 rounded border border-border text-muted hover:bg-surface-hover',
+      'px-2 py-0.5 rounded-sm border border-border text-muted hover:bg-surface-hover',
     );
   });
 
   it('getAlertIncidentEventFilterChipClass returns the selected (blue) chip regardless of variant', () => {
     const selected =
-      'px-2 py-0.5 rounded border text-[10px] transition-colors border-blue-300 bg-blue-100 text-blue-700 dark:border-blue-800 dark:bg-blue-900 dark:text-blue-300';
+      'px-2 py-0.5 rounded-sm border text-[10px] transition-colors border-blue-300 bg-blue-100 text-blue-700 dark:border-blue-800 dark:bg-blue-900/25 dark:text-blue-300';
     // selected short-circuits before the variant check, so both variants are equal.
     expect(getAlertIncidentEventFilterChipClass(true, 'compact')).toBe(selected);
     expect(getAlertIncidentEventFilterChipClass(true, 'panel')).toBe(selected);
@@ -356,13 +357,13 @@ describe('event-filter class helpers — variant + selected branch coverage', ()
 
   it('getAlertIncidentEventFilterChipClass returns the unselected panel chip (variant === "panel")', () => {
     expect(getAlertIncidentEventFilterChipClass(false, 'panel')).toBe(
-      'px-2 py-0.5 rounded border text-[10px] transition-colors font-medium border-border text-muted hover:bg-surface-alt',
+      'px-2 py-0.5 rounded-sm border text-[10px] transition-colors font-medium border-border text-muted hover:bg-surface-alt',
     );
   });
 
   it('getAlertIncidentEventFilterChipClass returns the unselected compact chip (variant !== "panel")', () => {
     expect(getAlertIncidentEventFilterChipClass(false, 'compact')).toBe(
-      'px-2 py-0.5 rounded border text-[10px] transition-colors border-border text-slate-500',
+      'px-2 py-0.5 rounded-sm border text-[10px] transition-colors border-border text-slate-500',
     );
   });
 });
@@ -370,22 +371,22 @@ describe('event-filter class helpers — variant + selected branch coverage', ()
 describe('timeline + card class helpers — branch coverage', () => {
   it('getAlertIncidentTimelineEventCardClass uses bg-surface-alt for variant "alt"', () => {
     expect(getAlertIncidentTimelineEventCardClass('alt')).toBe(
-      'rounded border border-border bg-surface-alt p-2 whitespace-normal break-words',
+      'rounded-sm border border-border bg-surface-alt p-2 whitespace-normal wrap-break-word',
     );
   });
 
   it('getAlertIncidentTimelineEventCardClass uses bg-surface for variant "surface"', () => {
     expect(getAlertIncidentTimelineEventCardClass('surface')).toBe(
-      'rounded border border-border bg-surface p-2 whitespace-normal break-words',
+      'rounded-sm border border-border bg-surface p-2 whitespace-normal wrap-break-word',
     );
   });
 
   it('pins the remaining constant class helpers (regression guards)', () => {
     expect(getAlertIncidentAcknowledgedBadgeClass()).toBe(
-      'px-2 py-0.5 rounded bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300',
+      'px-2 py-0.5 rounded-sm bg-emerald-100 text-emerald-700 dark:bg-emerald-900/25 dark:text-emerald-300',
     );
     expect(getAlertIncidentNoteTextareaClass()).toBe(
-      'w-full rounded border border-border bg-surface p-2 text-xs text-base-content',
+      'w-full rounded-sm border border-border bg-surface p-2 text-xs text-base-content',
     );
     expect(getAlertIncidentNoteSaveButtonClass()).toBe(
       'px-3 py-1.5 text-xs font-medium border rounded-md transition-all bg-surface text-base-content border-border hover:bg-surface-hover disabled:opacity-50 disabled:cursor-not-allowed',
@@ -399,7 +400,9 @@ describe('timeline + card class helpers — branch coverage', () => {
     );
     expect(getAlertIncidentTimelineCommandClass()).toBe('mt-1 font-mono text-xs text-base-content');
     expect(getAlertIncidentTimelineOutputClass()).toBe('mt-1 text-xs text-muted');
-    expect(getAlertResourceIncidentCardClass()).toBe('rounded border border-border bg-surface p-3');
+    expect(getAlertResourceIncidentCardClass()).toBe(
+      'rounded-sm border border-border bg-surface p-3',
+    );
     expect(getAlertResourceIncidentSummaryRowClass()).toBe(
       'mt-2 flex flex-wrap items-center justify-between gap-2 text-xs text-muted',
     );
@@ -407,7 +410,7 @@ describe('timeline + card class helpers — branch coverage', () => {
       'flex flex-wrap items-center gap-1.5',
     );
     expect(getAlertResourceIncidentActivityChipClass()).toBe(
-      'rounded bg-surface-alt px-2 py-0.5 text-[10px] font-medium text-base-content',
+      'rounded-sm bg-surface-alt px-2 py-0.5 text-[10px] font-medium text-base-content',
     );
     expect(getAlertResourceIncidentToggleButtonClass()).toBe(
       'px-2 py-1 text-[10px] border rounded-md border-border text-muted hover:bg-surface-hover',
diff --git a/frontend-modern/src/utils/__tests__/alertIncidentPresentation.test.ts b/frontend-modern/src/utils/__tests__/alertIncidentPresentation.test.ts
index 21f083db55..2e4ad59696 100644
--- a/frontend-modern/src/utils/__tests__/alertIncidentPresentation.test.ts
+++ b/frontend-modern/src/utils/__tests__/alertIncidentPresentation.test.ts
@@ -61,17 +61,18 @@ describe('alertIncidentPresentation', () => {
     expect(getAlertIncidentStatusPresentation('open', true)).toEqual({
       label: 'acknowledged',
       className:
-        'px-2 py-0.5 rounded bg-emerald-100 dark:bg-emerald-900 text-emerald-700 dark:text-emerald-300',
+        'px-2 py-0.5 rounded-sm bg-emerald-100 dark:bg-emerald-900/25 text-emerald-700 dark:text-emerald-300',
     });
 
     expect(getAlertIncidentStatusPresentation('open', false)).toEqual({
       label: 'open',
-      className: 'px-2 py-0.5 rounded bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300',
+      className:
+        'px-2 py-0.5 rounded-sm bg-red-100 dark:bg-red-900/25 text-red-700 dark:text-red-300',
     });
 
     expect(getAlertIncidentStatusPresentation('resolved', false)).toEqual({
       label: 'resolved',
-      className: 'px-2 py-0.5 rounded bg-surface-hover text-base-content',
+      className: 'px-2 py-0.5 rounded-sm bg-surface-hover text-base-content',
     });
   });
 
@@ -86,20 +87,20 @@ describe('alertIncidentPresentation', () => {
     expect(getAlertHistoryStatusPresentation('active')).toEqual({
       label: 'active',
       className:
-        'text-xs px-2 py-0.5 rounded bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300 font-medium',
-      rowClassName: 'bg-red-50 dark:bg-red-900',
+        'text-xs px-2 py-0.5 rounded-sm bg-red-100 dark:bg-red-900/25 text-red-700 dark:text-red-300 font-medium',
+      rowClassName: 'bg-red-50 dark:bg-red-900/25',
     });
 
     expect(getAlertHistoryStatusPresentation('acknowledged')).toEqual({
       label: 'acknowledged',
       className:
-        'text-xs px-2 py-0.5 rounded bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-300',
+        'text-xs px-2 py-0.5 rounded-sm bg-yellow-100 dark:bg-yellow-900/25 text-yellow-700 dark:text-yellow-300',
       rowClassName: '',
     });
 
     expect(getAlertHistoryStatusPresentation('resolved')).toEqual({
       label: 'resolved',
-      className: 'text-xs px-2 py-0.5 rounded bg-surface-hover text-base-content',
+      className: 'text-xs px-2 py-0.5 rounded-sm bg-surface-hover text-base-content',
       rowClassName: '',
     });
   });
@@ -150,7 +151,7 @@ describe('alertIncidentPresentation', () => {
       'flex flex-wrap items-center gap-2 text-[10px] text-muted',
     );
     expect(getAlertIncidentEventFilterContainerClass('panel')).toBe(
-      'flex flex-wrap items-center gap-1.5 rounded border border-border bg-surface-alt/50 p-2',
+      'flex flex-wrap items-center gap-1.5 rounded-sm border border-border p-2',
     );
     expect(getAlertIncidentEventFilterLabelClass('compact')).toBe(
       'uppercase tracking-wide text-[9px] text-muted',
@@ -159,31 +160,31 @@ describe('alertIncidentPresentation', () => {
       'mr-1 text-xs font-medium text-muted',
     );
     expect(getAlertIncidentEventFilterActionButtonClass()).toBe(
-      'px-2 py-0.5 rounded border border-border text-muted hover:bg-surface-hover',
+      'px-2 py-0.5 rounded-sm border border-border text-muted hover:bg-surface-hover',
     );
     expect(getAlertIncidentEventFilterChipClass(true, 'compact')).toBe(
-      'px-2 py-0.5 rounded border text-[10px] transition-colors border-blue-300 bg-blue-100 text-blue-700 dark:border-blue-800 dark:bg-blue-900 dark:text-blue-300',
+      'px-2 py-0.5 rounded-sm border text-[10px] transition-colors border-blue-300 bg-blue-100 text-blue-700 dark:border-blue-800 dark:bg-blue-900/25 dark:text-blue-300',
     );
     expect(getAlertIncidentEventFilterChipClass(false, 'compact')).toBe(
-      'px-2 py-0.5 rounded border text-[10px] transition-colors border-border text-slate-500',
+      'px-2 py-0.5 rounded-sm border text-[10px] transition-colors border-border text-slate-500',
     );
     expect(getAlertIncidentEventFilterChipClass(false, 'panel')).toBe(
-      'px-2 py-0.5 rounded border text-[10px] transition-colors font-medium border-border text-muted hover:bg-surface-alt',
+      'px-2 py-0.5 rounded-sm border text-[10px] transition-colors font-medium border-border text-muted hover:bg-surface-alt',
     );
   });
 
   it('returns canonical incident timeline presentation classes', () => {
     expect(getAlertIncidentAcknowledgedBadgeClass()).toBe(
-      'px-2 py-0.5 rounded bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300',
+      'px-2 py-0.5 rounded-sm bg-emerald-100 text-emerald-700 dark:bg-emerald-900/25 dark:text-emerald-300',
     );
     expect(getAlertIncidentTimelineEventCardClass('alt')).toBe(
-      'rounded border border-border bg-surface-alt p-2 whitespace-normal break-words',
+      'rounded-sm border border-border bg-surface-alt p-2 whitespace-normal wrap-break-word',
     );
     expect(getAlertIncidentTimelineEventCardClass('surface')).toBe(
-      'rounded border border-border bg-surface p-2 whitespace-normal break-words',
+      'rounded-sm border border-border bg-surface p-2 whitespace-normal wrap-break-word',
     );
     expect(getAlertIncidentNoteTextareaClass()).toBe(
-      'w-full rounded border border-border bg-surface p-2 text-xs text-base-content',
+      'w-full rounded-sm border border-border bg-surface p-2 text-xs text-base-content',
     );
     expect(getAlertIncidentNoteSaveButtonClass()).toBe(
       'px-3 py-1.5 text-xs font-medium border rounded-md transition-all bg-surface text-base-content border-border hover:bg-surface-hover disabled:opacity-50 disabled:cursor-not-allowed',
@@ -200,7 +201,9 @@ describe('alertIncidentPresentation', () => {
   });
 
   it('returns canonical resource incident card presentation classes', () => {
-    expect(getAlertResourceIncidentCardClass()).toBe('rounded border border-border bg-surface p-3');
+    expect(getAlertResourceIncidentCardClass()).toBe(
+      'rounded-sm border border-border bg-surface p-3',
+    );
     expect(getAlertResourceIncidentSummaryRowClass()).toBe(
       'mt-2 flex flex-wrap items-center justify-between gap-2 text-xs text-muted',
     );
@@ -208,7 +211,7 @@ describe('alertIncidentPresentation', () => {
       'flex flex-wrap items-center gap-1.5',
     );
     expect(getAlertResourceIncidentActivityChipClass()).toBe(
-      'rounded bg-surface-alt px-2 py-0.5 text-[10px] font-medium text-base-content',
+      'rounded-sm bg-surface-alt px-2 py-0.5 text-[10px] font-medium text-base-content',
     );
     expect(getAlertResourceIncidentToggleButtonClass()).toBe(
       'px-2 py-1 text-[10px] border rounded-md border-border text-muted hover:bg-surface-hover',
diff --git a/frontend-modern/src/utils/__tests__/alertOverviewPresentation.coverage.test.ts b/frontend-modern/src/utils/__tests__/alertOverviewPresentation.coverage.test.ts
index a39eb5d071..87646cb1ea 100644
--- a/frontend-modern/src/utils/__tests__/alertOverviewPresentation.coverage.test.ts
+++ b/frontend-modern/src/utils/__tests__/alertOverviewPresentation.coverage.test.ts
@@ -39,7 +39,7 @@ describe('alertOverviewPresentation coverage', () => {
       const presentation = getAlertOverviewCardPresentation('warning', false, false);
 
       expect(presentation.cardClassName).toBe(
-        'border rounded-md p-3 sm:p-4 transition-all border-yellow-300 dark:border-yellow-800 bg-yellow-50 dark:bg-yellow-900',
+        'border rounded-md p-3 sm:p-4 transition-all border-yellow-300 dark:border-yellow-800 bg-yellow-50 dark:bg-yellow-900/25',
       );
       expect(presentation.iconClassName).toBe(
         'mr-3 mt-0.5 transition-all text-yellow-600 dark:text-yellow-400',
diff --git a/frontend-modern/src/utils/__tests__/alertOverviewPresentation.test.ts b/frontend-modern/src/utils/__tests__/alertOverviewPresentation.test.ts
index 7228c40c30..1c285dfe43 100644
--- a/frontend-modern/src/utils/__tests__/alertOverviewPresentation.test.ts
+++ b/frontend-modern/src/utils/__tests__/alertOverviewPresentation.test.ts
@@ -299,7 +299,7 @@ describe('alertOverviewPresentation', () => {
   it('returns canonical active alert card presentation', () => {
     expect(getAlertOverviewCardPresentation('critical', false, false)).toEqual({
       cardClassName:
-        'border rounded-md p-3 sm:p-4 transition-all border-red-300 dark:border-red-800 bg-red-50 dark:bg-red-900',
+        'border rounded-md p-3 sm:p-4 transition-all border-red-300 dark:border-red-800 bg-red-50 dark:bg-red-900/25',
       iconClassName: 'mr-3 mt-0.5 transition-all text-red-600 dark:text-red-400',
       resourceClassName: 'text-sm font-medium truncate text-red-700 dark:text-red-400',
     });
@@ -311,25 +311,25 @@ describe('alertOverviewPresentation', () => {
     });
     expect(getAlertOverviewCardPresentation('info', false, false)).toEqual({
       cardClassName:
-        'border rounded-md p-3 sm:p-4 transition-all border-blue-300 dark:border-blue-800 bg-blue-50 dark:bg-blue-900',
+        'border rounded-md p-3 sm:p-4 transition-all border-blue-300 dark:border-blue-800 bg-blue-50 dark:bg-blue-900/25',
       iconClassName: 'mr-3 mt-0.5 transition-all text-blue-600 dark:text-blue-400',
       resourceClassName: 'text-sm font-medium truncate text-blue-700 dark:text-blue-400',
     });
     expect(getAlertOverviewCardPresentation('notice', false, false)).toEqual({
       cardClassName:
-        'border rounded-md p-3 sm:p-4 transition-all border-yellow-300 dark:border-yellow-800 bg-yellow-50 dark:bg-yellow-900',
+        'border rounded-md p-3 sm:p-4 transition-all border-yellow-300 dark:border-yellow-800 bg-yellow-50 dark:bg-yellow-900/25',
       iconClassName: 'mr-3 mt-0.5 transition-all text-yellow-600 dark:text-yellow-400',
       resourceClassName: 'text-sm font-medium truncate text-yellow-700 dark:text-yellow-400',
     });
     expect(getAlertOverviewAcknowledgedBadgeClass()).toBe(
-      'px-2 py-0.5 text-xs bg-yellow-200 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-200 rounded',
+      'px-2 py-0.5 text-xs bg-yellow-200 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-200 rounded-sm',
     );
     expect(getAlertOverviewStartedAtClass()).toBe('text-xs text-muted');
     expect(getAlertOverviewPrimaryActionClass(true)).toBe(
       'px-3 py-1.5 text-xs font-medium border rounded-md transition-all disabled:opacity-50 disabled:cursor-not-allowed text-base-content border-border hover:bg-surface-hover',
     );
     expect(getAlertOverviewPrimaryActionClass(false)).toBe(
-      'px-3 py-1.5 text-xs font-medium border rounded-md transition-all disabled:opacity-50 disabled:cursor-not-allowed text-yellow-700 dark:text-yellow-300 border-yellow-300 dark:border-yellow-700 hover:bg-yellow-50 dark:hover:bg-yellow-900',
+      'px-3 py-1.5 text-xs font-medium border rounded-md transition-all disabled:opacity-50 disabled:cursor-not-allowed text-yellow-700 dark:text-yellow-300 border-yellow-300 dark:border-yellow-700 hover:bg-yellow-50 dark:hover:bg-yellow-900/25',
     );
     expect(getAlertOverviewSecondaryActionClass()).toBe(
       'px-3 py-1.5 text-xs font-medium border rounded-md transition-all bg-surface text-base-content border-border hover:bg-surface-hover',
diff --git a/frontend-modern/src/utils/__tests__/alertResourceTablePresentation.branchcov0718.test.ts b/frontend-modern/src/utils/__tests__/alertResourceTablePresentation.branchcov0718.test.ts
index eaf578b9ac..edea89ec8b 100644
--- a/frontend-modern/src/utils/__tests__/alertResourceTablePresentation.branchcov0718.test.ts
+++ b/frontend-modern/src/utils/__tests__/alertResourceTablePresentation.branchcov0718.test.ts
@@ -83,7 +83,7 @@ describe('alertResourceTablePresentation.branchcov0718', () => {
       expect(getAlertResourceTableOfflineStatePresentation(bogus)).toEqual({
         label: ALERT_RESOURCE_TABLE_OFFLINE_STATE_CRITICAL_LABEL,
         className:
-          'bg-red-50 text-red-700 hover:bg-red-100 dark:bg-red-900 dark:text-red-200 dark:hover:bg-red-800',
+          'bg-red-50 text-red-700 hover:bg-red-100 dark:bg-red-900/25 dark:text-red-200 dark:hover:bg-red-800',
         title: ALERT_RESOURCE_TABLE_OFFLINE_STATE_CRITICAL_TITLE,
       });
     });
diff --git a/frontend-modern/src/utils/__tests__/alertResourceTablePresentation.test.ts b/frontend-modern/src/utils/__tests__/alertResourceTablePresentation.test.ts
index 7989f5b019..de844a66ef 100644
--- a/frontend-modern/src/utils/__tests__/alertResourceTablePresentation.test.ts
+++ b/frontend-modern/src/utils/__tests__/alertResourceTablePresentation.test.ts
@@ -85,13 +85,13 @@ describe('alertResourceTablePresentation', () => {
     expect(getAlertResourceTableOfflineStatePresentation('warning')).toEqual({
       label: 'Warn',
       className:
-        'bg-blue-50 text-blue-700 hover:bg-blue-100 dark:bg-blue-900 dark:text-blue-200 dark:hover:bg-blue-800',
+        'bg-blue-50 text-blue-700 hover:bg-blue-100 dark:bg-blue-900/25 dark:text-blue-200 dark:hover:bg-blue-800',
       title: 'Offline alerts will raise warning-level notifications.',
     });
     expect(getAlertResourceTableOfflineStatePresentation('critical')).toEqual({
       label: 'Crit',
       className:
-        'bg-red-50 text-red-700 hover:bg-red-100 dark:bg-red-900 dark:text-red-200 dark:hover:bg-red-800',
+        'bg-red-50 text-red-700 hover:bg-red-100 dark:bg-red-900/25 dark:text-red-200 dark:hover:bg-red-800',
       title: 'Offline alerts will raise critical-level notifications.',
     });
     expect(getAlertResourceTableMetricInputTitle(true)).toBe('Click to enable this metric');
diff --git a/frontend-modern/src/utils/__tests__/alertSchedulePresentation.test.ts b/frontend-modern/src/utils/__tests__/alertSchedulePresentation.test.ts
index 38d9e3fe5d..29df2bcbd7 100644
--- a/frontend-modern/src/utils/__tests__/alertSchedulePresentation.test.ts
+++ b/frontend-modern/src/utils/__tests__/alertSchedulePresentation.test.ts
@@ -8,7 +8,7 @@ import {
 describe('alertSchedulePresentation', () => {
   it('returns the selected quiet-day button presentation', () => {
     expect(getAlertQuietDayButtonClass(true)).toBe(
-      'rounded-md px-2 py-2 text-xs font-medium transition-all duration-200 bg-blue-500 text-white shadow-sm',
+      'rounded-md px-2 py-2 text-xs font-medium transition-all duration-200 bg-blue-500 text-white shadow-xs',
     );
   });
 
@@ -32,13 +32,13 @@ describe('alertSchedulePresentation', () => {
 
   it('returns the selected quiet suppress checkbox presentation', () => {
     expect(getAlertQuietSuppressCheckboxClass(true)).toBe(
-      'mt-1 flex h-4 w-4 items-center justify-center rounded border-2 border-blue-500 bg-blue-500',
+      'mt-1 flex h-4 w-4 items-center justify-center rounded-sm border-2 border-blue-500 bg-blue-500',
     );
   });
 
   it('returns the unselected quiet suppress checkbox presentation', () => {
     expect(getAlertQuietSuppressCheckboxClass(false)).toBe(
-      'mt-1 flex h-4 w-4 items-center justify-center rounded border-2 border-border',
+      'mt-1 flex h-4 w-4 items-center justify-center rounded-sm border-2 border-border',
     );
   });
 });
diff --git a/frontend-modern/src/utils/__tests__/alertTabsPresentation.test.ts b/frontend-modern/src/utils/__tests__/alertTabsPresentation.test.ts
index 06b63bd060..8911f3b744 100644
--- a/frontend-modern/src/utils/__tests__/alertTabsPresentation.test.ts
+++ b/frontend-modern/src/utils/__tests__/alertTabsPresentation.test.ts
@@ -26,13 +26,13 @@ describe('alertTabsPresentation', () => {
 
   it('returns active sidebar presentation', () => {
     expect(getAlertsSidebarTabClass({ isActive: true, isDisabled: false })).toBe(
-      'flex w-full items-center rounded-md text-sm font-medium transition-colors gap-2.5 px-3 py-2 bg-blue-50 text-blue-600 dark:bg-blue-900 dark:text-blue-200',
+      'flex w-full items-center rounded-md text-sm font-medium transition-colors gap-2.5 px-3 py-2 bg-blue-50 text-blue-600 dark:bg-blue-900/25 dark:text-blue-200',
     );
   });
 
   it('returns disabled mobile presentation', () => {
     expect(getAlertsMobileTabClass({ isActive: false, isDisabled: true })).toBe(
-      'flex-shrink-0 whitespace-nowrap rounded-md px-3 py-1.5 text-[11px] font-medium transition-all sm:flex-1 sm:min-w-0 sm:px-4 sm:py-2 sm:text-xs cursor-not-allowed bg-surface-alt text-muted',
+      'shrink-0 whitespace-nowrap rounded-md px-3 py-1.5 text-[11px] font-medium transition-all sm:flex-1 sm:min-w-0 sm:px-4 sm:py-2 sm:text-xs cursor-not-allowed bg-surface-alt text-muted',
     );
   });
 
diff --git a/frontend-modern/src/utils/__tests__/auditLogPresentation.branchcov0713.test.ts b/frontend-modern/src/utils/__tests__/auditLogPresentation.branchcov0713.test.ts
index 2281525760..6d9cad8b68 100644
--- a/frontend-modern/src/utils/__tests__/auditLogPresentation.branchcov0713.test.ts
+++ b/frontend-modern/src/utils/__tests__/auditLogPresentation.branchcov0713.test.ts
@@ -24,13 +24,13 @@ describe('getAuditEventTypeBadgeClass (branch coverage)', () => {
     // Exercises the `(event ?? '').trim()` normalisation: padded input must
     // still resolve to the canonical case arm.
     expect(getAuditEventTypeBadgeClass('  login  ')).toBe(
-      'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
+      'bg-blue-100 text-blue-800 dark:bg-blue-900/25 dark:text-blue-200',
     );
     expect(getAuditEventTypeBadgeClass('\tconfig_change\n')).toBe(
-      'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
+      'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/25 dark:text-yellow-200',
     );
     expect(getAuditEventTypeBadgeClass(' startup ')).toBe(
-      'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
+      'bg-green-100 text-green-800 dark:bg-green-900/25 dark:text-green-200',
     );
   });
 
diff --git a/frontend-modern/src/utils/__tests__/auditLogPresentation.test.ts b/frontend-modern/src/utils/__tests__/auditLogPresentation.test.ts
index fc0a6afa69..388a8e5d93 100644
--- a/frontend-modern/src/utils/__tests__/auditLogPresentation.test.ts
+++ b/frontend-modern/src/utils/__tests__/auditLogPresentation.test.ts
@@ -32,11 +32,11 @@ describe('auditLogPresentation', () => {
     });
     expect(getAuditVerificationBadgePresentation({ status: 'verified' })).toEqual({
       label: 'Verified',
-      className: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
+      className: 'bg-green-100 text-green-800 dark:bg-green-900/25 dark:text-green-200',
     });
     expect(getAuditVerificationBadgePresentation({ status: 'failed' })).toEqual({
       label: 'Failed',
-      className: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
+      className: 'bg-red-100 text-red-800 dark:bg-red-900/25 dark:text-red-200',
     });
   });
 
diff --git a/frontend-modern/src/utils/__tests__/discoveryPresentation.branchcov0723pm.test.ts b/frontend-modern/src/utils/__tests__/discoveryPresentation.branchcov0723pm.test.ts
index 8db9c52031..d2ea8ae5e1 100644
--- a/frontend-modern/src/utils/__tests__/discoveryPresentation.branchcov0723pm.test.ts
+++ b/frontend-modern/src/utils/__tests__/discoveryPresentation.branchcov0723pm.test.ts
@@ -62,7 +62,7 @@ describe('getDiscoverySuggestedURLTextClass (function + branch coverage)', () =>
 describe('getDiscoverySuggestedURLCodeClass (function + branch coverage)', () => {
   it('returns the canonical mono code class string and takes no inputs', () => {
     expect(getDiscoverySuggestedURLCodeClass()).toBe(
-      'min-w-0 flex-1 rounded bg-blue-100 px-2 py-1.5 text-xs text-blue-800 dark:bg-blue-950 dark:text-blue-100 font-mono break-all',
+      'min-w-0 flex-1 rounded-sm bg-blue-100 px-2 py-1.5 text-xs text-blue-800 dark:bg-blue-950/25 dark:text-blue-100 font-mono break-all',
     );
   });
 });
diff --git a/frontend-modern/src/utils/__tests__/emptyStatePresentation.test.ts b/frontend-modern/src/utils/__tests__/emptyStatePresentation.test.ts
index 6c91e8d506..3826c44179 100644
--- a/frontend-modern/src/utils/__tests__/emptyStatePresentation.test.ts
+++ b/frontend-modern/src/utils/__tests__/emptyStatePresentation.test.ts
@@ -4,7 +4,7 @@ import { getEmptyStatePresentation } from '@/utils/emptyStatePresentation';
 describe('emptyStatePresentation', () => {
   it('returns canonical danger presentation', () => {
     expect(getEmptyStatePresentation('danger')).toEqual({
-      iconClass: 'bg-red-50 dark:bg-red-900 text-red-500',
+      iconClass: 'bg-red-50 dark:bg-red-900/25 text-red-500',
       titleClass: 'text-red-700 dark:text-red-300',
       descriptionClass: 'text-red-600 dark:text-red-300',
     });
diff --git a/frontend-modern/src/utils/__tests__/frontendResourceTypeBoundaries.test.ts b/frontend-modern/src/utils/__tests__/frontendResourceTypeBoundaries.test.ts
index 9dfa485452..4908b77492 100644
--- a/frontend-modern/src/utils/__tests__/frontendResourceTypeBoundaries.test.ts
+++ b/frontend-modern/src/utils/__tests__/frontendResourceTypeBoundaries.test.ts
@@ -1592,7 +1592,7 @@ describe('frontend resource type boundaries', () => {
     expect(storagePageSource).not.toContain('useStoragePageResources()');
     expect(storagePageSource).not.toContain('fields: {');
     expect(storagePageSource).not.toContain(
-      'rounded border border-amber-300 bg-amber-100 px-2 py-1',
+      'rounded-sm border border-amber-300 bg-amber-100 px-2 py-1',
     );
     expect(storagePageSource).not.toContain('flex flex-wrap items-center justify-between gap-3');
     expect(storagePageSource).not.toContain('<Table class="w-full text-xs">');
@@ -2014,14 +2014,14 @@ describe('frontend resource type boundaries', () => {
     expect(securityPostureSummarySource).not.toContain('const scoreTone =');
     expect(securityPostureSummarySource).not.toContain('const ScoreIcon =');
     expect(securityPostureSummarySource).not.toContain(
-      "item.enabled\n                    ? 'border-emerald-200 dark:border-emerald-800 bg-emerald-50 dark:bg-emerald-950'",
+      "item.enabled\n                    ? 'border-emerald-200 dark:border-emerald-800 bg-emerald-50 dark:bg-emerald-950/25'",
     );
     expect(securityWarningSource).toContain('getSecurityWarningPresentation');
     expect(securityWarningSource).toContain('getSecurityFeatureStatePresentation');
     expect(securityWarningSource).toContain('getSecurityScorePresentation');
     expect(securityWarningSource).toContain('warningPresentation().background');
     expect(securityWarningSource).toContain('warningPresentation().border');
-    expect(securityWarningSource).not.toContain('bg-yellow-50 dark:bg-yellow-900');
+    expect(securityWarningSource).not.toContain('bg-yellow-50 dark:bg-yellow-900/25');
     expect(securityWarningSource).not.toContain(
       "status()!.credentialsEncrypted ? 'text-green-600' : 'text-red-600'",
     );
@@ -2043,7 +2043,7 @@ describe('frontend resource type boundaries', () => {
     expect(findingsPanelSource).not.toContain('switch (alertType) {');
     expect(findingsPanelSource).not.toContain('switch (finding.investigationOutcome) {');
     expect(findingsPanelSource).not.toContain(
-      "filter() === 'attention'\n                    ? 'bg-amber-50 dark:bg-amber-900 text-amber-700 dark:text-amber-300 border-amber-300 dark:border-amber-700 shadow-sm'",
+      "filter() === 'attention'\n                    ? 'bg-amber-50 dark:bg-amber-900/25 text-amber-700 dark:text-amber-300 border-amber-300 dark:border-amber-700 shadow-xs'",
     );
     expect(findingsPanelSource).not.toContain('No active findings');
     expect(findingsPanelSource).not.toContain('No pending approvals.');
@@ -2080,7 +2080,7 @@ describe('frontend resource type boundaries', () => {
     expect(approvalSectionSource).toContain('BADGE_PROPS');
     expect(approvalSectionSource).not.toContain('approvalRisk.badgeClass');
     expect(approvalSectionSource).not.toContain('fixRisk.badgeClass');
-    expect(securityWarningSource).not.toContain('bg-red-50 dark:bg-red-900');
+    expect(securityWarningSource).not.toContain('bg-red-50 dark:bg-red-900/25');
     expect(securityScorePresentationSource).toContain(
       'export function getSecurityScorePresentation',
     );
@@ -2118,13 +2118,13 @@ describe('frontend resource type boundaries', () => {
     );
     expect(generalSettingsPanelSource).toContain('EnvironmentLockBadge');
     expect(generalSettingsPanelSource).not.toContain(
-      'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300',
+      'bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300',
     );
     expect(dockerRuntimeSettingsCardSource).toContain('EnvironmentLockBadge');
     expect(dockerRuntimeSettingsCardSource).toContain('ENVIRONMENT_LOCK_BUTTON_TITLE');
     expect(dockerRuntimeSettingsCardSource).not.toContain('>ENV<');
     expect(dockerRuntimeSettingsCardSource).not.toContain(
-      'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300',
+      'bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300',
     );
     expect(environmentLockBadgeSource).toContain('getEnvironmentLockTitle');
     expect(environmentLockPresentationSource).toContain(
@@ -3162,16 +3162,16 @@ describe('frontend resource type boundaries', () => {
       "areAlertsDisabled()\n                                  ? 'cursor-not-allowed text-muted bg-surface-alt'",
     );
     expect(alertsPageSource).not.toContain(
-      "activeTab() === item.id\n                                    ? 'bg-blue-50 text-blue-600 dark:bg-blue-900 dark:text-blue-200'",
+      "activeTab() === item.id\n                                    ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/25 dark:text-blue-200'",
     );
     expect(alertsPageSource).not.toContain(
-      "activeTab() === tab.id\n                                ? 'bg-surface text-base-content shadow-sm'",
+      "activeTab() === tab.id\n                                ? 'bg-surface text-base-content shadow-xs'",
     );
     expect(alertsPageSource).not.toContain(
-      "grouping().byNode\n                        ? 'border-blue-500 bg-blue-50 shadow-sm dark:bg-blue-900'",
+      "grouping().byNode\n                        ? 'border-blue-500 bg-blue-50 shadow-xs dark:bg-blue-900/25'",
     );
     expect(alertsPageSource).not.toContain(
-      "grouping().byGuest\n                        ? 'border-blue-500 bg-blue-50 shadow-sm dark:bg-blue-900'",
+      "grouping().byGuest\n                        ? 'border-blue-500 bg-blue-50 shadow-xs dark:bg-blue-900/25'",
     );
     expect(alertsPageSource).not.toContain(
       "grouping().byNode ? 'border-blue-500 bg-blue-500' : 'border-border'",
@@ -3180,7 +3180,7 @@ describe('frontend resource type boundaries', () => {
       "grouping().byGuest ? 'border-blue-500 bg-blue-500' : 'border-border'",
     );
     expect(alertsPageSource).not.toContain(
-      "quietHours().days[day.id] ? 'rounded-md bg-blue-500 text-white shadow-sm' : 'rounded-md text-muted hover:bg-surface-hover '",
+      "quietHours().days[day.id] ? 'rounded-md bg-blue-500 text-white shadow-xs' : 'rounded-md text-muted hover:bg-surface-hover '",
     );
     expect(alertsPageSource).not.toContain(
       "quietHours().suppress[option.key]\n                            ? 'border-blue-500 bg-blue-50 dark:border-blue-400 dark:bg-blue-500'",
@@ -3471,10 +3471,10 @@ describe('frontend resource type boundaries', () => {
     expect(diagnosticsPanelSource).not.toContain("apiFetchJSON('/api/diagnostics')");
     expect(diagnosticsPanelSource).not.toContain('URL.createObjectURL');
     expect(diagnosticsPanelSource).not.toContain(
-      "'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300'",
+      "'bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300'",
     );
     expect(diagnosticsPanelSource).not.toContain(
-      "'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300'",
+      "'bg-green-100 text-green-700 dark:bg-green-900/25 dark:text-green-300'",
     );
     expect(diagnosticsResultsPanelSource).toContain('StatusIndicatorBadge');
     expect(diagnosticsResultsPanelSource).not.toContain('getStatusIndicatorBadgeToneClasses(');
@@ -3693,19 +3693,19 @@ describe('frontend resource type boundaries', () => {
     );
     expect(patrolIntelligenceBannersSource).not.toContain('trackUpgradeClicked');
     expect(patrolIntelligenceSurfaceSource).not.toContain(
-      "summaryStats().criticalFindings > 0\n                        ? 'bg-red-50 dark:bg-red-900 border-red-200 dark:border-red-800'",
+      "summaryStats().criticalFindings > 0\n                        ? 'bg-red-50 dark:bg-red-900/25 border-red-200 dark:border-red-800'",
     );
     expect(patrolIntelligenceSurfaceSource).not.toContain(
-      "summaryStats().warningFindings > 0\n                        ? 'bg-amber-50 dark:bg-amber-900 border-amber-200 dark:border-amber-800'",
+      "summaryStats().warningFindings > 0\n                        ? 'bg-amber-50 dark:bg-amber-900/25 border-amber-200 dark:border-amber-800'",
     );
     expect(patrolIntelligenceSurfaceSource).not.toContain(
-      "summaryStats().fixedCount > 0\n                        ? 'bg-green-50 dark:bg-green-900 border-green-200 dark:border-green-800'",
+      "summaryStats().fixedCount > 0\n                        ? 'bg-green-50 dark:bg-green-900/25 border-green-200 dark:border-green-800'",
     );
     expect(patrolSummaryPresentationSource).toContain(
       'export function getPatrolSummaryPresentation',
     );
     expect(patrolIntelligenceSurfaceSource).not.toContain(
-      "(patrolStatus()?.quickstart_credits_remaining ?? 0) > 0\n                  ? 'bg-blue-50 dark:bg-blue-950 border-blue-200 dark:border-blue-800 text-blue-700 dark:text-blue-300'",
+      "(patrolStatus()?.quickstart_credits_remaining ?? 0) > 0\n                  ? 'bg-blue-50 dark:bg-blue-950/25 border-blue-200 dark:border-blue-800 text-blue-700 dark:text-blue-300'",
     );
     expect(investigationMessagesSource).toContain('getInvestigationMessagesState');
     expect(investigationMessagesSource).not.toContain('Loading messages...');
@@ -3759,7 +3759,7 @@ describe('frontend resource type boundaries', () => {
     expect(systemLogsPanelSource).not.toContain("isPaused() ? 'Stream Paused' : 'Live'");
     expect(systemLogsPanelSource).not.toContain('Waiting for logs...');
     expect(systemLogsPanelSource).not.toContain(
-      "'bg-amber-100 text-amber-600 dark:bg-amber-900 dark:text-amber-400'",
+      "'bg-amber-100 text-amber-600 dark:bg-amber-900/25 dark:text-amber-400'",
     );
     expect(systemLogsPanelStateSource).toContain("window.location.href = '/api/logs/download'");
     expect(systemLogsPanelStateSource).toContain('notificationStore.success');
@@ -3798,7 +3798,7 @@ describe('frontend resource type boundaries', () => {
     expect(aiCostDashboardSource).not.toContain('No daily token trend yet.');
     expect(aiCostDashboardSource).not.toContain('Loading usage…');
     expect(aiCostDashboardSource).not.toContain(
-      "'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 border-blue-300 dark:border-blue-700'",
+      "'bg-blue-100 dark:bg-blue-900/25 text-blue-700 dark:text-blue-300 border-blue-300 dark:border-blue-700'",
     );
     expect(aiCostPresentationSource).toContain('export const AI_COST_EMPTY_STATE');
     expect(aiCostPresentationSource).toContain('export function getAICostLoadingState');
@@ -3831,10 +3831,10 @@ describe('frontend resource type boundaries', () => {
     expect(aiChatPresentationSource).not.toContain('getAIChatEmptyStateSuggestions');
     expect(remediationStatusSource).toContain('getRemediationPresentation');
     expect(remediationStatusSource).not.toContain(
-      "'bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-800'",
+      "'bg-green-50 dark:bg-green-900/25 border border-green-200 dark:border-green-800'",
     );
     expect(remediationStatusSource).not.toContain(
-      "'bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-800'",
+      "'bg-red-50 dark:bg-red-900/25 border border-red-200 dark:border-red-800'",
     );
     expect(remediationStatusSource).not.toContain("'Fix executed successfully'");
     expect(remediationStatusSource).not.toContain("'Fix failed'");
diff --git a/frontend-modern/src/utils/__tests__/licensePresentation.coverage.test.ts b/frontend-modern/src/utils/__tests__/licensePresentation.coverage.test.ts
index fee4254245..5f11e065ac 100644
--- a/frontend-modern/src/utils/__tests__/licensePresentation.coverage.test.ts
+++ b/frontend-modern/src/utils/__tests__/licensePresentation.coverage.test.ts
@@ -113,18 +113,18 @@ describe('getLicenseSubscriptionStatusPresentation - uncovered branches', () =>
   it('returns Active and Suspended for their respective states', () => {
     expect(getLicenseSubscriptionStatusPresentation('active')).toEqual({
       label: 'Active',
-      badgeClass: 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300',
+      badgeClass: 'bg-green-100 text-green-700 dark:bg-green-900/25 dark:text-green-300',
     });
     expect(getLicenseSubscriptionStatusPresentation('suspended')).toEqual({
       label: 'Suspended',
-      badgeClass: 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300',
+      badgeClass: 'bg-red-100 text-red-700 dark:bg-red-900/25 dark:text-red-300',
     });
   });
 
   it('maps canceled to the same presentation as expired', () => {
     expect(getLicenseSubscriptionStatusPresentation('canceled')).toEqual({
       label: 'Expired',
-      badgeClass: 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300',
+      badgeClass: 'bg-red-100 text-red-700 dark:bg-red-900/25 dark:text-red-300',
     });
   });
 
@@ -166,7 +166,7 @@ describe('getSelfHostedCurrentPlanStatusPresentation - edge cases', () => {
       }),
     ).toEqual({
       label: 'Suspended',
-      badgeClass: 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300',
+      badgeClass: 'bg-red-100 text-red-700 dark:bg-red-900/25 dark:text-red-300',
     });
   });
 });
diff --git a/frontend-modern/src/utils/__tests__/licensePresentation.test.ts b/frontend-modern/src/utils/__tests__/licensePresentation.test.ts
index b8961ae8a6..60aabd0467 100644
--- a/frontend-modern/src/utils/__tests__/licensePresentation.test.ts
+++ b/frontend-modern/src/utils/__tests__/licensePresentation.test.ts
@@ -1222,7 +1222,7 @@ describe('licensePresentation', () => {
         source: 'purchase',
       }),
     ).toEqual({
-      tone: 'border-green-200 dark:border-green-900 bg-green-50 dark:bg-green-900 text-green-900 dark:text-green-100',
+      tone: 'border-green-200 dark:border-green-900/25 bg-green-50 dark:bg-green-900/25 text-green-900/25 dark:text-green-100',
       title: 'Pulse Pro is now active',
       body: 'Checkout completed and Pulse Pro is active. Choose Patrol mode.',
       highlightsLabel: 'Available now on this instance',
@@ -1258,7 +1258,7 @@ describe('licensePresentation', () => {
         source: 'manual',
       }),
     ).toEqual({
-      tone: 'border-green-200 dark:border-green-900 bg-green-50 dark:bg-green-900 text-green-900 dark:text-green-100',
+      tone: 'border-green-200 dark:border-green-900/25 bg-green-50 dark:bg-green-900/25 text-green-900/25 dark:text-green-100',
       title: 'Relay is now active',
       body: 'The license key was accepted and this instance is now running Relay.',
       highlightsLabel: 'Available now on this instance',
diff --git a/frontend-modern/src/utils/__tests__/nodeModalPresentation.branchcov0718.test.ts b/frontend-modern/src/utils/__tests__/nodeModalPresentation.branchcov0718.test.ts
index c940d6e2aa..1e64fda7d8 100644
--- a/frontend-modern/src/utils/__tests__/nodeModalPresentation.branchcov0718.test.ts
+++ b/frontend-modern/src/utils/__tests__/nodeModalPresentation.branchcov0718.test.ts
@@ -86,7 +86,7 @@ describe('getNodeModalTestResultPresentation branch coverage', () => {
     // optional-parameter handling on the default arm is otherwise unexercised.
     expect(getNodeModalTestResultPresentation()).toStrictEqual({
       panelClass:
-        'mx-6 p-3 rounded-md text-sm bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200',
+        'mx-6 p-3 rounded-md text-sm bg-red-50 dark:bg-red-900/25 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200',
       textClass: 'text-red-800 dark:text-red-200',
       icon: 'error',
     });
@@ -97,7 +97,7 @@ describe('getNodeModalTestResultPresentation branch coverage', () => {
     // icon and the dark-mode panelClass together.
     expect(getNodeModalTestResultPresentation(null)).toStrictEqual({
       panelClass:
-        'mx-6 p-3 rounded-md text-sm bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200',
+        'mx-6 p-3 rounded-md text-sm bg-red-50 dark:bg-red-900/25 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200',
       textClass: 'text-red-800 dark:text-red-200',
       icon: 'error',
     });
@@ -108,7 +108,7 @@ describe('getNodeModalTestResultPresentation branch coverage', () => {
     const out = getNodeModalTestResultPresentation('');
     expect(out.icon).toBe('error');
     expect(out.panelClass).toBe(
-      'mx-6 p-3 rounded-md text-sm bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200',
+      'mx-6 p-3 rounded-md text-sm bg-red-50 dark:bg-red-900/25 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200',
     );
     expect(out.textClass).toBe('text-red-800 dark:text-red-200');
   });
@@ -120,7 +120,7 @@ describe('getNodeModalTestResultPresentation branch coverage', () => {
     const out = getNodeModalTestResultPresentation('connection-refused');
     expect(out.icon).toBe('error');
     expect(out.panelClass).toContain('bg-red-50');
-    expect(out.panelClass).toContain('dark:bg-red-900');
+    expect(out.panelClass).toContain('dark:bg-red-900/25');
     expect(out.textClass).toBe('text-red-800 dark:text-red-200');
   });
 
@@ -131,7 +131,7 @@ describe('getNodeModalTestResultPresentation branch coverage', () => {
     // cannot silently drop a class.
     expect(getNodeModalTestResultPresentation('success')).toStrictEqual({
       panelClass:
-        'mx-6 p-3 rounded-md text-sm bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-800 text-green-800 dark:text-green-200',
+        'mx-6 p-3 rounded-md text-sm bg-green-50 dark:bg-green-900/25 border border-green-200 dark:border-green-800 text-green-800 dark:text-green-200',
       textClass: 'text-green-800 dark:text-green-200',
       icon: 'success',
     });
@@ -140,7 +140,7 @@ describe('getNodeModalTestResultPresentation branch coverage', () => {
   it('returns the exact warning presentation with every dark-mode class pinned', () => {
     expect(getNodeModalTestResultPresentation('warning')).toStrictEqual({
       panelClass:
-        'mx-6 p-3 rounded-md text-sm bg-amber-50 dark:bg-amber-900 border border-amber-200 dark:border-amber-800 text-amber-800 dark:text-amber-200',
+        'mx-6 p-3 rounded-md text-sm bg-amber-50 dark:bg-amber-900/25 border border-amber-200 dark:border-amber-800 text-amber-800 dark:text-amber-200',
       textClass: 'text-amber-800 dark:text-amber-200',
       icon: 'warning',
     });
@@ -152,7 +152,7 @@ describe('getNodeModalTestResultPresentation branch coverage', () => {
     // full panelClass and the previously-unasserted textClass.
     expect(getNodeModalTestResultPresentation('error')).toStrictEqual({
       panelClass:
-        'mx-6 p-3 rounded-md text-sm bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200',
+        'mx-6 p-3 rounded-md text-sm bg-red-50 dark:bg-red-900/25 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200',
       textClass: 'text-red-800 dark:text-red-200',
       icon: 'error',
     });
diff --git a/frontend-modern/src/utils/__tests__/patrolRunPresentation.test.ts b/frontend-modern/src/utils/__tests__/patrolRunPresentation.test.ts
index 1ea11c6864..14f82fa606 100644
--- a/frontend-modern/src/utils/__tests__/patrolRunPresentation.test.ts
+++ b/frontend-modern/src/utils/__tests__/patrolRunPresentation.test.ts
@@ -307,7 +307,7 @@ describe('patrolRunPresentation', () => {
       findingsSnapshotAvailable: false,
       kindLabel: 'Targeted check',
       status: {
-        badgeClass: 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300',
+        badgeClass: 'bg-red-100 text-red-700 dark:bg-red-900/25 dark:text-red-300',
         variant: 'danger',
         label: 'error',
       },
diff --git a/frontend-modern/src/utils/__tests__/patrolSummaryPresentation.test.ts b/frontend-modern/src/utils/__tests__/patrolSummaryPresentation.test.ts
index 4723f73b52..633d9711bf 100644
--- a/frontend-modern/src/utils/__tests__/patrolSummaryPresentation.test.ts
+++ b/frontend-modern/src/utils/__tests__/patrolSummaryPresentation.test.ts
@@ -17,7 +17,7 @@ describe('getPatrolSummaryPresentation', () => {
   it('returns active critical presentation', () => {
     expect(getPatrolSummaryPresentation('critical', true)).toEqual({
       iconClass: 'text-red-500 dark:text-red-400',
-      iconContainerClass: 'bg-red-50 dark:bg-red-900 border-red-200 dark:border-red-800',
+      iconContainerClass: 'bg-red-50 dark:bg-red-900/25 border-red-200 dark:border-red-800',
       valueClass: 'text-red-600 dark:text-red-400',
     });
   });
diff --git a/frontend-modern/src/utils/__tests__/recoveryArtifactModePresentation.test.ts b/frontend-modern/src/utils/__tests__/recoveryArtifactModePresentation.test.ts
index d67bb6bb56..32e2dd33da 100644
--- a/frontend-modern/src/utils/__tests__/recoveryArtifactModePresentation.test.ts
+++ b/frontend-modern/src/utils/__tests__/recoveryArtifactModePresentation.test.ts
@@ -6,7 +6,7 @@ describe('recoveryArtifactModePresentation', () => {
     expect(getRecoveryArtifactModePresentation('snapshot')).toEqual({
       label: 'Snapshot',
       aggregateLabel: 'Snapshots',
-      badgeClassName: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300',
+      badgeClassName: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/25 dark:text-yellow-300',
       segmentClassName: 'bg-yellow-500',
     });
     expect(getRecoveryArtifactModePresentation('local')).toEqual({
@@ -18,7 +18,7 @@ describe('recoveryArtifactModePresentation', () => {
     expect(getRecoveryArtifactModePresentation('remote')).toEqual({
       label: 'Remote Copy',
       aggregateLabel: 'Remote Copies',
-      badgeClassName: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-300',
+      badgeClassName: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/25 dark:text-indigo-300',
       segmentClassName: 'bg-indigo-500',
     });
   });
diff --git a/frontend-modern/src/utils/__tests__/recoveryItemTypePresentation.branchcov.test.ts b/frontend-modern/src/utils/__tests__/recoveryItemTypePresentation.branchcov.test.ts
index 2d68c18ab2..ca583a0326 100644
--- a/frontend-modern/src/utils/__tests__/recoveryItemTypePresentation.branchcov.test.ts
+++ b/frontend-modern/src/utils/__tests__/recoveryItemTypePresentation.branchcov.test.ts
@@ -13,9 +13,9 @@ import {
 // describe the documented badge composition rather than echoing the function
 // under test. They are the building blocks the module concatenates.
 const BADGE_BASE_CLASSES =
-  'inline-flex items-center rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap';
+  'inline-flex items-center rounded-sm px-2 py-0.5 text-[10px] font-medium whitespace-nowrap';
 const TABLE_BADGE_BASE_CLASSES =
-  'inline-flex items-center px-1 py-0.5 text-[10px] font-medium rounded whitespace-nowrap';
+  'inline-flex items-center px-1 py-0.5 text-[10px] font-medium rounded-sm whitespace-nowrap';
 const DEFAULT_BADGE_TONE_CLASSES = 'bg-surface-alt text-base-content';
 
 describe('recoveryItemTypePresentation branch coverage', () => {
@@ -94,7 +94,7 @@ describe('recoveryItemTypePresentation branch coverage', () => {
     });
 
     it('renders the pod case via the workload presentation path', () => {
-      const podTone = 'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300';
+      const podTone = 'bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300';
       const presentation = getRecoveryItemTypePresentation('pod');
       expect(presentation).not.toBeNull();
       expect(presentation).toMatchObject({
@@ -181,7 +181,7 @@ describe('recoveryItemTypePresentation branch coverage', () => {
     });
 
     it('returns the table badge classes for known keys', () => {
-      const podTone = 'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300';
+      const podTone = 'bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300';
       expect(getRecoveryItemTypeBadgeClass('pod')).toBe(`${TABLE_BADGE_BASE_CLASSES} ${podTone}`);
       expect(getRecoveryItemTypeBadgeClass('pvc')).toBe(
         `${TABLE_BADGE_BASE_CLASSES} ${DEFAULT_BADGE_TONE_CLASSES}`,
diff --git a/frontend-modern/src/utils/__tests__/recoveryItemTypePresentation.branchcov0712b.test.ts b/frontend-modern/src/utils/__tests__/recoveryItemTypePresentation.branchcov0712b.test.ts
index 96742a0d1f..cd46d1fc7c 100644
--- a/frontend-modern/src/utils/__tests__/recoveryItemTypePresentation.branchcov0712b.test.ts
+++ b/frontend-modern/src/utils/__tests__/recoveryItemTypePresentation.branchcov0712b.test.ts
@@ -28,18 +28,19 @@ const FORCE_NULL_KEY = '__force_null__';
 // describe the documented badge composition rather than echoing the unit under
 // test. These are the primitives the module concatenates.
 const BADGE_BASE_CLASSES =
-  'inline-flex items-center rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap';
+  'inline-flex items-center rounded-sm px-2 py-0.5 text-[10px] font-medium whitespace-nowrap';
 const TABLE_BADGE_BASE_CLASSES =
-  'inline-flex items-center px-1 py-0.5 text-[10px] font-medium rounded whitespace-nowrap';
+  'inline-flex items-center px-1 py-0.5 text-[10px] font-medium rounded-sm whitespace-nowrap';
 const DEFAULT_BADGE_TONE_CLASSES = 'bg-surface-alt text-base-content';
 const DEFAULT_BADGE_CLASSES = `${BADGE_BASE_CLASSES} ${DEFAULT_BADGE_TONE_CLASSES}`;
 const DEFAULT_TABLE_BADGE_CLASSES = `${TABLE_BADGE_BASE_CLASSES} ${DEFAULT_BADGE_TONE_CLASSES}`;
 
 // Workload tones mirrored from workloadTypePresentation's PRESENTATION_MAP; the
 // vm / system-container / app-container arms thread these through verbatim.
-const VM_TONE = 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300';
-const SYSTEM_CONTAINER_TONE = 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300';
-const APP_CONTAINER_TONE = 'bg-sky-100 text-sky-700 dark:bg-sky-900 dark:text-sky-300';
+const VM_TONE = 'bg-blue-100 text-blue-700 dark:bg-blue-900/25 dark:text-blue-300';
+const SYSTEM_CONTAINER_TONE =
+  'bg-green-100 text-green-700 dark:bg-green-900/25 dark:text-green-300';
+const APP_CONTAINER_TONE = 'bg-sky-100 text-sky-700 dark:bg-sky-900/25 dark:text-sky-300';
 
 describe('getRecoveryItemTypePresentation — branch coverage (branchcov2)', () => {
   it('composes the full vm presentation (workload-map badge + table badge composition)', () => {
diff --git a/frontend-modern/src/utils/__tests__/recoveryOutcomePresentation.branchcov2.test.ts b/frontend-modern/src/utils/__tests__/recoveryOutcomePresentation.branchcov2.test.ts
index 7804232572..a8357597b0 100644
--- a/frontend-modern/src/utils/__tests__/recoveryOutcomePresentation.branchcov2.test.ts
+++ b/frontend-modern/src/utils/__tests__/recoveryOutcomePresentation.branchcov2.test.ts
@@ -67,20 +67,20 @@ describe('recoveryOutcomePresentation — branch coverage (branchcov2)', () => {
   describe('getRecoveryOutcomeBadgeClass', () => {
     it('renders the full badge class for success and warning', () => {
       expect(getRecoveryOutcomeBadgeClass('success')).toBe(
-        `${BADGE_BASE} bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300`,
+        `${BADGE_BASE} bg-emerald-100 text-emerald-700 dark:bg-emerald-900/25 dark:text-emerald-300`,
       );
       expect(getRecoveryOutcomeBadgeClass('warning')).toBe(
-        `${BADGE_BASE} bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300`,
+        `${BADGE_BASE} bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300`,
       );
     });
 
     it('renders the full badge class for failed and running (strict equality)', () => {
       // Sibling test only asserted substring membership; pin the whole string.
       expect(getRecoveryOutcomeBadgeClass('failed')).toBe(
-        `${BADGE_BASE} bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300`,
+        `${BADGE_BASE} bg-red-100 text-red-700 dark:bg-red-900/25 dark:text-red-300`,
       );
       expect(getRecoveryOutcomeBadgeClass('running')).toBe(
-        `${BADGE_BASE} bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300`,
+        `${BADGE_BASE} bg-blue-100 text-blue-700 dark:bg-blue-900/25 dark:text-blue-300`,
       );
     });
 
diff --git a/frontend-modern/src/utils/__tests__/recoveryTimelinePresentation.test.ts b/frontend-modern/src/utils/__tests__/recoveryTimelinePresentation.test.ts
index 7d6d7e57b5..b7aa2c472d 100644
--- a/frontend-modern/src/utils/__tests__/recoveryTimelinePresentation.test.ts
+++ b/frontend-modern/src/utils/__tests__/recoveryTimelinePresentation.test.ts
@@ -13,13 +13,13 @@ import {
 describe('getRecoveryTimelineColumnButtonClass', () => {
   it('keeps the full-height column as an accessible hit target only', () => {
     expect(getRecoveryTimelineColumnButtonClass(true)).toContain('group');
-    expect(getRecoveryTimelineColumnButtonClass(true)).toContain('focus-visible:outline');
+    expect(getRecoveryTimelineColumnButtonClass(true)).toContain('focus-visible:outline-solid');
     expect(getRecoveryTimelineColumnButtonClass(true)).not.toContain('ring-blue-500');
     expect(getRecoveryTimelineColumnButtonClass(true)).not.toContain('bg-blue-100');
   });
 
   it('does not dim the full-height click column when another day is focused', () => {
-    expect(getRecoveryTimelineColumnButtonClass(false)).toContain('focus-visible:outline');
+    expect(getRecoveryTimelineColumnButtonClass(false)).toContain('focus-visible:outline-solid');
     expect(getRecoveryTimelineColumnButtonClass(false, true)).not.toContain('opacity-40');
   });
 
diff --git a/frontend-modern/src/utils/__tests__/remediationPresentation.test.ts b/frontend-modern/src/utils/__tests__/remediationPresentation.test.ts
index 3dbce9b781..0e388ed375 100644
--- a/frontend-modern/src/utils/__tests__/remediationPresentation.test.ts
+++ b/frontend-modern/src/utils/__tests__/remediationPresentation.test.ts
@@ -9,7 +9,7 @@ describe('getRemediationPresentation', () => {
       iconClass: 'text-green-600 dark:text-green-400',
       message: 'Fix executed successfully',
       messageClass: 'font-medium text-green-700 dark:text-green-300',
-      panelClass: 'bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-800',
+      panelClass: 'bg-green-50 dark:bg-green-900/25 border border-green-200 dark:border-green-800',
     });
   });
 
@@ -19,7 +19,7 @@ describe('getRemediationPresentation', () => {
       iconClass: 'text-red-600 dark:text-red-400',
       message: 'Fix failed',
       messageClass: 'font-medium text-red-700 dark:text-red-300',
-      panelClass: 'bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-800',
+      panelClass: 'bg-red-50 dark:bg-red-900/25 border border-red-200 dark:border-red-800',
     });
   });
 
diff --git a/frontend-modern/src/utils/__tests__/resourceBadgePresentation.branchcov0717.test.ts b/frontend-modern/src/utils/__tests__/resourceBadgePresentation.branchcov0717.test.ts
index fc15e00e4c..8c4f433ee7 100644
--- a/frontend-modern/src/utils/__tests__/resourceBadgePresentation.branchcov0717.test.ts
+++ b/frontend-modern/src/utils/__tests__/resourceBadgePresentation.branchcov0717.test.ts
@@ -57,7 +57,7 @@ describe('getPlatformBadge — branch coverage', () => {
     expect(badge).toStrictEqual({
       label: 'Availability',
       classes:
-        'inline-flex items-center rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-sky-100 text-sky-700 dark:bg-sky-900 dark:text-sky-300',
+        'inline-flex items-center rounded-sm px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-sky-100 text-sky-700 dark:bg-sky-900/25 dark:text-sky-300',
       title: 'Availability',
     });
   });
diff --git a/frontend-modern/src/utils/__tests__/resourceBadgePresentation.branchcov0725am.test.ts b/frontend-modern/src/utils/__tests__/resourceBadgePresentation.branchcov0725am.test.ts
index 638f1c540f..ad27a89d1d 100644
--- a/frontend-modern/src/utils/__tests__/resourceBadgePresentation.branchcov0725am.test.ts
+++ b/frontend-modern/src/utils/__tests__/resourceBadgePresentation.branchcov0725am.test.ts
@@ -73,7 +73,7 @@ describe('resourceBadgePresentation — dead-arm reachability characterization (
     expect(badge).not.toBeNull();
     expect(badge?.label).toBe('invented-resource-kind');
     expect(badge?.classes).toBe(
-      'inline-flex items-center rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-surface-alt text-base-content',
+      'inline-flex items-center rounded-sm px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-surface-alt text-base-content',
     );
   });
 
diff --git a/frontend-modern/src/utils/__tests__/resourceBadgePresentation.branchcov2.test.ts b/frontend-modern/src/utils/__tests__/resourceBadgePresentation.branchcov2.test.ts
index 15f56af420..fdfe224b36 100644
--- a/frontend-modern/src/utils/__tests__/resourceBadgePresentation.branchcov2.test.ts
+++ b/frontend-modern/src/utils/__tests__/resourceBadgePresentation.branchcov2.test.ts
@@ -35,7 +35,7 @@ describe('getPlatformBadge (branch coverage)', () => {
     expect(getPlatformBadge('availability')).toStrictEqual({
       label: 'Availability',
       classes:
-        'inline-flex items-center rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-sky-100 text-sky-700 dark:bg-sky-900 dark:text-sky-300',
+        'inline-flex items-center rounded-sm px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-sky-100 text-sky-700 dark:bg-sky-900/25 dark:text-sky-300',
       title: 'Availability',
     });
   });
diff --git a/frontend-modern/src/utils/__tests__/resourceChangePresentation.branchcov2.test.ts b/frontend-modern/src/utils/__tests__/resourceChangePresentation.branchcov2.test.ts
index e947c961e8..923da49c55 100644
--- a/frontend-modern/src/utils/__tests__/resourceChangePresentation.branchcov2.test.ts
+++ b/frontend-modern/src/utils/__tests__/resourceChangePresentation.branchcov2.test.ts
@@ -55,7 +55,7 @@ describe('getResourceChangeKindPresentation (branch coverage)', () => {
     expect(getResourceChangeKindPresentation('metric_anomaly')).toStrictEqual({
       label: 'Anomaly',
       plural: 'Anomalies',
-      className: 'bg-rose-100 text-rose-700 dark:bg-rose-900 dark:text-rose-300',
+      className: 'bg-rose-100 text-rose-700 dark:bg-rose-900/25 dark:text-rose-300',
     });
     expect(getResourceChangeKindPresentation('alert_unacknowledged')).toStrictEqual({
       label: 'Alert unacknowledged',
@@ -86,27 +86,27 @@ describe('getResourceChangeSourceTypePresentation (branch coverage)', () => {
     expect(getResourceChangeSourceTypePresentation('platform_event')).toStrictEqual({
       label: 'Platform event',
       plural: 'Platform events',
-      className: 'bg-sky-100 text-sky-700 dark:bg-sky-900 dark:text-sky-300',
+      className: 'bg-sky-100 text-sky-700 dark:bg-sky-900/25 dark:text-sky-300',
     });
     expect(getResourceChangeSourceTypePresentation('pulse_diff')).toStrictEqual({
       label: 'Pulse diff',
       plural: 'Pulse diffs',
-      className: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-300',
+      className: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/25 dark:text-indigo-300',
     });
     expect(getResourceChangeSourceTypePresentation('heuristic')).toStrictEqual({
       label: 'Heuristic',
       plural: 'Heuristics',
-      className: 'bg-rose-100 text-rose-700 dark:bg-rose-900 dark:text-rose-300',
+      className: 'bg-rose-100 text-rose-700 dark:bg-rose-900/25 dark:text-rose-300',
     });
     expect(getResourceChangeSourceTypePresentation('user_action')).toStrictEqual({
       label: 'User action',
       plural: 'User actions',
-      className: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300',
+      className: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/25 dark:text-emerald-300',
     });
     expect(getResourceChangeSourceTypePresentation('agent_action')).toStrictEqual({
       label: 'Agent action',
       plural: 'Agent actions',
-      className: 'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300',
+      className: 'bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300',
     });
   });
 
@@ -129,22 +129,22 @@ describe('getResourceChangeSourceAdapterPresentation (branch coverage)', () => {
     expect(getResourceChangeSourceAdapterPresentation('proxmox_adapter')).toStrictEqual({
       label: 'Proxmox adapter',
       plural: 'Proxmox adapters',
-      className: 'bg-sky-100 text-sky-700 dark:bg-sky-900 dark:text-sky-300',
+      className: 'bg-sky-100 text-sky-700 dark:bg-sky-900/25 dark:text-sky-300',
     });
     expect(getResourceChangeSourceAdapterPresentation('truenas_adapter')).toStrictEqual({
       label: 'TrueNAS adapter',
       plural: 'TrueNAS adapters',
-      className: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300',
+      className: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/25 dark:text-emerald-300',
     });
     expect(getResourceChangeSourceAdapterPresentation('vmware_adapter')).toStrictEqual({
       label: 'VMware adapter',
       plural: 'VMware adapters',
-      className: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900 dark:text-cyan-300',
+      className: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/25 dark:text-cyan-300',
     });
     expect(getResourceChangeSourceAdapterPresentation('agent:ops-helper')).toStrictEqual({
       label: 'Ops helper',
       plural: 'Ops helpers',
-      className: 'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300',
+      className: 'bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300',
     });
   });
 
diff --git a/frontend-modern/src/utils/__tests__/securityScorePresentation.branchcov0718.test.ts b/frontend-modern/src/utils/__tests__/securityScorePresentation.branchcov0718.test.ts
index 39275a1121..f9d844f4e4 100644
--- a/frontend-modern/src/utils/__tests__/securityScorePresentation.branchcov0718.test.ts
+++ b/frontend-modern/src/utils/__tests__/securityScorePresentation.branchcov0718.test.ts
@@ -39,13 +39,13 @@ describe('securityScorePresentation — branch coverage (batch 0718)', () => {
       expect(out).toMatchObject({ label: 'Strong', icon: 'shield-check' });
       // Pin every tone field so a silent class rename fails loudly.
       expect(out.tone).toEqual({
-        headerBg: 'bg-emerald-50 dark:bg-emerald-950',
+        headerBg: 'bg-emerald-50 dark:bg-emerald-950/25',
         headerBorder: 'border-b border-emerald-200 dark:border-emerald-800',
-        iconWrap: 'bg-emerald-100 dark:bg-emerald-900',
+        iconWrap: 'bg-emerald-100 dark:bg-emerald-900/25',
         icon: 'text-emerald-700 dark:text-emerald-300',
         subtitle: 'text-emerald-700 dark:text-emerald-300',
         score: 'text-emerald-800 dark:text-emerald-200',
-        badge: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300',
+        badge: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/25 dark:text-emerald-300',
       });
     });
 
@@ -55,7 +55,7 @@ describe('securityScorePresentation — branch coverage (batch 0718)', () => {
         icon: 'shield',
       });
       expect(getSecurityScorePresentation(79).tone.badge).toBe(
-        'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300',
+        'bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300',
       );
     });
 
@@ -64,7 +64,9 @@ describe('securityScorePresentation — branch coverage (batch 0718)', () => {
         label: 'Moderate',
         icon: 'shield',
       });
-      expect(getSecurityScorePresentation(50).tone.headerBg).toBe('bg-amber-50 dark:bg-amber-950');
+      expect(getSecurityScorePresentation(50).tone.headerBg).toBe(
+        'bg-amber-50 dark:bg-amber-950/25',
+      );
     });
 
     it('treats score === 49 as Weak (one below the Moderate boundary)', () => {
@@ -81,7 +83,7 @@ describe('securityScorePresentation — branch coverage (batch 0718)', () => {
       const out = getSecurityScorePresentation(0);
       expect(out).toMatchObject({ label: 'Weak', icon: 'shield-alert' });
       expect(out.tone.score).toBe('text-rose-800 dark:text-rose-200');
-      expect(out.tone.iconWrap).toBe('bg-rose-100 dark:bg-rose-900');
+      expect(out.tone.iconWrap).toBe('bg-rose-100 dark:bg-rose-900/25');
     });
   });
 
@@ -100,7 +102,7 @@ describe('securityScorePresentation — branch coverage (batch 0718)', () => {
         'Authentication is enabled, but this Pulse instance is still missing HTTPS, an API token, and protected exports.',
       );
       // Score 60 -> Moderate posture -> yellow tone.
-      expect(out.background).toBe('bg-yellow-50 dark:bg-yellow-900');
+      expect(out.background).toBe('bg-yellow-50 dark:bg-yellow-900/25');
       expect(out.border).toBe('border-yellow-200 dark:border-yellow-800');
       expect(out.messageClass).toBe('text-base-content');
     });
@@ -135,7 +137,7 @@ describe('securityScorePresentation — branch coverage (batch 0718)', () => {
         'Review the remaining security settings before using this instance for live infrastructure.',
       );
       // Weak score (40 < 50) -> non-Moderate arm -> red tone despite auth ok.
-      expect(out.background).toBe('bg-red-50 dark:bg-red-900');
+      expect(out.background).toBe('bg-red-50 dark:bg-red-900/25');
       expect(out.border).toBe('border-red-200 dark:border-red-800');
     });
 
@@ -167,7 +169,7 @@ describe('securityScorePresentation — branch coverage (batch 0718)', () => {
       expect(out.message).toBe(
         'Authentication is enabled, but this Pulse instance is still missing HTTPS.',
       );
-      expect(out.background).toBe('bg-red-50 dark:bg-red-900');
+      expect(out.background).toBe('bg-red-50 dark:bg-red-900/25');
       expect(out.border).toBe('border-red-200 dark:border-red-800');
     });
   });
diff --git a/frontend-modern/src/utils/__tests__/securityScorePresentation.test.ts b/frontend-modern/src/utils/__tests__/securityScorePresentation.test.ts
index 048a2e9e6c..ade547f02e 100644
--- a/frontend-modern/src/utils/__tests__/securityScorePresentation.test.ts
+++ b/frontend-modern/src/utils/__tests__/securityScorePresentation.test.ts
@@ -58,7 +58,7 @@ describe('securityScorePresentation', () => {
         hasHTTPS: false,
       }),
     ).toMatchObject({
-      background: 'bg-red-50 dark:bg-red-900',
+      background: 'bg-red-50 dark:bg-red-900/25',
       border: 'border-red-200 dark:border-red-800',
       messageClass: 'font-semibold text-red-700 dark:text-red-300',
     });
@@ -75,7 +75,7 @@ describe('securityScorePresentation', () => {
         hasHTTPS: false,
       }),
     ).toMatchObject({
-      background: 'bg-red-50 dark:bg-red-900',
+      background: 'bg-red-50 dark:bg-red-900/25',
       border: 'border-red-200 dark:border-red-800',
       messageClass: 'text-base-content',
     });
@@ -92,7 +92,7 @@ describe('securityScorePresentation', () => {
         hasHTTPS: false,
       }),
     ).toMatchObject({
-      background: 'bg-yellow-50 dark:bg-yellow-900',
+      background: 'bg-yellow-50 dark:bg-yellow-900/25',
       border: 'border-yellow-200 dark:border-yellow-800',
       messageClass: 'text-base-content',
     });
@@ -215,7 +215,8 @@ describe('securityScorePresentation', () => {
         critical: true,
       }),
     ).toMatchObject({
-      cardClassName: 'border-emerald-200 dark:border-emerald-800 bg-emerald-50 dark:bg-emerald-950',
+      cardClassName:
+        'border-emerald-200 dark:border-emerald-800 bg-emerald-50 dark:bg-emerald-950/25',
       iconClassName: 'text-emerald-500 dark:text-emerald-400',
       statusLabel: 'Enabled',
     });
@@ -226,7 +227,7 @@ describe('securityScorePresentation', () => {
         critical: true,
       }),
     ).toMatchObject({
-      cardClassName: 'border-rose-200 dark:border-rose-800 bg-rose-50 dark:bg-rose-950',
+      cardClassName: 'border-rose-200 dark:border-rose-800 bg-rose-50 dark:bg-rose-950/25',
       iconClassName: 'text-rose-500 dark:text-rose-400',
       statusLabel: 'Disabled',
     });
diff --git a/frontend-modern/src/utils/__tests__/ssoProviderPresentation.branchcov0717.test.ts b/frontend-modern/src/utils/__tests__/ssoProviderPresentation.branchcov0717.test.ts
index 7064ab0e3b..1f8e456e93 100644
--- a/frontend-modern/src/utils/__tests__/ssoProviderPresentation.branchcov0717.test.ts
+++ b/frontend-modern/src/utils/__tests__/ssoProviderPresentation.branchcov0717.test.ts
@@ -309,7 +309,7 @@ describe('ssoProviderPresentation branch coverage (supplemental)', () => {
   describe('getSSOProviderTypeBadgeClass', () => {
     it('returns the canonical badge class string verbatim', () => {
       expect(getSSOProviderTypeBadgeClass()).toBe(
-        'px-1.5 py-0.5 text-xs font-medium rounded bg-surface-hover',
+        'px-1.5 py-0.5 text-xs font-medium rounded-sm bg-surface-hover',
       );
     });
   });
@@ -318,8 +318,8 @@ describe('ssoProviderPresentation branch coverage (supplemental)', () => {
     it('returns the full success presentation object', () => {
       expect(getSSOTestResultPresentation(true)).toStrictEqual({
         panelClass:
-          'p-4 rounded-md border bg-green-50 dark:bg-green-900 border-green-200 dark:border-green-800',
-        iconClass: 'w-5 h-5 text-emerald-500 dark:text-emerald-400 flex-shrink-0 mt-0.5',
+          'p-4 rounded-md border bg-green-50 dark:bg-green-900/25 border-green-200 dark:border-green-800',
+        iconClass: 'w-5 h-5 text-emerald-500 dark:text-emerald-400 shrink-0 mt-0.5',
         titleClass: 'text-sm font-medium text-green-800 dark:text-green-200',
         errorClass: 'text-xs text-red-600 dark:text-red-400 mt-1',
       });
@@ -328,8 +328,8 @@ describe('ssoProviderPresentation branch coverage (supplemental)', () => {
     it('returns the full failure presentation object', () => {
       expect(getSSOTestResultPresentation(false)).toStrictEqual({
         panelClass:
-          'p-4 rounded-md border bg-red-50 dark:bg-red-900 border-red-200 dark:border-red-800',
-        iconClass: 'w-5 h-5 text-rose-500 dark:text-rose-400 flex-shrink-0 mt-0.5',
+          'p-4 rounded-md border bg-red-50 dark:bg-red-900/25 border-red-200 dark:border-red-800',
+        iconClass: 'w-5 h-5 text-rose-500 dark:text-rose-400 shrink-0 mt-0.5',
         titleClass: 'text-sm font-medium text-red-800 dark:text-red-200',
         errorClass: 'text-xs text-red-600 dark:text-red-400 mt-1',
       });
@@ -340,7 +340,7 @@ describe('ssoProviderPresentation branch coverage (supplemental)', () => {
     it('returns the full expired presentation object', () => {
       expect(getSSOCertificatePresentation(true)).toStrictEqual({
         containerClass:
-          'text-xs px-2 py-1 rounded bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300',
+          'text-xs px-2 py-1 rounded-sm bg-red-100 dark:bg-red-900/25 text-red-700 dark:text-red-300',
         expiredLabelClass: 'ml-1 text-red-600 dark:text-red-400 font-medium',
         expiredLabel: '(Expired!)',
       });
@@ -348,7 +348,7 @@ describe('ssoProviderPresentation branch coverage (supplemental)', () => {
 
     it('returns the full valid presentation object', () => {
       expect(getSSOCertificatePresentation(false)).toStrictEqual({
-        containerClass: 'text-xs px-2 py-1 rounded bg-surface-hover text-base-content',
+        containerClass: 'text-xs px-2 py-1 rounded-sm bg-surface-hover text-base-content',
         expiredLabelClass: 'ml-1 text-red-600 dark:text-red-400 font-medium',
         expiredLabel: '(Expired!)',
       });
diff --git a/frontend-modern/src/utils/__tests__/status.branchcov2.test.ts b/frontend-modern/src/utils/__tests__/status.branchcov2.test.ts
index 3886e569c9..309065bec2 100644
--- a/frontend-modern/src/utils/__tests__/status.branchcov2.test.ts
+++ b/frontend-modern/src/utils/__tests__/status.branchcov2.test.ts
@@ -76,16 +76,16 @@ describe('getStatusIndicatorBadgeToneClasses (branch coverage)', () => {
     // Direct table-hit arm for all five variants, with full string assertion
     // (the sibling test only uses toContain for four of them).
     expect(getStatusIndicatorBadgeToneClasses('success')).toBe(
-      'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300',
+      'bg-green-100 text-green-700 dark:bg-green-900/25 dark:text-green-300',
     );
     expect(getStatusIndicatorBadgeToneClasses('warning')).toBe(
-      'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300',
+      'bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300',
     );
     expect(getStatusIndicatorBadgeToneClasses('danger')).toBe(
-      'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300',
+      'bg-red-100 text-red-700 dark:bg-red-900/25 dark:text-red-300',
     );
     expect(getStatusIndicatorBadgeToneClasses('info')).toBe(
-      'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300',
+      'bg-blue-100 text-blue-700 dark:bg-blue-900/25 dark:text-blue-300',
     );
     expect(getStatusIndicatorBadgeToneClasses('muted')).toBe('bg-surface-alt text-base-content');
   });
diff --git a/frontend-modern/src/utils/__tests__/systemLogsPresentation.test.ts b/frontend-modern/src/utils/__tests__/systemLogsPresentation.test.ts
index 4b24ebcead..f769098ca2 100644
--- a/frontend-modern/src/utils/__tests__/systemLogsPresentation.test.ts
+++ b/frontend-modern/src/utils/__tests__/systemLogsPresentation.test.ts
@@ -42,7 +42,7 @@ describe('systemLogsPresentation', () => {
     expect(getSystemLogStreamPresentation(true)).toEqual({
       indicatorClass: 'bg-amber-400',
       label: 'Paused',
-      pauseButtonClass: 'bg-amber-100 text-amber-600 dark:bg-amber-900 dark:text-amber-400',
+      pauseButtonClass: 'bg-amber-100 text-amber-600 dark:bg-amber-900/25 dark:text-amber-400',
       toggleTitle: 'Resume Stream',
     });
   });
diff --git a/frontend-modern/src/utils/__tests__/unifiedAgentStatusPresentation.branchcov0712c.test.ts b/frontend-modern/src/utils/__tests__/unifiedAgentStatusPresentation.branchcov0712c.test.ts
index 5b24c376ce..11eed023bb 100644
--- a/frontend-modern/src/utils/__tests__/unifiedAgentStatusPresentation.branchcov0712c.test.ts
+++ b/frontend-modern/src/utils/__tests__/unifiedAgentStatusPresentation.branchcov0712c.test.ts
@@ -4,8 +4,8 @@ import {
   MONITORING_STOPPED_STATUS_LABEL,
 } from '@/utils/unifiedAgentStatusPresentation';
 
-const REMOVED_BADGE = 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200';
-const CONNECTED_BADGE = 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300';
+const REMOVED_BADGE = 'bg-amber-100 text-amber-800 dark:bg-amber-900/25 dark:text-amber-200';
+const CONNECTED_BADGE = 'bg-green-100 text-green-800 dark:bg-green-900/25 dark:text-green-300';
 const DISCONNECTED_BADGE = 'bg-surface-alt text-base-content';
 
 describe('getUnifiedAgentStatusPresentation — branch coverage', () => {
diff --git a/frontend-modern/src/utils/__tests__/unifiedAgentStatusPresentation.branchcov0713.test.ts b/frontend-modern/src/utils/__tests__/unifiedAgentStatusPresentation.branchcov0713.test.ts
index 8e1fbeff11..52e7284dc7 100644
--- a/frontend-modern/src/utils/__tests__/unifiedAgentStatusPresentation.branchcov0713.test.ts
+++ b/frontend-modern/src/utils/__tests__/unifiedAgentStatusPresentation.branchcov0713.test.ts
@@ -19,12 +19,13 @@ import {
 //   - non-canonical state values falling through to the default arm
 //   - lookup edge inputs (truthy/falsy non-boolean values cast to boolean)
 
-const REMOVED_BADGE = 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200';
-const CONNECTED_BADGE = 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300';
+const REMOVED_BADGE = 'bg-amber-100 text-amber-800 dark:bg-amber-900/25 dark:text-amber-200';
+const CONNECTED_BADGE = 'bg-green-100 text-green-800 dark:bg-green-900/25 dark:text-green-300';
 const DEFAULT_BADGE = 'bg-surface-alt text-base-content';
-const LOOKUP_CONNECTED_BADGE = 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300';
+const LOOKUP_CONNECTED_BADGE =
+  'bg-green-100 text-green-700 dark:bg-green-900/25 dark:text-green-300';
 const LOOKUP_DISCONNECTED_BADGE =
-  'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200';
+  'bg-amber-100 text-amber-800 dark:bg-amber-900/25 dark:text-amber-200';
 
 describe('getUnifiedAgentStatusPresentation — branch coverage', () => {
   describe('state === "removed" guard', () => {
diff --git a/frontend-modern/src/utils/__tests__/unifiedAgentStatusPresentation.test.ts b/frontend-modern/src/utils/__tests__/unifiedAgentStatusPresentation.test.ts
index 59c54a55f7..4ae0a71729 100644
--- a/frontend-modern/src/utils/__tests__/unifiedAgentStatusPresentation.test.ts
+++ b/frontend-modern/src/utils/__tests__/unifiedAgentStatusPresentation.test.ts
@@ -7,24 +7,24 @@ import {
 describe('unifiedAgentStatusPresentation', () => {
   it('returns canonical monitored-agent status presentation', () => {
     expect(getUnifiedAgentStatusPresentation('active', 'online')).toEqual({
-      badgeClass: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300',
+      badgeClass: 'bg-green-100 text-green-800 dark:bg-green-900/25 dark:text-green-300',
       label: 'online',
     });
 
     expect(getUnifiedAgentStatusPresentation('removed', 'offline')).toEqual({
-      badgeClass: 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200',
+      badgeClass: 'bg-amber-100 text-amber-800 dark:bg-amber-900/25 dark:text-amber-200',
       label: 'Monitoring stopped',
     });
   });
 
   it('returns canonical lookup status presentation', () => {
     expect(getUnifiedAgentLookupStatusPresentation(true)).toEqual({
-      badgeClass: 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300',
+      badgeClass: 'bg-green-100 text-green-700 dark:bg-green-900/25 dark:text-green-300',
       label: 'Connected',
     });
 
     expect(getUnifiedAgentLookupStatusPresentation(false)).toEqual({
-      badgeClass: 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200',
+      badgeClass: 'bg-amber-100 text-amber-800 dark:bg-amber-900/25 dark:text-amber-200',
       label: 'Not reporting yet',
     });
   });
diff --git a/frontend-modern/src/utils/__tests__/workloadGuestPresentation.test.ts b/frontend-modern/src/utils/__tests__/workloadGuestPresentation.test.ts
index 7c7c0bd422..40445442f9 100644
--- a/frontend-modern/src/utils/__tests__/workloadGuestPresentation.test.ts
+++ b/frontend-modern/src/utils/__tests__/workloadGuestPresentation.test.ts
@@ -11,17 +11,17 @@ describe('workloadGuestPresentation', () => {
   it('returns canonical guest backup status presentation', () => {
     expect(getWorkloadsGuestBackupStatusPresentation('fresh')).toEqual({
       color: 'text-green-600 dark:text-green-400',
-      bgColor: 'bg-green-100 dark:bg-green-900',
+      bgColor: 'bg-green-100 dark:bg-green-900/25',
       icon: 'check',
     });
     expect(getWorkloadsGuestBackupStatusPresentation('never')).toEqual({
       color: 'text-red-600 dark:text-red-400',
-      bgColor: 'bg-red-100 dark:bg-red-900',
+      bgColor: 'bg-red-100 dark:bg-red-900/25',
       icon: 'x',
     });
     expect(getWorkloadsGuestBackupStatusPresentation('overdue')).toEqual({
       color: 'text-yellow-600 dark:text-yellow-400',
-      bgColor: 'bg-yellow-100 dark:bg-yellow-900',
+      bgColor: 'bg-yellow-100 dark:bg-yellow-900/25',
       icon: 'warning',
     });
   });
@@ -51,7 +51,7 @@ describe('workloadGuestPresentation', () => {
   it('presents a running backup as its own state, keeping the completed age', () => {
     expect(getWorkloadsGuestBackupStatusPresentation('running')).toEqual({
       color: 'text-blue-600 dark:text-blue-400',
-      bgColor: 'bg-blue-100 dark:bg-blue-900',
+      bgColor: 'bg-blue-100 dark:bg-blue-900/25',
       icon: 'running',
     });
     // While a backup runs, the tooltip still reports the last COMPLETED
diff --git a/frontend-modern/src/utils/__tests__/workloadTypePresentation.branchcov0712c.test.ts b/frontend-modern/src/utils/__tests__/workloadTypePresentation.branchcov0712c.test.ts
index 3f739b7062..873b2a571d 100644
--- a/frontend-modern/src/utils/__tests__/workloadTypePresentation.branchcov0712c.test.ts
+++ b/frontend-modern/src/utils/__tests__/workloadTypePresentation.branchcov0712c.test.ts
@@ -51,7 +51,7 @@ describe('workloadTypePresentation (branch coverage 0712c)', () => {
         label: 'VM',
         pluralLabel: 'VMs',
         title: 'Virtual Machine',
-        className: 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300',
+        className: 'bg-blue-100 text-blue-700 dark:bg-blue-900/25 dark:text-blue-300',
       });
     });
 
@@ -60,7 +60,7 @@ describe('workloadTypePresentation (branch coverage 0712c)', () => {
         label: 'LXC',
         pluralLabel: 'LXC',
         title: 'System Container',
-        className: 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300',
+        className: 'bg-green-100 text-green-700 dark:bg-green-900/25 dark:text-green-300',
       });
     });
 
@@ -69,7 +69,7 @@ describe('workloadTypePresentation (branch coverage 0712c)', () => {
         label: 'Container',
         pluralLabel: 'Containers',
         title: 'Application Container',
-        className: 'bg-sky-100 text-sky-700 dark:bg-sky-900 dark:text-sky-300',
+        className: 'bg-sky-100 text-sky-700 dark:bg-sky-900/25 dark:text-sky-300',
       });
     });
 
@@ -78,7 +78,7 @@ describe('workloadTypePresentation (branch coverage 0712c)', () => {
         label: 'Pod',
         pluralLabel: 'Pods',
         title: 'Kubernetes Pod',
-        className: 'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300',
+        className: 'bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300',
       });
     });
 
@@ -96,7 +96,7 @@ describe('workloadTypePresentation (branch coverage 0712c)', () => {
         label: 'LXC',
         pluralLabel: 'LXC',
         title: 'System Container',
-        className: 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300',
+        className: 'bg-green-100 text-green-700 dark:bg-green-900/25 dark:text-green-300',
       });
     });
 
@@ -111,7 +111,7 @@ describe('workloadTypePresentation (branch coverage 0712c)', () => {
         label: 'My VM',
         pluralLabel: 'My VMs',
         title: 'My Machine',
-        className: 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300',
+        className: 'bg-blue-100 text-blue-700 dark:bg-blue-900/25 dark:text-blue-300',
       });
     });
 
@@ -122,7 +122,7 @@ describe('workloadTypePresentation (branch coverage 0712c)', () => {
         label: 'VM',
         pluralLabel: 'VMs',
         title: 'Virtual Machine',
-        className: 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300',
+        className: 'bg-blue-100 text-blue-700 dark:bg-blue-900/25 dark:text-blue-300',
       });
     });
 
@@ -131,7 +131,7 @@ describe('workloadTypePresentation (branch coverage 0712c)', () => {
         label: 'Pod',
         pluralLabel: 'Pods',
         title: 'My Pod Title',
-        className: 'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300',
+        className: 'bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300',
       });
     });
 
diff --git a/frontend-modern/src/utils/actionAuditPresentation.ts b/frontend-modern/src/utils/actionAuditPresentation.ts
index d1ffdd003b..2dcbc45c65 100644
--- a/frontend-modern/src/utils/actionAuditPresentation.ts
+++ b/frontend-modern/src/utils/actionAuditPresentation.ts
@@ -42,44 +42,44 @@ const ACTION_STATE_PRESENTATION: Record<ActionAuditState, ActionAuditStatePresen
   pending_approval: {
     label: 'Pending approval',
     className:
-      'bg-amber-100 text-amber-800 border-amber-200 dark:bg-amber-900 dark:text-amber-200 dark:border-amber-700',
+      'bg-amber-100 text-amber-800 border-amber-200 dark:bg-amber-900/25 dark:text-amber-200 dark:border-amber-700',
   },
   approved: {
     label: 'Approved',
     className:
-      'bg-blue-100 text-blue-800 border-blue-200 dark:bg-blue-900 dark:text-blue-200 dark:border-blue-700',
+      'bg-blue-100 text-blue-800 border-blue-200 dark:bg-blue-900/25 dark:text-blue-200 dark:border-blue-700',
   },
   rejected: {
     label: 'Rejected',
     className:
-      'bg-red-100 text-red-800 border-red-200 dark:bg-red-900 dark:text-red-200 dark:border-red-700',
+      'bg-red-100 text-red-800 border-red-200 dark:bg-red-900/25 dark:text-red-200 dark:border-red-700',
   },
   expired: {
     label: 'Expired',
     className:
-      'bg-amber-100 text-amber-800 border-amber-200 dark:bg-amber-900 dark:text-amber-200 dark:border-amber-700',
+      'bg-amber-100 text-amber-800 border-amber-200 dark:bg-amber-900/25 dark:text-amber-200 dark:border-amber-700',
   },
   executing: {
     label: 'Executing',
     className:
-      'bg-sky-100 text-sky-800 border-sky-200 dark:bg-sky-900 dark:text-sky-200 dark:border-sky-700',
+      'bg-sky-100 text-sky-800 border-sky-200 dark:bg-sky-900/25 dark:text-sky-200 dark:border-sky-700',
   },
   completed: {
     label: 'Completed',
     className:
-      'bg-emerald-100 text-emerald-800 border-emerald-200 dark:bg-emerald-900 dark:text-emerald-200 dark:border-emerald-700',
+      'bg-emerald-100 text-emerald-800 border-emerald-200 dark:bg-emerald-900/25 dark:text-emerald-200 dark:border-emerald-700',
   },
   failed: {
     label: 'Failed',
     className:
-      'bg-red-100 text-red-800 border-red-200 dark:bg-red-900 dark:text-red-200 dark:border-red-700',
+      'bg-red-100 text-red-800 border-red-200 dark:bg-red-900/25 dark:text-red-200 dark:border-red-700',
   },
 };
 
 const REFUSED_ACTION_STATE_PRESENTATION: ActionAuditStatePresentation = {
   label: 'Refused',
   className:
-    'bg-rose-100 text-rose-800 border-rose-200 dark:bg-rose-900 dark:text-rose-200 dark:border-rose-700',
+    'bg-rose-100 text-rose-800 border-rose-200 dark:bg-rose-900/25 dark:text-rose-200 dark:border-rose-700',
 };
 
 const ACTION_REFUSAL_PRESENTATION: Record<
diff --git a/frontend-modern/src/utils/agentCapabilityPresentation.ts b/frontend-modern/src/utils/agentCapabilityPresentation.ts
index 9957a1c0df..4ceaacfd66 100644
--- a/frontend-modern/src/utils/agentCapabilityPresentation.ts
+++ b/frontend-modern/src/utils/agentCapabilityPresentation.ts
@@ -25,18 +25,18 @@ export function getAgentCapabilityLabel(capability: AgentCapability): string {
 export function getAgentCapabilityBadgeClass(capability: AgentCapability): string {
   switch (capability) {
     case 'proxmox':
-      return 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-300';
+      return 'bg-amber-100 text-amber-800 dark:bg-amber-900/25 dark:text-amber-300';
     case 'pbs':
       return 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300';
     case 'pmg':
-      return 'bg-rose-100 text-rose-800 dark:bg-rose-900 dark:text-rose-300';
+      return 'bg-rose-100 text-rose-800 dark:bg-rose-900/25 dark:text-rose-300';
     case 'truenas':
-      return 'bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-300';
+      return 'bg-cyan-100 text-cyan-800 dark:bg-cyan-900/25 dark:text-cyan-300';
     case 'availability':
-      return 'bg-sky-100 text-sky-800 dark:bg-sky-900 dark:text-sky-300';
+      return 'bg-sky-100 text-sky-800 dark:bg-sky-900/25 dark:text-sky-300';
     case 'kubernetes':
-      return 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-300';
+      return 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/25 dark:text-emerald-300';
     default:
-      return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300';
+      return 'bg-blue-100 text-blue-800 dark:bg-blue-900/25 dark:text-blue-300';
   }
 }
diff --git a/frontend-modern/src/utils/agentProfileSuggestionPresentation.ts b/frontend-modern/src/utils/agentProfileSuggestionPresentation.ts
index 8c45e3f7bc..04ab4d71c0 100644
--- a/frontend-modern/src/utils/agentProfileSuggestionPresentation.ts
+++ b/frontend-modern/src/utils/agentProfileSuggestionPresentation.ts
@@ -3,10 +3,10 @@ import { titleCaseDelimitedLabel } from '@/utils/textPresentation';
 export function getAgentProfileSuggestionValueBadgeClass(value: unknown): string {
   if (typeof value === 'boolean') {
     return value
-      ? 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300'
+      ? 'bg-green-100 text-green-700 dark:bg-green-900/25 dark:text-green-300'
       : 'bg-surface-alt text-base-content';
   }
-  return 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300';
+  return 'bg-blue-100 text-blue-700 dark:bg-blue-900/25 dark:text-blue-300';
 }
 
 export const AGENT_PROFILE_SUGGESTION_EXAMPLE_PROMPTS = [
diff --git a/frontend-modern/src/utils/aiControlLevelPresentation.ts b/frontend-modern/src/utils/aiControlLevelPresentation.ts
index 24c313a5ef..49bac30ddc 100644
--- a/frontend-modern/src/utils/aiControlLevelPresentation.ts
+++ b/frontend-modern/src/utils/aiControlLevelPresentation.ts
@@ -20,18 +20,18 @@ export function normalizeAIControlLevel(value?: string): AIControlLevel {
 
 export function getAIControlLevelPanelClass(level: AIControlLevel): string {
   return level === 'autonomous'
-    ? 'border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900'
-    : 'border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900';
+    ? 'border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/25'
+    : 'border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900/25';
 }
 
 export function getAIControlLevelBadgeClass(level: AIControlLevel): string {
   switch (level) {
     case 'autonomous':
-      return 'bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300';
+      return 'bg-red-100 dark:bg-red-900/25 text-red-700 dark:text-red-300';
     case 'controlled':
-      return 'bg-amber-100 dark:bg-amber-900 text-amber-700 dark:text-amber-300';
+      return 'bg-amber-100 dark:bg-amber-900/25 text-amber-700 dark:text-amber-300';
     default:
-      return 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300';
+      return 'bg-blue-100 dark:bg-blue-900/25 text-blue-700 dark:text-blue-300';
   }
 }
 
@@ -55,18 +55,18 @@ export function getAIChatControlLevelPresentation(
         label: 'Chat actions',
         description: 'Eligible chat-only actions',
         pillClassName:
-          'border-red-200 text-red-700 bg-red-50 dark:border-red-800 dark:text-red-200 dark:bg-red-900',
+          'border-red-200 text-red-700 bg-red-50 dark:border-red-800 dark:text-red-200 dark:bg-red-900/25',
         dotClassName: 'bg-red-500',
-        selectedClassName: 'bg-red-50 dark:bg-red-900',
+        selectedClassName: 'bg-red-50 dark:bg-red-900/25',
       };
     case 'controlled':
       return {
         label: 'Ask first',
         description: 'Asks before chat-only actions',
         pillClassName:
-          'border-amber-200 text-amber-700 bg-amber-50 dark:border-amber-800 dark:text-amber-200 dark:bg-amber-900',
+          'border-amber-200 text-amber-700 bg-amber-50 dark:border-amber-800 dark:text-amber-200 dark:bg-amber-900/25',
         dotClassName: 'bg-amber-500',
-        selectedClassName: 'bg-amber-50 dark:bg-amber-900',
+        selectedClassName: 'bg-amber-50 dark:bg-amber-900/25',
       };
     default:
       return {
diff --git a/frontend-modern/src/utils/aiFindingPresentation.ts b/frontend-modern/src/utils/aiFindingPresentation.ts
index 00b4aae7f9..5319f8e9eb 100644
--- a/frontend-modern/src/utils/aiFindingPresentation.ts
+++ b/frontend-modern/src/utils/aiFindingPresentation.ts
@@ -25,15 +25,15 @@ const FINDING_SOURCE_CLASSES: Record<string, string> = {
   threshold:
     'border-orange-200 bg-orange-50 text-orange-700 dark:border-orange-800 dark:bg-orange-900 dark:text-orange-300',
   'ai-patrol':
-    'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-900 dark:text-blue-300',
+    'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-900/25 dark:text-blue-300',
   anomaly:
-    'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-900 dark:text-blue-300',
+    'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-900/25 dark:text-blue-300',
   'ai-chat':
-    'border-teal-200 bg-teal-50 text-teal-700 dark:border-teal-800 dark:bg-teal-900 dark:text-teal-300',
+    'border-teal-200 bg-teal-50 text-teal-700 dark:border-teal-800 dark:bg-teal-900/25 dark:text-teal-300',
   correlation:
-    'border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-800 dark:bg-sky-900 dark:text-sky-300',
+    'border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-800 dark:bg-sky-900/25 dark:text-sky-300',
   forecast:
-    'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-900 dark:text-emerald-300',
+    'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-900/25 dark:text-emerald-300',
 };
 
 const FINDING_SOURCE_TONES: Record<string, MetadataBadgeTone> = {
@@ -47,10 +47,10 @@ const FINDING_SOURCE_TONES: Record<string, MetadataBadgeTone> = {
 
 const FINDING_SEVERITY_CLASSES: Record<string, string> = {
   critical:
-    'border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-900 dark:text-red-300',
+    'border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-900/25 dark:text-red-300',
   warning:
-    'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-900 dark:text-amber-300',
-  info: 'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-900 dark:text-blue-300',
+    'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-900/25 dark:text-amber-300',
+  info: 'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-900/25 dark:text-blue-300',
   watch: 'border-border bg-surface-alt text-base-content',
 };
 
@@ -62,22 +62,22 @@ const FINDING_SEVERITY_TONES: Record<string, MetadataBadgeTone> = {
 };
 
 const FINDING_SEVERITY_TONE_CLASSES: Record<string, string> = {
-  critical: 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300',
-  warning: 'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300',
-  info: 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300',
+  critical: 'bg-red-100 text-red-700 dark:bg-red-900/25 dark:text-red-300',
+  warning: 'bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300',
+  info: 'bg-blue-100 text-blue-700 dark:bg-blue-900/25 dark:text-blue-300',
   watch: 'bg-surface-alt text-base-content',
 };
 
 const INVESTIGATION_STATUS_CLASSES: Record<InvestigationStatus, string> = {
   pending: 'border-border bg-surface-alt text-muted',
   running:
-    'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-900 dark:text-blue-300',
+    'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-900/25 dark:text-blue-300',
   completed:
-    'border-green-200 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-900 dark:text-green-300',
+    'border-green-200 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-900/25 dark:text-green-300',
   failed:
-    'border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-900 dark:text-red-300',
+    'border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-900/25 dark:text-red-300',
   needs_attention:
-    'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-900 dark:text-amber-300',
+    'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-900/25 dark:text-amber-300',
 };
 
 const INVESTIGATION_STATUS_TONES: Record<InvestigationStatus, MetadataBadgeTone> = {
@@ -98,23 +98,23 @@ const INVESTIGATION_STATUS_LABELS: Record<InvestigationStatus, string> = {
 
 const FINDING_LOOP_STATE_CLASSES: Record<string, string> = {
   detected:
-    'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-900 dark:text-blue-300',
+    'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-900/25 dark:text-blue-300',
   investigating:
-    'border-indigo-200 bg-indigo-50 text-indigo-700 dark:border-indigo-800 dark:bg-indigo-900 dark:text-indigo-300',
+    'border-indigo-200 bg-indigo-50 text-indigo-700 dark:border-indigo-800 dark:bg-indigo-900/25 dark:text-indigo-300',
   remediation_planned:
-    'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-900 dark:text-amber-300',
+    'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-900/25 dark:text-amber-300',
   remediating:
-    'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-900 dark:text-amber-300',
+    'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-900/25 dark:text-amber-300',
   remediation_failed:
-    'border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-900 dark:text-red-300',
+    'border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-900/25 dark:text-red-300',
   needs_attention:
-    'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-900 dark:text-amber-300',
+    'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-900/25 dark:text-amber-300',
   timed_out: 'border-border bg-surface-alt text-base-content',
   resolved:
-    'border-green-200 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-900 dark:text-green-300',
+    'border-green-200 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-900/25 dark:text-green-300',
   dismissed: 'border-border bg-surface-alt text-muted',
   snoozed:
-    'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-900 dark:text-blue-300',
+    'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-900/25 dark:text-blue-300',
   suppressed: 'border-border bg-surface-alt text-muted',
 };
 
@@ -155,9 +155,9 @@ const FINDING_LIFECYCLE_LABELS: Record<string, string> = {
 
 const FINDING_STATUS_BADGE_CLASSES: Record<string, string> = {
   resolved:
-    'border-green-200 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-900 dark:text-green-300',
+    'border-green-200 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-900/25 dark:text-green-300',
   snoozed:
-    'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-900 dark:text-blue-300',
+    'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-900/25 dark:text-blue-300',
   dismissed: DEFAULT_BADGE_CLASSES,
 };
 
@@ -189,25 +189,25 @@ const INVESTIGATION_OUTCOME_LABELS: Record<InvestigationOutcome, string> = {
 
 const INVESTIGATION_OUTCOME_CLASSES: Record<InvestigationOutcome, string> = {
   resolved:
-    'border-green-200 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-900 dark:text-green-300',
+    'border-green-200 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-900/25 dark:text-green-300',
   fix_queued:
-    'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-900 dark:text-blue-300',
+    'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-900/25 dark:text-blue-300',
   fix_executed:
-    'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-900 dark:text-emerald-300',
+    'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-900/25 dark:text-emerald-300',
   fix_failed:
-    'border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-900 dark:text-red-300',
+    'border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-900/25 dark:text-red-300',
   fix_rejected:
-    'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-900 dark:text-amber-300',
+    'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-900/25 dark:text-amber-300',
   needs_attention:
-    'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-900 dark:text-amber-300',
+    'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-900/25 dark:text-amber-300',
   cannot_fix: 'border-border bg-surface-alt text-muted',
   timed_out: 'border-border bg-surface-alt text-base-content',
   fix_verified:
-    'border-green-200 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-900 dark:text-green-300',
+    'border-green-200 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-900/25 dark:text-green-300',
   fix_verification_failed:
-    'border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-900 dark:text-red-300',
+    'border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-900/25 dark:text-red-300',
   fix_verification_unknown:
-    'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-900 dark:text-amber-300',
+    'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-900/25 dark:text-amber-300',
 };
 
 const INVESTIGATION_OUTCOME_TONES: Record<InvestigationOutcome, MetadataBadgeTone> = {
@@ -370,7 +370,7 @@ export const getFindingSeverityPresentation = (
     return {
       label: 'Runtime critical',
       badgeClasses:
-        'border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-900 dark:text-red-300',
+        'border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-900/25 dark:text-red-300',
       badgeTone: 'danger',
       uppercase: false,
     };
@@ -379,7 +379,7 @@ export const getFindingSeverityPresentation = (
   return {
     label: 'Runtime issue',
     badgeClasses:
-      'border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-800 dark:bg-sky-900 dark:text-sky-300',
+      'border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-800 dark:bg-sky-900/25 dark:text-sky-300',
     badgeTone: 'sky',
     uppercase: false,
   };
@@ -494,7 +494,7 @@ export const getPatrolFindingClassification = (
         kind: 'runtime',
         label: 'Patrol runtime',
         badgeClasses:
-          'border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-800 dark:bg-sky-900 dark:text-sky-300',
+          'border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-800 dark:bg-sky-900/25 dark:text-sky-300',
       }
     : {
         kind: 'infrastructure',
diff --git a/frontend-modern/src/utils/aiProviderHealthPresentation.ts b/frontend-modern/src/utils/aiProviderHealthPresentation.ts
index 86fb4030ff..b617da89aa 100644
--- a/frontend-modern/src/utils/aiProviderHealthPresentation.ts
+++ b/frontend-modern/src/utils/aiProviderHealthPresentation.ts
@@ -8,15 +8,15 @@ export interface AIProviderHealthPresentation {
 const PRESENTATION: Record<AIProviderHealthStatus, AIProviderHealthPresentation> = {
   ok: {
     label: 'Healthy',
-    badgeClass: 'bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300',
+    badgeClass: 'bg-green-100 dark:bg-green-900/25 text-green-700 dark:text-green-300',
   },
   error: {
     label: 'Issue',
-    badgeClass: 'bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300',
+    badgeClass: 'bg-red-100 dark:bg-red-900/25 text-red-700 dark:text-red-300',
   },
   checking: {
     label: 'Checking...',
-    badgeClass: 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300',
+    badgeClass: 'bg-blue-100 dark:bg-blue-900/25 text-blue-700 dark:text-blue-300',
   },
   not_configured: {
     label: 'Not checked',
diff --git a/frontend-modern/src/utils/aiSettingsPresentation.ts b/frontend-modern/src/utils/aiSettingsPresentation.ts
index 6b71affd5c..ec53a96912 100644
--- a/frontend-modern/src/utils/aiSettingsPresentation.ts
+++ b/frontend-modern/src/utils/aiSettingsPresentation.ts
@@ -72,14 +72,14 @@ export function getAISettingsReadinessPresentation(
 
   if (configured) {
     return {
-      containerClassName: 'bg-green-50 dark:bg-green-900 text-green-800 dark:text-green-200',
+      containerClassName: 'bg-green-50 dark:bg-green-900/25 text-green-800 dark:text-green-200',
       dotClassName: 'bg-emerald-400',
       summary: `Ready • ${providerCount} provider${providerCount !== 1 ? 's' : ''} • ${modelCount} models`,
     };
   }
 
   return {
-    containerClassName: 'bg-amber-50 dark:bg-amber-900 text-amber-800 dark:text-amber-200',
+    containerClassName: 'bg-amber-50 dark:bg-amber-900/25 text-amber-800 dark:text-amber-200',
     dotClassName: 'bg-amber-400',
     summary: 'Configure at least one provider above to enable Pulse Assistant and Patrol.',
   };
diff --git a/frontend-modern/src/utils/alertActivationPresentation.ts b/frontend-modern/src/utils/alertActivationPresentation.ts
index c7ec854af1..04c396fc51 100644
--- a/frontend-modern/src/utils/alertActivationPresentation.ts
+++ b/frontend-modern/src/utils/alertActivationPresentation.ts
@@ -29,7 +29,7 @@ export function getAlertActivationPresentation({
     trackClass: `relative h-6 w-11 rounded-full transition ${
       isActive ? 'bg-blue-600' : 'bg-surface-hover'
     }${isBusy ? ' opacity-50' : ''}`,
-    thumbClass: `absolute top-[2px] left-[2px] h-5 w-5 rounded-full bg-white shadow transition-all ${
+    thumbClass: `absolute top-[2px] left-[2px] h-5 w-5 rounded-full bg-white shadow-sm transition-all ${
       isActive ? 'translate-x-5' : 'translate-x-0'
     }`,
   };
diff --git a/frontend-modern/src/utils/alertFrequencyPresentation.ts b/frontend-modern/src/utils/alertFrequencyPresentation.ts
index 699ab93541..30bb95db4f 100644
--- a/frontend-modern/src/utils/alertFrequencyPresentation.ts
+++ b/frontend-modern/src/utils/alertFrequencyPresentation.ts
@@ -1,11 +1,11 @@
 export function getAlertFrequencySelectionPresentation() {
   return {
     containerClass:
-      'inline-flex items-center gap-2 rounded-full border border-blue-200 bg-blue-50 px-3 py-1 text-xs text-blue-700 dark:border-blue-700 dark:bg-blue-900 dark:text-blue-200',
+      'inline-flex items-center gap-2 rounded-full border border-blue-200 bg-blue-50 px-3 py-1 text-xs text-blue-700 dark:border-blue-700 dark:bg-blue-900/25 dark:text-blue-200',
     labelClass: 'font-medium uppercase tracking-wide text-[10px] text-blue-600 dark:text-blue-300',
   };
 }
 
 export function getAlertFrequencyClearFilterButtonClass(): string {
-  return 'rounded bg-blue-100 px-2 py-0.5 text-xs text-blue-700 transition-colors hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-300 dark:hover:bg-blue-800';
+  return 'rounded-sm bg-blue-100 px-2 py-0.5 text-xs text-blue-700 transition-colors hover:bg-blue-200 dark:bg-blue-900/25 dark:text-blue-300 dark:hover:bg-blue-800';
 }
diff --git a/frontend-modern/src/utils/alertGroupingPresentation.ts b/frontend-modern/src/utils/alertGroupingPresentation.ts
index a3177a4ca0..6bebd94323 100644
--- a/frontend-modern/src/utils/alertGroupingPresentation.ts
+++ b/frontend-modern/src/utils/alertGroupingPresentation.ts
@@ -1,13 +1,13 @@
 export function getAlertGroupingCardClass(selected: boolean): string {
   return `relative flex items-center gap-2 rounded-md border-2 p-3 transition-all ${
     selected
-      ? 'border-blue-500 bg-blue-50 shadow-sm dark:bg-blue-900'
+      ? 'border-blue-500 bg-blue-50 shadow-xs dark:bg-blue-900/25'
       : 'border-border hover:bg-surface-hover'
   }`;
 }
 
 export function getAlertGroupingCheckboxClass(selected: boolean): string {
-  return `flex h-4 w-4 items-center justify-center rounded border-2 ${
+  return `flex h-4 w-4 items-center justify-center rounded-sm border-2 ${
     selected ? 'border-blue-500 bg-blue-500' : 'border-border'
   }`;
 }
diff --git a/frontend-modern/src/utils/alertHistoryPresentation.ts b/frontend-modern/src/utils/alertHistoryPresentation.ts
index 029ad8c155..bf7943e458 100644
--- a/frontend-modern/src/utils/alertHistoryPresentation.ts
+++ b/frontend-modern/src/utils/alertHistoryPresentation.ts
@@ -2,7 +2,7 @@ export function getAlertHistoryResourceTypeBadgeClass(resourceType?: string | nu
   const normalized = (resourceType ?? '').trim().toLowerCase();
 
   if (normalized === 'vm' || normalized === 'node') {
-    return 'text-xs px-1 py-0.5 rounded bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300';
+    return 'text-xs px-1 py-0.5 rounded-sm bg-blue-100 dark:bg-blue-900/25 text-blue-700 dark:text-blue-300';
   }
 
   // 'system-container' is the unified-model name the v6 alert engine stamps
@@ -13,12 +13,12 @@ export function getAlertHistoryResourceTypeBadgeClass(resourceType?: string | nu
     normalized === 'lxc' ||
     normalized === 'system-container'
   ) {
-    return 'text-xs px-1 py-0.5 rounded bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300';
+    return 'text-xs px-1 py-0.5 rounded-sm bg-green-100 dark:bg-green-900/25 text-green-700 dark:text-green-300';
   }
 
   if (normalized === 'storage') {
-    return 'text-xs px-1 py-0.5 rounded bg-orange-100 dark:bg-orange-900 text-orange-700 dark:text-orange-300';
+    return 'text-xs px-1 py-0.5 rounded-sm bg-orange-100 dark:bg-orange-900 text-orange-700 dark:text-orange-300';
   }
 
-  return 'text-xs px-1 py-0.5 rounded bg-surface-hover text-base-content';
+  return 'text-xs px-1 py-0.5 rounded-sm bg-surface-hover text-base-content';
 }
diff --git a/frontend-modern/src/utils/alertIncidentPresentation.ts b/frontend-modern/src/utils/alertIncidentPresentation.ts
index 69057299af..5649918d23 100644
--- a/frontend-modern/src/utils/alertIncidentPresentation.ts
+++ b/frontend-modern/src/utils/alertIncidentPresentation.ts
@@ -31,9 +31,9 @@ export const ALERT_RESOURCE_INCIDENT_NOTE_SAVED = 'Incident note saved';
 export const ALERT_RESOURCE_INCIDENT_NOTE_SAVE_FAILURE = 'Failed to save incident note';
 export const ALERT_RESOURCE_INCIDENT_VIEW_TITLE = 'View incidents for this resource';
 
-const ALERT_INCIDENT_STATUS_BASE = 'px-2 py-0.5 rounded';
+const ALERT_INCIDENT_STATUS_BASE = 'px-2 py-0.5 rounded-sm';
 const ALERT_INCIDENT_EVENT_FILTER_BUTTON_BASE =
-  'px-2 py-0.5 rounded border text-[10px] transition-colors';
+  'px-2 py-0.5 rounded-sm border text-[10px] transition-colors';
 
 export type AlertIncidentEventFilterVariant = 'compact' | 'panel';
 
@@ -57,12 +57,12 @@ export function getAlertIncidentStatusPresentation(
     case 'acknowledged':
       return {
         label,
-        className: `${ALERT_INCIDENT_STATUS_BASE} bg-emerald-100 dark:bg-emerald-900 text-emerald-700 dark:text-emerald-300`,
+        className: `${ALERT_INCIDENT_STATUS_BASE} bg-emerald-100 dark:bg-emerald-900/25 text-emerald-700 dark:text-emerald-300`,
       };
     case 'open':
       return {
         label,
-        className: `${ALERT_INCIDENT_STATUS_BASE} bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300`,
+        className: `${ALERT_INCIDENT_STATUS_BASE} bg-red-100 dark:bg-red-900/25 text-red-700 dark:text-red-300`,
       };
     default:
       return {
@@ -85,8 +85,8 @@ export function getAlertHistoryStatusPresentation(
     return {
       label: 'active',
       className:
-        'text-xs px-2 py-0.5 rounded bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300 font-medium',
-      rowClassName: 'bg-red-50 dark:bg-red-900',
+        'text-xs px-2 py-0.5 rounded-sm bg-red-100 dark:bg-red-900/25 text-red-700 dark:text-red-300 font-medium',
+      rowClassName: 'bg-red-50 dark:bg-red-900/25',
     };
   }
 
@@ -94,14 +94,14 @@ export function getAlertHistoryStatusPresentation(
     return {
       label: 'acknowledged',
       className:
-        'text-xs px-2 py-0.5 rounded bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-300',
+        'text-xs px-2 py-0.5 rounded-sm bg-yellow-100 dark:bg-yellow-900/25 text-yellow-700 dark:text-yellow-300',
       rowClassName: '',
     };
   }
 
   return {
     label: normalized || 'resolved',
-    className: 'text-xs px-2 py-0.5 rounded bg-surface-hover text-base-content',
+    className: 'text-xs px-2 py-0.5 rounded-sm bg-surface-hover text-base-content',
     rowClassName: '',
   };
 }
@@ -194,7 +194,7 @@ export function getAlertIncidentEventFilterContainerClass(
   variant: AlertIncidentEventFilterVariant,
 ): string {
   if (variant === 'panel') {
-    return 'flex flex-wrap items-center gap-1.5 rounded border border-border bg-surface-alt/50 p-2';
+    return 'flex flex-wrap items-center gap-1.5 rounded-sm border border-border p-2';
   }
 
   return 'flex flex-wrap items-center gap-2 text-[10px] text-muted';
@@ -211,7 +211,7 @@ export function getAlertIncidentEventFilterLabelClass(
 }
 
 export function getAlertIncidentEventFilterActionButtonClass(): string {
-  return 'px-2 py-0.5 rounded border border-border text-muted hover:bg-surface-hover';
+  return 'px-2 py-0.5 rounded-sm border border-border text-muted hover:bg-surface-hover';
 }
 
 export function getAlertIncidentEventFilterChipClass(
@@ -219,7 +219,7 @@ export function getAlertIncidentEventFilterChipClass(
   variant: AlertIncidentEventFilterVariant,
 ): string {
   if (selected) {
-    return `${ALERT_INCIDENT_EVENT_FILTER_BUTTON_BASE} border-blue-300 bg-blue-100 text-blue-700 dark:border-blue-800 dark:bg-blue-900 dark:text-blue-300`;
+    return `${ALERT_INCIDENT_EVENT_FILTER_BUTTON_BASE} border-blue-300 bg-blue-100 text-blue-700 dark:border-blue-800 dark:bg-blue-900/25 dark:text-blue-300`;
   }
 
   if (variant === 'panel') {
@@ -230,15 +230,15 @@ export function getAlertIncidentEventFilterChipClass(
 }
 
 export function getAlertIncidentAcknowledgedBadgeClass(): string {
-  return 'px-2 py-0.5 rounded bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300';
+  return 'px-2 py-0.5 rounded-sm bg-emerald-100 text-emerald-700 dark:bg-emerald-900/25 dark:text-emerald-300';
 }
 
 export function getAlertIncidentTimelineEventCardClass(variant: 'surface' | 'alt'): string {
-  return `rounded border border-border ${variant === 'alt' ? 'bg-surface-alt' : 'bg-surface'} p-2 whitespace-normal break-words`;
+  return `rounded-sm border border-border ${variant === 'alt' ? 'bg-surface-alt' : 'bg-surface'} p-2 whitespace-normal wrap-break-word`;
 }
 
 export function getAlertIncidentNoteTextareaClass(): string {
-  return 'w-full rounded border border-border bg-surface p-2 text-xs text-base-content';
+  return 'w-full rounded-sm border border-border bg-surface p-2 text-xs text-base-content';
 }
 
 export function getAlertIncidentNoteSaveButtonClass(): string {
@@ -266,7 +266,7 @@ export function getAlertIncidentTimelineOutputClass(): string {
 }
 
 export function getAlertResourceIncidentCardClass(): string {
-  return 'rounded border border-border bg-surface p-3';
+  return 'rounded-sm border border-border bg-surface p-3';
 }
 
 export function getAlertResourceIncidentSummaryRowClass(): string {
@@ -278,7 +278,7 @@ export function getAlertResourceIncidentActivitySummaryClass(): string {
 }
 
 export function getAlertResourceIncidentActivityChipClass(): string {
-  return 'rounded bg-surface-alt px-2 py-0.5 text-[10px] font-medium text-base-content';
+  return 'rounded-sm bg-surface-alt px-2 py-0.5 text-[10px] font-medium text-base-content';
 }
 
 export function getAlertResourceIncidentToggleButtonClass(): string {
diff --git a/frontend-modern/src/utils/alertOverviewPresentation.ts b/frontend-modern/src/utils/alertOverviewPresentation.ts
index 53f5b1fd76..8514cd497c 100644
--- a/frontend-modern/src/utils/alertOverviewPresentation.ts
+++ b/frontend-modern/src/utils/alertOverviewPresentation.ts
@@ -401,10 +401,10 @@ export function getAlertOverviewCardPresentation(
   const stateClass = acknowledged
     ? 'border-border bg-surface-alt'
     : isCritical
-      ? 'border-red-300 dark:border-red-800 bg-red-50 dark:bg-red-900'
+      ? 'border-red-300 dark:border-red-800 bg-red-50 dark:bg-red-900/25'
       : isInformational
-        ? 'border-blue-300 dark:border-blue-800 bg-blue-50 dark:bg-blue-900'
-        : 'border-yellow-300 dark:border-yellow-800 bg-yellow-50 dark:bg-yellow-900';
+        ? 'border-blue-300 dark:border-blue-800 bg-blue-50 dark:bg-blue-900/25'
+        : 'border-yellow-300 dark:border-yellow-800 bg-yellow-50 dark:bg-yellow-900/25';
   const iconClassName = acknowledged
     ? 'mr-3 mt-0.5 transition-all text-green-600 dark:text-green-400'
     : isCritical
@@ -428,7 +428,7 @@ export function getAlertOverviewCardPresentation(
 }
 
 export function getAlertOverviewAcknowledgedBadgeClass(): string {
-  return 'px-2 py-0.5 text-xs bg-yellow-200 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-200 rounded';
+  return 'px-2 py-0.5 text-xs bg-yellow-200 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-200 rounded-sm';
 }
 
 export function getAlertOverviewStartedAtClass(): string {
@@ -440,7 +440,7 @@ export function getAlertOverviewStartedAtClass(): string {
 export function getAlertOverviewPrimaryActionClass(acknowledged: boolean): string {
   const stateClass = acknowledged
     ? 'text-base-content border-border hover:bg-surface-hover'
-    : 'text-yellow-700 dark:text-yellow-300 border-yellow-300 dark:border-yellow-700 hover:bg-yellow-50 dark:hover:bg-yellow-900';
+    : 'text-yellow-700 dark:text-yellow-300 border-yellow-300 dark:border-yellow-700 hover:bg-yellow-50 dark:hover:bg-yellow-900/25';
   return `px-3 py-1.5 text-xs font-medium border rounded-md transition-all disabled:opacity-50 disabled:cursor-not-allowed ${stateClass}`;
 }
 
diff --git a/frontend-modern/src/utils/alertResourceTablePresentation.ts b/frontend-modern/src/utils/alertResourceTablePresentation.ts
index 44eccbc1fd..74ef6e5f8e 100644
--- a/frontend-modern/src/utils/alertResourceTablePresentation.ts
+++ b/frontend-modern/src/utils/alertResourceTablePresentation.ts
@@ -83,7 +83,7 @@ export function getAlertResourceTableOfflineStatePresentation(
       return {
         label: ALERT_RESOURCE_TABLE_OFFLINE_STATE_WARNING_LABEL,
         className:
-          'bg-blue-50 text-blue-700 hover:bg-blue-100 dark:bg-blue-900 dark:text-blue-200 dark:hover:bg-blue-800',
+          'bg-blue-50 text-blue-700 hover:bg-blue-100 dark:bg-blue-900/25 dark:text-blue-200 dark:hover:bg-blue-800',
         title: ALERT_RESOURCE_TABLE_OFFLINE_STATE_WARNING_TITLE,
       } as const;
     case 'critical':
@@ -91,7 +91,7 @@ export function getAlertResourceTableOfflineStatePresentation(
       return {
         label: ALERT_RESOURCE_TABLE_OFFLINE_STATE_CRITICAL_LABEL,
         className:
-          'bg-red-50 text-red-700 hover:bg-red-100 dark:bg-red-900 dark:text-red-200 dark:hover:bg-red-800',
+          'bg-red-50 text-red-700 hover:bg-red-100 dark:bg-red-900/25 dark:text-red-200 dark:hover:bg-red-800',
         title: ALERT_RESOURCE_TABLE_OFFLINE_STATE_CRITICAL_TITLE,
       } as const;
   }
diff --git a/frontend-modern/src/utils/alertSchedulePresentation.ts b/frontend-modern/src/utils/alertSchedulePresentation.ts
index 85fe3e2ada..e4fb40af34 100644
--- a/frontend-modern/src/utils/alertSchedulePresentation.ts
+++ b/frontend-modern/src/utils/alertSchedulePresentation.ts
@@ -1,6 +1,6 @@
 export function getAlertQuietDayButtonClass(selected: boolean): string {
   return `rounded-md px-2 py-2 text-xs font-medium transition-all duration-200 ${
-    selected ? 'bg-blue-500 text-white shadow-sm' : 'text-muted hover:bg-surface-hover'
+    selected ? 'bg-blue-500 text-white shadow-xs' : 'text-muted hover:bg-surface-hover'
   }`;
 }
 
@@ -13,7 +13,7 @@ export function getAlertQuietSuppressCardClass(selected: boolean): string {
 }
 
 export function getAlertQuietSuppressCheckboxClass(selected: boolean): string {
-  return `mt-1 flex h-4 w-4 items-center justify-center rounded border-2 ${
+  return `mt-1 flex h-4 w-4 items-center justify-center rounded-sm border-2 ${
     selected ? 'border-blue-500 bg-blue-500' : 'border-border'
   }`;
 }
diff --git a/frontend-modern/src/utils/alertSeverityPresentation.ts b/frontend-modern/src/utils/alertSeverityPresentation.ts
index 955f6b95c6..058828efb2 100644
--- a/frontend-modern/src/utils/alertSeverityPresentation.ts
+++ b/frontend-modern/src/utils/alertSeverityPresentation.ts
@@ -67,15 +67,15 @@ export function getAlertSeverityDetailTone(
 
 export function getAlertSeverityBadgeClass(level: Alert['level'] | string): string {
   const base =
-    'inline-flex shrink-0 items-center rounded px-1.5 py-0.5 text-[10px] font-semibold uppercase';
+    'inline-flex shrink-0 items-center rounded-sm px-1.5 py-0.5 text-[10px] font-semibold uppercase';
 
   switch (normalizeAlertSeverity(level)) {
     case 'critical':
-      return `${base} bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300`;
+      return `${base} bg-red-100 text-red-700 dark:bg-red-900/25 dark:text-red-300`;
     case 'warning':
-      return `${base} bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300`;
+      return `${base} bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300`;
     default:
-      return `${base} bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300`;
+      return `${base} bg-blue-100 text-blue-700 dark:bg-blue-900/25 dark:text-blue-300`;
   }
 }
 
diff --git a/frontend-modern/src/utils/alertTabsPresentation.ts b/frontend-modern/src/utils/alertTabsPresentation.ts
index 0b4641756e..a8f8c7bf4f 100644
--- a/frontend-modern/src/utils/alertTabsPresentation.ts
+++ b/frontend-modern/src/utils/alertTabsPresentation.ts
@@ -72,7 +72,7 @@ export function getAlertsSidebarTabClass({
   const tone = isDisabled
     ? 'cursor-not-allowed bg-surface-alt text-muted'
     : isActive
-      ? 'bg-blue-50 text-blue-600 dark:bg-blue-900 dark:text-blue-200'
+      ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/25 dark:text-blue-200'
       : 'hover:bg-surface-hover hover:text-base-content';
   return `flex w-full items-center rounded-md text-sm font-medium transition-colors ${layout} ${tone}`;
 }
@@ -84,9 +84,9 @@ export function getAlertsMobileTabClass({
   const tone = isDisabled
     ? 'cursor-not-allowed bg-surface-alt text-muted'
     : isActive
-      ? 'bg-surface text-base-content shadow-sm'
+      ? 'bg-surface text-base-content shadow-xs'
       : 'text-muted hover:text-base-content';
-  return `flex-shrink-0 whitespace-nowrap rounded-md px-3 py-1.5 text-[11px] font-medium transition-all sm:flex-1 sm:min-w-0 sm:px-4 sm:py-2 sm:text-xs ${tone}`;
+  return `shrink-0 whitespace-nowrap rounded-md px-3 py-1.5 text-[11px] font-medium transition-all sm:flex-1 sm:min-w-0 sm:px-4 sm:py-2 sm:text-xs ${tone}`;
 }
 
 export function getAlertsTabTitle({
diff --git a/frontend-modern/src/utils/alerts.ts b/frontend-modern/src/utils/alerts.ts
index 1f19790b55..e3669cc454 100644
--- a/frontend-modern/src/utils/alerts.ts
+++ b/frontend-modern/src/utils/alerts.ts
@@ -68,9 +68,9 @@ export const getAlertStyles = (
 
   if (highestSeverity === 'critical') {
     return {
-      rowClass: 'bg-red-50 dark:bg-red-950 border-l-4 border-red-500 dark:border-red-400',
+      rowClass: 'bg-red-50 dark:bg-red-950/25 border-l-4 border-red-500 dark:border-red-400',
       indicatorClass: 'bg-red-500',
-      badgeClass: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
+      badgeClass: 'bg-red-100 text-red-800 dark:bg-red-900/25 dark:text-red-200',
       hasAlert,
       alertCount,
       severity: 'critical' as const,
@@ -86,9 +86,9 @@ export const getAlertStyles = (
   if (highestSeverity === 'warning') {
     return {
       rowClass:
-        'bg-yellow-50 dark:bg-yellow-950 border-l-4 border-yellow-500 dark:border-yellow-400',
+        'bg-yellow-50 dark:bg-yellow-950/25 border-l-4 border-yellow-500 dark:border-yellow-400',
       indicatorClass: 'bg-yellow-500',
-      badgeClass: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
+      badgeClass: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/25 dark:text-yellow-200',
       hasAlert,
       alertCount,
       severity: 'warning' as const,
@@ -103,9 +103,9 @@ export const getAlertStyles = (
 
   if (highestSeverity === 'info') {
     return {
-      rowClass: 'bg-blue-50 dark:bg-blue-950 border-l-4 border-blue-500 dark:border-blue-400',
+      rowClass: 'bg-blue-50 dark:bg-blue-950/25 border-l-4 border-blue-500 dark:border-blue-400',
       indicatorClass: 'bg-blue-500',
-      badgeClass: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
+      badgeClass: 'bg-blue-100 text-blue-800 dark:bg-blue-900/25 dark:text-blue-200',
       hasAlert,
       alertCount,
       severity: 'info' as const,
diff --git a/frontend-modern/src/utils/auditLogPresentation.ts b/frontend-modern/src/utils/auditLogPresentation.ts
index 440e48740a..1540b37b2c 100644
--- a/frontend-modern/src/utils/auditLogPresentation.ts
+++ b/frontend-modern/src/utils/auditLogPresentation.ts
@@ -34,9 +34,9 @@ export const AUDIT_TOOLBAR_BUTTON_CLASS =
   'flex min-h-11 sm:min-h-10 items-center gap-2 px-3 py-2 text-sm font-medium bg-surface border border-border rounded-md hover:bg-surface-hover disabled:opacity-50';
 export const AUDIT_REFRESH_BUTTON_CLASS = `${AUDIT_TOOLBAR_BUTTON_CLASS} text-base-content`;
 export const AUDIT_VERIFY_ALL_BUTTON_CLASS =
-  'flex min-h-11 sm:min-h-10 items-center gap-2 px-3 py-2 text-sm font-medium text-blue-700 dark:text-blue-200 bg-blue-50 dark:bg-blue-900 border border-blue-200 dark:border-blue-700 rounded-md hover:bg-blue-100 dark:hover:bg-blue-800 disabled:opacity-50';
+  'flex min-h-11 sm:min-h-10 items-center gap-2 px-3 py-2 text-sm font-medium text-blue-700 dark:text-blue-200 bg-blue-50 dark:bg-blue-900/25 border border-blue-200 dark:border-blue-700 rounded-md hover:bg-blue-100 dark:hover:bg-blue-800 disabled:opacity-50';
 export const AUDIT_VERIFY_ROW_BUTTON_CLASS =
-  'inline-flex min-h-11 sm:min-h-10 items-center rounded-md border border-blue-200 dark:border-blue-700 px-3 py-2 text-sm font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900 disabled:opacity-50';
+  'inline-flex min-h-11 sm:min-h-10 items-center rounded-md border border-blue-200 dark:border-blue-700 px-3 py-2 text-sm font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/25 disabled:opacity-50';
 export const AUDIT_EVENT_FILTER_ALL_LABEL = getAllFilterOptionLabel('events');
 export const AUDIT_EVENT_CONFIG_CHANGE_LABEL = 'Config change';
 export const AUDIT_SUCCESS_FILTER_SUCCESS_ONLY_LABEL = 'Success only';
@@ -47,11 +47,11 @@ export const AUDIT_VERIFICATION_FILTER_NEEDS_LABEL = 'Needs verification';
 export function getAuditEventTypeBadgeClass(event?: string | null): string {
   switch ((event ?? '').trim()) {
     case 'login':
-      return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
+      return 'bg-blue-100 text-blue-800 dark:bg-blue-900/25 dark:text-blue-200';
     case 'config_change':
-      return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
+      return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/25 dark:text-yellow-200';
     case 'startup':
-      return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
+      return 'bg-green-100 text-green-800 dark:bg-green-900/25 dark:text-green-200';
     case 'logout':
     case 'oidc_token_refresh':
     default:
@@ -82,12 +82,12 @@ export function getAuditVerificationBadgePresentation(
     case 'verified':
       return {
         label: 'Verified',
-        className: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
+        className: 'bg-green-100 text-green-800 dark:bg-green-900/25 dark:text-green-200',
       };
     case 'failed':
       return {
         label: 'Failed',
-        className: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200',
+        className: 'bg-red-100 text-red-800 dark:bg-red-900/25 dark:text-red-200',
       };
     case 'error':
       return {
diff --git a/frontend-modern/src/utils/auditWebhookPresentation.ts b/frontend-modern/src/utils/auditWebhookPresentation.ts
index 0626424def..0384a133c1 100644
--- a/frontend-modern/src/utils/auditWebhookPresentation.ts
+++ b/frontend-modern/src/utils/auditWebhookPresentation.ts
@@ -1,11 +1,11 @@
 export const AUDIT_WEBHOOK_READONLY_NOTICE_CLASS =
-  'rounded-md border border-blue-200 bg-blue-50 px-3 py-2 text-xs text-blue-800 dark:border-blue-800 dark:bg-blue-900 dark:text-blue-200';
+  'rounded-md border border-blue-200 bg-blue-50 px-3 py-2 text-xs text-blue-800 dark:border-blue-800 dark:bg-blue-900/25 dark:text-blue-200';
 
 export const AUDIT_WEBHOOK_ENDPOINT_CARD_CLASS =
   'flex items-center justify-between gap-3 rounded-md border border-border bg-surface-alt p-3';
 
 export const AUDIT_WEBHOOK_ENDPOINT_ICON_CLASS =
-  'p-2 bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300 rounded-md shrink-0';
+  'p-2 bg-blue-100 dark:bg-blue-900/25 text-blue-600 dark:text-blue-300 rounded-md shrink-0';
 
 export const AUDIT_WEBHOOK_SECURITY_NOTE_TITLE = 'Security Note';
 
diff --git a/frontend-modern/src/utils/discoveryPresentation.ts b/frontend-modern/src/utils/discoveryPresentation.ts
index 4d41588cea..9d66187a8b 100644
--- a/frontend-modern/src/utils/discoveryPresentation.ts
+++ b/frontend-modern/src/utils/discoveryPresentation.ts
@@ -193,11 +193,11 @@ export function getDiscoveryProvenanceTitle(): string {
 }
 
 export function getDiscoveryProvenanceBadgeClass(): string {
-  return 'inline-flex h-5 shrink-0 items-center gap-1 rounded border border-cyan-200 bg-cyan-50 px-1.5 text-[10px] font-medium leading-none text-cyan-700 dark:border-cyan-800 dark:bg-cyan-950 dark:text-cyan-200';
+  return 'inline-flex h-5 shrink-0 items-center gap-1 rounded-sm border border-cyan-200 bg-cyan-50 px-1.5 text-[10px] font-medium leading-none text-cyan-700 dark:border-cyan-800 dark:bg-cyan-950/25 dark:text-cyan-200';
 }
 
 export function getDiscoveryProvenanceIconClass(): string {
-  return 'inline-flex h-4 w-4 shrink-0 items-center justify-center rounded border border-cyan-200 bg-cyan-50 text-cyan-700 dark:border-cyan-800 dark:bg-cyan-950 dark:text-cyan-200';
+  return 'inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-cyan-200 bg-cyan-50 text-cyan-700 dark:border-cyan-800 dark:bg-cyan-950/25 dark:text-cyan-200';
 }
 
 export function normalizeDiscoverySuggestedUrl(value?: string | null): string | undefined {
@@ -250,16 +250,16 @@ export function getDiscoverySuggestedURLReason(
 
 export function getDiscoveryAnalysisProviderBadgeClass(isLocal?: boolean | null): string {
   return isLocal
-    ? 'inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300'
-    : 'inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300';
+    ? 'inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-green-100 text-green-700 dark:bg-green-900/25 dark:text-green-300'
+    : 'inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-700 dark:bg-blue-900/25 dark:text-blue-300';
 }
 
 export function getDiscoveryCategoryBadgeClass(): string {
-  return 'inline-block rounded bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900 dark:text-blue-200';
+  return 'inline-block rounded-sm bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900/25 dark:text-blue-200';
 }
 
 export function getDiscoverySuggestedURLCardClass(): string {
-  return 'rounded border border-blue-200 bg-blue-50 p-3 shadow-sm dark:border-blue-800 dark:bg-blue-900';
+  return 'rounded-sm border border-blue-200 bg-blue-50 p-3 shadow-xs dark:border-blue-800 dark:bg-blue-900/25';
 }
 
 export function getDiscoverySuggestedURLHeadingClass(): string {
@@ -271,11 +271,11 @@ export function getDiscoverySuggestedURLTextClass(): string {
 }
 
 export function getDiscoverySuggestedURLCodeClass(): string {
-  return 'min-w-0 flex-1 rounded bg-blue-100 px-2 py-1.5 text-xs text-blue-800 dark:bg-blue-950 dark:text-blue-100 font-mono break-all';
+  return 'min-w-0 flex-1 rounded-sm bg-blue-100 px-2 py-1.5 text-xs text-blue-800 dark:bg-blue-950/25 dark:text-blue-100 font-mono break-all';
 }
 
 export function getDiscoverySuggestedURLActionClass(): string {
-  return 'inline-flex min-h-8 min-w-8 shrink-0 items-center justify-center rounded border border-blue-200 bg-blue-100 text-blue-700 transition-colors hover:bg-blue-200 dark:border-blue-700 dark:bg-blue-950 dark:text-blue-200 dark:hover:bg-blue-900';
+  return 'inline-flex min-h-8 min-w-8 shrink-0 items-center justify-center rounded-sm border border-blue-200 bg-blue-100 text-blue-700 transition-colors hover:bg-blue-200 dark:border-blue-700 dark:bg-blue-950/25 dark:text-blue-200 dark:hover:bg-blue-900/25';
 }
 
 export function getDiscoveryInitialEmptyState(loading: boolean) {
diff --git a/frontend-modern/src/utils/emptyStatePresentation.ts b/frontend-modern/src/utils/emptyStatePresentation.ts
index eaf68cb7c7..237c079c50 100644
--- a/frontend-modern/src/utils/emptyStatePresentation.ts
+++ b/frontend-modern/src/utils/emptyStatePresentation.ts
@@ -13,22 +13,22 @@ const EMPTY_STATE_PRESENTATION: Record<EmptyStateTone, EmptyStatePresentation> =
     descriptionClass: 'text-muted',
   },
   info: {
-    iconClass: 'bg-blue-50 dark:bg-blue-900 text-blue-500',
+    iconClass: 'bg-blue-50 dark:bg-blue-900/25 text-blue-500',
     titleClass: 'text-blue-700 dark:text-blue-300',
     descriptionClass: 'text-blue-600 dark:text-blue-300',
   },
   success: {
-    iconClass: 'bg-green-50 dark:bg-green-900 text-green-500',
+    iconClass: 'bg-green-50 dark:bg-green-900/25 text-green-500',
     titleClass: 'text-green-700 dark:text-green-300',
     descriptionClass: 'text-green-600 dark:text-green-300',
   },
   warning: {
-    iconClass: 'bg-amber-50 dark:bg-amber-900 text-amber-500',
+    iconClass: 'bg-amber-50 dark:bg-amber-900/25 text-amber-500',
     titleClass: 'text-amber-700 dark:text-amber-300',
     descriptionClass: 'text-amber-600 dark:text-amber-300',
   },
   danger: {
-    iconClass: 'bg-red-50 dark:bg-red-900 text-red-500',
+    iconClass: 'bg-red-50 dark:bg-red-900/25 text-red-500',
     titleClass: 'text-red-700 dark:text-red-300',
     descriptionClass: 'text-red-600 dark:text-red-300',
   },
diff --git a/frontend-modern/src/utils/environmentLockPresentation.ts b/frontend-modern/src/utils/environmentLockPresentation.ts
index 1a25cb97f4..9551ab51b8 100644
--- a/frontend-modern/src/utils/environmentLockPresentation.ts
+++ b/frontend-modern/src/utils/environmentLockPresentation.ts
@@ -1,5 +1,5 @@
 export const ENVIRONMENT_LOCK_BADGE_CLASS =
-  'shrink-0 inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] font-medium bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300';
+  'shrink-0 inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-[10px] font-medium bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300';
 
 export const ENVIRONMENT_LOCK_BADGE_LABEL = 'ENV';
 
diff --git a/frontend-modern/src/utils/licensePresentation.ts b/frontend-modern/src/utils/licensePresentation.ts
index 12ab51e914..c6ae520e48 100644
--- a/frontend-modern/src/utils/licensePresentation.ts
+++ b/frontend-modern/src/utils/licensePresentation.ts
@@ -476,7 +476,7 @@ export const getGrandfatheredPriceContinuityNotice = (
   }
 
   return {
-    tone: 'border-green-200 dark:border-green-900 bg-green-50 dark:bg-green-900 text-green-900 dark:text-green-100',
+    tone: 'border-green-200 dark:border-green-900/25 bg-green-50 dark:bg-green-900/25 text-green-900/25 dark:text-green-100',
     title: 'Grandfathered v5 pricing',
     body: 'This migrated v5 Pro subscription keeps its existing recurring price until you cancel. Self-hosted monitoring and child-resource volume are not metered in current v6 self-hosted packaging. If you cancel and return later, current v6 pricing applies for paid features.',
   };
@@ -988,8 +988,8 @@ export const getSelfHostedActivationSuccessPresentation = ({
 
   return {
     tone: runtimeMismatch
-      ? 'border-amber-200 dark:border-amber-900 bg-amber-50 dark:bg-amber-900 text-amber-900 dark:text-amber-100'
-      : 'border-green-200 dark:border-green-900 bg-green-50 dark:bg-green-900 text-green-900 dark:text-green-100',
+      ? 'border-amber-200 dark:border-amber-900/25 bg-amber-50 dark:bg-amber-900/25 text-amber-900/25 dark:text-amber-100'
+      : 'border-green-200 dark:border-green-900/25 bg-green-50 dark:bg-green-900/25 text-green-900/25 dark:text-green-100',
     title: runtimeMismatch ? `${planLabel} license is active` : `${planLabel} is now active`,
     body:
       source === 'purchase'
@@ -1075,7 +1075,7 @@ export const getCommercialMigrationNotice = (
     }
 
     return {
-      tone: 'border-amber-200 dark:border-amber-900 bg-amber-50 dark:bg-amber-900 text-amber-900 dark:text-amber-100',
+      tone: 'border-amber-200 dark:border-amber-900/25 bg-amber-50 dark:bg-amber-900/25 text-amber-900/25 dark:text-amber-100',
       title: 'v5 license migration pending',
       body: `${body} ${actionText}`,
     };
@@ -1116,7 +1116,7 @@ export const getCommercialMigrationNotice = (
   }
 
   return {
-    tone: 'border-red-200 dark:border-red-900 bg-red-50 dark:bg-red-900 text-red-900 dark:text-red-100',
+    tone: 'border-red-200 dark:border-red-900/25 bg-red-50 dark:bg-red-900/25 text-red-900/25 dark:text-red-100',
     title: 'v5 license migration needs attention',
     body: `${body} ${actionText}`,
   };
@@ -1126,31 +1126,31 @@ export const getPurchaseActivationNotice = (result?: string | null): LicenseInli
   switch ((result || '').trim().toLowerCase()) {
     case 'activated':
       return {
-        tone: 'border-green-200 dark:border-green-900 bg-green-50 dark:bg-green-900 text-green-900 dark:text-green-100',
+        tone: 'border-green-200 dark:border-green-900/25 bg-green-50 dark:bg-green-900/25 text-green-900/25 dark:text-green-100',
         title: 'Plan activated',
         body: 'Pulse finished checkout and activated this instance automatically. The plan state below is live.',
       };
     case 'cancelled':
       return {
-        tone: 'border-amber-200 dark:border-amber-900 bg-amber-50 dark:bg-amber-900 text-amber-900 dark:text-amber-100',
+        tone: 'border-amber-200 dark:border-amber-900/25 bg-amber-50 dark:bg-amber-900/25 text-amber-900/25 dark:text-amber-100',
         title: 'Checkout cancelled',
         body: 'Checkout was cancelled before completion. The current plan state below is unchanged until you start the upgrade again.',
       };
     case 'expired':
       return {
-        tone: 'border-amber-200 dark:border-amber-900 bg-amber-50 dark:bg-amber-900 text-amber-900 dark:text-amber-100',
+        tone: 'border-amber-200 dark:border-amber-900/25 bg-amber-50 dark:bg-amber-900/25 text-amber-900/25 dark:text-amber-100',
         title: 'Upgrade return expired',
         body: 'That secure checkout return link expired or was already used. Start the upgrade again from this instance if you still need it.',
       };
     case 'failed':
       return {
-        tone: 'border-red-200 dark:border-red-900 bg-red-50 dark:bg-red-900 text-red-900 dark:text-red-100',
+        tone: 'border-red-200 dark:border-red-900/25 bg-red-50 dark:bg-red-900/25 text-red-900/25 dark:text-red-100',
         title: 'Plan needs attention',
         body: 'Checkout completed, but this instance could not apply the plan automatically. Review the current plan below, then open recovery if you already have a key from this purchase.',
       };
     case 'unavailable':
       return {
-        tone: 'border-amber-200 dark:border-amber-900 bg-amber-50 dark:bg-amber-900 text-amber-900 dark:text-amber-100',
+        tone: 'border-amber-200 dark:border-amber-900/25 bg-amber-50 dark:bg-amber-900/25 text-amber-900/25 dark:text-amber-100',
         title: 'Pulse Account unavailable',
         body: 'Pulse could not open the Pulse Account upgrade flow right now. The current plan state below is unchanged. Retry from this instance in a moment, or use recovery below if you already have a key.',
       };
@@ -1166,28 +1166,28 @@ export const getLicenseSubscriptionStatusPresentation = (
     case 'trial':
       return {
         label: 'Trial',
-        badgeClass: 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300',
+        badgeClass: 'bg-green-100 text-green-700 dark:bg-green-900/25 dark:text-green-300',
       };
     case 'active':
       return {
         label: 'Active',
-        badgeClass: 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300',
+        badgeClass: 'bg-green-100 text-green-700 dark:bg-green-900/25 dark:text-green-300',
       };
     case 'grace':
       return {
         label: 'Grace Period',
-        badgeClass: 'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300',
+        badgeClass: 'bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300',
       };
     case 'suspended':
       return {
         label: 'Suspended',
-        badgeClass: 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300',
+        badgeClass: 'bg-red-100 text-red-700 dark:bg-red-900/25 dark:text-red-300',
       };
     case 'canceled':
     case 'expired':
       return {
         label: 'Expired',
-        badgeClass: 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300',
+        badgeClass: 'bg-red-100 text-red-700 dark:bg-red-900/25 dark:text-red-300',
       };
     default:
       return {
@@ -1276,13 +1276,13 @@ export const getBillingAdminOrganizationBadges = (
   if (organization.soft_deleted) {
     badges.push({
       label: 'soft-deleted',
-      badgeClass: 'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-200',
+      badgeClass: 'bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-200',
     });
   }
   if (organization.suspended && !organization.soft_deleted) {
     badges.push({
       label: 'suspended',
-      badgeClass: 'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-200',
+      badgeClass: 'bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-200',
     });
   }
   return badges;
diff --git a/frontend-modern/src/utils/nodeModalPresentation.ts b/frontend-modern/src/utils/nodeModalPresentation.ts
index 8e8ded9d82..cdb2ba6384 100644
--- a/frontend-modern/src/utils/nodeModalPresentation.ts
+++ b/frontend-modern/src/utils/nodeModalPresentation.ts
@@ -214,21 +214,21 @@ export function getNodeModalTestResultPresentation(
     case 'success':
       return {
         panelClass:
-          'mx-6 p-3 rounded-md text-sm bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-800 text-green-800 dark:text-green-200',
+          'mx-6 p-3 rounded-md text-sm bg-green-50 dark:bg-green-900/25 border border-green-200 dark:border-green-800 text-green-800 dark:text-green-200',
         textClass: 'text-green-800 dark:text-green-200',
         icon: 'success',
       };
     case 'warning':
       return {
         panelClass:
-          'mx-6 p-3 rounded-md text-sm bg-amber-50 dark:bg-amber-900 border border-amber-200 dark:border-amber-800 text-amber-800 dark:text-amber-200',
+          'mx-6 p-3 rounded-md text-sm bg-amber-50 dark:bg-amber-900/25 border border-amber-200 dark:border-amber-800 text-amber-800 dark:text-amber-200',
         textClass: 'text-amber-800 dark:text-amber-200',
         icon: 'warning',
       };
     default:
       return {
         panelClass:
-          'mx-6 p-3 rounded-md text-sm bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200',
+          'mx-6 p-3 rounded-md text-sm bg-red-50 dark:bg-red-900/25 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200',
         textClass: 'text-red-800 dark:text-red-200',
         icon: 'error',
       };
diff --git a/frontend-modern/src/utils/orgUtils.ts b/frontend-modern/src/utils/orgUtils.ts
index 975e8a10ec..c4c5ebf9cc 100644
--- a/frontend-modern/src/utils/orgUtils.ts
+++ b/frontend-modern/src/utils/orgUtils.ts
@@ -3,9 +3,9 @@ import type { Organization, OrganizationRole } from '@/api/orgs';
 const defaultBadgeClass = 'bg-slate-100 text-slate-700';
 
 const roleBadgeClasses: Record<OrganizationRole, string> = {
-  owner: 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200',
-  admin: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
-  editor: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-200',
+  owner: 'bg-amber-100 text-amber-800 dark:bg-amber-900/25 dark:text-amber-200',
+  admin: 'bg-blue-100 text-blue-800 dark:bg-blue-900/25 dark:text-blue-200',
+  editor: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/25 dark:text-emerald-200',
   viewer: defaultBadgeClass,
 };
 
diff --git a/frontend-modern/src/utils/patrolRunPresentation.ts b/frontend-modern/src/utils/patrolRunPresentation.ts
index 23bc1c1c75..086b93f014 100644
--- a/frontend-modern/src/utils/patrolRunPresentation.ts
+++ b/frontend-modern/src/utils/patrolRunPresentation.ts
@@ -328,13 +328,13 @@ export function getPatrolRunStatusPresentation(
     case 'critical':
     case 'error':
       return {
-        badgeClass: 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300',
+        badgeClass: 'bg-red-100 text-red-700 dark:bg-red-900/25 dark:text-red-300',
         variant: 'danger',
         label: formatIdentifierLabel(normalized),
       };
     case 'issues_found':
       return {
-        badgeClass: 'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300',
+        badgeClass: 'bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300',
         variant: 'warning',
         label: 'issues found',
       };
@@ -347,7 +347,7 @@ export function getPatrolRunStatusPresentation(
         };
       }
       return {
-        badgeClass: 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300',
+        badgeClass: 'bg-green-100 text-green-700 dark:bg-green-900/25 dark:text-green-300',
         variant: 'success',
         label: 'healthy',
       };
diff --git a/frontend-modern/src/utils/patrolSummaryPresentation.ts b/frontend-modern/src/utils/patrolSummaryPresentation.ts
index 8a77b7ca9d..58473b9bbb 100644
--- a/frontend-modern/src/utils/patrolSummaryPresentation.ts
+++ b/frontend-modern/src/utils/patrolSummaryPresentation.ts
@@ -103,17 +103,17 @@ const QUIET_VALUE = 'text-muted';
 const ACTIVE_PRESENTATION: Record<PatrolSummaryTone, PatrolSummaryPresentation> = {
   critical: {
     iconClass: 'text-red-500 dark:text-red-400',
-    iconContainerClass: 'bg-red-50 dark:bg-red-900 border-red-200 dark:border-red-800',
+    iconContainerClass: 'bg-red-50 dark:bg-red-900/25 border-red-200 dark:border-red-800',
     valueClass: 'text-red-600 dark:text-red-400',
   },
   success: {
     iconClass: 'text-green-500 dark:text-green-400',
-    iconContainerClass: 'bg-green-50 dark:bg-green-900 border-green-200 dark:border-green-800',
+    iconContainerClass: 'bg-green-50 dark:bg-green-900/25 border-green-200 dark:border-green-800',
     valueClass: 'text-green-600 dark:text-green-400',
   },
   warning: {
     iconClass: 'text-amber-500 dark:text-amber-400',
-    iconContainerClass: 'bg-amber-50 dark:bg-amber-900 border-amber-200 dark:border-amber-800',
+    iconContainerClass: 'bg-amber-50 dark:bg-amber-900/25 border-amber-200 dark:border-amber-800',
     valueClass: 'text-amber-600 dark:text-amber-400',
   },
 };
diff --git a/frontend-modern/src/utils/platformSupportManifest.generated.ts b/frontend-modern/src/utils/platformSupportManifest.generated.ts
index 903ceb0856..310ff33760 100644
--- a/frontend-modern/src/utils/platformSupportManifest.generated.ts
+++ b/frontend-modern/src/utils/platformSupportManifest.generated.ts
@@ -61,7 +61,7 @@ export const PLATFORM_SUPPORT_MANIFEST = {
         assistantControl: 'supported',
       },
       uiLabel: 'Agent',
-      uiTone: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-400',
+      uiTone: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/25 dark:text-emerald-400',
       aliases: [],
       displayTokens: ['Agent'],
       storageFamily: 'onprem',
@@ -97,7 +97,7 @@ export const PLATFORM_SUPPORT_MANIFEST = {
         assistantControl: 'supported',
       },
       uiLabel: 'Docker / Podman',
-      uiTone: 'bg-sky-100 text-sky-700 dark:bg-sky-900 dark:text-sky-400',
+      uiTone: 'bg-sky-100 text-sky-700 dark:bg-sky-900/25 dark:text-sky-400',
       aliases: [],
       displayTokens: ['Container runtime', 'Docker', 'Podman'],
       storageFamily: 'container',
@@ -148,7 +148,7 @@ export const PLATFORM_SUPPORT_MANIFEST = {
         assistantControl: 'supported',
       },
       uiLabel: 'K8s',
-      uiTone: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900 dark:text-cyan-400',
+      uiTone: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/25 dark:text-cyan-400',
       aliases: ['k8s'],
       displayTokens: ['K8s', 'Kubernetes'],
       storageFamily: 'container',
@@ -198,7 +198,7 @@ export const PLATFORM_SUPPORT_MANIFEST = {
         assistantControl: 'read-only',
       },
       uiLabel: 'PBS',
-      uiTone: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-400',
+      uiTone: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/25 dark:text-indigo-400',
       aliases: ['pbs'],
       displayTokens: ['PBS', 'Proxmox Backup Server'],
       storageFamily: 'virtualization',
@@ -223,7 +223,7 @@ export const PLATFORM_SUPPORT_MANIFEST = {
         assistantControl: 'read-only',
       },
       uiLabel: 'PMG',
-      uiTone: 'bg-rose-100 text-rose-700 dark:bg-rose-900 dark:text-rose-400',
+      uiTone: 'bg-rose-100 text-rose-700 dark:bg-rose-900/25 dark:text-rose-400',
       aliases: ['pmg'],
       displayTokens: ['PMG', 'Proxmox Mail Gateway'],
       storageFamily: 'virtualization',
@@ -255,7 +255,7 @@ export const PLATFORM_SUPPORT_MANIFEST = {
         assistantControl: 'supported',
       },
       uiLabel: 'TrueNAS',
-      uiTone: 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-400',
+      uiTone: 'bg-blue-100 text-blue-700 dark:bg-blue-900/25 dark:text-blue-400',
       aliases: [],
       displayTokens: ['TrueNAS'],
       storageFamily: 'onprem',
@@ -280,7 +280,7 @@ export const PLATFORM_SUPPORT_MANIFEST = {
         assistantControl: 'read-only',
       },
       uiLabel: 'vSphere',
-      uiTone: 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300',
+      uiTone: 'bg-blue-100 text-blue-700 dark:bg-blue-900/25 dark:text-blue-300',
       aliases: ['vmware'],
       displayTokens: ['vSphere', 'VMware vSphere'],
       storageFamily: 'virtualization',
@@ -305,7 +305,7 @@ export const PLATFORM_SUPPORT_MANIFEST = {
         assistantControl: 'n/a',
       },
       uiLabel: 'Unraid',
-      uiTone: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
+      uiTone: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/25 dark:text-yellow-200',
       aliases: [],
       displayTokens: ['Unraid'],
       storageFamily: 'onprem',
@@ -330,7 +330,7 @@ export const PLATFORM_SUPPORT_MANIFEST = {
         assistantControl: 'n/a',
       },
       uiLabel: 'Synology',
-      uiTone: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300',
+      uiTone: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/25 dark:text-emerald-300',
       aliases: [],
       displayTokens: ['Synology', 'DSM'],
       storageFamily: 'onprem',
@@ -355,7 +355,7 @@ export const PLATFORM_SUPPORT_MANIFEST = {
         assistantControl: 'n/a',
       },
       uiLabel: 'Hyper-V',
-      uiTone: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900 dark:text-cyan-300',
+      uiTone: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/25 dark:text-cyan-300',
       aliases: ['hyper-v'],
       displayTokens: ['Hyper-V'],
       storageFamily: 'virtualization',
@@ -380,7 +380,7 @@ export const PLATFORM_SUPPORT_MANIFEST = {
         assistantControl: 'n/a',
       },
       uiLabel: 'AWS',
-      uiTone: 'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300',
+      uiTone: 'bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300',
       aliases: [],
       displayTokens: ['AWS'],
       storageFamily: 'cloud',
@@ -405,7 +405,7 @@ export const PLATFORM_SUPPORT_MANIFEST = {
         assistantControl: 'n/a',
       },
       uiLabel: 'Azure',
-      uiTone: 'bg-sky-100 text-sky-700 dark:bg-sky-900 dark:text-sky-300',
+      uiTone: 'bg-sky-100 text-sky-700 dark:bg-sky-900/25 dark:text-sky-300',
       aliases: [],
       displayTokens: ['Azure'],
       storageFamily: 'cloud',
@@ -430,7 +430,7 @@ export const PLATFORM_SUPPORT_MANIFEST = {
         assistantControl: 'n/a',
       },
       uiLabel: 'GCP',
-      uiTone: 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300',
+      uiTone: 'bg-red-100 text-red-700 dark:bg-red-900/25 dark:text-red-300',
       aliases: [],
       displayTokens: ['GCP'],
       storageFamily: 'cloud',
@@ -874,15 +874,15 @@ export const SOURCE_PLATFORM_ONBOARDING_PATHS = {
 export const SOURCE_PLATFORM_PRESENTATION = {
   agent: {
     label: 'Agent',
-    tone: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-400',
+    tone: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/25 dark:text-emerald-400',
   },
   docker: {
     label: 'Docker / Podman',
-    tone: 'bg-sky-100 text-sky-700 dark:bg-sky-900 dark:text-sky-400',
+    tone: 'bg-sky-100 text-sky-700 dark:bg-sky-900/25 dark:text-sky-400',
   },
   kubernetes: {
     label: 'K8s',
-    tone: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900 dark:text-cyan-400',
+    tone: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/25 dark:text-cyan-400',
   },
   'proxmox-pve': {
     label: 'PVE',
@@ -890,43 +890,43 @@ export const SOURCE_PLATFORM_PRESENTATION = {
   },
   'proxmox-pbs': {
     label: 'PBS',
-    tone: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-400',
+    tone: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/25 dark:text-indigo-400',
   },
   'proxmox-pmg': {
     label: 'PMG',
-    tone: 'bg-rose-100 text-rose-700 dark:bg-rose-900 dark:text-rose-400',
+    tone: 'bg-rose-100 text-rose-700 dark:bg-rose-900/25 dark:text-rose-400',
   },
   truenas: {
     label: 'TrueNAS',
-    tone: 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-400',
+    tone: 'bg-blue-100 text-blue-700 dark:bg-blue-900/25 dark:text-blue-400',
   },
   'vmware-vsphere': {
     label: 'vSphere',
-    tone: 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300',
+    tone: 'bg-blue-100 text-blue-700 dark:bg-blue-900/25 dark:text-blue-300',
   },
   unraid: {
     label: 'Unraid',
-    tone: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
+    tone: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/25 dark:text-yellow-200',
   },
   'synology-dsm': {
     label: 'Synology',
-    tone: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300',
+    tone: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/25 dark:text-emerald-300',
   },
   'microsoft-hyperv': {
     label: 'Hyper-V',
-    tone: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900 dark:text-cyan-300',
+    tone: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/25 dark:text-cyan-300',
   },
   aws: {
     label: 'AWS',
-    tone: 'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300',
+    tone: 'bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300',
   },
   azure: {
     label: 'Azure',
-    tone: 'bg-sky-100 text-sky-700 dark:bg-sky-900 dark:text-sky-300',
+    tone: 'bg-sky-100 text-sky-700 dark:bg-sky-900/25 dark:text-sky-300',
   },
   gcp: {
     label: 'GCP',
-    tone: 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300',
+    tone: 'bg-red-100 text-red-700 dark:bg-red-900/25 dark:text-red-300',
   },
   generic: {
     label: 'Generic',
diff --git a/frontend-modern/src/utils/raidPresentation.ts b/frontend-modern/src/utils/raidPresentation.ts
index fd70bc5ea2..7c085f97bc 100644
--- a/frontend-modern/src/utils/raidPresentation.ts
+++ b/frontend-modern/src/utils/raidPresentation.ts
@@ -27,7 +27,7 @@ export function getRaidStateTextClass(state?: string | null): string {
 export function getRaidDeviceBadgeClass(device: HostRAIDDevice): string {
   const normalized = normalize(device.state);
   if (normalized === 'active' || normalized === 'in_sync' || normalized === 'online') {
-    return 'bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-900 dark:text-emerald-200 dark:border-emerald-800';
+    return 'bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-900/25 dark:text-emerald-200 dark:border-emerald-800';
   }
   if (
     normalized.includes('fail') ||
@@ -35,7 +35,7 @@ export function getRaidDeviceBadgeClass(device: HostRAIDDevice): string {
     normalized.includes('offline') ||
     normalized.includes('removed')
   ) {
-    return 'bg-red-50 text-red-700 border-red-200 dark:bg-red-900 dark:text-red-200 dark:border-red-800';
+    return 'bg-red-50 text-red-700 border-red-200 dark:bg-red-900/25 dark:text-red-200 dark:border-red-800';
   }
-  return 'bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-900 dark:text-amber-200 dark:border-amber-800';
+  return 'bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-900/25 dark:text-amber-200 dark:border-amber-800';
 }
diff --git a/frontend-modern/src/utils/recoveryArtifactModePresentation.ts b/frontend-modern/src/utils/recoveryArtifactModePresentation.ts
index c24a36b049..2847c7240a 100644
--- a/frontend-modern/src/utils/recoveryArtifactModePresentation.ts
+++ b/frontend-modern/src/utils/recoveryArtifactModePresentation.ts
@@ -15,14 +15,14 @@ export function getRecoveryArtifactModePresentation(
       return {
         label: 'Snapshot',
         aggregateLabel: 'Snapshots',
-        badgeClassName: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300',
+        badgeClassName: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/25 dark:text-yellow-300',
         segmentClassName: 'bg-yellow-500',
       };
     case 'remote':
       return {
         label: 'Remote Copy',
         aggregateLabel: 'Remote Copies',
-        badgeClassName: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-300',
+        badgeClassName: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/25 dark:text-indigo-300',
         segmentClassName: 'bg-indigo-500',
       };
     default:
diff --git a/frontend-modern/src/utils/recoveryItemTypePresentation.ts b/frontend-modern/src/utils/recoveryItemTypePresentation.ts
index cefcb59be6..eeec69f8ee 100644
--- a/frontend-modern/src/utils/recoveryItemTypePresentation.ts
+++ b/frontend-modern/src/utils/recoveryItemTypePresentation.ts
@@ -11,9 +11,9 @@ export interface RecoveryItemTypePresentation {
 }
 
 const BADGE_BASE_CLASSES =
-  'inline-flex items-center rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap';
+  'inline-flex items-center rounded-sm px-2 py-0.5 text-[10px] font-medium whitespace-nowrap';
 const TABLE_BADGE_BASE_CLASSES =
-  'inline-flex items-center px-1 py-0.5 text-[10px] font-medium rounded whitespace-nowrap';
+  'inline-flex items-center px-1 py-0.5 text-[10px] font-medium rounded-sm whitespace-nowrap';
 const DEFAULT_BADGE_TONE_CLASSES = 'bg-surface-alt text-base-content';
 const DEFAULT_BADGE_CLASSES = `${BADGE_BASE_CLASSES} ${DEFAULT_BADGE_TONE_CLASSES}`;
 const DEFAULT_TABLE_BADGE_CLASSES = `${TABLE_BADGE_BASE_CLASSES} ${DEFAULT_BADGE_TONE_CLASSES}`;
diff --git a/frontend-modern/src/utils/recoveryOutcomePresentation.ts b/frontend-modern/src/utils/recoveryOutcomePresentation.ts
index 64c47fd9a7..ff62c5b2db 100644
--- a/frontend-modern/src/utils/recoveryOutcomePresentation.ts
+++ b/frontend-modern/src/utils/recoveryOutcomePresentation.ts
@@ -41,13 +41,13 @@ export function getRecoveryOutcomeBadgeClass(outcome: RecoveryOutcome): string {
 
   switch (outcome) {
     case 'success':
-      return `${base} bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300`;
+      return `${base} bg-emerald-100 text-emerald-700 dark:bg-emerald-900/25 dark:text-emerald-300`;
     case 'warning':
-      return `${base} bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300`;
+      return `${base} bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300`;
     case 'failed':
-      return `${base} bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300`;
+      return `${base} bg-red-100 text-red-700 dark:bg-red-900/25 dark:text-red-300`;
     case 'running':
-      return `${base} bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300`;
+      return `${base} bg-blue-100 text-blue-700 dark:bg-blue-900/25 dark:text-blue-300`;
     default:
       return `${base} bg-surface-alt text-muted`;
   }
diff --git a/frontend-modern/src/utils/recoveryTimelineChartPresentation.ts b/frontend-modern/src/utils/recoveryTimelineChartPresentation.ts
index b10d7eca2f..af7b792947 100644
--- a/frontend-modern/src/utils/recoveryTimelineChartPresentation.ts
+++ b/frontend-modern/src/utils/recoveryTimelineChartPresentation.ts
@@ -1,6 +1,6 @@
 export const RECOVERY_TIMELINE_LEGEND_ITEM_CLASS = 'flex items-center gap-1';
 export const RECOVERY_TIMELINE_RANGE_GROUP_CLASS =
-  'inline-flex rounded border border-border bg-surface p-0.5 text-xs';
+  'inline-flex rounded-sm border border-border bg-surface p-0.5 text-xs';
 
 export type RecoveryTimelineRangeDays = 7 | 30 | 90 | 365;
 
diff --git a/frontend-modern/src/utils/recoveryTimelinePresentation.ts b/frontend-modern/src/utils/recoveryTimelinePresentation.ts
index 6e88208b2c..931a2937cd 100644
--- a/frontend-modern/src/utils/recoveryTimelinePresentation.ts
+++ b/frontend-modern/src/utils/recoveryTimelinePresentation.ts
@@ -72,7 +72,7 @@ export function getRecoveryTimelineColumnButtonClass(
   _timelineHasSelection = false,
 ): string {
   const base =
-    'group rounded-sm transition-all duration-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-blue-500';
+    'group rounded-xs transition-all duration-150 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-blue-500';
   return base;
 }
 
@@ -81,7 +81,7 @@ export function getRecoveryTimelineBarMarkerClass(
   timelineHasSelection = false,
 ): string {
   const base =
-    'absolute inset-x-0 bottom-0 overflow-hidden rounded-sm transition-all duration-150 group-hover:ring-1 group-hover:ring-inset group-hover:ring-border group-focus-visible:ring-1 group-focus-visible:ring-inset group-focus-visible:ring-blue-500/60';
+    'absolute inset-x-0 bottom-0 overflow-hidden rounded-xs transition-all duration-150 group-hover:ring-1 group-hover:ring-inset group-hover:ring-border group-focus-visible:ring-1 group-focus-visible:ring-inset group-focus-visible:ring-blue-500/60';
   if (selected) {
     return `${base} opacity-100 ring-2 ring-inset ring-blue-500/80`;
   }
@@ -97,7 +97,7 @@ export function getRecoveryTimelineEmptyMarkerClass(
   timelineHasSelection = false,
 ): string {
   const base =
-    'absolute inset-x-0 bottom-0 rounded-sm transition-all duration-150 group-hover:h-1 group-hover:bg-border group-focus-visible:h-1 group-focus-visible:bg-blue-500/60';
+    'absolute inset-x-0 bottom-0 rounded-xs transition-all duration-150 group-hover:h-1 group-hover:bg-border group-focus-visible:h-1 group-focus-visible:bg-blue-500/60';
   if (selected) {
     return `${base} h-1 bg-blue-500 ring-2 ring-inset ring-blue-500/80`;
   }
diff --git a/frontend-modern/src/utils/relayPresentation.ts b/frontend-modern/src/utils/relayPresentation.ts
index 4131602f2b..7844a0880f 100644
--- a/frontend-modern/src/utils/relayPresentation.ts
+++ b/frontend-modern/src/utils/relayPresentation.ts
@@ -23,9 +23,9 @@ export const RELAY_INLINE_ACTION_CLASS =
 export const RELAY_INFO_TITLE_CLASS = 'text-sm font-medium text-base-content';
 export const RELAY_INFO_MESSAGE_CLASS = 'text-xs text-muted mt-1';
 export const RELAY_LAST_ERROR_CLASS =
-  'mt-2 text-xs text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900 rounded px-2 py-1';
+  'mt-2 text-xs text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/25 rounded-sm px-2 py-1';
 export const RELAY_CODE_BLOCK_CLASS =
-  'block text-xs font-mono text-base-content bg-surface-alt rounded px-3 py-2 select-all break-all';
+  'block text-xs font-mono text-base-content bg-surface-alt rounded-sm px-3 py-2 select-all break-all';
 export const RELAY_QR_IMAGE_CLASS = 'rounded-md border border-border p-2';
 export const RELAY_DIAGNOSTICS_WRAP_CLASS = 'space-y-2';
 export const RELAY_DIAGNOSTICS_TITLE_CLASS = 'text-xs font-semibold text-base-content';
@@ -47,8 +47,8 @@ export const RELAY_PAIRING_APP_DOWNLOAD_LINK_LABEL = 'your download page';
 
 export function getRelayDiagnosticClass(severity: 'warning' | 'error'): string {
   return severity === 'error'
-    ? 'rounded px-2 py-1 text-xs bg-red-50 dark:bg-red-900 text-red-700 dark:text-red-300'
-    : 'rounded px-2 py-1 text-xs bg-amber-50 dark:bg-amber-900 text-amber-700 dark:text-amber-300';
+    ? 'rounded-sm px-2 py-1 text-xs bg-red-50 dark:bg-red-900/25 text-red-700 dark:text-red-300'
+    : 'rounded-sm px-2 py-1 text-xs bg-amber-50 dark:bg-amber-900/25 text-amber-700 dark:text-amber-300';
 }
 
 export function getRelayConnectionPresentation(
diff --git a/frontend-modern/src/utils/remediationPresentation.ts b/frontend-modern/src/utils/remediationPresentation.ts
index 069d73b451..deef05ffca 100644
--- a/frontend-modern/src/utils/remediationPresentation.ts
+++ b/frontend-modern/src/utils/remediationPresentation.ts
@@ -11,7 +11,7 @@ const SUCCESS_PRESENTATION: RemediationPresentation = {
   iconClass: 'text-green-600 dark:text-green-400',
   message: 'Fix executed successfully',
   messageClass: 'font-medium text-green-700 dark:text-green-300',
-  panelClass: 'bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-800',
+  panelClass: 'bg-green-50 dark:bg-green-900/25 border border-green-200 dark:border-green-800',
 };
 
 const FAILURE_PRESENTATION: RemediationPresentation = {
@@ -19,7 +19,7 @@ const FAILURE_PRESENTATION: RemediationPresentation = {
   iconClass: 'text-red-600 dark:text-red-400',
   message: 'Fix failed',
   messageClass: 'font-medium text-red-700 dark:text-red-300',
-  panelClass: 'bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-800',
+  panelClass: 'bg-red-50 dark:bg-red-900/25 border border-red-200 dark:border-red-800',
 };
 
 export function getRemediationPresentation(success: boolean): RemediationPresentation {
diff --git a/frontend-modern/src/utils/resourceBadgePresentation.ts b/frontend-modern/src/utils/resourceBadgePresentation.ts
index 8aa8199f36..0709aeeaba 100644
--- a/frontend-modern/src/utils/resourceBadgePresentation.ts
+++ b/frontend-modern/src/utils/resourceBadgePresentation.ts
@@ -28,11 +28,11 @@ export interface ResourceBadge {
 }
 
 const baseBadge =
-  'inline-flex items-center rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap';
+  'inline-flex items-center rounded-sm px-2 py-0.5 text-[10px] font-medium whitespace-nowrap';
 
 const typeClasses = 'bg-surface-alt text-base-content';
-const availabilityBadgeClasses = 'bg-sky-100 text-sky-700 dark:bg-sky-900 dark:text-sky-300';
-const dockerRuntimeBadgeClasses = 'bg-sky-100 text-sky-700 dark:bg-sky-900 dark:text-sky-400';
+const availabilityBadgeClasses = 'bg-sky-100 text-sky-700 dark:bg-sky-900/25 dark:text-sky-300';
+const dockerRuntimeBadgeClasses = 'bg-sky-100 text-sky-700 dark:bg-sky-900/25 dark:text-sky-400';
 const podmanRuntimeBadgeClasses =
   'bg-violet-100 text-violet-700 dark:bg-violet-900 dark:text-violet-300';
 
diff --git a/frontend-modern/src/utils/resourceChangePresentation.ts b/frontend-modern/src/utils/resourceChangePresentation.ts
index 45bc693fa6..8e5dd04848 100644
--- a/frontend-modern/src/utils/resourceChangePresentation.ts
+++ b/frontend-modern/src/utils/resourceChangePresentation.ts
@@ -38,7 +38,7 @@ const RESOURCE_CHANGE_KIND_PRESENTATIONS: Record<
   activity: {
     label: 'Activity',
     plural: 'Activities',
-    className: 'bg-sky-100 text-sky-700 dark:bg-sky-900 dark:text-sky-300',
+    className: 'bg-sky-100 text-sky-700 dark:bg-sky-900/25 dark:text-sky-300',
   },
   restart: {
     label: 'Restart',
@@ -48,32 +48,32 @@ const RESOURCE_CHANGE_KIND_PRESENTATIONS: Record<
   config_update: {
     label: 'Config update',
     plural: 'Config updates',
-    className: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300',
+    className: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/25 dark:text-emerald-300',
   },
   metric_anomaly: {
     label: 'Anomaly',
     plural: 'Anomalies',
-    className: 'bg-rose-100 text-rose-700 dark:bg-rose-900 dark:text-rose-300',
+    className: 'bg-rose-100 text-rose-700 dark:bg-rose-900/25 dark:text-rose-300',
   },
   relationship_change: {
     label: 'Relationship change',
     plural: 'Relationship changes',
-    className: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-300',
+    className: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/25 dark:text-indigo-300',
   },
   capability_change: {
     label: 'Capability change',
     plural: 'Capability changes',
-    className: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900 dark:text-cyan-300',
+    className: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/25 dark:text-cyan-300',
   },
   alert_fired: {
     label: 'Alert fired',
     plural: 'Alerts fired',
-    className: 'bg-rose-100 text-rose-700 dark:bg-rose-900 dark:text-rose-300',
+    className: 'bg-rose-100 text-rose-700 dark:bg-rose-900/25 dark:text-rose-300',
   },
   alert_acknowledged: {
     label: 'Alert acknowledged',
     plural: 'Alerts acknowledged',
-    className: 'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300',
+    className: 'bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300',
   },
   alert_unacknowledged: {
     label: 'Alert unacknowledged',
@@ -83,17 +83,17 @@ const RESOURCE_CHANGE_KIND_PRESENTATIONS: Record<
   alert_snoozed: {
     label: 'Alert snoozed',
     plural: 'Alerts snoozed',
-    className: 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300',
+    className: 'bg-blue-100 text-blue-700 dark:bg-blue-900/25 dark:text-blue-300',
   },
   alert_unsnoozed: {
     label: 'Alert resumed',
     plural: 'Alerts resumed',
-    className: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900 dark:text-cyan-300',
+    className: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/25 dark:text-cyan-300',
   },
   alert_resolved: {
     label: 'Alert resolved',
     plural: 'Alerts resolved',
-    className: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300',
+    className: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/25 dark:text-emerald-300',
   },
   command_executed: {
     label: 'Command executed',
@@ -103,7 +103,7 @@ const RESOURCE_CHANGE_KIND_PRESENTATIONS: Record<
   runbook_executed: {
     label: 'Runbook executed',
     plural: 'Runbooks executed',
-    className: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-300',
+    className: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/25 dark:text-indigo-300',
   },
 };
 
@@ -125,27 +125,27 @@ const RESOURCE_CHANGE_SOURCE_TYPE_PRESENTATIONS: Record<
   platform_event: {
     label: 'Platform event',
     plural: 'Platform events',
-    className: 'bg-sky-100 text-sky-700 dark:bg-sky-900 dark:text-sky-300',
+    className: 'bg-sky-100 text-sky-700 dark:bg-sky-900/25 dark:text-sky-300',
   },
   pulse_diff: {
     label: 'Pulse diff',
     plural: 'Pulse diffs',
-    className: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-300',
+    className: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/25 dark:text-indigo-300',
   },
   heuristic: {
     label: 'Heuristic',
     plural: 'Heuristics',
-    className: 'bg-rose-100 text-rose-700 dark:bg-rose-900 dark:text-rose-300',
+    className: 'bg-rose-100 text-rose-700 dark:bg-rose-900/25 dark:text-rose-300',
   },
   user_action: {
     label: 'User action',
     plural: 'User actions',
-    className: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300',
+    className: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/25 dark:text-emerald-300',
   },
   agent_action: {
     label: 'Agent action',
     plural: 'Agent actions',
-    className: 'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300',
+    className: 'bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300',
   },
 };
 
@@ -169,22 +169,22 @@ const RESOURCE_CHANGE_SOURCE_ADAPTER_PRESENTATIONS: Record<
   proxmox_adapter: {
     label: 'Proxmox adapter',
     plural: 'Proxmox adapters',
-    className: 'bg-sky-100 text-sky-700 dark:bg-sky-900 dark:text-sky-300',
+    className: 'bg-sky-100 text-sky-700 dark:bg-sky-900/25 dark:text-sky-300',
   },
   truenas_adapter: {
     label: 'TrueNAS adapter',
     plural: 'TrueNAS adapters',
-    className: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300',
+    className: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/25 dark:text-emerald-300',
   },
   vmware_adapter: {
     label: 'VMware adapter',
     plural: 'VMware adapters',
-    className: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900 dark:text-cyan-300',
+    className: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/25 dark:text-cyan-300',
   },
   'agent:ops-helper': {
     label: 'Ops helper',
     plural: 'Ops helpers',
-    className: 'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300',
+    className: 'bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300',
   },
 };
 
diff --git a/frontend-modern/src/utils/resourcePolicyPresentation.ts b/frontend-modern/src/utils/resourcePolicyPresentation.ts
index 894b544003..6f4e8dbf7a 100644
--- a/frontend-modern/src/utils/resourcePolicyPresentation.ts
+++ b/frontend-modern/src/utils/resourcePolicyPresentation.ts
@@ -46,7 +46,7 @@ export const RESOURCE_POLICY_REDACTION_ORDER: ResourceRedactionHint[] = [
 ];
 
 const badgeBaseClass =
-  'inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium whitespace-nowrap';
+  'inline-flex items-center rounded-sm px-1.5 py-0.5 text-[10px] font-medium whitespace-nowrap';
 
 const sensitivityPresentation: Record<
   ResourceSensitivity,
@@ -55,7 +55,7 @@ const sensitivityPresentation: Record<
   public: {
     label: 'Public',
     title: 'Resource data is classified as public.',
-    className: `${badgeBaseClass} bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300`,
+    className: `${badgeBaseClass} bg-emerald-100 text-emerald-700 dark:bg-emerald-900/25 dark:text-emerald-300`,
   },
   internal: {
     label: 'Internal',
@@ -65,12 +65,12 @@ const sensitivityPresentation: Record<
   sensitive: {
     label: 'Sensitive',
     title: 'Resource data requires sensitivity-aware handling.',
-    className: `${badgeBaseClass} bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300`,
+    className: `${badgeBaseClass} bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300`,
   },
   restricted: {
     label: 'Restricted',
     title: 'Resource data is tightly restricted and requires guarded handling.',
-    className: `${badgeBaseClass} bg-rose-100 text-rose-700 dark:bg-rose-900 dark:text-rose-300`,
+    className: `${badgeBaseClass} bg-rose-100 text-rose-700 dark:bg-rose-900/25 dark:text-rose-300`,
   },
 };
 
@@ -81,17 +81,17 @@ const routingPresentation: Record<
   'cloud-summary': {
     label: 'Cloud Summary',
     title: 'This resource may use cloud summarization within policy limits.',
-    className: `${badgeBaseClass} bg-sky-100 text-sky-700 dark:bg-sky-900 dark:text-sky-300`,
+    className: `${badgeBaseClass} bg-sky-100 text-sky-700 dark:bg-sky-900/25 dark:text-sky-300`,
   },
   'local-first': {
     label: 'Local First',
     title: 'This resource should prefer local handling before cloud escalation.',
-    className: `${badgeBaseClass} bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-300`,
+    className: `${badgeBaseClass} bg-indigo-100 text-indigo-700 dark:bg-indigo-900/25 dark:text-indigo-300`,
   },
   'local-only': {
     label: 'Local Only',
     title: 'This resource must remain within the local boundary.',
-    className: `${badgeBaseClass} bg-teal-100 text-teal-700 dark:bg-teal-900 dark:text-teal-300`,
+    className: `${badgeBaseClass} bg-teal-100 text-teal-700 dark:bg-teal-900/25 dark:text-teal-300`,
   },
 };
 
diff --git a/frontend-modern/src/utils/securityScorePresentation.ts b/frontend-modern/src/utils/securityScorePresentation.ts
index f9ff8611ca..67153323c5 100644
--- a/frontend-modern/src/utils/securityScorePresentation.ts
+++ b/frontend-modern/src/utils/securityScorePresentation.ts
@@ -95,13 +95,13 @@ export function getSecurityScorePresentation(score: number): SecurityScorePresen
       label: 'Strong',
       icon: 'shield-check',
       tone: {
-        headerBg: 'bg-emerald-50 dark:bg-emerald-950',
+        headerBg: 'bg-emerald-50 dark:bg-emerald-950/25',
         headerBorder: 'border-b border-emerald-200 dark:border-emerald-800',
-        iconWrap: 'bg-emerald-100 dark:bg-emerald-900',
+        iconWrap: 'bg-emerald-100 dark:bg-emerald-900/25',
         icon: 'text-emerald-700 dark:text-emerald-300',
         subtitle: 'text-emerald-700 dark:text-emerald-300',
         score: 'text-emerald-800 dark:text-emerald-200',
-        badge: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300',
+        badge: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/25 dark:text-emerald-300',
       },
     };
   }
@@ -111,13 +111,13 @@ export function getSecurityScorePresentation(score: number): SecurityScorePresen
       label: 'Moderate',
       icon: 'shield',
       tone: {
-        headerBg: 'bg-amber-50 dark:bg-amber-950',
+        headerBg: 'bg-amber-50 dark:bg-amber-950/25',
         headerBorder: 'border-b border-amber-200 dark:border-amber-800',
-        iconWrap: 'bg-amber-100 dark:bg-amber-900',
+        iconWrap: 'bg-amber-100 dark:bg-amber-900/25',
         icon: 'text-amber-700 dark:text-amber-300',
         subtitle: 'text-amber-700 dark:text-amber-300',
         score: 'text-amber-800 dark:text-amber-200',
-        badge: 'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300',
+        badge: 'bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300',
       },
     };
   }
@@ -126,13 +126,13 @@ export function getSecurityScorePresentation(score: number): SecurityScorePresen
     label: 'Weak',
     icon: 'shield-alert',
     tone: {
-      headerBg: 'bg-rose-50 dark:bg-rose-950',
+      headerBg: 'bg-rose-50 dark:bg-rose-950/25',
       headerBorder: 'border-b border-rose-200 dark:border-rose-800',
-      iconWrap: 'bg-rose-100 dark:bg-rose-900',
+      iconWrap: 'bg-rose-100 dark:bg-rose-900/25',
       icon: 'text-rose-700 dark:text-rose-300',
       subtitle: 'text-rose-700 dark:text-rose-300',
       score: 'text-rose-800 dark:text-rose-200',
-      badge: 'bg-rose-100 text-rose-700 dark:bg-rose-900 dark:text-rose-300',
+      badge: 'bg-rose-100 text-rose-700 dark:bg-rose-900/25 dark:text-rose-300',
     },
   };
 }
@@ -147,7 +147,7 @@ export function getSecurityWarningPresentation(options: {
 }): SecurityWarningPresentation {
   if (options.publicAccess && !options.hasAuthentication) {
     return {
-      background: 'bg-red-50 dark:bg-red-900',
+      background: 'bg-red-50 dark:bg-red-900/25',
       border: 'border-red-200 dark:border-red-800',
       message:
         'WARNING: PUBLIC NETWORK ACCESS DETECTED - Your Proxmox credentials are exposed to the internet!',
@@ -192,8 +192,8 @@ export function getSecurityWarningPresentation(options: {
   return {
     background:
       posture.label === 'Moderate'
-        ? 'bg-yellow-50 dark:bg-yellow-900'
-        : 'bg-red-50 dark:bg-red-900',
+        ? 'bg-yellow-50 dark:bg-yellow-900/25'
+        : 'bg-red-50 dark:bg-red-900/25',
     border:
       posture.label === 'Moderate'
         ? 'border-yellow-200 dark:border-yellow-800'
@@ -271,7 +271,8 @@ export function getSecurityFeatureCardPresentation(options: {
 }): SecurityFeatureCardPresentation {
   if (options.enabled) {
     return {
-      cardClassName: 'border-emerald-200 dark:border-emerald-800 bg-emerald-50 dark:bg-emerald-950',
+      cardClassName:
+        'border-emerald-200 dark:border-emerald-800 bg-emerald-50 dark:bg-emerald-950/25',
       iconClassName: 'text-emerald-500 dark:text-emerald-400',
       statusLabel: 'Enabled',
       criticalLabelClassName: 'text-emerald-600 dark:text-emerald-400',
@@ -280,7 +281,7 @@ export function getSecurityFeatureCardPresentation(options: {
 
   if (options.critical) {
     return {
-      cardClassName: 'border-rose-200 dark:border-rose-800 bg-rose-50 dark:bg-rose-950',
+      cardClassName: 'border-rose-200 dark:border-rose-800 bg-rose-50 dark:bg-rose-950/25',
       iconClassName: 'text-rose-500 dark:text-rose-400',
       statusLabel: 'Disabled',
       criticalLabelClassName: 'text-rose-600 dark:text-rose-400',
diff --git a/frontend-modern/src/utils/semanticTonePresentation.ts b/frontend-modern/src/utils/semanticTonePresentation.ts
index 3f533c32dc..71773c1c4f 100644
--- a/frontend-modern/src/utils/semanticTonePresentation.ts
+++ b/frontend-modern/src/utils/semanticTonePresentation.ts
@@ -7,19 +7,19 @@ export interface SemanticTonePresentation {
 
 const SEMANTIC_TONE_PRESENTATION: Record<SemanticTone, SemanticTonePresentation> = {
   success: {
-    panelClass: 'border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-900',
+    panelClass: 'border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-900/25',
     iconClass: 'text-green-600 dark:text-green-400',
   },
   warning: {
-    panelClass: 'border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900',
+    panelClass: 'border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/25',
     iconClass: 'text-amber-600 dark:text-amber-400',
   },
   error: {
-    panelClass: 'border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900',
+    panelClass: 'border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/25',
     iconClass: 'text-red-600 dark:text-red-400',
   },
   info: {
-    panelClass: 'border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900',
+    panelClass: 'border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900/25',
     iconClass: 'text-blue-600 dark:text-blue-400',
   },
 };
diff --git a/frontend-modern/src/utils/serviceHealthPresentation.ts b/frontend-modern/src/utils/serviceHealthPresentation.ts
index 12a52b4572..d4a234cba9 100644
--- a/frontend-modern/src/utils/serviceHealthPresentation.ts
+++ b/frontend-modern/src/utils/serviceHealthPresentation.ts
@@ -27,7 +27,7 @@ export function getServiceHealthPresentation(
 
   if (normalized.includes('healthy') || normalized === 'online') {
     return {
-      bg: 'bg-green-100 dark:bg-green-900',
+      bg: 'bg-green-100 dark:bg-green-900/25',
       text: 'text-green-700 dark:text-green-400',
       dot: 'bg-green-500',
       label: 'Healthy',
@@ -36,7 +36,7 @@ export function getServiceHealthPresentation(
 
   if (normalized.includes('degraded') || normalized.includes('warning')) {
     return {
-      bg: 'bg-yellow-100 dark:bg-yellow-900',
+      bg: 'bg-yellow-100 dark:bg-yellow-900/25',
       text: 'text-yellow-700 dark:text-yellow-400',
       dot: 'bg-yellow-500',
       label: 'Degraded',
@@ -45,7 +45,7 @@ export function getServiceHealthPresentation(
 
   if (normalized.includes('error') || normalized === 'offline') {
     return {
-      bg: 'bg-red-100 dark:bg-red-900',
+      bg: 'bg-red-100 dark:bg-red-900/25',
       text: 'text-red-700 dark:text-red-400',
       dot: 'bg-red-500',
       label: 'Offline',
diff --git a/frontend-modern/src/utils/sourcePlatforms.ts b/frontend-modern/src/utils/sourcePlatforms.ts
index 52db27a306..b1385d1b52 100644
--- a/frontend-modern/src/utils/sourcePlatforms.ts
+++ b/frontend-modern/src/utils/sourcePlatforms.ts
@@ -34,7 +34,7 @@ export const SOURCE_PLATFORM_PRESENTATION: Record<KnownSourcePlatform, SourcePla
     ...GENERATED_SOURCE_PLATFORM_PRESENTATION,
     availability: {
       label: 'Availability',
-      tone: 'bg-sky-100 text-sky-700 dark:bg-sky-900 dark:text-sky-300',
+      tone: 'bg-sky-100 text-sky-700 dark:bg-sky-900/25 dark:text-sky-300',
     },
   } as Record<KnownSourcePlatform, SourcePlatformPresentation>;
 
diff --git a/frontend-modern/src/utils/sourceTypePresentation.ts b/frontend-modern/src/utils/sourceTypePresentation.ts
index fabf1acdf7..dad9ce084c 100644
--- a/frontend-modern/src/utils/sourceTypePresentation.ts
+++ b/frontend-modern/src/utils/sourceTypePresentation.ts
@@ -8,15 +8,15 @@ export interface SourceTypePresentation {
 const SOURCE_TYPE_PRESENTATION: Record<SourceType, SourceTypePresentation> = {
   agent: {
     label: 'Agent',
-    badgeClasses: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-400',
+    badgeClasses: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/25 dark:text-emerald-400',
   },
   api: {
     label: 'API',
-    badgeClasses: 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-400',
+    badgeClasses: 'bg-blue-100 text-blue-700 dark:bg-blue-900/25 dark:text-blue-400',
   },
   hybrid: {
     label: 'Hybrid',
-    badgeClasses: 'bg-teal-100 text-teal-700 dark:bg-teal-900 dark:text-teal-400',
+    badgeClasses: 'bg-teal-100 text-teal-700 dark:bg-teal-900/25 dark:text-teal-400',
   },
 };
 
diff --git a/frontend-modern/src/utils/ssoProviderPresentation.ts b/frontend-modern/src/utils/ssoProviderPresentation.ts
index 1f1da4042e..787736cdde 100644
--- a/frontend-modern/src/utils/ssoProviderPresentation.ts
+++ b/frontend-modern/src/utils/ssoProviderPresentation.ts
@@ -118,15 +118,15 @@ export function getSSOProviderCardClass(enabled: boolean): string {
 }
 
 export function getSSOProviderTypeBadgeClass(): string {
-  return 'px-1.5 py-0.5 text-xs font-medium rounded bg-surface-hover';
+  return 'px-1.5 py-0.5 text-xs font-medium rounded-sm bg-surface-hover';
 }
 
 export function getSSOTestResultPresentation(success: boolean) {
   if (success) {
     return {
       panelClass:
-        'p-4 rounded-md border bg-green-50 dark:bg-green-900 border-green-200 dark:border-green-800',
-      iconClass: 'w-5 h-5 text-emerald-500 dark:text-emerald-400 flex-shrink-0 mt-0.5',
+        'p-4 rounded-md border bg-green-50 dark:bg-green-900/25 border-green-200 dark:border-green-800',
+      iconClass: 'w-5 h-5 text-emerald-500 dark:text-emerald-400 shrink-0 mt-0.5',
       titleClass: 'text-sm font-medium text-green-800 dark:text-green-200',
       errorClass: 'text-xs text-red-600 dark:text-red-400 mt-1',
     };
@@ -134,8 +134,8 @@ export function getSSOTestResultPresentation(success: boolean) {
 
   return {
     panelClass:
-      'p-4 rounded-md border bg-red-50 dark:bg-red-900 border-red-200 dark:border-red-800',
-    iconClass: 'w-5 h-5 text-rose-500 dark:text-rose-400 flex-shrink-0 mt-0.5',
+      'p-4 rounded-md border bg-red-50 dark:bg-red-900/25 border-red-200 dark:border-red-800',
+    iconClass: 'w-5 h-5 text-rose-500 dark:text-rose-400 shrink-0 mt-0.5',
     titleClass: 'text-sm font-medium text-red-800 dark:text-red-200',
     errorClass: 'text-xs text-red-600 dark:text-red-400 mt-1',
   };
@@ -152,8 +152,8 @@ export function getSSOEndpointUnavailableHint(endpointLabel: string): string {
 export function getSSOCertificatePresentation(isExpired: boolean) {
   return {
     containerClass: isExpired
-      ? 'text-xs px-2 py-1 rounded bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300'
-      : 'text-xs px-2 py-1 rounded bg-surface-hover text-base-content',
+      ? 'text-xs px-2 py-1 rounded-sm bg-red-100 dark:bg-red-900/25 text-red-700 dark:text-red-300'
+      : 'text-xs px-2 py-1 rounded-sm bg-surface-hover text-base-content',
     expiredLabelClass: 'ml-1 text-red-600 dark:text-red-400 font-medium',
     expiredLabel: '(Expired!)',
   };
diff --git a/frontend-modern/src/utils/status.ts b/frontend-modern/src/utils/status.ts
index 4724dfad02..bf5e3bd735 100644
--- a/frontend-modern/src/utils/status.ts
+++ b/frontend-modern/src/utils/status.ts
@@ -60,10 +60,10 @@ export interface StatusIndicator {
 const defaultIndicator: StatusIndicator = { variant: 'muted', label: 'Unknown' };
 
 const STATUS_INDICATOR_BADGE_TONE_CLASSES: Record<StatusIndicatorVariant, string> = {
-  success: 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300',
-  warning: 'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300',
-  danger: 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300',
-  info: 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300',
+  success: 'bg-green-100 text-green-700 dark:bg-green-900/25 dark:text-green-300',
+  warning: 'bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300',
+  danger: 'bg-red-100 text-red-700 dark:bg-red-900/25 dark:text-red-300',
+  info: 'bg-blue-100 text-blue-700 dark:bg-blue-900/25 dark:text-blue-300',
   muted: 'bg-surface-alt text-base-content',
 };
 
diff --git a/frontend-modern/src/utils/systemLogsPresentation.ts b/frontend-modern/src/utils/systemLogsPresentation.ts
index def50f3e9d..dbdd47bc2a 100644
--- a/frontend-modern/src/utils/systemLogsPresentation.ts
+++ b/frontend-modern/src/utils/systemLogsPresentation.ts
@@ -40,7 +40,7 @@ const STREAM_PRESENTATION: Record<'live' | 'paused', SystemLogStreamPresentation
   paused: {
     indicatorClass: 'bg-amber-400',
     label: 'Paused',
-    pauseButtonClass: 'bg-amber-100 text-amber-600 dark:bg-amber-900 dark:text-amber-400',
+    pauseButtonClass: 'bg-amber-100 text-amber-600 dark:bg-amber-900/25 dark:text-amber-400',
     toggleTitle: 'Resume Stream',
   },
 };
diff --git a/frontend-modern/src/utils/unifiedAgentStatusPresentation.ts b/frontend-modern/src/utils/unifiedAgentStatusPresentation.ts
index 998ff35e63..9760478d06 100644
--- a/frontend-modern/src/utils/unifiedAgentStatusPresentation.ts
+++ b/frontend-modern/src/utils/unifiedAgentStatusPresentation.ts
@@ -20,14 +20,14 @@ export function getUnifiedAgentStatusPresentation(
 ): UnifiedAgentStatusPresentation {
   if (state === 'removed') {
     return {
-      badgeClass: 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200',
+      badgeClass: 'bg-amber-100 text-amber-800 dark:bg-amber-900/25 dark:text-amber-200',
       label: MONITORING_STOPPED_STATUS_LABEL,
     };
   }
 
   if (isConnectedHealthStatus(healthStatus)) {
     return {
-      badgeClass: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300',
+      badgeClass: 'bg-green-100 text-green-800 dark:bg-green-900/25 dark:text-green-300',
       label: healthStatus || 'unknown',
     };
   }
@@ -43,13 +43,13 @@ export function getUnifiedAgentLookupStatusPresentation(
 ): UnifiedAgentLookupStatusPresentation {
   if (connected) {
     return {
-      badgeClass: 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300',
+      badgeClass: 'bg-green-100 text-green-700 dark:bg-green-900/25 dark:text-green-300',
       label: 'Connected',
     };
   }
 
   return {
-    badgeClass: 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200',
+    badgeClass: 'bg-amber-100 text-amber-800 dark:bg-amber-900/25 dark:text-amber-200',
     label: 'Not reporting yet',
   };
 }
diff --git a/frontend-modern/src/utils/updatesPresentation.ts b/frontend-modern/src/utils/updatesPresentation.ts
index 10da5e0b64..adbf9ab5f0 100644
--- a/frontend-modern/src/utils/updatesPresentation.ts
+++ b/frontend-modern/src/utils/updatesPresentation.ts
@@ -38,7 +38,7 @@ export function getUpdateBuildBadges(
     badges.push({
       label: 'Development',
       className:
-        'inline-flex items-center px-2 py-0.5 text-[10px] font-medium rounded-full bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300',
+        'inline-flex items-center px-2 py-0.5 text-[10px] font-medium rounded-full bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300',
     });
   }
 
@@ -46,7 +46,7 @@ export function getUpdateBuildBadges(
     badges.push({
       label: 'Docker',
       className:
-        'inline-flex items-center px-2 py-0.5 text-[10px] font-medium rounded-full bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300',
+        'inline-flex items-center px-2 py-0.5 text-[10px] font-medium rounded-full bg-blue-100 text-blue-700 dark:bg-blue-900/25 dark:text-blue-300',
     });
   }
 
diff --git a/frontend-modern/src/utils/workloadGuestPresentation.ts b/frontend-modern/src/utils/workloadGuestPresentation.ts
index 7b68c92052..09d3b9cd4a 100644
--- a/frontend-modern/src/utils/workloadGuestPresentation.ts
+++ b/frontend-modern/src/utils/workloadGuestPresentation.ts
@@ -22,27 +22,27 @@ const BACKUP_STATUS_PRESENTATION: Record<
 > = {
   fresh: {
     color: 'text-green-600 dark:text-green-400',
-    bgColor: 'bg-green-100 dark:bg-green-900',
+    bgColor: 'bg-green-100 dark:bg-green-900/25',
     icon: 'check',
   },
   stale: {
     color: 'text-yellow-600 dark:text-yellow-400',
-    bgColor: 'bg-yellow-100 dark:bg-yellow-900',
+    bgColor: 'bg-yellow-100 dark:bg-yellow-900/25',
     icon: 'warning',
   },
   overdue: {
     color: 'text-yellow-600 dark:text-yellow-400',
-    bgColor: 'bg-yellow-100 dark:bg-yellow-900',
+    bgColor: 'bg-yellow-100 dark:bg-yellow-900/25',
     icon: 'warning',
   },
   never: {
     color: 'text-red-600 dark:text-red-400',
-    bgColor: 'bg-red-100 dark:bg-red-900',
+    bgColor: 'bg-red-100 dark:bg-red-900/25',
     icon: 'x',
   },
   running: {
     color: 'text-blue-600 dark:text-blue-400',
-    bgColor: 'bg-blue-100 dark:bg-blue-900',
+    bgColor: 'bg-blue-100 dark:bg-blue-900/25',
     icon: 'running',
   },
 };
diff --git a/frontend-modern/src/utils/workloadTypePresentation.ts b/frontend-modern/src/utils/workloadTypePresentation.ts
index 87ce30c318..e1799a1913 100644
--- a/frontend-modern/src/utils/workloadTypePresentation.ts
+++ b/frontend-modern/src/utils/workloadTypePresentation.ts
@@ -17,25 +17,25 @@ const PRESENTATION_MAP: Record<WorkloadTypePresentationKey, WorkloadTypePresenta
     label: 'VM',
     pluralLabel: 'VMs',
     title: 'Virtual Machine',
-    className: 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300',
+    className: 'bg-blue-100 text-blue-700 dark:bg-blue-900/25 dark:text-blue-300',
   },
   'system-container': {
     label: 'LXC',
     pluralLabel: 'LXC',
     title: 'System Container',
-    className: 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300',
+    className: 'bg-green-100 text-green-700 dark:bg-green-900/25 dark:text-green-300',
   },
   'app-container': {
     label: 'Container',
     pluralLabel: 'Containers',
     title: 'Application Container',
-    className: 'bg-sky-100 text-sky-700 dark:bg-sky-900 dark:text-sky-300',
+    className: 'bg-sky-100 text-sky-700 dark:bg-sky-900/25 dark:text-sky-300',
   },
   pod: {
     label: 'Pod',
     pluralLabel: 'Pods',
     title: 'Kubernetes Pod',
-    className: 'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300',
+    className: 'bg-amber-100 text-amber-700 dark:bg-amber-900/25 dark:text-amber-300',
   },
   agent: {
     label: 'Agent',
diff --git a/frontend-modern/tailwind.config.js b/frontend-modern/tailwind.config.js
deleted file mode 100644
index af1bac17fd..0000000000
--- a/frontend-modern/tailwind.config.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import typography from '@tailwindcss/typography';
-
-export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
-  darkMode: 'class',
-  theme: {
-    screens: {
-      'xs': '400px',
-      'sm': '640px',
-      'md': '768px',
-      'lg': '1024px',
-      'xl': '1280px',
-      '2xl': '1536px',
-    },
-    extend: {
-      colors: {
-        // Semantic design system mapped to index.css
-        surface: 'var(--color-bg-surface)',
-        'surface-hover': 'var(--color-bg-surface-hover)',
-        'surface-alt': 'var(--color-bg-surface-alt)',
-        border: 'var(--color-border-base)',
-        'border-subtle': 'var(--color-border-subtle)',
-        'base-content': 'var(--color-text-base)',
-        muted: 'var(--color-text-muted)',
-
-        gray: {
-          750: '#2d3748',
-        },
-        metric: {
-          critical: {
-            DEFAULT: '#ef4444',
-            bg: 'rgba(239, 68, 68, 0.6)',
-          },
-          warning: {
-            DEFAULT: '#eab308',
-            bg: 'rgba(234, 179, 8, 0.6)',
-          },
-          normal: {
-            DEFAULT: '#22c55e',
-            bg: 'rgba(34, 197, 94, 0.6)',
-          }
-        },
-        red: { 900: 'rgba(127, 29, 29, 0.25)', 950: 'rgba(69, 10, 10, 0.25)' },
-        amber: { 900: 'rgba(120, 53, 15, 0.25)', 950: 'rgba(67, 20, 7, 0.25)' },
-        yellow: { 900: 'rgba(113, 63, 18, 0.25)', 950: 'rgba(66, 32, 6, 0.25)' },
-        green: { 900: 'rgba(20, 83, 45, 0.25)', 950: 'rgba(5, 46, 22, 0.25)' },
-        emerald: { 900: 'rgba(6, 78, 59, 0.25)', 950: 'rgba(2, 44, 34, 0.25)' },
-        teal: { 900: 'rgba(19, 78, 74, 0.25)', 950: 'rgba(4, 47, 46, 0.25)' },
-        cyan: { 900: 'rgba(22, 78, 99, 0.25)', 950: 'rgba(8, 51, 68, 0.25)' },
-        sky: { 900: 'rgba(12, 74, 110, 0.25)', 950: 'rgba(8, 47, 73, 0.25)' },
-        blue: { 900: 'rgba(30, 58, 138, 0.25)', 950: 'rgba(23, 37, 84, 0.25)' },
-        indigo: { 900: 'rgba(49, 46, 129, 0.25)', 950: 'rgba(30, 27, 75, 0.25)' },
-        purple: { 900: 'rgba(88, 28, 135, 0.25)', 950: 'rgba(59, 7, 100, 0.25)' },
-        rose: { 900: 'rgba(136, 19, 55, 0.25)', 950: 'rgba(76, 5, 25, 0.25)' },
-      },
-      animation: {
-        'spin-slow': 'spin 2s linear infinite',
-        'fadeIn': 'fadeIn 0.2s ease-in',
-        'slideInRight': 'slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1)',
-      },
-      keyframes: {
-        fadeIn: {
-          '0%': { opacity: '0' },
-          '100%': { opacity: '1' },
-        },
-        slideInRight: {
-          '0%': { transform: 'translateX(100%)' },
-          '100%': { transform: 'translateX(0)' },
-        }
-      }
-    },
-  },
-  plugins: [typography],
-}
\ No newline at end of file
diff --git a/frontend-modern/vite.config.ts b/frontend-modern/vite.config.ts
index 10b73710e6..f139dd251d 100644
--- a/frontend-modern/vite.config.ts
+++ b/frontend-modern/vite.config.ts
@@ -1,4 +1,5 @@
 import { defineConfig } from 'vite';
+import tailwindcss from '@tailwindcss/vite';
 import solid from 'vite-plugin-solid';
 import sri from 'vite-plugin-sri-gen';
 import path from 'path';
@@ -50,7 +51,11 @@ export default defineConfig(({ mode }) => ({
   // the whole app incl. all Settings panels and every locale) at cold start,
   // defeating route-level code splitting on slow devices. Dynamic-import SRI
   // is still enforced through the generated import map integrity block.
-  plugins: [solid(), sri({ algorithm: 'sha384', preloadDynamicChunks: false })],
+  plugins: [
+    tailwindcss(),
+    solid(),
+    sri({ algorithm: 'sha384', preloadDynamicChunks: false }),
+  ],
   resolve: {
     alias: {
       '@': srcAlias,
diff --git a/scripts/check-assistant-identity.mjs b/scripts/check-assistant-identity.mjs
index 68bd976b58..3eef18305b 100644
--- a/scripts/check-assistant-identity.mjs
+++ b/scripts/check-assistant-identity.mjs
@@ -199,11 +199,7 @@ try {
   }
   await hashTree(`${root}/src`);
   await hashTree(`${root}/qualification/assistant-identity`);
-  for (const path of [
-    "package-lock.json",
-    "tailwind.config.js",
-    "postcss.config.js",
-  ])
+  for (const path of ["package-lock.json"])
     hashes[path] = createHash("sha256")
       .update(await readFile(`${root}/${path}`))
       .digest("hex");
diff --git a/tests/integration/scripts/managed-local-backend.mjs b/tests/integration/scripts/managed-local-backend.mjs
index baebab5556..67f91d1993 100644
--- a/tests/integration/scripts/managed-local-backend.mjs
+++ b/tests/integration/scripts/managed-local-backend.mjs
@@ -363,8 +363,6 @@ export async function shouldBuildManagedLocalBackendFrontend(state) {
     'package-lock.json',
     'vite.config.ts',
     'tsconfig.json',
-    'tailwind.config.js',
-    'postcss.config.js',
     'index.html',
   ]) {
     try {