diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 36602cfa..6eb41273 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -24,12 +24,12 @@
       "devDependencies": {
         "@eslint/js": "9.39.1",
         "@playwright/test": "^1.61.1",
+        "@tailwindcss/postcss": "^4.3.3",
         "@testing-library/react": "^16.3.2",
         "@types/node": "^26.1.1",
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
         "@vitejs/plugin-react": "^4.3.1",
-        "autoprefixer": "^10.4.19",
         "eslint": "9.39.1",
         "eslint-config-prettier": "10.1.8",
         "eslint-plugin-react-hooks": "5.2.0",
@@ -39,7 +39,7 @@
         "knip": "6.27.0",
         "postcss": "^8.4.39",
         "prettier": "3.6.2",
-        "tailwindcss": "^3.4.6",
+        "tailwindcss": "^4.3.3",
         "typescript": "^5.5.3",
         "typescript-eslint": "8.46.0",
         "vite": "^5.3.4",
@@ -2427,6 +2427,289 @@
         "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/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/@tanstack/query-core": {
       "version": "5.101.0",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.101.0.tgz",
@@ -3147,34 +3430,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/any-promise": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/anymatch": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
-      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/arg": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -3210,43 +3465,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/autoprefixer": {
-      "version": "10.5.0",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.5.0.tgz",
-      "integrity": "sha512-FMhOoZV4+qR6aTUALKX2rEqGG+oyATvwBt9IIzVR5rMa2HRWPkxf+P+PAJLD1I/H5/II+HuZcBJYEFBpq39ong==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "browserslist": "^4.28.2",
-        "caniuse-lite": "^1.0.30001787",
-        "fraction.js": "^5.3.4",
-        "picocolors": "^1.1.1",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "bin": {
-        "autoprefixer": "bin/autoprefixer"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -3267,19 +3485,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": "1.1.16",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.16.tgz",
@@ -3372,16 +3577,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/camelcase-css": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
-      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001799",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001799.tgz",
@@ -3447,44 +3642,6 @@
         "node": ">= 16"
       }
     },
-    "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/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -3527,16 +3684,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/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -3566,19 +3713,6 @@
         "node": ">= 8"
       }
     },
-    "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",
@@ -3684,19 +3818,15 @@
         "node": ">=6"
       }
     },
-    "node_modules/didyoumean": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
       "dev": true,
-      "license": "Apache-2.0"
-    },
-    "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"
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
     },
     "node_modules/dom-accessibility-api": {
       "version": "0.5.16",
@@ -3728,6 +3858,20 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/enhanced-resolve": {
+      "version": "5.24.5",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.24.5.tgz",
+      "integrity": "sha512-L1l8TNvomm6UVW5B253AGxQagSQr+vGwhMlrrfRS2qmhx46AMpMVJKQYLvWYbysTMY8VoicOvzHzoHMbyzB+4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.3.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/entities": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
@@ -4246,20 +4390,6 @@
         "node": ">=18.3.0"
       }
     },
-    "node_modules/fraction.js": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
-      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/rawify"
-      }
-    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -4386,6 +4516,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/graphemer": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@@ -4574,35 +4711,6 @@
         "node": ">=0.8.19"
       }
     },
-    "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",
@@ -4651,13 +4759,13 @@
       "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==",
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
+      "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
       "dev": true,
       "license": "MIT",
       "bin": {
-        "jiti": "bin/jiti.js"
+        "jiti": "lib/jiti-cli.mjs"
       }
     },
     "node_modules/js-tokens": {
@@ -4844,16 +4952,6 @@
         }
       }
     },
-    "node_modules/knip/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/knip/node_modules/picomatch": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz",
@@ -4881,25 +4979,278 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/lilconfig": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
-      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+    "node_modules/lightningcss": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
+      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
       "dev": true,
-      "license": "MIT",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
       "engines": {
-        "node": ">=14"
+        "node": ">= 12.0.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/antonk52"
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.32.0",
+        "lightningcss-darwin-arm64": "1.32.0",
+        "lightningcss-darwin-x64": "1.32.0",
+        "lightningcss-freebsd-x64": "1.32.0",
+        "lightningcss-linux-arm-gnueabihf": "1.32.0",
+        "lightningcss-linux-arm64-gnu": "1.32.0",
+        "lightningcss-linux-arm64-musl": "1.32.0",
+        "lightningcss-linux-x64-gnu": "1.32.0",
+        "lightningcss-linux-x64-musl": "1.32.0",
+        "lightningcss-win32-arm64-msvc": "1.32.0",
+        "lightningcss-win32-x64-msvc": "1.32.0"
       }
     },
-    "node_modules/lines-and-columns": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "license": "MIT"
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
     },
     "node_modules/locate-path": {
       "version": "6.0.0",
@@ -5060,22 +5411,10 @@
       "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.12",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
-      "integrity": "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==",
+      "version": "3.3.18",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.18.tgz",
+      "integrity": "sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==",
       "dev": true,
       "funding": [
         {
@@ -5108,16 +5447,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/nwsapi": {
       "version": "2.2.24",
       "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.24.tgz",
@@ -5125,26 +5454,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/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -5310,13 +5619,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/path-parse": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/pathe": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
@@ -5354,26 +5656,6 @@
         "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/playwright": {
       "version": "1.61.1",
       "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.61.1.tgz",
@@ -5422,9 +5704,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.15",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
-      "integrity": "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==",
+      "version": "8.5.26",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.26.tgz",
+      "integrity": "sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ==",
       "dev": true,
       "funding": [
         {
@@ -5442,7 +5724,7 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.12",
+        "nanoid": "^3.3.17",
         "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
@@ -5450,140 +5732,6 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/postcss-import": {
-      "version": "15.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
-      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "postcss-value-parser": "^4.0.0",
-        "read-cache": "^1.0.0",
-        "resolve": "^1.1.7"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.0.0"
-      }
-    },
-    "node_modules/postcss-js": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
-      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "camelcase-css": "^2.0.1"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >= 16"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.21"
-      }
-    },
-    "node_modules/postcss-load-config": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
-      "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "lilconfig": "^3.1.1"
-      },
-      "engines": {
-        "node": ">= 18"
-      },
-      "peerDependencies": {
-        "jiti": ">=1.21.0",
-        "postcss": ">=8.0.9",
-        "tsx": "^4.8.1",
-        "yaml": "^2.4.2"
-      },
-      "peerDependenciesMeta": {
-        "jiti": {
-          "optional": true
-        },
-        "postcss": {
-          "optional": true
-        },
-        "tsx": {
-          "optional": true
-        },
-        "yaml": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/postcss-nested": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
-      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "postcss-selector-parser": "^6.1.1"
-      },
-      "engines": {
-        "node": ">=12.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.14"
-      }
-    },
-    "node_modules/postcss-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",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -5736,51 +5884,6 @@
         "node": ">=0.10.0"
       }
     },
-    "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/resolve": {
-      "version": "1.22.12",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
-      "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "is-core-module": "^2.16.1",
-        "path-parse": "^1.0.7",
-        "supports-preserve-symlinks-flag": "^1.0.0"
-      },
-      "bin": {
-        "resolve": "bin/resolve"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -6027,29 +6130,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "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",
@@ -6063,19 +6143,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",
@@ -6090,64 +6157,24 @@
       "license": "MIT"
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.19",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
-      "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.3.tgz",
+      "integrity": "sha512-gOhV3P7ufE62QDGg1zVaTgCR+EtPv92k2nIhVcVKcLmxT1sUBsQGhnZj175j+MqRt4zLF7ic+sCYjfhxMxj7YQ==",
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "arg": "^5.0.2",
-        "chokidar": "^3.6.0",
-        "didyoumean": "^1.2.2",
-        "dlv": "^1.1.3",
-        "fast-glob": "^3.3.2",
-        "glob-parent": "^6.0.2",
-        "is-glob": "^4.0.3",
-        "jiti": "^1.21.7",
-        "lilconfig": "^3.1.3",
-        "micromatch": "^4.0.8",
-        "normalize-path": "^3.0.0",
-        "object-hash": "^3.0.0",
-        "picocolors": "^1.1.1",
-        "postcss": "^8.4.47",
-        "postcss-import": "^15.1.0",
-        "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0",
-        "postcss-nested": "^6.2.0",
-        "postcss-selector-parser": "^6.1.2",
-        "resolve": "^1.22.8",
-        "sucrase": "^3.35.0"
-      },
-      "bin": {
-        "tailwind": "lib/cli.js",
-        "tailwindcss": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
+      "license": "MIT"
     },
-    "node_modules/thenify": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
-      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+    "node_modules/tapable": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.3.tgz",
+      "integrity": "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "any-promise": "^1.0.0"
-      }
-    },
-    "node_modules/thenify-all": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
-      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "thenify": ">= 3.1.0 < 4"
-      },
       "engines": {
-        "node": ">=0.8"
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
       }
     },
     "node_modules/tinybench": {
@@ -6314,13 +6341,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",
@@ -6436,13 +6456,6 @@
         "punycode": "^2.1.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": "5.4.21",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 69101a7c..ad753e01 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -37,12 +37,12 @@
   "devDependencies": {
     "@eslint/js": "9.39.1",
     "@playwright/test": "^1.61.1",
+    "@tailwindcss/postcss": "^4.3.3",
     "@testing-library/react": "^16.3.2",
     "@types/node": "^26.1.1",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
-    "autoprefixer": "^10.4.19",
     "eslint": "9.39.1",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-react-hooks": "5.2.0",
@@ -52,7 +52,7 @@
     "knip": "6.27.0",
     "postcss": "^8.4.39",
     "prettier": "3.6.2",
-    "tailwindcss": "^3.4.6",
+    "tailwindcss": "^4.3.3",
     "typescript": "^5.5.3",
     "typescript-eslint": "8.46.0",
     "vite": "^5.3.4",
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
index 2aa7205d..c2ddf748 100644
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
 };
diff --git a/frontend/src/components/AboutCell.tsx b/frontend/src/components/AboutCell.tsx
index 68ca37ea..e2af1a75 100644
--- a/frontend/src/components/AboutCell.tsx
+++ b/frontend/src/components/AboutCell.tsx
@@ -45,19 +45,19 @@ export default function AboutCell({ text, channelId }: { text: string | null; ch
         ref={pop.refs.setReference}
         {...pop.getReferenceProps()}
         tabIndex={0}
-        className="block max-w-[22rem] truncate text-muted cursor-help outline-none"
+        className="block max-w-88 truncate text-muted cursor-help outline-hidden"
       >
         {preview}
       </span>
       <PopoverSurface
         popover={pop}
-        className="glass w-[480px] max-h-[28rem] overflow-y-auto px-3.5 py-3 rounded-lg animate-[fadeIn_0.12s_ease]"
+        className="glass w-[480px] max-h-112 overflow-y-auto px-3.5 py-3 rounded-lg animate-[fadeIn_0.12s_ease]"
       >
         {/* Full About once the detail loads; until then the list's truncated description. */}
         {ch ? (
           <ChannelAboutContent ch={ch} />
         ) : (
-          <p className="text-sm whitespace-pre-wrap break-words leading-relaxed">{preview}</p>
+          <p className="text-sm whitespace-pre-wrap wrap-break-word leading-relaxed">{preview}</p>
         )}
       </PopoverSurface>
     </>
diff --git a/frontend/src/components/ActiveFilterChips.tsx b/frontend/src/components/ActiveFilterChips.tsx
index 545e46c7..a4fa8e61 100644
--- a/frontend/src/components/ActiveFilterChips.tsx
+++ b/frontend/src/components/ActiveFilterChips.tsx
@@ -34,7 +34,7 @@ export default function ActiveFilterChips({
           aria-label={t("feed.chips.remove", { name: f.label })}
           className="group inline-flex items-center gap-1 pl-2.5 pr-1.5 py-1 rounded-full border border-accent/40 bg-accent/10 text-accent text-xs hover:border-accent hover:bg-accent/20 transition"
         >
-          <span className="max-w-[14rem] truncate">{f.label}</span>
+          <span className="max-w-56 truncate">{f.label}</span>
           <X className="w-3 h-3 shrink-0 opacity-60 group-hover:opacity-100" />
         </button>
       ))}
diff --git a/frontend/src/components/AddToPlaylist.tsx b/frontend/src/components/AddToPlaylist.tsx
index ec0199bb..db0f5137 100644
--- a/frontend/src/components/AddToPlaylist.tsx
+++ b/frontend/src/components/AddToPlaylist.tsx
@@ -124,7 +124,7 @@ export default function AddToPlaylist({
                 // the floating element only). `toggle()` already no-ops while busy, so re-entrancy is
                 // guarded without touching focus; `aria-busy` on the list conveys the pending state.
                 label={playlistName(pl, t)}
-                className="w-full flex items-center gap-2 text-sm px-1.5 py-1.5 rounded-lg text-fg outline-none transition hover:bg-card/60 data-[active]:bg-[color-mix(in_srgb,var(--accent)_24%,transparent)]"
+                className="w-full flex items-center gap-2 text-sm px-1.5 py-1.5 rounded-lg text-fg outline-hidden transition hover:bg-card/60 data-active:bg-[color-mix(in_srgb,var(--accent)_24%,transparent)]"
               >
                 <span
                   className={`grid place-items-center w-4 h-4 rounded border ${
@@ -156,7 +156,7 @@ export default function AddToPlaylist({
                 }
               }}
               placeholder={t("playlists.newPlaylist")}
-              className="flex-1 min-w-0 bg-card border border-border rounded-md px-2 py-1 text-xs outline-none focus:border-accent"
+              className="flex-1 min-w-0 bg-card border border-border rounded-md px-2 py-1 text-xs outline-hidden focus:border-accent"
             />
           </div>
         </div>
diff --git a/frontend/src/components/AdminUsers.tsx b/frontend/src/components/AdminUsers.tsx
index acb6992b..35df421c 100644
--- a/frontend/src/components/AdminUsers.tsx
+++ b/frontend/src/components/AdminUsers.tsx
@@ -349,7 +349,7 @@ function AdminInvites() {
           value={newEmail}
           onChange={(e) => setNewEmail(e.target.value)}
           placeholder={t("settings.invites.addPlaceholder")}
-          className="flex-1 min-w-0 bg-card border border-border rounded-xl px-3 py-2 text-sm outline-none focus:border-accent"
+          className="flex-1 min-w-0 bg-card border border-border rounded-xl px-3 py-2 text-sm outline-hidden focus:border-accent"
         />
         <button
           type="submit"
@@ -468,7 +468,7 @@ function AdminDemo() {
           value={newEmail}
           onChange={(e) => setNewEmail(e.target.value)}
           placeholder={t("settings.demo.addPlaceholder")}
-          className="flex-1 min-w-0 bg-card border border-border rounded-xl px-3 py-2 text-sm outline-none focus:border-accent"
+          className="flex-1 min-w-0 bg-card border border-border rounded-xl px-3 py-2 text-sm outline-hidden focus:border-accent"
         />
         <button
           type="submit"
diff --git a/frontend/src/components/AnchoredPopover.tsx b/frontend/src/components/AnchoredPopover.tsx
index d77bd9f2..44050931 100644
--- a/frontend/src/components/AnchoredPopover.tsx
+++ b/frontend/src/components/AnchoredPopover.tsx
@@ -229,7 +229,7 @@ type ItemRole = "menuitem" | "menuitemradio" | "menuitemcheckbox" | "option";
  *  key. The recommended recipe is an accent tint — and note `bg-accent/NN` does NOT work here (the
  *  theme's `--accent` is a hex var, and Tailwind v3 can't inject alpha into it), so use a color-mix
  *  arbitrary value like the app's own glass idiom:
- *  `data-[active]:bg-[color-mix(in_srgb,var(--accent)_24%,transparent)] data-[active]:text-fg`. */
+ *  `data-active:bg-[color-mix(in_srgb,var(--accent)_24%,transparent)] data-active:text-fg`. */
 export function PopoverItem({
   children,
   onSelect,
diff --git a/frontend/src/components/ChannelAbout.tsx b/frontend/src/components/ChannelAbout.tsx
index bed97c35..621e271b 100644
--- a/frontend/src/components/ChannelAbout.tsx
+++ b/frontend/src/components/ChannelAbout.tsx
@@ -50,7 +50,7 @@ export default function ChannelAboutContent({ ch }: { ch: ChannelDetail }) {
   return (
     <>
       {ch.description ? (
-        <p className="text-sm whitespace-pre-wrap break-words leading-relaxed">
+        <p className="text-sm whitespace-pre-wrap wrap-break-word leading-relaxed">
           {linkify(ch.description)}
         </p>
       ) : (
@@ -81,7 +81,7 @@ export default function ChannelAboutContent({ ch }: { ch: ChannelDetail }) {
                 {/^[A-Za-z]{2}$/.test(ch.country) && (
                   // Real SVG flag (flag-icons) — Windows/Chrome don't render flag emoji.
                   <span
-                    className={`fi fi-${ch.country.toLowerCase()} rounded-sm shrink-0`}
+                    className={`fi fi-${ch.country.toLowerCase()} rounded-xs shrink-0`}
                     aria-hidden
                   />
                 )}
diff --git a/frontend/src/components/ChannelDiscovery.tsx b/frontend/src/components/ChannelDiscovery.tsx
index e122a3b0..6ea311cf 100644
--- a/frontend/src/components/ChannelDiscovery.tsx
+++ b/frontend/src/components/ChannelDiscovery.tsx
@@ -205,7 +205,7 @@ export default function ChannelDiscovery({
     <>
       {/* Intro + the table controls are fixed chrome; only the table rows scroll (sticky header). */}
       <PageToolbar>
-        <div className="px-4 pt-3 max-w-[96rem] mx-auto flex items-start justify-between gap-4">
+        <div className="px-4 pt-3 max-w-384 mx-auto flex items-start justify-between gap-4">
           <p className="text-xs text-muted leading-relaxed">{t("channels.discovery.intro")}</p>
           {/* Cards has no column headers, so a dropdown drives the sort + a pager (table uses its own). */}
           {layout === "cards" && (
@@ -224,7 +224,7 @@ export default function ChannelDiscovery({
           )}
         </div>
       </PageToolbar>
-      <div className="px-4 pb-4 max-w-[96rem] mx-auto">
+      <div className="px-4 pb-4 max-w-384 mx-auto">
         {query.isError && !query.data ? (
           <StateMessage tone="error" onRetry={() => query.refetch()}>
             {t("common.loadError")}
@@ -239,7 +239,7 @@ export default function ChannelDiscovery({
             persistKey={accountKey(LS.channelDiscoveryTable) ?? undefined}
             controlsPosition="both"
             controlsInBand
-            controlsBandClassName="px-4 max-w-[96rem] mx-auto"
+            controlsBandClassName="px-4 max-w-384 mx-auto"
             sort={sort}
             onSortChange={setSort}
             emptyText={t("channels.discovery.empty")}
diff --git a/frontend/src/components/ChannelPage.tsx b/frontend/src/components/ChannelPage.tsx
index 2b28dfe6..f15ffc3e 100644
--- a/frontend/src/components/ChannelPage.tsx
+++ b/frontend/src/components/ChannelPage.tsx
@@ -297,7 +297,7 @@ export default function ChannelPage({
           <button
             data-testid="channel-back"
             onClick={closeChannel}
-            className="absolute top-5 left-7 sm:left-9 z-base inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm bg-black/45 text-white hover:bg-black/65 backdrop-blur-sm"
+            className="absolute top-5 left-7 sm:left-9 z-base inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm bg-black/45 text-white hover:bg-black/65 backdrop-blur-xs"
           >
             <ArrowLeft className="w-4 h-4" />
             {t("channel.back")}
diff --git a/frontend/src/components/ChannelPicker.tsx b/frontend/src/components/ChannelPicker.tsx
index 1cdc9753..25957150 100644
--- a/frontend/src/components/ChannelPicker.tsx
+++ b/frontend/src/components/ChannelPicker.tsx
@@ -52,7 +52,7 @@ export default function ChannelPicker({
               key={id}
               onClick={() => toggle(id)}
               title={t("sidebar.channelRemove", { name: nameOf(id) })}
-              className="inline-flex items-center gap-1 max-w-full pl-2.5 pr-1.5 py-1 rounded-full bg-accent text-accent-fg text-xs shadow-sm hover:opacity-90 transition"
+              className="inline-flex items-center gap-1 max-w-full pl-2.5 pr-1.5 py-1 rounded-full bg-accent text-accent-fg text-xs shadow-xs hover:opacity-90 transition"
             >
               <span className="truncate">{nameOf(id)}</span>
               <X className="w-3 h-3 shrink-0" />
diff --git a/frontend/src/components/ChannelTags.tsx b/frontend/src/components/ChannelTags.tsx
index 8abed9f4..17b102ed 100644
--- a/frontend/src/components/ChannelTags.tsx
+++ b/frontend/src/components/ChannelTags.tsx
@@ -23,7 +23,7 @@ interface TagChipProps {
 
 function TagChip({ tag, onClick, title }: TagChipProps) {
   const cls =
-    "shrink-0 text-[10px] px-1.5 py-0.5 rounded-full bg-accent text-accent-fg border border-accent max-w-[9rem] truncate";
+    "shrink-0 text-[10px] px-1.5 py-0.5 rounded-full bg-accent text-accent-fg border border-accent max-w-36 truncate";
   return onClick ? (
     <button
       type="button"
@@ -75,7 +75,7 @@ function TagEditorMenu({
               checked={on}
               onSelect={() => onToggle(tg.id)}
               label={tg.name}
-              className={`w-full flex items-center gap-2 text-left text-xs px-2 py-1.5 rounded-md outline-none transition hover:bg-card data-[active]:bg-[color-mix(in_srgb,var(--accent)_24%,transparent)] data-[active]:text-fg ${
+              className={`w-full flex items-center gap-2 text-left text-xs px-2 py-1.5 rounded-md outline-hidden transition hover:bg-card data-active:bg-[color-mix(in_srgb,var(--accent)_24%,transparent)] data-active:text-fg ${
                 on ? "text-fg" : "text-muted"
               }`}
             >
@@ -111,7 +111,7 @@ function TagEditorMenu({
           }}
           maxLength={64}
           placeholder={t("channels.tags.createPlaceholder")}
-          className="flex-1 min-w-0 bg-transparent text-xs px-2 py-1 rounded-md border border-border focus:border-accent outline-none"
+          className="flex-1 min-w-0 bg-transparent text-xs px-2 py-1 rounded-md border border-border focus:border-accent outline-hidden"
         />
         <button
           type="button"
@@ -247,7 +247,7 @@ export function ChannelTagsControl({
     // collapses the rest into "+N". (max-w-full lets a narrower card shrink it.) Unbounded, the row
     // takes its container's width, so a wide header shows the tags inline instead of collapsing them.
     <div
-      className={`relative flex items-center gap-1 min-w-0 ${bounded ? "w-[12rem] max-w-full" : "w-full"}`}
+      className={`relative flex items-center gap-1 min-w-0 ${bounded ? "w-48 max-w-full" : "w-full"}`}
     >
       {/* Hidden measurer: all chips + a sample pill, laid out unbounded to read their true widths. */}
       <div
diff --git a/frontend/src/components/Channels.tsx b/frontend/src/components/Channels.tsx
index f5aa60f5..db2ccd5f 100644
--- a/frontend/src/components/Channels.tsx
+++ b/frontend/src/components/Channels.tsx
@@ -616,7 +616,7 @@ export default function Channels() {
   const cardPager = <Pager {...pagerProps} />;
 
   const tabs = (
-    <div className="px-4 pt-4 max-w-[96rem] mx-auto flex items-center justify-between gap-4 flex-wrap">
+    <div className="px-4 pt-4 max-w-384 mx-auto flex items-center justify-between gap-4 flex-wrap">
       <div className="flex flex-wrap items-center gap-1.5">
         {(["subscribed", "discovery", "blocked"] as ChannelsView[]).map((v) => (
           <button
@@ -648,7 +648,7 @@ export default function Channels() {
       <PageToolbar>
         {tabs}
         {view === "subscribed" && (
-          <div className="px-4 pt-2 pb-2 max-w-[96rem] mx-auto">
+          <div className="px-4 pt-2 pb-2 max-w-384 mx-auto">
             {/* Your tags (left) share one row with the two catalog-wide actions (right); the channel-name
           search lives in the shared top SearchBar, tag create/delete in the manager. */}
             <div className="flex items-center justify-between gap-4 flex-wrap">
@@ -700,7 +700,7 @@ export default function Channels() {
         {/* In table mode the status chips + pager ride in DataTable's own in-band controls row. The card
         layout has no such row, so surface the same status chips (left) and its pager (right) here. */}
         {view === "subscribed" && layout === "cards" && (
-          <div className="px-4 pb-2 max-w-[96rem] mx-auto flex items-center justify-between gap-3 flex-wrap">
+          <div className="px-4 pb-2 max-w-384 mx-auto flex items-center justify-between gap-3 flex-wrap">
             {statusChips}
             {cardPager}
           </div>
@@ -719,7 +719,7 @@ export default function Channels() {
         />
       ) : view === "blocked" ? (
         /* Blocked channels — videos from these are hidden everywhere and dropped from live search. */
-        <div className="px-4 pb-4 pt-3 max-w-[96rem] mx-auto">
+        <div className="px-4 pb-4 pt-3 max-w-384 mx-auto">
           {(blockedQuery.data?.length ?? 0) === 0 ? (
             <p className="text-sm text-muted py-8">{t("channels.blocked.empty")}</p>
           ) : (
@@ -756,7 +756,7 @@ export default function Channels() {
         /* No top padding: the sticky header sits flush at the scroller top so it doesn't shift when
          `position: sticky` engages on the first scroll (the band's controls row above gives the
          visual gap). */
-        <div className="px-4 pb-4 max-w-[96rem] mx-auto">
+        <div className="px-4 pb-4 max-w-384 mx-auto">
           {/* Channel table — only the rows scroll; the header row is sticky, and the controls row
             (status chips + pager) rides in the fixed band right above it (controlsInBand). The
             card layout swaps the table for a virtualized grid over the same rows (its pager and
@@ -776,7 +776,7 @@ export default function Channels() {
               controlsPosition="both"
               controlsLeading={statusChips}
               controlsInBand
-              controlsBandClassName="px-4 max-w-[96rem] mx-auto"
+              controlsBandClassName="px-4 max-w-384 mx-auto"
               sort={sort}
               onSortChange={setSort}
               rowClassName={(c) => (c.hidden ? "opacity-60" : "")}
@@ -953,7 +953,7 @@ function PriorityCell({
                 else if (e.key === "Escape") setEditing(false);
               }}
               aria-label={t("channels.row.priorityHint")}
-              className="absolute top-1/2 right-0 -translate-y-1/2 w-14 h-6 text-sm font-medium tabular-nums text-right bg-card border border-accent rounded px-1 outline-none z-popover [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
+              className="absolute top-1/2 right-0 -translate-y-1/2 w-14 h-6 text-sm font-medium tabular-nums text-right bg-card border border-accent rounded-sm px-1 outline-hidden z-popover [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
             />
           )}
         </span>
diff --git a/frontend/src/components/ChatThread.tsx b/frontend/src/components/ChatThread.tsx
index fab95959..58f96a5d 100644
--- a/frontend/src/components/ChatThread.tsx
+++ b/frontend/src/components/ChatThread.tsx
@@ -178,7 +178,7 @@ export default function ChatThread({
             return (
               <div key={m.id} className={`flex ${mine ? "justify-end" : "justify-start"}`}>
                 <div
-                  className={`max-w-[80%] rounded-2xl px-3 py-2 text-sm whitespace-pre-wrap break-words ${
+                  className={`max-w-[80%] rounded-2xl px-3 py-2 text-sm whitespace-pre-wrap wrap-break-word ${
                     mine ? "bg-accent text-accent-fg rounded-br-sm" : "bg-card rounded-bl-sm"
                   }`}
                 >
@@ -211,7 +211,7 @@ export default function ChatThread({
             }}
             rows={1}
             placeholder={t("messages.writePlaceholder")}
-            className="flex-1 resize-none max-h-28 bg-card border border-border rounded-xl px-3 py-2 text-sm outline-none focus:border-accent"
+            className="flex-1 resize-none max-h-28 bg-card border border-border rounded-xl px-3 py-2 text-sm outline-hidden focus:border-accent"
           />
           <button
             onClick={submit}
diff --git a/frontend/src/components/ColumnSortControl.tsx b/frontend/src/components/ColumnSortControl.tsx
index 70a80834..a9971a30 100644
--- a/frontend/src/components/ColumnSortControl.tsx
+++ b/frontend/src/components/ColumnSortControl.tsx
@@ -40,7 +40,7 @@ export default function ColumnSortControl<T>({
           onChange(key ? { key, dir: active?.key === key ? active.dir : "asc" } : null);
         }}
         aria-label={label}
-        className="bg-card border border-border rounded-lg px-2 py-1.5 text-sm outline-none focus:border-accent"
+        className="bg-card border border-border rounded-lg px-2 py-1.5 text-sm outline-hidden focus:border-accent"
       >
         <option value="">{defaultLabel}</option>
         {sortable.map((c) => (
diff --git a/frontend/src/components/ConfigPanel.tsx b/frontend/src/components/ConfigPanel.tsx
index 7dae0a20..3b61681f 100644
--- a/frontend/src/components/ConfigPanel.tsx
+++ b/frontend/src/components/ConfigPanel.tsx
@@ -370,7 +370,7 @@ function Field({
             max={isNum && item.max != null ? item.max : undefined}
             placeholder={item.secret ? "••••••••" : String(item.default ?? "")}
             aria-label={t(`config.fields.${item.key}.label`, item.key)}
-            className="w-52 bg-card border border-border rounded-xl px-3 py-1.5 text-sm outline-none focus:border-accent disabled:opacity-50"
+            className="w-52 bg-card border border-border rounded-xl px-3 py-1.5 text-sm outline-hidden focus:border-accent disabled:opacity-50"
           />
         )}
         {showReset && !secretDisabled && (
diff --git a/frontend/src/components/DownloadCenter.tsx b/frontend/src/components/DownloadCenter.tsx
index 2effa7fb..1a98c288 100644
--- a/frontend/src/components/DownloadCenter.tsx
+++ b/frontend/src/components/DownloadCenter.tsx
@@ -181,7 +181,7 @@ function SourceRef({ url }: { url: string }) {
         onClick={copy}
         aria-label={t("downloads.source.copy")}
         title={t("downloads.source.copy")}
-        className="shrink-0 p-0.5 rounded hover:bg-surface hover:text-fg transition"
+        className="shrink-0 p-0.5 rounded-sm hover:bg-surface hover:text-fg transition"
       >
         <Copy className="w-3 h-3" />
       </button>
@@ -227,7 +227,7 @@ function DownloadRow({
       <div className="min-w-0 flex-1">
         <div className="font-medium leading-snug line-clamp-1 flex items-center gap-1.5">
           {job.job_kind === "edit" && (
-            <span className="inline-flex items-center gap-1 shrink-0 px-1.5 py-0.5 rounded text-[10px] font-semibold uppercase tracking-wide bg-accent/15 text-accent">
+            <span className="inline-flex items-center gap-1 shrink-0 px-1.5 py-0.5 rounded-sm text-[10px] font-semibold uppercase tracking-wide bg-accent/15 text-accent">
               <Scissors className="w-3 h-3" /> {t("downloads.clipBadge")}
             </span>
           )}
@@ -435,7 +435,7 @@ function ErrorModal({
               {t("downloads.errors.fail.detailsToggle")}
             </button>
             {showRaw && (
-              <pre className="mt-1.5 text-xs bg-surface rounded-lg p-2.5 overflow-x-auto whitespace-pre-wrap break-words max-h-40 text-muted">
+              <pre className="mt-1.5 text-xs bg-surface rounded-lg p-2.5 overflow-x-auto whitespace-pre-wrap wrap-break-word max-h-40 text-muted">
                 {job.error}
               </pre>
             )}
@@ -713,7 +713,7 @@ function AdminSystem() {
                 <span className="text-muted">{formatBytes(u.footprint_bytes)}</span>
                 <button
                   onClick={() => setQuotaFor({ id: u.user_id, email: u.email ?? "" })}
-                  className="p-1 rounded hover:bg-surface text-muted hover:text-fg"
+                  className="p-1 rounded-sm hover:bg-surface text-muted hover:text-fg"
                   title={t("downloads.admin.editQuota")}
                 >
                   <Settings2 className="w-4 h-4" />
diff --git a/frontend/src/components/Feed.tsx b/frontend/src/components/Feed.tsx
index 4573e1ce..a8a73149 100644
--- a/frontend/src/components/Feed.tsx
+++ b/frontend/src/components/Feed.tsx
@@ -410,7 +410,7 @@ export default function Feed({
                 value={ytCount}
                 onChange={(e) => setYtCount(Number(e.target.value))}
                 title={t("feed.yt.showHint")}
-                className="bg-card border border-border rounded-lg px-2 py-1 text-xs outline-none focus:border-accent"
+                className="bg-card border border-border rounded-lg px-2 py-1 text-xs outline-hidden focus:border-accent"
               >
                 {[20, 40, 60, 100].map((n) => (
                   <option key={n} value={n}>
@@ -603,7 +603,7 @@ export default function Feed({
                   })
                 }
                 title={t("feed.source.tip")}
-                className="bg-card border border-border rounded-lg px-2 py-1 text-xs outline-none focus:border-accent"
+                className="bg-card border border-border rounded-lg px-2 py-1 text-xs outline-hidden focus:border-accent"
               >
                 <option value="organic">{t("feed.source.organic")}</option>
                 <option value="all">{t("feed.source.all")}</option>
@@ -637,7 +637,7 @@ export default function Feed({
               });
             }}
             aria-label={t("feed.sortLabel")}
-            className="bg-card border border-border rounded-lg px-2 py-1.5 text-sm outline-none focus:border-accent"
+            className="bg-card border border-border rounded-lg px-2 py-1.5 text-sm outline-hidden focus:border-accent"
           >
             {/* Relevance only ranks meaningfully when there's a search term — offer it then. */}
             {(filters.q.trim() ? (["relevance", ...sortKeys] as SortKey[]) : sortKeys).map((k) => (
diff --git a/frontend/src/components/GlassTuner.tsx b/frontend/src/components/GlassTuner.tsx
index 62ca5add..da92a335 100644
--- a/frontend/src/components/GlassTuner.tsx
+++ b/frontend/src/components/GlassTuner.tsx
@@ -327,7 +327,7 @@ export default function GlassTuner() {
                     onClick={() => setTab(t)}
                     className={`flex-1 rounded-lg px-2 py-1 text-xs capitalize ${
                       tab === t
-                        ? "bg-accent text-[color:var(--accent-fg)] font-semibold"
+                        ? "bg-accent text-(--accent-fg) font-semibold"
                         : "glass-card text-muted"
                     }`}
                   >
@@ -361,7 +361,7 @@ export default function GlassTuner() {
                         type="color"
                         value={swatches[p.k] || "#000000"}
                         onChange={(e) => setColor(p.k, e.target.value)}
-                        className="w-8 h-6 rounded border border-border bg-transparent cursor-pointer"
+                        className="w-8 h-6 rounded-sm border border-border bg-transparent cursor-pointer"
                       />
                       <span className="flex-1">{p.label}</span>
                       <code className="text-[10px] text-muted">{swatches[p.k]}</code>
@@ -385,7 +385,7 @@ export default function GlassTuner() {
                 <div className="flex gap-1.5">
                   <button
                     onClick={copy}
-                    className="flex-1 rounded-lg px-2 py-1.5 text-xs font-semibold bg-accent text-[color:var(--accent-fg)]"
+                    className="flex-1 rounded-lg px-2 py-1.5 text-xs font-semibold bg-accent text-(--accent-fg)"
                   >
                     {copied ? "Copied ✓" : "Copy CSS"}
                   </button>
@@ -396,7 +396,7 @@ export default function GlassTuner() {
                     Reset
                   </button>
                 </div>
-                <pre className="text-[9.5px] leading-relaxed bg-[color:var(--bg)] border border-border/60 rounded-lg p-2 overflow-x-auto text-muted whitespace-pre">
+                <pre className="text-[9.5px] leading-relaxed bg-(--bg) border border-border/60 rounded-lg p-2 overflow-x-auto text-muted whitespace-pre">
                   {cssOut}
                 </pre>
               </div>
@@ -419,7 +419,7 @@ function Ctl({ s, value, onChange }: { s: Slider; value: number; onChange: (v: n
         step={s.step}
         value={value}
         onChange={(e) => onChange(Number(e.target.value))}
-        className="w-16 text-right text-[11px] tabular-nums rounded bg-card border border-border px-1.5 py-0.5 text-accent"
+        className="w-16 text-right text-[11px] tabular-nums rounded-sm bg-card border border-border px-1.5 py-0.5 text-accent"
       />
       <input
         type="range"
diff --git a/frontend/src/components/KeyGate.tsx b/frontend/src/components/KeyGate.tsx
index 58c36298..73168420 100644
--- a/frontend/src/components/KeyGate.tsx
+++ b/frontend/src/components/KeyGate.tsx
@@ -7,7 +7,7 @@ import { api, HttpError } from "../lib/api";
 import * as e2ee from "../lib/e2ee";
 
 const inputCls =
-  "w-full bg-card border border-border rounded-xl px-3 py-2 text-sm outline-none focus:border-accent";
+  "w-full bg-card border border-border rounded-xl px-3 py-2 text-sm outline-hidden focus:border-accent";
 
 // Secure-messaging key gate: first-run setup (choose a passphrase) or unlock on this device.
 // Self-contained — on success it updates the shared e2ee unlock state, so any observing view
diff --git a/frontend/src/components/LanguageSwitcher.tsx b/frontend/src/components/LanguageSwitcher.tsx
index 8f427c68..7d861319 100644
--- a/frontend/src/components/LanguageSwitcher.tsx
+++ b/frontend/src/components/LanguageSwitcher.tsx
@@ -56,7 +56,7 @@ export default function LanguageSwitcher({
         {rail ? (
           /* Current-language badge (HU/EN) so the active language reads at a glance without
              opening the menu. The ring matches the page background to detach it from the icon. */
-          <span className="absolute -bottom-1 -right-1 text-[8px] font-bold leading-none px-1 py-[1px] rounded bg-accent text-accent-fg ring-2 ring-bg">
+          <span className="absolute -bottom-1 -right-1 text-[8px] font-bold leading-none px-1 py-px rounded-sm bg-accent text-accent-fg ring-2 ring-bg">
             {current.code.toUpperCase()}
           </span>
         ) : (
@@ -78,7 +78,7 @@ export default function LanguageSwitcher({
               setOpen(false);
             }}
             label={l.label}
-            className="w-full flex items-center justify-between gap-2 text-sm px-2 py-2 rounded-lg text-muted outline-none transition hover:text-fg hover:bg-card data-[active]:bg-[color-mix(in_srgb,var(--accent)_24%,transparent)] data-[active]:text-fg"
+            className="w-full flex items-center justify-between gap-2 text-sm px-2 py-2 rounded-lg text-muted outline-hidden transition hover:text-fg hover:bg-card data-active:bg-[color-mix(in_srgb,var(--accent)_24%,transparent)] data-active:text-fg"
           >
             <span>{l.label}</span>
             {l.code === value && <Check className="w-4 h-4 text-accent" />}
diff --git a/frontend/src/components/Messages.tsx b/frontend/src/components/Messages.tsx
index cfe52d64..b1883d64 100644
--- a/frontend/src/components/Messages.tsx
+++ b/frontend/src/components/Messages.tsx
@@ -224,7 +224,7 @@ function Directory({ onPick, onBack }: { onPick: (u: MessageUser) => void; onBac
         value={filter}
         onChange={(e) => setFilter(e.target.value)}
         placeholder={t("messages.searchPeople")}
-        className="w-full bg-card border border-border rounded-xl px-3 py-2 text-sm outline-none focus:border-accent"
+        className="w-full bg-card border border-border rounded-xl px-3 py-2 text-sm outline-hidden focus:border-accent"
       />
       {q.isError && !q.data ? (
         <StateMessage tone="error" onRetry={() => q.refetch()}>
diff --git a/frontend/src/components/Modal.tsx b/frontend/src/components/Modal.tsx
index e6738433..b5687ac4 100644
--- a/frontend/src/components/Modal.tsx
+++ b/frontend/src/components/Modal.tsx
@@ -56,7 +56,7 @@ export default function Modal({
 
   return createPortal(
     <div
-      className="fixed inset-0 z-overlay flex items-center justify-center p-4 sm:p-6 bg-black/70 backdrop-blur-sm"
+      className="fixed inset-0 z-overlay flex items-center justify-center p-4 sm:p-6 bg-black/70 backdrop-blur-xs"
       onMouseDown={(e) => {
         pressedOnBackdrop.current = e.target === e.currentTarget;
       }}
diff --git a/frontend/src/components/NotificationsPanel.tsx b/frontend/src/components/NotificationsPanel.tsx
index 6b362b7a..a8d7e343 100644
--- a/frontend/src/components/NotificationsPanel.tsx
+++ b/frontend/src/components/NotificationsPanel.tsx
@@ -345,7 +345,7 @@ function ClientActivityRow({
       <Icon className={`w-4 h-4 shrink-0 mt-0.5 ${color}`} />
       <div className="min-w-0 flex-1">
         {n.title && <div className="text-sm font-semibold">{n.title}</div>}
-        <div className="text-sm break-words">
+        <div className="text-sm wrap-break-word">
           {n.message}
           {n.repeat > 1 && (
             <span className="ml-1.5 align-middle text-[11px] font-semibold text-muted tabular-nums">
diff --git a/frontend/src/components/PageScroller.tsx b/frontend/src/components/PageScroller.tsx
index 7c64ebc9..d73fcc78 100644
--- a/frontend/src/components/PageScroller.tsx
+++ b/frontend/src/components/PageScroller.tsx
@@ -107,7 +107,7 @@ export default function PageScroller({
     <main
       ref={setRef}
       style={fade.style}
-      className="flex-1 min-w-0 overflow-y-auto [scrollbar-gutter:stable]"
+      className="flex-1 min-w-0 overflow-y-auto scrollbar-gutter-stable"
     >
       {children}
     </main>
diff --git a/frontend/src/components/PageShell.tsx b/frontend/src/components/PageShell.tsx
index beb31979..a530eccd 100644
--- a/frontend/src/components/PageShell.tsx
+++ b/frontend/src/components/PageShell.tsx
@@ -55,7 +55,7 @@ export default function PageShell({
   return (
     <PageToolbarSlot.Provider value={toolbarSlot}>
       {header}
-      <div className={`flex-1 min-w-0 min-h-0 flex flex-col ${header ? "pt-[var(--hdr-h)]" : ""}`}>
+      <div className={`flex-1 min-w-0 min-h-0 flex flex-col ${header ? "pt-(--hdr-h)" : ""}`}>
         {banners}
         <div ref={setToolbarSlot} className="shrink-0" />
         <PageScroller scrollKey={scrollKey} fadeTop={fadeTop}>
diff --git a/frontend/src/components/Pager.tsx b/frontend/src/components/Pager.tsx
index 00505137..e7116833 100644
--- a/frontend/src/components/Pager.tsx
+++ b/frontend/src/components/Pager.tsx
@@ -87,7 +87,7 @@ export default function Pager({
               onBlur={commitPageInput}
               onKeyDown={(e) => e.key === "Enter" && commitPageInput()}
               aria-label={t("datatable.pager.pageLabel")}
-              className="w-14 bg-card border border-border rounded-md px-1.5 py-1 text-xs text-center tabular-nums outline-none focus:border-accent"
+              className="w-14 bg-card border border-border rounded-md px-1.5 py-1 text-xs text-center tabular-nums outline-hidden focus:border-accent"
             />
             {t("datatable.pager.ofTotal", { total: totalPages })}
           </span>
@@ -110,7 +110,7 @@ export default function Pager({
               onSizeChange(Number(e.target.value));
               scrollListToTop();
             }}
-            className="bg-card border border-border rounded-md px-1.5 py-1 text-xs outline-none focus:border-accent"
+            className="bg-card border border-border rounded-md px-1.5 py-1 text-xs outline-hidden focus:border-accent"
           >
             {pageSizeOptions.map((n) => (
               <option key={n} value={n}>
diff --git a/frontend/src/components/PlayerModal.tsx b/frontend/src/components/PlayerModal.tsx
index 3a4448a0..6187ec42 100644
--- a/frontend/src/components/PlayerModal.tsx
+++ b/frontend/src/components/PlayerModal.tsx
@@ -726,7 +726,7 @@ export default function PlayerModal({
     window.addEventListener("focus", rearm);
     stage?.addEventListener("mouseleave", rearm);
     return () => {
-      window.removeEventListener("blur", onBlur);
+      window.removeEventListener("blur-sm", onBlur);
       window.removeEventListener("focus", rearm);
       stage?.removeEventListener("mouseleave", rearm);
     };
@@ -889,7 +889,7 @@ export default function PlayerModal({
     <div
       ref={dialogRef}
       data-testid="player-modal"
-      className="fixed inset-0 z-overlay flex items-center justify-center p-4 sm:p-6 bg-black/80 backdrop-blur-sm"
+      className="fixed inset-0 z-overlay flex items-center justify-center p-4 sm:p-6 bg-black/80 backdrop-blur-xs"
       onClick={onClose}
       role="dialog"
       aria-modal="true"
@@ -908,7 +908,7 @@ export default function PlayerModal({
             disabled={index === 0}
             aria-label={t("player.previous")}
             title={`${t("player.previous")} · Shift+←`}
-            className="absolute right-full top-0 bottom-0 mr-2 hidden w-12 place-items-center rounded-2xl bg-white/5 text-white/40 backdrop-blur-sm transition hover:bg-white/15 hover:text-white disabled:pointer-events-none disabled:opacity-0 sm:grid"
+            className="absolute right-full top-0 bottom-0 mr-2 hidden w-12 place-items-center rounded-2xl bg-white/5 text-white/40 backdrop-blur-xs transition hover:bg-white/15 hover:text-white disabled:pointer-events-none disabled:opacity-0 sm:grid"
           >
             <ChevronLeft className="h-8 w-8" />
           </button>
@@ -916,7 +916,7 @@ export default function PlayerModal({
         <div
           ref={cardRef}
           tabIndex={-1}
-          className="glass-card relative flex-1 min-w-0 max-h-full overflow-y-auto rounded-2xl shadow-2xl outline-none"
+          className="glass-card relative flex-1 min-w-0 max-h-full overflow-y-auto rounded-2xl shadow-2xl outline-hidden"
           onClick={(e) => e.stopPropagation()}
         >
           <div
@@ -1056,7 +1056,7 @@ export default function PlayerModal({
             )}
             {/* Discreet badge while YouTube's own controls have taken over (overlay yielded). */}
             {playerError == null && nativeControls && (
-              <div className="pointer-events-none absolute top-3 left-3 z-menu flex items-center gap-1.5 rounded-full bg-black/60 px-2.5 py-1 text-[11px] text-white/90 shadow-lg backdrop-blur-sm">
+              <div className="pointer-events-none absolute top-3 left-3 z-menu flex items-center gap-1.5 rounded-full bg-black/60 px-2.5 py-1 text-[11px] text-white/90 shadow-lg backdrop-blur-xs">
                 <Settings className="h-3.5 w-3.5" />
                 {t("player.nativeControls")}
               </div>
@@ -1150,7 +1150,7 @@ export default function PlayerModal({
                   <div
                     ref={descFade.ref}
                     style={descFade.style}
-                    className="text-sm whitespace-pre-wrap break-words max-h-64 overflow-y-auto no-scrollbar leading-relaxed"
+                    className="text-sm whitespace-pre-wrap wrap-break-word max-h-64 overflow-y-auto no-scrollbar leading-relaxed"
                   >
                     {renderDescription(detail.data.description, {
                       currentId: currentVideoId,
@@ -1250,7 +1250,7 @@ export default function PlayerModal({
                     <span>· {formatDuration(active.duration_seconds)}</span>
                   )}
                   {active.live_status === "was_live" && (
-                    <span className="bg-accent text-accent-fg text-[10px] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded">
+                    <span className="bg-accent text-accent-fg text-[10px] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded-sm">
                       {t("player.stream")}
                     </span>
                   )}
@@ -1314,7 +1314,7 @@ export default function PlayerModal({
                   className={
                     "shrink-0 inline-flex items-center gap-1.5 text-sm px-3 py-1.5 rounded-lg transition " +
                     (watched
-                      ? "bg-accent text-accent-fg shadow-sm hover:opacity-90"
+                      ? "bg-accent text-accent-fg shadow-xs hover:opacity-90"
                       : "text-muted hover:text-fg hover:bg-surface border border-border")
                   }
                 >
@@ -1334,7 +1334,7 @@ export default function PlayerModal({
             disabled={index >= queue!.length - 1}
             aria-label={t("player.next")}
             title={`${t("player.next")} · Shift+→`}
-            className="absolute left-full top-0 bottom-0 ml-2 hidden w-12 place-items-center rounded-2xl bg-white/5 text-white/40 backdrop-blur-sm transition hover:bg-white/15 hover:text-white disabled:pointer-events-none disabled:opacity-0 sm:grid"
+            className="absolute left-full top-0 bottom-0 ml-2 hidden w-12 place-items-center rounded-2xl bg-white/5 text-white/40 backdrop-blur-xs transition hover:bg-white/15 hover:text-white disabled:pointer-events-none disabled:opacity-0 sm:grid"
           >
             <ChevronRight className="h-8 w-8" />
           </button>
diff --git a/frontend/src/components/Playlists.tsx b/frontend/src/components/Playlists.tsx
index 3cdb3817..c1b50999 100644
--- a/frontend/src/components/Playlists.tsx
+++ b/frontend/src/components/Playlists.tsx
@@ -590,7 +590,7 @@ export default function Playlists() {
                     if (e.key === "Escape") setRenaming(false);
                   }}
                   aria-label={t("playlists.rename")}
-                  className="text-lg font-semibold bg-card border border-border rounded-md px-2 py-0.5 outline-none focus:border-accent"
+                  className="text-lg font-semibold bg-card border border-border rounded-md px-2 py-0.5 outline-hidden focus:border-accent"
                 />
               ) : (
                 <div className="flex items-center gap-2 min-w-0">
diff --git a/frontend/src/components/PlaylistsRail.tsx b/frontend/src/components/PlaylistsRail.tsx
index f0c7287d..ef119df0 100644
--- a/frontend/src/components/PlaylistsRail.tsx
+++ b/frontend/src/components/PlaylistsRail.tsx
@@ -154,7 +154,7 @@ export default function PlaylistsRail({
                 value={plSort.key}
                 onChange={(e) => setPlSort({ ...plSort, key: e.target.value as PlSort["key"] })}
                 aria-label={t("playlists.sortLabel")}
-                className="flex-1 min-w-0 bg-card border border-border rounded-md px-1.5 py-1 text-[11px] outline-none focus:border-accent"
+                className="flex-1 min-w-0 bg-card border border-border rounded-md px-1.5 py-1 text-[11px] outline-hidden focus:border-accent"
               >
                 <option value="custom">{t("playlists.railSortCustom")}</option>
                 <option value="name">{t("playlists.railSortName")}</option>
@@ -200,7 +200,7 @@ export default function PlaylistsRail({
               onChange={(e) => setNewName(e.target.value)}
               placeholder={t("playlists.newPlaylist")}
               disabled={!canWrite}
-              className="flex-1 min-w-0 bg-card border border-border rounded-md px-2 py-1 text-xs outline-none focus:border-accent disabled:opacity-50"
+              className="flex-1 min-w-0 bg-card border border-border rounded-md px-2 py-1 text-xs outline-hidden focus:border-accent disabled:opacity-50"
             />
           </form>
         </div>
diff --git a/frontend/src/components/PlexBrowse.tsx b/frontend/src/components/PlexBrowse.tsx
index c1e7d32d..5ae2b44f 100644
--- a/frontend/src/components/PlexBrowse.tsx
+++ b/frontend/src/components/PlexBrowse.tsx
@@ -470,7 +470,7 @@ function PlexPosterCard({
             onOpen();
           }
         }}
-        className="relative aspect-[2/3] rounded-xl overflow-hidden bg-card border border-border cursor-pointer"
+        className="relative aspect-2/3 rounded-xl overflow-hidden bg-card border border-border cursor-pointer"
       >
         <img
           src={card.thumb}
@@ -522,18 +522,18 @@ function PlexPosterCard({
         )}
         {/* Watched badge when not hovering (the toggle replaces it on hover). */}
         {card.status === "watched" && (
-          <span className="pointer-events-none absolute top-1.5 right-1.5 text-[10px] bg-black/70 text-white px-1.5 py-0.5 rounded group-hover:opacity-0">
+          <span className="pointer-events-none absolute top-1.5 right-1.5 text-[10px] bg-black/70 text-white px-1.5 py-0.5 rounded-sm group-hover:opacity-0">
             {t("plex.watched")}
           </span>
         )}
         {card.type === "show" && card.season_count != null && (
-          <span className="absolute bottom-1.5 left-1.5 text-[10px] bg-black/70 text-white px-1.5 py-0.5 rounded">
+          <span className="absolute bottom-1.5 left-1.5 text-[10px] bg-black/70 text-white px-1.5 py-0.5 rounded-sm">
             {t("plex.seasons", { count: card.season_count })}
           </span>
         )}
         {/* Aggregate in-progress badge for a partially-watched show. */}
         {card.type === "show" && card.status === "in_progress" && (
-          <span className="pointer-events-none absolute top-1.5 right-1.5 text-[10px] bg-black/75 text-accent px-1.5 py-0.5 rounded group-hover:opacity-0">
+          <span className="pointer-events-none absolute top-1.5 right-1.5 text-[10px] bg-black/75 text-accent px-1.5 py-0.5 rounded-sm group-hover:opacity-0">
             {t("plex.inProgress")}
           </span>
         )}
@@ -545,7 +545,7 @@ function PlexPosterCard({
         )}
         {/* Type tag — tell a movie card from a show card at a glance (unified feed). */}
         <span
-          className="absolute bottom-1.5 right-1.5 rounded bg-black/65 p-0.5 text-white/90"
+          className="absolute bottom-1.5 right-1.5 rounded-sm bg-black/65 p-0.5 text-white/90"
           title={t(
             card.type === "show" ? "plex.filter.scopeOpt.show" : "plex.filter.scopeOpt.movie",
           )}
@@ -670,7 +670,7 @@ function ActionBtn({
       onClick={onClick}
       disabled={disabled}
       className={`inline-flex items-center gap-2 rounded-xl px-3 py-2 text-sm font-medium transition disabled:opacity-50 ${
-        primary ? "bg-accent text-accent-fg shadow-sm hover:opacity-90" : "glass-card glass-hover"
+        primary ? "bg-accent text-accent-fg shadow-xs hover:opacity-90" : "glass-card glass-hover"
       }`}
     >
       <Icon className="w-4 h-4 shrink-0" />
@@ -707,7 +707,7 @@ function SeasonCard({
             onOpen();
           }
         }}
-        className="relative aspect-[2/3] rounded-xl overflow-hidden bg-card border border-border cursor-pointer"
+        className="relative aspect-2/3 rounded-xl overflow-hidden bg-card border border-border cursor-pointer"
       >
         <img
           src={se.thumb}
@@ -750,16 +750,16 @@ function SeasonCard({
           </button>
         )}
         {watched && (
-          <span className="pointer-events-none absolute top-1.5 right-1.5 text-[10px] bg-black/70 text-white px-1.5 py-0.5 rounded group-hover:opacity-0">
+          <span className="pointer-events-none absolute top-1.5 right-1.5 text-[10px] bg-black/70 text-white px-1.5 py-0.5 rounded-sm group-hover:opacity-0">
             {t("plex.watched")}
           </span>
         )}
         {se.status === "in_progress" && (
-          <span className="pointer-events-none absolute top-1.5 right-1.5 text-[10px] bg-black/75 text-accent px-1.5 py-0.5 rounded group-hover:opacity-0">
+          <span className="pointer-events-none absolute top-1.5 right-1.5 text-[10px] bg-black/75 text-accent px-1.5 py-0.5 rounded-sm group-hover:opacity-0">
             {t("plex.inProgress")}
           </span>
         )}
-        <span className="absolute bottom-1.5 left-1.5 text-[10px] bg-black/70 text-white px-1.5 py-0.5 rounded">
+        <span className="absolute bottom-1.5 left-1.5 text-[10px] bg-black/70 text-white px-1.5 py-0.5 rounded-sm">
           {t("plex.series.episodeCount", { count: se.episode_count })}
         </span>
       </div>
@@ -846,7 +846,7 @@ function RelatedStrip({ related, onOpen }: { related: PlexCard[]; onOpen: (id: s
             onClick={() => onOpen(r.id)}
             className="group w-[130px] shrink-0 text-left"
           >
-            <div className="relative aspect-[2/3] rounded-xl overflow-hidden bg-card border border-border">
+            <div className="relative aspect-2/3 rounded-xl overflow-hidden bg-card border border-border">
               <img
                 src={r.thumb}
                 alt=""
@@ -854,7 +854,7 @@ function RelatedStrip({ related, onOpen }: { related: PlexCard[]; onOpen: (id: s
                 className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
               />
               {r.status === "watched" && (
-                <span className="absolute top-1.5 right-1.5 text-[10px] bg-black/70 text-white px-1.5 py-0.5 rounded">
+                <span className="absolute top-1.5 right-1.5 text-[10px] bg-black/70 text-white px-1.5 py-0.5 rounded-sm">
                   {t("plex.watched")}
                 </span>
               )}
@@ -963,7 +963,7 @@ function EpisodeCard({
             onClick={onAdd}
             title={t("plex.playlist.addEpisode")}
             aria-label={t("plex.playlist.addEpisode")}
-            className="shrink-0 rounded p-1 text-muted transition hover:text-accent"
+            className="shrink-0 rounded-sm p-1 text-muted transition hover:text-accent"
           >
             <ListPlus className="w-4 h-4" />
           </button>
@@ -1054,7 +1054,7 @@ function PlexShowView({
               <img
                 src={show.thumb}
                 alt=""
-                className="w-full aspect-[2/3] object-cover rounded-xl border border-border"
+                className="w-full aspect-2/3 object-cover rounded-xl border border-border"
               />
               {show.resume && (
                 <div className="absolute inset-0 rounded-xl bg-black/40 opacity-0 group-hover/poster:opacity-100 transition grid place-items-center">
@@ -1286,7 +1286,7 @@ function PlexSeasonView({
               <img
                 src={se.thumb}
                 alt=""
-                className="w-full aspect-[2/3] object-cover rounded-xl border border-border"
+                className="w-full aspect-2/3 object-cover rounded-xl border border-border"
               />
               {se.resume && (
                 <div className="absolute inset-0 rounded-xl bg-black/40 opacity-0 group-hover/poster:opacity-100 transition grid place-items-center">
diff --git a/frontend/src/components/PlexCollectionEditor.tsx b/frontend/src/components/PlexCollectionEditor.tsx
index 2067fb33..89e1abd3 100644
--- a/frontend/src/components/PlexCollectionEditor.tsx
+++ b/frontend/src/components/PlexCollectionEditor.tsx
@@ -131,7 +131,7 @@ export default function PlexCollectionEditor({
           onChange={(e) => setNewName(e.target.value)}
           onKeyDown={(e) => e.key === "Enter" && createNew()}
           placeholder={t("plex.collEditor.newPlaceholder")}
-          className="glass-card min-w-0 flex-1 rounded-lg px-3 py-2 text-sm outline-none focus:border-accent"
+          className="glass-card min-w-0 flex-1 rounded-lg px-3 py-2 text-sm outline-hidden focus:border-accent"
         />
         <button
           onClick={createNew}
@@ -149,7 +149,7 @@ export default function PlexCollectionEditor({
           value={q}
           onChange={(e) => setQ(e.target.value)}
           placeholder={t("plex.collEditor.search")}
-          className="glass-card mb-2 w-full rounded-lg px-3 py-1.5 text-sm outline-none focus:border-accent"
+          className="glass-card mb-2 w-full rounded-lg px-3 py-1.5 text-sm outline-hidden focus:border-accent"
         />
       )}
 
@@ -193,7 +193,7 @@ export default function PlexCollectionEditor({
                 <button
                   onClick={() => removeCollection(c.id, c.title)}
                   disabled={!!busy}
-                  className="shrink-0 rounded px-1.5 py-0.5 text-xs text-muted hover:text-red-400 disabled:opacity-50"
+                  className="shrink-0 rounded-sm px-1.5 py-0.5 text-xs text-muted hover:text-red-400 disabled:opacity-50"
                 >
                   {t("plex.collEditor.delete")}
                 </button>
@@ -226,7 +226,7 @@ export default function PlexCollectionEditor({
                 <button
                   onClick={() => markEditable(c.id)}
                   disabled={!!busy}
-                  className="glass-card glass-hover shrink-0 rounded px-2 py-0.5 text-xs disabled:opacity-50"
+                  className="glass-card glass-hover shrink-0 rounded-sm px-2 py-0.5 text-xs disabled:opacity-50"
                 >
                   {t("plex.collEditor.makeEditable")}
                 </button>
diff --git a/frontend/src/components/PlexInfo.tsx b/frontend/src/components/PlexInfo.tsx
index e1f547ff..436eb799 100644
--- a/frontend/src/components/PlexInfo.tsx
+++ b/frontend/src/components/PlexInfo.tsx
@@ -145,7 +145,7 @@ export default function PlexInfo({
             <img
               src={detail.thumb}
               alt=""
-              className={`shrink-0 rounded-xl border border-border object-cover ${overlay ? "w-24 sm:w-28" : "w-32 sm:w-44"} aspect-[2/3]`}
+              className={`shrink-0 rounded-xl border border-border object-cover ${overlay ? "w-24 sm:w-28" : "w-32 sm:w-44"} aspect-2/3`}
             />
 
             <div className={`min-w-0 flex-1 ${overlay ? "text-white/90" : ""}`}>
@@ -412,14 +412,14 @@ export default function PlexInfo({
                     disabled={!onPlayItem}
                     className="group/col w-28 shrink-0 text-left"
                   >
-                    <div className="relative aspect-[2/3] overflow-hidden rounded-lg border border-border bg-surface">
+                    <div className="relative aspect-2/3 overflow-hidden rounded-lg border border-border bg-surface">
                       <img
                         src={m.thumb}
                         alt=""
                         className="h-full w-full object-cover transition group-hover/col:scale-105"
                       />
                       {m.status === "watched" && (
-                        <span className="absolute right-1 top-1 rounded bg-black/70 px-1 text-[9px] text-white">
+                        <span className="absolute right-1 top-1 rounded-sm bg-black/70 px-1 text-[9px] text-white">
                           ✓
                         </span>
                       )}
diff --git a/frontend/src/components/PlexPlayer.tsx b/frontend/src/components/PlexPlayer.tsx
index 225e089d..45a08e60 100644
--- a/frontend/src/components/PlexPlayer.tsx
+++ b/frontend/src/components/PlexPlayer.tsx
@@ -1110,7 +1110,7 @@ export default function PlexPlayer({ itemId, onClose, queue }: Props) {
 
       {/* Top bar */}
       <div
-        className={`absolute top-0 inset-x-0 p-4 bg-gradient-to-b from-black/70 to-transparent transition-opacity ${
+        className={`absolute top-0 inset-x-0 p-4 bg-linear-to-b from-black/70 to-transparent transition-opacity ${
           uiVisible ? "opacity-100" : "opacity-0"
         }`}
       >
@@ -1184,7 +1184,7 @@ export default function PlexPlayer({ itemId, onClose, queue }: Props) {
 
       {/* Bottom controls */}
       <div
-        className={`absolute bottom-0 inset-x-0 px-4 pb-3 pt-8 bg-gradient-to-t from-black/80 to-transparent transition-opacity ${
+        className={`absolute bottom-0 inset-x-0 px-4 pb-3 pt-8 bg-linear-to-t from-black/80 to-transparent transition-opacity ${
           uiVisible ? "opacity-100" : "opacity-0 pointer-events-none"
         }`}
       >
@@ -1221,7 +1221,7 @@ export default function PlexPlayer({ itemId, onClose, queue }: Props) {
           {/* Hover timestamp tooltip — follows the cursor along the bar. */}
           {hover && duration > 0 && (
             <div
-              className="pointer-events-none absolute bottom-full mb-2 -translate-x-1/2 rounded bg-black/90 px-1.5 py-0.5 text-[11px] tabular-nums text-white"
+              className="pointer-events-none absolute bottom-full mb-2 -translate-x-1/2 rounded-sm bg-black/90 px-1.5 py-0.5 text-[11px] tabular-nums text-white"
               style={{ left: `${hover.frac * 100}%` }}
             >
               {fmt(hover.t)}
@@ -1311,13 +1311,13 @@ export default function PlexPlayer({ itemId, onClose, queue }: Props) {
               />
               {/* thumb */}
               <div
-                className="absolute top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-accent shadow"
+                className="absolute top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-accent shadow-sm"
                 style={{ left: `${(muted ? 0 : volume) * 100}%` }}
               />
               {/* hover value tooltip (0–100), like the seek bar */}
               {volHover != null && (
                 <div
-                  className="pointer-events-none absolute bottom-full mb-2 -translate-x-1/2 rounded bg-black/90 px-1.5 py-0.5 text-[11px] tabular-nums text-white"
+                  className="pointer-events-none absolute bottom-full mb-2 -translate-x-1/2 rounded-sm bg-black/90 px-1.5 py-0.5 text-[11px] tabular-nums text-white"
                   style={{ left: `${volHover * 100}%` }}
                 >
                   {Math.round(volHover * 100)}
@@ -1544,7 +1544,7 @@ export default function PlexPlayer({ itemId, onClose, queue }: Props) {
                             type="color"
                             value={prefs.subColor}
                             onChange={(e) => patchPrefs({ subColor: e.target.value })}
-                            className="h-6 w-10 cursor-pointer rounded bg-transparent"
+                            className="h-6 w-10 cursor-pointer rounded-sm bg-transparent"
                           />
                         </div>
                         <div className="flex items-center justify-between px-1 py-1.5">
@@ -1570,7 +1570,7 @@ export default function PlexPlayer({ itemId, onClose, queue }: Props) {
                                 type="color"
                                 value={prefs.subBg}
                                 onChange={(e) => patchPrefs({ subBg: e.target.value })}
-                                className="h-6 w-10 cursor-pointer rounded bg-transparent"
+                                className="h-6 w-10 cursor-pointer rounded-sm bg-transparent"
                               />
                             )}
                           </div>
@@ -1593,7 +1593,7 @@ export default function PlexPlayer({ itemId, onClose, queue }: Props) {
                               type="color"
                               value={prefs.subShadowColor}
                               onChange={(e) => patchPrefs({ subShadowColor: e.target.value })}
-                              className="h-6 w-10 cursor-pointer rounded bg-transparent"
+                              className="h-6 w-10 cursor-pointer rounded-sm bg-transparent"
                             />
                           </div>
                         )}
@@ -1629,7 +1629,7 @@ export default function PlexPlayer({ itemId, onClose, queue }: Props) {
                             type="color"
                             value={prefs.clockColor}
                             onChange={(e) => patchPrefs({ clockColor: e.target.value })}
-                            className="h-6 w-10 cursor-pointer rounded bg-transparent"
+                            className="h-6 w-10 cursor-pointer rounded-sm bg-transparent"
                           />
                         </div>
                         <Toggle
@@ -1728,7 +1728,7 @@ export default function PlexPlayer({ itemId, onClose, queue }: Props) {
                     {keys.map((k) => (
                       <kbd
                         key={k}
-                        className="rounded bg-white/15 px-1.5 py-0.5 text-xs font-mono whitespace-nowrap"
+                        className="rounded-sm bg-white/15 px-1.5 py-0.5 text-xs font-mono whitespace-nowrap"
                       >
                         {k}
                       </kbd>
@@ -1879,7 +1879,7 @@ function Ctrl({
         {children}
       </button>
       <span
-        className={`pointer-events-none absolute bottom-full ${pos} mb-2 whitespace-nowrap rounded bg-black/90 px-2 py-1 text-[11px] text-white opacity-0 transition group-hover/ctrl:opacity-100`}
+        className={`pointer-events-none absolute bottom-full ${pos} mb-2 whitespace-nowrap rounded-sm bg-black/90 px-2 py-1 text-[11px] text-white opacity-0 transition group-hover/ctrl:opacity-100`}
       >
         {label}
       </span>
diff --git a/frontend/src/components/PlexPlaylistAdd.tsx b/frontend/src/components/PlexPlaylistAdd.tsx
index 9e05bf32..1789a307 100644
--- a/frontend/src/components/PlexPlaylistAdd.tsx
+++ b/frontend/src/components/PlexPlaylistAdd.tsx
@@ -100,7 +100,7 @@ export default function PlexPlaylistAdd({
           onChange={(e) => setNewName(e.target.value)}
           onKeyDown={(e) => e.key === "Enter" && createNew()}
           placeholder={t("plex.playlistAdd.newPlaceholder")}
-          className="glass-card min-w-0 flex-1 rounded-lg px-3 py-2 text-sm outline-none focus:border-accent"
+          className="glass-card min-w-0 flex-1 rounded-lg px-3 py-2 text-sm outline-hidden focus:border-accent"
         />
         <button
           onClick={createNew}
diff --git a/frontend/src/components/PlexPlaylistView.tsx b/frontend/src/components/PlexPlaylistView.tsx
index 3cec46a2..bc12e23b 100644
--- a/frontend/src/components/PlexPlaylistView.tsx
+++ b/frontend/src/components/PlexPlaylistView.tsx
@@ -116,7 +116,7 @@ type Ctx = {
 function Poster({ src, className }: { src: string; className: string }) {
   return (
     <div
-      className={`relative shrink-0 overflow-hidden rounded border border-border bg-surface ${className}`}
+      className={`relative shrink-0 overflow-hidden rounded-sm border border-border bg-surface ${className}`}
     >
       <img src={src} alt="" loading="lazy" className="h-full w-full object-cover" />
     </div>
@@ -161,11 +161,11 @@ function EpisodeRow({ ep, ctx, dense }: { ep: PlexCard; ctx: Ctx; dense: boolean
         className="group flex min-w-0 flex-1 items-center gap-2.5 text-left"
       >
         <div
-          className={`relative shrink-0 overflow-hidden rounded border border-border bg-surface ${dense ? "aspect-video w-14" : "aspect-video w-20"}`}
+          className={`relative shrink-0 overflow-hidden rounded-sm border border-border bg-surface ${dense ? "aspect-video w-14" : "aspect-video w-20"}`}
         >
           <img src={ep.thumb} alt="" loading="lazy" className="h-full w-full object-cover" />
           {ep.status === "watched" && (
-            <span className="absolute right-0.5 top-0.5 rounded bg-black/70 px-1 text-[9px] text-white">
+            <span className="absolute right-0.5 top-0.5 rounded-sm bg-black/70 px-1 text-[9px] text-white">
               ✓
             </span>
           )}
@@ -179,7 +179,7 @@ function EpisodeRow({ ep, ctx, dense }: { ep: PlexCard; ctx: Ctx; dense: boolean
       <button
         onClick={() => ctx.onRemove([ep.id])}
         disabled={ctx.busy}
-        className="shrink-0 rounded p-1 text-muted hover:text-red-400 disabled:opacity-30"
+        className="shrink-0 rounded-sm p-1 text-muted hover:text-red-400 disabled:opacity-30"
         aria-label="remove"
       >
         <X className="h-4 w-4" />
@@ -210,7 +210,7 @@ function MovieRow({ item, ctx }: { item: PlexCard; ctx: Ctx }) {
         onClick={() => ctx.onPlay(item.id)}
         className="group flex min-w-0 flex-1 items-center gap-3 text-left"
       >
-        <Poster src={item.thumb} className={dense ? "aspect-[2/3] w-10" : "aspect-[2/3] w-14"} />
+        <Poster src={item.thumb} className={dense ? "aspect-2/3 w-10" : "aspect-2/3 w-14"} />
         <div className="min-w-0">
           <div className="truncate text-sm font-medium">{item.title}</div>
           <div className="text-xs text-muted">{item.year}</div>
@@ -222,7 +222,7 @@ function MovieRow({ item, ctx }: { item: PlexCard; ctx: Ctx }) {
       <button
         onClick={() => ctx.onRemove([item.id])}
         disabled={ctx.busy}
-        className="shrink-0 rounded p-1 text-muted hover:text-red-400 disabled:opacity-30"
+        className="shrink-0 rounded-sm p-1 text-muted hover:text-red-400 disabled:opacity-30"
         aria-label="remove"
       >
         <X className="h-4 w-4" />
@@ -256,7 +256,7 @@ function ShowGroup({ block, ctx }: { block: Extract<Block, { kind: "show" }>; ct
         <DragHandle {...attributes} {...listeners} />
         <button
           onClick={() => ctx.toggleShow(block.showKey)}
-          className="grid h-6 w-6 shrink-0 place-items-center rounded text-muted hover:text-fg"
+          className="grid h-6 w-6 shrink-0 place-items-center rounded-sm text-muted hover:text-fg"
           aria-expanded={open}
         >
           {open ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
@@ -269,7 +269,7 @@ function ShowGroup({ block, ctx }: { block: Extract<Block, { kind: "show" }>; ct
                 src={ep.thumb}
                 alt=""
                 loading="lazy"
-                className="aspect-[2/3] w-8 rounded border-2 border-surface object-cover"
+                className="aspect-2/3 w-8 rounded-sm border-2 border-surface object-cover"
                 style={{ marginLeft: i ? -14 : 0 }}
               />
             ))}
@@ -285,7 +285,7 @@ function ShowGroup({ block, ctx }: { block: Extract<Block, { kind: "show" }>; ct
           onClick={() => ctx.onRemove(block.items.map((i) => i.id))}
           disabled={ctx.busy}
           title={t("plex.playlist.removeShow")}
-          className="shrink-0 rounded p-1 text-muted hover:text-red-400 disabled:opacity-30"
+          className="shrink-0 rounded-sm p-1 text-muted hover:text-red-400 disabled:opacity-30"
         >
           <X className="h-4 w-4" />
         </button>
@@ -306,7 +306,7 @@ function ShowGroup({ block, ctx }: { block: Extract<Block, { kind: "show" }>; ct
                     {dense && (
                       <button
                         onClick={() => ctx.toggleSeason(sKey)}
-                        className="grid h-5 w-5 shrink-0 place-items-center rounded text-muted hover:text-fg"
+                        className="grid h-5 w-5 shrink-0 place-items-center rounded-sm text-muted hover:text-fg"
                         aria-expanded={sOpen}
                       >
                         {sOpen ? (
@@ -323,7 +323,7 @@ function ShowGroup({ block, ctx }: { block: Extract<Block, { kind: "show" }>; ct
                       onClick={() => ctx.onRemove(s.items.map((i) => i.id))}
                       disabled={ctx.busy}
                       title={t("plex.playlist.removeSeason")}
-                      className="ml-1 rounded p-0.5 text-muted hover:text-red-400 disabled:opacity-30"
+                      className="ml-1 rounded-sm p-0.5 text-muted hover:text-red-400 disabled:opacity-30"
                     >
                       <X className="h-3.5 w-3.5" />
                     </button>
@@ -532,7 +532,7 @@ export default function PlexPlaylistView({
               onChange={(e) => setName(e.target.value)}
               onKeyDown={(e) => e.key === "Enter" && rename()}
               onBlur={rename}
-              className="glass-card min-w-0 flex-1 rounded-lg px-3 py-1.5 text-lg font-bold outline-none focus:border-accent"
+              className="glass-card min-w-0 flex-1 rounded-lg px-3 py-1.5 text-lg font-bold outline-hidden focus:border-accent"
             />
           ) : (
             <h1 className="min-w-0 flex-1 truncate text-2xl font-bold">{q.data?.title ?? " "}</h1>
diff --git a/frontend/src/components/PlexSidebar.tsx b/frontend/src/components/PlexSidebar.tsx
index 9a3bff9f..b18e3515 100644
--- a/frontend/src/components/PlexSidebar.tsx
+++ b/frontend/src/components/PlexSidebar.tsx
@@ -171,7 +171,7 @@ export default function PlexSidebar({ layout, setLayout, collapsed, onToggleColl
               onChange={(e) => setNewPlaylist(e.target.value)}
               onKeyDown={(e) => e.key === "Enter" && createPlaylist()}
               placeholder={t("plex.playlist.newPlaceholder")}
-              className="glass-card min-w-0 flex-1 rounded-lg px-2 py-1 text-xs outline-none focus:border-accent"
+              className="glass-card min-w-0 flex-1 rounded-lg px-2 py-1 text-xs outline-hidden focus:border-accent"
             />
             <button
               onClick={createPlaylist}
@@ -190,7 +190,7 @@ export default function PlexSidebar({ layout, setLayout, collapsed, onToggleColl
                 <button
                   key={p.id}
                   onClick={() => onOpenPlaylist(p.id)}
-                  className="glass-hover flex w-full items-center gap-2 rounded px-1.5 py-1 text-left text-sm"
+                  className="glass-hover flex w-full items-center gap-2 rounded-sm px-1.5 py-1 text-left text-sm"
                 >
                   <ListMusic className="h-3.5 w-3.5 shrink-0 text-muted" />
                   <span className="min-w-0 flex-1 truncate">{p.title}</span>
@@ -298,7 +298,7 @@ export default function PlexSidebar({ layout, setLayout, collapsed, onToggleColl
             value={collSearch}
             onChange={(e) => setCollSearch(e.target.value)}
             placeholder={t("plex.filter.collectionSearch")}
-            className="mb-1.5 w-full rounded-lg border border-border bg-card px-2 py-1 text-sm focus:border-accent focus:outline-none"
+            className="mb-1.5 w-full rounded-lg border border-border bg-card px-2 py-1 text-sm focus:border-accent focus:outline-hidden"
           />
           <div
             ref={collFade.ref}
@@ -519,7 +519,7 @@ function Chip({
 function RemovableChip({ label, onRemove }: { label: string; onRemove: () => void }) {
   return (
     <span className="inline-flex items-center gap-1 rounded-full bg-accent/15 text-accent px-2 py-1 text-xs">
-      <span className="truncate max-w-[9rem]">{label}</span>
+      <span className="truncate max-w-36">{label}</span>
       <button onClick={onRemove} className="hover:opacity-70" aria-label="remove">
         <X className="w-3 h-3" />
       </button>
@@ -546,7 +546,7 @@ function NumberInput({
         const n = e.target.value === "" ? null : Number(e.target.value);
         onChange(n != null && Number.isFinite(n) ? n : null);
       }}
-      className="w-20 rounded-lg border border-border bg-card px-2 py-1 text-sm tabular-nums focus:border-accent focus:outline-none"
+      className="w-20 rounded-lg border border-border bg-card px-2 py-1 text-sm tabular-nums focus:border-accent focus:outline-hidden"
     />
   );
 }
diff --git a/frontend/src/components/ProfileEditor.tsx b/frontend/src/components/ProfileEditor.tsx
index 3bc22a6d..88399970 100644
--- a/frontend/src/components/ProfileEditor.tsx
+++ b/frontend/src/components/ProfileEditor.tsx
@@ -129,14 +129,14 @@ export default function ProfileEditor({ onClose }: { onClose: () => void }) {
             <button
               onClick={() => startEdit(p)}
               title={t("downloads.actions.rename")}
-              className="p-1 rounded hover:bg-surface text-muted hover:text-fg"
+              className="p-1 rounded-sm hover:bg-surface text-muted hover:text-fg"
             >
               <Pencil className="w-3.5 h-3.5" />
             </button>
             <button
               onClick={() => onDelete(p)}
               title={t("downloads.profiles.delete")}
-              className="p-1 rounded hover:bg-surface text-muted hover:text-red-400"
+              className="p-1 rounded-sm hover:bg-surface text-muted hover:text-red-400"
             >
               <Trash2 className="w-3.5 h-3.5" />
             </button>
diff --git a/frontend/src/components/ReleaseNotes.tsx b/frontend/src/components/ReleaseNotes.tsx
index 19d1d6ce..c382399c 100644
--- a/frontend/src/components/ReleaseNotes.tsx
+++ b/frontend/src/components/ReleaseNotes.tsx
@@ -38,7 +38,7 @@ export default function ReleaseNotes({
               <h3 className="text-base font-semibold">v{r.version}</h3>
               <span className="text-xs text-muted">{fmtDate(r.date)}</span>
               {r.sha && (
-                <span className="text-[11px] font-mono text-muted bg-surface px-1.5 py-0.5 rounded">
+                <span className="text-[11px] font-mono text-muted bg-surface px-1.5 py-0.5 rounded-sm">
                   {r.sha}
                 </span>
               )}
diff --git a/frontend/src/components/SavedViewsWidget.tsx b/frontend/src/components/SavedViewsWidget.tsx
index cc2dae4a..c91f4ec5 100644
--- a/frontend/src/components/SavedViewsWidget.tsx
+++ b/frontend/src/components/SavedViewsWidget.tsx
@@ -172,7 +172,7 @@ export default function SavedViewsWidget({
             }}
             placeholder={t("views.namePlaceholder")}
             maxLength={80}
-            className="flex-1 min-w-0 bg-card border border-border rounded-lg px-2 py-1 text-xs outline-none focus:border-accent"
+            className="flex-1 min-w-0 bg-card border border-border rounded-lg px-2 py-1 text-xs outline-hidden focus:border-accent"
           />
           <button
             onClick={() => void save()}
@@ -256,7 +256,7 @@ function ViewRow({
             if (e.key === "Escape") onCancelRename();
           }}
           maxLength={80}
-          className="flex-1 min-w-0 bg-card border border-border rounded-lg px-2 py-1 text-xs outline-none focus:border-accent"
+          className="flex-1 min-w-0 bg-card border border-border rounded-lg px-2 py-1 text-xs outline-hidden focus:border-accent"
         />
         <button
           onClick={() => onRename(draft)}
@@ -316,21 +316,21 @@ function ViewRow({
         <button
           onClick={onShare}
           title={t("views.share")}
-          className="p-1 rounded text-muted opacity-0 group-hover:opacity-100 hover:text-fg transition"
+          className="p-1 rounded-sm text-muted opacity-0 group-hover:opacity-100 hover:text-fg transition"
         >
           <Share2 className="w-3.5 h-3.5" />
         </button>
         <button
           onClick={onStartRename}
           title={t("views.rename")}
-          className="p-1 rounded text-muted opacity-0 group-hover:opacity-100 hover:text-fg transition"
+          className="p-1 rounded-sm text-muted opacity-0 group-hover:opacity-100 hover:text-fg transition"
         >
           <Pencil className="w-3.5 h-3.5" />
         </button>
         <button
           onClick={onDelete}
           title={t("views.delete")}
-          className="p-1 rounded text-muted opacity-0 group-hover:opacity-100 hover:text-red-400 transition"
+          className="p-1 rounded-sm text-muted opacity-0 group-hover:opacity-100 hover:text-red-400 transition"
         >
           <Trash2 className="w-3.5 h-3.5" />
         </button>
diff --git a/frontend/src/components/Scheduler.tsx b/frontend/src/components/Scheduler.tsx
index 1dedc820..cc9b387c 100644
--- a/frontend/src/components/Scheduler.tsx
+++ b/frontend/src/components/Scheduler.tsx
@@ -172,7 +172,7 @@ function JobRow({
                   if (e.key === "Enter") save();
                   if (e.key === "Escape") setEditing(false);
                 }}
-                className="w-16 bg-card border border-border rounded px-1.5 py-0.5 text-xs outline-none focus:border-accent"
+                className="w-16 bg-card border border-border rounded-sm px-1.5 py-0.5 text-xs outline-hidden focus:border-accent"
               />
               <span className="text-muted text-xs">{t("scheduler.minutes")}</span>
               <button
@@ -281,7 +281,7 @@ function MaintenanceSettings({
           onChange={(e) => setVal(e.target.value)}
           onKeyDown={(e) => e.key === "Enter" && save()}
           aria-label={t("scheduler.maintenance.batchLabel")}
-          className="w-28 bg-card border border-border rounded px-2 py-1 text-sm tabular-nums outline-none focus:border-accent"
+          className="w-28 bg-card border border-border rounded-sm px-2 py-1 text-sm tabular-nums outline-hidden focus:border-accent"
         />
         <button
           onClick={save}
diff --git a/frontend/src/components/SearchBar.tsx b/frontend/src/components/SearchBar.tsx
index e7dc2172..7b2983bd 100644
--- a/frontend/src/components/SearchBar.tsx
+++ b/frontend/src/components/SearchBar.tsx
@@ -40,7 +40,7 @@ export default function SearchBar({
           if (e.key === "Enter") fire();
         }}
         placeholder={placeholder}
-        className="flex-1 min-w-0 bg-transparent outline-none text-sm placeholder:text-muted"
+        className="flex-1 min-w-0 bg-transparent outline-hidden text-sm placeholder:text-muted"
       />
       {value && (
         <button
diff --git a/frontend/src/components/SettingsPanel.tsx b/frontend/src/components/SettingsPanel.tsx
index d65a5e4e..94a97b40 100644
--- a/frontend/src/components/SettingsPanel.tsx
+++ b/frontend/src/components/SettingsPanel.tsx
@@ -403,7 +403,7 @@ function SignInMethods({ me }: { me: Me }) {
   };
 
   const inputCls =
-    "w-full bg-card border border-border rounded-xl px-3 py-2 text-sm outline-none focus:border-accent";
+    "w-full bg-card border border-border rounded-xl px-3 py-2 text-sm outline-hidden focus:border-accent";
 
   // Offer Google only when this instance has Google OAuth configured (or the account is already
   // linked — then we still show its "Connected" status even if the instance creds were removed).
diff --git a/frontend/src/components/SetupWizard.tsx b/frontend/src/components/SetupWizard.tsx
index e02e7c35..cab9bd00 100644
--- a/frontend/src/components/SetupWizard.tsx
+++ b/frontend/src/components/SetupWizard.tsx
@@ -130,7 +130,7 @@ export default function SetupWizard() {
   }
 
   const inputCls =
-    "w-full bg-card border border-border rounded-xl px-3 py-2 text-sm outline-none focus:border-accent";
+    "w-full bg-card border border-border rounded-xl px-3 py-2 text-sm outline-hidden focus:border-accent";
 
   return (
     <Centered>
diff --git a/frontend/src/components/ShareDialog.tsx b/frontend/src/components/ShareDialog.tsx
index edc01e45..60e9513e 100644
--- a/frontend/src/components/ShareDialog.tsx
+++ b/frontend/src/components/ShareDialog.tsx
@@ -135,7 +135,7 @@ function LinkRow({ link, onChanged }: { link: ShareLink; onChanged: () => void }
         <input
           readOnly
           value={fullUrl}
-          className="flex-1 min-w-0 bg-transparent text-xs text-muted truncate outline-none"
+          className="flex-1 min-w-0 bg-transparent text-xs text-muted truncate outline-hidden"
         />
         <button
           onClick={copy}
@@ -184,7 +184,10 @@ function LinkRow({ link, onChanged }: { link: ShareLink; onChanged: () => void }
           <Eye className="w-3 h-3" /> {t("downloads.share.views", { n: link.view_count })}
         </span>
         {badges.map((b) => (
-          <span key={b} className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-surface">
+          <span
+            key={b}
+            className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-sm bg-surface"
+          >
             {b === t("downloads.share.hasPassword") && <Lock className="w-3 h-3" />}
             {b}
           </span>
@@ -208,7 +211,7 @@ function LinkRow({ link, onChanged }: { link: ShareLink; onChanged: () => void }
             placeholder={t(
               link.has_password ? "downloads.share.newPassword" : "downloads.share.setPassword",
             )}
-            className="flex-1 min-w-0 bg-card border border-border rounded-md px-2 py-1 text-xs outline-none focus:border-accent"
+            className="flex-1 min-w-0 bg-card border border-border rounded-md px-2 py-1 text-xs outline-hidden focus:border-accent"
           />
           <button
             onClick={() => savePass.mutate(newPass.trim())}
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index a4520f73..2535a7b6 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -46,7 +46,7 @@ function TagChip({
       data-tag={tag.name}
       onClick={onClick}
       title={t("sidebar.channelCount", { count })}
-      className={`inline-flex items-center gap-1.5 text-xs px-2.5 py-1 rounded-full border shadow-sm hover:shadow active:translate-y-px transition ${
+      className={`inline-flex items-center gap-1.5 text-xs px-2.5 py-1 rounded-full border shadow-xs hover:shadow-sm active:translate-y-px transition ${
         active
           ? "bg-accent text-accent-fg border-accent"
           : "bg-card border-border text-fg hover:border-accent"
@@ -169,7 +169,7 @@ export default function Sidebar({
                         dateTo: undefined,
                       })
                     }
-                    className={`text-xs px-2.5 py-1 rounded-full border shadow-sm active:translate-y-px transition ${
+                    className={`text-xs px-2.5 py-1 rounded-full border shadow-xs active:translate-y-px transition ${
                       activePreset
                         ? "bg-accent text-accent-fg border-accent"
                         : "bg-card border-border hover:border-accent"
@@ -185,7 +185,7 @@ export default function Sidebar({
                   setCustomDates(next);
                   if (next) setFilters({ ...filters, maxAgeDays: undefined });
                 }}
-                className={`text-xs px-2.5 py-1 rounded-full border shadow-sm active:translate-y-px transition ${
+                className={`text-xs px-2.5 py-1 rounded-full border shadow-xs active:translate-y-px transition ${
                   customDates || filters.dateFrom || filters.dateTo
                     ? "bg-accent text-accent-fg border-accent"
                     : "bg-card border-border hover:border-accent"
@@ -209,7 +209,7 @@ export default function Sidebar({
                         maxAgeDays: undefined,
                       })
                     }
-                    className="bg-card border border-border rounded-md px-2 py-1 text-xs outline-none focus:border-accent"
+                    className="bg-card border border-border rounded-md px-2 py-1 text-xs outline-hidden focus:border-accent"
                   />
                 </label>
                 <label className="flex items-center justify-between gap-2 text-xs">
@@ -224,7 +224,7 @@ export default function Sidebar({
                         maxAgeDays: undefined,
                       })
                     }
-                    className="bg-card border border-border rounded-md px-2 py-1 text-xs outline-none focus:border-accent"
+                    className="bg-card border border-border rounded-md px-2 py-1 text-xs outline-hidden focus:border-accent"
                   />
                 </label>
                 {(filters.dateFrom || filters.dateTo) && (
diff --git a/frontend/src/components/TagManager.tsx b/frontend/src/components/TagManager.tsx
index 9ea80199..fbcafbf2 100644
--- a/frontend/src/components/TagManager.tsx
+++ b/frontend/src/components/TagManager.tsx
@@ -51,7 +51,7 @@ function TagRow({
         onChange={(e) => setName(e.target.value)}
         onBlur={commit}
         onKeyDown={(e) => e.key === "Enter" && (e.target as HTMLInputElement).blur()}
-        className="flex-1 min-w-0 bg-card border border-border rounded-md px-2 py-1.5 text-sm outline-none focus:border-accent"
+        className="flex-1 min-w-0 bg-card border border-border rounded-md px-2 py-1.5 text-sm outline-hidden focus:border-accent"
       />
       <span
         ref={pop.refs.setReference}
@@ -160,7 +160,7 @@ export default function TagManager({
           <div
             ref={listFade.ref}
             style={listFade.style}
-            className="flex flex-col gap-2 max-h-[22rem] overflow-y-auto no-scrollbar pr-1"
+            className="flex flex-col gap-2 max-h-88 overflow-y-auto no-scrollbar pr-1"
           >
             {userTags.map((tag) => (
               <TagRow
@@ -201,7 +201,7 @@ export default function TagManager({
             value={newName}
             onChange={(e) => setNewName(e.target.value)}
             placeholder={t("tagManager.newPlaceholder")}
-            className="flex-1 min-w-0 bg-card border border-border rounded-md px-2 py-1.5 text-sm outline-none focus:border-accent"
+            className="flex-1 min-w-0 bg-card border border-border rounded-md px-2 py-1.5 text-sm outline-hidden focus:border-accent"
           />
           <button
             type="submit"
diff --git a/frontend/src/components/Toaster.tsx b/frontend/src/components/Toaster.tsx
index 1db2d501..b6bfc075 100644
--- a/frontend/src/components/Toaster.tsx
+++ b/frontend/src/components/Toaster.tsx
@@ -38,7 +38,7 @@ export default function Toaster() {
             <Icon className={`w-5 h-5 shrink-0 mt-0.5 ${color}`} />
             <div className="min-w-0 flex-1">
               {toast.title && <div className="text-sm font-semibold">{toast.title}</div>}
-              <div className="text-sm break-words">
+              <div className="text-sm wrap-break-word">
                 {toast.message}
                 {toast.repeat > 1 && (
                   <span className="ml-1.5 align-middle text-[11px] font-semibold text-muted tabular-nums">
diff --git a/frontend/src/components/VideoCard.tsx b/frontend/src/components/VideoCard.tsx
index 8e1500e0..2b4c7f3d 100644
--- a/frontend/src/components/VideoCard.tsx
+++ b/frontend/src/components/VideoCard.tsx
@@ -244,7 +244,7 @@ function Thumb({
         <div className="w-full h-full" />
       )}
       {video.duration_seconds != null ? (
-        <span className="absolute bottom-1.5 right-1.5 bg-black/80 text-white text-[11px] font-medium px-1.5 py-0.5 rounded">
+        <span className="absolute bottom-1.5 right-1.5 bg-black/80 text-white text-[11px] font-medium px-1.5 py-0.5 rounded-sm">
           {formatDuration(video.duration_seconds)}
         </span>
       ) : video.live_status === "live" || video.live_status === "upcoming" ? (
@@ -257,7 +257,7 @@ function Thumb({
         </span>
       ) : null}
       {video.live_status === "was_live" && (
-        <span className="absolute top-1.5 left-1.5 bg-accent text-accent-fg text-[10px] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded">
+        <span className="absolute top-1.5 left-1.5 bg-accent text-accent-fg text-[10px] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded-sm">
           {t("card.stream")}
         </span>
       )}
@@ -288,7 +288,7 @@ function Thumb({
                 title={t("card.restartTitle")}
                 aria-label={t("card.restart")}
                 className={clsx(
-                  "inline-flex items-center justify-center gap-1.5 font-medium bg-white/15 text-white backdrop-blur-sm hover:bg-white/25 transition",
+                  "inline-flex items-center justify-center gap-1.5 font-medium bg-white/15 text-white backdrop-blur-xs hover:bg-white/25 transition",
                   small ? "w-9 h-9 rounded-full" : "px-3 py-1.5 rounded-lg text-sm",
                 )}
               >
@@ -307,7 +307,7 @@ function Thumb({
               )}
             >
               <Play
-                className={clsx("fill-current translate-x-[1px]", small ? "w-4 h-4" : "w-5 h-5")}
+                className={clsx("fill-current translate-x-px", small ? "w-4 h-4" : "w-5 h-5")}
               />
             </button>
           )}
diff --git a/frontend/src/components/VideoEditor.tsx b/frontend/src/components/VideoEditor.tsx
index d3ca5d78..d2a0ed57 100644
--- a/frontend/src/components/VideoEditor.tsx
+++ b/frontend/src/components/VideoEditor.tsx
@@ -44,7 +44,7 @@ type Frac = { x: number; y: number; w: number; h: number };
 type Drag = { type: "seek" } | { type: "boundary"; bi: number };
 
 const numCls =
-  "w-24 rounded-md bg-surface border border-border px-2 py-1 text-sm tabular-nums focus:outline-none focus:ring-2 focus:ring-accent/40";
+  "w-24 rounded-md bg-surface border border-border px-2 py-1 text-sm tabular-nums focus:outline-hidden focus:ring-2 focus:ring-accent/40";
 const MIN_SEG = 0.1;
 
 export default function VideoEditor({ job, onClose }: { job: DownloadJob; onClose: () => void }) {
@@ -348,7 +348,7 @@ export default function VideoEditor({ job, onClose }: { job: DownloadJob; onClos
                 onPointerDown={(e) => onCropDown(e, "move")}
               >
                 <div
-                  className="absolute -right-1.5 -bottom-1.5 w-4 h-4 rounded-sm bg-accent cursor-nwse-resize"
+                  className="absolute -right-1.5 -bottom-1.5 w-4 h-4 rounded-xs bg-accent cursor-nwse-resize"
                   onPointerDown={(e) => onCropDown(e, "resize")}
                 />
               </div>
@@ -432,7 +432,7 @@ export default function VideoEditor({ job, onClose }: { job: DownloadJob; onClos
                     toggleKeep(s.id);
                   }}
                   className={clsx(
-                    "absolute top-1 left-1 p-0.5 rounded bg-black/50 backdrop-blur-sm",
+                    "absolute top-1 left-1 p-0.5 rounded-sm bg-black/50 backdrop-blur-xs",
                     s.keep ? "text-accent" : "text-muted",
                   )}
                   title={s.keep ? t("editor.drop") : t("editor.keep")}
@@ -449,7 +449,7 @@ export default function VideoEditor({ job, onClose }: { job: DownloadJob; onClos
                 style={{ left: pct(b) }}
               >
                 <div
-                  className="w-1 h-full bg-white/90 cursor-ew-resize rounded"
+                  className="w-1 h-full bg-white/90 cursor-ew-resize rounded-sm"
                   onPointerDown={(e) => {
                     e.stopPropagation();
                     setDrag({ type: "boundary", bi });
@@ -460,7 +460,7 @@ export default function VideoEditor({ job, onClose }: { job: DownloadJob; onClos
                     e.stopPropagation();
                     deleteBoundary(bi);
                   }}
-                  className="absolute -top-0 -right-2 p-0.5 rounded-full bg-black/70 text-muted hover:text-red-400"
+                  className="absolute top-0 -right-2 p-0.5 rounded-full bg-black/70 text-muted hover:text-red-400"
                   title={t("editor.removeCut")}
                 >
                   <X className="w-3 h-3" />
diff --git a/frontend/src/components/ViewSwitcher.tsx b/frontend/src/components/ViewSwitcher.tsx
index 61d38d98..14c14ac5 100644
--- a/frontend/src/components/ViewSwitcher.tsx
+++ b/frontend/src/components/ViewSwitcher.tsx
@@ -94,7 +94,7 @@ export default function ViewSwitcher<T extends string>({
                   setOpen(false);
                 }}
                 label={o.label}
-                className={`w-full flex items-center gap-2 px-2 py-1.5 rounded-lg text-sm text-left outline-none transition data-[active]:bg-[color-mix(in_srgb,var(--accent)_24%,transparent)] ${
+                className={`w-full flex items-center gap-2 px-2 py-1.5 rounded-lg text-sm text-left outline-hidden transition data-active:bg-[color-mix(in_srgb,var(--accent)_24%,transparent)] ${
                   on ? "text-accent" : "text-fg hover:bg-card"
                 }`}
               >
diff --git a/frontend/src/components/WatchPage.tsx b/frontend/src/components/WatchPage.tsx
index 60efb975..48e6596b 100644
--- a/frontend/src/components/WatchPage.tsx
+++ b/frontend/src/components/WatchPage.tsx
@@ -190,7 +190,7 @@ export default function WatchPage() {
                 onChange={(e) => setPassword(e.target.value)}
                 onKeyDown={(e) => e.key === "Enter" && password && unlock()}
                 placeholder={T.passwordPlaceholder}
-                className="w-full rounded-lg bg-surface border border-border px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-accent/40"
+                className="w-full rounded-lg bg-surface border border-border px-3 py-2 text-sm outline-hidden focus:ring-2 focus:ring-accent/40"
               />
               {error && <div className="text-sm text-red-400 mt-2">{error}</div>}
               <button
diff --git a/frontend/src/components/Welcome.tsx b/frontend/src/components/Welcome.tsx
index c3af9dbb..1ae4e230 100644
--- a/frontend/src/components/Welcome.tsx
+++ b/frontend/src/components/Welcome.tsx
@@ -90,7 +90,7 @@ export default function Welcome() {
           href={REPO_URL}
           target="_blank"
           rel="noopener noreferrer"
-          className="group mt-8 flex flex-col items-center gap-x-4 gap-y-2 rounded-2xl border border-accent/25 bg-accent/[0.06] px-5 py-4 text-center sm:flex-row sm:text-left hover:border-accent/50 transition"
+          className="group mt-8 flex flex-col items-center gap-x-4 gap-y-2 rounded-2xl border border-accent/25 bg-accent/6 px-5 py-4 text-center sm:flex-row sm:text-left hover:border-accent/50 transition"
         >
           <span className="grid place-items-center w-10 h-10 rounded-xl bg-accent/15 text-accent shrink-0">
             <Code2 className="w-5 h-5" />
@@ -213,7 +213,7 @@ function Preview({
   if (failed) {
     return (
       <div className={`glass-card rounded-2xl overflow-hidden ${className ?? ""}`}>
-        <div className="w-full h-full grid place-items-center bg-gradient-to-br from-accent/10 to-card text-muted text-sm p-6 text-center">
+        <div className="w-full h-full grid place-items-center bg-linear-to-br from-accent/10 to-card text-muted text-sm p-6 text-center">
           {label}
         </div>
       </div>
@@ -258,7 +258,7 @@ function Lightbox({ src, label, onClose }: { src: string; label: string; onClose
   }, [onClose]);
   return (
     <div
-      className="fixed inset-0 z-popover grid place-items-center bg-black/80 backdrop-blur-sm p-4 sm:p-8"
+      className="fixed inset-0 z-popover grid place-items-center bg-black/80 backdrop-blur-xs p-4 sm:p-8"
       onClick={onClose}
       role="dialog"
       aria-modal="true"
@@ -431,7 +431,7 @@ function AuthCard() {
   }
 
   const inputCls =
-    "w-full bg-card border border-border rounded-xl px-3 py-2.5 text-sm outline-none focus:border-accent";
+    "w-full bg-card border border-border rounded-xl px-3 py-2.5 text-sm outline-hidden focus:border-accent";
   const titleKey = TITLE_KEY[mode];
 
   return (
diff --git a/frontend/src/components/auditColumns.tsx b/frontend/src/components/auditColumns.tsx
index f301a1e7..1985c9c8 100644
--- a/frontend/src/components/auditColumns.tsx
+++ b/frontend/src/components/auditColumns.tsx
@@ -81,12 +81,12 @@ export function auditColumns(
       render: (r) => {
         const change = changeText(r);
         return (
-          // break-words (wrap), NOT truncate: in the auto-layout table a `truncate` (nowrap) cell
+          // wrap-break-word (wrap), NOT truncate: in the auto-layout table a `truncate` (nowrap) cell
           // sizes to its longest row, so one long summary/change stretched the whole table past the
           // card (the row rules bled into the page). Wrapping keeps every row inside the container.
           <div className="min-w-0">
-            {r.summary && <div className="break-words">{r.summary}</div>}
-            {change && <div className="text-[11px] text-muted break-words">{change}</div>}
+            {r.summary && <div className="wrap-break-word">{r.summary}</div>}
+            {change && <div className="text-[11px] text-muted wrap-break-word">{change}</div>}
           </div>
         );
       },
diff --git a/frontend/src/components/playlistColumns.tsx b/frontend/src/components/playlistColumns.tsx
index 01ec3382..1303f06b 100644
--- a/frontend/src/components/playlistColumns.tsx
+++ b/frontend/src/components/playlistColumns.tsx
@@ -59,7 +59,7 @@ export function playlistColumns({
           <button
             onClick={() => onPlay(v)}
             aria-label={`${t("card.play")} — ${v.title}`}
-            className="relative w-[62px] h-[35px] rounded overflow-hidden bg-surface shrink-0 group"
+            className="relative w-[62px] h-[35px] rounded-sm overflow-hidden bg-surface shrink-0 group"
           >
             {v.thumbnail_url && (
               <img src={v.thumbnail_url} alt="" className="w-full h-full object-cover" />
diff --git a/frontend/src/components/tableHeader.tsx b/frontend/src/components/tableHeader.tsx
index 55507138..a3744953 100644
--- a/frontend/src/components/tableHeader.tsx
+++ b/frontend/src/components/tableHeader.tsx
@@ -148,7 +148,7 @@ function FilterFunnel<T>({
             value={(value as string) ?? ""}
             onChange={(e) => onApply(col.key, e.target.value)}
             placeholder={col.header}
-            className="w-full bg-card border border-border rounded-md px-2 py-1 text-xs outline-none focus:border-accent"
+            className="w-full bg-card border border-border rounded-md px-2 py-1 text-xs outline-hidden focus:border-accent"
           />
         )}
         {f.kind === "select" && (
@@ -158,7 +158,7 @@ function FilterFunnel<T>({
               checked={!filterOn}
               onSelect={() => onApply(col.key, "")}
               label={t("datatable.all")}
-              className={`text-left text-xs px-2 py-1.5 rounded-md outline-none transition data-[active]:ring-1 data-[active]:ring-accent ${
+              className={`text-left text-xs px-2 py-1.5 rounded-md outline-hidden transition data-active:ring-1 data-active:ring-accent ${
                 !filterOn ? "bg-accent text-accent-fg" : "text-muted hover:bg-card"
               }`}
             >
@@ -171,7 +171,7 @@ function FilterFunnel<T>({
                 checked={value === o.value}
                 onSelect={() => onApply(col.key, o.value)}
                 label={o.label}
-                className={`text-left text-xs px-2 py-1.5 rounded-md outline-none transition data-[active]:ring-1 data-[active]:ring-accent ${
+                className={`text-left text-xs px-2 py-1.5 rounded-md outline-hidden transition data-active:ring-1 data-active:ring-accent ${
                   value === o.value ? "bg-accent text-accent-fg" : "text-muted hover:bg-card"
                 }`}
               >
@@ -197,7 +197,7 @@ function FilterFunnel<T>({
                     onApply(col.key, on ? arr.filter((x) => x !== o.value) : [...arr, o.value])
                   }
                   label={o.label}
-                  className={`flex w-full items-center gap-2 text-left text-xs px-2 py-1.5 rounded-md outline-none transition data-[active]:bg-[color-mix(in_srgb,var(--accent)_24%,transparent)] ${
+                  className={`flex w-full items-center gap-2 text-left text-xs px-2 py-1.5 rounded-md outline-hidden transition data-active:bg-[color-mix(in_srgb,var(--accent)_24%,transparent)] ${
                     on ? "text-fg" : "text-muted hover:bg-card"
                   }`}
                 >
diff --git a/frontend/src/components/ui/form.tsx b/frontend/src/components/ui/form.tsx
index 19e1befb..e3a90c6a 100644
--- a/frontend/src/components/ui/form.tsx
+++ b/frontend/src/components/ui/form.tsx
@@ -10,7 +10,7 @@ import Tooltip from "../Tooltip";
  * `bg-card rounded-xl focus:border-accent` style; unifying the two is a design call left to the
  * glass-consistency epic, not this DRY extract. */
 export const inputCls =
-  "w-full rounded-lg bg-surface border border-border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-accent/40";
+  "w-full rounded-lg bg-surface border border-border px-3 py-2 text-sm focus:outline-hidden focus:ring-2 focus:ring-accent/40";
 
 /** The standard text button style (used verbatim by ShareDialog + VideoEditor). */
 export const btnCls = "px-3 py-1.5 rounded-lg text-sm font-medium transition disabled:opacity-50";
diff --git a/frontend/src/index.css b/frontend/src/index.css
index f274e8dc..b9fb9329 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,6 +1,51 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+/* `inline` is load-bearing: the color vars (--bg/--accent/… below) are redefined at
+   runtime per html[data-scheme]/[data-theme], so utilities must inline the value and
+   resolve it at the USE site, not reference a once-computed --color-* token. This also
+   makes the v4 opacity modifier (bg-accent/40 → color-mix(… var(--accent) 40% …)) pick
+   up the active scheme's color. Same pattern as shadcn's v4 theme setup. */
+@theme inline {
+  --color-bg: var(--bg);
+  --color-surface: var(--surface);
+  --color-card: var(--card);
+  --color-border: var(--border);
+  --color-fg: var(--fg);
+  --color-muted: var(--muted);
+  --color-accent: var(--accent);
+  --color-accent-fg: var(--accent-fg);
+
+  --font-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+
+  --z-index-base: 10;
+  --z-index-menu: 20;
+  --z-index-chrome: 30;
+  --z-index-paneltab: 34;
+  --z-index-panel: 35;
+  --z-index-rail: 40;
+  --z-index-overlay: 50;
+  --z-index-popover: 60;
+  --z-index-tooltip: 100;
+  --z-index-tuner: 9999;
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
 
 :root {
   --font-scale: 1.06;
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
deleted file mode 100644
index c4f59510..00000000
--- a/frontend/tailwind.config.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ["./index.html", "./src/**/*.{ts,tsx}"],
-  theme: {
-    extend: {
-      colors: {
-        bg: "var(--bg)",
-        surface: "var(--surface)",
-        card: "var(--card)",
-        border: "var(--border)",
-        fg: "var(--fg)",
-        muted: "var(--muted)",
-        accent: "var(--accent)",
-        "accent-fg": "var(--accent-fg)",
-      },
-      fontFamily: {
-        sans: ["Inter", "system-ui", "-apple-system", "Segoe UI", "Roboto", "sans-serif"],
-      },
-      // Named z-index layers — the single source of truth for stacking order. Values are
-      // deliberately UNCHANGED from the magic numbers they replaced (this was a rename, not a
-      // renumber), so the visual layering is identical; the names just make the stack legible and
-      // give future changes one place to edit. Low → high:
-      //   base(10)   in-content decorations: sticky table head, card badges, in-flow dropdowns
-      //   menu(20)   menus/overlays sitting just over content
-      //   chrome(30) floating chrome: the header band, back-to-top, content filter/sort menus
-      //   paneltab / panel (34/35) the collapsed tab vs the expanded side panel (aside over tab)
-      //   rail(40)   full-height rails + docked bars: nav rail, chat dock, floating save bar
-      //   overlay(50) full-screen modals/players, toaster, onboarding, popovers over content
-      //   popover(60) a popover that must sit over an overlay (player scrub, tag menu) + the login gate
-      //   tooltip(100) tooltips, above everything interactive
-      //   tuner(9999)  the dev/lab glass tuner, deliberately on top of all
-      zIndex: {
-        base: "10",
-        menu: "20",
-        chrome: "30",
-        paneltab: "34",
-        panel: "35",
-        rail: "40",
-        overlay: "50",
-        popover: "60",
-        tooltip: "100",
-        tuner: "9999",
-      },
-    },
-  },
-  plugins: [],
-};