From 107dafe5e924654da7c354953631618a71e40862 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sun, 25 Oct 2026 17:55:34 +0000
Subject: [PATCH 1/2] Bump postcss-selector-parser and tailwindcss in /web

Removes [postcss-selector-parser](https://github.com/postcss/postcss-selector-parser). It's no longer used after updating ancestor dependency [tailwindcss](https://github.com/tailwindlabs/tailwindcss/tree/HEAD/packages/tailwindcss). These dependencies need to be updated together.


Removes `postcss-selector-parser`

Updates `tailwindcss` from 3.4.17 to 4.3.3
- [Release notes](https://github.com/tailwindlabs/tailwindcss/releases)
- [Changelog](https://github.com/tailwindlabs/tailwindcss/blob/main/CHANGELOG.md)
- [Commits](https://github.com/tailwindlabs/tailwindcss/commits/v4.3.3/packages/tailwindcss)

---
updated-dependencies:
- dependency-name: postcss-selector-parser
  dependency-version:
  dependency-type: indirect
- dependency-name: tailwindcss
  dependency-version: 4.3.3
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 web/package-lock.json | 782 +-----------------------------------------
 web/package.json      |   2 +-
 2 files changed, 6 insertions(+), 778 deletions(-)

diff --git a/web/package-lock.json b/web/package-lock.json
index dd44f2a5..f29ca67c 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -47,7 +47,7 @@
         "jsdom": "26.0.0",
         "postcss": "8.5.28",
         "prettier": "3.8.4",
-        "tailwindcss": "3.4.17",
+        "tailwindcss": "4.3.3",
         "typescript": "5.7.3",
         "typescript-eslint": "8.61.1",
         "vite": "6.4.5",
@@ -68,19 +68,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",
@@ -1248,44 +1235,6 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
-    "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/@radix-ui/number": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.2.tgz",
@@ -4197,34 +4146,6 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
-    "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/aria-hidden": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
@@ -4344,19 +4265,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/brace-expansion": {
       "version": "5.0.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.12.tgz",
@@ -4370,19 +4278,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.29.0",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.29.0.tgz",
@@ -4431,16 +4326,6 @@
         "node": ">= 0.4"
       }
     },
-    "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",
@@ -4502,44 +4387,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "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/class-variance-authority": {
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
@@ -4594,16 +4441,6 @@
         "node": ">= 0.8"
       }
     },
-    "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/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -4646,19 +4483,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/cssesc": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "cssesc": "bin/cssesc"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/cssstyle": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.6.0.tgz",
@@ -4752,20 +4576,6 @@
       "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
       "license": "MIT"
     },
-    "node_modules/didyoumean": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true,
-      "license": "Apache-2.0"
-    },
-    "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/dom-accessibility-api": {
       "version": "0.5.16",
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
@@ -5143,36 +4953,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",
@@ -5187,16 +4967,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",
@@ -5210,19 +4980,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",
@@ -5613,35 +5370,6 @@
         "node": ">=8"
       }
     },
-    "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-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -5665,16 +5393,6 @@
         "node": ">=0.10.0"
       }
     },
-    "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",
@@ -5689,16 +5407,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "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==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "jiti": "bin/jiti.js"
-      }
-    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -5818,26 +5526,6 @@
         "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==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antonk52"
-      }
-    },
-    "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==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -5923,30 +5611,6 @@
         "node": ">= 0.4"
       }
     },
-    "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",
@@ -6003,18 +5667,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.19",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.19.tgz",
@@ -6051,16 +5703,6 @@
         "node": ">=18"
       }
     },
-    "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/normalize-range": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
@@ -6078,26 +5720,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": "3.0.0",
       "resolved": "https://registry.npmjs.org/obug/-/obug-3.0.0.tgz",
@@ -6208,13 +5830,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/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -6222,39 +5837,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/postcss": {
       "version": "8.5.28",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.28.tgz",
@@ -6284,126 +5866,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": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
-      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "lilconfig": "^3.0.0",
-        "yaml": "^2.3.4"
-      },
-      "engines": {
-        "node": ">= 14"
-      },
-      "peerDependencies": {
-        "postcss": ">=8.0.9",
-        "ts-node": ">=9.0.0"
-      },
-      "peerDependenciesMeta": {
-        "postcss": {
-          "optional": true
-        },
-        "ts-node": {
-          "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-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-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -6488,27 +5950,6 @@
         "node": ">=6"
       }
     },
-    "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": {
       "version": "19.0.0",
       "resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz",
@@ -6682,29 +6123,6 @@
         }
       }
     },
-    "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",
@@ -6729,39 +6147,6 @@
         "node": ">=0.10.5"
       }
     },
-    "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/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.61.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.61.1.tgz",
@@ -6814,30 +6199,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",
@@ -6933,29 +6294,6 @@
         "node": ">=8"
       }
     },
-    "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/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -6969,19 +6307,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",
@@ -7000,65 +6325,11 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.17",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
-      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
-      "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.6",
-        "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",
-        "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"
-      }
-    },
-    "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==",
+      "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": {
-        "thenify": ">= 3.1.0 < 4"
-      },
-      "engines": {
-        "node": ">=0.8"
-      }
+      "license": "MIT"
     },
     "node_modules/tinybench": {
       "version": "6.2.2",
@@ -7158,19 +6429,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "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/tough-cookie": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-5.1.2.tgz",
@@ -7210,13 +6468,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/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
@@ -7374,13 +6625,6 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
-    "node_modules/util-deprecate": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/vite": {
       "version": "6.4.5",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.5.tgz",
@@ -7738,22 +6982,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/yaml": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.0.tgz",
-      "integrity": "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/eemeli"
-      }
-    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/web/package.json b/web/package.json
index 2b75cea5..9e3f5216 100644
--- a/web/package.json
+++ b/web/package.json
@@ -59,7 +59,7 @@
     "jsdom": "26.0.0",
     "postcss": "8.5.28",
     "prettier": "3.8.4",
-    "tailwindcss": "3.4.17",
+    "tailwindcss": "4.3.3",
     "typescript": "5.7.3",
     "typescript-eslint": "8.61.1",
     "vite": "6.4.5",

From 889e368a8eb5eb9c22fe0a4d14576e9a516288b0 Mon Sep 17 00:00:00 2001
From: Eugene Palchukovsky <dev@palchukovsky.com>
Date: Sun, 25 Oct 2026 20:57:17 +0200
Subject: [PATCH 2/2] Preserve panel layout when upgrading Tailwind

---
 checks/README.md                              |   4 +
 checks/semgrep/tailwind-v4-utilities.yml      |  27 +
 .../testdata/tailwind-v4-utilities.tsx        |  26 +
 justfile                                      |   1 +
 web/package-lock.json                         | 635 ++++++++++++++++++
 web/package.json                              |   1 +
 web/postcss.config.js                         |   3 +-
 web/src/components/AccessModePanel.tsx        |  12 +-
 web/src/components/AccountDialogs.tsx         |   6 +-
 web/src/components/AccountModeChoice.tsx      |  10 +-
 web/src/components/AdjustmentTypeField.tsx    |   2 +-
 web/src/components/AuthScreen.tsx             |   2 +-
 web/src/components/Autocomplete.tsx           |   2 +-
 web/src/components/BusinessCsvDialogs.tsx     |   4 +-
 web/src/components/ClearableInput.tsx         |   2 +-
 web/src/components/ConnectAgent.tsx           |  20 +-
 web/src/components/CopyableSnippet.tsx        |   4 +-
 web/src/components/MasterKeyGuide.tsx         |   6 +-
 web/src/components/Notice.tsx                 |   4 +-
 web/src/components/Page.tsx                   |   2 +-
 web/src/components/PageStates.tsx             |   6 +-
 web/src/components/SidebarExtras.tsx          |   2 +-
 web/src/components/SigningKeysPanel.tsx       |  16 +-
 web/src/components/TextField.tsx              |   2 +-
 .../dashboard/DashboardStatusCard.tsx         |   2 +-
 web/src/components/data/FilterBar.tsx         |   6 +-
 web/src/components/data/RowActions.tsx        |   2 +-
 web/src/components/data/SortableHeader.tsx    |   2 +-
 web/src/components/security/AccessSection.tsx |   2 +-
 .../security/PasswordChangeDialog.tsx         |   2 +-
 web/src/components/security/SecurityRow.tsx   |   4 +-
 .../components/security/StorageSection.tsx    |   4 +-
 web/src/components/setup/EncryptionStep.tsx   |   4 +-
 web/src/components/setup/SetupRail.tsx        |   4 +-
 web/src/components/ui/button.tsx              |   2 +-
 web/src/components/ui/dialog.tsx              |   2 +-
 web/src/components/ui/dropdown-menu.tsx       |   6 +-
 web/src/components/ui/input.tsx               |   2 +-
 web/src/components/ui/number-stepper.tsx      |   2 +-
 web/src/components/ui/select.tsx              |   4 +-
 web/src/components/ui/tabs.tsx                |   4 +-
 web/src/components/ui/textarea.tsx            |   2 +-
 web/src/components/venues/DiagnosticPanel.tsx |   6 +-
 .../components/venues/InstrumentDraftRow.tsx  |   4 +-
 .../components/venues/SymbolSearchPanel.tsx   |   4 +-
 .../components/venues/VenueAccessDialog.tsx   |   2 +-
 web/src/components/venues/VenueAccessList.tsx |   2 +-
 web/src/components/venues/WarnHint.tsx        |   2 +-
 web/src/index.css                             |  40 +-
 web/src/main.tsx                              |   3 +
 web/src/pages/Account.tsx                     |   2 +-
 web/src/pages/Accounts.tsx                    |  58 +-
 web/src/pages/Assets.tsx                      |  36 +-
 web/src/pages/Audit.tsx                       |   2 +-
 web/src/pages/LimitDialog.tsx                 |  18 +-
 web/src/pages/Login.tsx                       |   2 +-
 web/src/pages/MarketData.tsx                  |  76 +--
 web/src/pages/McpAccess.tsx                   |   4 +-
 web/src/pages/OrderVerificationPanel.tsx      |  14 +-
 web/src/pages/Orders.tsx                      |  86 +--
 web/src/pages/PasswordRecovery.tsx            |   8 +-
 web/src/pages/Positions.tsx                   |  46 +-
 web/src/pages/Service.tsx                     |  38 +-
 web/src/pages/Setup.tsx                       |   4 +-
 web/src/pages/TradingConnections.tsx          |  68 +-
 web/src/pages/dashboard/widgets.tsx           |   6 +-
 66 files changed, 1047 insertions(+), 339 deletions(-)
 create mode 100644 checks/semgrep/tailwind-v4-utilities.yml
 create mode 100644 checks/semgrep/testdata/tailwind-v4-utilities.tsx

diff --git a/checks/README.md b/checks/README.md
index 4cff4148..bbd142fe 100644
--- a/checks/README.md
+++ b/checks/README.md
@@ -50,6 +50,10 @@ named `testdata` so the Go tool ignores it, and it is in the justfile's
 Fix a finding by changing the code, or by narrowing the rule if the finding
 turns out to be a rule bug - never by loosening what the rule means.
 
+`tailwind-v4-utilities` keeps vertical form spacing on flex-column gaps and
+preserves forced-colors focus outlines with `outline-hidden`. It rejects the
+earlier utility names whose behavior changed in Tailwind 4.
+
 `unapproved-entity-autocreate` (`checks/semgrep/service-go.yml`) ships without
 its `ensure$ANY(...)` branch on purpose: officer's `ensureAccount` /
 `ensureLimitAccount` / `ensureAutoCreatedAsset` family in
diff --git a/checks/semgrep/tailwind-v4-utilities.yml b/checks/semgrep/tailwind-v4-utilities.yml
new file mode 100644
index 00000000..f7f8a4a5
--- /dev/null
+++ b/checks/semgrep/tailwind-v4-utilities.yml
@@ -0,0 +1,27 @@
+# Copyright The Pit Project Owners. All rights reserved.
+# SPDX-License-Identifier: Apache-2.0
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+# Please see https://officer.openpit.dev and the OWNERS file for details.
+
+rules:
+  - id: tailwind-v4-utilities
+    message: Use flex-column gap spacing and outline-hidden to retain Tailwind v3 layout and focus behavior.
+    severity: ERROR
+    languages: [generic]
+    pattern-regex: '(?<![\w-])(?:space-y-(?:[0-9.]+|\[[^\]\r\n]+\])|outline-none)(?![\w-])'
+    paths:
+      include: ["/web/src/**"]
+      exclude: ["/checks/semgrep/testdata/**"]
+
diff --git a/checks/semgrep/testdata/tailwind-v4-utilities.tsx b/checks/semgrep/testdata/tailwind-v4-utilities.tsx
new file mode 100644
index 00000000..04333bff
--- /dev/null
+++ b/checks/semgrep/testdata/tailwind-v4-utilities.tsx
@@ -0,0 +1,26 @@
+// Copyright The Pit Project Owners. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+// Please see https://officer.openpit.dev and the OWNERS file for details.
+
+// ruleid: tailwind-v4-utilities
+const oldSpacing = "space-y-2";
+// ruleid: tailwind-v4-utilities
+const oldFocus = "focus:outline-none";
+// ok: tailwind-v4-utilities
+const spacing = "flex flex-col gap-y-2";
+// ok: tailwind-v4-utilities
+const focus = "focus:outline-hidden";
+
diff --git a/justfile b/justfile
index de0acf8b..8dbfb167 100644
--- a/justfile
+++ b/justfile
@@ -187,6 +187,7 @@ check-semgrep: install-semgrep
     {{ semgrep }} --test --config checks/semgrep/file-header-site-link.yml --metrics=off --disable-version-check checks/semgrep/testdata/file-header-site-link.txt
     {{ semgrep }} --test --config checks/semgrep/panel-access-reuse.yml --metrics=off --disable-version-check checks/semgrep/testdata/panel-access-reuse.tsx
     {{ semgrep }} --test --config checks/semgrep/no-legacy-database-probe.yml --metrics=off --disable-version-check checks/semgrep/testdata/no-legacy-database-probe.go
+    {{ semgrep }} --test --config checks/semgrep/tailwind-v4-utilities.yml --metrics=off --disable-version-check checks/semgrep/testdata/tailwind-v4-utilities.tsx
 
 # Lint all.
 [parallel]
diff --git a/web/package-lock.json b/web/package-lock.json
index f29ca67c..85cce4c7 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -30,6 +30,7 @@
       },
       "devDependencies": {
         "@eslint/js": "10.0.1",
+        "@tailwindcss/postcss": "4.3.3",
         "@testing-library/jest-dom": "6.6.3",
         "@testing-library/react": "16.1.0",
         "@testing-library/user-event": "14.5.2",
@@ -68,6 +69,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.3.0.tgz",
+      "integrity": "sha512-U4+70Pc5ZS9osnCBCE5Jha/ciHM+Yp+CNMNC/7HvYbNRk1Ldd+f7qO65W5qfhu/TCv+/ozljlXXe9Nj8419DMA==",
+      "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",
@@ -3530,6 +3544,299 @@
         "win32"
       ]
     },
+    "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/node/node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "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/postcss": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.3.3.tgz",
+      "integrity": "sha512-JTSZZGQi1AyKirbLN3azmjVzef92tcX7h+iSqPdaeStyFpGpDlKvvpxeOE8njhbUanbRwr3z8DyzhICWnMtQeg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "@tailwindcss/node": "4.3.3",
+        "@tailwindcss/oxide": "4.3.3",
+        "postcss": "^8.5.16",
+        "tailwindcss": "4.3.3"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "10.4.1",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
@@ -4570,6 +4877,16 @@
         "node": ">=6"
       }
     },
+    "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",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/detect-node-es": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
@@ -4606,6 +4923,20 @@
       "dev": true,
       "license": "ISC"
     },
+    "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": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.3.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/es-define-property": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -5171,6 +5502,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -5407,6 +5745,16 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/jiti": {
+      "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": "lib/jiti-cli.mjs"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -5526,6 +5874,279 @@
         "node": ">= 0.8.0"
       }
     },
+    "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": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "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/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": "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",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -6331,6 +6952,20 @@
       "dev": true,
       "license": "MIT"
     },
+    "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",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/tinybench": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-6.2.2.tgz",
diff --git a/web/package.json b/web/package.json
index 9e3f5216..f72dbdcc 100644
--- a/web/package.json
+++ b/web/package.json
@@ -42,6 +42,7 @@
   },
   "devDependencies": {
     "@eslint/js": "10.0.1",
+    "@tailwindcss/postcss": "4.3.3",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.1.0",
     "@testing-library/user-event": "14.5.2",
diff --git a/web/postcss.config.js b/web/postcss.config.js
index 2a3a8ad9..3912cb90 100644
--- a/web/postcss.config.js
+++ b/web/postcss.config.js
@@ -17,7 +17,6 @@
 
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
 };
diff --git a/web/src/components/AccessModePanel.tsx b/web/src/components/AccessModePanel.tsx
index 3f99d4db..e3f1f446 100644
--- a/web/src/components/AccessModePanel.tsx
+++ b/web/src/components/AccessModePanel.tsx
@@ -89,9 +89,9 @@ function AccessBoundary() {
           }}
         />
       </p>
-      <div className="space-y-1">
+      <div className="flex flex-col gap-y-1">
         <p className="font-semibold text-text">{t("access.isolation.title")}</p>
-        <ul className="list-disc space-y-0.5 pl-4">
+        <ul className="list-disc flex flex-col gap-y-0.5 pl-4">
           <li>{t("access.isolation.sandbox")}</li>
           <li>{t("access.isolation.user")}</li>
           <li>{t("access.isolation.computer")}</li>
@@ -155,7 +155,7 @@ export function NewPasswordFields({
       : undefined;
 
   return (
-    <div className="space-y-3">
+    <div className="flex flex-col gap-y-3">
       <PasswordPairFields
         password={{
           ref,
@@ -231,7 +231,7 @@ export function OpenAccessWarning({
       title={t("access.warning.title")}
     >
       <p>{t("access.warning.who")}</p>
-      <ul className="list-disc space-y-0.5 pl-5">
+      <ul className="list-disc flex flex-col gap-y-0.5 pl-5">
         <li>{t("access.warning.programs")}</li>
         <li>{t("access.warning.containers")}</li>
         <li>{t("access.warning.agents")}</li>
@@ -286,7 +286,7 @@ export function AccessModePanel({
 }) {
   const { t } = useTranslation("service");
   return (
-    <div className="space-y-4">
+    <div className="flex flex-col gap-y-4">
       <AccessBoundary />
       <ChoiceCards
         label={t("access.choice")}
@@ -313,7 +313,7 @@ export function AccessModePanel({
         disabled={disabled}
       />
       {mode === "token" ? (
-        <div className="space-y-3">
+        <div className="flex flex-col gap-y-3">
           <NewPasswordFields
             ref={passwordRef}
             onPasswordChange={onPasswordChange}
diff --git a/web/src/components/AccountDialogs.tsx b/web/src/components/AccountDialogs.tsx
index 59deaea3..33ad6c99 100644
--- a/web/src/components/AccountDialogs.tsx
+++ b/web/src/components/AccountDialogs.tsx
@@ -130,7 +130,7 @@ export function BlockAccountDialog({
           </DialogTitle>
         </DialogHeader>
         <p className="text-xs text-muted-lt">{t("blockAccount.description")}</p>
-        <div className="space-y-2">
+        <div className="flex flex-col gap-y-2">
           <Label htmlFor="block-account-reason">
             {t("blockAccount.reasonLabel")}
           </Label>
@@ -285,7 +285,7 @@ export function AccountCurrencyDialog({
             {t("editCurrency.description", { account: account.code })}
           </DialogDescription>
         </DialogHeader>
-        <div className="space-y-4">
+        <div className="flex flex-col gap-y-4">
           <div className="rounded-card border border-border bg-surface-2 p-3 text-xs">
             <p className="font-medium text-text">
               {t("editCurrency.cascadeTitle")}
@@ -312,7 +312,7 @@ export function AccountCurrencyDialog({
               {t("editCurrency.blockedHint")}
             </p>
           )}
-          <div className="space-y-2">
+          <div className="flex flex-col gap-y-2">
             <Label htmlFor="account-currency">
               {t("editCurrency.currencyLabel")}
             </Label>
diff --git a/web/src/components/AccountModeChoice.tsx b/web/src/components/AccountModeChoice.tsx
index f334f11c..609ac074 100644
--- a/web/src/components/AccountModeChoice.tsx
+++ b/web/src/components/AccountModeChoice.tsx
@@ -248,7 +248,7 @@ export function AccountModeChoice({
   };
 
   return (
-    <div className="space-y-4">
+    <div className="flex flex-col gap-y-4">
       <div>
         <StatRow
           label={t("accountMode.stored")}
@@ -274,7 +274,7 @@ export function AccountModeChoice({
           <CompactStaleState load={load} />
         </div>
       ) : (
-        <div className="space-y-3">
+        <div className="flex flex-col gap-y-3">
           <Segmented
             ariaLabel={t("accountMode.title")}
             value={choice ?? undefined}
@@ -306,7 +306,7 @@ export function AccountModeChoice({
           )}
           {listNeeded && accounts.state === "loading" && <LoadingStatus />}
           {listNeeded && accounts.state === "error" && (
-            <div className="space-y-2">
+            <div className="flex flex-col gap-y-2">
               <ErrorBanner message={accounts.error} />
               <Button
                 type="button"
@@ -335,7 +335,7 @@ export function AccountModeChoice({
             )}
           {several && (
             <>
-              <div className="space-y-2">
+              <div className="flex flex-col gap-y-2">
                 <Label htmlFor={pickerId}>{tc("fields.account")}</Label>
                 <Autocomplete
                   id={pickerId}
@@ -434,7 +434,7 @@ export function AccountModePanel({
     );
   }
   return (
-    <div className="space-y-4">
+    <div className="flex flex-col gap-y-4">
       <StaleState load={load} reload={reload} />
       <AccountModeChoice
         load={load}
diff --git a/web/src/components/AdjustmentTypeField.tsx b/web/src/components/AdjustmentTypeField.tsx
index cdbbdaee..507f93cc 100644
--- a/web/src/components/AdjustmentTypeField.tsx
+++ b/web/src/components/AdjustmentTypeField.tsx
@@ -37,7 +37,7 @@ export function AdjustmentTypeField({
   const { t } = useTranslation("positions");
 
   return (
-    <fieldset className="space-y-1.5">
+    <fieldset className="flex flex-col gap-y-1.5">
       <Label asChild>
         <legend>{t("dialog.fields.type")}</legend>
       </Label>
diff --git a/web/src/components/AuthScreen.tsx b/web/src/components/AuthScreen.tsx
index 015becb0..f660cd0f 100644
--- a/web/src/components/AuthScreen.tsx
+++ b/web/src/components/AuthScreen.tsx
@@ -44,7 +44,7 @@ export function AuthScreen({
     <div className="h-dvh w-full overflow-y-auto bg-bg text-text">
       <div className="flex min-h-full items-center justify-center p-6">
         <Card className={cn("w-full", wide ? "max-w-xl" : "max-w-md")}>
-          <CardContent className="space-y-5 pt-[var(--dens-card-pad)]">
+          <CardContent className="flex flex-col gap-y-5 pt-[var(--dens-card-pad)]">
             <div className="flex items-center gap-[var(--dens-nav-gap)]">
               <BrandLockup />
             </div>
diff --git a/web/src/components/Autocomplete.tsx b/web/src/components/Autocomplete.tsx
index 928945bd..1f1136c2 100644
--- a/web/src/components/Autocomplete.tsx
+++ b/web/src/components/Autocomplete.tsx
@@ -231,7 +231,7 @@ const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
           onKeyDown={handleKeyDown}
           className={cn(
             "flex h-9 w-full rounded-card border border-border bg-surface-2 px-3 py-1 text-sm text-text",
-            "placeholder:text-muted focus-visible:border-border-hover focus-visible:outline-none",
+            "placeholder:text-muted focus-visible:border-border-hover focus-visible:outline-hidden",
             "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg",
             "disabled:cursor-not-allowed disabled:opacity-50",
             clearable && "pr-9",
diff --git a/web/src/components/BusinessCsvDialogs.tsx b/web/src/components/BusinessCsvDialogs.tsx
index 555fe438..62e37112 100644
--- a/web/src/components/BusinessCsvDialogs.tsx
+++ b/web/src/components/BusinessCsvDialogs.tsx
@@ -151,7 +151,7 @@ export function BusinessCsvExportDialog({
           </DialogDescription>
         </DialogHeader>
 
-        <div className="space-y-1 rounded-card border border-border bg-surface-2 p-3">
+        <div className="flex flex-col gap-y-1 rounded-card border border-border bg-surface-2 p-3">
           <p className="text-[0.6875rem] font-bold uppercase tracking-[0.07em] text-muted">
             {t("businessCsv.format.heading")}
           </p>
@@ -163,7 +163,7 @@ export function BusinessCsvExportDialog({
           </code>
         </div>
 
-        <div className="space-y-1.5">
+        <div className="flex flex-col gap-y-1.5">
           <Label>{t("businessCsv.delimiterLabel")}</Label>
           <Select
             value={delimiter}
diff --git a/web/src/components/ClearableInput.tsx b/web/src/components/ClearableInput.tsx
index b89845b9..42717b54 100644
--- a/web/src/components/ClearableInput.tsx
+++ b/web/src/components/ClearableInput.tsx
@@ -39,7 +39,7 @@ export function ClearInlineButton({
       title={label}
       aria-label={label}
       tabIndex={-1}
-      className="absolute right-1.5 top-1/2 inline-flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded-badge text-muted transition-colors hover:bg-accent-dim hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      className="absolute right-1.5 top-1/2 inline-flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded-badge text-muted transition-colors hover:bg-accent-dim hover:text-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
       onMouseDown={(event) => event.preventDefault()}
       onClick={onClick}
     >
diff --git a/web/src/components/ConnectAgent.tsx b/web/src/components/ConnectAgent.tsx
index 2d5fa6d6..918d45a8 100644
--- a/web/src/components/ConnectAgent.tsx
+++ b/web/src/components/ConnectAgent.tsx
@@ -145,7 +145,11 @@ function RowField({
   actions: ReactNode;
 }) {
   return (
-    <div role="group" aria-label={label} className="min-w-0 space-y-1.5">
+    <div
+      role="group"
+      aria-label={label}
+      className="min-w-0 flex flex-col gap-y-1.5"
+    >
       <p className="text-xs text-muted">{label}</p>
       <div className="flex items-center gap-2">
         <p className="min-w-0 flex-1 break-all rounded-card border border-border bg-surface-2 px-2 py-1.5 font-mono text-[0.6875rem] text-text">
@@ -202,7 +206,7 @@ export function ConnectAgent() {
       : maskAccessToken("agent", token.data);
     snippetToken = { shown: shownToken, copied: token.data };
     access = (
-      <div className="space-y-1.5">
+      <div className="flex flex-col gap-y-1.5">
         <div className="grid gap-3 sm:grid-cols-2">
           <RowField
             label={t("connect.address")}
@@ -243,8 +247,8 @@ export function ConnectAgent() {
   };
 
   return (
-    <Card className="space-y-3 p-4">
-      <div className="space-y-1">
+    <Card className="flex flex-col gap-y-3 p-4">
+      <div className="flex flex-col gap-y-1">
         <p className="text-sm font-medium text-text">{t("connect.title")}</p>
         <p className="text-xs text-muted-lt">{t("connect.subtitle")}</p>
       </div>
@@ -273,7 +277,7 @@ export function ConnectAgent() {
       {/* While the token loads or after it failed, the token-carrying
           snippets stay hidden: the status above says which. */}
       {tab === "claude" && (
-        <div className="space-y-3">
+        <div className="flex flex-col gap-y-3">
           {snippetToken !== null && (
             <>
               {tokenSnippet(
@@ -281,7 +285,7 @@ export function ConnectAgent() {
                 claudeMcpAddCommand,
                 snippetToken,
               )}
-              <div className="space-y-1.5">
+              <div className="flex flex-col gap-y-1.5">
                 {tokenSnippet(
                   t("connect.claude.desktopLabel"),
                   claudeDesktopConfig,
@@ -335,13 +339,13 @@ export function ConnectAgent() {
         )}
 
       {tab === "chatgpt" && (
-        <div className="space-y-3">
+        <div className="flex flex-col gap-y-3">
           <CopyableSnippet
             label={t("connect.chatgpt.urlLabel")}
             text={url}
             rows={2}
           />
-          <ol className="list-decimal space-y-1 pl-5 text-xs text-muted-lt">
+          <ol className="list-decimal flex flex-col gap-y-1 pl-5 text-xs text-muted-lt">
             <li>{t("connect.chatgpt.step1")}</li>
             <li>{t("connect.chatgpt.step2")}</li>
             <li>{t("connect.chatgpt.step3")}</li>
diff --git a/web/src/components/CopyableSnippet.tsx b/web/src/components/CopyableSnippet.tsx
index d8c8707e..5c3a4474 100644
--- a/web/src/components/CopyableSnippet.tsx
+++ b/web/src/components/CopyableSnippet.tsx
@@ -58,7 +58,7 @@ export function CopyableSnippet({
         };
 
   return (
-    <div className={cn("space-y-1.5", className)}>
+    <div className={cn("flex flex-col gap-y-1.5", className)}>
       {label ? (
         <div className="flex items-center justify-between gap-3">
           <p className="text-xs text-muted">{label}</p>
@@ -73,7 +73,7 @@ export function CopyableSnippet({
         value={text}
         onCopy={onCopy}
         spellCheck={false}
-        className="w-full resize-none select-all rounded-card border border-border bg-surface-2 p-2 font-mono text-[0.6875rem] text-muted-lt focus:outline-none focus:ring-1 focus:ring-ring"
+        className="w-full resize-none select-all rounded-card border border-border bg-surface-2 p-2 font-mono text-[0.6875rem] text-muted-lt focus:outline-hidden focus:ring-1 focus:ring-ring"
         aria-label={label ?? t("states.copyableSnippet")}
       />
     </div>
diff --git a/web/src/components/MasterKeyGuide.tsx b/web/src/components/MasterKeyGuide.tsx
index 413b85c4..53921b6a 100644
--- a/web/src/components/MasterKeyGuide.tsx
+++ b/web/src/components/MasterKeyGuide.tsx
@@ -165,7 +165,7 @@ function GuideStep({
       >
         {number}
       </span>
-      <div className="min-w-0 space-y-1.5">
+      <div className="min-w-0 flex flex-col gap-y-1.5">
         <p className="text-sm font-medium text-text">{title}</p>
         <p
           className={cn(
@@ -208,7 +208,7 @@ export function MasterKeyGuide() {
     const shell: Shell = system === "windows" ? "powershell" : "posix";
     const commands = COMMANDS[deployment][shell];
     steps = (
-      <ol className="space-y-3">
+      <ol className="flex flex-col gap-y-3">
         <GuideStep
           number={1}
           title={t("masterKeyGuide.create.title")}
@@ -270,7 +270,7 @@ export function MasterKeyGuide() {
   }
 
   return (
-    <div className="space-y-3 rounded-card border border-border p-3">
+    <div className="flex flex-col gap-y-3 rounded-card border border-border p-3">
       <div className="flex flex-wrap items-center justify-between gap-2">
         <p className="text-[0.6875rem] font-medium uppercase tracking-[0.07em] text-muted">
           {t("masterKeyGuide.where")}
diff --git a/web/src/components/Notice.tsx b/web/src/components/Notice.tsx
index 99259add..e306956d 100644
--- a/web/src/components/Notice.tsx
+++ b/web/src/components/Notice.tsx
@@ -92,7 +92,9 @@ export function Notice({
       <div className="min-w-0 flex-1">
         <p className={cn("font-semibold", TONES[tone].title)}>{title}</p>
         {children !== undefined && children !== null && (
-          <div className={cn("space-y-1 text-xs", TONES[tone].detail)}>
+          <div
+            className={cn("flex flex-col gap-y-1 text-xs", TONES[tone].detail)}
+          >
             {children}
           </div>
         )}
diff --git a/web/src/components/Page.tsx b/web/src/components/Page.tsx
index 816925cd..1181945c 100644
--- a/web/src/components/Page.tsx
+++ b/web/src/components/Page.tsx
@@ -34,7 +34,7 @@ export function Page({
     <div className="flex h-full min-h-0 flex-col">
       <TopBar title={title} actions={actions} />
       <main className="min-h-0 flex-1 overflow-y-auto bg-bg px-[var(--dens-page-pad)] py-[calc(var(--dens-page-pad)*0.75)]">
-        <div className="mx-auto w-full max-w-[var(--content-max)] space-y-[var(--dens-row-gap)]">
+        <div className="mx-auto flex w-full max-w-[var(--content-max)] flex-col gap-y-[var(--dens-row-gap)]">
           <PendingRestartBanner />
           <SensitiveDataBanner />
           {children}
diff --git a/web/src/components/PageStates.tsx b/web/src/components/PageStates.tsx
index 3c731149..65d6e441 100644
--- a/web/src/components/PageStates.tsx
+++ b/web/src/components/PageStates.tsx
@@ -41,7 +41,7 @@ export function TableSkeleton({
       aria-label={t("states.loading")}
       className="animate-pulse"
     >
-      <CardContent className="space-y-3 py-5">
+      <CardContent className="flex flex-col gap-y-3 py-5">
         {Array.from({ length: rows }).map((_, r) => (
           <div key={r} className="flex gap-4">
             {Array.from({ length: cols }).map((_, c) => (
@@ -94,7 +94,7 @@ export function ErrorState({
     <Card className="animate-fade-in">
       <CardContent className="flex flex-col items-center gap-4 py-12 text-center">
         <AlertTriangle className="h-8 w-8 text-[var(--danger)]" />
-        <div className="space-y-1">
+        <div className="flex flex-col gap-y-1">
           <p className="text-sm font-bold text-text">
             {title ?? t("states.loadError")}
           </p>
@@ -145,7 +145,7 @@ export function EmptyState({
     <Card className="animate-fade-in">
       <CardContent className="flex flex-col items-center gap-4 py-12 text-center">
         <Inbox className="h-8 w-8 text-muted" />
-        <div className="space-y-1">
+        <div className="flex flex-col gap-y-1">
           <p className="text-sm font-bold text-text">{title}</p>
           <p className="max-w-md text-xs text-muted-lt">{hint}</p>
         </div>
diff --git a/web/src/components/SidebarExtras.tsx b/web/src/components/SidebarExtras.tsx
index 6b75e96d..46583321 100644
--- a/web/src/components/SidebarExtras.tsx
+++ b/web/src/components/SidebarExtras.tsx
@@ -176,7 +176,7 @@ export function AboutNavEntry() {
           <DialogTitle>{t("about.title")}</DialogTitle>
           <DialogDescription>{t("about.description")}</DialogDescription>
         </DialogHeader>
-        <div className="space-y-4 text-sm">
+        <div className="flex flex-col gap-y-4 text-sm">
           <div className="rounded-card border border-border bg-surface-2 p-3">
             <div className="text-[0.6875rem] font-bold uppercase tracking-[0.07em] text-muted">
               {t("about.product")}
diff --git a/web/src/components/SigningKeysPanel.tsx b/web/src/components/SigningKeysPanel.tsx
index 091458ce..1c2cb60e 100644
--- a/web/src/components/SigningKeysPanel.tsx
+++ b/web/src/components/SigningKeysPanel.tsx
@@ -104,7 +104,7 @@ function ActiveKeyCard({ activeKey }: { activeKey: SigningKey | null }) {
       <CardHeader>
         <CardTitle>{t("currentKey.sectionTitle")}</CardTitle>
       </CardHeader>
-      <CardContent className="space-y-4">
+      <CardContent className="flex flex-col gap-y-4">
         {activeKey === null ? (
           <p className="text-xs text-muted-lt">{t("currentKey.empty")}</p>
         ) : (
@@ -135,7 +135,7 @@ function ActiveKeyCard({ activeKey }: { activeKey: SigningKey | null }) {
               mono={false}
             />
 
-            <div className="space-y-2 pt-1">
+            <div className="flex flex-col gap-y-2 pt-1">
               <Label className="text-xs text-muted">
                 {t("currentKey.export.label")}
               </Label>
@@ -240,7 +240,7 @@ function ManageKeyCard({ onDone }: { onDone: () => void }) {
       <CardHeader>
         <CardTitle>{t("manageKey.sectionTitle")}</CardTitle>
       </CardHeader>
-      <CardContent className="space-y-4">
+      <CardContent className="flex flex-col gap-y-4">
         {/* Mode toggle */}
         <div className="flex w-fit gap-1 rounded-card border border-border bg-surface-2 p-1">
           {(["generate", "import"] as const).map((m) => (
@@ -287,8 +287,8 @@ function ManageKeyCard({ onDone }: { onDone: () => void }) {
         )}
 
         {mode === "import" && (
-          <div className="space-y-3">
-            <div className="space-y-1.5">
+          <div className="flex flex-col gap-y-3">
+            <div className="flex flex-col gap-y-1.5">
               <Label className="text-xs">{t("manageKey.importFormat")}</Label>
               <Select
                 value={importFormat}
@@ -311,7 +311,7 @@ function ManageKeyCard({ onDone }: { onDone: () => void }) {
                 </SelectContent>
               </Select>
             </div>
-            <div className="space-y-1.5">
+            <div className="flex flex-col gap-y-1.5">
               <Label className="text-xs">{t("manageKey.importKeyLabel")}</Label>
               <Textarea
                 value={importKey}
@@ -401,7 +401,7 @@ function ESignCard({
       <CardHeader>
         <CardTitle>{t("eSign.sectionTitle")}</CardTitle>
       </CardHeader>
-      <CardContent className="space-y-3">
+      <CardContent className="flex flex-col gap-y-3">
         <label className="flex cursor-pointer items-center gap-3 select-none">
           <input
             type="checkbox"
@@ -529,7 +529,7 @@ export function SigningKeysPanel({
       {load.state === "loading" && <TableSkeleton rows={3} cols={1} />}
 
       {load.state === "ready" && (
-        <div className="space-y-4">
+        <div className="flex flex-col gap-y-4">
           <ActiveKeyCard activeKey={activeKey} />
 
           <ManageKeyCard onDone={refresh} />
diff --git a/web/src/components/TextField.tsx b/web/src/components/TextField.tsx
index ba709e63..456cd339 100644
--- a/web/src/components/TextField.tsx
+++ b/web/src/components/TextField.tsx
@@ -56,7 +56,7 @@ export function TextField({
 }) {
   const errorId = `${id}-error`;
   return (
-    <div className="space-y-2">
+    <div className="flex flex-col gap-y-2">
       <Label htmlFor={id}>{label}</Label>
       <Input
         ref={ref}
diff --git a/web/src/components/dashboard/DashboardStatusCard.tsx b/web/src/components/dashboard/DashboardStatusCard.tsx
index a0d021e5..585662ef 100644
--- a/web/src/components/dashboard/DashboardStatusCard.tsx
+++ b/web/src/components/dashboard/DashboardStatusCard.tsx
@@ -48,7 +48,7 @@ export function DashboardStatusCard<T>({
     <button
       type="button"
       onClick={() => navigate(to)}
-      className="animate-fade-in w-full cursor-pointer rounded-card text-left hover:bg-accent-dim focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      className="animate-fade-in w-full cursor-pointer rounded-card text-left hover:bg-accent-dim focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
     >
       <Card className="pointer-events-none">
         <CardContent className="flex flex-wrap items-center gap-2 py-3">
diff --git a/web/src/components/data/FilterBar.tsx b/web/src/components/data/FilterBar.tsx
index 250ef4c9..43f86e79 100644
--- a/web/src/components/data/FilterBar.tsx
+++ b/web/src/components/data/FilterBar.tsx
@@ -101,7 +101,7 @@ export function FilterBar({
               {onClearActive !== undefined && (
                 <button
                   type="button"
-                  className="-mr-1 ml-1 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-badge text-accent transition-colors hover:bg-accent-dim hover:text-accent-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                  className="-mr-1 ml-1 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-badge text-accent transition-colors hover:bg-accent-dim hover:text-accent-2 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
                   onClick={onClearActive}
                   title={clearActiveLabel}
                   aria-label={clearActiveLabel}
@@ -164,7 +164,7 @@ function GlobalFilterToggle({
       aria-pressed={active}
       disabled={disabled}
       className={cn(
-        "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-card border text-muted transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+        "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-card border text-muted transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
         active
           ? "border-accent bg-accent-dim text-accent"
           : "border-border bg-transparent hover:border-border-hover hover:bg-card-hover-bg hover:text-accent",
@@ -430,7 +430,7 @@ export function FilterChip({
       {onRemove !== undefined && (
         <button
           type="button"
-          className="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-badge text-muted transition-colors hover:bg-accent-dim hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          className="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-badge text-muted transition-colors hover:bg-accent-dim hover:text-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
           onClick={onRemove}
           title={removeLabel}
           aria-label={removeLabel}
diff --git a/web/src/components/data/RowActions.tsx b/web/src/components/data/RowActions.tsx
index 09b8b666..e2af3ff4 100644
--- a/web/src/components/data/RowActions.tsx
+++ b/web/src/components/data/RowActions.tsx
@@ -113,7 +113,7 @@ export function ActionButton({
       aria-label={title}
       disabled={disabled}
       className={cn(
-        "inline-flex shrink-0 items-center justify-center rounded-badge bg-transparent text-muted transition-colors hover:bg-accent-dim hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "inline-flex shrink-0 items-center justify-center rounded-badge bg-transparent text-muted transition-colors hover:bg-accent-dim hover:text-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
         active && "bg-accent-dim text-accent",
         danger && "hover:bg-[var(--danger-dim)] hover:text-[var(--danger)]",
         disabled &&
diff --git a/web/src/components/data/SortableHeader.tsx b/web/src/components/data/SortableHeader.tsx
index 3be33eba..93336dd8 100644
--- a/web/src/components/data/SortableHeader.tsx
+++ b/web/src/components/data/SortableHeader.tsx
@@ -97,7 +97,7 @@ export function SortableHeader({
       aria-label={`Sort by ${label}`}
       aria-pressed={active}
       className={cn(
-        "sortable-header inline-flex min-w-0 max-w-full cursor-pointer select-none items-center gap-1 text-[0.6875rem] font-bold uppercase tracking-[0.07em] transition-colors hover:text-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "sortable-header inline-flex min-w-0 max-w-full cursor-pointer select-none items-center gap-1 text-[0.6875rem] font-bold uppercase tracking-[0.07em] transition-colors hover:text-text focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
         align === "right" && "justify-end",
         active ? "text-accent" : "text-muted",
       )}
diff --git a/web/src/components/security/AccessSection.tsx b/web/src/components/security/AccessSection.tsx
index a04bf2d9..44f52bb9 100644
--- a/web/src/components/security/AccessSection.tsx
+++ b/web/src/components/security/AccessSection.tsx
@@ -118,7 +118,7 @@ function OpenAccess() {
 
   return (
     <SecurityRow label={t("security.access.mode")}>
-      <div className="space-y-4">
+      <div className="flex flex-col gap-y-4">
         <AccessModePanel
           key={attempt}
           mode={mode}
diff --git a/web/src/components/security/PasswordChangeDialog.tsx b/web/src/components/security/PasswordChangeDialog.tsx
index 74b157db..187787de 100644
--- a/web/src/components/security/PasswordChangeDialog.tsx
+++ b/web/src/components/security/PasswordChangeDialog.tsx
@@ -125,7 +125,7 @@ export function PasswordChangeDialog({
           </DialogDescription>
         </DialogHeader>
         <form
-          className="space-y-4"
+          className="flex flex-col gap-y-4"
           onSubmit={(event) => {
             event.preventDefault();
             void change();
diff --git a/web/src/components/security/SecurityRow.tsx b/web/src/components/security/SecurityRow.tsx
index 73a00542..7e4bafdc 100644
--- a/web/src/components/security/SecurityRow.tsx
+++ b/web/src/components/security/SecurityRow.tsx
@@ -49,7 +49,9 @@ export function SecurityRow({
       <p id={labelId} className="text-sm font-medium text-text">
         {label}
       </p>
-      <div className="min-w-0 space-y-1 text-xs text-muted-lt">{children}</div>
+      <div className="min-w-0 flex flex-col gap-y-1 text-xs text-muted-lt">
+        {children}
+      </div>
       {actions !== undefined && (
         <div className="flex flex-wrap items-center gap-1.5 sm:justify-end">
           {actions}
diff --git a/web/src/components/security/StorageSection.tsx b/web/src/components/security/StorageSection.tsx
index 879b44b2..a3e05cbf 100644
--- a/web/src/components/security/StorageSection.tsx
+++ b/web/src/components/security/StorageSection.tsx
@@ -62,7 +62,7 @@ function EncryptionRow({ storage }: { storage: LoadState<CredentialStorage> }) {
             <CompactStaleState load={storage} />
           </div>
         ) : (
-          <div className="space-y-2">
+          <div className="flex flex-col gap-y-2">
             <div className="flex flex-wrap items-center gap-2">
               <Badge variant="warn">
                 <LockOpen aria-hidden="true" className="h-3 w-3" />
@@ -153,7 +153,7 @@ export function StorageSection() {
       <CardHeader>
         <CardTitle>{t("security.storage.title")}</CardTitle>
       </CardHeader>
-      <CardContent className="space-y-3">
+      <CardContent className="flex flex-col gap-y-3">
         {storage.state === "ready" && storage.data.resealedSecrets > 0 && (
           <ExposedSecretsNotice count={storage.data.resealedSecrets} />
         )}
diff --git a/web/src/components/setup/EncryptionStep.tsx b/web/src/components/setup/EncryptionStep.tsx
index c5cc6e7e..cf4de745 100644
--- a/web/src/components/setup/EncryptionStep.tsx
+++ b/web/src/components/setup/EncryptionStep.tsx
@@ -85,7 +85,7 @@ export function EncryptionStep({
   const { t } = useTranslation("setup");
   const { t: ts } = useTranslation("service");
   return (
-    <div className="space-y-4">
+    <div className="flex flex-col gap-y-4">
       {choice !== null && (
         <ChoiceCards
           label={t("encryption.title")}
@@ -110,7 +110,7 @@ export function EncryptionStep({
         />
       )}
       {choice === "key" && (
-        <div className="space-y-4">
+        <div className="flex flex-col gap-y-4">
           {/* Once sealed, its commands would overwrite the key in force. */}
           {storage.state === "ready" && !sealed && <MasterKeyGuide />}
           {/* One live region for both states, so sealing is announced. */}
diff --git a/web/src/components/setup/SetupRail.tsx b/web/src/components/setup/SetupRail.tsx
index e64500e9..7b51d365 100644
--- a/web/src/components/setup/SetupRail.tsx
+++ b/web/src/components/setup/SetupRail.tsx
@@ -52,14 +52,14 @@ export function SetupRail({
   const titleId = useId();
   return (
     <aside className="flex shrink-0 flex-col gap-5 border-b border-border bg-surface px-3 py-4 md:w-64 md:overflow-y-auto md:border-b-0 md:border-r">
-      <nav aria-labelledby={titleId} className="space-y-2">
+      <nav aria-labelledby={titleId} className="flex flex-col gap-y-2">
         <p
           id={titleId}
           className="px-2 text-[0.6875rem] font-medium uppercase tracking-[0.07em] text-muted"
         >
           {review ? ts("security.guide.label") : t("firstStart")}
         </p>
-        <ol className="space-y-0.5">
+        <ol className="flex flex-col gap-y-0.5">
           {WIZARD_STEPS.map((id, index) => {
             const passed = index < current;
             const here = index === current;
diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx
index f605236c..8c26d341 100644
--- a/web/src/components/ui/button.tsx
+++ b/web/src/components/ui/button.tsx
@@ -22,7 +22,7 @@ import { forwardRef, type ButtonHTMLAttributes } from "react";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-card text-xs font-medium transition-[background-color,border-color,color] duration-[180ms] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-[var(--dens-button-glyph)] [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-card text-xs font-medium transition-[background-color,border-color,color] duration-[180ms] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-[var(--dens-button-glyph)] [&_svg]:shrink-0",
   {
     variants: {
       variant: {
diff --git a/web/src/components/ui/dialog.tsx b/web/src/components/ui/dialog.tsx
index a08d98e1..bdb39e85 100644
--- a/web/src/components/ui/dialog.tsx
+++ b/web/src/components/ui/dialog.tsx
@@ -97,7 +97,7 @@ const DialogContent = forwardRef<
             <DialogPrimitive.Close
               className={cn(
                 "absolute right-4 top-4 rounded-badge p-1 text-muted transition-colors",
-                "hover:bg-accent-dim hover:text-accent focus-visible:outline-none",
+                "hover:bg-accent-dim hover:text-accent focus-visible:outline-hidden",
                 "focus-visible:ring-2 focus-visible:ring-ring",
               )}
               aria-label={t("actions.close")}
diff --git a/web/src/components/ui/dropdown-menu.tsx b/web/src/components/ui/dropdown-menu.tsx
index 9a782309..2fdf38ad 100644
--- a/web/src/components/ui/dropdown-menu.tsx
+++ b/web/src/components/ui/dropdown-menu.tsx
@@ -60,7 +60,7 @@ const DropdownMenuItem = forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-pointer select-none items-center gap-2 rounded-badge px-2 py-1.5 text-sm outline-none transition-colors duration-[180ms]",
+      "relative flex cursor-pointer select-none items-center gap-2 rounded-badge px-2 py-1.5 text-sm outline-hidden transition-colors duration-[180ms]",
       "focus:bg-accent-dim focus:text-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
@@ -78,7 +78,7 @@ const DropdownMenuRadioItem = forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-pointer select-none items-center gap-2 rounded-badge py-1.5 pl-7 pr-2 text-sm outline-none transition-colors duration-[180ms]",
+      "relative flex cursor-pointer select-none items-center gap-2 rounded-badge py-1.5 pl-7 pr-2 text-sm outline-hidden transition-colors duration-[180ms]",
       "focus:bg-accent-dim focus:text-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
@@ -102,7 +102,7 @@ const DropdownMenuCheckboxItem = forwardRef<
     ref={ref}
     checked={checked}
     className={cn(
-      "relative flex cursor-pointer select-none items-center gap-2 rounded-badge py-1.5 pl-7 pr-2 text-sm outline-none transition-colors duration-[180ms]",
+      "relative flex cursor-pointer select-none items-center gap-2 rounded-badge py-1.5 pl-7 pr-2 text-sm outline-hidden transition-colors duration-[180ms]",
       "focus:bg-accent-dim focus:text-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
diff --git a/web/src/components/ui/input.tsx b/web/src/components/ui/input.tsx
index 277eb892..74c97756 100644
--- a/web/src/components/ui/input.tsx
+++ b/web/src/components/ui/input.tsx
@@ -31,7 +31,7 @@ const Input = forwardRef<
         ? "accent-[var(--accent)]"
         : [
             "flex h-[var(--dens-field-h)] w-full rounded-card border border-border bg-surface-2 px-[var(--dens-field-px)] py-1 text-[length:var(--dens-field-fz)] text-text",
-            "placeholder:text-muted focus-visible:border-border-hover focus-visible:outline-none",
+            "placeholder:text-muted focus-visible:border-border-hover focus-visible:outline-hidden",
             "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg",
           ],
       "disabled:cursor-not-allowed disabled:opacity-50",
diff --git a/web/src/components/ui/number-stepper.tsx b/web/src/components/ui/number-stepper.tsx
index 1a41cb06..907bbc3b 100644
--- a/web/src/components/ui/number-stepper.tsx
+++ b/web/src/components/ui/number-stepper.tsx
@@ -164,7 +164,7 @@ export const NumberStepper = forwardRef<HTMLInputElement, NumberStepperProps>(
             title={clearLabel ?? t("filters.clearField")}
             aria-label={clearLabel ?? t("filters.clearField")}
             tabIndex={-1}
-            className="absolute right-7 top-1/2 inline-flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded-badge text-muted transition-colors hover:bg-accent-dim hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            className="absolute right-7 top-1/2 inline-flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded-badge text-muted transition-colors hover:bg-accent-dim hover:text-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
             onMouseDown={(event) => event.preventDefault()}
             onClick={() => {
               setDraftValue("");
diff --git a/web/src/components/ui/select.tsx b/web/src/components/ui/select.tsx
index 5292421c..d426b48a 100644
--- a/web/src/components/ui/select.tsx
+++ b/web/src/components/ui/select.tsx
@@ -37,7 +37,7 @@ const SelectTrigger = forwardRef<
     className={cn(
       "flex h-[var(--dens-field-h)] w-full items-center justify-between gap-2 rounded-card border",
       "border-border bg-surface-2 px-[var(--dens-field-px)] py-1 text-[length:var(--dens-field-fz)] text-text",
-      "focus:border-border-hover focus:outline-none focus:ring-2 focus:ring-ring",
+      "focus:border-border-hover focus:outline-hidden focus:ring-2 focus:ring-ring",
       "focus:ring-offset-2 focus:ring-offset-bg disabled:cursor-not-allowed",
       "disabled:opacity-50 data-[placeholder]:text-muted",
       className,
@@ -85,7 +85,7 @@ const SelectItem = forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-pointer select-none items-center rounded-badge py-1.5",
-      "pl-7 pr-2 text-sm outline-none focus:bg-accent-dim focus:text-accent",
+      "pl-7 pr-2 text-sm outline-hidden focus:bg-accent-dim focus:text-accent",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
diff --git a/web/src/components/ui/tabs.tsx b/web/src/components/ui/tabs.tsx
index dd9e4670..a229d7bd 100644
--- a/web/src/components/ui/tabs.tsx
+++ b/web/src/components/ui/tabs.tsx
@@ -59,7 +59,7 @@ const TabsTrigger = forwardRef<
       "inline-flex items-center gap-1.5 rounded-badge px-3 py-1 text-xs font-medium transition-colors duration-[180ms]",
       "text-muted-lt hover:bg-surface-hover hover:text-text",
       "data-[state=active]:bg-accent-dim data-[state=active]:text-accent",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
       "focus-visible:ring-offset-2 focus-visible:ring-offset-bg",
       "disabled:pointer-events-none disabled:opacity-50",
       className,
@@ -80,7 +80,7 @@ const TabsContent = forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
       "focus-visible:ring-offset-2 focus-visible:ring-offset-bg",
       className,
     )}
diff --git a/web/src/components/ui/textarea.tsx b/web/src/components/ui/textarea.tsx
index 58f68d2e..6250414a 100644
--- a/web/src/components/ui/textarea.tsx
+++ b/web/src/components/ui/textarea.tsx
@@ -27,7 +27,7 @@ const Textarea = forwardRef<
     ref={ref}
     className={cn(
       "flex min-h-[var(--dens-textarea-min-h)] w-full rounded-card border border-border bg-surface-2 px-[var(--dens-field-px)] py-2 text-[length:var(--dens-field-fz)] text-text",
-      "placeholder:text-muted focus-visible:border-border-hover focus-visible:outline-none",
+      "placeholder:text-muted focus-visible:border-border-hover focus-visible:outline-hidden",
       "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg",
       "disabled:cursor-not-allowed disabled:opacity-50",
       className,
diff --git a/web/src/components/venues/DiagnosticPanel.tsx b/web/src/components/venues/DiagnosticPanel.tsx
index c5e1c8ed..dc30834f 100644
--- a/web/src/components/venues/DiagnosticPanel.tsx
+++ b/web/src/components/venues/DiagnosticPanel.tsx
@@ -100,7 +100,7 @@ function DiagnosticGroup({
       <p className="mb-1.5 text-xs font-medium uppercase tracking-wide text-muted">
         {title}
       </p>
-      <div className="space-y-2">
+      <div className="flex flex-col gap-y-2">
         {items.map((d) => (
           <div
             key={[
@@ -287,7 +287,7 @@ function DiagnosticPanelBody({
     (d) => d.kind === "environment" || d.kind === "provider",
   );
   return (
-    <div className="space-y-2">
+    <div className="flex flex-col gap-y-2">
       <div className="flex flex-wrap items-center gap-2">
         <Badge variant={summaryVariant}>{items.length}</Badge>
         <span className="text-sm font-medium text-text">
@@ -310,7 +310,7 @@ function DiagnosticPanelBody({
         aria-label={t("diagnostics.title")}
         className={DIAGNOSTICS_PANEL_CLASS}
       >
-        <div className="space-y-4">
+        <div className="flex flex-col gap-y-4">
           <DiagnosticGroup
             title={t("diagnostics.groupActionNeeded")}
             items={configGroup}
diff --git a/web/src/components/venues/InstrumentDraftRow.tsx b/web/src/components/venues/InstrumentDraftRow.tsx
index 00328a8f..d6b42b77 100644
--- a/web/src/components/venues/InstrumentDraftRow.tsx
+++ b/web/src/components/venues/InstrumentDraftRow.tsx
@@ -101,7 +101,7 @@ export function InstrumentDraftRow({
           </Button>
         )}
       </div>
-      <div className="space-y-1">
+      <div className="flex flex-col gap-y-1">
         {baseSuggestions ? (
           <Autocomplete
             value={draft.baseAsset}
@@ -127,7 +127,7 @@ export function InstrumentDraftRow({
           failed={baseSuggestionsFailed === true}
         />
       </div>
-      <div className="space-y-1">
+      <div className="flex flex-col gap-y-1">
         <div className="flex items-center gap-2">
           <div className="min-w-0 flex-1">
             {quoteSuggestions ? (
diff --git a/web/src/components/venues/SymbolSearchPanel.tsx b/web/src/components/venues/SymbolSearchPanel.tsx
index 5ae8e5fe..3a9b6f0c 100644
--- a/web/src/components/venues/SymbolSearchPanel.tsx
+++ b/web/src/components/venues/SymbolSearchPanel.tsx
@@ -83,7 +83,7 @@ export function SymbolSearchPanel<Match>({
         );
 
   return (
-    <div className="space-y-2 rounded-card border border-border bg-bg/50 p-3">
+    <div className="flex flex-col gap-y-2 rounded-card border border-border bg-bg/50 p-3">
       <Label htmlFor={id}>{label}</Label>
       <div className="flex gap-2">
         <div className="min-w-0 flex-1">
@@ -121,7 +121,7 @@ export function SymbolSearchPanel<Match>({
         <p className="text-xs text-muted">{noResultsText}</p>
       )}
       {results.length > 0 && (
-        <div className="space-y-2">
+        <div className="flex flex-col gap-y-2">
           <ClearableInput
             value={filterQuery}
             onClear={() => onFilterChange("")}
diff --git a/web/src/components/venues/VenueAccessDialog.tsx b/web/src/components/venues/VenueAccessDialog.tsx
index 9bc08878..ea49afb7 100644
--- a/web/src/components/venues/VenueAccessDialog.tsx
+++ b/web/src/components/venues/VenueAccessDialog.tsx
@@ -190,7 +190,7 @@ function AccessCells({
       : "";
   return (
     <>
-      <TableCell className="space-y-1 align-top text-xs">
+      <TableCell className="flex flex-col gap-y-1 align-top text-xs">
         <p>{accessState(t, subject, group, row)}</p>
         {row.ownGrant !== null && row.ownGrant.venueAccount !== "" && (
           <>
diff --git a/web/src/components/venues/VenueAccessList.tsx b/web/src/components/venues/VenueAccessList.tsx
index 62061a74..4d205aa8 100644
--- a/web/src/components/venues/VenueAccessList.tsx
+++ b/web/src/components/venues/VenueAccessList.tsx
@@ -121,7 +121,7 @@ export function VenueAccessList({
   );
 
   return (
-    <div className="space-y-3">
+    <div className="flex flex-col gap-y-3">
       <div className="flex flex-wrap items-center justify-between gap-2">
         <p className="text-xs text-muted">
           {t("access.accountCount", { count: grants.length - groupCount })}
diff --git a/web/src/components/venues/WarnHint.tsx b/web/src/components/venues/WarnHint.tsx
index 41035869..4316e9de 100644
--- a/web/src/components/venues/WarnHint.tsx
+++ b/web/src/components/venues/WarnHint.tsx
@@ -24,7 +24,7 @@ export type WarnHintProps = { reason: string } & LinkButtonProps;
 /** States a warning, then offers the one way to act on it. */
 export function WarnHint({ reason, ...action }: WarnHintProps) {
   return (
-    <div className="space-y-2 text-xs text-[var(--warn)]">
+    <div className="flex flex-col gap-y-2 text-xs text-[var(--warn)]">
       <p>{reason}</p>
       <LinkButton {...action} />
     </div>
diff --git a/web/src/index.css b/web/src/index.css
index d4168a03..54a76a00 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -17,15 +17,8 @@ limitations under the License.
 Please see https://officer.openpit.dev and the OWNERS file for details.
 */
 
-/* JetBrains Mono bundled locally (no external CDN). Font: OFL-1.1; tooling:
-   MIT. */
-@import "@fontsource/jetbrains-mono/400.css";
-@import "@fontsource/jetbrains-mono/500.css";
-@import "@fontsource/jetbrains-mono/700.css";
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@config "../tailwind.config.ts";
 
 /* Palette bound to .dark / .light classes (toggled by ThemeProvider) rather
    than prefers-color-scheme, to support the tri-state switch. Dark default. */
@@ -391,6 +384,11 @@ Please see https://officer.openpit.dev and the OWNERS file for details.
     font: inherit;
   }
 
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+
   .tracking-tight {
     letter-spacing: 0;
   }
@@ -644,23 +642,17 @@ Please see https://officer.openpit.dev and the OWNERS file for details.
     gap: var(--dens-row-gap);
   }
 
-  [data-density="terminal"] .space-y-1 > :not([hidden]) ~ :not([hidden]),
-  [data-density="terminal"] .space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-y-reverse: 0;
-    margin-bottom: calc(2px * var(--tw-space-y-reverse));
-    margin-top: calc(2px * calc(1 - var(--tw-space-y-reverse)));
+  [data-density="terminal"] .gap-y-1,
+  [data-density="terminal"] .gap-y-1\.5 {
+    row-gap: 2px;
   }
-  [data-density="terminal"] .space-y-2 > :not([hidden]) ~ :not([hidden]),
-  [data-density="terminal"] .space-y-3 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-y-reverse: 0;
-    margin-bottom: calc(4px * var(--tw-space-y-reverse));
-    margin-top: calc(4px * calc(1 - var(--tw-space-y-reverse)));
+  [data-density="terminal"] .gap-y-2,
+  [data-density="terminal"] .gap-y-3 {
+    row-gap: 4px;
   }
-  [data-density="terminal"] .space-y-4 > :not([hidden]) ~ :not([hidden]),
-  [data-density="terminal"] .space-y-5 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-y-reverse: 0;
-    margin-bottom: calc(var(--dens-row-gap) * var(--tw-space-y-reverse));
-    margin-top: calc(var(--dens-row-gap) * calc(1 - var(--tw-space-y-reverse)));
+  [data-density="terminal"] .gap-y-4,
+  [data-density="terminal"] .gap-y-5 {
+    row-gap: var(--dens-row-gap);
   }
 
   [data-density="terminal"] .text-sm {
diff --git a/web/src/main.tsx b/web/src/main.tsx
index 9b3251c0..837dca7d 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -26,6 +26,9 @@ import { LocaleProvider } from "@/i18n/LocaleProvider";
 import { checkSession } from "@/lib/panelSession";
 import { DisplayPreferencesProvider } from "@/theme/DisplayPreferencesProvider";
 import { ThemeProvider } from "@/theme/ThemeProvider";
+import "@fontsource/jetbrains-mono/400.css";
+import "@fontsource/jetbrains-mono/500.css";
+import "@fontsource/jetbrains-mono/700.css";
 import "@/index.css";
 import "@/register";
 
diff --git a/web/src/pages/Account.tsx b/web/src/pages/Account.tsx
index a5948b51..a315e915 100644
--- a/web/src/pages/Account.tsx
+++ b/web/src/pages/Account.tsx
@@ -113,7 +113,7 @@ function AccountSettings({
             }
           />
           {account.blocked && (
-            <div className="space-y-1 py-2">
+            <div className="flex flex-col gap-y-1 py-2">
               <p className="text-xs text-muted">{t("blockDetails.reason")}</p>
               <p className="whitespace-pre-wrap break-words text-sm text-text">
                 {account.blockReason || t("blockDetails.noReason")}
diff --git a/web/src/pages/Accounts.tsx b/web/src/pages/Accounts.tsx
index 11073e48..51726a69 100644
--- a/web/src/pages/Accounts.tsx
+++ b/web/src/pages/Accounts.tsx
@@ -1195,8 +1195,8 @@ export function CreateAccountDialog({
             {ta("createAccount.description")}
           </DialogDescription>
         </DialogHeader>
-        <div className="space-y-4">
-          <div className="space-y-2">
+        <div className="flex flex-col gap-y-4">
+          <div className="flex flex-col gap-y-2">
             <Label htmlFor="account-code">
               {ta("createAccount.codeLabel")}
             </Label>
@@ -1224,7 +1224,7 @@ export function CreateAccountDialog({
               </p>
             )}
           </div>
-          <div className="space-y-2">
+          <div className="flex flex-col gap-y-2">
             <Label htmlFor="create-account-group">
               {ta("createAccount.groupLabel")}
             </Label>
@@ -1242,7 +1242,7 @@ export function CreateAccountDialog({
               {ta("createAccount.groupHint")}
             </p>
           </div>
-          <div className="space-y-2">
+          <div className="flex flex-col gap-y-2">
             <Label htmlFor="create-account-currency">
               {ta("createAccount.currencyLabel")}
             </Label>
@@ -1361,8 +1361,8 @@ function CreateGroupDialog({ onCreated }: { onCreated: () => void }) {
         <DialogHeader>
           <DialogTitle>{t("createGroup.title")}</DialogTitle>
         </DialogHeader>
-        <div className="space-y-4">
-          <div className="space-y-2">
+        <div className="flex flex-col gap-y-4">
+          <div className="flex flex-col gap-y-2">
             <Label htmlFor="group-code">{t("createGroup.codeLabel")}</Label>
             <Input
               id="group-code"
@@ -1383,7 +1383,7 @@ function CreateGroupDialog({ onCreated }: { onCreated: () => void }) {
               </p>
             )}
           </div>
-          <div className="space-y-2">
+          <div className="flex flex-col gap-y-2">
             <Label htmlFor="group-title">{t("createGroup.titleLabel")}</Label>
             <Input
               id="group-title"
@@ -1398,7 +1398,7 @@ function CreateGroupDialog({ onCreated }: { onCreated: () => void }) {
               }}
             />
           </div>
-          <div className="space-y-2">
+          <div className="flex flex-col gap-y-2">
             <Label htmlFor="create-group-currency">
               {t("createGroup.currencyLabel")}
             </Label>
@@ -1421,7 +1421,7 @@ function CreateGroupDialog({ onCreated }: { onCreated: () => void }) {
               failed={assetSuggestionResult.failed}
             />
           </div>
-          <div className="space-y-2">
+          <div className="flex flex-col gap-y-2">
             <Label htmlFor="group-notes">{t("createGroup.notesLabel")}</Label>
             <Textarea
               id="group-notes"
@@ -1517,7 +1517,7 @@ function BlockGroupDialog({
           </DialogTitle>
         </DialogHeader>
         <p className="text-xs text-muted-lt">{t("blockGroup.description")}</p>
-        <div className="space-y-2">
+        <div className="flex flex-col gap-y-2">
           <Label htmlFor="block-group-reason">
             {t("blockGroup.reasonLabel")}
           </Label>
@@ -1802,7 +1802,7 @@ function DeleteAccountConfirm({
             <p className="font-medium text-[var(--danger)]">
               {t("deleteAccount.dependentsTitle")}
             </p>
-            <ul className="mt-2 space-y-1">
+            <ul className="mt-2 flex flex-col gap-y-1">
               {dependents.map((dep) => (
                 <li key={dep.kind} className="flex justify-between gap-4">
                   <span>
@@ -1917,8 +1917,8 @@ function EditAccountMetadataDialog({
           </DialogTitle>
           <DialogDescription>{t("editAccount.description")}</DialogDescription>
         </DialogHeader>
-        <div className="space-y-4">
-          <div className="space-y-2">
+        <div className="flex flex-col gap-y-4">
+          <div className="flex flex-col gap-y-2">
             <Label htmlFor="account-edit-code">
               {t("editAccount.codeLabel")}
             </Label>
@@ -1938,7 +1938,7 @@ function EditAccountMetadataDialog({
               </p>
             )}
           </div>
-          <div className="space-y-2">
+          <div className="flex flex-col gap-y-2">
             <Label htmlFor="account-edit-title">
               {t("editAccount.titleLabel")}
             </Label>
@@ -2046,8 +2046,8 @@ function EditGroupMetadataDialog({
           </DialogTitle>
           <DialogDescription>{t("editGroup.description")}</DialogDescription>
         </DialogHeader>
-        <div className="space-y-4">
-          <div className="space-y-2">
+        <div className="flex flex-col gap-y-4">
+          <div className="flex flex-col gap-y-2">
             <Label htmlFor="group-edit-code">{t("editGroup.codeLabel")}</Label>
             <ClearableInput
               id="group-edit-code"
@@ -2060,7 +2060,7 @@ function EditGroupMetadataDialog({
               disabled={busy}
             />
           </div>
-          <div className="space-y-2">
+          <div className="flex flex-col gap-y-2">
             <Label htmlFor="group-edit-title">
               {t("editGroup.titleLabel")}
             </Label>
@@ -2163,7 +2163,7 @@ function EditGroupNotesDialog({
         <p className="text-xs text-muted-lt">
           {t("editGroupNotes.description")}
         </p>
-        <div className="space-y-2">
+        <div className="flex flex-col gap-y-2">
           <Label htmlFor="group-notes-edit">
             {t("editGroupNotes.notesLabel")}
           </Label>
@@ -2286,7 +2286,7 @@ function AssignGroupDialog({
           </DialogTitle>
         </DialogHeader>
         <p className="text-xs text-muted-lt">{t("assignGroup.description")}</p>
-        <div className="space-y-2">
+        <div className="flex flex-col gap-y-2">
           <Label htmlFor="assign-group">{t("assignGroup.groupLabel")}</Label>
           <Autocomplete
             id="assign-group"
@@ -2371,13 +2371,13 @@ function GroupCurrencyDialog({
               : t("editGroupCurrency.description", { group: group.code })}
           </DialogDescription>
         </DialogHeader>
-        <div className="space-y-4">
+        <div className="flex flex-col gap-y-4">
           {hasOpenPositions && (
             <p className="text-xs text-[var(--warning)]">
               {t("editGroupCurrency.blockedHint")}
             </p>
           )}
-          <div className="space-y-2">
+          <div className="flex flex-col gap-y-2">
             <Label htmlFor="group-currency">
               {t("editGroupCurrency.currencyLabel")}
             </Label>
@@ -2482,7 +2482,7 @@ function EditAccountNotesDialog({
         <p className="text-xs text-muted-lt">
           {t("editAccountNotes.description")}
         </p>
-        <div className="space-y-2">
+        <div className="flex flex-col gap-y-2">
           <Label htmlFor="account-notes">
             {t("editAccountNotes.notesLabel")}
           </Label>
@@ -2678,12 +2678,12 @@ function BlockedDetailsDialog({
           <DialogDescription>{t("blockDetails.description")}</DialogDescription>
         </DialogHeader>
 
-        <div className="space-y-4">
+        <div className="flex flex-col gap-y-4">
           {/* "none" means the backend named no tier - against a build that
               predates blockSource every value degrades to it - so the section
               is dropped rather than claiming a tier it does not know. */}
           {targetAccount !== null && targetAccount.blockSource !== "none" && (
-            <section className="space-y-2">
+            <section className="flex flex-col gap-y-2">
               <p className="text-[0.6875rem] font-bold uppercase tracking-[0.07em] text-muted">
                 {t("blockDetails.source")}
               </p>
@@ -2705,7 +2705,7 @@ function BlockedDetailsDialog({
             </section>
           )}
 
-          <section className="space-y-2">
+          <section className="flex flex-col gap-y-2">
             <p className="text-[0.6875rem] font-bold uppercase tracking-[0.07em] text-muted">
               {t("blockDetails.reason")}
             </p>
@@ -2716,7 +2716,7 @@ function BlockedDetailsDialog({
             </p>
           </section>
 
-          <section className="space-y-2">
+          <section className="flex flex-col gap-y-2">
             <p className="text-[0.6875rem] font-bold uppercase tracking-[0.07em] text-muted">
               {t("blockDetails.audit")}
             </p>
@@ -2731,7 +2731,7 @@ function BlockedDetailsDialog({
                 {t("blockDetails.noAudit")}
               </p>
             ) : (
-              <div className="space-y-2">
+              <div className="flex flex-col gap-y-2">
                 {entries.map((entry) => (
                   <div
                     key={entry.id}
@@ -4433,7 +4433,7 @@ export function Accounts() {
 
       {/* Groups panel */}
       {tab === "groups" && (
-        <div className="space-y-1">
+        <div className="flex flex-col gap-y-1">
           <p className="text-xs font-medium text-muted">
             {t("groups.heading")}
           </p>
@@ -4514,7 +4514,7 @@ export function Accounts() {
 
       {/* Accounts panel */}
       {tab === "accounts" && (
-        <div className="space-y-1">
+        <div className="flex flex-col gap-y-1">
           <p className="text-xs font-medium text-muted">
             {t("accounts.heading")}
           </p>
diff --git a/web/src/pages/Assets.tsx b/web/src/pages/Assets.tsx
index d0016bc2..21c5f5cc 100644
--- a/web/src/pages/Assets.tsx
+++ b/web/src/pages/Assets.tsx
@@ -197,8 +197,8 @@ function CreateAssetDialog({
           <DialogTitle>{t("createAsset.title")}</DialogTitle>
           <DialogDescription>{t("createAsset.description")}</DialogDescription>
         </DialogHeader>
-        <div className="space-y-4">
-          <div className="space-y-2">
+        <div className="flex flex-col gap-y-4">
+          <div className="flex flex-col gap-y-2">
             <Label htmlFor="asset-code">{t("createAsset.codeLabel")}</Label>
             <ClearableInput
               id="asset-code"
@@ -220,7 +220,7 @@ function CreateAssetDialog({
               {t("createAsset.codeHint")}
             </p>
           </div>
-          <div className="space-y-2">
+          <div className="flex flex-col gap-y-2">
             <Label htmlFor="asset-title">{t("createAsset.titleLabel")}</Label>
             <ClearableInput
               id="asset-title"
@@ -232,7 +232,7 @@ function CreateAssetDialog({
               disabled={busy}
             />
           </div>
-          <div className="space-y-2">
+          <div className="flex flex-col gap-y-2">
             <Label htmlFor="asset-class">{t("createAsset.classLabel")}</Label>
             <Autocomplete
               id="asset-class"
@@ -331,8 +331,8 @@ function CreateClassDialog({ onCreated }: { onCreated: () => void }) {
           <DialogTitle>{t("createClass.title")}</DialogTitle>
           <DialogDescription>{t("createClass.description")}</DialogDescription>
         </DialogHeader>
-        <div className="space-y-4">
-          <div className="space-y-2">
+        <div className="flex flex-col gap-y-4">
+          <div className="flex flex-col gap-y-2">
             <Label htmlFor="class-code">{t("createClass.codeLabel")}</Label>
             <ClearableInput
               id="class-code"
@@ -351,7 +351,7 @@ function CreateClassDialog({ onCreated }: { onCreated: () => void }) {
               disabled={busy}
             />
           </div>
-          <div className="space-y-2">
+          <div className="flex flex-col gap-y-2">
             <Label htmlFor="class-title">{t("createClass.titleLabel")}</Label>
             <ClearableInput
               id="class-title"
@@ -364,7 +364,7 @@ function CreateClassDialog({ onCreated }: { onCreated: () => void }) {
               disabled={busy}
             />
           </div>
-          <div className="space-y-2">
+          <div className="flex flex-col gap-y-2">
             <Label htmlFor="class-notes">{t("createClass.notesLabel")}</Label>
             <Textarea
               id="class-notes"
@@ -480,8 +480,8 @@ function EditAssetDialog({
           </DialogTitle>
           <DialogDescription>{t("editAsset.description")}</DialogDescription>
         </DialogHeader>
-        <div className="space-y-4">
-          <div className="space-y-2">
+        <div className="flex flex-col gap-y-4">
+          <div className="flex flex-col gap-y-2">
             <Label htmlFor="asset-edit-code">{t("editAsset.codeLabel")}</Label>
             <ClearableInput
               id="asset-edit-code"
@@ -494,7 +494,7 @@ function EditAssetDialog({
               disabled={busy}
             />
           </div>
-          <div className="space-y-2">
+          <div className="flex flex-col gap-y-2">
             <Label htmlFor="asset-edit-title">
               {t("editAsset.titleLabel")}
             </Label>
@@ -508,7 +508,7 @@ function EditAssetDialog({
               disabled={busy}
             />
           </div>
-          <div className="space-y-2">
+          <div className="flex flex-col gap-y-2">
             <Label htmlFor="asset-edit-class">
               {t("editAsset.classLabel")}
             </Label>
@@ -625,8 +625,8 @@ function EditClassDialog({
           </DialogTitle>
           <DialogDescription>{t("editClass.description")}</DialogDescription>
         </DialogHeader>
-        <div className="space-y-4">
-          <div className="space-y-2">
+        <div className="flex flex-col gap-y-4">
+          <div className="flex flex-col gap-y-2">
             <Label htmlFor="class-edit-code">{t("editClass.codeLabel")}</Label>
             <ClearableInput
               id="class-edit-code"
@@ -639,7 +639,7 @@ function EditClassDialog({
               disabled={busy}
             />
           </div>
-          <div className="space-y-2">
+          <div className="flex flex-col gap-y-2">
             <Label htmlFor="class-edit-title">
               {t("editClass.titleLabel")}
             </Label>
@@ -653,7 +653,7 @@ function EditClassDialog({
               disabled={busy}
             />
           </div>
-          <div className="space-y-2">
+          <div className="flex flex-col gap-y-2">
             <Label htmlFor="class-edit-notes">
               {t("editClass.notesLabel")}
             </Label>
@@ -1588,7 +1588,7 @@ export function Assets() {
 
       {/* Assets panel */}
       {tab === "assets" && (
-        <div className="space-y-1">
+        <div className="flex flex-col gap-y-1">
           <p className="text-xs font-medium text-muted">
             {t("assets.heading")}
           </p>
@@ -1719,7 +1719,7 @@ export function Assets() {
 
       {/* Classes panel */}
       {tab === "classes" && (
-        <div className="space-y-1">
+        <div className="flex flex-col gap-y-1">
           <p className="text-xs font-medium text-muted">
             {t("classes.heading")}
           </p>
diff --git a/web/src/pages/Audit.tsx b/web/src/pages/Audit.tsx
index a286a6cf..39cb0598 100644
--- a/web/src/pages/Audit.tsx
+++ b/web/src/pages/Audit.tsx
@@ -208,7 +208,7 @@ function AuditTable({
             tabIndex={entry.id === exactExternalId ? 0 : -1}
             className={
               entry.id === exactExternalId
-                ? "hover:bg-transparent ring-1 ring-inset ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                ? "hover:bg-transparent ring-1 ring-inset ring-ring focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
                 : "hover:bg-transparent"
             }
           >
diff --git a/web/src/pages/LimitDialog.tsx b/web/src/pages/LimitDialog.tsx
index c358d839..736c9eaa 100644
--- a/web/src/pages/LimitDialog.tsx
+++ b/web/src/pages/LimitDialog.tsx
@@ -183,7 +183,7 @@ function DurationPicker({
     : null;
 
   return (
-    <div className="space-y-1.5">
+    <div className="flex flex-col gap-y-1.5">
       <div className="flex gap-2">
         <NumberStepper
           id={id}
@@ -578,7 +578,7 @@ export function LimitDialog({
             )}
           </DialogHeader>
 
-          <div className="space-y-4">
+          <div className="flex flex-col gap-y-4">
             {isSpotFundsPnl && (
               <p className="text-xs text-muted-lt">
                 {t("dialog.fxFailSafeNote")}
@@ -586,7 +586,7 @@ export function LimitDialog({
             )}
 
             <div className="grid grid-cols-2 gap-3">
-              <div className="space-y-1.5">
+              <div className="flex flex-col gap-y-1.5">
                 <Label>{t("dialog.policy")}</Label>
                 <Select
                   value={form.policy}
@@ -606,7 +606,7 @@ export function LimitDialog({
                 </Select>
               </div>
 
-              <div className="space-y-1.5">
+              <div className="flex flex-col gap-y-1.5">
                 <Label>{t("dialog.scope")}</Label>
                 <Select
                   value={form.scope}
@@ -632,7 +632,7 @@ export function LimitDialog({
               scopeHasAsset(form.scope)) && (
               <div className={cn("grid gap-3", showsAccounts && "grid-cols-2")}>
                 {showsAccountField && (
-                  <div className="space-y-1.5">
+                  <div className="flex flex-col gap-y-1.5">
                     <Label htmlFor="limit-account">{t("dialog.account")}</Label>
                     <Autocomplete
                       id="limit-account"
@@ -655,7 +655,7 @@ export function LimitDialog({
                   </div>
                 )}
                 {hasAccountGroupAxis && (
-                  <div className="space-y-1.5">
+                  <div className="flex flex-col gap-y-1.5">
                     <Label htmlFor="limit-account-group">
                       {t("dialog.accountGroup")}
                     </Label>
@@ -677,7 +677,7 @@ export function LimitDialog({
                   </div>
                 )}
                 {!isSpotFundsPnl && scopeHasAsset(form.scope) && (
-                  <div className="space-y-1.5">
+                  <div className="flex flex-col gap-y-1.5">
                     <Label htmlFor="limit-asset">{t("dialog.asset")}</Label>
                     <Autocomplete
                       id="limit-asset"
@@ -703,7 +703,7 @@ export function LimitDialog({
               </div>
             )}
 
-            <div className="space-y-3 rounded-card border border-border p-3">
+            <div className="flex flex-col gap-y-3 rounded-card border border-border p-3">
               <p className="text-[0.6875rem] uppercase tracking-[0.07em] text-muted">
                 {t("dialog.values")}
               </p>
@@ -722,7 +722,7 @@ export function LimitDialog({
                   (validation?.key === "limit.pnlCurrencyRequired" ||
                     validation?.key.startsWith("asset."));
                 return (
-                  <div key={kind} className="space-y-1.5">
+                  <div key={kind} className="flex flex-col gap-y-1.5">
                     <Label htmlFor={`kind-${kind}`}>{fieldLabel}</Label>
                     {isDuration ? (
                       <DurationPicker
diff --git a/web/src/pages/Login.tsx b/web/src/pages/Login.tsx
index 51b3ab0e..078ab923 100644
--- a/web/src/pages/Login.tsx
+++ b/web/src/pages/Login.tsx
@@ -116,7 +116,7 @@ export function Login({
   return (
     <AuthScreen title={t("login.title")} note={t("login.note")} noteIcon={Bot}>
       <form
-        className="space-y-4"
+        className="flex flex-col gap-y-4"
         onSubmit={(event) => {
           void submit(event);
         }}
diff --git a/web/src/pages/MarketData.tsx b/web/src/pages/MarketData.tsx
index a5c61231..2fe3fd5c 100644
--- a/web/src/pages/MarketData.tsx
+++ b/web/src/pages/MarketData.tsx
@@ -920,7 +920,7 @@ function IBContractFields({
   const currencyErrorID = `${idPrefix}-currency-error`;
   return (
     <div className="grid gap-3 md:grid-cols-2">
-      <div className="space-y-2">
+      <div className="flex flex-col gap-y-2">
         <Label>{t("settings.secType")}</Label>
         <Select
           value={contract.secType ?? "STK"}
@@ -941,7 +941,7 @@ function IBContractFields({
           </SelectContent>
         </Select>
       </div>
-      <div className="space-y-2">
+      <div className="flex flex-col gap-y-2">
         <Label htmlFor={`${idPrefix}-currency`}>{t("settings.currency")}</Label>
         <Input
           id={`${idPrefix}-currency`}
@@ -960,7 +960,7 @@ function IBContractFields({
         )}
       </div>
       {fields.exchange && (
-        <div className="space-y-2">
+        <div className="flex flex-col gap-y-2">
           <Label htmlFor={`${idPrefix}-exchange`}>
             {t("settings.exchange")}
           </Label>
@@ -973,7 +973,7 @@ function IBContractFields({
         </div>
       )}
       {fields.primaryExchange && (
-        <div className="space-y-2">
+        <div className="flex flex-col gap-y-2">
           <Label htmlFor={`${idPrefix}-primary-exchange`}>
             {t("settings.primaryExchange")}
           </Label>
@@ -986,7 +986,7 @@ function IBContractFields({
         </div>
       )}
       {fields.lastTradeDate && (
-        <div className="space-y-2">
+        <div className="flex flex-col gap-y-2">
           <Label htmlFor={`${idPrefix}-last-trade-date`}>
             {t("settings.lastTradeDate")}
           </Label>
@@ -1002,7 +1002,7 @@ function IBContractFields({
         </div>
       )}
       {fields.strike && (
-        <div className="space-y-2">
+        <div className="flex flex-col gap-y-2">
           <Label htmlFor={`${idPrefix}-strike`}>{t("settings.strike")}</Label>
           <Input
             id={`${idPrefix}-strike`}
@@ -1018,7 +1018,7 @@ function IBContractFields({
         </div>
       )}
       {fields.right && (
-        <div className="space-y-2">
+        <div className="flex flex-col gap-y-2">
           <Label>{t("settings.right")}</Label>
           <Select
             value={contract.right ?? ""}
@@ -1057,7 +1057,7 @@ function IBContractIdentityFields({
   };
   return (
     <div className="grid gap-3 md:grid-cols-3">
-      <div className="space-y-2">
+      <div className="flex flex-col gap-y-2">
         <Label htmlFor={`${idPrefix}-symbol`}>
           {t("settings.contractSymbol")}
         </Label>
@@ -1068,7 +1068,7 @@ function IBContractIdentityFields({
           disabled={busy}
         />
       </div>
-      <div className="space-y-2">
+      <div className="flex flex-col gap-y-2">
         <Label htmlFor={`${idPrefix}-con-id`}>{t("settings.conId")}</Label>
         <Input
           id={`${idPrefix}-con-id`}
@@ -1079,7 +1079,7 @@ function IBContractIdentityFields({
           disabled={busy}
         />
       </div>
-      <div className="space-y-2">
+      <div className="flex flex-col gap-y-2">
         <Label htmlFor={`${idPrefix}-local-symbol`}>
           {t("settings.localSymbol")}
         </Label>
@@ -1090,7 +1090,7 @@ function IBContractIdentityFields({
           disabled={busy}
         />
       </div>
-      <div className="space-y-2">
+      <div className="flex flex-col gap-y-2">
         <Label htmlFor={`${idPrefix}-trading-class`}>
           {t("settings.tradingClass")}
         </Label>
@@ -1101,7 +1101,7 @@ function IBContractIdentityFields({
           disabled={busy}
         />
       </div>
-      <div className="space-y-2">
+      <div className="flex flex-col gap-y-2">
         <Label htmlFor={`${idPrefix}-multiplier`}>
           {t("settings.multiplier")}
         </Label>
@@ -1138,7 +1138,7 @@ function IBContractEditor({
   onChange: (patch: Partial<IBContract>) => void;
 }) {
   return (
-    <div className="space-y-3">
+    <div className="flex flex-col gap-y-3">
       <IBContractFields
         contract={contract}
         busy={busy}
@@ -1176,9 +1176,9 @@ function ProviderSettingsFields({
     hasSecret(instance, key) ? t("venues:settings.keepStoredSecret") : "";
   if (providerType === IB_PROVIDER) {
     return (
-      <div className="space-y-4">
+      <div className="flex flex-col gap-y-4">
         <div className="grid gap-3 md:grid-cols-2">
-          <div className="space-y-2">
+          <div className="flex flex-col gap-y-2">
             <Label htmlFor="md-settings-host">{t("settings.host")}</Label>
             <Input
               id="md-settings-host"
@@ -1187,7 +1187,7 @@ function ProviderSettingsFields({
               disabled={busy}
             />
           </div>
-          <div className="space-y-2">
+          <div className="flex flex-col gap-y-2">
             <Label htmlFor="md-settings-port">{t("settings.port")}</Label>
             <Input
               id="md-settings-port"
@@ -1200,7 +1200,7 @@ function ProviderSettingsFields({
               disabled={busy}
             />
           </div>
-          <div className="space-y-2">
+          <div className="flex flex-col gap-y-2">
             <Label htmlFor="md-settings-client-id">
               {t("settings.clientId")}
             </Label>
@@ -1214,7 +1214,7 @@ function ProviderSettingsFields({
               disabled={busy}
             />
           </div>
-          <div className="space-y-2">
+          <div className="flex flex-col gap-y-2">
             <Label>{t("settings.marketDataType")}</Label>
             <Select
               value={draft.marketDataType ?? "live"}
@@ -1246,7 +1246,7 @@ function ProviderSettingsFields({
   }
   if (providerType === ALPACA_PROVIDER) {
     return (
-      <div className="space-y-3">
+      <div className="flex flex-col gap-y-3">
         <UnsealedKeysWarning storage={credentialStorage} />
         <Button asChild variant="outline" size="sm" className="w-fit">
           <a
@@ -1281,7 +1281,7 @@ function ProviderSettingsFields({
   }
   if (providerType === BYBIT_PROVIDER) {
     return (
-      <div className="space-y-2">
+      <div className="flex flex-col gap-y-2">
         <Label>{t("settings.category")}</Label>
         <Select
           value={draft.category ?? "spot"}
@@ -1311,7 +1311,7 @@ function ProviderSettingsFields({
   }
   if (providerType === OANDA_PROVIDER) {
     return (
-      <div className="space-y-3">
+      <div className="flex flex-col gap-y-3">
         <UnsealedKeysWarning storage={credentialStorage} />
         <Button asChild variant="outline" size="sm" className="w-fit">
           <a href={OANDA_TOKEN_URL} target="_blank" rel="noopener noreferrer">
@@ -1328,7 +1328,7 @@ function ProviderSettingsFields({
             disabled={busy}
             onChange={(value) => set("token", value)}
           />
-          <div className="space-y-2">
+          <div className="flex flex-col gap-y-2">
             <Label htmlFor="md-settings-account-id">
               {t("settings.accountID")}
             </Label>
@@ -1339,7 +1339,7 @@ function ProviderSettingsFields({
               disabled={busy}
             />
           </div>
-          <div className="space-y-2">
+          <div className="flex flex-col gap-y-2">
             <Label>{t("settings.environment")}</Label>
             <Select
               value={draft.environment ?? "practice"}
@@ -1365,7 +1365,7 @@ function ProviderSettingsFields({
   }
   if (providerType === FINNHUB_PROVIDER) {
     return (
-      <div className="space-y-3">
+      <div className="flex flex-col gap-y-3">
         <UnsealedKeysWarning storage={credentialStorage} />
         <Button asChild variant="outline" size="sm" className="w-fit">
           <a
@@ -1404,7 +1404,7 @@ function StateToggleField({
 }) {
   const { t } = useTranslation("marketData");
   return (
-    <div className="space-y-2">
+    <div className="flex flex-col gap-y-2">
       <Label htmlFor={id}>{t("venues:table.state")}</Label>
       <Button
         id={id}
@@ -1515,8 +1515,8 @@ export function CreateInstanceDialog({
               : t("create.defaultHint")}
           </DialogDescription>
         </DialogHeader>
-        <div className="space-y-4">
-          <div className="space-y-2">
+        <div className="flex flex-col gap-y-4">
+          <div className="flex flex-col gap-y-2">
             <Label htmlFor="md-create-label">
               {t("venues:settings.label")}
             </Label>
@@ -1544,7 +1544,7 @@ export function CreateInstanceDialog({
             }
           />
           {provider && providerHasSettings(provider.type) && (
-            <div className="space-y-3">
+            <div className="flex flex-col gap-y-3">
               <p className="text-xs font-medium uppercase tracking-wide text-muted">
                 {t("settings.title")}
               </p>
@@ -1704,8 +1704,8 @@ export function InstanceSettingsDialog({
           <DialogDescription>{t("settings.editDescription")}</DialogDescription>
         </DialogHeader>
         {instance && (
-          <div className="space-y-4">
-            <div className="space-y-2">
+          <div className="flex flex-col gap-y-4">
+            <div className="flex flex-col gap-y-2">
               <Label htmlFor="md-edit-label">
                 {t("venues:settings.label")}
               </Label>
@@ -1725,7 +1725,7 @@ export function InstanceSettingsDialog({
               )}
             </div>
             {providerHasSettings(instance.provider) && (
-              <div className="space-y-3">
+              <div className="flex flex-col gap-y-3">
                 <p className="text-xs font-medium uppercase tracking-wide text-muted">
                   {t("settings.title")}
                 </p>
@@ -2067,7 +2067,7 @@ export function InstanceCard({
           </>
         }
       />
-      <CardContent className="space-y-4">
+      <CardContent className="flex flex-col gap-y-4">
         {!usesInstrumentDialog && canSearch && (
           <SymbolSearchPanel
             id={`md-resolve-${instance.id}`}
@@ -2165,7 +2165,7 @@ export function InstanceCard({
                   {t("instrumentDialog.ibDescription")}
                 </DialogDescription>
               </DialogHeader>
-              <div className="space-y-4">
+              <div className="flex flex-col gap-y-4">
                 {canSearch && (
                   <SymbolSearchPanel
                     id={`md-resolve-dialog-${instance.id}`}
@@ -2192,7 +2192,7 @@ export function InstanceCard({
                   />
                 )}
                 <div className="grid items-end gap-3 md:grid-cols-[1fr_0.7fr_0.7fr_0.5fr]">
-                  <div className="space-y-2">
+                  <div className="flex flex-col gap-y-2">
                     <Label htmlFor={`md-add-${instance.id}-external`}>
                       {t("venues:instrument.externalSymbol")}
                     </Label>
@@ -2207,7 +2207,7 @@ export function InstanceCard({
                       disabled={busy}
                     />
                   </div>
-                  <div className="space-y-2">
+                  <div className="flex flex-col gap-y-2">
                     <Label htmlFor={`md-add-${instance.id}-base`}>
                       {t("venues:instrument.baseAsset")}
                     </Label>
@@ -2220,7 +2220,7 @@ export function InstanceCard({
                       disabled={busy}
                     />
                   </div>
-                  <div className="space-y-2">
+                  <div className="flex flex-col gap-y-2">
                     <div className="flex items-center gap-2">
                       <Label htmlFor={`md-add-${instance.id}-quote`}>
                         {t("venues:instrument.quoteAsset")}
@@ -2245,7 +2245,7 @@ export function InstanceCard({
                     }
                   />
                 </div>
-                <div className="space-y-3 rounded-card border border-border bg-bg/50 p-3">
+                <div className="flex flex-col gap-y-3 rounded-card border border-border bg-bg/50 p-3">
                   <p className="text-xs font-medium uppercase tracking-wide text-muted">
                     {t("instrumentDialog.contract")}
                   </p>
@@ -2781,7 +2781,7 @@ export function MarketData() {
         <ErrorState message={load.error} onRetry={reload} />
       )}
       {load.state === "ready" && (
-        <div className="space-y-4">
+        <div className="flex flex-col gap-y-4">
           {load.data.instances.length === 0 && (
             <Card>
               <CardContent className="py-8 text-center text-sm text-muted">
diff --git a/web/src/pages/McpAccess.tsx b/web/src/pages/McpAccess.tsx
index 034039b0..a6c1768a 100644
--- a/web/src/pages/McpAccess.tsx
+++ b/web/src/pages/McpAccess.tsx
@@ -86,7 +86,7 @@ function ProtectiveEnableDialog({
             {t("dialog.title")}
           </AlertDialogTitle>
           <AlertDialogDescription asChild>
-            <div className="space-y-2 text-xs text-muted-lt">
+            <div className="flex flex-col gap-y-2 text-xs text-muted-lt">
               <p>
                 {t("dialog.body1Pre")}{" "}
                 <span className="nums font-medium text-text">
@@ -177,7 +177,7 @@ function CommandsTable({
             </TableCell>
 
             <TableCell>
-              <div className="space-y-0.5">
+              <div className="flex flex-col gap-y-0.5">
                 <p
                   className={
                     cmd.protective
diff --git a/web/src/pages/OrderVerificationPanel.tsx b/web/src/pages/OrderVerificationPanel.tsx
index 1f8a2443..8567ec5a 100644
--- a/web/src/pages/OrderVerificationPanel.tsx
+++ b/web/src/pages/OrderVerificationPanel.tsx
@@ -96,8 +96,8 @@ function LedgerBlock({
   children: ReactNode;
 }): ReactElement {
   return (
-    <section className="space-y-2 border-t border-border pt-3">
-      <div className="space-y-0.5">
+    <section className="flex flex-col gap-y-2 border-t border-border pt-3">
+      <div className="flex flex-col gap-y-0.5">
         <h4 className="text-[0.625rem] font-medium uppercase tracking-[0.09em] text-muted">
           {label}
         </h4>
@@ -647,7 +647,7 @@ function ReproductionMode({
   // No attestation envelope: show the reason and a clean empty state.
   if (!attestation) {
     return (
-      <div className="space-y-3">
+      <div className="flex flex-col gap-y-3">
         <RequestTypeHeader requestType={requestType} />
         <EsignStatus
           alg={bundle.eSign.alg}
@@ -672,7 +672,7 @@ function ReproductionMode({
   const facet = presentResponseFacet(bundle.response);
 
   return (
-    <div className="space-y-3">
+    <div className="flex flex-col gap-y-3">
       <RequestTypeHeader requestType={requestType} />
       <EsignStatus
         alg={bundle.eSign.alg}
@@ -776,7 +776,7 @@ function ReproductionMode({
         </div>
 
         {!unsigned && bundle.canonicalApproval && rawKey ? (
-          <div className="mt-3 space-y-2">
+          <div className="mt-3 flex flex-col gap-y-2">
             <CopyableSnippet
               label={t("verify.jsSnippetLabel")}
               text={jsVerifySnippet(
@@ -889,7 +889,7 @@ function VerifyEnvelopeMode(): ReactElement {
   }
 
   return (
-    <div className="space-y-3">
+    <div className="flex flex-col gap-y-3">
       <LedgerBlock label={t("paste.label")} note={t("paste.note")}>
         <Textarea
           value={envelope}
@@ -1066,7 +1066,7 @@ export function OrderVerificationPanel({
         <Tabs
           value={mode}
           onValueChange={(value) => setMode(value as typeof mode)}
-          className="space-y-4"
+          className="flex flex-col gap-y-4"
         >
           <TabsList aria-label={t("panel.title")}>
             {hasEvent ? (
diff --git a/web/src/pages/Orders.tsx b/web/src/pages/Orders.tsx
index 95ec0b42..5b92d7f2 100644
--- a/web/src/pages/Orders.tsx
+++ b/web/src/pages/Orders.tsx
@@ -366,7 +366,7 @@ function CheckPreview({ state }: { state: CheckState }) {
   return (
     <div
       className={[
-        "rounded-card border px-3 py-2 space-y-2 text-xs",
+        "rounded-card border px-3 py-2 flex flex-col gap-y-2 text-xs",
         result.passed
           ? "border-[var(--ok)] bg-[var(--ok-dim)]"
           : "border-[var(--danger)] bg-[var(--danger-dim)]",
@@ -384,7 +384,7 @@ function CheckPreview({ state }: { state: CheckState }) {
         </span>
       </div>
       {result.rejects.length > 0 && (
-        <ul className="space-y-1">
+        <ul className="flex flex-col gap-y-1">
           {result.rejects.map((r, i) => {
             const localizedReason = t(`check.rejectReasons.${r.code}`, {
               defaultValue: "",
@@ -1039,7 +1039,7 @@ function SubmitOrderDialog({
       : commonFieldsValid && amountKind !== "" && tab !== "";
 
   const fields = (
-    <div className="space-y-4">
+    <div className="flex flex-col gap-y-4">
       {tab !== "venue" && (
         <div className="flex items-start justify-between gap-3">
           <p className="text-[0.6875rem] text-muted">
@@ -1060,7 +1060,7 @@ function SubmitOrderDialog({
           </a>
         </div>
       )}
-      <div className="space-y-1.5">
+      <div className="flex flex-col gap-y-1.5">
         <Label htmlFor="so-external-id">
           {t("addOrder.dialog.externalId")}
         </Label>
@@ -1079,7 +1079,7 @@ function SubmitOrderDialog({
         </p>
       </div>
       {showsAccounts && (
-        <div className="space-y-1.5">
+        <div className="flex flex-col gap-y-1.5">
           <Label htmlFor="so-account">{t("addOrder.dialog.account")}</Label>
           <Autocomplete
             ref={accountFieldRef}
@@ -1101,8 +1101,8 @@ function SubmitOrderDialog({
         </div>
       )}
       {tab === "venue" && (
-        <div className="space-y-4">
-          <div className="space-y-1.5">
+        <div className="flex flex-col gap-y-4">
+          <div className="flex flex-col gap-y-1.5">
             <Label className="block">{t("addOrder.dialog.venue.mode")}</Label>
             <Segmented
               options={[
@@ -1123,7 +1123,7 @@ function SubmitOrderDialog({
           {debouncedAccount !== "" &&
             debouncedAccount === account.trim() &&
             venueMode !== "" && (
-              <div className="space-y-2">
+              <div className="flex flex-col gap-y-2">
                 <Label htmlFor="so-target">
                   {t("addOrder.dialog.venue.target")}
                 </Label>
@@ -1208,7 +1208,7 @@ function SubmitOrderDialog({
                   !destinationsLoading &&
                   !destinationsError &&
                   selectableDestinations.length === 0 && (
-                    <div className="space-y-1 text-xs text-muted-lt">
+                    <div className="flex flex-col gap-y-1 text-xs text-muted-lt">
                       <p>
                         {t(
                           showsAccounts
@@ -1235,7 +1235,7 @@ function SubmitOrderDialog({
 
           {selectedDestinationIsSelectable &&
             selectedDestination.provider === "alpaca" && (
-              <div className="space-y-1.5">
+              <div className="flex flex-col gap-y-1.5">
                 <Label htmlFor="so-time-in-force">
                   {t("addOrder.dialog.venue.timeInForce")}
                 </Label>
@@ -1284,7 +1284,7 @@ function SubmitOrderDialog({
         </div>
       )}
       <div className="grid grid-cols-2 gap-3">
-        <div className="space-y-1.5">
+        <div className="flex flex-col gap-y-1.5">
           <Label htmlFor="so-base">{t("addOrder.dialog.baseAsset")}</Label>
           <Autocomplete
             ref={baseAssetFieldRef}
@@ -1298,7 +1298,7 @@ function SubmitOrderDialog({
             clearLabel={tc("filters.clearField")}
           />
         </div>
-        <div className="space-y-1.5">
+        <div className="flex flex-col gap-y-1.5">
           <Label htmlFor="so-quote">{t("addOrder.dialog.quoteAsset")}</Label>
           <Autocomplete
             id="so-quote"
@@ -1312,7 +1312,7 @@ function SubmitOrderDialog({
           />
         </div>
       </div>
-      <div className="space-y-1.5">
+      <div className="flex flex-col gap-y-1.5">
         <Label className="block">{t("addOrder.dialog.side")}</Label>
         <Segmented
           options={[
@@ -1325,7 +1325,7 @@ function SubmitOrderDialog({
           disabled={busy}
         />
       </div>
-      <div className="space-y-1.5">
+      <div className="flex flex-col gap-y-1.5">
         <Label htmlFor="so-amount">{t("addOrder.dialog.amount")}</Label>
         <div className="flex gap-2">
           <Segmented
@@ -1363,7 +1363,7 @@ function SubmitOrderDialog({
           </p>
         )}
       </div>
-      <div className="space-y-1.5">
+      <div className="flex flex-col gap-y-1.5">
         <Label htmlFor="so-price">
           {t(
             tab === "drop_copy"
@@ -1460,7 +1460,7 @@ function SubmitOrderDialog({
             </TabsContent>
           ))}
         </Tabs>
-        <div className="space-y-4">
+        <div className="flex flex-col gap-y-4">
           {error && (
             <ErrorBanner message={error} onDismiss={() => setError(null)} />
           )}
@@ -1958,7 +1958,7 @@ function ExecReportDialog({
         </DialogHeader>
 
         {done ? (
-          <div className="space-y-3">
+          <div className="flex flex-col gap-y-3">
             <p className="text-xs text-[var(--ok)]">
               {t("execReport.dialog.accepted")}
             </p>
@@ -1975,7 +1975,7 @@ function ExecReportDialog({
               </div>
             </div>
             {blocks.length > 0 && (
-              <div className="space-y-1 rounded-card border border-[var(--danger)] bg-[var(--danger-dim)] px-3 py-2 text-xs">
+              <div className="flex flex-col gap-y-1 rounded-card border border-[var(--danger)] bg-[var(--danger-dim)] px-3 py-2 text-xs">
                 {blocks.map((block, i) => (
                   <div key={i} className="text-[var(--danger)]">
                     <span className="font-medium">
@@ -1998,8 +1998,8 @@ function ExecReportDialog({
             </DialogFooter>
           </div>
         ) : (
-          <div className="space-y-4">
-            <div className="space-y-1.5">
+          <div className="flex flex-col gap-y-4">
+            <div className="flex flex-col gap-y-1.5">
               <Label htmlFor="er-status">{t("execReport.dialog.status")}</Label>
               <Select
                 value={status}
@@ -2031,7 +2031,7 @@ function ExecReportDialog({
             {showFillFields && (
               <>
                 <div className="grid grid-cols-2 gap-3">
-                  <div className="space-y-1.5">
+                  <div className="flex flex-col gap-y-1.5">
                     <Label htmlFor="er-qty">
                       {t("execReport.dialog.fillQty")}
                     </Label>
@@ -2056,7 +2056,7 @@ function ExecReportDialog({
                       </p>
                     )}
                   </div>
-                  <div className="space-y-1.5">
+                  <div className="flex flex-col gap-y-1.5">
                     <Label htmlFor="er-price">
                       {t("execReport.dialog.fillPrice")}
                     </Label>
@@ -2082,7 +2082,7 @@ function ExecReportDialog({
                     )}
                   </div>
                 </div>
-                <div className="space-y-1.5">
+                <div className="flex flex-col gap-y-1.5">
                   <Label htmlFor="er-lock">
                     {t("execReport.dialog.lockPrice")}
                   </Label>
@@ -2110,8 +2110,8 @@ function ExecReportDialog({
               </>
             )}
 
-            <div className="space-y-3">
-              <section className="space-y-3 rounded-card border border-border bg-surface-2 p-3">
+            <div className="flex flex-col gap-y-3">
+              <section className="flex flex-col gap-y-3 rounded-card border border-border bg-surface-2 p-3">
                 <div className="flex items-start justify-between gap-2">
                   <div>
                     <h3 className="text-xs font-semibold text-text">
@@ -2168,7 +2168,7 @@ function ExecReportDialog({
                 </div>
                 {commissionMode !== "none" && (
                   <div className="grid grid-cols-2 items-end gap-3">
-                    <div className="space-y-1.5">
+                    <div className="flex flex-col gap-y-1.5">
                       <Label htmlFor="er-commission-amount">
                         {t("execReport.dialog.commissionAmount")}
                       </Label>
@@ -2185,7 +2185,7 @@ function ExecReportDialog({
                         clearLabel={tc("filters.clearField")}
                       />
                     </div>
-                    <div className="space-y-1.5">
+                    <div className="flex flex-col gap-y-1.5">
                       <Label htmlFor="er-commission-currency">
                         {t("execReport.dialog.commissionCurrency")}
                       </Label>
@@ -2208,7 +2208,7 @@ function ExecReportDialog({
               </section>
             </div>
 
-            <div className="space-y-1.5">
+            <div className="flex flex-col gap-y-1.5">
               <Label htmlFor="er-leaves">
                 {t("execReport.dialog.leavesQty")}
               </Label>
@@ -2588,7 +2588,7 @@ function OrderDetailDialog({
           )}
 
           {state.phase === "loading" && (
-            <div className="space-y-2 py-4">
+            <div className="flex flex-col gap-y-2 py-4">
               {[1, 2, 3].map((i) => (
                 <div
                   key={i}
@@ -2610,7 +2610,7 @@ function OrderDetailDialog({
           )}
 
           {state.phase === "ready" && (
-            <div className="space-y-5">
+            <div className="flex flex-col gap-y-5">
               {/* Order header fields */}
               <div className="grid grid-cols-3 gap-2 rounded-card border border-border bg-surface-2 p-3 text-xs">
                 <div>
@@ -2691,7 +2691,7 @@ function OrderDetailDialog({
               </div>
 
               {venueOrder && (
-                <div className="space-y-3">
+                <div className="flex flex-col gap-y-3">
                   <p className="text-[0.6875rem] font-bold uppercase tracking-[0.07em] text-muted">
                     {t("detail.dialog.venue.sectionTitle")}
                   </p>
@@ -2791,7 +2791,7 @@ function OrderDetailDialog({
                     {t("detail.dialog.timeline.empty")}
                   </p>
                 ) : (
-                  <ol className="space-y-2">
+                  <ol className="flex flex-col gap-y-2">
                     {state.events.map((ev) => {
                       const blockReason = accountBlockReason(ev);
                       return (
@@ -3128,7 +3128,7 @@ function OrderDetailDialog({
               </div>
 
               {canUseWorkflowShortcut && (
-                <div className="space-y-3 rounded-card border border-border bg-surface-2 p-3">
+                <div className="flex flex-col gap-y-3 rounded-card border border-border bg-surface-2 p-3">
                   <div>
                     <h4 className="text-xs font-bold text-text">
                       {t("detail.dialog.workflow.title")}
@@ -3166,8 +3166,8 @@ function OrderDetailDialog({
                     )}
                   </div>
                   {cancelFormOpen && (
-                    <div className="space-y-2 border-t border-border pt-3">
-                      <div className="space-y-1.5">
+                    <div className="flex flex-col gap-y-2 border-t border-border pt-3">
+                      <div className="flex flex-col gap-y-1.5">
                         <Label htmlFor="workflow-cancel-leaves">
                           {t("execReport.dialog.leavesQty")}
                         </Label>
@@ -3470,7 +3470,7 @@ function OrdersTable({
             }}
             tabIndex={0}
             className={cn(
-              "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "cursor-pointer focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
               selectedIndex === index && "ring-1 ring-inset ring-ring",
             )}
             onClick={() => onRowClick(order)}
@@ -3813,7 +3813,7 @@ function TradesTable({
             }}
             tabIndex={0}
             className={cn(
-              "hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "hover:bg-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
               selectedIndex === index && "ring-1 ring-inset ring-ring",
             )}
             onFocus={() => setSelectedIndex(index)}
@@ -5825,7 +5825,7 @@ export function Orders() {
       <Tabs
         value={tab}
         onValueChange={(value) => setTab(value as TabId)}
-        className="space-y-[var(--dens-row-gap)]"
+        className="flex flex-col gap-y-[var(--dens-row-gap)]"
       >
         <TabsList aria-label={t("title")}>
           {(["orders", "trades"] as TabId[]).map((tabId) => (
@@ -6514,7 +6514,10 @@ export function Orders() {
         </Dialog>
 
         {/* Orders view */}
-        <TabsContent value="orders" className="space-y-[var(--dens-row-gap)]">
+        <TabsContent
+          value="orders"
+          className="flex flex-col gap-y-[var(--dens-row-gap)]"
+        >
           {ordersResult.load.state === "loading" && (
             <TableSkeleton
               cols={(venueLabels ? 10 : 9) + (showsAccounts ? 1 : 0)}
@@ -6562,7 +6565,10 @@ export function Orders() {
         </TabsContent>
 
         {/* Trades view */}
-        <TabsContent value="trades" className="space-y-[var(--dens-row-gap)]">
+        <TabsContent
+          value="trades"
+          className="flex flex-col gap-y-[var(--dens-row-gap)]"
+        >
           {tradesResult.load.state === "loading" && (
             <TableSkeleton
               cols={(venueLabels ? 10 : 9) + (showsAccounts ? 1 : 0)}
diff --git a/web/src/pages/PasswordRecovery.tsx b/web/src/pages/PasswordRecovery.tsx
index 6e9d41cf..43f50b86 100644
--- a/web/src/pages/PasswordRecovery.tsx
+++ b/web/src/pages/PasswordRecovery.tsx
@@ -70,7 +70,7 @@ function RecoveryStep({
       >
         {number}
       </span>
-      <div className="min-w-0 flex-1 space-y-2">
+      <div className="min-w-0 flex-1 flex flex-col gap-y-2">
         <h2 className="text-sm font-bold text-text">{title}</h2>
         {children}
       </div>
@@ -153,7 +153,7 @@ function CodeRequestStep() {
         <p
           ref={refusalLine}
           tabIndex={-1}
-          className="text-xs text-[var(--danger)] focus:outline-none"
+          className="text-xs text-[var(--danger)] focus:outline-hidden"
         >
           {secondsLeft > 0
             ? t("tooManyAttemptsRetry", { seconds: secondsLeft })
@@ -252,7 +252,7 @@ function PasswordResetStep({
   return (
     <RecoveryStep number={3} title={t("recovery.reset.title")}>
       <form
-        className="space-y-3"
+        className="flex flex-col gap-y-3"
         onSubmit={(event) => {
           void reset(event);
         }}
@@ -333,7 +333,7 @@ export function PasswordRecovery({
       noteIcon={Info}
       wide
     >
-      <ol className="space-y-4">
+      <ol className="flex flex-col gap-y-4">
         <CodeRequestStep />
         <RecoveryStep number={2} title={t("recovery.read.title")}>
           <p className="text-xs text-muted-lt">
diff --git a/web/src/pages/Positions.tsx b/web/src/pages/Positions.tsx
index e201f0ab..a55718ea 100644
--- a/web/src/pages/Positions.tsx
+++ b/web/src/pages/Positions.tsx
@@ -1032,7 +1032,7 @@ function AveragePriceIntentRow({
           <DenominatedAmount value={current} currency={currency} />
         </p>
       </div>
-      <div className="space-y-1">
+      <div className="flex flex-col gap-y-1">
         <p className="text-[0.625rem] font-bold uppercase tracking-[0.07em] text-muted md:hidden">
           {t("panel.columns.intent")}
         </p>
@@ -1043,7 +1043,7 @@ function AveragePriceIntentRow({
           {t("dialog.mode.absolute")}
         </div>
       </div>
-      <div className="space-y-1">
+      <div className="flex flex-col gap-y-1">
         <Label htmlFor="adjust-average-entry-price" className="md:hidden">
           {t("panel.columns.amount")}
         </Label>
@@ -1122,7 +1122,7 @@ function RealizedPnlIntentRow({
           <DenominatedAmount value={current} currency={currency} />
         </p>
       </div>
-      <div className="space-y-1">
+      <div className="flex flex-col gap-y-1">
         <p className="text-[0.625rem] font-bold uppercase tracking-[0.07em] text-muted md:hidden">
           {t("panel.columns.intent")}
         </p>
@@ -1133,7 +1133,7 @@ function RealizedPnlIntentRow({
           {t("dialog.mode.absolute")}
         </div>
       </div>
-      <div className="space-y-1">
+      <div className="flex flex-col gap-y-1">
         <Label htmlFor="adjust-realized-pnl" className="md:hidden">
           {t("panel.columns.amount")}
         </Label>
@@ -1210,7 +1210,7 @@ function AmountIntentRow({
         </p>
         <p className="nums mt-1 text-sm text-text">{dash(current)}</p>
       </div>
-      <div className="space-y-1">
+      <div className="flex flex-col gap-y-1">
         <Label htmlFor={`adjust-${id}-mode`} className="md:hidden">
           {t("panel.columns.intent")}
         </Label>
@@ -1236,7 +1236,7 @@ function AmountIntentRow({
           </SelectContent>
         </Select>
       </div>
-      <div className="space-y-1">
+      <div className="flex flex-col gap-y-1">
         <Label htmlFor={`adjust-${id}-value`} className="md:hidden">
           {t("panel.columns.amount")}
         </Label>
@@ -1309,7 +1309,7 @@ function BoundsIntentRow({
           {label}
         </p>
       </div>
-      <div className="space-y-1">
+      <div className="flex flex-col gap-y-1">
         <Label htmlFor={`adjust-${id}-lower`}>{t("dialog.bounds.lower")}</Label>
         <NumberStepper
           id={`adjust-${id}-lower`}
@@ -1329,7 +1329,7 @@ function BoundsIntentRow({
           }}
         />
       </div>
-      <div className="space-y-1">
+      <div className="flex flex-col gap-y-1">
         <Label htmlFor={`adjust-${id}-upper`}>{t("dialog.bounds.upper")}</Label>
         <NumberStepper
           id={`adjust-${id}-upper`}
@@ -1621,7 +1621,7 @@ function AdjustmentPanel({
         tabIndex={-1}
         role="region"
         aria-label={t("panel.title")}
-        className="space-y-4 border-l-2 border-l-accent bg-surface-2 px-4 py-4"
+        className="flex flex-col gap-y-4 border-l-2 border-l-accent bg-surface-2 px-4 py-4"
         onFocusCapture={() => {
           focusInsideRef.current = true;
         }}
@@ -1668,7 +1668,7 @@ function AdjustmentPanel({
 
         <div className={cn("grid gap-3", showsAccounts && "md:grid-cols-2")}>
           {showsAccounts && (
-            <div className="space-y-1.5">
+            <div className="flex flex-col gap-y-1.5">
               <Label htmlFor="adjust-panel-account">
                 {t("dialog.fields.account")}
               </Label>
@@ -1685,7 +1685,7 @@ function AdjustmentPanel({
               />
             </div>
           )}
-          <div className="space-y-1.5">
+          <div className="flex flex-col gap-y-1.5">
             <Label htmlFor="adjust-panel-asset">
               {t("dialog.fields.asset")}
             </Label>
@@ -2421,7 +2421,7 @@ function AdjustOutcomeView({ adjustment }: AdjustOutcome) {
           {t("dialog.outcome.acceptedTitle")}
         </p>
         {rows.length > 0 && (
-          <div className="mt-2 space-y-1">
+          <div className="mt-2 flex flex-col gap-y-1">
             {rows.map((r) => (
               <div key={r.label} className="flex gap-2">
                 <span className="w-28 text-muted">{r.label}</span>
@@ -2470,7 +2470,7 @@ function AmountField({
 }) {
   const { t } = useTranslation("positions");
   return (
-    <div className="space-y-1.5">
+    <div className="flex flex-col gap-y-1.5">
       <div className="flex items-center gap-2">
         <input
           type="checkbox"
@@ -2541,7 +2541,7 @@ function BoundsField({
 }) {
   const { t } = useTranslation("positions");
   return (
-    <div className="space-y-1.5">
+    <div className="flex flex-col gap-y-1.5">
       <div className="flex items-center gap-2">
         <input
           type="checkbox"
@@ -2556,7 +2556,7 @@ function BoundsField({
       </div>
       {field.enabled && (
         <div className="ml-5 grid grid-cols-2 gap-2">
-          <div className="space-y-1">
+          <div className="flex flex-col gap-y-1">
             <Label className="text-[0.6875rem] text-muted">
               {t("dialog.bounds.lower")}
             </Label>
@@ -2571,7 +2571,7 @@ function BoundsField({
               clearLabel={t("common:filters.clearField")}
             />
           </div>
-          <div className="space-y-1">
+          <div className="flex flex-col gap-y-1">
             <Label className="text-[0.6875rem] text-muted">
               {t("dialog.bounds.upper")}
             </Label>
@@ -2918,11 +2918,11 @@ function AdjustDialog({
             <DialogDescription>{t("dialog.description")}</DialogDescription>
           </DialogHeader>
 
-          <div className="space-y-4">
+          <div className="flex flex-col gap-y-4">
             {/* Account + asset */}
             <div className={cn("grid gap-3", showsAccounts && "grid-cols-2")}>
               {showsAccounts && (
-                <div className="space-y-1.5">
+                <div className="flex flex-col gap-y-1.5">
                   <Label htmlFor="adj-account">
                     {t("dialog.fields.account")}
                   </Label>
@@ -2939,7 +2939,7 @@ function AdjustDialog({
                   />
                 </div>
               )}
-              <div className="space-y-1.5">
+              <div className="flex flex-col gap-y-1.5">
                 <Label htmlFor="adj-asset">{t("dialog.fields.asset")}</Label>
                 <Autocomplete
                   id="adj-asset"
@@ -2965,7 +2965,7 @@ function AdjustDialog({
               disabled={busy}
             />
 
-            <div className="space-y-1.5">
+            <div className="flex flex-col gap-y-1.5">
               <Label htmlFor="adj-realized-pnl">
                 {t("dialog.fields.realizedPnl")}
               </Label>
@@ -2984,7 +2984,7 @@ function AdjustDialog({
             </div>
 
             {/* Average entry price */}
-            <div className="space-y-1.5">
+            <div className="flex flex-col gap-y-1.5">
               <Label htmlFor="adj-aep">
                 {t("dialog.fields.avgEntryPrice")}
               </Label>
@@ -3005,7 +3005,7 @@ function AdjustDialog({
             </div>
 
             {/* Amount fields */}
-            <div className="space-y-3 rounded-card border border-border p-3">
+            <div className="flex flex-col gap-y-3 rounded-card border border-border p-3">
               <p className="text-[0.6875rem] uppercase tracking-[0.07em] text-muted">
                 {t("dialog.amounts.sectionLabel")}
               </p>
@@ -3030,7 +3030,7 @@ function AdjustDialog({
             </div>
 
             {/* Bounds fields */}
-            <div className="space-y-3 rounded-card border border-border p-3">
+            <div className="flex flex-col gap-y-3 rounded-card border border-border p-3">
               <p className="text-[0.6875rem] uppercase tracking-[0.07em] text-muted">
                 {t("dialog.bounds.sectionLabel")}
               </p>
diff --git a/web/src/pages/Service.tsx b/web/src/pages/Service.tsx
index ad75a5b5..928f737b 100644
--- a/web/src/pages/Service.tsx
+++ b/web/src/pages/Service.tsx
@@ -497,11 +497,11 @@ export function BackupCard() {
       <CardHeader>
         <CardTitle>{t("backup.title")}</CardTitle>
       </CardHeader>
-      <CardContent className="space-y-4">
+      <CardContent className="flex flex-col gap-y-4">
         <Tabs
           value={workflow}
           onValueChange={(value) => setWorkflow(value as BackupWorkflow)}
-          className="space-y-4"
+          className="flex flex-col gap-y-4"
         >
           <TabsList aria-label={t("backup.tabs.ariaLabel")}>
             {backupWorkflowTabs.map(({ id, labelKey, icon: Icon }) => (
@@ -512,9 +512,9 @@ export function BackupCard() {
             ))}
           </TabsList>
 
-          <TabsContent value="export" className="space-y-4">
+          <TabsContent value="export" className="flex flex-col gap-y-4">
             {scopeControls}
-            <div className="space-y-2">
+            <div className="flex flex-col gap-y-2">
               <label className="flex w-fit items-center gap-2 text-xs text-muted">
                 <input
                   type="checkbox"
@@ -565,7 +565,7 @@ export function BackupCard() {
               )}
             </div>
           </TabsContent>
-          <TabsContent value="restore" className="space-y-4">
+          <TabsContent value="restore" className="flex flex-col gap-y-4">
             {scopeControls}
             <div className="rounded-card border border-[var(--danger)] bg-[var(--danger-dim)] px-3 py-2 text-xs text-[var(--danger)]">
               <div className="flex items-start gap-2">
@@ -578,7 +578,7 @@ export function BackupCard() {
                 </p>
               </div>
             </div>
-            <div className="space-y-3">
+            <div className="flex flex-col gap-y-3">
               <div className="grid gap-2">
                 {restoreModes.map((mode) => (
                   <label key={mode} className="flex items-center gap-2 text-xs">
@@ -692,7 +692,7 @@ function BackupScopeControls(props: {
   const { showsAccounts } = accountScope();
 
   return (
-    <div className="space-y-4">
+    <div className="flex flex-col gap-y-4">
       <label className="inline-flex w-fit items-center gap-2 text-xs text-text">
         <input
           type="checkbox"
@@ -786,7 +786,7 @@ function SelectorBox(props: {
   groupsPlaceholder: string;
 }) {
   return (
-    <div className="space-y-2 rounded-card border border-border p-3">
+    <div className="flex flex-col gap-y-2 rounded-card border border-border p-3">
       <p className="text-xs font-medium text-muted">{props.title}</p>
       <label className="flex items-center gap-2 text-xs text-text">
         <input
@@ -929,7 +929,7 @@ export function ServiceLifecycleCard({
       <CardHeader>
         <CardTitle>{t("lifecycle.title")}</CardTitle>
       </CardHeader>
-      <CardContent className="space-y-3">
+      <CardContent className="flex flex-col gap-y-3">
         <div className="flex items-start gap-2 rounded-card border border-[var(--danger)]/35 bg-[var(--danger)]/10 p-3 text-xs text-text">
           <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-[var(--danger)]" />
           <p>{t("lifecycle.warning")}</p>
@@ -1173,7 +1173,7 @@ export function ServiceCard({
     <Tabs
       value={activeTab}
       onValueChange={(value) => onTabChange(value as ServiceTab)}
-      className="space-y-4 animate-fade-in"
+      className="flex flex-col gap-y-4 animate-fade-in"
     >
       <AccountModeRestartNotice
         load={accountMode.load}
@@ -1195,7 +1195,7 @@ export function ServiceCard({
         ))}
       </TabsList>
 
-      <TabsContent value="application" className="space-y-4">
+      <TabsContent value="application" className="flex flex-col gap-y-4">
         <Card>
           <CardHeader>
             <CardTitle>{t("application.title")}</CardTitle>
@@ -1295,7 +1295,7 @@ export function ServiceCard({
         </Card>
       </TabsContent>
 
-      <TabsContent value="account-mode" className="space-y-4">
+      <TabsContent value="account-mode" className="flex flex-col gap-y-4">
         <AccountModeCard
           poll={accountMode}
           restart={onAccountModeRestart}
@@ -1303,7 +1303,7 @@ export function ServiceCard({
         />
       </TabsContent>
 
-      <TabsContent value="database" className="space-y-4">
+      <TabsContent value="database" className="flex flex-col gap-y-4">
         <DatabaseCard database={info.database} onReset={onDatabaseReset} />
         <BackupCard />
       </TabsContent>
@@ -1313,7 +1313,7 @@ export function ServiceCard({
           <CardHeader>
             <CardTitle>{t("api.title")}</CardTitle>
           </CardHeader>
-          <CardContent className="space-y-4">
+          <CardContent className="flex flex-col gap-y-4">
             <div>
               <p className="mb-1.5 text-xs font-medium text-muted">
                 {t("api.rest")}
@@ -1363,8 +1363,8 @@ export function ServiceCard({
                   {t("api.noCommands")}
                 </p>
               ) : (
-                <div className="space-y-3">
-                  <div className="space-y-1">
+                <div className="flex flex-col gap-y-3">
+                  <div className="flex flex-col gap-y-1">
                     {mcpCommands.map((cmd) => (
                       <div
                         key={cmd.name}
@@ -1400,7 +1400,7 @@ export function ServiceCard({
         <LogsCard />
       </TabsContent>
 
-      <TabsContent value="security" className="space-y-4">
+      <TabsContent value="security" className="flex flex-col gap-y-4">
         <AccessTokensProvider>
           <AccessSection />
           <StorageSection />
@@ -1532,14 +1532,14 @@ export function Service() {
           role="status"
           aria-busy="true"
           aria-label={tc("states.loading")}
-          className="space-y-4"
+          className="flex flex-col gap-y-4"
         >
           {[0, 1, 2].map((i) => (
             <Card key={i} className="animate-pulse">
               <CardHeader>
                 <div className="h-3 w-20 rounded bg-border" />
               </CardHeader>
-              <CardContent className="space-y-3">
+              <CardContent className="flex flex-col gap-y-3">
                 <div className="h-3 w-full rounded bg-border" />
                 <div className="h-3 w-4/5 rounded bg-border" />
               </CardContent>
diff --git a/web/src/pages/Setup.tsx b/web/src/pages/Setup.tsx
index d62dd40c..3ba85030 100644
--- a/web/src/pages/Setup.tsx
+++ b/web/src/pages/Setup.tsx
@@ -663,8 +663,8 @@ function Wizard({ pass }: { pass: WizardPass }) {
         />
         <main className="flex min-w-0 flex-1 flex-col md:overflow-hidden">
           <div className="flex-1 md:overflow-y-auto">
-            <div className="mx-auto w-full max-w-3xl space-y-5 px-4 py-6 md:px-10 md:py-8">
-              <div className="ledger-masthead space-y-1 pb-3">
+            <div className="mx-auto w-full max-w-3xl flex flex-col gap-y-5 px-4 py-6 md:px-10 md:py-8">
+              <div className="ledger-masthead flex flex-col gap-y-1 pb-3">
                 <p className="text-[0.6875rem] font-medium uppercase tracking-[0.07em] text-muted">
                   {step === "welcome" && !review
                     ? t("firstStart")
diff --git a/web/src/pages/TradingConnections.tsx b/web/src/pages/TradingConnections.tsx
index cc4dff4d..96f57a3a 100644
--- a/web/src/pages/TradingConnections.tsx
+++ b/web/src/pages/TradingConnections.tsx
@@ -235,13 +235,13 @@ function AddTradingConnectionDialog({
           </DialogTitle>
         </DialogHeader>
         <form
-          className="space-y-4"
+          className="flex flex-col gap-y-4"
           onSubmit={(event) => {
             event.preventDefault();
             void submit();
           }}
         >
-          <div className="space-y-2">
+          <div className="flex flex-col gap-y-2">
             <Label htmlFor={`${id}-label`}>{tv("settings.label")}</Label>
             <Input
               id={`${id}-label`}
@@ -252,7 +252,7 @@ function AddTradingConnectionDialog({
               onChange={(event) => setLabel(event.target.value)}
             />
           </div>
-          <fieldset className="space-y-2" disabled={busy}>
+          <fieldset className="flex flex-col gap-y-2" disabled={busy}>
             <Label asChild>
               <legend>{t("create.mode")}</legend>
             </Label>
@@ -266,14 +266,17 @@ function AddTradingConnectionDialog({
             <p className="text-xs text-muted">{t("create.liveNote")}</p>
           </fieldset>
           <UnsealedKeysWarning storage={credentialStorage} />
-          <div className="space-y-3">
+          <div className="flex flex-col gap-y-3">
             <h2 className="text-sm font-bold">
               {t("create.prepareAccount", { provider: provider.title })}
             </h2>
             {guide?.steps && (
-              <ol className="list-outside list-decimal space-y-4 pl-5 text-sm">
+              <ol className="list-outside list-decimal flex flex-col gap-y-4 pl-5 text-sm">
                 {guide.steps.map((instruction) => (
-                  <li key={instruction.textKey} className="space-y-2 pl-1">
+                  <li
+                    key={instruction.textKey}
+                    className="flex flex-col gap-y-2 pl-1"
+                  >
                     <p>{t(instruction.textKey)}</p>
                     {instruction.links.length > 0 && (
                       <div className="flex flex-wrap gap-3">
@@ -295,7 +298,7 @@ function AddTradingConnectionDialog({
               </ol>
             )}
           </div>
-          <div className="space-y-2">
+          <div className="flex flex-col gap-y-2">
             <Label htmlFor={`${id}-api-key`}>{tv("settings.apiKey")}</Label>
             <Input
               id={`${id}-api-key`}
@@ -307,7 +310,7 @@ function AddTradingConnectionDialog({
               onChange={(event) => setApiKey(event.target.value)}
             />
           </div>
-          <div className="space-y-2">
+          <div className="flex flex-col gap-y-2">
             <Label htmlFor={`${id}-api-secret`}>
               {tv("settings.apiSecret")}
             </Label>
@@ -403,7 +406,7 @@ function ConnectionSettingsDialog({
     >
       <DialogContent className="max-h-[90vh] overflow-y-auto">
         <form
-          className="space-y-4"
+          className="flex flex-col gap-y-4"
           onSubmit={(event) => {
             event.preventDefault();
             void submit();
@@ -414,7 +417,7 @@ function ConnectionSettingsDialog({
             <DialogDescription>{t("settings.description")}</DialogDescription>
           </DialogHeader>
           {error && <ErrorBanner message={error} />}
-          <div className="space-y-2">
+          <div className="flex flex-col gap-y-2">
             <Label htmlFor={`${id}-label`}>{tv("settings.label")}</Label>
             <Input
               id={`${id}-label`}
@@ -425,7 +428,7 @@ function ConnectionSettingsDialog({
             />
           </div>
           <UnsealedKeysWarning storage={credentialStorage} />
-          <div className="space-y-2">
+          <div className="flex flex-col gap-y-2">
             <Label htmlFor={`${id}-api-key`}>{tv("settings.apiKey")}</Label>
             <Input
               id={`${id}-api-key`}
@@ -439,7 +442,7 @@ function ConnectionSettingsDialog({
               disabled={busy}
             />
           </div>
-          <div className="space-y-2">
+          <div className="flex flex-col gap-y-2">
             <Label htmlFor={`${id}-api-secret`}>
               {tv("settings.apiSecret")}
             </Label>
@@ -497,7 +500,7 @@ function ConnectionCheckSection({
       ref={checkSection}
       tabIndex={-1}
       aria-label={t("actions.check")}
-      className="space-y-2"
+      className="flex flex-col gap-y-2"
     >
       <Button
         type="button"
@@ -536,7 +539,7 @@ function VenueAccountField({
   const { t: tv } = useTranslation("venues");
   const { t: tc } = useTranslation();
   return (
-    <div className="space-y-2">
+    <div className="flex flex-col gap-y-2">
       <Label htmlFor={`${id}-venue-account`}>{tv("venueAccount")}</Label>
       <ClearableInput
         id={`${id}-venue-account`}
@@ -603,7 +606,7 @@ function ConnectionAccessSection({
       ref={accessSection}
       tabIndex={-1}
       aria-labelledby={`${id}-access`}
-      className="space-y-3 border-t border-border pt-4"
+      className="flex flex-col gap-y-3 border-t border-border pt-4"
     >
       <h4 id={`${id}-access`} className="text-sm font-medium">
         {t("access.title")}
@@ -616,14 +619,14 @@ function ConnectionAccessSection({
       />
       <form
         aria-label={tv("actions.grantAccess")}
-        className="space-y-3"
+        className="flex flex-col gap-y-3"
         onSubmit={(event) => {
           event.preventDefault();
           void grantAccess();
         }}
       >
         <h5 className="text-xs font-medium">{tv("actions.grantAccess")}</h5>
-        <fieldset className="space-y-2" disabled={busy}>
+        <fieldset className="flex flex-col gap-y-2" disabled={busy}>
           <Label asChild>
             <legend>{t("access.grantTo")}</legend>
           </Label>
@@ -636,7 +639,7 @@ function ConnectionAccessSection({
             onChange={(value) => setSubjectKind(value as AccessSubjectKind)}
           />
         </fieldset>
-        <div className="space-y-2">
+        <div className="flex flex-col gap-y-2">
           <Label htmlFor={`${id}-subject`}>
             {tc(subjectKind === "account" ? "fields.account" : "fields.group")}
           </Label>
@@ -723,7 +726,7 @@ function DefaultAccountAccessSection({
       ref={accessSection}
       tabIndex={-1}
       aria-labelledby={`${id}-access`}
-      className="space-y-3 border-t border-border pt-4"
+      className="flex flex-col gap-y-3 border-t border-border pt-4"
     >
       <h4 id={`${id}-access`} className="text-sm font-medium">
         {t("access.title")}
@@ -763,7 +766,7 @@ function DefaultAccountAccessSection({
       {grant === undefined && (
         <form
           aria-label={tv("actions.grantAccess")}
-          className="space-y-3"
+          className="flex flex-col gap-y-3"
           onSubmit={(event) => {
             event.preventDefault();
             void grantAccess();
@@ -821,7 +824,7 @@ function ConnectionFeeAccountSection({
   return (
     <section
       aria-labelledby={`${id}-fee`}
-      className="space-y-3 border-t border-border pt-4"
+      className="flex flex-col gap-y-3 border-t border-border pt-4"
     >
       <h4 id={`${id}-fee`} className="text-sm font-medium">
         {t("fee.title")}
@@ -834,13 +837,13 @@ function ConnectionFeeAccountSection({
       </p>
       <form
         aria-label={t("fee.title")}
-        className="space-y-3"
+        className="flex flex-col gap-y-3"
         onSubmit={(event) => {
           event.preventDefault();
           void saveFeeAccount(false);
         }}
       >
-        <div className="space-y-2">
+        <div className="flex flex-col gap-y-2">
           <Label htmlFor={`${id}-fee-account`}>{t("fee.title")}</Label>
           <Autocomplete
             ref={feeInput}
@@ -1046,7 +1049,7 @@ function ConnectionInstrumentsSection({
       ref={instrumentSection}
       tabIndex={-1}
       aria-labelledby={`${id}-instruments`}
-      className="space-y-3 border-t border-border pt-4"
+      className="flex flex-col gap-y-3 border-t border-border pt-4"
     >
       <h4 id={`${id}-instruments`} className="text-sm font-medium">
         {t("instruments.title")}
@@ -1147,7 +1150,10 @@ function ConnectionInstrumentsSection({
       {missingAsset !== null &&
         (draft.baseAsset.trim() === missingAsset ||
           draft.quoteAsset.trim() === missingAsset) && (
-          <div role="alert" className="space-y-2 text-xs text-[var(--warn)]">
+          <div
+            role="alert"
+            className="flex flex-col gap-y-2 text-xs text-[var(--warn)]"
+          >
             <p>{t("instruments.assetMissing", { asset: missingAsset })}</p>
             <Button
               type="button"
@@ -1535,8 +1541,8 @@ function ConnectionCard({
           </>
         }
       />
-      <CardContent className="space-y-6">
-        <div className="space-y-1 text-xs">
+      <CardContent className="flex flex-col gap-y-6">
+        <div className="flex flex-col gap-y-1 text-xs">
           <dl className="flex flex-wrap gap-2">
             <dt className="text-muted">{tv("venueAccount")}</dt>
             <dd className="break-all">{connection.venueIdentity}</dd>
@@ -1557,11 +1563,11 @@ function ConnectionCard({
           </p>
         </div>
         {!connection.enabled && (
-          <div className="space-y-2">
+          <div className="flex flex-col gap-y-2">
             <h4 className="text-sm font-medium">{t("setup.title")}</h4>
             <ol
               aria-label={t("setup.title")}
-              className="list-inside list-decimal space-y-1 text-xs"
+              className="list-inside list-decimal flex flex-col gap-y-1 text-xs"
             >
               {steps.map((step) => (
                 <li key={step.key}>
@@ -1588,7 +1594,7 @@ function ConnectionCard({
           </div>
         )}
         {error && deleteSymbol === null && revokeSubject === null && (
-          <div className="space-y-2">
+          <div className="flex flex-col gap-y-2">
             <ErrorBanner message={error} />
             {feeRequired && showsFeeAccount && (
               <LinkButton onClick={focusFeeAccount}>
@@ -1735,7 +1741,7 @@ export function TradingConnections() {
         <ErrorState message={load.error} onRetry={reload} />
       )}
       {load.state === "ready" && (
-        <div className="space-y-4">
+        <div className="flex flex-col gap-y-4">
           <AddProviderButton
             label={t("actions.addConnection")}
             providerTypes={load.data.providers.map((provider) => provider.type)}
diff --git a/web/src/pages/dashboard/widgets.tsx b/web/src/pages/dashboard/widgets.tsx
index 2027db02..4763f5c8 100644
--- a/web/src/pages/dashboard/widgets.tsx
+++ b/web/src/pages/dashboard/widgets.tsx
@@ -110,7 +110,7 @@ export function CountsRow({ counts }: DashboardReadyWidgetProps) {
           key={label}
           type="button"
           onClick={() => navigate(route)}
-          className="animate-fade-in rounded-card text-left hover:bg-accent-dim focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          className="animate-fade-in rounded-card text-left hover:bg-accent-dim focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
         >
           <Card className="h-full pointer-events-none">
             <CardContent className="flex flex-col items-center gap-1 py-4 text-center">
@@ -404,7 +404,7 @@ function ActivityColumn({ group }: { group: ActivityGroup }) {
         <Activity className="h-3.5 w-3.5 shrink-0 text-muted" />
         <CardTitle className="text-xs">{t(group.labelKey)}</CardTitle>
       </CardHeader>
-      <CardContent className="flex-1 space-y-0 pb-2">
+      <CardContent className="flex-1 flex flex-col gap-y-0 pb-2">
         {group.entries.map((e) => (
           <ActivityItem key={e.ref} entry={e} route={group.route} />
         ))}
@@ -496,7 +496,7 @@ export function AuditStrip() {
         <CardTitle>{t("audit.title")}</CardTitle>
         <CompactStaleState load={load} />
       </CardHeader>
-      <CardContent className="space-y-0 pb-2">
+      <CardContent className="flex flex-col gap-y-0 pb-2">
         {load.state === "loading" && (
           <div className="flex items-center justify-center py-6">
             <Loader2 className="h-4 w-4 animate-spin text-muted" />